@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;
font-family: 'Encode Sans Condensed', sans-serif;
font-family: 'GmarketSansLight';
font-family: 'GmarketSansMedium';
font-family: 'GmarketSansBold';


*/



* { margin: 0; padding: 0; outline: none;}
html,body { width: 100%; height: 100%; min-width: 1024px; position: relative; }
html {font-size: 17px;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;}
p, span, h1, h2, h3, h4, h5, h6, a, li {font-family : 'NanumSquare', sans-serif;}
.mob {display: none;}
.pc {display: block;}
#header {min-width: 1024px;}
.encode {font-family: 'Encode Sans Condensed', sans-serif !important;}


/* 초기화 영역 끝 */


/*header*/


.wrap {width: 100%; overflow-x: hidden;}
#header {width: 100%; position: absolute; left: 0; top: 0; margin: 0px auto; height: 80px; z-index: 100;  transition: all 0.4s;overflow: hidden; box-sizing: border-box;}
#header:hover {height: 365px; background-color: #1e2124c4; }
#header::after {position: absolute; top: 70px; width: 100%; content: ""; left: 0px; background-color: rgba(255,255,255,0.5); height: 1px;  z-index: -1; transition: all 0.4s; opacity: 0;} 
#header:hover::after {opacity: 1;}
#header_inner{width:90%; max-width: 1200px; margin: 20px auto 0px; font-size: 0px;}

#header_logo {width: 12%; display: inline-block; vertical-align: top; position: relative;}
#header_logo a {display: block; width: 100%;}
#header_logo img {width: 100%;  max-width: 150px; position: absolute; left: 0px; top: 0px; transition: all 0.4s}

