@import url(/template/pc/skin/style/all.css);
@import url(/template/pc/skin/style/notosanskr.css);
@import url(/template/pc/skin/style/jejumyeongjo.css);

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}


@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
  font-weight: 100;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
  font-weight: 200;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: 300;
}

@font-face {
   font-family: 'SCDream';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
   font-weight: 400;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 600;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: 700;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
  font-weight: 800;
}

@font-face {
  font-family: 'SCDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
  font-weight: 900;
}

@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-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: '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: 'Jeju Myeongjo';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/jejumyeongjo/v3/JejuMyeongjo-Regular.eot);
  src: url(//fonts.gstatic.com/ea/jejumyeongjo/v3/JejuMyeongjo-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/jejumyeongjo/v3/JejuMyeongjo-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/jejumyeongjo/v3/JejuMyeongjo-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/jejumyeongjo/v3/JejuMyeongjo-Regular.ttf) format('truetype');
}

@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 13px; color:#000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"NEXON Lv1 Gothic", sans-serif;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 26px;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

.container { max-width: 1200px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 10px;}
.container:after {
  content: "";
  display: block;
  clear: both;
}


/*header*/
#m_hd{position:fixed; padding:0; height:100px; top:0; z-index: 9000; width:100%; transition-duration: 0.3s; border-bottom: 1px solid rgba(255, 255, 255, 0.29);}
#m_hd:after{content:""; display:block; clear:both}
#m_hd #m_logo{float:left; position:absolute; top:50%; transform:translateY(-50%);z-index: 9999; left:40px; }
#m_hd #m_logo a{display:block;width:163px; height: 34px; background:url('../images/logo.png') no-repeat center center; }

#m_hd.sub-hd{position: relative; background: #fff;}
#m_hd.sub-hd{border-bottom:1px solid rgba(0, 0, 0, 0.29)}
#m_hd.sub-hd #m_gnb > li > a{color:#000;}
#m_hd.sub-hd #lang li a{color:#000;}
#m_hd.sub-hd .catalog-link a{color:#000; border-color:#000;}
#m_hd.sub-hd #m_logo a{ background:url('../images/logo_color.png') no-repeat center center !important; }

#m_hd.sub-hd #mobile-menu span {background-color: #000;}

#m_hd #mobile-menu.active span{background-color: #000;}

#all_menu{background:#fff; width:100%; position:fixed; top:0; height:100vh; z-index:9500; padding-top:40px;margin-top:0; display:none;}
#all_menu #all_nav{ position:relative; }
#all_menu #all_gnb > li{margin-bottom:30px;}
#all_menu #all_gnb > li:last-child{margin-bottom:0;}
#all_menu #all_gnb > li > a{font-size:26px; display:inline-block; text-align:left; color:#000; font-weight:700}
#all_menu #all_gnb .lnb{margin-top:10px;}
#all_menu #all_gnb .lnb li {float:left; margin-right:40px;}
#all_menu #all_gnb .lnb li a{font-size:18px; color:#babcbf; font-weight:700}
#all_menu #all_gnb .lnb li a:hover{color:#4facff; background: none;}
#all_menu #all_gnb .lnb li:last-child {margin-right:0;}

#menu_box{position:absolute; left:20%; top:47%; transform:translateY(-50%);
 -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);  -ms-transform:translateY(-50%);}

#mobile-btn{position:absolute; z-index: 9999; right: 40px; top:50%; transform:translateY(-50%); cursor: pointer;}

#mobile-menu,
#mobile-menu span {display: inline-block; transition: all .4s;box-sizing: border-box;}
#mobile-menu {position: relative; width: 40px; height: 30px;}
#mobile-menu span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 2px;}

#mobile-menu span:nth-of-type(1) {top: 0;}
#mobile-menu span:nth-of-type(2) {top: 14px;}
#mobile-menu span:nth-of-type(3) {bottom: 0;}
#mobile-menu.active span{background-color: #fff;}
#mobile-menu.active span:nth-of-type(1) {-webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg);}
#mobile-menu.active span:nth-of-type(2) {opacity: 0;}
#mobile-menu.active span:nth-of-type(3) {-webkit-transform: translateY(-14px) rotate(45deg);transform: translateY(-14px) rotate(45deg);}

