@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:300,400,500,600,700&display=swap&subset=korean');

@font-face { 
    font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; 
}
@font-face { 
    font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; 
}
@font-face { 
    font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; 
}


/*
font-family : 'Noto Serif KR', serif;
font-family : 'Noto Sans KR', sans-serif;
font-family : 'NanumSquare', sans-serif;

*/



* { margin: 0; padding: 0; outline: none;}
html,body { width: 100%; height: 100%; min-width: 1180px;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;}
p, span, h1, h2, h3, h4, h5, h6, a, li { font-family : 'Noto Sans KR', sans-serif; }
.mob {display: none;}
.pc {display: block;}
#header {min-width: 1180px;}


/* 초기화 영역 끝 */


/*header*/


#wrap {width: 100%;}
#header { width: 100%; position: absolute; left: 0; top: 0; margin: 0px auto; z-index: 10; background-color: rgba(0,0,0,0.65); }
#header_inner { width: 100%;  max-width: 1180px;  margin: 15px auto;  font-size: 0px;  position: relative;}
#header_logo { width: 100%;  display: block;  max-width: 210px;  margin: 10px auto 25px; }
#header_logo img {width: 100%}

#nav { width: 100%;  margin: 0px auto;  display: block;  font-size: 0px;  text-align: center;  box-sizing: border-box; }
#nav > li {cursor: pointer; display: inline-block; width:16.6%; font-size : 16px; text-transform : uppercase; color : #fff;  vertical-align: top; font-weight: bold; position: relative;}
#nav > li.on {color: #f8b62d;}
.nav_ul { width: 100%;  padding: 10px 0px;  display: none;  position: absolute;  left: 0px;  top: 38px;  background-color: rgba(0,0,0,0.65);  height: 300px;  border-right: 1px solid #000000;  box-sizing: border-box;}
#nav > li:last-child .nav_ul {border-right: 0px;}
.nav_ul li { font-size: 14px;  line-height: 17.55px;  margin-bottom: 18px;  color: #898989;  transform: skewX(-0.3deg);}
.nav_ul li:hover {color: #fff;}
#header:hover .nav_ul { display: block;}




/*footer*/

#section3 {width: 100%; background-color: #213161; z-index: 10;}
#footer {width: 100%; background-color: #213161; z-index: 10; position: relative;}
.f_inner {width: 90%; max-width: 1000px; margin: 0px auto; padding: 30px 0px 20px; }
.f_nav {font-size: 0px;}
.f_nav li {display: inline-block; vertical-align: top; position: relative;}
.f_nav li:nth-child(1) {width: 20%; margin-right: 6%;}
.f_nav li:nth-child(1) img {width: 100%;  max-width: 210px; }
.f_nav li:nth-child(2), .f_nav li:nth-child(3) {width: 32%; margin-right: 5%}
.f_txt1 {  font-size : 18px; line-height : 33.78px; text-transform : uppercase; color : #B5B5B6; border-bottom: 1px solid #b5b5b6;}
.f_txt2 {  font-weight : bold; font-size : 15px; line-height : 21.72px; text-transform : uppercase; color : #B5B5B6; opacity : 0.54; padding: 7px 0px 3px;}
.f_txt3 { font-size: 13px;  line-height: 16.57px;  color: #FFFFFF;  padding-left: 32px;  position: relative;  box-sizing: border-box; }
.f_txt3 span {position: absolute; left: 0px; top: 0px;  color : #808588; font-weight: bold;}
.f_txt3.last {padding-bottom: 20px;}
.copy {  font-size: 11px; letter-spacing: -0.3px; line-height: 23.2px; text-transform: uppercase;  color: #B5B5B6;  margin-top: 60px; }

/* main */

.m0 {width: 100%; height: 100vh; position: relative;  background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url(../image/m0_bg.png); }
.m0_contbox {position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); text-align: center;}
.m0_contbox > p:nth-child(1) { font-weight : 500; font-size : 27px; text-transform : uppercase;  color : #FFFFFF; }
.m0_contbox > p:nth-child(2) {  font-size : 65px;line-height : 75.95px;letter-spacing : -3.8px; text-transform : uppercase; color : #FFFFFF; font-weight: 900;  margin: 30px 0px 45px; }
.m0_contbox > p:nth-child(3) {  font-weight: 500;  font-size: 16px;  line-height: 19px;  color: #FFFFFF; letter-spacing: -0.3px;}
.m0_ul {width: 100%; font-size: 0px; margin-top: 100px; display: none;}
.m0_ul li {display: inline-block; vertical-align: top; width: 30%; margin: 0px 35px; border-radius: 100%; background-color: rgba(255,255,255,0.85); width:210px; height: 210px; text-align: center; padding: 30px; box-sizing: border-box; transition: all 0.4s;}
.m0_ul li a {display: block; width: 100%; height: 100%;}
.m0_ul li:hover {transform: scale(1.1)}
.m0_ul li img {width: 100%; max-width: 110px; margin: 0px auto; display: block; }
.m0_ul li p { font-size: 17px;  line-height: 19.35px;  text-transform: uppercase;  color: #102640;  margin-top: 5px;}



.m1 {width: 100%; height: 100vh !important; position: relative;}
.m_title { text-align: center;  font-size : 30px; line-height : 40.95px; letter-spacing : 12px; text-transform : uppercase;  color : #727171; margin-top: 120px;}
.main_inner { width: 100%;  margin: auto;  max-width: 1500px;  position: relative; top: 45%; transform: translateY(-50%)}
.main_inner.h .m_title{margin-top: 0px; margin-bottom: 5%;}
.ms1 {width: 100%; font-size: 0px;  }
.ms1 li {width: 19%; margin: 0px 0.5%; display: inline-block; vertical-align: top;}
.ms1 li a {display: block; width: 100%; height: 100%;}
.ms1 li img {  width: 100%;  display: block;  max-width: 350px;  margin: auto; border: 12px solid #c9d2d9;  box-sizing: border-box; }
.ms1 li p:nth-child(2) {  text-transform: capitalize;  font-size : 22px; line-height : 32.64px; color : #4C4948; margin-top: 15px; position: relative; text-align: center;}
.ms1 li p:nth-child(2)::before {content: ""; display: block; margin: 25px auto 10px; width: 100px; height: 3px; background-color: #2f3b49; }
.ms1 li p:nth-child(3) {width: 100%; max-width: 100px; display: block; margin: 15px auto; border: 1px solid #231815; text-align: center;  font-size : 12px; line-height : 12.9px; text-transform : uppercase; color : #231815; transition: all 0.4s; height: 30px;  line-height: 30px;}
.ms1 li:hover p:nth-child(3) {background-color:#231815; color: #fff; }

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {  content: none;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {  content: none ;}

.m1 .swiper-button-prev, .m1 .swiper-container-rtl .swiper-button-next { transform: translateY(-50%);}
.m1 .swiper-button-next, .m1 .swiper-container-rtl .swiper-button-prev { transform: translateY(-50%);}


.m2 {width: 100%; height: 100vh; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url(../image/m2_bg.png);}

.m2_txtbox {width:100%; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); }
.m2_txtbox p:nth-child(1) {  font-size : 66px; line-height : 80px; letter-spacing : -3.3px; text-transform : uppercase;
  color : #fff; text-align: center; font-weight: 700; }
.m2_txtbox p:nth-child(1) span {color: #b2b2b2;}
.m2_txtbox p:nth-child(2) {text-align: center;   font-size : 22px; line-height : 30px; letter-spacing : -1.08px; color : #FFFFFF; margin-top: 15px; font-weight: 200}

.m2_ul {width: 100%; font-size: 0px; text-align: center; max-width:600px; margin: 100px auto 0px;}
.m2_ul li {width: 42%; display: inline-block; vertical-align: top;}
.m2_ul li:nth-child(1) {margin-right: 8%;}
.m2_ul li:nth-child(2) {margin-left: 8%;}
.m2_ul li img {width: 90%; max-width: 65px; display: block; margin: auto;}
.m2_ul li a {width: 90%; display: block;  font-size : 17px;text-transform : uppercase; color : #fff; background-color:rgba(255,255,255,0.4); text-align: center; border-radius: 25px; transition: all 0.4s;  margin: 30px auto;   padding: 10px 0px;}
.m2_ul li a:hover {background-color: #f8b62d;}




.scroll_fix {position: fixed; right: 30px; top: 50%; transform: translateY(-50%); width: 100%; max-width: 25px; z-index: 999;}
.scroll_fix img{width: 100%; }