@charset "utf-8";

/*********      new.css         ********/

/*********     popUp         ********/
#divpop{ position:fixed;	left:0px;	top:10%;	visibility:hidden;	z-index:99999;}
.poptxt{ position: relative; display: flex;	width: 100%; background-color: #fff;
	flex-direction: column;  justify-content: center;  align-items: flex-end;	box-sizing: border-box;}
.poptxt p{	position: relative;	width: 100%; text-align: right;	padding: 12px 15px;	font-size: 16px;
	font-family: 'notokr-regular', 'sans-serif';	box-sizing: border-box;}
.poptxt input{	display: none;}
@media all and (max-width:768px){
#divpop .popeventImg{	width: 100%; height: auto;}
}
/*********      popUp  End        ********/

.mainSection1 div, .article-body div{	opacity: 0.2;  transform: translate3d(0,100px,0);
  transition: all .8s ease;}
.mainSection1 div.effect, .article-body div.effect{opacity: 1;
  transform: translateZ(0); transition: all .8s ease;}

.mainSection1:last-child div, .article-body:first-child div,
.article-body:last-child div{opacity: 1;	 transform: translateZ(0);}
.consub_inner{	position: absolute;	display: inline-block; width: 100%;
	padding: 15px 20px;	left: 0; bottom:0;
	font-size: 16px;	color: #fff; background-color: rgba(0, 0, 0, 0.5);
	text-align: left;	font-weight: bold;
	font-family: 'notokr-regular',  'sans-serif';
	box-sizing: border-box;}
@media all and (max-width:768px){
.consub_inner{	font-size: 14px;	padding: 5px 10px; }
}


.test01{  position: relative;  display: block;  width: 100%; height: 100%;
  min-height: 50vw;  padding: 100px 0;  box-sizing: border-box; z-index: 1; }
 .keyBox{ position: relative; display: block; width: 100%; height: 100%; margin: 0 auto;
   padding: 0;  box-sizing: border-box; }
.keyBox::after{  content: '';  display: block;  clear: both;  float: inherit;}
.wz-keyword {  margin: 0px 0 45px; font-family: 'ONE-Mobile-Title';}

.wz-keyword p {  font-size: 2.5rem;  padding-bottom: 3px;  margin-bottom: 33px;}
.wz-keyword-con ul{  margin-bottom: 1.5%;}
.wz-keyword li { display: inline-block; margin-right: calc(1.8vw + 10px); }
.wz-keyword li a { line-height:1.1; transition:opacity .3s;  text-decoration: none;
  font-size: calc(3vw + 1.5rem);  line-height: calc(3.5vw + 20px);  color:#fff; opacity:.4; }
.wz-keyword li a:hover { opacity:1; transition:opacity .3s; font-weight: bold;}
.wz-keyword { position: relative; color:#fff; text-align:center; margin: 50px 0;
  padding-bottom: calc(7vw + 40px); }
.wz-keyword p { display:inline-block; font-size:60px;
  padding-bottom:9px; border-bottom:2px solid #fff; margin-bottom: 60px; }
.wz-keyword-con { position:absolute; left: 50%; transform: translateX(-50%); }
.wz-keyword-li::after { clear:both; display:block; content:''; }
.wz-keyword-li {text-align:center; white-space: nowrap; }
.wz-keyword-li:nth-of-type(2n-1) { animation: leftMove 3s linear 0s infinite alternate; }
.wz-keyword-li:nth-of-type(2n) { animation: rightMove 3s linear 0s infinite alternate; }

@media all and (max-width:1089px){
.section3{padding: 10px 0;}
.wz-keyword {padding-bottom: 30px;}
.wz-keyword p {	font-size: 2rem;	padding-bottom: 2px;	margin-bottom: 35px; }
.wz-keyword-con ul { margin-bottom: 2%;}
}

#cont2{}
@media all and (max-width:1089px){
#cont2{  padding-bottom: 60px;}
}
@media all and (max-width:460px){
  #cont2{  padding-bottom: 0px;}
}


@keyframes leftMove {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-100px);
	}
}
@keyframes rightMove {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(100px);
	}
}


