@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

.p-Part{padding: 170px 0;}

/* 타블렛 가로 */
@media all and (max-width:1599px) {
    .inner {	width:90%; }
    .p-Part{padding: 150px 0;}
}
@media all and (max-width:1399px) {
    .s-inner {	width:90%; }
}
@media all and (max-width:1280px) {
    html { font-size: 60% !important; }
    .p-Part{padding: 120px 0;}
}
@media all and (max-width:976px) {
    html { font-size: 60% !important; }
    .p-Part{padding: 100px 0;}
}
@media all and (max-width:768px) {
    html { font-size: 0.55rem !important; }
    .p-Part{padding: 80px 0;}
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}



/* header */
#header{height: 100px; width: 100%; position: fixed; top: 0; left: 0; z-index: 99;}
#header #logo{position: absolute; left: 100px; top: 50%; transform: translateY(-50%);}
#header #logo a{display: block; width: 324px; height: 50px; background: url(/images/common/logo.png?v=1) no-repeat center center / contain;}
#header .pcGnb{}
#header .pcGnb > ul{display: flex; justify-content: center; align-items: center; gap:120px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li:after{position: absolute; content: ''; width: 5px; height: 5px; background: rgba(255,255,255,0.3); border-radius: 100px; top: 48%; transform: translateY(-50%); right: -60px;}
#header.on .pcGnb > ul > li:after{background: rgba(0,0,0,0.3);}
#header .pcGnb > ul > li:last-child:after{display: none;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 600; color: #fff; line-height: 100px;font-family: 'NEXONLv1Gothic';}
#header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #3876be; text-align: center; width: 182px; left: 50%; transform: translateX(-50%); padding: 10px 0;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; color: #ffffff; display: block; line-height: 44px;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
#header .r_cont{position: absolute; right: 60px; top: 50%; transform: translateY(-50%);}
#header .r_cont .call{color: #fff;}
#header .r_cont .call p{font-size: 17px; font-weight: 700; font-weight: 500;}
#header .r_cont .call p span{font-weight: 700;}


#header:hover{background-color: #fff; border-bottom: 1px solid #eee;}
#header:hover #logo a{background: url(/images/common/logo_on.png?v=1) no-repeat center center / contain;}
#header:hover .pcGnb > ul > li > div > a{color: #222;}
#header:hover .r_cont .call{color: #3876be;}

#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on #logo a{background: url(/images/common/logo_on.png?v=1) no-repeat center center / contain;}
#header.on .pcGnb > ul > li > div > a{color: #222;}
#header.on .r_cont .call{color: #3876be;}

#header .hd_mbx { display: none; }
#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:380px; padding: 90px 0;background: rgba(40,40,40, 0.95); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);-ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:4em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem; font-weight:500;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0.5em 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.8rem; color:#4b4b4b;padding:0 2em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}

#gnb_mo > ul > li > div.on { background: #3876be; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn {	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }


