@charset "UTF-8";


.container{position: relative;z-index: 0;max-width: 1400px;margin: 0 auto; height: 100%;}
.container2{position: relative;z-index: 0; max-width: 1900px; margin: 0 auto;}

/*서브 비쥬얼*/
.subVisual{height: 418px;background-repeat: no-repeat;background-image:url(/_static/ktcc/img/common/subVisual1.jpg); background-position: center center; position: relative; background-color: #fff; }
.subVisual.subVisual1{ background-image:url(/_static/ktcc/img/common/subVisual1.png); }
.subVisual.subVisual2{ background-image:url(/_static/ktcc/img/common/subVisual2.png); }
.subVisual.subVisual3{ background-image:url(/_static/ktcc/img/common/subVisual3.png); }
.subVisual.subVisual4{ background-image:url(/_static/ktcc/img/common/subVisual4.png); }
.subVisual.subVisual5{ background-image:url(/_static/ktcc/img/common/subVisual1.png); }
.subVisual.subVisual6{ background-image:url(/_static/ktcc/img/common/subVisual2.png); }
.subVisual.subVisual7{ background-image:url(/_static/ktcc/img/common/subVisual3.png); }
.subVisual.subVisual8{ background-image:url(/_static/ktcc/img/common/subVisual4.png); }
/* .subVisual.subVisual6{ background-image:url(/_static/ktcc/img/common/subVisual6.png); }  */

.subVisual > div.subVisual_title{
	display: block;
	padding-top: 160px;
    text-align: center;
    color: #fff;
    font-size: 2.999em;
    line-height: 1;
    font-weight: bold;
}
.subVisual > div.quick_wrap { font-family: 'Noto Sans KR', sans-serif, 'Roboto', 'Dotum'; }
.subVisual > div h2	{ font-size:2.625em; color:#292929; display:block; line-height: 1;  font-weight: 600;}
.subVisual > div p	{ color: #707070; margin-top: 12px; font-weight: 300;}
.quick_wrap .container {padding: 0;}
.quick_wrap.scrolled{width: 100%; top: 0;}









/* sub_section */ 
.sub_section{min-height: 800px;padding-bottom: 140px;width: 100%;}


.content{/*padding-top: 110px;*/position: relative;overflow: hidden;}
.wow + .content{padding-top: 60px;}

/* sub title */
.sub_top_tit{ position: relative; display: block;}
h3.sub_top_tit{text-align: left;}
h3.sub_top_tit span{position: relative;line-height: 1;display: inline-block;/* padding-bottom: 24px; */font-size: 1.875rem;color: #353434;font-weight: 500;text-align: left;/* padding-top: 20px; */z-index: 2;}



h4.sub_top_tit{text-align: left;}
h4.sub_top_tit span{position: relative;line-height: 1;display: block;font-size:2em;color:#000000;font-weight: 500;}

/* snb_sns */
/* snb-wrap */
.sub_doc::before {
    content: "";
    width: 10%;
    height: 2px;
    background: var(--maincolor);
    position: absolute;
    bottom: 0;
    left: 0;
}
.sub_doc {
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    position: relative;
    right: 0;
    /* width: calc(100% - 350px); */
    width: 100%;
    margin-top: 80px;
    border-bottom: 1px solid #ddd;
    grid-area: snav;
}
/* snb-wrap */
.snb-info {
    position: absolute;
    top: 0;
    line-height: 53px;
    left: calc(100% - 160px);
}
.sd_right { display: flex; align-items: center; justify-content: space-between;}
.snb_link{ display: flex; margin-right: 12px; flex-wrap: wrap; font-weight: 500;}
.snb_link li.home img{ vertical-align: text-top }
.snb_link li{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 14px;
}
.snb_link li a {
    color: #929292;
}
.snb_link li.home > div{margin-bottom: 0;}
.snb_link li > div {
    color: #151515;
    font-size: 0.938em;
    font-weight: 300;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}
.snb_link li::before{
    content: '';
    display: inline-block;
    width: 7px;
    height: 9px;
    background: url(/_static/steam/img/common/bar_right_on.png) no-repeat center center;
    margin: 0 10px
}
.snb_link li:first-child::before{display: none;}
.snb_link li:first-child{
	margin-right: 0;
	padding-right: 0;
}

.snb-wrap img {
    vertical-align: middle;
}
.snb_inner {
    border: 1px solid #dddddd;
    box-sizing: border-box;
    padding: 33px;
    border-radius: 20px;
    margin-top: 45px;
}

.sm_wrap {
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
.sm_wrap.on {
    padding: 0;
}
.sm_wrap a { display: block; }
.sm_wrap > a {
    font-size: 18px;
    font-weight: 500;
    position: relative;
}
.sm_wrap.on > a {
    color: var(--maincolor);
}
.sm_wrap > a::after {
    content: "";
    background: url("/_static/steam/img/common/snb-arrow.png") no-repeat top left;
    width: 22px; height: 22px;  
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.sm_wrap.on > a::after {
    content: "";
    background: url("/_static/steam/img/common/snb-arrow.png") no-repeat bottom right;
    width: 22px; height: 22px;  
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.sm_wrap.sm_notList > a::after {
    content: "";
    background: url("/_static/steam/img/common/snb-arrow.png") no-repeat top left;
    width: 22px; height: 22px;  
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.sm_wrap.sm_notList.on > a::after {
    content: "";
    background: url("/_static/steam/img/common/snb-arrow.png") no-repeat top right;
    width: 22px; height: 22px;  
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}



.sm_wrap:last-child {
    border-bottom: none;
}
.sm_wrap ul > li a:not(:first-of-type){
    display: none;
}
.snb-smenu h3 { font-size: 30px; font-weight: 500; }
.sm_wrap ul { display: none; text-indent: 20px; }
.sm_wrap ul li::before {
    content: "";
    width: 3px; height: 3px; 
    background: var(--maincolor);
}
.sm_wrap ul.on { display: block; }
.sm_wrap ul li { line-height: 35px; position: relative; transform: rotate(-0.03deg);}
.sm_wrap ul li::before {
    content: "";
    width: 3px; height: 3px;
    background: var(--maincolor);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.sm_wrap ul li.active { background: #f6f6f6; font-weight: 500;}
.sm_wrap ul li a { padding-left: 15px;  }
.sm_wrap.on > a {
    padding: 20px 0;
    font-weight: 600;
}
.sm_wrap ul.on { display: block; border-top: 1px solid #ddd;}
.sm_wrap.sm_notList.on ul.on { display: none;}
.snb-smenu { display: none; }
.snb-smenu.on { display: block; }

/* //snb_wrap */

.etc_area {position:relative;width: auto; display: flex;}
.etc_area img { vertical-align: unset; }
.etc_area > li:first-child{padding: 0 15px;}
.etc_area > li:after{width: 1px;height:12px;background: #3d3d3d;font-size: 0.750em;position: absolute;right: 0;top: 50%;transform: translate(0,-50%);-ms-transform: translate(0,-50%);-webkit-transform: translate(0,-50%);}
.etc_area > li:last-child:after{display: none;}
.etc_area > li > button {display:block; width:100%;}
.etc_area > li > a {
	position: relative;
    display: inline-block;
}
.etc_area::before {
    content: '';
    position: absolute;
    width: 1px; height: 13px;
    background: #dddddd;
    top: 50%;
    transform: translateY(-50%);
}
.snb_sns {overflow:hidden;display:none;position:absolute;width:0;left: 0;opacity:0;transition-duration: 0.2s;-webkit-transition-duration: 0.2s;top: -7px;}
.snb_sns.show {display:block;left: -185px;opacity:1;border: 1px solid #f0f0f0;border-radius: 15px;background-color: #f0f0f0;padding: 5px 15px 5px 20px; width: 179px;z-index: 1;top: 0;}
.snb_sns > li {float:left;display: none;/* height: 40px; */margin-left: 10px;}
.snb_sns > li:first-child{margin-left: 0;}
.snb_sns.show > li {display:inline-block;vertical-align: middle;}
.snb_sns li a{display: inline-block;width: 20px;height: 20px;/* padding: 8px 0; */text-align: center;/* line-height: 33px; */}
.snb_sns li a > img{/* vertical-align: middle; *//* margin-left: 0 !important; */ margin-top: 2px;} 
.snb_sns li a.link_copy {display: block; width: 71px; font-size:0.875em; color:#353535;vertical-align: middle;margin-top: 2px;}

/* quick_wrap - QR cord */
.qr_cord {position:relative;}
.qrBox{display: none; position:absolute; top:211px; right:-1px; z-index:99999; margin-top:-150px; margin-left:-115px; width: 300px; height: 258px; padding: 28px; background-color: #fff; border: 1px solid #ddd; border-top:0; text-align: center; cursor: pointer;}
.qrBox.on {display:block;}
.qrBox a.qrBoxClose{ position: absolute; top: 6px; right: 6px; width: 30px; height:30px; line-height:32px; background-color: #414141; color: #fff; text-align: center; text-decoration: none;}
.qrBox p{margin: 13px auto 0; font-size:0.96em; word-break:keep-all;}

/*LNB*/
.lnb_wrap{width: 19.231%;float: left;margin-right: 3.8%;margin-top: 0px;}
.lnb_wrap h2.lnbTit > span{
    color: #090909;
    display: block;
    font-size: 2.0rem;
    line-height: 1;
    letter-spacing: -0.020em;
    font-weight: 500;
    position: relative;
    padding: 0px 0 31px;
}
/* .lnb_wrap.type02 h2.lnbTit > span{background: #3b86b0;}
.lnb_wrap.type03 h2.lnbTit > span{background: #54b7d2;}
.lnb_wrap.type04 h2.lnbTit > span{background: #25c7ad;}
.lnb_wrap.type05 h2.lnbTit > span{background: #6d68ad;}
.lnb_wrap.type06 h2.lnbTit > span{background: #ffca30;} */
.lnb_wrap h2.lnbTit > span:before{
	bottom: auto;
	content: '';
	position: absolute;
	top: 1px;
	left: 50%;
	transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	display: inline-block;
	width: 85px;
	height: 7px;
}
.lnb_wrap h2.lnbTit.line2{margin-bottom: 27px;}
.lnb_wrap>ul{width:100%; /*border-top: 3px solid #101010;*/ /*border-bottom: 1px solid #ddd;*/}
.lnb_wrap>ul>li{border-bottom: 1px solid #ddd;}
.lnb_wrap.type02>ul{border-bottom: 1px solid #ddd;}
.lnb_wrap.type02>ul>li{border-bottom: 0;}
.lnb_wrap>ul>li.on{/* background: #2f961e; */}
.lnb_wrap>ul>li.on > div{background: #828282;}
.lnb_wrap>ul>li:first-child{border-top: 0;}
.lnb_wrap>ul>li div{display: block;width: 100%;height: 60px;line-height: 52px;/* background: #656565; */}
.lnb_wrap>ul>li div > a {
    /* background:#fff url(/_static/ktcc/img/common/lnb_plus.png) center right 21px no-repeat; */
    vertical-align:middle;
    padding: 0 36px 0 16px;
    color: #141414;
    width: 100%;
    font-size: 1.125em;
    line-height: 1.3;
    display: inline-block;
    word-break: keep-all;
    letter-spacing: -0.08em;
}
.lnb_wrap>ul>li div > a img{
	vertical-align: middle;
    margin-left: 3px;
}
.lnb_wrap>ul>li div.on > a{
	/* background: url(/_static/ktcc/img/common/lnb_minus.png) center right 21px no-repeat; */
	display: inline-block;color: #080808;}
.lnb_wrap>ul>li.on> div a{
	/* background: url(/_static/ktcc/img/common/lnb_minus.png) center right 21px no-repeat; */
	display: inline-block;color: #ffffff;font-weight: 500;font-size: 1.125em;
}
.lnb_wrap>ul>li ul {/* background: #f9f9f9; */padding: 18px 0px 18px 15px;display: none;}
.lnb_wrap>ul>li.on ul { display: block;}
.lnb_wrap>ul>li ul li {position: relative;margin-top: 11px;padding-left: 12px;}
.lnb_wrap>ul>li ul li:before{
	/* content: ""; */
	/* display: inline-block; */
	/* width: 3px; */
	/* height: 3px; */
	/* background-color: #5a5a5a; */
	/* position: absolute; */
	/* left: 0; */
	/* top: 10px; */
	/* border-radius: 3px; */
}
.lnb_wrap>ul>li ul li:first-child{margin-top: 0;}
.lnb_wrap>ul>li ul li a{color: #676767;position: relative;display: inline-block;word-break: keep-all;font-size: 0.938em;letter-spacing: 0;}

.lnb_wrap>ul>li ul li a:hover, .lnb_wrap>ul>li ul li a:focus{color: #000;}
.lnb_wrap>ul>li ul li a.on {
	font-weight: 500;
	color: #212020;
}
/* .lnb_wrap>ul>li ul li a.on:before{
	position: absolute;
	content: "";
	display: block;
	background-color: #006fb7;
	width: 100%;
	height: 1px;
	right: 0;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
} */
.lnb_wrap>ul>li ul li a img{margin-left: 5px; vertical-align: middle;}

/*contents_wrap*/
/* .contents_wrap{width: calc(100% - 280px); float: right; width: 100%;} */
.contents_wrap{width: 100%;display: inline-block;}
.contents_wrap.full{width: 100%; display: block; margin-bottom: 110px;}

@media all and (max-width:1200px){
	/* sub title */
	h3.sub_top_tit{margin-bottom: 15px;}
	h3.sub_top_tit span{font-size:2.0em;}
	h4.sub_top_tit span{font-size:1.625em;}

    /*LNB*/
    .lnb_wrap h2.lnbTit{font-size: 1.625em;}
    .lnb_wrap>ul>li div >a{font-size: 1em;}
    .lnb_wrap>ul>li ul li a{font-size: 0.938em;}

	/* 로케이션 텍스트  1 > 2 > 3 */
	.sd_left{float:none;}
	.sd_right{text-align: left; margin-top: 0; margin-bottom: 15px;}
}

@media all and (max-width:1024px){
    ::-webkit-scrollbar { width: 2px; }
    ::-webkit-scrollbar-thumb { background: #eee; width: 2px;  }
    
	h3.sub_top_tit span{padding-top: 0;}
	/* quick_wrap */
	.quick_wrap{text-align: left; height: 50px; padding: 0 15px; margin: 0 auto;}
	.quick_wrap > .container{height: 50px;}
	/*snb_wrap*/
    .inner_Body .snb_bar { display: none; }
    .inner_Body .snb-wrap { display: none; }
    .inner_Body .sub_doc { margin-top: 0;}
	.etc_area > li > a img{top: 8px;}
	.etc_area > li{display: none;}
	.etc_area > li.share_box{display: block; margin-right: 0; float: right;}
	

	/*  */
	.subVisual{ display: none;}

    
	.wow + .content{padding-top: 98px;}
	.sub_section{padding: 30px 15px 80px}
    

    

	/* 03.15 로케이션부분 -32px 풀어줌 */
	.quick_wrap{/* top: 0; */}

    /*LNB*/
    .lnb_wrap{display: none;}

    /*contents_wrap*/
    .contents_wrap{width: 100%; float: none;}
}

@media all and  (max-width:860px){


    
	/* .sub_section */
	.sub_section{padding: 0 4vw 15vw 4vw;}

	 /* .quick_wrap */
	 .quick_wrap{height:50px; }

	 


    


}
@media all and  (max-width:767px){
	
	.snb_link > li > a{font-size: 0.875em;}

	/* sub title */
	h3.sub_top_tit span{font-size:1.625em; }
	h4.sub_top_tit span{font-size:1.5em; }
    /*sub_doc*/
    .snb_link {
        display: none;
    }
    .sub_rtop { position: absolute; top: -12px; right: 0;}

}
@media all and (max-width:640px){
	/*sub_doc*/
    .etc_area::before { display: none; }
    .sub_doc {
        display: block;
        height: auto;
    }
}
@media all and (max-width:580px){

	/* .sub_section */
    h3.sub_top_tit{margin-bottom: 0px;}

	.sd_right{margin-bottom: 10px; padding-bottom: 4px; overflow: visible;}
    
	

	.etc_area > li > a{width: 25px; height: 25px;}
	.etc_area > li > a img{top: 13px;}
/* 
	.snb_sns > li{float: none;} */
	.snb_sns.show{
		/* top: 0;
		padding: 0;
    	left: -60px; */
		padding: 0px 10px 0px 15px;
		border: 0;
	}
	.snb_sns li a > img{height: 16px; margin-top: 0; vertical-align: middle;}
	.snb_sns.show{width: 169px; left: -175px; height: 55px;}
	.snb_sns.show > li{display: inline-block; margin-left: 3px; height: 25px;}
	.snb_sns.show > li a{width: 25px; height: 25px;}
	
	

    /* .sub_section */
	.sub_section{padding: 15px 10px 80px;}

	.subVisual					{ background-size:auto 100%; }
	/* .subVisual > div			{ font-size:0; } */
	.subVisual > div h2			{ font-size:22px; font-weight:normal; color:#fff; display:inline-block; padding:26px 0 8px; }

	
	/* h3.sub_top_tit */
    h3.sub_top_tit span{font-size:1.313em; padding-bottom: 13px; padding-top: 00px; } 	
	h3.sub_top_tit span:after{height: 4px;}

	/* h4.sub_top_tit */
	h4.sub_top_tit span{font-size:1.125em;} 	
	h4.sub_top_tit span:before{top: -14px; height: 3px; width: 20px;}

	h4.sub_top_tit{padding-bottom: 15px;}


	
}



@media all and (max-width:479px){

	/* .sub_section */
	.sub_section{ min-height: 300px;}
    
}