@charset "utf-8";

ul, li {list-style:none outside;}
A {text-decoration:none;}


/* date */
#date_layer {text-align:left;;}

#date_layer #box {width:120px;}
#date_layer #box .top {width:20px; float:left;}
#date_layer #box .day {width:80px; float:left;}

#date_layer .w {font-weight:bold; line-height:20px; color:#333333; font-size:16px; }
#date_layer .title {color:#565656; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x; width: calc(100% / 7);}
#date_layer .title1 {color:#82D4FF; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}
#date_layer .title2 {color:#FE7676; font-size:12px;  padding:0 0 0 0; background:url(./img/bg_01.gif) repeat-x;}

#date_layer .sun1 {color:#FE7676; font-size:12px; float:left;}
#date_layer .sat1 {color:#82D4FF; font-size:12px; float:left;}
#date_layer .day1 {color:#333333; font-size:12px; float:left;}

#date_layer .sun2 {font-weight:bold; line-height:20px; color:#FE7676; font-size:12px; float:left;}
#date_layer .sat2 {font-weight:bold; line-height:20px; color:#82D4FF; font-size:12px; float:left;}
#date_layer .day2 {font-weight:bold; line-height:20px; color:#FF9933; font-size:12px; float:left;}

#date_layer .sun3 {color:#ffbebe; font-size:11px; }
#date_layer .sat3 {color:#b8b8ff; font-size:11px; }
#date_layer .day3 {color:#999999; font-size:11px; }

#date_layer .dot {color:#000000; font-size:12px; }

#date_layer .check {color:#126420; font-size:11px; }
#date_layer .check2 {color:#999999; font-size:11px; }


/* list */
#list_layer .input {width:600px; height:22px; background-color:#f3f3f3; border:0px; padding:5px 2px 2px 2px; font-weight:bold; color:#333333;  font-size:12px;}

#list_layer .msg {padding:6px 0 0 3px; float:left;}
#list_layer .sub {padding:5px 0 0 3px; float:left;}
#list_layer .submit {padding:3px 0 0 5px; float:left;}

#list_layer #info li {line-height:18px; color:#898989;  font-size:11px;}

#list_layer .title {font-weight:bold; color:#333333;  font-size:12px; width: calc(100% / 7);}
#list_layer .list {line-height:20px; color:#898989;  font-size:11px;}

#list_layer .no {line-height:25px; font-size:12px; color:#898989;}

#list_layer .bgcolor0 {background-color:#ffffff;}
#list_layer .bgcolor1 {background-color:#f1f1f1;}
#list_layer .bgcolor2 {background-color:#ffffff;}


/*-------------------------------------------------------------------------------------*
 *  att_wrap                                                                      *
 *-------------------------------------------------------------------------------------*/