.menuToggle { position: absolute; width:70px; height:70px; cursor:pointer; z-index:101; border-right: 1px solid rgba(255,255,255,0.1); right: 0;}
.menuToggle span { display:block; width:28px; height:2px; border-radius:3px; background:#222; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
#header.on .menuToggle span { background: #222;}
#header.ons .menuToggle span { background: #222;}
.menuToggle span.t { margin-top: -10px; }
.menuToggle span.m { margin-top:-1px; width: 18px; }
.menuToggle span.b { margin-top: 8px; }

.menuToggle.m_on span { background: #fff !important; }
.menuToggle.m_on span.t { transform:rotate(45deg); margin-top: 0;  }
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b { transform:rotate(-45deg); margin-top: 0; }

@media all and (max-width:1600px){
    #header #logo{left: 2%;}
    #header .pcGnb > ul{gap:100px; padding-left: 150px;}
    #header .pcGnb > ul > li:after{right: -55px;}
}
@media all and (max-width:1400px){
    #header .pcGnb > ul{gap: 80px; padding-left: 170px;}
    #header .pcGnb > ul > li:after{right: -45px;}
}
@media all and (max-width:1280px){
    #header{height: 70px;}
    #header .hd_mbx { display: block; }
	#header #logo a{width: 200px;}
	#header .pcGnb{display: none;}
}
@media all and (max-width:768px){
    #header{height: 60px;}
	#header #logo{left: 3%;}
	#header #logo a{width: 180px;}
	#header .r_cont{right: 3%;}
	#header .r_cont .call{display: none;}
    .menuToggle {width:60px; height:60px;}
    .menuToggle span {background:#fff;}
}


.related{height: 150px;}
.related1{position: relative;}
.related1:before{position: absolute; content: ''; width: 95%; background: #f8fbfd; height: 100%; border-radius: 0 1000px 0 0; bottom: 0;}
.related .s-inner{display: flex; align-items: center; gap:0 30px; height: 100%;}
.related .s-inner h2{font-family: 'NEXONLv1Gothic', sans-serif; font-size: 18px; font-weight: 700; color: #222; width: 110px;}
.related .s-inner .control{display: flex; align-items: center; gap:0 15px;}
.related .s-inner .control .prev{cursor:pointer;}
.related .s-inner .control .pause{cursor:pointer;}
.related .s-inner .control .play{cursor:pointer;}
.related .s-inner .control .next{cursor:pointer;}
.related .s-inner .control > div img{}
.related .s-inner .sponsor{width: calc(100% - 270px); max-width: 1300px;}
.related .s-inner .sponsor .spon{}
.related .s-inner .sponsor .spon a{}
.related .s-inner .sponsor .spon a img{max-width: 100%; margin: 0 auto;}

.related .s-inner .sponsor{position: relative;}
.related .s-inner .sponsor::after{ content:""; position:absolute; top:0; right:0; width:80px; height:100%; pointer-events:none; background: linear-gradient(to left, #f8fbfd 50%, rgba(248,251,253,0) 100%); }


@media all and (max-width:1720px){
    .related .s-inner .sponsor{max-width: 65vw;}
}
@media all and (max-width:1480px){
    .related .s-inner .sponsor{max-width:60vw;}
    .related{height: 130px;}
}
@media all and (max-width:1080px){
    .related1:before{width: 98%;}
}
@media all and (max-width:976px){
    .related{height: 100px;}
    .related{height: auto; padding: 20px 0;}
	.related .s-inner{flex-wrap: wrap; gap:0 30px;}
	.related .s-inner h2{width: auto;}
	.related .s-inner h2 br{display: none;}
	.related .s-inner .sponsor{width: 100%; max-width: 100%; margin-top: 20px;}
}
@media all and (max-width:640px){
	.related .s-inner{gap:0 15px;}
	.related .s-inner h2{font-size: 15px;}
	.related .s-inner .control > div img{max-width: 26px;}
}



/* footer */
#footer {width:100%; background: #2e363d; padding: 6rem 0; text-align: center;}
#footer ul{display: flex; justify-content: center; gap: 1rem 3rem; color: #686f76; font-size: 1.7rem; margin: 3rem 0 1.5rem; flex-wrap: wrap;}
#footer ul span{color: #b2b7bc; display: inline-block; margin-right: 1rem;}
#footer p{color: #686f76; opacity: 0.5; font-size: 1.6rem;}

@media all and (max-width:1280px){
    #footer .img{width: 200px; margin: 0 auto;}
    #footer .img img{width: 100%;}
}
@media all and (max-width:980px){
    #footer {padding: 6rem 0 15rem;}
}
@media all and (max-width:580px){
    #footer ul{gap: 1rem 2rem; font-size: 1.6rem}
}
@media all and (max-width:480px){
    #footer {padding: 4rem 0 13rem;}
    #footer .img{width: 18rem;}
    #footer ul{gap: 0.5rem 2rem; font-size: 1.4rem; margin: 2rem 0 1rem;}
    #footer ul span{margin-right: 0.5rem;}
    #footer p{font-size: 1.4rem;}
}


#quick{position: fixed; right: 20px; z-index: 99; top: 50%; transform: translateY(-50%);}
#quick .list{background: linear-gradient(to bottom, #2e9db1, #3375be); width:18rem; box-shadow: 18px 10px 43px rgba(0,0,0,0.16);}
#quick .list li{text-align: center;padding: 2rem 1rem;}
#quick .list li + li{border-top: 1px solid rgba(255,255,255,0.5);}
#quick .list li a{color: #fff; display: flex; align-items: center;gap: 1rem;}
#quick .list li a .icon{width: 2.5rem; text-align: center;}
#quick .list li a .icon img{max-width: 100%;}
#quick .list li a p{font-size: 2rem; font-weight: 500; display: flex;flex-direction: column;align-items: flex-start;;}
#quick .list li a p span{font-size: 1.5rem;}
#quick .go_top{width: 86px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fff ; cursor: pointer; margin-top: 10px; box-shadow: 18px 10px 43px rgba(0,0,0,0.16);}
#quick .go_top .up{font-size: 30px; font-weight: 300; color: #000000; line-height: 1em;}
#quick .go_top p{font-size: 15px; font-weight: 500; color: #000000;}

@media all and (max-width:980px){
    #quick{right: auto; top: auto; transform: translateY(0); bottom: 0; left: 0; width: 100%;}
	#quick .go_top{display: none;}
	#quick .list{display: flex; width: 100%; justify-content: center; padding: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden;}
	#quick .list li{width: 100%; padding: 0;}
	#quick .list li + li{margin-top: 0px; border-left: 1px solid rgba(255,255,255,0.1);}
	#quick .list li a{ padding: 15px 0; display: flex; justify-content: center; align-items: center; flex-direction: column;}
	#quick .list li a .icon img{max-width: 23px;}
	#quick .list li a p{font-size: 1.6rem; align-items: center;}
	#quick .list li a p span{font-size: 1.4rem;}
    #quick .list li + li{border-top: 0;}
}
@media all and (max-width:500px){
	#quick .list li a{padding: 12px 0;}
	#quick .list li a .icon{margin-bottom: 5px;}
	#quick .list li a .icon img{max-width: 2rem;}
}