/***********  modal **********/
.modal { position: fixed; width: 80%; height: 70%; margin: 0 auto; top: 43%; left: 50%; z-index: 9;
  scrollx:none; overflow: hidden;  display: none;  box-sizing: border-box;  }
.modal_on { display: block; }
.modal_x { position: relative; display: block; width: 40%; height: 45px; line-height: 45px; margin: 0 auto;
  border-radius: 5px; margin-top: 30px; background-color: #1eb4cf; color: #fff; text-align: center;
  font-weight: bold; cursor: pointer; font-family: 'Montserrat', sans-serif;  cursor: pointer;}
.modal_t{ position: relative; display: block; width: 100%; margin-top: 0; color: #fff; cursor: pointer;}
.modal_t span{  display: block; text-align: right; margin-right: 2%;  padding: 7px 3px; font-size: 20px;}
.modal_back {  position: fixed; z-index: 2; top: 0px;  left: 0;  right: 0;  bottom: 0; opacity: 0;
  visibility: hidden;  background-color: rgba(0, 0, 0, 0.9);}
.back_on {  opacity: 1; visibility: visible;}
.body_lock {  z-index: 3;width: 100%;  height: 100%; overflow: hidden;}

@media (max-width: 740px) {
.modal {	width: 86%;	max-height: 100%;}
.modal_x{	width: 70%;  margin-top: 20px;}
}

/*******************/
.semifooter{	position: relative;  display: block; width: 100%;
    height: auto;  margin: 0 auto;	 box-sizing: border-box;  text-align: center; }
.semifooter.semifooterB{  margin-top: 20px;}
.semifooter2{  position: relative;  display: inline-block;  width: 100%;	height: auto;
  margin: 0 auto;	 box-sizing: border-box; }
.semifooter2 .semifooter2L, .semifooter2 .semifooter2R{ position: relative; display: block;}
.semifooter2 .semifooter2L{ float: left;}
.semifooter2 .semifooter2R{ float: right;}

.semifooter ul, .semifooter2 .semifooter2L  ul, .semifooter2 .semifooter2R  ul{ position: relative;
  display: flex;  width: 100%; height: auto; box-sizing: border-box;}
/* .semifooter1 ul li, .semifooter2 .semifooter2L  ul li, .semifooter2 .semifooter2R  ul li{
 position: relative; display:block;  width: 100%;  height: auto;  text-align: center;
   float: left; letter-spacing:-1px; box-sizing: border-box; } */
.semifooter ul li{ position: relative; display:block; width: 100%;  height: auto;
  text-align: center; float: left; letter-spacing:-1; box-sizing: border-box; }
.semifooterB p{  font-size: 11px; text-align: center; letter-spacing: -1px;  text-align: center;
  font-family: 'notokr-regular','sans-serif';  word-break: keep-all;}

.semifooter ul li a, .semifooter2 ul li a{	position: relative; display:block; width: 50px; height: 50px;
  margin: 0 auto; vertical-align: middle; box-sizing: border-box; }
.semifooter ul li i, .semifooter2 ul li i{  position: relative;  display: block;
  margin: 0 auto;  width: 30px;  height: 30px;  text-align: center;}

/* .semifooterA ul li a, .semifooterB ul li a{
--hue: 1;background-color: hsla(calc(var(--hue)*360/16),47%,74%,0.3);} */

.semifooter ul li:hover a, .semifooter2 ul li:hover a{background-color: #959595;}
.semifooter ul li:hover p, .semifooter2 ul li:hover p{color: #fff;}
.semifooterA ul li:nth-child(1) a {background: url(../image/ico/footer/link1.png) center no-repeat;}
.semifooterA ul li:nth-child(2) a {background: url(../image/ico/footer/kakaoS1.png) center no-repeat;}
.semifooterA ul li:nth-child(3) a {background: url(../image/ico/footer/face1.png) center no-repeat;}
.semifooterA ul li:nth-child(4) a {background: url(../image/ico/footer/blog_naver1.png) center no-repeat;}
.semifooterA ul li:nth-child(5) a {background: url(../image/ico/footer/band_naver1.png) center no-repeat;}
.semifooterA ul li:nth-child(1):hover a {background: #959595 url(../image/ico/footer/link2.png) center no-repeat;}
.semifooterA ul li:nth-child(2):hover a {background: #fbc600 url(../image/ico/footer/kakaoS2.png) center no-repeat;}
.semifooterA ul li:nth-child(3):hover a {background: #3a5898 url(../image/ico/footer/face2.png) center no-repeat;}
.semifooterA ul li:nth-child(4):hover a {background: #3bac37 url(../image/ico/footer/blog_naver2.png) center no-repeat;}
.semifooterA ul li:nth-child(5):hover a {background: #3bac37 url(../image/ico/footer/band_naver2.png) center no-repeat;}

.semifooterB ul li:nth-child(1) i{background: url(../image/ico/footer/pdf1.png) no-repeat center;}
.semifooterB ul li:nth-child(2) i{background: url(../image/ico/footer/ebook4.png) no-repeat center;}
.semifooterB ul li:nth-child(3) i{background: url(../image/ico/footer/books1.png) no-repeat center;}
.semifooterB ul li:nth-child(4) i{background: url(../image/ico/footer/letter1.png) no-repeat center;}
.semifooterB ul li:nth-child(5) i{background: url(../image/ico/footer/customer1.png) no-repeat center;}

/* .semifooter ul li .sftxt{	margin-top: 10px;	font-size: 17px; text-align: center;
	font-size: 17px; color:#444;	font-weight: bold;} */

/* .semifooter ul li:nth-child(1) i{width: 94px; height: 69px;}
.semifooter ul li:nth-child(3) i{	width: 69px; height: 69px;} */
/*.semifooter ul li:nth-child(1):hover i{background: url(../image/ico/logo1.png) no-repeat center/cover;}
.semifooter ul li:nth-child(2):hover i{background: url(../image/ico/gift1.png) no-repeat center/cover;}
.semifooter ul li:nth-child(3):hover i{background: url(../image/ico/pdf1.png) no-repeat center/cover;}
.semifooter ul li:nth-child(4):hover i{background: url(../image/ico/list1.png) no-repeat center/cover;} */
/* .semifooter1 ul li i{  margin-bottom: 5px;} */
@media all and (max-width:1089px){
.semifooter{width: 100%; margin-left: 0px; margin: 0 auto;}
}
@media all and (max-width:768px){
/* .semifooter1 ul, .semifooter2 ul{  display: block;}
.semifooter1 ul li{ width: calc(100% / 2);  float: left;  margin: 0px; } */
/* .semifooter2 .semifooter2L, .semifooter2 .semifooter2R{  float: inherit;}
.semifooter2 .semifooter2L  ul, .semifooter2 .semifooter2R  ul{float: inherit; display: block; }
.semifooter2 ul li  { margin: 0px;  display: inline-block;  width: calc(100% / 2) ; float: left;}
.semifooter2 .semifooter2L  ul li, .semifooter2 .semifooter2R  ul li{
  margin: 0px;  display: inline-block;  width: calc(100% / 2) ; float: left;} */
}

/***************/

/****************/
#sideTab{  position: fixed; display: block; bottom: 9%;  padding: 0px;  z-index: 99;  text-align: center;
   background-color: rgba(255, 255, 255,0.6);  border: 1px solid rgba(171, 171, 171, 0.5);
   border-radius: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
 -webkit-box-shadow: 0px 0px 19px 0px rgb(0 0 0 / 30%);  -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 19px 0px rgb(0 0 0 / 30%);  transition: all 0.4s;
   right: -120px;   /* right: 0; */}
#sideTab.active{right: 0;}
#sideTab ul{ position: relative; display: block; height: 100%; margin: 0 auto; box-sizing: border-box; z-index: 9;}
#sideTab ul li{  position: relative;  display: block;
  /* width: 76px;  height: 76px; */
  width: 60px;  height: 60px;  z-index: 999999;
	 vertical-align: top;  box-sizing: border-box;  cursor: pointer; }

#sideTab ul li:first-child{  border:none;}
#sideTab ul li a{  position: relative; display: inline-block; width: 100%; height: 100%;
   padding: 10px 10px;
   box-sizing: border-box; }
#sideTab ul li a i{  position: relative;  display: block;   width: 30px;  height: 30px; margin: 0 auto;
   vertical-align: middle;}
#sideTab ul li a p{  display: none;
  /* position: relative; display: inline-block; vertical-align: middle;word-break: keep-all;
  width: 100%; font-size: 12px;	box-sizing: border-box;
	font-family: 'notokr-regular'; color:#000; */
}

#sideTab ul li:nth-child(1) a{ background: url(../image/ico/footer/talk_1.png) no-repeat center;}
#sideTab ul li:nth-child(2) a{ background: url(../image/ico/footer/face1.png) no-repeat center;}
#sideTab ul li:nth-child(3) a{ background: url(../image/ico/footer/blog_naver1.png) no-repeat center;}
#sideTab ul li:nth-child(4) a{ background: url(../image/ico/footer/tweet1.png) no-repeat center;}
#sideTab ul li:nth-child(5) a{ background: url(../image/ico/footer/band_naver1.png) no-repeat center;}

#sideTab ul li:nth-child(1):hover a{ background: #fbc600 url(../image/ico/footer/talk_1.png) no-repeat center;}
#sideTab ul li:nth-child(2):hover a{ background: #3a5898 url(../image/ico/footer/face2.png) no-repeat center;}
#sideTab ul li:nth-child(3):hover a{ background: #3bac37 url(../image/ico/footer/blog_naver2.png) no-repeat center;}
#sideTab ul li:nth-child(4):hover a{ background: #2aa8e0 url(../image/ico/footer/tweet2.png) no-repeat center;}
#sideTab ul li:nth-child(5):hover a{ background: #3bac37 url(../image/ico/footer/band_naver2.png) no-repeat center;}

#sideTab ul li:last-child a{background: url(../image/ico/footer/mobile_bt_close2.png) no-repeat center;}
#sideTab ul li:last-child:hover a{background: #959595 url(../image/ico/footer/mobile_bt_close0.png) no-repeat center;}

#sideOpen { position: fixed;  width: 60px;  height: 60px; right: 0%;  bottom: 10%;
   text-align: center; vertical-align: middle;  cursor: pointer; z-index: 99;
  opacity: 0;	visibility: hidden;  transition: all 0.1s;   background-color: #459985; }
#sideOpen.active{	opacity: 1;	visibility: visible;}
#sideOpen .sideO{  position: relative;  color: #fff;  font-size: 15px; line-height: 3.7;
  margin: 0 auto; font-style: normal; font-weight: normal;vertical-align: middle;
	 transition: all 0.1s;}


@media all and (max-width:1089px){
#sideTab ul li, #sideOpen{  width: 50px; height: 50px;}
#sideTab{  bottom: 0.5%;}
#sideOpen{bottom: 0.5%;}
#sideOpen .sideO{line-height: 3;}

/* #sideOpen, #sideOpen .sideO, #sideTab ul li:nth-child(5){ display: none;}
#sideTab{  position: relative;  display: block; width: 100%; height: 96px; padding: 0;
  right: 0px; top:  0%; border: 1px solid rgba(171, 171, 171, 0.5); box-shadow:none;}
#sideTab ul{ display: block;  width: 100%; height: 100%; margin: 0 auto;  }
#sideTab ul li{  display: inline-block; width: calc(100% / 4 - 0px); height: 100%;  margin-bottom: 0;  padding: 10px 0;
  vertical-align: top;  border-left: 1px solid rgba(171, 171, 171, 0.5);  box-sizing: border-box;}
#sideTab ul li a i{ display: inline-block;  margin-bottom: 5px;  vertical-align: middle;} */

}

/*************/



@media all and (max-width:768px){}

.ocean { position: absolute; width: 100%; height: 80px; bottom: 0; left: 0; right: 0; overflow-x: hidden;}
.wave {  position: absolute;  width: 200%;  height: 100%;  min-height: 100%; opacity: 0.7;
  transform: translate3d(0, 0, 0);  animation: wave 10s -3s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");  }
.wave:nth-of-type(2) {  bottom: 0; opacity: 0.5; animation: wave 18s linear reverse infinite;}
.wave:nth-of-type(3) {  bottom: 0;  opacity: 0.3; animation: wave 20s -1s linear infinite; }
@keyframes wave {
  0% {transform: translateX(0);}
  50% {transform: translateX(-25%);}
  100% {transform: translateX(-50%);}
}

@media all and (max-width:768px){
.ocean{  display: none; /* height: 70px; */}
}

/**********************/
.waveWr{ display: flex;  align-items: center;  justify-content: center;}
.progressbar1{  position: relative;  margin: 0 auto;  text-align: center;}

.progressbar1::before, .progressbar1::after {
    display: block; height: 120px; font-size: 6em; margin: 0 auto;  text-align: center;
    font-family: 'Hi Melody', 'cursive';   content: attr(data-text);  }
.progressbar1::before {  color: #384f75;}
.progressbar1::after {  display: block;  position: absolute;  top: 0;  left: 0;
  z-index: 2; color: #bbecf7; overflow: hidden;  margin: 0 auto;  text-align: center;}
.progressbar1::after {  animation: load ease-out 8s infinite;}
@keyframes load {
  0%, 10%, 100% { height: 0; }
  90% { height: 120px; }
}

/**********************/
#section4{  position: relative;  display: flex;   height: 100%;
  margin: 0 auto; text-align: center;
  vertical-align: middle;  justify-content: center;  align-items: center; overflow: hidden;
  box-sizing: border-box;  background: url(../image/main/topVisiual7.jpg) no-repeat center/cover;
  /* padding: 50px 0; */
}
.main_loading{  position: relative;  display: flex; width: 100%; height: 100%;
  justify-content: center;  align-items: center;  vertical-align: middle;
  margin: 0 auto;  text-align: center;  overflow: hidden;  box-sizing: border-box;
  /* font-family: 'GowunBatang-Regular'; */
  font-family: 'NanumSquare', Sans-serif;
}

#wave-container { position:relative;  display: block;  margin: 0 auto; height: 40px;
  /* width: 200px;  */   margin-bottom: 20px;}
#wave-container ul{position:relative; width: 100%; height: 40px;}
#wave-container ul li{  display: inline-block;  top: 0; width: 10px; height: 10px; margin: 0 5px;
  transform-origin: 50% 50%;  border-radius : 50%; background-color: #384f75;
  -webkit-animation:vertical-movement 2s infinite ease-in-out;
  -moz-animation:vertical-movement 2s infinite ease-in-out;
  -ms-animation:vertical-movement 2s infinite ease-in-out;
  -o-animation:vertical-movement 2s infinite ease-in-out;
  animation:vertical-movement 2s infinite ease-in-out;
    /* border-top-right-radius: 0;  transform: rotate(-45deg); background-color: #3790c8; */
}

#wave-container ul li:nth-child(1){-webkit-animation-delay:-0.3s;-moz-animation-delay:-0.3s;-ms-animation-delay:-0.3s;-o-animation-delay:-0.3s;animation-delay:-0.3s; }
#wave-container ul li:nth-child(2){-webkit-animation-delay:-0.6s;-moz-animation-delay:-0.6s;-ms-animation-delay:-0.6s;-o-animation-delay:-0.6s;animation-delay:-0.6s;}
#wave-container ul li:nth-child(3){-webkit-animation-delay:-0.9s;-moz-animation-delay:-0.9s;-ms-animation-delay:-0.9s;-o-animation-delay:-0.9s;animation-delay:-0.9s;}
#wave-container ul li:nth-child(4){-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-ms-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s;}
#wave-container ul li:nth-child(5){-webkit-animation-delay:-1.5s;-moz-animation-delay:-1.5s;-ms-animation-delay:-1.5s;-o-animation-delay:-1.5s;animation-delay:-1.5s;}
#wave-container ul li:nth-child(6){-webkit-animation-delay:-1.8s;-moz-animation-delay:-1.8s;-ms-animation-delay:-1.8s;-o-animation-delay:-1.8s;animation-delay:-1.8s;}
#wave-container ul li:nth-child(7){-webkit-animation-delay:-2.1s;-moz-animation-delay:-2.1s;-ms-animation-delay:-2.1s;-o-animation-delay:-2.1s;animation-delay:-2.1s;}
#wave-container ul li:nth-child(8){-webkit-animation-delay:-2.4s;-moz-animation-delay:-2.4s;-ms-animation-delay:-2.4s;-o-animation-delay:-2.4s;animation-delay:-2.4s;}
#wave-container ul li:nth-child(9){-webkit-animation-delay:-2.7s;-moz-animation-delay:-2.7s;-ms-animation-delay:-2.7s;-o-animation-delay:-2.7s;animation-delay:-2.7s;}
#wave-container ul li:nth-child(2), #wave-container ul li:nth-child(8){ background-color: #44b5d9;}
#wave-container ul li:nth-child(3), #wave-container ul li:nth-child(7){ background-color: #73ddf0;}
#wave-container ul li:nth-child(4), #wave-container ul li:nth-child(6){ background-color: #baf5ff;}
#wave-container ul li:nth-child(5){ background-color: #d5f7f7;}


@-webkit-keyframes vertical-movement {
  0%,100% { -webkit-transform: translateY(0%); }
  50% { -webkit-transform: translateY(30px); } }
@keyframes vertical-movement {
  0%,100% {
    -webkit-transform: translateY(0%); -moz-transform: translateY(0%);
    -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%);
  }
  50% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px);
     -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px);
   }
}

