@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/
.inner{max-width:1600px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1600px; padding:0 5%; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.clear:after {content:''; display:block; clear:both;}

.tit_h3{font-size:28px;font-weight:400; color:#323232;  position:relative; letter-spacing:-1px}
.tit_h3:after{content:''; width:60px; height:1px; display:block; background:#505050; margin: 0 auto; margin-top:20px;}
.tit_h4{font-size:26px; color:#323232; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#323232; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}

.mEnter{display:block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !important}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.line_link{position:relative; }
.line_link a{display:inline-block; padding:10px 0px; font-size:0.9em; font-weight:600; border-bottom:2px solid #323232; vertical-align:middle;}

i.ic_arrow{display:inline-block; position:relative; height:2px; width:25px; background:#323232; margin-left:20px; vertical-align:middle; }
i.ic_arrow:before{content:''; display:block; position:absolute; width:7px; height:2px; background:#323232; margin:auto; right:0; top:0;  bottom:0}
i.ic_arrow:before{transform:rotate(45deg); top:-5px}


.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:700}
.fss{font-size:0.8em}
.Tblack{color:#323232}
.Tred{color:#e83428}
.upcase{text-transform:uppercase}


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

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}


.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}

.pb{padding-bottom:40px !important}
.bpb{padding-bottom:60px !important}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 5%}

.half{width:48.5%; float:left;}
.mr{margin-right:3%;}
.btn_more:after{margin-left:20px}

.line_link a{padding:12px 0px; font-size:1em}
i.ic_arrow{margin-left:35px}
}

@media all and (min-width:1200px) {

body, html{font-size:17px;}
.mEnter{display:inline-block;}

.txt-m{font-size:30px;}
.txt-l{font-size:40px;}

.tit_h3:after{margin-top:25px;}

.tit_h4{font-size:30px; }

.tit_h5{font-size:20px; }


.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}

.pb{padding-bottom:50px !important}
.bpb{padding-bottom:80px !important}
.pdinner{padding:0 20px}

}

@media all and (min-width:1400px) {
.mb{margin-bottom:80px !important}
.bmb{margin-bottom:120px !important}
.bpb{padding-bottom:120px !important}
.line_link a{font-size:1.05em}
}



/* ==== Slider Image Transition === */
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

@-webkit-keyframes scaling {	From {    -webkit-transform: scale(1.1);}	To {    -webkit-transform: scale(1.0);}}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}

.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}

.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}

.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}



/* Arrows */
.slick-arrow{position: absolute;  top: 50%; z-index:15;  display: block;   width: 50px;   height: 50px; border:0;   cursor: pointer;  background:#ffffff; text-indent:-999999px;
/*-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);*/}

.slick-arrow:before{text-indent:0; content:''; display:block; position:absolute; font-family:'FontAwesome'; width:20px; height:20px; line-height:20px; left:0; right:0; bottom:0; top:0;  margin:auto; font-weight:600 ; text-align:center}
.slick-arrow:before{content:'\f104'; font-size:22px;}
.slick-next{right:0;}
.slick-next:before{content:'\f105'; }

/* Circle Arrows */
.cir-arrow .slick-arrow{position: absolute;  top: 50%; z-index:3;  display: block;   width: 50px;   height: 50px; border:0;   cursor: pointer;  background:none; border:2px solid #ffffff; border-radius:500px; text-indent:-999999px;
/*	-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);*/}

