@charset "utf-8";

ul, li {list-style:none outside;}
A {text-decoration:none;}

.member, .guest {
    color: #fff;
}
/* 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%; background: #1d2333;border-radius: 15px;border: 1px solid #313940;}
.att_top{width:100%; height:159px; overflow:hidden; display:flex; justify-content:space-between; align-items:center; padding: 15px;}
.att_title{text-align:left; font-family:'GongGothicMedium'; font-weight:bold; font-size:40px; color:#fff; line-height:1.2; letter-spacing:-1pt; transition:all 0.5s;}
.att_title span{color:#028df7;}

.att_info{width:30%; height:109px; border-radius:50px; background:#111; display:flex; align-items:center;}
.att_info1{width:50%; padding:10px 0 10px 0; text-align:center; font-family:'GongGothicMedium'; font-weight:bold; font-size:20px; color:#fff; line-height:1.2; transition:all 0.5s;}
.att_info1 span{color:#028df7;}
.att_info2{width:50%; padding:10px 0 10px 0; text-align:center; font-family:'GongGothicMedium'; font-weight:bold; font-size:20px; color:#fff; line-height:1.2; border-left: 1px solid #48485a; transition:all 0.5s;}
.att_info2 span{color:#028df7;}

.att_rank_wrap{float:left; width:100%;}
.att_rank {
    width: 100%;
    min-width: 100%;
    height: 50px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #313940;
}
.att_rank_title{width:18%; padding:0 0 0 20px; font-family:'GongGothicMedium'; font-weight:bold; font-size:15px; color:#fff;}
.att_rank_list{width:25%; padding:0 10px 0 10px; font-size:11px; color:#fff; 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:#028df7; color:#ffffff; font-weight:700; line-height:25px;}

.att_calendar_wrap{float:left; width:100%;}
.att_calendar_top{float:left; width:100%; background:#111; height:60px; border:1px solid #333;}
.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:#fff;border-left:1px solid #333;}
.sun{color:#ff0000; border-left:none;}
.sat{color:#97c6f8;}

.att_calendar_center{float:left; width:100%;}
.att_calendar_day{width:calc(100%/7); height:120px; float:left; background:#1d2333; border-left:1px solid #333; border-bottom:1px solid #333; 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; display: none;}
	.att_rank_wrap::-webkit-scrollbar{height:3px;}
	.att_rank_wrap::-webkit-scrollbar-thumb{width:33%; background:#028df7; 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: #111;
    padding: 20px 20px 40px 20px;
    transition: all 0.5s;
    border: 1px solid #313940;
    border-radius: 15px;
}
.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: #1d2333;
    height: 60px;
    border: 1px solid #333;
    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:300; background:#028df7; border:1px solid #028df7; 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:#1d2333; padding:10px 10px 20px 10px; border-radius:5px;}

.comment_po{background:#111; 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:300; 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;}

}
.font06 {
    color: #028df7;
    font-weight: 500;
}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%; overflow:hidden;}
.title_wrap > .title {width:100%; font-family:'GongGothicMedium'; font-weight:500;  color:#028df7; 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;}