@charset "utf-8";

:root {
    --color1: #f15a24;
}
/* 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;*/ }

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.inner {	width:90%; }
}
@media all and (max-width:1399px) {
	.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; }
}

/*Header*/
#header { position:fixed; width:100%; height:100px; z-index:150; display:flex; justify-content:space-between;align-items: center;}
#header #logo {margin-left:60px;  font-size:0; position:relative; z-index:99}
#header #logo img{ vertical-align:middle;  }
#header #logo img.on{ display:none; }

#header .hd_bx { line-height:98px;  }
#header .hd_mbx { display: none; }

#header #gnb_pc {margin: 0 auto;}
#header #gnb_pc > ul { display: flex; }
#header #gnb_pc > ul > li{ position: relative; padding: 0 40px;}
#header #gnb_pc > ul > li > div > a {font-size: 2rem; color:#FFF; font-weight:600;}
#header #gnb_pc > ul > li > div > span{}
#header #gnb_pc > ul > li > div > span > a {font-size: 2rem; color: #222; display: block; line-height: 100px;}
#header #gnb_pc > ul > li > ul{display: none;}
#header #gnb_pc > ul > li > ul > li {}
#header #gnb_pc > ul > li > ul > li > a{}

#header #gnb_pc .smenu{position: fixed; width: 100%; left: 0;background:#fff; border-top:1px solid #f3f3f3; display: none; top: 100px;}
#header #gnb_pc .smenu .inner{ display: flex; align-items: center;}
#header #gnb_pc .smenu .l_cont { width: 50%; min-height:240px; display: flex; flex-direction: column;justify-content: center; border-right: 1px solid rgba(0,0,0,0.1);}
#header #gnb_pc .smenu .l_cont h3 {font-size: 5.6rem; color: #222; line-height: 6.5rem;}
#header #gnb_pc .smenu .l_cont .t1 {color: rgba(0,0,0,0.7); font-size: 2rem; margin-top: 2rem; line-height: 3rem;}

#header #gnb_pc .smenu .r_cont {width: 50%; padding:0 8rem }
#header #gnb_pc .smenu .r_cont >  h3 {margin-bottom:0.8em; width:100%; line-height:normal;position:relative; font-size:3.6rem; color:#222}
#header #gnb_pc .smenu .r_cont >  h3:before {content:''; width:10px; height:10px; background:var(--color1); position:absolute; left:-20px; top:-10px}
#header #gnb_pc .smenu .r_cont .list {display: flex; gap:5rem 0; flex-wrap: wrap;}
#header #gnb_pc .smenu .r_cont .list > li { line-height:normal; width: calc(100%/3);}
#header #gnb_pc .smenu .r_cont .list.w50 > li { line-height:normal; width: 40%;}
#header #gnb_pc .smenu .r_cont .list > li > a { font-size: 2.0rem; font-weight:bold; color: #222; position: relative; display: inline-block; line-height: 3rem;}
#header #gnb_pc .smenu .r_cont .list > li > a:after{position: absolute; content: '>'; font-family: 'suit'; right: -2.5rem; top: 50%; transform: translateY(-50%); font-weight: 500;}
#header #gnb_pc .smenu .r_cont .list > li > a:hover {color:var(--color1);}

#header  .lang{display: flex; margin-right: 60px; align-items: center; background: #fff; border-radius: 20px; height: 40px; width: 130px;z-index: 2; justify-content: center;}
#header .lang li{width: 47%; height: 80%; display: flex; align-items: center; justify-content: center;}
#header .lang li a{width: 100%; height: 100%;  display: flex; text-align: center;font-size: 1.5rem; font-weight: 600; color: rgba(101,101,101,0.5); border-radius: 100px; align-items: center;justify-content: center;}
#header .lang li.on a{background: var(--color1); color: #fff;}
#header .rt{display: flex; align-items: center;}


:is(.fp-viewing-1Page, .fp-viewing-3Page, .fp-viewing-4Page, .fp-viewing-5Page, .fp-viewing-6Page, .fp-viewing-7Page)
#header.scroll #gnb_pc:before { background: none; }

