@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.h-inner {	width:1725px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1400px;	position:relative; margin-left:auto;	margin-right:auto;}


@media all and (max-width:1724px){
	.h-inner{width: 94%;}
}
@media all and (max-width:1399px) {	
	.inner {width:94%;}
}


/* header */
#header{position: fixed; width: 100%; top: 0; left: 0; height: 100px; z-index: 9999; background-color: transparent; transition: background-color .2s; border-bottom: 1px solid rgb(255, 255, 255, 0.2);}
#header.on{background: transparent;}

#header .h-inner{height: 100%;}
#header #logo{position: absolute; width: 212px; height: 62px; left: 0; top: 50%; transform: translateY(-50%); }
#header #logo a{display: block; width: 100%; height: 100%; background-image: url('/images/common/logo.webp'); background-size: contain; background-repeat: no-repeat; background-position: left center; transition: all .2s;}
#header .pcGnb{margin-right: 80px;}
#header .pcGnb > ul{display: flex; justify-content: center; gap:95px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 19px; color: #fff; font-weight: 600; line-height: 100px;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #0f5778; position: absolute; left: 50%; transform: translateX(-50%); width: max-content; padding: 30px 15px; min-width: 200px; text-align: center; box-shadow: 1px 4px 8px rgba(0,0,0,0.1);}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li + li{margin-top: 25px;}
#header .pcGnb > ul > li > ul > li > a{font-size: 18px; color: #fff; font-weight: 600;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
#header .r_menu{position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap:25px;}
#header .r_menu .menuToggle{width: 42px; height: 11px; position: relative; cursor: pointer;}
#header .r_menu .menuToggle:before{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border:1px solid rgb(255, 255, 255, 0.7); border-radius: 50%;}
#header .r_menu .menuToggle span{background-color: #fff;  width: 18px; height: 1px; position: absolute; display: block; text-align: center; left: 50%; transform: translateX(-50%);}
#header .r_menu .menuToggle .t{top: 0; }
#header .r_menu .menuToggle .m{top: 5px;}
#header .r_menu .menuToggle .b{bottom: 0;}


#header:hover{background-color: #fff;}
#header:hover #logo a{background-image: url('/images/common/logo_on.webp');}
#header:hover .pcGnb > ul > li > div > a{color: #000;}
#header:hover .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
#header:hover .r_menu .menuToggle span{background-color: #000;}

#header.scroll{border-color: #dedede; background-color: #fff;}
#header.scroll #logo a{background-image: url('/images/common/logo_on.webp');}
#header.scroll .pcGnb > ul > li > div > a{color: #000;}
#header.scroll .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
#header.scroll .r_menu .menuToggle span{background-color: #000;}

.fp-viewing-dream #header{border-color: #dedede;}
.fp-viewing-dream #header #logo a{background-image: url('/images/common/logo_on.webp');}
.fp-viewing-dream #header .pcGnb > ul > li > div > a{color: #000;}
.fp-viewing-dream #header .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
.fp-viewing-dream #header .r_menu .menuToggle span{background-color: #000;}

.fp-viewing-dream5 #header{border-color: #dedede;}
.fp-viewing-dream5 #header #logo a{background-image: url('/images/common/logo_on.webp');}
.fp-viewing-dream5 #header .pcGnb > ul > li > div > a{color: #000;}
.fp-viewing-dream5 #header .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
.fp-viewing-dream5 #header .r_menu .menuToggle span{background-color: #000;}


.fp-viewing-main #header.scroll{border-color: rgb(255, 255, 255, 0.2); background-color: transparent;}
.fp-viewing-main #header.scroll #logo a{background-image: url('/images/common/logo.webp');}
.fp-viewing-main #header.scroll .pcGnb > ul > li > div > a{color: #fff;}
.fp-viewing-main #header.scroll .r_menu .menuToggle:before{border-color: rgb(255, 255, 255, 0.7);}
.fp-viewing-main #header.scroll .r_menu .menuToggle span{background-color: #fff;}