@media (min-width:1201px){/*pc*/

#m_hd #m_nav{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;}
#m_hd #m_nav a{font-family:"SCDream", sans-serif;}
#m_hd #m_nav::after{content:""; display:block; clear:both}
#m_hd #m_nav > ul{float:left; margin-right:50px; }
#m_hd #m_nav > ul:last-child{margin-right:0; }
#m_hd #m_nav #m_gnb{display:inline-block;}
#m_hd #m_gnb > li{float:left; position:relative; text-align:center; margin-right: 70px; }
#m_hd #m_gnb > li:last-child{margin-right: 0;}
#m_hd #m_gnb > li > a{font-size:20px; font-weight:500; margin:0 auto; line-height:30px; display:block; color:#fff; box-sizing:border-box;position:relative;padding: 4px 0;}
#member_join li{float:left; margin-right: 24px; margin-top:16px}
#member_join li a{font-size:17px; color:#333 }
#member_join li:last-child{margin-right:0; }
#member_join .admin-icon a {color:#ff3746}

.hd-right-wrap{position: absolute; right:40px; top:50%; transform:translateY(-50%);}
.hd-right-wrap > div{float:left;}
.lang-wrap{margin-right:70px;}
#lang li{float:left; padding:8px 0; }
#lang li:first-child{margin-right:36px;}
#lang li img{margin-right:12px;}
#lang li a{display:block; font-size: 16px; font-weight:500; color:#fff; line-height: 28px;}

#m_hd #m_gnb > li .lnb{display:none; position: absolute;background:rgba(0, 0, 0, 0.7); padding:0 10px; left:0; width:200px;}
/*#m_hd #m_gnb > li .lnb::before{content:""; display: block;   width: 0px;
  height: 0px; border-bottom: 8px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent; position: absolute; top:-8px; }*/
#m_hd #m_gnb > li:hover .lnb{display:block; position: absolute;}

.lnb li a{display: block; padding:10px; font-size:14px; color:#fff; font-weight: 500; text-align: left;}
.lnb li a:hover{color:#6ee4e9;}

.catalog-link{float:left;}
.catalog-link a{font-size:15px; color:#fff; text-align:center; padding:8px 20px; display:inline-block; border:2px solid #fff; border-radius: 26px;}
.catalog-link i{margin-left:10px;}
.catalog-link a:nth-of-type(1){margin-right:10px;}
.catalog-link a:nth-of-type(2) i { margin-left: 8px; }


#mobile-btn{display:none;}
#all_menu #all_menu_top{display:none;}

}

@media (max-width:1600px){
#m_hd #m_nav #m_gnb{padding-left:12%}
#m_hd #m_gnb > li{margin-right:40px;}
}

@media (max-width:1360px){
  #m_hd #m_nav #m_gnb{padding-left:17%}
  #m_hd #m_gnb > li{margin-right: 40px; }
  #m_hd #m_gnb > li > a{font-size:18px}
  #lang li:first-child{margin-right:23px;}
}


@media (max-width:1200px){/*테블릿 + 모바일 */
  #m_hd{height:66px; }
  #m_hd #m_nav{display:none;}
  #all_menu #all_menu_top{display:block; margin-bottom:50px;}
  #all_menu_top::after{content:""; display:block; clear:both}
  #all_menu #member_join{margin-right: 50px}
  #all_menu #member_join li{float:left; margin-right: 24px; margin-top:16px}
  #all_menu #member_join li a{font-size:17px; color:#333 }
  #all_menu #member_join li:last-child{margin-right:0; }
  #all_menu #member_join .admin-icon a {color:#ff3746}


  #all_menu #lang li{float:left; padding:14px 0; }
  #all_menu #lang li:first-child{margin-right:24px;}
  #all_menu #lang li a{display:block; font-size: 15px; font-weight:900; color:#9b9b9b;  width:95px; text-align:center;}
  #all_menu #lang li:first-child{margin-right:10px;}
  #all_menu #lang li a.active{color:#6ee4e9; }
#all_menu .catalog-link{margin-top:20px;}
#all_menu .catalog-link a{display:block; width:200px; font-size:15px; padding:14px 0; text-align: center; border-radius: 6px; background:#f3f3f3;}
#all_menu .catalog-link a:nth-of-type(1){margin-bottom:10px}

}

@media (max-width:768px){/*모바일 */
  #m_hd #m_logo{left:20px}
  #m_hd #m_logo a{width:115px; height: 24px; background:url('../images/m_logo.png') no-repeat center center; }

  #m_hd.sub-hd #m_logo a{ background:url('../images/m_logo_color.png') no-repeat center center !important; }

  #mobile-btn{right:20px}
  #all_menu #all_gnb > li > a{font-size:35px;}
  #all_menu #all_gnb .lnb li a{font-size: 23px;}
  #all_menu #member_join {margin-right:0; margin-bottom:20px;}
  #menu_box{left:50%; transform:translate(-50%, -50%);}

}

/*scroll-icon*/
.scroll-icon{position:absolute; left:0; width:30px; height:50px; border-radius: 15px; border:2px solid #fff; bottom:60px; left:50%; transform: translateX(-50%); }
.scroll-icon::after{ content:""; display:block; width:10px; height:10px; position:absolute; bottom:-15px; left:50%; transform: translateX(-50%) rotate(45deg); border-right:2px solid #fff; border-bottom:2px solid #fff;}
.scroll-icon::before {content:""; position: absolute; top: 10px; left: 50%; width: 6px;height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%;
-webkit-animation: scroll-move 2s infinite; animation: scroll-move 2s infinite; box-sizing: border-box;}

@-webkit-keyframes scroll-move {
  0% {-webkit-transform: translate(0, 0); opacity: 0;}
  40% {opacity: 1;}
  80% {-webkit-transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}

@keyframes scroll-move {
  0% {transform: translate(0, 0); opacity: 0;}
  40% {opacity: 1;}
  80% {transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}

/*index 공통*/
#wapper::after{content:""; display:block; clear:both;}
.contents-box::after{content:""; display:block; clear:both;}
.box-wrap::after{content:""; display:block; clear:both;}



.main-page-anchor { position: fixed;right: 30px; top: 50%;z-index: 30; text-align:center;  transform:translateY(-50%);
-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%); }
.main-page-anchor li{ margin-bottom:30px;}
.main-page-anchor li:last-child{ margin-bottom:0; }
.main-page-anchor a {display:block; width:11px; height:11px; border-radius:6px; background:#fff; transition: 0.3s; opacity:0.4; margin:0 auto;}
.main-page-anchor li.active > a {width:22px; height:22px; border-radius:11px; opacity:1 }


#fullpage section{ height: 936px;}


.page01{position: relative; }
.page01::before{content:""; display:block; position:absolute; z-index: -9999; background:#000; width:100%; height:100%;}
.page02{position: relative;}
.page03{background:url("../images/m_bg02.png") no-repeat center center !important;background-size:cover !important;position: relative;}
.page04{position: relative;}
.contents-bg-color{background:#f6f6f6; width:100%; height:60%; position:absolute; bottom:0; z-index: -1}
.contents-bg-color::before{content:"Media Center"; font-size:14rem; position: absolute; transform:translateY(-95%); line-height:0.7; color:#f6f6f6; font-weight: 900;  font-family: "GmarketSansBold", sans-serif; }


.page01 video {
	position : absolute;
	top : 0;
	left : 0;
	min-width : 100%;
	min-height : 100%;
	width : auto;
	height : auto;
  z-index: -1;
  overflow: hidden;
}
.page01 .contents-box{
  position: absolute;
  z-index: 99;
  width:100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  top: 50%;
}
.page01 .scroll-icon{z-index: 99}

@media (max-width:1200px) and (min-width:769px){/*테블릿*/
.page01 video {min-width : 240%;}
}

@media (max-width:769px){/*테블릿*/
.page01{background: url('../images/m_bg01.png') no-repeat center center / cover}
.page01 video{display:none;}
}

#fullpage section#section1{ overflow: hidden}

.video-background {
  background: #000;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.video-foreground{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}



.page02 .contents-box{
  position: absolute;
  z-index: 99;
  transform: translateY(-50%);
  top: 50%;
}
.page02 .scroll-icon{z-index:99}

.bg-black{background:rgba(0, 0, 0, 0.5); width:100%; height:100vh; position: absolute; z-index:50;}

#m_hd.color-change{border-bottom:1px solid rgba(0, 0, 0, 0.29)}
#m_hd.color-change #m_gnb > li > a{color:#000;}
#m_hd.color-change #lang li a{color:#000;}
#m_hd.color-change .catalog-link a{color:#000; border-color:#000;}
#m_hd.color-change #m_logo a{ background:url('../images/logo_color.png') no-repeat center center }

#m_hd.color-change #mobile-menu span {background-color: #000;}

#m_hd.color-change #mobile-menu.active span{background-color: #000;}

#m_hd.color-change #m_logo a{ background:url('../images/logo_color.png') no-repeat center center }


@media (max-width:1755px){
  .contents-bg-color::before{font-size:12rem;}
}
@media (max-width:1495px){
  .contents-bg-color::before{font-size:10rem;}
}
@media (max-width:1238px){
  .contents-bg-color::before{font-size:8rem;}
}
@media (max-width:994px){
  .contents-bg-color::before{font-size:6rem;}
}

@media (max-width:768px){/*모바일 */
.contents-bg-color{height:100%;}
}



@media (max-width:768px){/*모바일 */
  #m_hd.color-change #m_logo a{ background:url('../images/m_logo_color.png') no-repeat center center }
}


.main-page-anchor.color-change a{background:#000;}
.scroll-icon.color-change {border-color: #333333}
.scroll-icon.color-change::before{background:#333333}
.scroll-icon.color-change::after{border-color: #333333}

.main-section .container{display:table; height:100%;}
.main-section .contents-box{display:table-cell; vertical-align: middle;}
.main-tit{font-size:48px; color:#fff; position: relative; font-weight: 900; margin-bottom:30px; font-family: "Noto Sans KR", sans-serif;}
.main-tit:before{content:""; display:block; border:10px solid #6ee4e9; width:50px; height:50px; border-radius: 50%;transform: rotate(45deg); position: absolute; left:-55px;}

.sub-txt{font-size:20px; color:#fff; word-break: keep-all}


#section0{text-align:center;}
#section0 .main-visual-intro{color:#fff; margin-bottom:60px}
#section0 .p-sub{font-size:18px; text-transform: uppercase; letter-spacing:5px; margin-right:-5px; font-weight:bold}
#section0 .p-main{font-size:90px;  font-weight:bold;}
#section0 .p-sub2{font-size:18px; letter-spacing:2.5px; margin-right:-2.5px; font-weight:300}
#section0 .intro-logo{margin:26px 0;  }
#section0 .icon-box ul li {float:left; width:20%; }
#section0 .icon-box ul li .img-box{width:125px; height:125px; margin:0 auto; background:rgba(255, 255, 255, 0.41); border-radius:50%; display:table;}
#section0 .icon-box ul li .img-box {display:table-cell; vertical-align: middle; transition-duration: 0.2s}
#section0 .icon-box ul li a:hover .img-box {background:rgba(0, 64, 151, 0.8)}
#section0 .icon-box ul li p {font-size:17px; color:#fff; font-family:"SCDream", sans-serif; margin-top:14px;}

#section1 .main-tit:before{border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; top:-5px;}
#section1 ul{margin-top:70px}
#section1 ul li{margin-bottom:30px;}
#section1 ul li last-child{margin-bottom:0px;}
#section1 ul li a{color:#fff; font-size:20px; font-weight: bold; position: relative; opacity: 0.5; transition-duration: 0.3s}
#section1 ul li a span{
  width: 10px;
  height: 17px;
  background: #fff;
  position: relative;
  float: left;
  margin-right: 15px;
  margin-top: 2px;
}
#section1 ul li a span::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 0;
  transform: rotate(90deg);
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 5px solid #fff;
}
#section1 ul li a span::after {
  content: "";
    position: absolute;
    bottom: 6px;
    left: -10px;
    width: 0;
    transform: rotate(90deg);
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 5px solid #fff;
}
#section1 ul li a:hover:after{content:""; display:block; width:12px; height: 12px; border:2px solid #fff; border-right: 2px solid transparent; border-bottom: 2px solid transparent; position: absolute; right:-25px; top:5px; transform:rotate(135deg);}
#section1 ul li a:hover{opacity: 1}

#section2 .main-tit:before{border-top:10px solid transparent; border-right:10px solid transparent; border-left:10px solid transparent; bottom:-12px; left:-25px}
#section2 .sub-txt{line-height: 34px;}
#section2 .sub-txt span{display:block;}
#section2 a{display:block; width:245px; padding:23px 0; color:#fff; border:3px solid #fff; font-size: 18px;  font-family:"SCDream", sans-serif; margin-top:108px; transition-duration: 0.3s; font-weight:bold}
#section2 a div:after{ content:""; display: block; width:10px; height:10px;
 border-top:3px solid #fff; border-right:3px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right:0; top:50%; margin-top:-7px;}
#section2 a div:before{ content:""; width:30px; height:3px; background: #fff; position: absolute; right:0; top:50%; margin-top:-4px;}
#section2 a div{width:55%; margin:0 auto; position: relative;}
#section2 a:hover{ color:#3eced4; background: #fff;}
#section2 a:hover div:after{ border-color:#3eced4; }
#section2 a:hover div:before{  background:#3eced4; }

#section3 .main-tit:before{border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid transparent; bottom:-26px; left:-25px}
#section3 .box02 > div{float:left; width:50%; padding:0 10px;}
#section3 .box02::after{content:""; display:block; clear:both;}
#section3 .box-wrap{margin:0 -10px;}
#section3 .box-wrap > div{float:left; width:50%; padding:0 10px;}
#section3 .box01{height:382px; display: table;}
#section3 .box02 > div a{display: block; height:382px; padding:30px;}
#section3 .box02 .contents01 a{background:url('../images/m_img01.png') no-repeat center center / cover;}
#section3 .box02 .contents02 a{background:url('../images/m_img02.png') no-repeat center center / cover;}
#section3 .box02 > div a h5{font-size:21px; color:#fff; position: relative;}
#section3 .box02 > div a span {position: absolute; right: 0; top: 50%; margin-top: -2px; transition-duration: 0.2s}
#section3 .box02 > div a span:before{content:""; display:block; width:17px; height:3px; background:#fff; }
#section3 .box02 > div a span:after{content:""; display:block; width:3px; height:17px;background:#fff;position: absolute; top: -7px; right: 7px;}
#section3 .box02 > div a:hover span{transform:rotate(90deg);
}



/*footer*/
#m_ft{background:#2c3440; color:#fff; padding:0 0 20px;}
#m_ft .ft-top{border-bottom:1px solid #48515f;  padding:20px 0; position:relative;}
#m_ft .ft-top a{font-size:15px; font-weight: bold; color:#fff;}
#m_ft .ft-btm{padding-top:20px; position: relative;}
#m_ft .ft-btm .ft-logo{position: absolute; right:0; top:30px}
#m_ft .ft-btm p{font-size:14px; line-height: 22px; margin-bottom:12px; word-break: keep-all}
#m_ft .ft-btm span{font-size:14px;}

#m_ft .sns-icons{position:absolute; right:0; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
#m_ft .sns-icons li{float:left;}
#m_ft .sns-icons li:first-child{margin-right:7px;}

@media (max-width:768px){/*mobile*/
#mobile-menu{width:33px; height: 26px; }
#mobile-menu span:nth-of-type(2){top:12px; }
#mobile-menu.active span:nth-of-type(1) {-webkit-transform: translateY(12px) rotate(-45deg);}
#mobile-menu.active span:nth-of-type(3) {-webkit-transform: translateY(-12px) rotate(45deg);}
#all_menu #all_gnb > li > a{font-size:19px; }
#all_menu #all_gnb .lnb{display:none;}
.main-page-anchor{display:none;}
.main-page-anchor li{margin-bottom:19px;}
.main-page-anchor li.active > a{width:18px; height:18px;}
.scroll-icon{bottom:28px;}
.main-tit{font-size: 29px; margin-left:30px; margin-bottom:16px; height:54}
.sub-txt{font-size:17px; line-height: 26px !important; padding-right:40px}
#section0 .p-sub{font-size:16px; letter-spacing:0;}
#section0 .p-sub2{font-size:16px;}
#section0 .intro-logo img{height:54px;}
#section0 .icon-box ul li .img-box{width:60px; height:60px;}
#section0 .main-visual-intro{margin-bottom:30px}
#section0 .icon-box ul li p{margin-top:3px; margin-bottom:14px; font-size:14px;}
#section0 .icon-box ul li:nth-of-type(1) img{height: 38px}
#section0 .icon-box ul li:nth-of-type(2) img{height: 23px}
#section0 .icon-box ul li:nth-of-type(3) img{height: 26px}
#section0 .icon-box ul li:nth-of-type(4) img{height: 27px}
#section0 .icon-box ul li:nth-of-type(5) img{height: 32px}
#section0 .icon-box ul li{width:33.333333%;}

#section1 ul{margin-top:40px;}
#section1 ul li{margin-bottom:20px;}
#section1 ul li a{font-size:18px;}

#section2 a {width: 200px; padding: 17px 0; margin-top: 60px;}
#section2 a div{width:68%;}

#section3 .box-wrap > div{float:none; width:100%;}

#m_ft .ft-btm .ft-logo{position:static; margin-bottom:12px;}
.page01 .contents-box{padding-right:20px;}

}



/*sub-visual*/
#visual{ width:100%; height:50vw; max-height:500px; min-height:310px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative;}
#visual.bg1{background-image:url('../images/sub_visual01.png');}
#visual.bg2{background-image:url('../images/sub_visual02.png');}
#visual.bg3{background-image:url('../images/sub_visual03.png');}
#visual.bg4{background-image:url('../images/sub_visual04.png');}

.visual-wrap{position: relative; height:50vw; max-height:500px; min-height:310px; width:100%; margin-top:-67px;}
.visual-tit-box{position: absolute; z-index: 9999; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center; }
.visual-title{font-size:59px; color:#fff; text-align: center; margin-bottom:10px;text-transform: uppercase;}
.visual-sub-title{font-size:18px; font-weight: bold; letter-spacing: 5px; margin-right: -5px; text-transform: uppercase; color:#fff; text-align:center; display: inline-block;}

.figure-wrap{position: absolute ; width:316px; height:316px;z-index: 99; left:50%; top:50%; transform: translate(-50%, -50%); margin-top:1%;}
.figure-wrap::after{content:""; display:block; clear:both;}
.figure-wrap img{position: absolute;}
.figure-wrap .figure01{ -webkit-animation: figure-move01 10s infinite linear; animation: figure-move01 10s infinite linear; box-sizing: border-box;}
.figure-wrap .figure02{-webkit-animation: figure-move02 10s infinite linear reverse; animation: figure-move02 10s infinite linear reverse; box-sizing: border-box;}

@-webkit-keyframes figure-move01 {
  100% {-webkit-transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}

@keyframes figure-move01 {
  100% {-webkit-transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}

@-webkit-keyframes figure-move02 {
  100% {-webkit-transform: rotate(360deg)}
  100% {transform: rotate(360deg)}

}

@keyframes figure-move02 {
  100% {-webkit-transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}

@media (max-width:768px){/*mobile*/
.figure-wrap{ width:150px; height:150px;}

}

/*snb*/
#snb-wrap{position: absolute; bottom:0; left:0; width:100%;}
#snb-wrap .container{padding:0;background:rgba(110, 228, 233, 0.85); border-radius:21px 21px 0 0 }
.snb{max-width:600px; height:67px; }
.snb > li{float:left; color:#fff; font-size:16px; font-weight: bold; line-height: 67px; text-align: center; position: relative;}
.snb .snb-home::before{content:""; display:block; width:9px; height:2px; background:#fff; position: absolute; transform:rotate(45deg); top:28px; right:0}
.snb .snb-home::after{content:""; display:block; width:9px; height:2px; background:#fff; position: absolute; transform:rotate(135deg); bottom:31px; right:0}
.snb-home{width:20%;}
.route-title{width:30%;}
.snb-nav {width:50%;; position:relative; background:#fff}
.snb-nav .here.on{display:block;}
.snb-nav .here{color:#6ee4e9; cursor: pointer;}
.snb-arrow {
  background: #6ee4e9;
  height: 2px;
  position: absolute;
  right: 43px;
  width: 10px;
  top: 50%;
  display: block;
  transform:rotate(45deg);
  transition-duration: 0.2s;
}

.snb-arrow:after {
  background: #6ee4e9;
  content: "";
  height: 2px;
  width: 10px;
  position: absolute;
  right: -5px;
  top: -5px;
  display: block;
  transform:rotate(-90deg);
  transition-duration: 0.2s;
}

.snb-nav .here.on .snb-arrow {
  transform:none
}

.snb-nav .here.on .snb-arrow:after {
  transform:none;
}

.snb-menu {
  position: absolute;
  width: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: none
}

.snb-menu a {
  color: #fff;
  display:block;
}

.snb-menu li:hover a {
  background:#e2e2e2; color:#000;
}


#sub-wrap{padding:50px 0;}
#sub-section{padding:50px 0;}
.sub-tit-box{margin-bottom:40px;}
.sub-tit-box p{font-size:33px; color:#23bec5; font-weight: 700; font-family: "SCDream", sans-serif;}
.sub-dep-tit-box{margin-bottom:30px; text-align:center;}
.sub-dep-tit-box h3{font-size:36px; font-family:"GmarketSansMedium", sans-serif; font-weight: 300;}
.sub-dep-tit-box h5{text-align:left; font-size:24px; font-family:"GmarketSansMedium", sans-serif; font-weight: 300; word-break: keep-all; position: relative; padding-left:22px;}
.sub-dep-tit-box h5::before{content:""; display:block; width:8px; height:8px; background:#4facff; float:left; margin:14px 14px 0 0; position:absolute; left:0;}
.sub-dep-tit-box02{ margin-bottom:20px;}
.sub-dep-tit-box02 h5{text-align:left; font-size:20px; font-family:"GmarketSansMedium", sans-serif; font-weight: 300; color:#0186fe}

@media (max-width:768px){/*mobile*/
  .visual-title{font-size:41px; }
  .visual-sub-title{font-size:15px; letter-spacing: 2px; margin-right: -2px; font-weight: 400}
  .snb{height:56px; max-width:768px;}
  .snb > li{float:none; width:100%; line-height: 56px;}
  .snb-nav .here{color:#fff; }
  .snb-arrow,
  .snb-arrow:after{background:#fff;}
  .snb-home,
  .route-title{display:none;}
  #snb-wrap .container{padding:0;}

  .sub-tit-box{margin-bottom:25px;}
  .sub-tit-box h3{font-size:30px;}
  .sub-dep-tit-box{margin-bottom:15px;}
  .sub-dep-tit-box h3{font-size:26px;}
  .sub-dep-tit-box h5{font-size:18px; padding-left:16px;}
  .sub-dep-tit-box h5::before{width:6px; height: 6px; margin:11px 0 0 0;}
  .sub-dep-tit-box02 h5{font-size:18px;}

  .snb-nav{background:#01c2d0}

}

.txt-box p{word-break: keep-all;}

/*sub0101*/
#sub-wrap.sub0101{padding-bottom:0;}
.sub0101 #sub-section.section01{padding-bottom:0;}
.sub0101 .section01 .img-box{background:url("../images/sub01_01_img01.png") no-repeat center center; padding:36px; height:400px; display:table; width:100%;}
.sub0101 .section01 .img-box > div{/*border:2px solid #01c2d0;*/ padding:0 50px; display:table-cell; vertical-align: middle;position: relative;}
.sub0101 .section01 .img-box .txt-box{width:50%; }
.sub0101 .section01 .img-box .txt-box .txt01{font-size:17px; color:#01c2d0; font-family:"GmarketSansMedium", sans-serif;}
.sub0101 .section01 .img-box .txt-box .txt02{font-size:28px; color:#000; font-family:"jejumyeongjo", sans-serif; margin:16px 0 25px; line-height:34px }
.sub0101 .section01 .img-box .txt-box .txt02 span{display:block; text-align: right;}
.sub0101 .section01 .img-box .txt-box .sign{font-family:"GmarketSansLight", sans-serif; font-size:17px; color:#000; position:absolute; bottom:20px; width:50%; text-align: center;}
.sub0101 .section01 .img-box .txt-box .sign b{font-family:"GmarketSansMedium", sans-serif;}
.sub0101 .section01 .img-box .txt-box .sign img{margin-left:10px;}

.sub0101 .section01{background:linear-gradient( to top, #f6f6f6 40%, transparent 40% );}
.sub0101 .section02{background:#f6f6f6;position: relative; }
.sub0101 .section02 .txt-box{background: url("../images/sub01_01_img02.png") no-repeat right bottom;}
.sub0101 .section02 .txt-box p{font-size:16px; font-weight: 300; color:#000; font-family: "SCDream", sans-serif; line-height: 26px ; text-align: center; width:73%; margin:0 auto 20px;}


.history-content {position: relative; padding-top: 100px; margin-top:42px}
.history-content:before{content: ""; position: absolute; width: 10px; height: 10px; border-radius: 10px; background: #bebebe; color: #fff;
 border: none; display: inline-block; line-height: 10px; text-align: center; left: calc(50% - 4px); top: 0; }
.history-content:after { content: ""; position: absolute; top:0; left: 50%; bottom: 0; width: 1px; background: #bebebe; display: block;}
.history-content > li {width: 50%; padding-bottom: 70px; position: relative;}
.history-content > li:before {content: "";position: absolute;width: 22px;height: 22px; border-radius: 15px;background: #fff;color: #fff;
 border: 6px solid #004097;display: inline-block;line-height: 11px;text-align: center;z-index: 90;top: 7px;}

.history-content > li dt { font-size: 35px;font-weight: 600; letter-spacing: -0.5px; position: relative; padding-bottom: 25px;}
.history-content > li dt:before { content: ""; position: absolute; top: 18px; background: #ddd; height: 1px; width: 50px; display: block;}
.history-content > li dl { display: inline-block; max-width: 500px;}
.history-content > li p { display: flex; line-height: 32px;font-size:15px;}
.history-content > li p .month{ font-size: 19px;color: #004097; font-weight: 400; width: 74px;}
.history-content > li p .desc {width: calc(100% - 40px);display: block;letter-spacing: -0.5px; word-break: keep-all;}


@media (min-width: 768px) {
  .history-content > li:nth-child(2n+1) { margin-left: calc(50% + 3px); }
  .history-content > li:nth-child(2n+1):before { margin-left: -13px; }
  .history-content > li:nth-child(2n+1) dl { padding-left: 65px; }
  .history-content > li:nth-child(2n+1) dt:before {left: -66px; }
  .history-content > li:nth-child(2n) { text-align: right; }
  .history-content > li:nth-child(2n):before {right: -12px;}
  .history-content > li:nth-child(2n) dl { padding-right: 65px; text-align: left;}
  .history-content > li:nth-child(2n) dt:before { left: 100px; width: calc(100% - 35px);}
  .history-content > li:nth-child(2n) dd {  text-align: left; }
}

@media (max-width:768px){/*mobile*/
  .history-content:before {left: 7px;  }
  .history-content:after { left: 11px;width: 1px; }
  .history-content > li {width: auto;padding-bottom: 70px;position: relative; margin-left: 0;}
  .history-content > li:before { top: 3px;left: 0; }
  .history-content > li dt { font-size: 24px;padding-bottom: 10px;}
  .history-content > li dt:before { width: 30px; top: 14px; left: -36px; }
  .history-content > li dl { padding-left: 51px; }
  .history-content > li p .month{font-size:15px; width:54px;}

}

/*sub0103*/
.sub0103 .section01{padding-bottom:0 !important}


.sub0103 .section01 .img-box{background:url("../images/sub01_03_bg.png") no-repeat center center / cover; padding:36px;}
.sub0103 .section01 .img-box div{border:1px solid rgba(255, 255, 255, 0.16); padding:80px 50px;}
.sub0103 .section01 .img-box div p{font-size:22px; font-weight: bold; color:#fff; width:80%; word-break: keep-all; line-height: 32px}
.sub0103 .section01 .img-box div p::before{content:""; display:block; width:36px; height:4px; background:#fff; margin-bottom:14px;}

.sub0103 .section02 .contents-box{position: relative;}
.sub0103 .section02 .box-wrap > div {float:left;}
.sub0103 .section02 .box01{margin-bottom:50px;}
.sub0103 .section02 .box-wrap .img-box {width:35%; border:1px solid #ddd; text-align: center; height: 250px; padding:0 20px; line-height:250px }
.sub0103 .section02 .box-wrap .img-box img{vertical-align: middle;}

.sub0103 .section02 .txt-box{width:65%;padding:30px 0 30px 50px; background:#fff; }

.sub0103 .section02 .txt-box h5{font-size:25px; color:#23bec5;font-family: "SCDream", sans-serif;;font-weight: 700; position: relative; margin-bottom:30px}

.sub0103 .section02 .txt-box h5:before{content:""; display:block; width:28px; height:4px; background:#23bec5; margin-bottom:8px;}

.sub0103 .section02 .txt-box p{font-size:17px; }
.sub0103 .section02 .txt-box ul{ margin-top:16px;}
.sub0103 .section02 .txt-box ul li{position: relative; font-size:15px; color:#999; padding-left:16px; margin-bottom:12px;}
.sub0103 .section02 .txt-box ul li:last-child{margin-bottom:0;}
.sub0103 .section02 .txt-box ul li::before{content:""; display:block; width:5px ;height:5px; border-radius: 50%; background:#999; position: absolute; left:0; top:8px;}

#sub-wrap.sub0103{padding-bottom:0;}
.sub0103 .section03{background:#f9f9f9; padding:100px 0!important;}
.sub0103 .section03 .txt-box{text-align:center; font-size:16px; line-height: 30px; color:#585858}
.sub0103 .section03 .txt-box h5{font-size:28px; font-family: "SCDream", sans-serif; font-weight: bold; color:#004097; margin-bottom:18px; text-transform: uppercase;}
.sub0103 .section03 .txt-box h5 span{font-size:17px; font-family: "SCDream", sans-serif; font-weight: 400; color:#004097; display:block; margin-top:8px; letter-spacing: 5px ; margin-right:-5px}



.fields{position:relative; margin-top:30px; border-top:1px solid #ddd;}
.fields li{display:flex;border-bottom:1px solid #ddd;  align-items:center; padding:15px;}
.fields .lbl{width:200px;font-size:15px; cursor:text}
.fields .desc{width:100%;}
.fields .input{border:1px solid #ddd; padding:15px 10px; box-sizing:border-box; width:100%}
.fields .input.full{width:100%}
.fields .btn-group{margin-top:34px; text-align:center}
.fields .btn-group span{font-size:16px; color:#999;}
.fields .btn-group a{font-size:16px; color:#000; font-weight:bold;}
.fields .btn-group a:hover{text-decoration:underline}
input[id="agree-check"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #bbb; cursor: pointer;margin: 0 4px 4px 0;}
input[id="agree-check"]:checked + label {border-color:#23bec5; background:url('../images/agree_check.png') no-repeat center center;}
input[id="agree-check"] {display: none;}
.fields .btn-submit{background:#6ee4e9; color:#fff; font-size:16px; font-weight:bold; padding: 15px 47px; border:none; outline:none; margin-top:35px;}

.contents_nav_w{margin-bottom:50px; border-bottom:1px solid #4facff;}
.contents_nav li{float:left; border:1px solid #bbb; border-bottom:1px solid #4facff;padding:20px 0; width:25%; text-align: center; font-size:17px; font-weight: bold;; color:#888; cursor:pointer; margin-bottom:-1px;margin-left:-1px; background: #f6f6f6}
.contents_nav li:first-child{margin-left:0;}
.contents_nav li.on{background:#fff; border-color:#4facff ; color:#6ee4e9; border-bottom:1px solid #fff;}
.contents_nav li.on+li {
  border-left-color: #4facff;
}

.sub0402 .contents-box p{font-size:18px; font-weight: bold;}
.sub0402 .contents-box ul{margin:30px 0;}
.sub0402 .contents-box li{font-size:17px; margin-bottom:15px;color:#444 }
.sub0402 .contents-box li:last-child{margin-bottom:0;}
.sub0402 .contents-box li b{color:#9e9e9e; margin-right: 15px;}






@media (max-width:1400px){/*테블릿 + 모바일 */


}
@media (max-width:1042px){/*테블릿 + 모바일 */
.sub0101 .section01 .img-box .txt-box .txt02 span{text-align: left; display:inline;}
.sub0101 .section01 .img-box > div{padding:0 30px;}

}

@media (max-width:768px){/*mobile*/
  .sub-tit-box p{font-size:27px; }
.fields li{display:block;}
.fields .desc{margin-top:15px;}
.fields .btn-group span{font-size:15px;}
.fields .btn-submit{font-size:15px;}

.contents_nav li{width:50%; font-size: 16px;}
.hide .more-txt-box p{font-size:16px;}
.sub0101 .section01 .img-box{padding:20px;}
.sub0101 .section01 .img-box .txt-box{width:100%;}
.sub0101 .section02 .txt-box p{width:100%; text-align: left;}
.sub0101 .section01 .img-box .txt-box .sign{width:100%; text-align: left; font-size:14px;}
.sub0101 .section01 .img-box .txt-box .txt02 {font-size: 20px; line-height: 24px; }

.sub0103 .section01 .img-box div p{font-size:18px; line-height:28px; font-weight:400}

.sub0103 .section01 .img-box{padding:20px;}
.sub0103 .section01 .img-box div{border:1px solid rgba(255, 255, 255, 0.16); padding:20px;}

.sub0103 .section02 .box-wrap > div{float:none; width:100% !important;}
.sub0103 .section02 .txt-box{padding-left:0;}
.sub0103 .section03 .txt-box{ line-height:27px; }

.sub0402 .contents-box p{font-size:17px; }
.sub0402 .contents-box li{font-size:16px; }
.sub0402 .contents-box li b{display:block; margin-bottom:8px; }

}





.page-ready{width:100%; padding:200px; text-align: center; background:#f1f1f1; font-size:17px; }