.cir-arrow .slick-arrow:before{text-indent:0; content:''; display:block; position:absolute; font-family:'FontAwesome'; width:20px; height:20px; line-height:20px; left:0; right:0; bottom:0; top:0;  margin:auto; font-weight:600 }
.cir-arrow .slick-arrow:before{content:'\f104'; font-size:22px; color:#ffffff}
.cir-arrow .slick-arrow.slick-next{right:0;}
.cir-arrow .slick-arrow.slick-next:before{content:'\f105'; }


/* rec Arrows */
.rec-arrow .slick-arrow{position: absolute;  top: 50%; z-index:100;  display: block;   width: 50px;   height: 50px; border:0;   cursor: pointer;  background:none; border:1px solid #ffffff; text-indent:-999999px;
/*	-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);*/}

.rec-arrow .slick-arrow:before{text-indent:0; content:''; display:block; position:absolute; font-family:'FontAwesome'; width:20px; height:20px; line-height:20px; left:0; right:0; bottom:0; top:0;  margin:auto; font-weight:600 }
.rec-arrow .slick-arrow:before{content:'\f104'; font-size:22px; color:#ffffff}
.rec-arrow .slick-arrow.slick-next{right:0;}
.rec-arrow .slick-arrow.slick-next:before{content:'\f105'; }



/*line-Dots*/
.slick-dots{position: absolute;    bottom: -20px;    display: block;     padding: 0;    margin: 0;   text-align: center; z-index:10; left:0; right:0}
.slick-dots li{position: relative;  display: inline-block;  width: 20px;  height: 2px;  margin: 0 5px;  padding: 0;   cursor: pointer;}
.slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width:100%; height:100%; background:#969696; cursor: pointer;  color: transparent;  border: 0;  outline: none;  opacity:0.8}
.slick-dots li.slick-active button{background:#ffffff; opacity:1}

.slick-cir li{width:8px; height:8px; }
.slick-cir li.slick-active button{background:#e2193f; }
.slick-cir li button{background:#ffffff; opacity:1; border-radius:500px;}

/*pop_dot*/
.pop_dot .slick-dots{position: absolute;    bottom: 10%;  right:20px; display: inline-block; padding: 5px; line-height:100%;  width:auto; background:rgba(0,0,0,0.5); text-align: center; z-index:10}
.pop_dot .slick-dots li{position: relative;  display: inline-block;  width: 13px;  height: 13px;  margin: 0 5px;  padding: 0;   cursor: pointer; vertical-align:middle;}
.pop_dot .slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width: 100%;  height: 100%; border-radius:500px;  cursor: pointer;  color: transparent;  border: 0;  outline: none;  background:none; background:#ffffff; opacity:0.5}
.pop_dot .slick-dots li.slick-active button{background:#fcc754; opacity:1}



/*slick_circle_arrow*/

.slick_circle_arrow button{position:absolute; top:auto; bottom:10px; right:20px; background:none; border:1px solid #ffffff; border-radius:500px; border-color:rgba(255,255,255,0.5)}
.slick_circle_arrow button:before{color:#ffffff;}
.slick_circle_arrow button.slick-prev{margin-right:60px}



/* main */
.wrap{max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}

.visualWrap{position:relative}
.visuslider{background:#323232}
.visuslider .visu{position:relative; height:calc(100vh + 50px); min-height:600px; max-height:1080px; z-index:2; display:flex !important; align-items:center; overflow:hidden}


.visuslider .visu:before{content:''; display:block; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; background:black; background-size:cover !Important; z-index:0;}
/*
.visuslider .visu:after{content:''; display:block; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100%);}*/
.visuslider .slick-active .visu:before{animation: zoomout 1.5s ease-in-out infinite alternate;    -webkit-animation: zoomout 1.5s ease-in-out infinite alternate; animation-iteration-count:1; 	-webkit-animation-iteration-count:1;}
/*
.visuslider .visu.visu01:before{background:url(../img/main_vis01.jpg) no-repeat center center; }
.visuslider .visu.visu02:before{background:url(../img/main_vis02.jpg) no-repeat center center; }
.visuslider .visu.visu03:before{background:url(../img/main_vis03.jpg) no-repeat center center; }*/
.visuslider .visu:after{content:''; position:absolute; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,0.5); z-index:2}

.visuslider .visu .txt{color:#ffffff; width:100%;  position:absolute; z-index:5; margin-top:-80px} /*텍스트글자*/

.visuslider .visu .txt h2{ margin-bottom:30px; line-height:1.2; position:relative; font-weight:500; letter-spacing:0; z-index:5; text-align:center;}
.visuslider .visu .txt h2 span{display:block}
.visuslider .visu .txt h2 span.ani_txt{font-size:1.2em; font-weight:600; margin-bottom:20px}
.visuslider .visu .txt h2 span.ani_txt2{font-size:3.6em; font-weight:900; letter-spacing:-2px}
.visuslider .visu .txt p{font-size:1.6em; text-align:center;  font-weight:800;}

.visuslider .video_con{position:absolute; left:0; right:0; top:0; height:100%;  z-index:0;}


@media all and (min-width:768px) {
.visuslider .visu .txt h2 span.ani_txt{font-size:1.4em;}
.visuslider .visu .txt h2 span.ani_txt2{font-size:5em;}
.visuslider .visu .txt p{font-size:2.4em;}

.visuslider .slick-active .visu .txt:before{width:350px; height:350px;}

}

@media all and (min-width:1200px) {
.visusliderWrap{overflow:hidden;}
.visuslider .visu .txt{width:1200px;  padding:0 5%; top:auto; left:0; right:0; margin:0 auto; margin-top:-5% }

.visuslider .visu .txt h2 span.ani_txt{font-size:1.5em;}
.visuslider .visu .txt h2 span.ani_txt2{font-size:6em;}
.visuslider .visu .txt p{font-size:3.1em;}

.visuslider .slick-active .visu .txt:before{width:580px; height:580px;}

.visuslider .video_con{width:115%; height:auto}


}

@media all and (min-width:1600px) {
.visuslider .visu .txt{width:1400px; padding:0 20px}
}

@keyframes zoomout {
	0% { transform: scale(1); }
    100% {        transform: scale(1.1);    }
}


.main-visual-control{
  position:absolute;
  bottom:calc(20% + 40px);
  left:0;
  right:0;
  margin:auto;
  width:100%;
  z-index:3;
  max-width:1400px;
  display:flex;
  align-items:center;
  bottom:320px;
}
.main-visual-control .slick-dots{
    margin-top:0;
    margin-left:0;
	text-align:right;
	padding: 0 5%;
}

.main-visual-control .ico{
    filter:brightness(0) invert(1);
}

.main-visual-control > button{
    margin:0;
    width:30px;
	height:30px;
	line-height:30px;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	background:none;
    text-align:center;
}

.main-visual-control > button.next-visual{left:auto; right:0}

.main-visual-control > button:before{color:#ffffff}
.main-visual-control > button.next-visual:before{content:'\f105';}

.main-visual-control .slick-dots{
    background:transparent;
}

.main-visual-control .slick-dots li{
  width:30px;
  height:30px;
  background:transparent;
  position:relative;
  margin:0 !important;
}

.main-visual-control .slick-dots li:after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background-color:#fff;
  border-radius:100%;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-4px;
  margin-left:-4px;
}

.circle_wrap {
  overflow: hidden;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: transparent;
}

.circle_wrap .circle {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  clip: rect(0px, 30px, 30px, 15px)
}

.slick-active .circle_wrap .circle-line {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid rgba(255,255,255,0.3);
}

.main-visual-control .slick-dots li.slick-active:after{background:#0dbfd3; transition:.3s}

.circle_wrap .circle-inner {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border:2px solid #0dbfd3;
  clip: rect(0px, 15px, 30px, 0px)
}

.circle_wrap .circle2 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.slick-active .circle1 .circle-inner {
  -webkit-animation-name: circle_round;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards
}

.slick-active .circle2 .circle-inner {
  -webkit-animation-name: circle_round;
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards
}

@-webkit-keyframes circle_round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }
}

@media all and (min-width:1200px) {
.main-visual-control .slick-dots{padding:0 20px}
}




/*스크롤다운*/
.scroll_down{position:absolute; left:0; right:0; bottom:2%; color:#ffffff; width:100%; text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:700; z-index:10}

.scroll_down span{display:block; position:absolute; left:0; right:0;}
.scroll_down span:before{content:''; width:35px; height:35px; display:block; margin:0 auto; margin-bottom:10px; background:url(../img/ic_scroll.png) no-repeat center center; background-size:100% !important;}
.scroll_down span:after{content:'\f107'; font-family:'FontAwesome'; display:block; margin-top:10px; color:#ffffff; font-size:18px}


@media all and (min-width:768px) {
.scroll_down{bottom:10%;}
}


/*파도*/
.wave_box{position:absolute; bottom:0px; left:0; right:0; z-index:5}
.waves { position:relative;  width: 100%;  height:15vh;  margin-bottom:-7px; /*Fix for safari gap*/  min-height:100px;  max-height:200px;}

.parallax > use {  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;}
.parallax > use:nth-child(1) {  animation-delay: -4s;  animation-duration: 10s;}
.parallax > use:nth-child(2) {  animation-delay: -10s;  animation-duration: 15s;}
.parallax > use:nth-child(3) {  animation-delay: -8s;  animation-duration: 20s;}
.parallax > use:nth-child(4) {  animation-delay: -5s;  animation-duration: 20s;}


@media all and (min-width:768px) {
.waves { position:relative;  width: 100%;  height:25vh;}

}

@media all and (min-width:1200px) {
.waves {  height:30vh;}

}



@keyframes move-forever {
0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}



@-webkit-keyframes scaling {
	From {    -webkit-transform: scale(1.2);}
	To {    -webkit-transform: scale(1.0);}
}

.slick-active .ani_txt {animation-name:ani_txt; animation-duration:1s; animation-fill-mode:both; animation-delay:0.5s;}
.slick-active .ani_slick1 {animation-name:ani_txt; animation-duration:1s; animation-fill-mode:both; animation-delay:0.8s;}
.slick-active .ani_slick2 {animation-name:ani_txt2; animation-duration:1s; animation-fill-mode:both; animation-delay:1.2s;}
.slick-active .ani_slick3 {animation-name:ani_txt3; animation-duration:1s; animation-fill-mode:both; animation-delay:1.5s;}

.ani_txt {animation-name:ani_txt; animation-duration:1s; animation-fill-mode:both; animation-delay:0.5s;}
.ani_txt2 {animation-name:ani_txt2; animation-duration:1s; animation-fill-mode:both; animation-delay:1s;}
.ani_txt3 {animation-name:ani_txt3; animation-duration:1s; animation-fill-mode:both; animation-delay:1.5s;}

@keyframes ani_deco {
	0% {opacity:0; transform:translateY(-30px);}
	100% {transform:translateY(0); opacity:0.5;}
}

@keyframes ani_txt {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes ani_txt {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1; }
}


.slick-active .ani_txt2 {animation-name:ani_txt2; animation-duration:1s; animation-fill-mode:both; animation-delay:1.0s;}
@keyframes ani_txt2 {
	0% {opacity:0; transform:translateY(-30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes ani_txt2 {
	0% {opacity:0; transform:translateY(-30px);}
	100% {transform:translateY(0); opacity:1;}
}


.slick-active .ani_txt3 {animation-name:ani_txt3; animation-duration:1s; animation-fill-mode:both; animation-delay:1.5s;}

@keyframes ani_txt3 {
	0% {opacity:0; transform:translateX(-30px);}
	100% {transform:translateX(0); opacity:1;}
}
@-webkit-keyframes ani_txt3 {
	0% {opacity:0; transform:translateX(-30px);}
	100% {transform:translateX(0); opacity:1;}
}



.main{position:relative;}



/*section*/

/*section 공통*/
.section{padding:50px 0; position:relative; background-size:cover !important;}
.section span.wave_deco{position:absolute; left:0; right:0; top:-50px; height:55px; background-size:cover !important; z-index:10; display:block; width:100%;}
.section span.wave_deco.deco01{background:url(../img/wave_deco01.png) no-repeat center top;}
.section span.wave_deco.deco02{background:url(../img/wave_deco02.png) no-repeat center top;}
.section .section_top{ position:relative; margin-bottom:30px; }
.section .section_top h2{font-weight:700; font-size:1.6em; margin-bottom:20px; text-transform:uppercase; letter-spacing:0; color:#161616}
.section .section_top p.txt{ color:#909090; font-size:1.1em; font-weight:500}




a.btn_detail{position:relative; display:inline-block; font-size:0.95em; font-weight:700; line-height:26px; padding-right:50px}
.line-arrow{display:inline-block; position:absolute; right:-10px; top:0px; bottom:0; margin:auto; padding-right:60px;font-size:15px;font-weight:600}
.line-arrow:before, 
.line-arrow:after{content:""; display:block; position:absolute;top:50%;transform:translateY(-50%)}
.line-arrow:before{right:26px;width:20px;height:2px;background-color:#323232;transition:background-color .3s}
.line-arrow:after{right:0;width:26px;height:26px;border-radius:50%;background-color:#0f4aad;transition:width .3s, border-radius .3s}
.line-arrow .icon_arrow{display:inline-block;position:absolute;top:50%;right:0;width:26px;height:26px;transform:translateY(-50%);z-index:50}
.line-arrow .icon_arrow:before, 
.line-arrow .icon_arrow:after{content:"";display:inline-block;position:absolute;top:50%;transform:translateY(-50%)}
.line-arrow .icon_arrow:before{left:0;width:50%;height:2px;background-color:#ffffff}
.line-arrow .icon_arrow:after{left:50%;width:0px;height:7px;margin:-4px 0 0 -0px;border-right:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:rotate(-45deg) translateY(-50%)}

a.btn_detail:hover .line-arrow:before,
.line-arrow:hover:before{background-color:#ffffff;z-index:50}
a.btn_detail:hover .line-arrow:after,
.line-arrow:hover:after{width:55px;border-radius:15px; background:#0f4aad}


@media all and (min-width:768px) {
.section .section_top h2{font-size:2em}
.section .section_top p.txt{font-size:1.1em}
.section{padding:80px 0;}

}



@media all and (min-width:1200px) {
.section{padding:120px 0;}
.section .section_top h2{font-size:2.4em}
.section .section_top p.txt{font-size:1.2em}

}

@media all and (min-width:1400px) {

}


/*section01*/

#section01{position:relative}
#section01 .section_top h2:before{content:''; display:block; width:110px; height:30px; margin-bottom:20px; background:url(../img/logo.png) no-repeat center top; background-size:100% !important}
#section01 .photo{position:relative; max-width:400px; float:right}
#section01 .photo img{border-radius:30px 0 0 0; position:relative; z-index:1;}
#section01 .photo:before{content:''; width:100%; height:100%; position:absolute; right:-20px; bottom:-20px; background:#28a79e; z-index:0;  border-radius: 0 0 30px 0}

#section01 .pdinner{max-width:1400px}
#section01 .pdinner:after{content:''; display:block; clear:both;}


@media all and (min-width:860px) {
#section01 .section_top{float:left; width:50%; margin-right:3%}
#section01 .photo{float:left; width:47%; max-width:100%}
#section01 .photo:before{ right:-50px; bottom:-50px }
#section01 .photo img{border-radius:50px 0 0 0; }
#section01 .photo:before{border-radius:0 0 50px 0;  }
}


@media all and (min-width:1200px) {
#section01 .section_top{width:50%; margin-right:5%}
#section01 .section_top h2:before{margin-bottom:30px; width:130px; height:35px; }
#section01 .photo{width:45%; }
#section01 .photo img{border-radius:80px 0 0 0; }
#section01 .photo:before{border-radius:0 0 80px 0;  }
}





/*section02*/

#section02{  color:#ffffff; padding:0; position:relative }
#section02 .section_top{color:#ffffff}
#section02 .business_tab{position:relative; z-index:1;}
#section02 .business_tab li {border-bottom:1px solid #e6e6e6; border-color:rgba(255,255,255,0.3)}
#section02 .business_tab li a{display:block; padding: 30px 5%; position:relative; z-index:1;}
#section02 .business_tab li img{max-width:50px; display:block; margin-bottom:10px; position:absolute; right:5%; top:30px; margin:auto}
#section02 .business_tab li span{display:block; }
#section02 .business_tab li span.tit{font-weight:700; font-size:1.2em; margin-bottom:10px;}
#section02 .business_tab li span.txt{font-weight:500;}

#section02 .business_tab li:nth-child(1){background:url(../img/section02_bg01.jpg) no-repeat center center; background-size:cover !important}
#section02 .business_tab li:nth-child(2){background:url(../img/section02_bg02.jpg) no-repeat center center; background-size:cover !important}
#section02 .business_tab li:nth-child(3){background:url(../img/section02_bg03.jpg) no-repeat center center; background-size:cover !important}
#section02 .business_tab li:nth-child(4){background:url(../img/section02_bg04.jpg) no-repeat center center; background-size:cover !important}


@media all and (min-width:768px) {
#section02:before{content:''; position:absolute; left:0; right:0; width:1px; top:0; bottom:0; margin:auto; background:#ffffff; opacity:0.3; }
#section02:after{content:''; position:absolute; left:0; right:0;  height:1px; top:0; bottom:0; margin:auto; background:#ffffff; opacity:0.3}

#section02 .business_tab{display:flex; flex-wrap:wrap;}
#section02 .business_tab li a{padding:80px 0px}
#section02 .business_tab li img{position:relative; max-width:70px; right:auto; top:auto; margin:0 auto; margin-bottom:20px}
#section02 .business_tab li{width:50%}
#section02 .business_tab li span{display:block;  text-align:center;}

#section02 .business_tab li span.tit{font-size:1.4em;}
#section02 .business_tab li span.txt{font-size:1.1em;}
}


@media all and (min-width:1200px) {
#section02{background:url(../img/section02_bg.jpg) no-repeat center center; background-size:cover !important;}
#section02:before{display:none}
#section02:after{display:none}
#section02 .inner{}
#section02 .business_tab{border-right:1px solid #e6e6e6; border-color:rgba(255,255,255,0.3)}
#section02 .business_tab li{width:25%;  border-left:1px solid #e6e6e6; border-color:rgba(255,255,255,0.3); background:none !important}

#section02 .business_tab li a{padding:130px 0px; border:0; height:100%}
#section02 .business_tab li a:before{ content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
	background: rgb(232,50,39); /* Old browsers */
   background: linear-gradient(180deg, rgba(0,166,185,1) 0%,rgba(0,166,185,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     /*background: linear-gradient(180deg, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    opacity: 0.5;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;}
	#section02 .business_tab li.active a:before{ -webkit-transform: scaleY(1);   transform: scaleY(1);}

#section02 .business_tab li img{max-width:80px; margin-bottom:80px;} 
#section02 .business_tab li span{position:relative; z-index:1;}
#section02 .business_tab li span.tit{font-size:2em; margin-bottom:20px}
#section02 .business_tab li span.txt{font-size:1.15em; padding-bottom:100px; position:relative}

#section02 .business_tab li i{position:absolute; right:0; bottom:0; left:0;  transition:0.3s;  width:50px; height:50px; opacity:0; margin: auto; border-radius:500px; background:#ffffff; }
#section02 .business_tab li i:before,
#section02 .business_tab li i:after{content:''; width:60%; height:1px; background:#ffffff; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
#section02 .business_tab li i:after{transform:rotate(90deg)}

#section02 .business_tab li:hover img{margin-bottom:40px; transition:0.3s; -webkit-animation:bounce-top 1.5s both;animation:bounce-top 1.5s both}
#section02 .business_tab li:hover span.txt{}
#section02 .business_tab li:hover i{height:50px; display:block; transform:rotate(180deg); transition:0.3s; opacity:1;}
#section02 .business_tab li:hover i:before,
#section02 .business_tab li:hover i:after{background:#808080}

.change_bg #changeHover li{position:absolute; left:0; right:0; bottom:0; top:0; z-index:0;  opacity:0; transition:0.5s; background-position:center center }
.change_bg #changeHover li.active{opacity:1;  transition:0.5s;   }
.change_bg #changeHover li.bg01.active{background:url(../img/section02_bg01.jpg) no-repeat center center; }
.change_bg #changeHover li.bg02.active{background:url(../img/section02_bg02.jpg) no-repeat center center; }
.change_bg #changeHover li.bg03.active{background:url(../img/section02_bg03.jpg) no-repeat center center; }
.change_bg #changeHover li.bg04.active{background:url(../img/section02_bg04.jpg) no-repeat center center; }
}


/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}



/*section03*/
#section03{background:url(../img/section03_bg.jpg) no-repeat center center; background-size:cover !important;  }
#section03 .section_top h2{text-align:center; color:#001c43}
.main_product{display:flex; flex-wrap:wrap;}
.main_product li{width:50%; text-align:center; margin-bottom:40px}
.main_product li .photo{border-radius:500px; width:120px; height:120px; overflow:hidden; margin:0 auto; margin-bottom:10px; background:#ffffff; position:relative}
.main_product li .photo img{width:100%; display:block}
.main_product li span{display:block;}
.main_product li span.tit{font-weight:600; font-size:1.2em; color:#001c43; margin-bottom:10px; }
.main_product li span.txt{color:#505050; padding:0 10px; font-weight:400}


@media all and (min-width:768px) {
.main_product li{width:25%; font-size:1.1em}
.main_product li .photo{width:170px; height:170px;}
}

@media all and (min-width:1200px) {
.main_product li{width:25%; font-size:1.2em; margin-bottom:80px}
.main_product li .photo{width:250px; height:250px; margin-bottom:30px;}
.main_product li .photo img {transition:all 0.5s ease; transform:scale(1)}
.main_product li:hover .photo img{ transform:scale(1.1) }
}

@media all and (min-width:1400px) {
.main_product li .photo{width:320px; height:320px; }

}

/*section04*/
#section04 .pdinner{max-width:1400px;}
.news_wrap{position:relative;}
.news_wrap .news{position:relative;}
.news_wrap .news .news_top{padding-bottom:20px; border-bottom:1px solid #e6e6e6}
.news_wrap .news .news_top:after{content:''; clear:both; display:block;}
.news_wrap .news .news_top .photo{float:left; width:140px; margin-right:5%; border-radius:30px 0 0 0 ; overflow:hidden;  position:relative;}
.news_wrap .news .news_top .photo img{width:100%}
.news_wrap .news .news_top dl{width:calc(95% - 140px); float:left;}
.news_wrap .news .news_top dt{font-size:0.9em; font-weight:600; margin-bottom:10px; color:#3449c9}
.news_wrap .news .news_top dd.tit{font-weight:600; font-size:1.2em; color:#161616;
display:-webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.4;
height: 2.8em;
overflow:hidden;
text-overflow:ellipsis;
white-space:normal;
word-break:break-all;}
.news_wrap .news .news_top dd.txt{color:#969696; font-weight:500; display:none}

.news_wrap .news .news_list li{border-bottom:1px solid #e6e6e6}
.news_wrap .news .news_list li a{display:block;padding:15px 0px; }
.news_wrap .news .news_list li span{display:block}
.news_wrap .news .news_list li .cate{color:#3449c9; width:90px; font-size:0.9em; font-weight:600;  }
.news_wrap .news .news_list li .tit{color:#323232; font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.news_wrap .news .news_list li .info{color:#969696; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all; text-align:right; display:none}

.business_banner{position:relative; display:flex; flex-wrap:wrap; margin-top:20px;}
.business_banner li{position:relative; width:50%; background:#808080; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; background-size:cover !important;}
.business_banner li a{display:block; padding:25px 20px;  color:#ffffff; min-height:170px}

.business_banner li dt{font-weight:700; font-size:1.1em; margin-bottom:10px}
.business_banner li dd{font-size:0.9em; word-break:break-all}

.business_banner li.busi01{background:url(../img/busi01.jpg) no-repeat center center;}
.business_banner li.busi02{background:#001c43}
.business_banner li.busi02:after{content:''; width:70px; height:29px; background:url(../img/eel_mark.png) no-repeat center center; background-size:100% !important; position:absolute; right:20px; bottom:25px;}
.business_banner li.busi03{background:url(../img/busi03.jpg) no-repeat center center;}
.business_banner li.busi04{background:url(../img/busi04.jpg) no-repeat center center;}


@media all and (min-width:540px) {

.news_wrap .news .news_top .photo{width:250px;}
.news_wrap .news .news_top dl{width:calc(95% - 250px)}
.news_wrap .news .news_top dd.tit{margin-bottom:10px}
.news_wrap .news .news_top dd.txt{
display:-webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.4;
height: 2.8em;
overflow:hidden;
text-overflow:ellipsis;
white-space:normal;
word-break:break-all;
}

.news_wrap .news .news_list li a{display:flex; flex-wrap:wrap;}
.news_wrap .news .news_list li .tit{ width:calc(100% - 190px); }
.news_wrap .news .news_list li .info{width:100px; display:block;}


}


@media all and (min-width:768px) {
.news_wrap .news .news_top{padding-bottom:30px;}
.news_wrap .news .news_list li a{padding:20px 0px}
.business_banner li dt{font-size:1.2em;}
.business_banner li dd{font-size:1em;}

}


@media all and (min-width:1024px) {
.news_wrap{display:flex; flex-wrap:wrap;}
.news_wrap .news{width:45%; margin-right:5%}
.news_wrap .business_banner{width:50%; margin-top:0}
}


@media all and (min-width:1200px) {
.business_banner li dt,
.news_wrap .news .news_top dd.tit{font-size:1.3em}
.news_wrap .news .news_top dt,
.news_wrap .news .news_list li .cate{font-size:1em}
.news_wrap .news .news_list li a{padding:25px 0px}
.business_banner li a{padding:35px 30px;}

.news_wrap .news .news_top .photo{width:280px}
.news_wrap .news .news_top dl{width:calc(95% - 280px)}

.news_wrap .news .news_top dd.txt{font-size:1.1em;}
.news_wrap .news .news_list li .tit{font-size:1.1em}

.business_banner li.busi02:after{content:''; width:90px; height:47px;}
}



/*관련배너*/
.related_banner{background:#ffffff; padding:30px 0px; border-top:1px solid #e6e6e6}
.related_banner h3{font-size:1.2em; font-weight:800; color:#000000; margin-bottom:10px;}
.related_banner li{text-align:center; margin:0 5px}
.related_banner .slick-dots{right:0; top:-30px; text-align:right}
.related_banner .slick-arrow{background:none; width:30px; height:30px; left:auto; top:-35px; }
.related_banner .slick-arrow.slick-prev{right:60px}

@media all and (min-width:768px) {
.related_banner{padding:30px 0px; }
}

@media all and (min-width:1200px) {
.related_banner{padding:50px 0px}
.related_banner h3{float:left; width:150px; font-size:1.4em}
/*.related_banner .quick_banner{float:left; width: calc(100% - 150px); float:left; }*/
.related_banner:after{content:''; clear:both; display:block}

.related_banner .slick-arrow{top:auto; left:-110px; bottom:0;}
.related_banner .slick-arrow.slick-prev{right:auto; left:-160px}
.related_banner img{height:70px;}
}




#footer{background:#39404f; color:#dcdcdc; padding:50px 0px;}
#footer .pdinner{max-width:1600px}
#footer .foot_li{margin-bottom:20px; font-size:0.9em;}
#footer .foot_li li a{font-weight:700; color:#dcdcdc}
#footer .foot_li li{display:inline-block; vertical-align:middle; margin-right:20px}
#footer .foot_li li a{display:block;}

#footer h3{font-size:1.4em; font-weight:800;  }
#footer p.txt{font-size:1.1em; font-weight:600; margin-bottom:20px  }

#footer .box{padding:10px 0px; font-size:0.9em; position:relative}
#footer .box address{margin-bottom:5px}
#footer .box h4{font-weight:800; margin-bottom:15px; color:#dcdcdc; font-size:1.1em;}
#footer .copyright{font-size:0.8em; margin-top:20px; padding-top:20px; border-top:1px solid #e6e6e6; border-color:rgba(255,255,255,0.2)}
#footer .copyright b{color:#18d3e8}


@media all and (min-width:560px) {

#footer .copyright{margin-top:30px;}
}

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

#footer .box{font-size:1em}
#footer{padding:70px 0}
#footer .copyright{margin-top:40px}

#footer .box ul li{display:inline-block; margin-right:20px}
#footer h3{font-size:2em;}
}

@media all and (min-width:1200px) {
#footer .foot_li{margin-bottom:30px; font-size:1em}
#footer .box:after{content:''; position:absolute; right:0; top:0; bottom:0; margin:auto; width:200px; height:100px; background:url(../img/logo_w.png) no-repeat center center; background-size:100% !important}
}



/*page up*/
#pageup {position:fixed; z-index:999; right:5%; bottom:5%; width:50px; height:50px; border-radius:500px; display:none; cursor:pointer; z-index:10; }



#pageup span{display:block; position:absolute; width:100%; height:100%; border-radius:500px; background:#14306c; z-index:10; }
#pageup span i{width:2px; height:25px; background:#ffffff;  display:block; margin:0 auto; position:relative;  transition:.3s; margin-top:25px; }
#pageup span i:after{content:''; display:block; position:absolute; width:12px; height:2px; background:#ffffff; margin:auto; top:2px}
#pageup span i:before{transform:rotate(-45deg); right:-1px}
#pageup span i:after{transform:rotate(45deg); left:-1px}

#pageup:hover span{background:#ffffff ; transform:translateY(-5px);  transition:.3s; border-color:none; -webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);}
#pageup:hover span i,
#pageup:hover span i:after,
#pageup:hover span i:before{background:#14306c}
#pageup:hover span i{height:35px;  transition:.3s;}
#pageup:hover span i{margin-top:15px}


@media all and (min-width:1400px) {
#pageup {width:70px; height:70px; right:30px; bottom:30px}
#pageup span i{height:40px; margin-top:30px;}
#pageup:hover span i{height:50px; margin-top:20px}
}






/*서브레이아웃*/
.subcon{position:relative}

body.subWrap #header{box-shadow:none; }
#sub_visual{position:relative; padding:140px 0 100px; background:url(../img/subvisual01.jpg) no-repeat center center; background-size:cover !important; background:#808080; }
#sub_visual.sub01{background:url(../img/subvisual01.jpg) no-repeat center center;}
#sub_visual.sub02{background:url(../img/subvisual02.jpg) no-repeat center center;}
#sub_visual.sub03{background:url(../img/subvisual03.jpg) no-repeat center center;}
#sub_visual.sub032{background:url(../img/subvisual03_2.jpg) no-repeat center center;}
#sub_visual.sub033{background:url(../img/subvisual03_3.jpg) no-repeat center center;}
#sub_visual.sub04{background:url(../img/subvisual04.jpg) no-repeat center center;}
#sub_visual.sub05{background:url(../img/subvisual05.jpg) no-repeat center center;}
#sub_visual.sub06{background:url(../img/subvisual06.jpg) no-repeat center center;}

#sub_visual{text-align:center; }

#sub_visual .tit_h2{color:#ffffff; font-weight:800; font-size:2em; text-transform:uppercase; }
#sub_visual .tit_h2 span{display:block;  margin-bottom:10px; font-size:15px; font-weight:800; letter-spacing:0; text-transform:uppercase; position:relative;}
#sub_visual .tit_h2 b{display:block; line-height:1.2}
#sub_visual p{color:#ffffff; font-size:1em}

#sub_visual p.visu_tit span{z-index:2; position:relative; font-weight:500}
#sub_visual p.visu_tit span.tt {font-weight:700}

.sub_quick{display:none}

.conh3{font-size:1.6em; text-align:center; font-weight:700; }

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

#sub_visual .tit_h2{font-size:2.3em; }

#sub_visual p.visu_tit{font-size:1.4em}
#sub_visual .tit_h2 span:after{position:absolute; right:0; top:0; margin:0}
}

@media all and (min-width:860px) {
#sub_visual{padding:140px 0 170px}

}

@media all and (min-width:1200px) {
body.subWrap #header{border-bottom:0px}
#sub_visual{margin-top:0; overflow:hidden}
#sub_visual .tit_h2{font-size:3em; }



#sub_visual{padding:180px 0px 185px; }
#sub_visual .pdinner{ }
#sub_visual .pdinner:after{content:''; clear:both; display:block;}

.subwrap{margin: 0 auto;  position:relative;  padding:90px 20px;}
.subwrap:after{content:''; display:block; clear:both;}

.conh3{font-size:2.2em;}
#sub_visual p.visu_tit{font-size:1.6em; }

}



/*서브비주효과*/

.slide_animation {
  position: relative;
  padding: 0.1rem 0.3rem;
  overflow: hidden;
}
.slide_animation:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 10px;
  background:#f39800; background:linear-gradient(120deg, #f39800 60% , #ef7d00 100%);
  animation: slide 1.5s 1.2s forwards;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  border-radius:20px;
}

@keyframes slide {
  0% {
    width: 0;
  }
  60% {
    width: 100%; right:-10px;
  }
  100% {
    width: 10px; left:auto; right:-10px
  }
}





.subwrap{background:#ffffff; position:relative; z-index:0;  margin:0 auto; padding:60px 0 0; min-height:400px}
.subwrap .pdinner{max-width:1400px;}
.sub_con{margin:0 auto; position:relative;  min-height:200px;}
.sub_con:after{content:''; clear:both; display:block}

.sub_con .con{padding:0 3% 30px}

/*.conh3:after{content:''; display:block; width:40px; height:1px; background:#323232; position:absolute; bottom:0; left:0; right:0; margin:auto}*/


.path{display:none;}
.path li{font-size:0.9em; display:inline-block; vertical-align:top; color:#ffffff; opacity:0.7}
.path li:before{content:'\f105'; font-family:'FontAwesome'; display:inline-block; padding:0px 10px}
.path li:first-child:before{display:none;}


.sub_title{padding:20px 3%; border-bottom:1px solid #e6e6e6; margin-bottom:30px; position:relative; overflow:hidden}
.sub_title ul{ position:absolute; height:30px; right:3%; top:0; bottom:0; margin:auto; }
.sub_title ul li{text-align:center; background:#15126e; border-radius:500px; width:30px; height:30px;  padding:8px;}
.sub_title ul li img{}
.sub_title h3{font-weight:500; font-size:1.4em; color:#000000}

@media all and (min-width:768px) {
.subwrap{padding:80px 0 0}
}

@media all and (min-width:1200px) {
.subwrap{padding:100px 0 0}
.sub_title ul{right:20px}

}

/*컬러패스*/
#sub_drop{width:100%;  }
/*#sub_drop .inner{background:#767ba5;}*/

#sub_drop .inner:after{content:''; display:block; clear:both}
#sub_drop .dropdown{width:calc(100% - 50px); float:left; position:relative;}
#sub_drop .dropdown.home{width:50px; border:0; display:block;}
#sub_drop .dropdown.home a{display:block; line-height:50px; padding:0 10px;   background:#001c43; text-align:center}

#sub_drop .home img{display:inline-block; vertical-align:middle; max-width:10px}
#sub_drop .dropbtn {width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:50px; padding:0 25px 0 20px; cursor:pointer; color:#808080;  font-weight:600 /* background:rgba(0,0,0,0.3)*/}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:10px; color:#808080; font-size:14px; top:0; bottom:0; margin:auto;  transition:0.3s; }
#sub_drop .dropdown.active a.dropbtn:after{ -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg)}

  #sub_drop .dropdown.active a.dropbtn{color:#121212; }

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 20px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #e6e6e6;  color:#323232; text-align:left; left:0; border-top:0px; box-sizing:content-box; left:-1px; width:100%; padding:10px 0px}
#sub_drop .dropmenu a{display:block; line-height:30px;}
#sub_drop .dropmenu a:hover {color:#0dbfd3; font-weight:500;}
#sub_drop .dropdown > .dropmenu li{position:relative;}
#sub_drop .dropdown > .dropmenu li a{display: block;}
#sub_drop .dropdown > .dropmenu li a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;}

#sub_drop .dropdown.active > .dropmenu {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:860px) {
#sub_drop{margin-top:-55px; border-bottom:1px solid #e6e6e6;}
#sub_drop{font-size:1em;  position:relative;  }
#sub_drop .inner{background:#ffffff; border:0px; max-width:1400px;}
#sub_drop .dropmenu{border:0px; background:none;  text-align:center; left:0; display:block !important; padding:0; font-size:0}
#sub_drop .dropdown.home{width:60px}
#sub_drop .dropdown{display:block; width:calc(100% - 60px); float:left; }
#sub_drop .dropdown.active a.dropbtn,
#sub_drop .dropbtn.has-focus{background:#767ba5; border:0px;}

#sub_drop .dropdown > .dropmenu li a.current{background:#ffffff; color:#323232; font-weight:600;}
#sub_drop .dropdown > .dropmenu li a:before{content:''; position:absolute; bottom:0px; left:50%; width:0; height:3px;  background:#0dbfd3; transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)}
#sub_drop .dropdown > .dropmenu li:hover a:before,
#sub_drop .dropdown > .dropmenu li a.current:before{width:60px; margin-left:-30px;}

#sub_drop .dropdown.home a{line-height:55px; width:100%;  padding:0 } 
#sub_drop .dropbtn {line-height:50px; display:none}


#sub_drop .dropmenu a{color:#505050; font-weight:500}
#sub_drop .dropmenu a:hover{color:#000000;}
#sub_drop .dropdown > .dropmenu li{display:inline-block ;position:relative; padding:0 ;width:25%; max-width:140px; }
#sub_drop .dropdown > .dropmenu li:before{content:''; display:block; width:1px; height:30px; background:#ffffff; opacity:0.2; position:absolute; left:0; top:0; bottom:0; margin:auto;}
#sub_drop .dropdown > .dropmenu li:first-child:before{display:none}

#sub_drop .dropdown > .dropmenu li a{line-height:55px; font-size:16px; }
#sub_drop .dropdown > .dropmenu.list06 li{width:16.666%}
#sub_drop .dropdown > .dropmenu.list07 li{width:14.28%}
#sub_drop .dropdown > .dropmenu.list05 li{width:20%}
#sub_drop .dropdown > .dropmenu.list03 li{width:33.33%}
#sub_drop .dropdown > .dropmenu li a{display:block;  color:#808080}


}

@media all and (min-width:1200px) {
#sub_drop{   margin-top:-70px}
#sub_drop .dropdown > .dropmenu li a{font-size:17px;}
#sub_drop .dropdown.home a,
#sub_drop .dropdown > .dropmenu li a,
#sub_drop .dropbtn {line-height:70px;  transition:0.3s;}
#sub_drop .dropdown.home{width:70px;}
#sub_drop .dropdown{width:calc(100% - 70px);}

#sub_drop .dropdown > .dropmenu li:hover a{transition:0.3s; font-weight:700; }


}

@media all and (min-width:1400px) {
}





/*텍스트효과*/

.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:100ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:300ms;animation-timing-fonction:ease-out;}
.motion03{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:500ms;animation-timing-fonction:ease-out;}


/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
      0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Standard syntax */
@keyframes sub_tt {
     0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
       0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}

}
/* Standard syntax */
@keyframes sub_tt {
     0%   {opacity: 0; transform: translateY(30px);}
    100% {transform: translateY(0px);opacity: 1;}
}

.anim01 {animation-name: anim01; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim01 {
	0% {opacity: 0; transform: translateY(-1000px);} 
    60% {opacity: 1; transform: translateY(30px);} 
    80% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 
.anim02 {animation-name: anim02; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim02 {
	0% {opacity: 0; transform: translateY(1000px);} 
    60% {opacity: 1; transform: translateY(-30px);} 
    80% {transform: translateY(10px);} 
    100% {transform: translateY(0); } 
} 
.anim03 {animation-name: anim01; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim01 {
	0% {opacity: 0; transform: translateY(-100px);} 
    40% {opacity: 1; transform: translateY(20px);} 
    60% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 
.anim04 {animation-name: anim02; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim02 {
	0% {opacity: 0; transform: translateY(100px);} 
    40% {opacity: 1; transform: translateY(-20px);} 
    60% {transform: translateY(10px);} 
    100% {transform: translateY(0); } 
} 
.anim05 {animation-name: anim05; animation-duration: 1s; animation-fill-mode: both;}
@keyframes anim05 {
	0% {transform: translateY(0);} 
    50% {transform: translateY(-10px);} 
    100% {transform: translateY(0); } 
} 


@media all and (max-width:1200px) {
#layerPopup0{top:100px !Important; left:0 !Important;}
#layerPopup1{top:435px !Important; left:0 !Important;}
#layerPopup2{top:770px !Important; left:0 !Important;}
#layerPopup3{top:1105px !Important; left:0 !Important;}
#layerPopup4{top:1440px !Important; left:0 !Important;}
#layerPopup5{top:1775px !Important; left:0 !Important;}
}