.fp-viewing-dream #header.scroll{border-color: #dedede; background: transparent;}
.fp-viewing-dream #header.scroll #logo a{background-image: url('/images/common/logo_on.webp');}
.fp-viewing-dream #header.scroll .pcGnb > ul > li > div > a{color: #000;}
.fp-viewing-dream #header.scroll .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
.fp-viewing-dream #header.scroll .r_menu .menuToggle span{background-color: #000;}

.fp-viewing-dream2 #header.scroll{border-color: rgb(255, 255, 255, 0.2); background-color: transparent;}
.fp-viewing-dream2 #header.scroll #logo a{background-image: url('/images/common/logo.webp');}
.fp-viewing-dream2 #header.scroll .pcGnb > ul > li > div > a{color: #fff;}
.fp-viewing-dream2 #header.scroll .r_menu .menuToggle:before{border-color: rgb(255, 255, 255, 0.7);}
.fp-viewing-dream2 #header.scroll .r_menu .menuToggle span{background-color: #fff;}

.fp-viewing-dream3 #header.scroll{border-color: rgb(255, 255, 255, 0.2); background-color: transparent;}
.fp-viewing-dream3 #header.scroll #logo a{background-image: url('/images/common/logo.webp');}
.fp-viewing-dream3 #header.scroll .pcGnb > ul > li > div > a{color: #fff;}
.fp-viewing-dream3 #header.scroll .r_menu .menuToggle:before{border-color: rgb(255, 255, 255, 0.7);}
.fp-viewing-dream3 #header.scroll .r_menu .menuToggle span{background-color: #fff;}

.fp-viewing-dream4 #header.scroll{border-color: rgb(255, 255, 255, 0.2); background-color: transparent;}
.fp-viewing-dream4 #header.scroll #logo a{background-image: url('/images/common/logo.webp');}
.fp-viewing-dream4 #header.scroll .pcGnb > ul > li > div > a{color: #fff;}
.fp-viewing-dream4 #header.scroll .r_menu .menuToggle:before{border-color: rgb(255, 255, 255, 0.7);}
.fp-viewing-dream4 #header.scroll .r_menu .menuToggle span{background-color: #fff;}

.fp-viewing-dream5 #header.scroll{border-color: #dedede; background: transparent;}
.fp-viewing-dream5 #header.scroll #logo a{background-image: url('/images/common/logo_on.webp');}
.fp-viewing-dream5 #header.scroll .pcGnb > ul > li > div > a{color: #000;}
.fp-viewing-dream5 #header.scroll .r_menu .menuToggle:before{border-color: rgb(0, 0, 0, 0.7);}
.fp-viewing-dream5 #header.scroll .r_menu .menuToggle span{background-color: #000;}

@media all and (max-width:1280px){
    #header .pcGnb {margin-right: 30px;}
	#header .pcGnb > ul{gap:50px;}
}
@media all and (max-width:1024px){
	#header{height: 80px;}
	#header #logo a{max-width: 156px;}
    #header .pcGnb {margin-right: 20px;}
	#header .pcGnb > ul{gap:40px;}
	#header .pcGnb > ul > li > div > a{line-height: 80px; font-size: 18px;}
	#header .r_menu{gap:18px;}
}
@media all and (max-width:768px){
	#header{height: 70px;}
	#header #logo a{max-width: 120px;}
	#header .pcGnb{display: none;}
	#header .r_menu .menuToggle{width: 27px;}
	#header .r_menu .menuToggle .b{width: 22px;}
}
@media all and (max-width:500px){
	#header{height: 64px;}
}