#nav {width: 73%; margin-top: 10px; display: inline-block; vertical-align: middle; font-size: 0px; text-align: right;}
#nav > li {cursor: pointer;display: inline-block;width: auto; padding: 0px 25px;  font-size: 0.95rem;  color: #fff;  vertical-align: top;  transition: all 0.4s;  transform: skewX(-0.3deg);}
.nav_ul { width: 100%;  padding: 10px 0px; opacity: 0; margin-top: 25px;  box-sizing: border-box; transition: all 0.4s;}
#header:hover .nav_ul {opacity: 1;}
.nav_ul li { font-size: 0.85rem;  line-height: 1.3;  margin-bottom: 15px;  color: #fff;  transition: all 0.4s; text-transform: capitalize;  transform: skewX(-0.3deg); }
.nav_ul li a {display: inline-block; transition: all 0.4s; border-bottom: 1px solid transparent;}
.nav_ul li:hover a {border-bottom: 1px solid #fff;}


#right_header { font-size: 0px;  display: inline-block;  width: 15%;  vertical-align: top;  text-align: right; margin-top: 5px;}
#right_header > li {vertical-align: top;  text-align: center;  display: inline-block; box-sizing: border-box; transition: all 0.4s; transform: skewX(-0.3deg);}
#lang {width: 100%;max-width: 100px; cursor: pointer; position: relative; margin-right: 20px; font-size: 0.8rem; letter-spacing: 0.9px; background-color: rgba(0,0,0,0.7); text-transform: uppercase; overflow: hidden; padding: 8px; border-radius: 6px; color: #fff;}
#lang > i {font-size: 0.9rem; vertical-align: middle;}
#lang .lang_sub { width: 100%; height: 0px; transition: all 0.4s; }
#lang:hover .lang_sub{height: 58px; }
#lang .lang_sub li { display: block; position: relative; padding: 5px  0px; }
#lang .lang_sub li:nth-child(1) {padding-top: 10px;}
#lang .lang_sub li a {display: inline-block; border-bottom: 1px solid transparent; transition: all 0.4s;}
#lang .lang_sub li:hover a {border-bottom: 1px solid #2954B6;}
#header:hover #lang {color: #fff;  background-color: #2954B6;}
#header:hover #lang .lang_sub li:hover a {border-bottom: 1px solid #fff;}

#sitemap {margin-top: -2px;}
#sitemap i {font-size: 2rem; color: #fff; transition: all 0.4s;}
#sitemap i:hover {color: #2954B6;}


/*footer*/

.footer {width: 100%; position: relative; z-index: 10;}
.f_top {width: 100%; background-color: #EEEEEE;}
.f_inner {width: 90%; max-width: 1200px; margin: auto; position: relative;}

.f_top_nav {font-size: 0px; width: 50%; padding: 12px 0px;}
.f_top_nav li {display: inline-block; vertical-align: middle; width: auto; color: #4D4D4D; font-size: 0.8rem;transform: skewX(-0.3deg); font-weight: bold;}
.f_top_nav li::after {content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background-color: #C8C9C9; margin: 0px 15px;}
.f_top_nav li:last-child::after {display: none;}

.top_btn {position: absolute;right: 5%;top: -20px;cursor: pointer; background-color: #2954B6; width: 90%;
 max-width: 40px; text-align: center; padding: 10px 0px 8px;}
.top_btn p { font-size: 1.1rem; line-height: 1.3; color: #fff; position: relative; text-align: center;}
.top_btn p::before { content: ""; display: block; width: 12px; height: 2px; margin: auto; background-color: #fff; margin-bottom: 2px;}
.top_btn p i {display: block;}

.f_bottom {width: 100%; background-color: #1E1E1E;  padding: 20px 0px 40px;  border-bottom: 1px solid rgba(255,255,255,0.3);}
.f_info {width:100%; font-size: 0px;}
.f_info li {width: 50%; display: inline-block; vertical-align: top;}
.f_info li.logo img {width: 100%; max-width: 150px;}
.f_info_txt_ul {width: 100%; text-align: right;}
.f_info_txt_ul li {width: auto; display: inline-block; text-align: left; vertical-align: top;}
.f_info_txt_ul li:nth-child(1) {margin-right: 35px;}
.f_info_txt_ul li p {position: relative; padding-left: 12px; box-sizing: border-box; color: #fff; font-size: 0.8rem; transform: skew(-0.3deg); margin-bottom: 10px;}
.f_info_txt_ul li p::before {content: ""; position: absolute;  left: 0px;  top: 2px;  background-color: #fff;  width: 3px;  height:10px}
.f_info_txt_ul li p.bar_none::before {display: none;}
.f_info_txt_ul li p .bold {font-weight: 800; margin-right: 5px;}


.f_last {width: 100%; background-color: #1E1E1E;  padding: 15px 0px; }
.f_last_ul {width: 100%; font-size: 0px; text-align: right;}
.f_last_ul > li:nth-child(1) {display: inline-block; vertical-align: middle; width: 84%; text-align: left;}
.f_last_ul > li:nth-child(1) .copy {color:#CCCCCC; font-size: 0.75rem; transform: skew(-0.3deg);}
.family_btn {display: inline-block; vertical-align: middle;  text-align: left;  width: 16%; background-color: #353535; padding: 0px 8px;  box-sizing: border-box;  font-size: 0.7rem;  text-transform: uppercase;  color: #fff;  cursor: pointer;  height: 30px;  line-height: 30px;  transition: all 0.4s; font-weight: 800;  letter-spacing: 2.08px;  transform: skewX(-0.3deg);}
.family_btn > .arrow { position: absolute; right: 10px; top: 10px; color: #808080; width: 0px; height: 0px; border-bottom: 5px solid #808080; border-top: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid transparent; transition: all 0.4s;}
.family_ul { position: absolute;  left: 0px;  bottom: 30px;  width: 100%;  background-color: #353535;  padding: 0px 8px;  box-sizing: border-box;  transition: all 0.4s;  height: 0px; overflow: hidden;}

.family_ul li {padding: 7px 0px; line-height: 1.3;}
.family_ul li a {transition: all 0.4s;  border-bottom: 1px solid transparent;  transform: skewX(-0.3deg); display: inline-block;}
.family_ul li a:hover {border-bottom: 1px solid #fff;}

.family_btn.on > .arrow {transform:rotate(180deg);  top: 14px;}
.family_btn.on .family_ul { height: 53px; }






/* main */


.m_txt1 { font-family: 'Noto Sans KR', sans-serif; font-size: 1.8rem;  line-height: 1.1;  letter-spacing: -1.75px;  text-transform: uppercase;  color: #646464;  font-weight: 800;}
.m_txt2 { line-height: 1.3;  font-size: 1.5rem;  letter-spacing: -1.8px;  color: #231815;     margin-bottom: 30px;}
.m_txt3 { line-height: 1.5; color: #231815; font-size: 1rem; letter-spacing: -1.56px; transform: skewX(
-0.3deg); transform: skewX(-0.3deg); word-break: keep-all;}
.m_txt4 { font-family: 'Noto Sans KR', sans-serif; font-size: 2.5rem;  line-height: 1.1;  letter-spacing: -1.75px;  text-transform: uppercase;  color: #646464;  font-weight: 800;}

.center {text-align: center;}

.white {color: #fff !important;}

.main {width: 100%; position: relative;}
.center {text-align: center;}




/* main1 */

.m1 {width: 100%; position: relative;}
.a1 .swiper-slide {width: 100%; height: 700px; background-position: center; background-repeat: no-repeat; position: relative; background-size: cover;
  /*
  -webkit-animation: mymove 10s infinite;
      -moz-animation: mymove 10s infinite;
      -ms-animation: mymove 10s infinite;
      -o-animation: mymove 10s infinite;
      animation: mymove 10s infinite;
      */
    }

#ms1_1 {background-image: url(../image/ms1_img1.png); }
#ms1_2 {background-image: url(../image/ms1_img2.png); }
#ms1_3 {background-image: url(../image/ms1_img3.png); }
#ms1_4 {background-image: url(../image/ms1_img4.png); }
  
@keyframes mymove {
  0%   { background-size: 100% 100%; }
  50% { background-size: 110% 110%; }
  100% { background-size: 100% 100%; }
}



.ms1_text { width: 90%;  position: absolute;  left: 50%;  bottom: 0%;  text-align: center;  transform: translate(-50%, -50%); z-index: 10;}
.ms1_text p:nth-child(1) {font-size: 1.5rem;letter-spacing: -0.75px; color: #fff;}
.ms1_text p:nth-child(2) {line-height: 1.3; color: #FFFFFF;  margin-top: 10px;  font-weight: bold;  font-size: 3rem;  letter-spacing: -1.35px;}
.ms1_text p:nth-child(3) { font-size : 1.1rem; line-height : 1.3; letter-spacing : -0.72px; color : #FFFFFF; margin-top: 20px; transform: skewX(-0.3deg);}
.ms1_text p:nth-child(3) span.bold {font-weight: 800;}

.video {  position: absolute;  top: 50%;  left: 50%;  min-width: 100%;  min-height: 100%;  width: auto;  height: auto;  z-index: -1;  overflow: hidden; transform: translate(-50%, -50%); transition: all 0.5s; opacity: 0;}
.swiper-slide-active .video {opacity: 1;}



.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;}

.ms1_bottom_nav { width: 90%; max-width: 1200px; font-size: 0px; background-color: rgba(41,84,184,0.95); padding: 8px 0px; box-shadow: 2px 2px 15px 0px rgb(0 0 0 / 30%); position: absolute; left: 50%; bottom: -30px; z-index: 10; transform: translateX(-50%);}
.ms1_bottom_nav li { display: inline-block; vertical-align: top; border-right: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; width: 33.3333%;}
.ms1_bottom_nav li:last-child {border-right: 0px;}
.ms1_bottom_nav li a {font-weight: bold; font-size: 1rem; line-height: 1.3; letter-spacing: 0.8px; text-transform: uppercase; color: #FFFFFF; display: block; text-align: center; padding: 8px 0px;     transform: skewX(-0.3deg); transition: all 0.4s;}
.ms1_bottom_nav li a:hover {color:#000000}



/*main2*/


.m2 { margin: 80px 0px 120px;}
.m2 .sub_inner {max-width: 1400px;}
.m2_cont {width: 100%;}
.m2_cont .slidebox { position: relative;  padding: 0px 100px 50px;  box-sizing: border-box;}
.m2_imgbox { width: 100%;  height: 420px;  background-size: cover;  background-position: center;  background-repeat: no-repeat;}
.m2_imgbox.img1 {background-image: url(../image/m2_img1.png);}
.m2_imgbox.img2 {background-image: url(../image/m2_img2.png);}
.m2_txtbox { position: absolute; right: 55px; bottom: 0px; background-color: #2954B8;  width: 35%;  padding: 40px;  box-sizing: border-box;  z-index: 10; box-shadow: 1px 1px 8px 0px rgb(0 0 0 / 15%);}
.m2_prev img, .m2_next img {width: 100%; max-width: 16px;}

.m_morebox {display: block;}
.m_morebox.right {text-align: right;}
.m_more { font-family: 'GmarketSansMedium'; font-size: 0.9rem;  line-height: 1.3;  position: relative;  color: #2954B8;  background-color: #fff;  display: inline-block;  border-radius: 20px;  padding: 2px 12px; transition: all 0.4s;}
.m_more i {vertical-align: middle;}
.m_more:hover {color:#fff; background-color: #2954B8;}



/*main3*/

.m3 {width: 100%; height: 765px;}
.a3 {width: 100%; height: 100%;}
.a3 .swiper-slide {width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; position: relative; background-size: cover; }

#ms3_1 {background-image: url(../image/ms3_img1.png); }
#ms3_2 {background-image: url(../image/ms3_img2.png); }

.m3_txtbox { position: absolute; left: 0px; top: 0px; width: 40%; height: 100%; padding-left: 20%;padding-right:2%; padding-top: 6%;  box-sizing: border-box;  background-color: rgba(0,0,0,0.5);}
.m3_txtbox .m_txt4 { padding-bottom: 10px;  margin-bottom: 60px;  border-bottom: 1px solid rgba(255,255,255,0.5);}
.m3_more { position: absolute; right: 40px; bottom: 50px; border: 1px solid rgba(255,255,255,0.3); padding: 5px 10px; transform: skewX(-0.3deg);  display: inline-block;  font-size: 0.8rem;  line-height: 1.3;  letter-spacing: 2.4px;  text-transform: uppercase;  color: #FFFFFF; transition: all 0.4s;}
.m3_more:hover { border: 1px solid #2954B8;}

.swiper-pagination.m3_pag {left:10%; right:auto;}
.swiper-pagination.m3_pag  .swiper-pagination-bullet { background: transparent;  border: 1px solid rgba(255,255,255,0.5);;  opacity: 1;  box-sizing: border-box;  transition: all 0.4s; margin: 12px 0px;}
.swiper-pagination.m3_pag .swiper-pagination-bullet-active {background: #015EFF; border: 1px solid #015EFF;}


.move_img { width: 100%; height: 42px; padding: 10px 0px; border-bottom: 1px solid #ddd;}
.move_img_inner {  width: 100%;  height: 100%;  margin: auto;  overflow: hidden;  position: relative;}
.move_img_inner:before { content: ""; background-image: url(../image/h_bottom_bg.png);  position: absolute;  left: -5px;  top: -90px;  z-index: 10;  width: 60px;  height: 160px;}
.move_img_inner:after {  content: "";  background-image: url(../image/h_bottom_bg.png);  position: absolute;  right: 0;  z-index: 10;  top: -16px;  width: 60px;  height: 160px;}
.move_imgbox {  position: absolute; width: 100%; height: 100%; margin: 0; 
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);
  /* Apply animation to this element */	
  -moz-animation: h_move 40s linear infinite;
  -webkit-animation: h_move 40s linear infinite;
  animation: h_move 40s linear infinite;
     
 }
 
 /* Move it (define the animation) */
 @-moz-keyframes h_move {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes h_move {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }
 @keyframes h_move {
  0%   { 
  -moz-transform: translateX(100%); /* Firefox bug fix */
  -webkit-transform: translateX(100%); /* Firefox bug fix */
  transform: translateX(100%); 		
  }
  100% { 
  -moz-transform: translateX(-100%); /* Firefox bug fix */
  -webkit-transform: translateX(-100%); /* Firefox bug fix */
  transform: translateX(-100%); 
  }
 }
 
 .move_imgbox:hover {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
     animation-play-state: paused;
 }
 

 .move_imgbox img { cursor: default; display: block; height: 42px; transition: all 0.4s ease-in-out;}


/*main4*/

.m4 {margin: 150px 0px 60px; }
.m4 .sub_inner {background-image: url(../image/m4_bg.png); background-size: cover; background-position: center;  background-repeat: no-repeat;}
.m4_cont { width: 100%; margin-top: 80px; font-size: 0px; padding-bottom: 80px;}
.m4_cont li { display: inline-block; vertical-align: top; width: 32.3333%; margin: 0px 0.5%;}

.m4_imgbox { width: 100%; height: 300px; background-size: cover; background-position: center;  background-repeat: no-repeat;  position: relative;}
.m4_imgbox.img1 {background-image: url(../image/m4_img1.png);}
.m4_imgbox.img2 {background-image: url(../image/m4_img2.png);}
.m4_imgbox.img3 {background-image: url(../image/m4_img3.png);}
.m4_imgbox img { width: 90%;  position: absolute;  left: 50%;  bottom: 50px;  transform: translateX(-50%);}
.m4_cont li:nth-child(1) .m4_imgbox img {max-width: 325px;}
.m4_cont li:nth-child(2) .m4_imgbox img {max-width: 278px;}
.m4_cont li:nth-child(3) .m4_imgbox img {max-width: 240px;}

.m4_txtbox { width: 90%; background-color: #fff; margin: -50px auto 0px; z-index: 10; position: relative; text-align: center; padding: 25px 10px; box-sizing: border-box;  box-shadow: 2px 2px 8px 2px rgb(0 0 0 / 10%);}
.m4_txtbox p:nth-child(1) { font-weight: 800; font-size: 1.3rem; line-height: 1.3; letter-spacing: -1.32px; color: #231815; margin-bottom: 10px;}
.m4_txtbox p:nth-child(2) { font-size: 0.8rem; line-height: 1.3; font-weight: bold; letter-spacing: -0.32px; color: #666666; transform: skewX(-0.3deg);}
.m4_more { font-family: 'GmarketSansMedium'; font-size: 0.7rem; line-height: 1.3; letter-spacing: -0.11px; color: #2954B8; display: inline-block; margin-top: 50px; border: 1px solid #2954b866;  padding: 6px 20px;  border-radius: 30px;  transition: all 0.4s;}
.m4_more:hover {color: #fff; background-color: #2954B8; border: 1px solid #2954B8;}



/*main5*/

.m5_banner { background-image: url(../image/m5_banner.png); width: 100%; padding: 80px 0px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.m5_banner .txtbox {text-align: center;}
.m5_banner .txtbox p:nth-child(1) { font-size: 1.5rem; line-height: 1.3; letter-spacing: -1.56px; color: #FFFFFF;}
.m5_banner .txtbox p:nth-child(1) span.bold {font-weight: 800;}
.m5_banner .txtbox p:nth-child(2) { font-size: 0.9rem; color: #CCCCCC; transform: skewX(-0.3deg);  margin-top: 10px;}
.m5_more { display: inline-block; margin-top: 50px; font-family: 'GmarketSansMedium'; font-size: 0.7rem;  line-height: 1.3;  letter-spacing: -0.11px;  color: #fff;  display: inline-block;  margin-top: 50px;  border: 1px solid #ffffff7d;  padding: 6px 20px;  border-radius: 30px;  transition: all 0.4s;}
.m5_more:hover {background-color: #2954B8; border: 1px solid #2954B8;}

.m5 {margin: 150px 0px ; }
.m5_cont {width: 100%; margin-top: 80px;}