.att_wrap{float:left; width:100%;}
.att_top{width:100%; height:159px; overflow:hidden; display:flex; justify-content:space-between; align-items:center;}
.att_title {
    text-align: left;
    font-weight: bold;
    font-size: 40px;
    color: #434343;
    line-height: 1.2;
    letter-spacing: -1pt;
    transition: all 0.5s;
}
.att_title span{color:#4789f0;}

.att_info{width:30%; height:109px; border-radius:50px; background:#e2e2e2; display:flex; align-items:center;}
.att_info1{font-weight: bold;width:50%; padding:10px 0 10px 0; text-align:center; font-family:'GongGothicMedium'; font-size:20px; color:#545454; line-height:1.2; transition:all 0.5s;}
.att_info1 span{color:#4789f0; font-weight: bold;}
.att_info2{font-weight: bold;width:50%; padding:10px 0 10px 0; text-align:center; font-family:'GongGothicMedium'; font-size:20px; color:#545454; line-height:1.2; border-left: 1px solid #b8b8b8; transition:all 0.5s;}
.att_info2 span{color:#4789f0; font-weight: bold;}

.att_rank_wrap{float:left; width:100%;}
.att_rank{width:100%; min-width:990px; height:50px; background:linear-gradient(to right, #d1d1d1 0%, #d1d1d1 100%); display:flex; align-items: center; justify-content: space-between;}
.att_rank_title{width:18%; padding:0 0 0 20px; font-family:'GongGothicMedium'; font-weight:bold; font-size:18px; color:#545454;}
.att_rank_list{width:25%; padding:0 10px 0 10px; font-size:14px; color:#545454; display:flex; align-items: center; justify-content: space-evenly;}

.att_rank_num{display:inline-block; text-align:center; width:25px; height:25px; border-radius:0px; background:#4789f0; color:#ffffff; font-weight:700; line-height:25px;}

.att_calendar_wrap{float:left; width:100%;}
.att_calendar_top{float:left; width:100%; background:#ffffff; height:60px; border:1px solid #d1d1d1;}
.att_calendar_title{width:calc(100%/7);float:left;line-height:60px;text-align:center;font-family:'GongGothicMedium';font-weight:bold;font-size:16px;color:#545454;border-left:1px solid #d1d1d1;}
.sun{color:#ff0000; border-left:none;}
.sat{color:#0000cd;}

.att_calendar_center{float:left; width:100%;}
.att_calendar_day{width:calc(100%/7); height:120px; float:left; background:#eeeeee; border-left:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; position:relative; transition:all 0.5s;}
.att{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

@media screen and (max-width:1680px) {
	.att_item{width:30%; margin:0 0 0 -40px; transition:all 0.5s;}
	.att_item img{width:100%; transition:all 0.5s;}
	.att_title{font-size:32px;}
	.att_info1{font-size:16px;}
	.att_info2{font-size:16px;}
	.att_rank_wrap{overflow:hidden; overflow-x:scroll;}
	.att_rank_wrap::-webkit-scrollbar{height:3px;}
	.att_rank_wrap::-webkit-scrollbar-thumb{width:33%; background:#4789f0; border-radius: 10px;}
	.att_rank_wrap::-webkit-scrollbar-track {background:var(--bgalphacolor1);}	
	
	.att{width:90%;}
	.att img{width:100%;}
}

@media screen and (max-width:1240px) {
	.att_rank_title{font-size:16px;}
	.att_rank_list{font-size:12px;}
	.att_rank_num{width:20px; height:20px; line-height:20px;}
	
	.att_calendar_day{height:90px;}
}

@media screen and (max-width:768px) {
	.att_top{flex-direction: column; height:auto; padding:10px 0 10px;}
	.att_item{display:none;}
	.att_title{font-size:16px; line-height:1.5;}
	.att_title span{font-size:18px; letter-spacing:1px;}
	.att_info1{font-size:14px;}
	.att_info2{font-size:14px;}	
	.att_info{width:100%; height:60px; margin:10px 0 0 0; padding:0 10px; }
	.att_rank_title{padding:0 0 0 5px;}
	.att_rank_list{padding:0 5px 0 5px;}
	.att_calendar_day{height:60px;}
}
.con_box40 {float:left; width:100%; margin:40px 0 0 0;}
/*-------------------------------------------------------------------------------------*
 *  �ڸ�Ʈ                                                                               *
 *-------------------------------------------------------------------------------------*/
.comment_box{float:left; width:100%; background:#fff; padding:20px 20px 40px 20px; transition:all 0.5s;}

.comment_enter{display: flex; justify-content: space-between; align-items: center;}
.comment_input{width:calc(100% - 145px); padding:5px 5px 5px 10px; font-size:16px; background:#eeeeee; height:60px; border:1px solid #eeeeee; transition:all 0.5s;}
.comment_btn{display:inline-block; text-align:center; border-radius:0px; color:#ffffff !important; font-size:18px; letter-spacing:0pt; font-weight:; font-family:'EsaManru'; font-weight:bold; background:#4789f0; border:1px solid #4789f0; min-width:140px; height:60px; line-height:60px; transition:all 0.5s;}

.comment_view{float:left; width:100%; margin:10px 0 0 0;}
.comment_view_list{float:left; width:100%; margin:10px 0 0 0; background:#eeeeee; padding:10px 10px 20px 10px; border-radius:5px;}

.comment_po{background:#fff; color:var(--color1-basic); padding:0 5px 0 5px; line-height:32px; text-align:center; display:inline-block; font-size:12px; margin:0 5px 0 0; font-weight:bold; border-radius:0px; transition:all 0.5s;}
.comment_view_text{float:left; width:100%; font-size:13px; color:var(--color1-basic); padding:15px 10px 10px 10px; line-height:22px; transition:all 0.5s; font-weight: bold;}

@media screen and (max-width:1440px) {
.comment_input{width:calc(100% - 105px); height:80px;}
.comment_btn{min-width:100px; height:80px; line-height:80px; font-size:16px;}
.comment_box{padding:10px 10px 20px 10px;}
.comment_po{font-size:13px; padding:0 10px 0 10px;}
.comment_view_text{font-size:12px;}
}

@media screen and (max-width:768px) {
.att_calendar_day > div > a > span{
 display: none;
}
.comment_box{padding:10px 5px 20px 5px;}
.comment_input{height:60px;}
.comment_btn{font-weight:400; font-size:14px; height:60px; line-height:60px;}
.comment_po{width:48%; margin:0 0.5% 0.5% 0; font-size:12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

}
div {
    font-size: 13px;
    color: #545454;
    margin: 0 0 0 0;
    font-weight: bold;
    letter-spacing: 0px;
}
.font06 {
    color: #47bbf0;
    font-weight: 500;
}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%; overflow:hidden;}
.title {width:100%; font-family:'GongGothicMedium'; font-weight:500;  color:#4789f0; font-size:20px; line-height:60px; transition:all 0.5s;}
.title_more{float:right; font-family:Arial; font-weight:600; font-size:16px; color:#ff00a9; padding:5px 0 0 0;transition:all 0.5s;}
