@charset "utf-8";




/* layout */
.w-inner {	width: 100%; max-width:1740px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.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;*/ }

/* 타블렛 가로 */
@media all and (max-width:1740px) {
	.w-inner  {	width:90%; }
}
@media all and (max-width:1600px) {
	.inner {	width:90%; }
}
@media all and (max-width:1400px) {
	.s-inner {	width:90%; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}



.p-Part {padding-top:150px}
.p-Part-b {padding:150px 0}
.m-Part {margin-top:150px}
.m-Part-b {margin:150px 0}

@media all and (max-width:1280px) {
	.p-Part {padding-top:100px}
	.p-Part-b {padding:100px 0}
	.m-Part {margin-top:100px}
	.m-Part-b {margin:100px 0}
}
@media all and (max-width:480px) {
	.p-Part {padding-top:16vw}
	.p-Part-b {padding:16vw 0}
	.m-Part {margin-top:16vw}
	.m-Part-b {margin:16vw 0}
}


/*Header*/
#header {position:fixed; width:100%; height:100px; box-sizing:border-box; z-index:300; margin:0 auto; 
			display:flex; justify-content:space-between; align-items:center; transition:all 0.2s ease-out;}
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }



#header #logo { font-size:0; padding-left:55px; z-index:9999; position:absolute}
#header #logo a { }
#header #logo a.logo { display: block; }
#header #logo a.logo .logo_on{display: none;}


#gnb_pc {margin-left:auto; margin-right:auto}
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:1.8rem; text-transform:uppercase; line-height:100px; position:relative;
							width: auto; padding: 0 20px; cursor: pointer;letter-spacing:0; font-weight:500}
#gnb_pc > ul > li > div  a { color:#fff; }
#gnb_pc > ul > li > ul { display: none; padding:15px 0; width:180px; background: var(--secondary-color)/*구형부라우저용코드*/; background: color-mix(in srgb, var(--secondary-color) 90%, transparent) /*지정한 색상에 투명도 90*/;
								position: absolute; top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%;padding:10px; color:#fff;box-sizing: border-box; font-size:1.7rem; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div { }
#gnb_pc > ul > li > ul > li > a:hover {text-decoration:underline}
#gnb_pc > ul > li > ul > li > ul {display:none}



/* sns 아이콘들 */
#top-cs {display:flex; gap:5px; right: 55px; position:absolute; z-index:901}







#header.scroll { background:#FFF}
#header.scroll #gnb_pc > ul > li > div  a {color:#333}
#header.scroll #logo a.logo .logo_on{display: block;}
#header.scroll #logo a.logo .logo_w{display: none;}
#header.mo_on #logo a.logo .logo_on{display: none;}
#header.mo_on #logo a.logo .logo_w{display: block;}

.menuToggle {margin-left: auto; position: relative; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:3px; border-radius:3px;   position:absolute; top: 50%; left:50%; margin-left: -16px;
						transition:all 0.5s; background:#fff}
.menuToggle span.t { margin-top: -11px; width:27px;}
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; width:27px;}

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:27px;  margin-top: 0; } 
#header.mo_on .menuToggle span { background:#FFF; } 

#header.scroll .menuToggle span {background:#333}
#header.scroll.mo_on .menuToggle span {background:#FFF}






#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0;
                background:rgba(5,5,5, 0.90); 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:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0 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: var(--secondary-color); }
#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); }





@media all and (max-width:1710px){
	#header #logo { padding-left:3% }  
	#header #logo a { }
	#gnb_pc {}
	#gnb_pc > ul > li > div {padding:0 15px}
}
@media all and (max-width:1600px){
	#header #logo a { }
	#gnb_pc {display:none}
	#top-cs {right: 75px;}
    #header .hd_mbx { display: block; }
}
@media all and (max-width:1024px){
  #header.scroll { height:80px;}

  #header { height:80px; text-align: center}
  #header .hd_bx { line-height:80px; }

  #gnb_pc {display:none;}
  #gnb_mo { text-align: left; }
}
@media all and (max-width:976px){
	#header { height:70px; }	
    #header.scroll { height:70px;}
	.menuToggle { width:70px; height:70px }
	#gnb_mo { padding: 70px 0; }	
}
@media all and (max-width:768px) {
	#header { height:60px; }
    #header.scroll { height:60px;}
	.menuToggle { width:60px; height:60px }
	#gnb_mo { max-width: 100%; padding: 60px 0; }
    #header #logo{}
	#header #logo a {}
    #header #logo a img{max-width: 350px /*이미지자체최대크기*/; width: 47vw/*구버전브라우저용코드*/; width: round(nearest, 47vw, 1px)/*소수점방지*/;}
    #top-cs{right: 65px;}
    #top-cs a img{height: 35px;}
}
@media all and (max-width:480px) {
	#header #logo a {}
	.menuToggle { width:12vw; height:12vw }
    #top-cs{right: 14vw; }
    #top-cs a img{height: 8vw;}
}






#footer {padding:0 0 50px; background-color:#212121;}
#footer #f-nav{height: 100px; display: flex;; align-items: center; border-bottom: 1px solid rgba(162, 162, 162, 0.2);}
#footer #f-nav ul{display: flex; align-items: center; flex-wrap: wrap; gap: 8px 25px;}
#footer #f-nav a{color: #fff; font-size: 1.6rem;}
#footer #f-info{display: flex; flex-wrap: wrap; align-items: flex-start; padding-top: 50px; gap: 36px;}
#footer #f-info h2{padding-top: 5px;}
#footer #f-info h2 #f-logo{opacity: .6;}
#footer #f-info ul{display: flex; flex-wrap: wrap; gap: 3px 20px; font-size: 1.5rem; color: #fff; opacity: .6; font-weight: 500;}
#footer #f-info ul li.w100{width: 100%;}
#footer #f-info #f-sns{margin-left: auto; display: flex; gap: 3px;}
#footer #f-info #f-sns a{display: block; background-color: #111; border-radius: 50%;}
#footer #f-copy{padding-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.5rem; color: #a3a3a3;  opacity: .7;}  
#footer #f-copy a{ color: #a3a3a3;}

@media all and (max-width:1400px) {
}
@media all and (max-width:1280px) {
}
@media all and (max-width:1024px) {
}
@media all and (max-width:480px) {
    #footer {padding: 0 0 2em;}
    #footer #f-info h2 #f-logo{max-width: 70%;}
    #footer #f-nav{height: auto; padding: 1em 0;}
    #footer #f-nav ul{gap: 0px 1em;}
    #footer #f-nav a{font-size: 1.4rem;}
    #footer #f-info{padding-top: 1.25em; gap:1.25em;}
    #footer #f-info ul{font-size: 1.4rem;}
    #footer #f-info #f-sns a img{width: 12vw;}
    #footer #f-copy{padding-top: 2em;}
}