.moGnb{background-color: #202020; padding-top: 160px; height: 100dvh; position: fixed; top: -100vh; left: 0; width: 100%; z-index: 999; transition: .5s; overflow-y: scroll; padding-bottom: 100px;}
.moGnb.on{top: 0;}
.moGnb > ul{max-width: 1400px; width: 94%; margin-left: auto; margin-right: auto; }
.moGnb > ul > li{width: 100%;}
.moGnb > ul > li + li{margin-top: 40px; padding-top: 40px;; border-top: 1px solid rgba(255,255,255,0.2);}
.moGnb > ul > li > div{margin-bottom: 15px; flex:0 0 auto;}
.moGnb > ul > li > div > a{font-size: 30px; color: #fff; font-weight: 700;}
.moGnb > ul > li > ul{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px 40px; width: 100%;}
.moGnb > ul > li > ul > li{width: 100%;}
.moGnb > ul > li > ul > li + li{}
.moGnb > ul > li > ul > li > a{color: #fff; font-size: 18px; font-weight: 600; opacity: 0.8; transition: .4s; display: block; width: 100%;}
.moGnb > ul > li > ul > li:hover > a{opacity: 1; text-decoration: underline; text-underline-position: under;}

@media all and (max-width:1280px){
	.moGnb{padding-top: 120px;}
	.moGnb > ul > li > div > a{font-size: 28px;}
	.moGnb > ul > li > ul{grid-template-columns: repeat(4, 1fr); }
}
@media all and (max-width:786px){
	.moGnb{padding-top: 100px;}
    .moGnb > ul{display: block; padding-top: 0;}
    .moGnb > ul > li{text-align: left;}
	.moGnb > ul > li + li{margin-top: 0; padding-top: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.2);}
	.moGnb > ul > li > div{cursor: pointer; margin-bottom: 0;}
	.moGnb > ul > li > div > a{font-size: 25px; pointer-events: none; padding: 20px 0; display: block;}
	.moGnb > ul > li > ul{grid-template-columns: repeat(3, 1fr); display: none; padding-bottom: 20px; background-color: #0f5778; padding: 20px;}
	.moGnb > ul > li > ul li + li{margin-top: 15px;}
}
@media all and (max-width:500px){
	.moGnb{padding-top: 90px;}
	.moGnb > ul > li > div > a{font-size: 21px;}
	.moGnb > ul > li > ul{grid-template-columns: repeat(3, 1fr); gap:15px 5px;}
	.moGnb > ul > li > ul > li > a{font-size: 16px;}
}





#f-site {margin-bottom: 34px; display: inline-block; position: absolute; right: 0; top: 0;}
.f-select_site {position: relative;}
.f-select_site button {  width: 190px; font-size: 1.6rem;  text-align: center; outline: none;  box-sizing: border-box;  padding: 0 10px;line-height: 48px;  color: #000; font-family:'Pretendard'; font-weight:700; position:relative; background-color: #fff; border-radius: 24px;}
.f-select_site button .plus{font-weight: normal;}
.f-select_site ul { display: none; width: 100%; z-index: 99; position: absolute; left: 0; bottom: 100%;
					/* Adjusted to slide from bottom */overflow:auto; height:auto; max-height:220px; background: #FFF;}
.f-select_site ul.active {    bottom: 50px; /* Slide up */}
.f-select_site ul li {  text-align: center; font-size: 1.6rem;   font-weight:400}
.f-select_site ul li a {display: block; padding:0.8em 0.3em;  }
.f-select_site ul li a:hover { background: #0f5778; color: #fff;}
.f-select_site ul li + li {  border-top: 1px solid #e9e9e9;}



/* footer */
#footer{background-color: #1c1f23; padding: 85px 0 100px;}
#footer .h-inner{position: relative;}
#footer .l_cont{display: flex; gap:40px 100px; flex-wrap: wrap;}
#footer .l_cont .info{margin-top: 30px;}
#footer .l_cont .info span{display: inline-block; color: #fff; opacity: 0.6; font-weight: 400; font-size: 16px; margin-right: 20px; line-height: 1.8em;}
#footer .l_cont .ft_link{}
#footer .l_cont .ft_link a{color: #fff; font-size: 16px; margin-right: 25px;}
#footer .copy_wrap{position: absolute; right: 0; bottom: 0; font-size: 16px; font-weight: normal; line-height: 2; text-align: right;}
#footer .copy {color: #fff; opacity: 0.6; }
#footer .design {}
#footer .design a{color: #fff; opacity: 0.6;}
@media all and (max-width:1280px){
    #footer .l_cont{flex-direction: column;}
}
@media all and (max-width:1024px){
    #footer .copy_wrap{margin-top: 30px; position: static; text-align: left;}
}
@media all and (max-width:768px){
    #footer .l_cont .logo img{height: 50px;}
    .f-select_site button{width: 170px; font-size: 15px; line-height: 42px;}
}
@media all and (max-width:568px){
    #footer{padding: 60px 0 70px; text-align: center;}
    #footer .l_cont .info span{font-size: 1.6rem;}
    #footer .l_cont .ft_link a{font-size: 1.6rem; margin-right: 10px;}
    #footer .copy_wrap{font-size: 1.6rem; text-align: center;}
    #f-site {margin-top: 30px; position: static;} 
    .f-select_site button{font-size: 1.6rem;}   
    .f-select_site ul li{font-size: 1.5rem;}
}
@media all and (max-width:380px){
    #footer .l_cont .ft_link a{font-size: 1.5rem;}
    #footer .l_cont .info span{font-size: 1.5rem;}
    #footer .copy_wrap{font-size: 1.5rem;}
}



#ytbQ{position: relative; position: fixed; z-index: 9999; right: 0; top: 200px; padding: 25px 0; display: flex; background-color: #0f5778; color:#fff; border-radius: 12px 0 0 12px;;}
#ytbQ .qbtn{ width: 50px; text-align: center; cursor: pointer;}
#ytbQ .qbtn p{padding-top: 6px; writing-mode: vertical-rl; font-size: 1.6rem; font-weight: 600; margin: 0 auto; letter-spacing: -0.1em;}
#ytbQ .qlist { max-width: 0; display: flex; gap: 5px; overflow: hidden; opacity: 0; visibility: hidden; transition: max-width 0.3s ease, opacity 0.3s ease;}
#ytbQ .qlist.on{max-width: 360px; overflow: scroll; margin-right:55px;  display: flex; opacity: 1; visibility: visible;} 
#ytbQ .qlist li{width: 110px; flex: 0 0 auto;}
#ytbQ .qlist li .img{display: flex; justify-content: center; align-items: center; height: 70px; background-color: #fff; border-radius: 6px; padding: 5px;}
#ytbQ .qlist li  .chnl img{height: 40px; border-radius: 50%;}
#ytbQ .qlist li  .chnl p{padding-top: 4px; width: 100%; font-size: 1.3rem; font-weight: 600; color: #fff; text-align: center; line-height: 1;}
#ytbQ .qbtn_close{position: absolute; right: 6px; cursor: pointer; top: 50%; transform: translateY(-50%); display: none;}
#ytbQ .qlist.on + .qbtn_close{display: block;}
@media all and (max-width:1024px){
    #ytbQ {top: auto; bottom: 175px;}
    #ytbQ .qbtn {width: 40px; }
    #ytbQ .qbtn img{height: 12px;}
    #ytbQ .qbtn p{font-size: 1.4rem;}
}
@media all and (max-width:768px){
    #ytbQ .qlist.on{max-width: 290px;}
    #ytbQ .qlist li{width: 90px;}
}
@media all and (max-width:568px){
    #ytbQ .qlist.on{max-width: 240px;}
    #ytbQ .qlist li{width: 80px;}
    #ytbQ .qlist li .img{height: 60px;}
    #ytbQ .qlist li .img img{height: 30px;}
}
@media all and (max-width:380px){
    #ytbQ .qlist.on{max-width: 200px;}
    #ytbQ .qlist li{width: 70px;}
}



/* go_top */
.go_top{position: fixed; z-index: 9999; padding: 15px 0 20px; border-radius: 12px 0 0 12px; width: 50px; background-color: #000; right: 0; top: 370px; cursor: pointer; text-align: center;}
.go_top span{display: block; color: #fff; font-family: 'Suit'; font-size: 1.6rem; font-weight: 500;}
.go_top  p{padding-top: 5px; writing-mode: vertical-rl; color: #fff; margin: 0 auto; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.1em;}

@media all and (max-width:1280px){
}
@media all and (max-width:1024px){
    .go_top{width: 40px; top: auto; bottom: 50px;}
	.go_top span{font-size: 14px;}
    .go_top  p{font-size: 1.4rem;}
}
@media all and (max-width:768px){
}
@media all and (max-width:500px){
}