@charset "utf-8";
#wrap {float:left; width:100%; overflow:hidden; min-height:100vh; position:relative; z-index:11;}

.background_img{position:fixed; display:block; width:100%; height:100%; background:#020205 url(../images/bg.jpg) center top no-repeat; background-size:100%; z-index:1;}
/*-------------------------------------------------------------------------------------*
 *  main_asset                                                                         *
 *-------------------------------------------------------------------------------------*/
.visuall_wrap{width:1060px; margin:0 auto; overflow:hidden;}

.title_wrap{float:left; width:100%; margin:30px 0 0 0;}
.title_box{width:1060px; margin:0 auto; padding:14px 17px; overflow:hidden; background:url(../images/bg_title.jpg) center top no-repeat; background-size:100% 100%;}
.title{float:left; width:100%; font-family:'EsaManru'; font-weight:500; font-size:20px; color:#ffffff;}
.title span{font-weight:700; color:#ffdb00;}

@media screen and (max-width:1060px) {
    .visuall_wrap{width:100%;}
    .visuall_wrap .swiper-slide img{width:100%; max-width:1060px; transition:all 0.5s;}
	
	.title_wrap{padding:0 10px;}
	.title_box{width:100%;}
}

@media screen and (max-width:768px) {
	.title{font-size:18px;}
	.title_wrap{margin:10px 0 0 0;}
}
/*-------------------------------------------------------------------------------------*
 *  sport_hl_wrap                                                                      *
 *-------------------------------------------------------------------------------------*/
.contents_wrap{float:left; width:100%; margin:20px 0 0 0; padding:0 0 30px 0;}
.contents_box{width:1060px; margin:0 auto; overflow:hidden;}
.con_box00 {float:left; width:100%; margin:0 0 0 0;}
.con_box05 {float:left; width:100%; margin:5px 0 0 0;}
.con_box10 {float:left; width:100%; margin:10px 0 0 0;}
.con_box20 {float:left; width:100%; margin:20px 0 0 0;}
.con_box30 {float:left; width:100%; margin:30px 0 0 0;}
.con_box40 {float:left; width:100%; margin:40px 0 0 0;}
.con_box50 {float:left; width:100%; margin:50px 0 0 0;}
.con_box60 {float:left; width:100%; margin:60px 0 0 0;}


.sport_hl_wrap{float:left; width:100%; display:flex; flex-wrap: wrap;}
.sport_hl{float:left; width:23.5%; height:auto; margin:0 2% 2% 0; overflow:hidden; display: flex; flex-direction: column; justify-content: space-between; background:#2f2f2f; border:1px solid #000000; border-radius:0 0 5px 5px; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4); transition:all 0.5s;}
.sport_hl:nth-child(4n){margin:0 0 2% 0;}
.sport_hl_thumb{width:100%; position:relative; height:0; padding-bottom:56.25%; overflow:hidden; transition:all 0.5s;}
.sport_hl_thumb img{position:absolute; top:0; left:0; width:100%; height:100%; background:#5b5b5b; transition:all 0.5s;}
.sport_hl_thumb:hover img{transform:scale(1.08);}

.sport_hl_info_box{float:left; width:100%; padding:15px 8px;}
.sport_hl_title{float:left; width:100%; padding:0 0 8px; border-bottom:1px solid #474747; font-family:'EsaManru'; font-weight:500; font-size:14px; color:#ffd800;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.sport_hl_link_box{float:left; width:100%; margin:10px 0 0 0; display:flex;}
.sport_hl_link_l{float:left; width:60%; padding:0 5px 0 0;}
.sport_hl_link_r{float:left; width:40%; display:flex; align-items:center;}

.link_add{float:left; width:100%; font-family:'EsaManru'; font-weight:500; font-size:16px; color:#ffffff; letter-spacing:-1px; white-space:nowrap; overflow:hidden;}
.link_code{float:left; width:100%; margin:5px 0 0 0; font-family:'EsaManru'; font-weight:500; font-size:16px; color:#797979; letter-spacing:-1px; white-space:nowrap; overflow:hidden;}
.link_code span{font-weight:700; color:#00e4ff;}

.link_btn{display:block; width:100%; height:34px; line-height:34px; border-radius:5px; text-align:center; background:linear-gradient(#acacac 0%, #535353 100%); font-family:'EsaManru'; font-weight:300; font-size:14px; color:#ffffff; text-shadow:1px 0 2px rgba(0,0,0,0.7);}
.link_btn:hover{background:linear-gradient(-45deg, #acacac 0%, #535353 100%);}


@media screen and (max-width:1060px) {
.contents_wrap{padding:0 10px 50px 10px;}	
.contents_box{width:100%;}	
	
.sport_hl{width:32.6666%; margin:0 1% 1% 0;}
.sport_hl:nth-child(4n){margin:0 1% 1% 0;}
.sport_hl:nth-child(3n){margin:0 0 1% 0;}
}


@media screen and (max-width:768px) {
.sport_hl{width:49%; min-width:0; margin:0 2% 2% 0;}
.sport_hl:nth-child(5n){margin:0 2% 2% 0;}
.sport_hl:nth-child(4n){margin:0 2% 2% 0;}
.sport_hl:nth-child(3n){margin:0 2% 2% 0;}
.sport_hl:nth-child(2n){margin:0 0 2% 0;}

}

@media screen and (max-width:768px) {
.contents_wrap{margin:10px 0 0 0;}
.link_add{font-size:14px;}
.link_code{font-size:14px;}
.link_btn{font-size:12px;}
}

@media screen and (max-width:375px) {
.sport_hl_link_box{flex-wrap:wrap;}
.sport_hl_link_l{width:100%;}
.sport_hl_link_r{width:100%; margin:5px 0 0 0;}
  
}
/*-------------------------------------------------------------------------------------*
 *  코멘트                                                                               *
 *-------------------------------------------------------------------------------------*/
.view_box		 {width:100%; background:#2f2f2f; border:1px solid #000000;}
.view_tr		 {width:100%; font-size:0; position:relative; border-bottom:1px solid #474747;}
.view_tr>*		 {width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view_tr>*:nth-child(1){max-width:100%; font-size:14px; width:calc(100% - 300px); text-align:left; padding-left:20px;}
.view1           {font-family:'EsaManru'; font-weight:500; font-size:14px; display:inline-block; text-align:center; vertical-align:middle; line-height:60px;}
.view2           {padding:10px 20px 10px 20px; width:100%; line-height:26px; min-height:150px; color:#ffffff; font-size:12px;}
.view1_po        {color:#dfdfde; padding:5px 8px 3px 8px; line-height:12px; text-align:center; display:inline-block;  font-size:12px; margin:0 5px 0 0; font-weight:300; border-radius:2px;}
.view_inner{background:#444444; padding:20px 30px 20px 30px; line-height:32px; font-family:'EsaManru'; font-weight:300; font-size:14px; transition:all 0.5s;}
 
.comment_box{float:left; width:100%; background:#2f2f2f; border:1px solid #000000; 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:14px; background:#141414; height:50px; border:1px solid #141414; transition:all 0.5s;}
.comment_btn{min-width:140px; height:50px; line-height:50px; border-radius:5px; text-align:center; background:linear-gradient(#acacac 0%, #535353 100%); font-family:'EsaManru'; font-weight:300; font-size:14px; color:#ffffff; text-shadow:1px 0 2px rgba(0,0,0,0.7);}

.comment_view{float:left; width:100%; margin:0px 0 0 0;}
.comment_view_list{float:left; width:100%; margin:10px 0 0 0; background:#404040; padding:10px 10px 20px 10px; border-radius:0px;}

.comment_po{background:#2f2f2f; color:#ffd800; padding:0 10px 0 10px; line-height:32px; text-align:center; display:inline-block; font-size:12px; margin:0 5px 0 0; font-weight:300; border-radius:3px; font-family:'EsaManru'; font-weight:300; transition:all 0.5s;}
.comment_view_text{float:left; width:100%; font-family:'EsaManru'; font-weight:300; font-size:13px; color:#efefef; padding:15px 10px 10px 10px; line-height:22px; transition:all 0.5s;}


.btn_wrap_center       {float:left; width:100%; text-align:center;}
.btn_wrap_center ul li {display:inline;}
.btn2_1         {display:inline-block; text-align:center; border-radius:0px; color:#ffffff; font-size:14px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; font-family:'EsaManru';}
.btn2_2         {display:inline-block; text-align:center; border-radius:0px; color:#ffffff; font-size:14px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; font-family:'EsaManru';}
.btn2_1         {background:linear-gradient(#ffd800 0%, #ff8300 100%); min-width:110px; height:42px; line-height:42px;}
.btn2_1:hover   {background:linear-gradient(-45deg, #ffd800 0%, #ff8300 100%);}

.btn2_2         {background:linear-gradient(#acacac 0%, #535353 100%); min-width:110px; height:42px; line-height:42px;}
.btn2_2:hover   {background:linear-gradient(-45deg, #acacac 0%, #535353 100%);}

@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) {
.view_tr>*{width:33.33333%; text-align:left; font-size:12px; padding-left:5px; line-height:50px;}
.view_tr>*:nth-child(1){width:100%; padding-left:10px; font-size:14px; border-bottom:1px solid #474747;}
.view2           {padding:5px; font-size:14px;}
.view1_po{font-size:12px;}

.comment_box{padding:10px 5px 20px 5px;}
.comment_input{height:60px;}
.comment_btn{font-family: 'Noto Sans KR', sans-serif; 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;}

.display_flex{display:flex; flex-wrap: nowrap; align-items: center; justify-content: center;}
.display_flex li{width:100%; margin:0 2px 0 2px;}
[class*="btn2_"] {min-width:100%; font-size:12px}
}

/*-------------------------------------------------------------------------------------*
 *  footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap{float:left; width:100%; margin:40px 0 0 0; background:#1c1c1c;}
.footer_box{width:1060px; margin:0 auto; padding:70px 0 70px 0; overflow:hidden; display:flex; align-items:center;}

.f_copy{font-family:'EsaManru'; font-weight:300; font-size:16px; color:#a2a2a2;}
.f_copy img{display:inline-block; padding:0 0 10px 0;}
 
.f_cafe{margin:0 0 0 auto;}
.f_cafe a{display:block; min-width:150px; height:60px; padding:10px 30px; border-radius:5px; text-align:center; line-height:22px; background:#00cb3b; border:1px solid #00cb3b; position:relative; font-family:'EsaManru'; font-weight:500; font-size:16px; color:#ffffff; transition:all 0.5s;}
.f_cafe a:hover{border:1px solid #fcff00;}
.f_cafe a span{display:block; font-weight:700; font-size:18px; color:#fcff00;}
.s_cafe{display:inline-block; width:48px; position:absolute; left:-25px; top:-15px;}

.f_tell{margin:0 0 0 20px;}
.f_tell a{display:inline-block; line-height:22px; font-family:'EsaManru'; font-weight:500; font-size:16px; color:#ffffff;}
.f_tell a span{display:inline-block; padding:0 0 0 10px; font-weight:500; font-size:18px; color:#00deff;}
.s_tell{display:inline-block; padding:0 10px 0 0; width:48px;}

@media screen and (max-width:1060px) {
.footer_wrap{margin:30px 0 0 0; padding:0 10px;}	
.footer_box{width:100%; padding:50px 0;}	

}

@media screen and (max-width:768px) {
.footer_box{align-items: center; justify-content: center; flex-wrap: wrap; padding:30px 0 30px 0;}	
.f_copy{font-size:12px; text-align:center; width:100%;}	
.f_cafe{margin:20px 1% 0 0; width:49.5%;}
.f_tell{margin:20px 0 0 0; width:49.5%;}
.f_cafe a{text-align:right; padding:10px 20px 10px 30px; font-size:14px;}
.f_cafe a span{font-size:16px;}
.s_cafe{left:15px; top:10px; width:40px;}

.f_tell a{display:block; min-width:150px; height:60px; padding:10px 20px 10px 30px; border-radius:5px; text-align:right; line-height:22px; background:#1c99cf; border:1px solid #1c99cf; position:relative; font-family:'EsaManru'; font-weight:500; font-size:14px; color:#ffffff; transition:all 0.5s;}
.f_tell a:hover{border:1px solid #00deff;}
.f_tell a span{display:block;font-weight:700; font-size:16px; color:#00deff;}
.s_tell{position:absolute; padding:0; left:15px; top:10px; width:40px;}
}

@media screen and (max-width:405px) {
  .f_cafe{width:100%; margin:10px 0 0 0;} 
  .f_tell{width:100%; margin:10px 0 0 0;} 
}
/*-------------------------------------------------------------------------------------*
 *  animation                                                                          *
 *-------------------------------------------------------------------------------------*/
 
.background_img{
	-webkit-animation: domain_box_l 3.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
			animation: domain_box_l 3.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@keyframes domain_box_l {
    0%    {filter:hue-rotate(0deg);}
    50%   {filter:hue-rotate(-50deg);}
    100%  {filter:hue-rotate(0deg);}
}