.txtBoxh2_Wr{  position: relative;  display: block;  width: 100%; padding: 0 5px; box-sizing: border-box;}
.txtBoxh2_Wr h2{  font-size: 20px; margin-top: 30px; color: #fff;  text-shadow: 1px 1px 1px #000;
   word-break: keep-all;  font-family: 'GowunBatang-Regular';
	/* font-family: "Gmarket Sans";  font-family: 'ONE-Mobile-Regular'; */
}

@media all and (max-width:768px){
#wave-container {  margin-bottom: 10px;}
.main_loading .loading{height: auto;}
.txtBoxh2_Wr h2{font-size: 18px;}
}

.loadWr{  position: relative;  display: block;  width: 100%; margin: 0 auto;}
.main_loading .loading{  position: relative;  display: inline-block;  width: 100%; max-width: 100%;
  margin: 0 auto; overflow: hidden;  text-align: center;  justify-content: center;  align-items: center;
  box-sizing: border-box;  vertical-align: middle;}
.loadDef, #water, #text_W, #text_mask{  position: relative; width: 100%; height: auto;
  display: inline-block;  margin: 0 auto; text-align: center; vertical-align: middle;  box-sizing: border-box;}
.water-fill {  animation: wave1 0.7s infinite linear,  fill-up 10s infinite ease-out alternate;}
#text_W{width: 100%; height: 100%;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));}
.st0{	/* fill:rgba(0, 137, 207, 0.85);/ */	fill:rgba(255, 255, 255, 0.6);}
.path_waterfill{	fill:rgba(255, 255, 255, 1);}

.water_path1{	fill:rgba(255, 255, 255, 1);}

@keyframes wave1 {
  0% { x: -400px; }
  100% { x: 0; }
}
@keyframes fill-up {
  0% { height: 0;
    y: 130px; }
  100% { height: 190px;
    y: 0px; }
	}

/*******************************************/