.header_bg{ position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: 0.3s; }
.header_bg.on{ opacity: 1; visibility: visible;

}
.fp-viewing-2Page #header,
.fp-viewing-4Page #header,
.fp-viewing-6Page #header,
.fp-viewing-7Page #header,
.fp-viewing-9Page #header,
.fp-viewing-8Page #header {background:#FFF; border-bottom:1px solid rgba(0,0,0,0.05)}
.fp-viewing-2Page #header #logo img.on,
.fp-viewing-4Page #header #logo img.on,
.fp-viewing-6Page #header #logo img.on,
.fp-viewing-7Page #header #logo img.on,
.fp-viewing-9Page #header #logo img.on,
.fp-viewing-8Page #header #logo img.on{display: inline-block;}
.fp-viewing-2Page #header #logo img.off,
.fp-viewing-4Page #header #logo img.off,
.fp-viewing-6Page #header #logo img.off,
.fp-viewing-7Page #header #logo img.off,
.fp-viewing-9Page #header #logo img.off,
.fp-viewing-8Page #header #logo img.off{display: none;}
.fp-viewing-2Page #header #logo2 img.on,
.fp-viewing-4Page #header #logo2 img.on,
.fp-viewing-6Page #header #logo2 img.on,
.fp-viewing-7Page #header #logo2 img.on,
.fp-viewing-9Page #header #logo2 img.on,
.fp-viewing-8Page #header #logo2 img.on{display: inline-block;}
.fp-viewing-2Page #header #logo2 img.off,
.fp-viewing-4Page #header #logo2 img.off,
.fp-viewing-6Page #header #logo2 img.off,
.fp-viewing-7Page #header #logo2 img.off,
.fp-viewing-9Page #header #logo2 img.off,
.fp-viewing-8Page #header #logo2 img.off{display: none;}
.fp-viewing-2Page #header #gnb_pc:before,
.fp-viewing-4Page #header #gnb_pc:before,
.fp-viewing-6Page #header #gnb_pc:before,
.fp-viewing-7Page #header #gnb_pc:before,
.fp-viewing-9Page #header #gnb_pc:before,
.fp-viewing-8Page #header #gnb_pc:before{content:""; width:100%; height:100px; position:absolute; top:0; left:0;}
.fp-viewing-2Page #header .user li a,
.fp-viewing-4Page #header .user li a,
.fp-viewing-6Page #header .user li a,
.fp-viewing-7Page #header .user li a,
.fp-viewing-9Page #header .user li a,
.fp-viewing-8Page #header .user li a { color:#686868; }
.fp-viewing-2Page #header .user li.lang a,
.fp-viewing-4Page #header .user li.lang a,
.fp-viewing-6Page #header .user li.lang a,
.fp-viewing-7Page #header .user li.lang a,
.fp-viewing-9Page #header .user li.lang a,
.fp-viewing-8Page #header .user li.lang a  { color:#FFF; background:#1d2832; border-color:#1d2832 }
.fp-viewing-2Page #header #gnb_pc .gnb_dp1>div > a,
.fp-viewing-4Page #header #gnb_pc .gnb_dp1>div > a,
.fp-viewing-6Page #header #gnb_pc .gnb_dp1>div > a,
.fp-viewing-7Page #header #gnb_pc .gnb_dp1>div > a,
.fp-viewing-9Page #header #gnb_pc .gnb_dp1>div > a,
.fp-viewing-8Page #header #gnb_pc .gnb_dp1>div > a { color:#212121 }




#header.menu_on {background:#FFF; border-bottom:1px solid rgba(255,255,255,0.1); }
#header.scroll {background:#FFF; border-bottom:1px solid rgba(0,0,0,0.05)}

#header.scroll #logo img.on,
#header.menu_on #logo img.on { display:inline-block; }
#header.scroll #logo img.off,
#header.menu_on #logo img.off { display:none; }
#header.scroll #logo2 img.on,
#header.menu_on #logo2 img.on { display:inline-block; }
#header.scroll #logo2 img.off,
#header.menu_on #logo2 img.off { display:none; }
#header.on .lang,
#header.scroll .lang,
#header.menu_on .lang{background: #eeeeee;}




#header.scroll #gnb_pc:before,
#header.menu_on #gnb_pc:before {content:""; width:100%; height:100px; position:absolute; top:0; left:0; }
#header.menu_on #gnb_pc:before {background:#FFF !important}

#header.scroll .user li a,
#header.menu_on .user li a { color:#686868; }
#header.scroll .user li.lang a,
#header.menu_on .user li.lang a { color:#FFF; background:#1d2832; border-color:#1d2832 }
#header.scroll .user li:before,
#header.scroll .menu_on li:before {background:#e9e9e9}

#header.scroll #gnb_pc .gnb_dp1>div > a,
#header.menu_on #gnb_pc .gnb_dp1>div > a { color:#212121 }
#header.scroll #gnb_pc .gnb_dp1>div > a:hover,
#header.menu_on #gnb_pc .gnb_dp1>div > a:hover { color:var(--color1) }




