/***********************************************
FONT
***********************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* font-family: "Noto Sans KR", sans-serif; */
@font-face {
	font-family: 'Pretendard-Regular';
	src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900; 1,100..900&family=Poppins:ital,wght@0,100; 0,200; 0,300; 0,400; 0,500; 0,600; 0,700; 0,800; 0,900; 1,100; 1,200; 1,300; 1,400; 1,500; 1,600; 1,700; 1,800; 1,900&family=Raleway:ital,wght@0,100..900; 1,100..900&family=Roboto:ital,wght@0,100; 0,300; 0,400; 0,500; 0,700; 0,900; 1,100; 1,300; 1,400; 1,500; 1,700; 1,900&display=swap');
/* font-family: "Montserrat", serif; */

/***********************************************
RESET
***********************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/* vertical-align: baseline; */
}

*{box-sizing: border-box;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	font-family: 'Montserrat', 'Noto Sans KR', 'Noto Sans SC', Dotum, Arial, sans-serif;
}
a{text-decoration: none; color: #000;}

ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button {
	font-family: "Noto Sans KR", sans-serif;
	background: 0;
	border: 0;
	outline: 0;
	color: #000;
	cursor: pointer;
}
select{
	color: #000;
}

/* Container */
.container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.sub-container{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.inner{
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1600px;
	margin: 0 auto;
}

.sec-mt{margin-top: 10rem;}
.sec-tb{margin: 5rem 0;}

@media screen and (max-width:640px){
	.sec-mt{margin-top: 5rem;}
}
@media screen and (max-width:430px){
	.sec-mt{margin-top: 3rem;}
	.sec-tb{margin: 3rem 0;}
	
}



/***********************************************
Header
***********************************************/
.header.sub-header .pc-nav .menu-list>a>p { color: #222}
.header.sub-header .logo .logo-img { background-image: url(../../images/main/color_logo.png)}
.header.sub-header .menu-btn .line:before,.header.sub-header .menu-btn .line:after { background-color: #222}

.header.fixed .logo,.search-nav-open .header .logo {  width: 170px; height: 65px;}
.header.fixed .fixed-wrap,.search-nav-open .header .fixed-wrap { background: #fff}
.header.fixed .fixed-wrap .pc-nav .menu-list>a>p,.search-nav-open .header .fixed-wrap .pc-nav .menu-list>a>p { color: #222}
.header.fixed .fixed-wrap .logo .logo-img,.search-nav-open .header .fixed-wrap .logo .logo-img { background: url(../../images/main/color_logo.png); background-repeat: no-repeat; background-position: 0 0; background-size: cover; filter: none;}
.header.fixed .fixed-wrap .header-inner{background-color: #fff;}

.pc-nav-open .header.fixed .fixed-wrap,.pc-nav-open .search-nav-open .header .fixed-wrap,.search-nav-open .pc-nav-open .header .fixed-wrap { backdrop-filter: none; -webkit-backdrop-filter: none}


body.pc-nav-open { overflow: hidden}
.header { position: fixed !important; top: 0; left: 0; width: 100%; height: 65px; -webkit-transition: all .4s; transition: all .4s; z-index: 700; font-weight: 300; text-transform: uppercase}

.header.is-hide { height: 0}
.header.is-hide .fixed-wrap { top: -100px !important}

.pc-nav-open .header.is-hide .logo { opacity: 1; transition-delay: .3s}
.header.fixed .header-inner { height: 65px}

.header.fixed .navBg,.header.fixed .search-bar-wrap { top: 100px}
.header.fixed .sub-menu-list-wrap { top: calc(100px - 11px)}
.header .fixed-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 65px; background-color: transparent; transition: height .4s,top .4s; transition: .4s}

.header .header-inner { position: relative; display: flex; justify-content: flex-end; margin: 0 auto; height: 65px}
.header .logo { position: absolute; z-index: 701; top: 50%; left: 20px; transform: translateY(-50%); transition: all .4s;width: 205px; /* aspect-ratio: 811 / 470; */
    height: 80px;}
.header .logo .logo-img { display: block; width: 100%; height: 100%; background-image: url(../../images/main/none_logo.png); background-repeat: no-repeat; background-position: center; background-size: cover;    /* filter: brightness(0) invert(1); */}
.pc-nav-open .header .logo .logo-img { background-image: url(../../images/main/color_logo.png) !important}
.header .lang-wrap { margin-right: 10px; z-index: 701}
.header .lang-wrap .btn-lang { font-size: 16px}
.header .navBg { display: none}
.pc-nav { display: none}
.pc-nav .menu-list-wrap { display: flex}
.pc-nav .menu-list { position: relative; display: flex; padding: 0 19px}

.pc-nav .menu-list>a { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer}
.pc-nav .menu-list>a>p { position: relative; font-size: 32px; font-weight: 600; line-height: 1.5; color: #000; transition: color .4s; -webkit-transition: color .4s}
/* .pc-nav .menu-list:hover>a>p { color: #000 !important} */
.pc-nav .menu-list.on>a>p { color: #000 !important}
.pc-nav .menu-list.on 
.pc-nav .menu-list:last-child { padding-right: 0}
.pc-nav .sub-menu-list-wrap { position: absolute; left: 50%;  top: calc(100px - -22px); padding: 26px 0; border-radius: 10px; box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.1); background-color: #fff; -webkit-transform: translate(-50%, 15px); transform: translate(-50%, 15px); transition: transform .4s, opacity .4s, top .4s; opacity: 0; z-index: 1; overflow: hidden; visibility: hidden;  text-transform: none}
.pc-nav .sub-menu-list-wrap a { display: block; padding: 0 25px}
.pc-nav .sub-menu-list-wrap.on { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; visibility: visible}
.pc-nav .sub-menu-list-wrap:hover a { opacity: 0.8}
.pc-nav .sub-menu-list-wrap:hover .sub-menu2-list-wrap .sub-menu2-list { opacity: 0.8 !important}
.pc-nav .sub-menu-list.on>a { color: #000}
.pc-nav .sub-menu-list>a { display: flex; position: relative; height: 40px; font-size: 25px; font-weight: 600; line-height: 1.5; transition: color .4s,opacity .4s; -webkit-transition: color .4s,opacity .4s; align-items: center}

.pc-nav .sub-menu-list:last-of-type>a { margin-bottom: 0}
.pc-nav .sub-menu-list:hover>a { color: #000}
.pc-nav .sub-menu-list .text { word-break: keep-all}
.pc-nav .sub-menu2-list-wrap:hover .sub-menu2-list { opacity: 0.8}
.pc-nav .sub-menu2-list:not(:last-child) { margin-bottom: 10px}
.pc-nav .sub-menu2-list:last-child { margin-bottom: 5px}
.pc-nav .sub-menu2-list>a { font-size: 14px; line-height: 1.35; color: #ddd; text-align: left}
.pc-nav .sub-menu2-list:hover>a { color: #68e1fe; opacity: 1}
.pc-nav .sub-menu2-list.on>a { color: #68e1fe}
.header-right-wrap { position: absolute; right: 21px; top: 0; height: 100%; display: flex; align-items: center}

.header-right-wrap .m-top-menu { display: flex; align-items: center}
.header-right-wrap .m-top-menu li { display: flex; flex-direction: column; width: 40px}
.header-right-wrap .m-top-menu li>* { display: flex; align-items: center; justify-content: center; flex: 1 1 0%; width: 100%; cursor: pointer}
.header-right-wrap .btn-search { display: none; width: 40px; background: url(/views/res/imgs/common/common_search_icon_fff.svg) no-repeat center/20px; cursor: pointer}
.header-right-wrap .menu-btn-wrap { position: relative; display: flex; align-items: center; justify-content: center; padding-left: 10px; height: 100%; cursor: pointer; z-index: 701}
.menu-btn .line,.searchCloseBtn .line { margin: 7px 0; transition: transform .4s}
.pc-nav-open .menu-btn .line,.pc-nav-open .searchCloseBtn .line { background-color: rgba(0,0,0,0) !important}
.menu-btn .line,.menu-btn .line:before,.menu-btn .line:after,.searchCloseBtn .line,.searchCloseBtn .line:before,.searchCloseBtn .line:after { content: ""; display: block; width: 19px; height: 2px; background-color: #222; transition: transform .4s}
.menu-btn .line:before,.menu-btn .line:after,.searchCloseBtn .line:before,.searchCloseBtn .line:after { width: 28px}
.menu-btn .line:before,.searchCloseBtn .line:before { transform: translate(-9px, -9px)}
.pc-nav-open .menu-btn .line:before,.pc-nav-open .searchCloseBtn .line:before { -webkit-transform: translateX(-5px) translateY(0) rotateZ(135deg); transform: translateX(-5px) translateY(0) rotateZ(135deg)}
.menu-btn .line:after,.searchCloseBtn .line:after { transform: translate(-9px, 7px)}
.pc-nav-open .menu-btn .line:after,.pc-nav-open .searchCloseBtn .line:after { -webkit-transform: translateX(-5px) translateY(-2px) rotateZ(-135deg); transform: translateX(-5px) translateY(-2px) rotateZ(-135deg)}
.searchCloseBtn { position: absolute; top: 20px; right: 15px; z-index: 1; cursor: pointer}

.search-nav-open .searchCloseBtn { opacity: 1}
.search-nav-open .searchCloseBtn .line { background-color: transparent !important}
.search-nav-open .searchCloseBtn .line:before,.search-nav-open .searchCloseBtn .line:after { background-color: #fff}
.search-nav-open .searchCloseBtn .line:before { -webkit-transform: translateY(0) rotateZ(135deg); transform: translateY(0) rotateZ(135deg)}
.search-nav-open .searchCloseBtn .line:after { -webkit-transform: translateY(-2px) rotateZ(-135deg); transform: translateY(-2px) rotateZ(-135deg)}

.open-nav-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: #fff; transition: ease-in .4s; opacity: 0; visibility: hidden; overflow-y: hidden; z-index: 700}

.pc-nav-open .open-nav-wrap { opacity: 1; visibility: visible}
.open-nav-wrap .inner-wrap { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 65px; width: 100%; height: calc(100% - 65px); margin: 0 auto; padding: 48px 50px 48px; overflow-y: auto}

.open-nav-wrap .inner-bottom-wrap { display: flex; align-items: center; justify-content: space-between; margin-top: 30px}
.mobile .open-nav-wrap .inner-bottom-wrap { padding-bottom: 60px}
.open-nav-wrap .inner-bottom-wrap .list-lang { display: flex}
.open-nav-wrap .inner-bottom-wrap .list-lang .item-lang { opacity: 0.5; font-size: 16px}
.open-nav-wrap .inner-bottom-wrap .list-lang .item-lang.selected { opacity: 1}
.open-nav-wrap .inner-bottom-wrap .list-lang .item-lang:first-child { position: relative; margin-right: 12px; padding-right: 12px}
.open-nav-wrap .inner-bottom-wrap .list-lang .item-lang:first-child:after { position: absolute; right: 0; top: 2px; bottom: 2px; width: 1px; background-color: #fff; content: ''}
.open-nav-wrap .inner-bottom-wrap .btn-contact { display: block; font-size: 15px; font-weight: 600; padding-bottom: 5px}
.open-nav-wrap .menu-list-wrap { display: flex; flex-wrap: wrap; width: 100%}

.open-nav-wrap .menu-list-wrap>* { width: 100%}
.open-nav-wrap .menu-list { text-align: center; transition: opacity .4s 0.2s; opacity: 0}
.pc-nav-open .open-nav-wrap .menu-list { opacity: 1}
.open-nav-wrap .menu-list>a { display: flex; align-items: center; height: 65px; font-size: 30px; line-height: 1.33; color: #222; transition: opacity .4s}

.open-nav-wrap .menu-list>a p { position: relative; transition: .4s}
.open-nav-wrap .menu-list.on>a { color: #0070BF}
.open-nav-wrap .menu-list.on .has-sub .btn-more::before,.open-nav-wrap .menu-list.on .has-sub .btn-more::after { background-color: #0070BF !important}
.open-nav-wrap .menu-list .has-sub { position: relative}
.open-nav-wrap .menu-list .has-sub .btn-more { width: 24px; height: 24px; position: relative; margin-left: 12px}
.open-nav-wrap .menu-list .has-sub .btn-more:before,.open-nav-wrap .menu-list .has-sub .btn-more:after { content: ''; position: absolute; top: 8px; left: 0; display: inline-block; width: 19px; height: 1px; margin-top: 3px; background-color: #222; z-index: 1; transition: transform .2s linear}
.open-nav-wrap .menu-list .has-sub .btn-more:before { transform: rotate(-90deg)}
.open-nav-wrap .menu-list .has-sub.open .btn-more:before { transform: rotate(0)}
.open-nav-wrap .menu-list .has-sub.open .btn-more:after { transform: rotate(180deg)}
.open-nav-wrap .sub-menu-list-wrap { display: none; padding-left: 20px; margin-top: 5px; margin-bottom: 25px; text-align: left}

.open-nav-wrap .sub-menu-list { min-height: 45px;  font-size: 20px; line-height: 1.5; text-transform: none; color: #666}
.open-nav-wrap .sub-menu-list.on { color: #0070BF}
.open-nav-wrap .sub-menu-list>a .text { display: inline-flex; height: 45px; align-items: center}
.open-nav-wrap .sub-menu-list>a>p { transition: color .4s,opacity .4s}
.open-nav-wrap .sub-menu2-list p { font-size: 14px; color: #ddd; transition: color .4s,opacity .4s}
.open-nav-wrap .sub-menu2-list.on p { color: #68e1fe}



/***********************************************
Footer
***********************************************/
.footer { height: 260px; box-sizing: border-box; background: #181818; } 
.footer img { width: auto; max-width:100%; } 
.footer .ft_top { justify-content: space-between; padding-top: 64px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 22px; } 
.footer .ft_top ul > li { line-height: 29px; color: #9f9f9f; letter-spacing: -0.04em; font-size: 18px; } 
.footer .ft_top ul > li span { position: relative; display: inline-block; word-break: keep-all; } 
.footer .ft_top ul > li span:not(:last-child):after { display: inline-block; content: 'ㅣ'; margin: 0 2px; } 
.footer .ft_bottom { display: flex; flex-wrap:wrap; justify-content: space-between; } 
.footer .ft_bottom > .copy { letter-spacing: -0.04em; color: #9f9f9f; font-size: 18px; } 
.footer .ft_bottom .ft_menu { display: flex; flex-wrap:wrap; padding-top: 2px; } 
.footer .ft_bottom .ft_menu > li > a { font-weight: 500; color: #fff; letter-spacing: -0.04em; } 
.footer .ft_bottom .ft_menu > li:first-child { margin-right: 20px; } 
.footer .ft_bottom .ft_menu > li:hover > a { text-decoration: underline; } 




/* ==========================
Min-width
============================= */
@media screen and (min-width: 1920px){
	.pc-nav .menu-list { padding:0 25px} 
}

@media screen and (min-width: 1600px){
	.header .header-inner { padding:0} 
	}

@media screen and (min-width: 1525px){
	.header .logo { left:calc((100% - 1700px)/2)} 
	.header-right-wrap { right:calc((100% - 1480px)/2)} 
	}
@media screen and (min-width: 1200px){
	.header .lang-wrap { margin-right:2.08442vw} 
	.pc-nav { margin-right:0} 
	.pc-nav .menu-list { padding:0 1.30276vw} 
	.open-nav-wrap .menu-list .has-sub .btn-more:before,.open-nav-wrap .menu-list .has-sub .btn-more:after { display:none} 
	.open-nav-wrap .sub-menu-list { font-size:24px} 
}

@media screen and (min-width: 992px){
	.pc-nav { display:flex}
	.header { height:100px}
	.none-lg { display:none !important} 

	.header.sub-header { height:100px} 
	.header.fixed .header-inner { height:100px} 
	.header.fixed .fixed-wrap { height:100px} 
	.header .fixed-wrap { height:100px} 
	.header .navBg { display:block; position: absolute; left: 0; top: 100px; display: none; width: 100%; height: 400px; border-bottom: 1px solid #ddd; background-color: #f8f8f8; transition: top .4s} 
 
	.header .header-inner {/*  max-width:1600px; */  height: 170px; padding: 0 200px; transition: height .4s; /* background: rgba(0, 0, 0, 0.3); */ background-color: #fff;} 
	.header .navBg { display:block; position: absolute; left: 0; top: 100px; display: none; width: 100%; height: 400px; border-bottom: 1px solid #ddd; background-color: #f8f8f8; transition: top .4s} 
	.pc-nav .sub-menu-list>a { height:auto; margin-bottom: 16px} 
	.header-right-wrap .m-top-menu { display:none} 
	.header-right-wrap .btn-search { display:block; height: 100px} 
	.search-nav-open .header-right-wrap .menu-btn-wrap { z-index:1}

	.pc-nav-open .header-right-wrap .menu-btn-wrap { z-index: 701} 
	.grid-w { background-position:300px 0} 
	.open-nav-wrap { display:none} 
	.open-nav-wrap .inner-wrap { flex-direction:row; align-items: center; justify-content: center; top: 0; height: 100%; padding-left: 60px; padding-right: 60px} 
	.open-nav-wrap .menu-list-wrap { flex-wrap:nowrap; justify-content: space-between; max-width: calc(1480px)} 
	.open-nav-wrap .menu-list-wrap>* { width:auto} 
	.open-nav-wrap .menu-list { border-bottom:none}
	.open-nav-wrap .menu-list:hover>a>p { opacity: 1 !important} 
	.open-nav-wrap .menu-list>a { justify-content:center; height: auto; margin-bottom: 30px; text-align: center} 
	.open-nav-wrap .menu-list>a { font-size:3.33611vw} 
	.open-nav-wrap .menu-list>a { font-size:40px} 
	.open-nav-wrap .sub-menu-list-wrap { display:block !important; padding-left: 0; margin-bottom: 0; text-align: center} 
	.open-nav-wrap .sub-menu-list { font-size:2.00167vw} 
	.open-nav-wrap .sub-menu-list { min-height:auto; letter-spacing: normal; text-align: center}
	.open-nav-wrap .sub-menu-list:not(:last-child) { margin-bottom: 26px} 
	.open-nav-wrap .sub-menu-list>a .text { line-height:1.4; height: auto}
	.open-nav-wrap .sub-menu-list:hover>a>p { opacity:1 !important} 
	.open-nav-wrap .sub-menu2-list-wrap:hover .sub-menu2-list>a>p { opacity:1} 
	.open-nav-wrap .sub-menu2-list { margin-top:10px; padding-left: 20px}
	.open-nav-wrap .sub-menu2-list:not(:last-child) { margin-bottom: 20px}
	.open-nav-wrap .sub-menu2-list:last-child { margin-bottom: 10px}
	.open-nav-wrap .sub-menu2-list .text:before { content: '·'; display: inline-block; margin-right: 8px} 
	.open-nav-wrap .sub-menu2-list:not(:last-child) { margin-bottom:12px} 
	.open-nav-wrap .sub-menu2-list p { font-size:16px; line-height: 1.375; color: #b3bcc8} 
	.open-nav-wrap .sub-menu2-list:hover p { color:#68e1fe; opacity: 1 !important} 
	.open-nav-wrap .sub-menu2-list { margin-top:15px} 
   
}


/* ==========================
1800px
============================= */
@media screen and (max-width:1800px){
	.header .logo {
        left: 3%;
    }
}

/* ==========================
1440px
============================= */
@media screen and (max-width:1440px){
	.header .header-inner{
		padding: 0 50px;
	}
}


/* ==========================
992px
============================= */
@media screen and (max-width:992px){
    /* header */
    .header-inner{background:#fff}
    .header .logo .logo-img{filter:none}
}

/* ==========================
980px
============================= */
@media screen and (max-width:980px) {
      /* header */
    .header .logo{width: 105px; height: 40px;}
    .header.fixed .logo, .search-nav-open .header .logo{width: 105px; height: 40px;}
}
/* ==========================
800px
============================= */
@media screen and (max-width:800px) {
    /* Footer */
.footer { height: auto; padding-bottom: 5vw; } 
 }

 /* ==========================
768px
============================= */
@media screen and (min-width: 768px){
	/* .header .logo { left:60px}  */
	.header-right-wrap { right:60px}
	.grid-w { background-position:16.26016vw 0} 
}

/* ==========================
480px
============================= */
@media screen and (max-width:480px) {
	.footer .ft_top ul > li{font-size: 13px;}
	.footer .ft_bottom > .copy{font-size: 13px;}
}

/* ==========================
430px
============================= */
@media screen and (max-width:430px) {
    .footer .ft_top ul > li span:not(:last-child):after{content: none;}
}