
.slideshow_container {
    clear: both;
    width: 100%;
    float: left;
    max-height: 603px;
    position: relative;
}
/* 170619 */
#visu_wrap {
	position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
	overflow: hidden; /* to bound the empty top space created by inner element's top margin */
	width: 100%;
	min-height: 100%;
	background-color: #999;
}
.visu-inner-content {
	position: relative; /* if position is not set, the script will set it to 'relative'. */
	z-index: 2; /* if z-index is not set, the script will set it to '2'. */
	margin: 180px auto;
	padding: 40px;
	max-width: 600px;
	color: #fff;
	text-align: center;
	font-size: 1.5em;
}
.zs-enabled .zs-slideshow .zs-bullets {display:none;}
/*ee*/

#main_visual_slide .bx-wrapper .mimg_01 {
	background: url(images/main/main_visual1.png) center 0 no-repeat;
	background-size: cover;
}
#main_visual_slide .bx-wrapper .mimg_02{
	background: url(images/main/main_visual2.png) center 0 no-repeat;
	background-size: cover;
}
#main_visual_slide .bx-wrapper .mimg_03{
	background: url(images/main/main_visual3.png) center 0 no-repeat;
	background-size: cover;
}
#main_visual_slide  li .slide_content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
#main_visual_slide  li .slide_content  .wrap{
	height: 100%;
    position: relative;
}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content h2{
	font-size:0;
	position: absolute;
	width: 33.584%;
	top:14%;
	left:3.5%;
	min-width:148px;
}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content h2 img{
	width:100%; height:auto;
}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content h3{
	color:#343434; font-weight:400;
	position: absolute;
	top:42%;
	left:3.5%;
	font-size: 18px;
	padding-right: 3.5%;

}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content .link_btn_wrap{
	 position:absolute; top:57%; left:3.5%; transition:all 0.3s
}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content a{
	background-color:#dd6400; color:#fff; border-radius:25px; height:50px; line-height:50px; display:inline-block; border:1px solid #cc5c00; font-size:17px;
	padding:0 70px 0 24px;  position:relative;
	transition:all 0.3s
}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content a:hover{background-color:initial; border-color:#fff; padding-right:80px;}
#main_visual_slide .bx-wrapper .mimg_01 .slide_content a:after{
	content:""; display:block; width:31px; height:7px;
	position:absolute; right:26px; top:20px; background:url(images/main/v_arrow_right.png) center center no-repeat;
}
#main_visual_slide .bx-wrapper .mimg_02 .slide_content h2{
	font-size:0;
	position: absolute;
	width: 56%;
	top:14%;
	left:3.5%;
	min-width:148px;
}
#main_visual_slide .bx-wrapper .mimg_02 .slide_content h2 img{
	width:100%; height:auto;
}
#main_visual_slide .bx-wrapper .mimg_02 .slide_content h3{
	color:#fff; font-weight:400;
	position: absolute;
	top:42%;
	left:3.5%;
	font-size: 18px;
	padding-right: 3.5%;
}


#main_visual_slide .bx-wrapper .mimg_03 .slide_content h2{
	font-size:0;
	position: absolute;
	width: 56%;
	top:14%;
	left:3.5%;
	min-width:148px;
}
#main_visual_slide .bx-wrapper .mimg_03 .slide_content h2 img{
	width:100%; height:auto;
}
#main_visual_slide .bx-wrapper .mimg_03 .slide_content h3{
	color:#fff; font-weight:400;
	position: absolute;
	top:42%;
	left:3.5%;
	font-size: 18px;
	padding-right: 3.5%;
}



#bx-pager {
    position: absolute;
    bottom: 100px;
    left: 280px;
}
div#bx-pager a {
    color: #fff;
    /* font-size: 15px; */
    padding: 15px 40px;
    background: rgba(0, 0, 0, 0.66);
    font-weight: 100;
}
div#bx-pager .active {
    background: rgba(0, 126, 174, 0.87);
    padding: 15px 24px;
}
div#bx-pager a span {
    width: 17px;
    height: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    display: none;
}
div#bx-pager .active span {
    display: inline-block;
    /* padding: 15px 24px; */
    margin-right: 15px;
}
#slides .slides-pagination {
	position: absolute;
	bottom: 15px;
	z-index: 999;
	width: 100%;
	left: 0;
	text-align: center;
}
#main_visual_slide .bx-wrapper img {
    max-width: 100%;
    display: block;
    height: 603px;
}
#main_visual_slide .bxslider li > div > img {
    /* width: auto; */
    height: auto !important;
}
#slides .slides-pagination a {
	display:inline-block;
	width:12px;
	height:12px;
	text-indent: -100000px;
	margin:0 3px;
	background: url(image/main/navi_off.png) center 0 no-repeat;
}
#slides .slides-pagination a.current {
	display:inline-block;
	width:39px;
	height:12px;
	background: url(image/main/navi_on.png) center 0 no-repeat;
}

#slides {
	max-height:603px;
}

.slides-container > div { width:100%; float:left;}
.slides-container img {
    max-width: 100%;
    display: block;
    /* max-height: 603px; */
    height: 603px;
}
#slides .cycle-pager {
	position: absolute;
	bottom: 10px;
	left: 48%;
	z-index: 999;
	display:block;
}

#slides .cycle-pager span {
	display: inline-block;
	margin: 0 6px;
	text-indent: -111111px;
	width: 12px;
	height: 12px;
	background: url('image/main/navi_off.png') 0 0 no-repeat;
}
#slides .cycle-pager span.cycle-pager-active {
	width: 39px;
	height: 12px;
	background: url('image/main/navi_on.png') 0 0 no-repeat;
}
#main_visual_slide .bx-controls-direction {
    display: none;
}