#gnb_mo { position:fixed; top:75px; right:0; width:100%; height:100%; max-width:380px;
                background: rgba(2, 2, 2, 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 > li > div {display:block; width:100%; font-size:1.8rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box;  line-height:3.2em; 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 { padding:0 1em; color:#fff; }
#gnb_mo > ul > li > .smenu {display:none; }
#gnb_mo > ul > li > .smenu .inner{width: 100%;}
#gnb_mo > ul > li > .smenu .l_cont, 
#gnb_mo > ul > li > .smenu .r_cont h3 {display:none}
#gnb_mo > ul > li > .smenu .r_cont .list > li > a {display:block; width:100%; font-size:1.7rem; color:#4b4b4b;padding:0 1.5em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3em;}

#gnb_mo > ul > li > div.on { background: var(--color1); }
#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:relative; cursor:pointer; z-index:9999; box-sizing: border-box; background:var(--color1);}
.menuToggle span {display:block; width:26px; height:2px; background:#fff; position:absolute; left:50%; margin-left: -13px; transition:all 0.5s}
.menuToggle span.t {top:28px;}
.menuToggle span.m {top:50%; margin-top:-1px;}
.menuToggle span.b {bottom:28px; }

.menuToggle.m_on span {background:#FFF}
.menuToggle.m_on span.t {transform:translateY(8.5px) rotate(45deg)}
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b {transform:translateY(-8.5px) rotate(-45deg)}

#header.scroll .menuToggle,
#header.menu_on .menuToggle { background:#222; }

#header.scroll .menuToggle.m_on span,
#header.menu_on .menuToggle.m_on span { background:#FFF }
#header.scroll .menuToggle.m_on span,
#header.menu_on .menuToggle.m_on span { background:#FFF }



@media all and (max-width:1630px) {
	#header #logo {margin-left:30px;}
	#header #logo img {height:35px}
	#header #gnb_pc > ul > li { padding: 0 35px; }

    #header #gnb_pc .smenu .l_cont { width: 35%;}
    #header #gnb_pc .smenu .l_cont h3 {font-size: 4rem; line-height: 5.5rem;}
    #header #gnb_pc .smenu .l_cont .t1 {font-size: 1.8rem;}
    #header #gnb_pc .smenu .r_cont{width: 65%; padding: 0 4rem;}
    #header #gnb_pc .smenu .r_cont .list{gap: 3rem 0;}
    #header #gnb_pc .smenu .r_cont .list > li > a{font-size: 1.8rem;}
}
@media all and (max-width:1280px) {
    #header #gnb_pc {display:none;}
    #header { height:75px; }

    #header .hd_bx { line-height:75px; }
    #header .hd_mbx { display: block; width: 75px; height: 75px;  }

    #header #logo img { height:40px }

    #header.scroll,
    #header.on { height: 75px; line-height: 75px; background: #fff;}

    #header.on .hd_bx,
    #header.scroll .hd_bx { line-height: 75px;  }

    #header.on #logo img.on { display: inline-block; }
    #header.on #logo img.off { display: none; }

	#header.scroll #gnb_pc .gnb_dp1>div > a,
	#header.menu_on #gnb_pc .gnb_dp1>div > a { color:#212121 }
	#header.scroll #gnb_pc .gnb_dp1>div > a:hover,
	#header.menu_on #gnb_pc .gnb_dp1>div > a:hover { color:#222 }

    #header.on .hd_full { background-color:#222; }
    #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); }

    #header .lang{margin-right: 25px;}
}

@media all and (max-width:767px) {
	#header{ height:60px; }

	#header #logo img { height:30px }

	#gnb_mo { top: 60px; }

	#header .hd_bx { line-height:60px; }
	#header .hd_mbx{ width:60px; height:60px; line-height:60px; }

	#header.on, #header.scroll { height: 60px;  background:#FFF;}
	#header.on .hd_bx, #header.scroll .hd_bx { line-height: 60px; }
	#header.scroll #gnb_pc .gnb_dp1>div { height:60px; }

	#header.scroll .hd_mbx { width: 60px; }

	.menuToggle span.t {top:20px;}
	.menuToggle span.b {bottom:20px; }
	.menuToggle.m_on span.t {transform:translateY(9px) rotate(45deg)}
	.menuToggle.m_on span.b {transform:translateY(-9px) rotate(-45deg)} 

    #header .lang{height: 4rem; width: 11rem; margin-right: 1.5rem;}
    #header .lang li{width: 45%;}
    #header .lang li a{font-size: 1.4rem;}

}


@media all and (max-width:568px) {
	#header{height:55px; }
	#gnb_mo { top: 55px; }

	#header .hd_btn { right:20px}
	#header .hd_bx{ line-height:55px; }
	#header .hd_mbx { width:55px; height:55px; line-height:55px;}

	#header #logo {margin-left:15px;}
	#header #logo img { height:30px; }

	#header.on, #header.scroll { height: 55px; }
	#header.on .hd_bx, #header.scroll .hd_bx { line-height: 55px; }
	#header.on #logo img, #header.scroll #logo img { }
	#header.scroll #gnb_pc .gnb_dp1>div { height:55px; }

	#header.scroll .hd_mbx { width: 55px; }

	.menuToggle span.t {top:17.5px;}
	.menuToggle span.b {bottom:17.5px; }
}



/* footer */
#footer {background: #070808;padding: 6rem 0 10rem; color: #fff;}
#footer .top{display: flex; justify-content: space-between; margin-bottom: 6rem; padding-bottom: 6rem; border-bottom: 1px solid rgba(255,255,255,0.2);}
#footer .top .lt h3{font-size: 4rem;}
#footer .top .lt a{display: inline-block; color: #fff; margin-top: 10rem; font-size: 1.6rem; padding: 2rem 4rem; border-radius: 100px; background: var(--color1);}
#footer .top .rt > ul{display: flex; gap: 8rem; text-align: right;}
#footer .top .rt > ul a{color: #fff;}
#footer .top .rt > ul > li > div > a{font-size: 2rem; font-weight: 600; margin-bottom: 2rem; display: inline-block;}
#footer .top .rt > ul > li .smenu .l_cont{display: none;}
#footer .top .rt > ul > li .smenu .inner{width: 100%;}
#footer .top .rt > ul > li .list {opacity: 0.6; font-size: 1.6rem;}
#footer .top .rt > ul > li .list li + li{margin-top: 1.5rem;}
#footer .bot .logo .on{display: none;}
#footer .bot .info{display: flex; margin: 4rem 0 5rem; gap: 1.5rem 3rem; flex-wrap: wrap;}
#footer .bot .info dl{font-size: 1.6rem; font-weight: 500;}
#footer .bot .info dd{opacity: 0.7; margin-top: 0.5rem;}
#footer .bot .copy{display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;}
#footer .bot .copy p{display: flex; gap: 3rem; font-size: 1.6rem; opacity: 0.4; align-items: center; flex-wrap: wrap;}
#footer .bot .copy p span{display: inline-block;}
#footer .bot .copy ul{display: flex; gap: 2rem; font-size: 1.6rem; font-weight: 500;}
#footer .bot .copy ul a{color: #fff;}


@media all and (max-width:1620px){
    #footer .top .lt h3{font-size: 3rem;}
    #footer .top .lt a{margin-top: 7rem; padding: 1.5rem 3rem;}
    #footer .top .rt > ul{gap: 4rem;}
}
@media all and (max-width:1280px){
    #footer .top .lt h3{font-size:2.5rem;}
    #footer .top .rt > ul{gap: 3rem;}
    #footer .top .rt > ul > li > div > a{font-size: 1.8rem;}
    #footer .top .rt > ul > li .list {font-size: 1.5rem;}
    #footer .bot .info{flex-wrap: wrap;}
    #footer .bot .info dl:first-child{width: 100%;}
}
@media all and (max-width:980px){
    #footer .top{flex-wrap: wrap; gap: 5rem;}
    #footer .top .lt{width: 100%;}
    #footer .top .rt{width: 100%;}
    #footer .top .rt > ul{justify-content: end;}
}
@media all and (max-width:768px){
    #footer .top .rt{display: none;}
    #footer .top .lt{text-align: center;}
    #footer .top .lt a{margin-top: 3rem;}
    #footer .bot .copy p{gap: 1rem;}
}
@media all and (max-width:480px){
    #footer{padding: 4rem 0 7rem;}
    #footer .top{margin-bottom: 4rem; padding-bottom: 4rem;}
    #footer .top .lt a{font-size: 1.5rem;}
    #footer .bot .logo img{width: 14rem;}
    #footer .bot .info{margin: 3rem 0 4rem;}
    #footer .bot .info dl{font-size: 1.5rem;}
    #footer .bot .copy p{font-size: 1.4rem; gap: 0.5rem;}
    #footer .bot .copy ul{font-size: 1.5rem;}
}