/*Slideshow*/
.cycle-slideshow img { width: 100%; display: none; }
.cycle-slideshow img:first-child { display: block; }





/************************* Main **********************************/
.js-reveal {
  opacity: 1;
  transition: opacity .7s ease-in, margin-top .7s ease-out;
}

.js-reveal--hidden {
  opacity: 0;
  margin-top: 3em;
}



.hamburger {
    background: #c02126;
    display: inline-block;
    padding: 4px 12px 26px 12px;
}
.fp-viewing-anchor1 .hamburger {
	background:none;
}

#section0 {
	text-align: center;
	position: relative;
}

.sec_etc {
    position: absolute;
	
    top: 0;
    left: 0;
	padding:2%;
    width: 100%;
    height: 100%;
    z-index: 10;
	text-align:center;
	color:#fff;
	font-family:'Exo';
	font-weight:100;
}
.w900 {height:900px; position:relative;  }


.visual a {
    display: block;
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    padding: 17px 0;
    width: 177px;
    text-align: center;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.5);
    background: rgb(192, 33, 38);
    font-size: 15px;
}

.visual { position:absolute;width:100%; left:0; right:0;  }
.vs_item { position:absolute; top:50%; transform:translateY(-50%); text-align:Center; width:100%; color:#FFFFFD; line-height:20px;}
.vs_item h1 {margin-bottom:15px; color:#FFFFFD; font-size:55px; letter-spacing:-0.6px; line-height:1.3;}
.vs_item h1 span { color:#23C3FF; }
.h2_txt {margin-top:30px; font-size:25px;}
.s_txt {margin-top:30px}

.sub1 .vs_item h1, .sub2 .vs_item h1, .sub3 .vs_item h1, .sub4 .vs_item h1 {font-size:80px;}

/*#area_visual h2 {margin-bottom:15px; color:#FFFFFD; font-size:55px; letter-spacing:-0.6px; line-height:1.3;}
#area_visual h2 span {color:#23C3FF;}*/





.step.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.step.forwards{
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.fadeIn {
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes fadeIn {
        0% {
            transform: scale(0);
            opacity: 0.0;       
        }

        100% {
            transform: scale(1);
            opacity: 1; 
        }       
    }

    @-webkit-keyframes fadeIn {
        50% {
             transform: scale(0);
            opacity: 0.0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }



/*瀛®봇鴉면빣?①뵽*/
.flaxLine{
    animation-name: flexline;
    -webkit-animation-name: flexline;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

}
@keyframes flexline{
    from {width:0;}
    to {width:100%;}
}

@-webkit-keyframes flexline{
    from {width:0;}
    to {width:100%;}
}



    .slideLeft{
        animation-name: slideLeft;
        -webkit-animation-name: slideLeft;  

        animation-duration: 2s;
        -webkit-animation-duration: 2s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;    
		font-family:'NanumSquare';

        
    }


    @keyframes slideLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
                    transform: translate3d(-100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
                    transform: translate3d(-100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideRight{
        animation-name: slideRight;
        -webkit-animation-name: slideRight;  

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideUp {
        animation-name: slideUp;
        -webkit-animation-name: slideUp;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
                    transform: translate3d(0, -100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .slideDown {
        animation-name: slideDown;
        -webkit-animation-name: slideDown;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }

    @-webkit-keyframes slideDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
                    transform: none;
          }
    }
    .rotateIn {
        animation-name: rotateIn;
        -webkit-animation-name: rotateIn;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }

    @keyframes rotateIn {
        0% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, -200deg);
                    transform: rotate3d(0, 0, 1, -200deg);
            opacity: 0;
          }

          100% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: none;
                    transform: none;
            opacity: 1;
          }
    }

    @-webkit-keyframes rotateIn {
        0% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, -200deg);
                    transform: rotate3d(0, 0, 1, -200deg);
            opacity: 0;
          }

          100% {
            -webkit-transform-origin: center;
                    transform-origin: center;
            -webkit-transform: none;
                    transform: none;
            opacity: 1;
          }
    }
    .zoomIn {
        animation-name: zoomIn;
        -webkit-animation-name: zoomIn;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        
    }
    @-webkit-keyframes zoomIn {
      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
      }

      10% {
        opacity: 1;
      }
    }

    @keyframes zoomIn {
      0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
                transform: scale3d(.3, .3, .3);
      }

      50% {
        opacity: 1;
      }
    }

    .rollInLeft {
      animation-name: rollInLeft;
      -webkit-animation-name: rollInLeft;  

      animation-duration: 1s;   
      -webkit-animation-duration: 1s;
        
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;    
    }
    @-webkit-keyframes rollInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes rollInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }
    .rollInRight {
      animation-name: rollInRight;
      -webkit-animation-name: rollInRight;  

      animation-duration: 1s;   
      -webkit-animation-duration: 1s;
        
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;    
    }
    @-webkit-keyframes rollInRight {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
                transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes rollInRight {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
                transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

@media screen and (max-width : 1200px) {

.vs_item h1 {font-size:50px; line-height:1.4;}


}


@media screen and (max-width : 640px) {

.vs_item h1 {font-size:28px; line-height:1.4;}
/*.vs_item h1 span {font-size:20px;  font-weight:600}*/
.h2_txt {margin-top:20px; font-size:14px;}
.s_txt {display:none;}
.w900 {height:400px;}

.sub1 .vs_item h1, .sub2 .vs_item h1, .sub3 .vs_item h1, .sub4 .vs_item h1 {font-size:7vw;}

}