﻿@charset "utf-8";
#wrap.main .dimmed{transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;transition-delay: 0.2s;-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s; background: #fff;}
.dimmed.fout{opacity: 0;visibility: hidden;}
#contents{overflow: hidden;position: relative;}
#contents .section .bg span.line1{left: 0%;}
#contents .section .bg span.line1{left: 180px;}
#contents .section .bg span.line2{left: 360px;}
#contents .section .bg span.line3{left: 540px;}
#contents .section .bg span.line4{left: 720px;}
#contents .section .bg span.line5{left: 900px;}
#contents .section .bg span.line7{right: 0; }
#contents .btn_orange{background: url('../images/btn_bg.png') no-repeat center top;width: 202px;height: 46px;line-height: 46px;margin: 0 auto;display: block;overflow: hidden;color: #fff;text-align: center;font-size: 0;}
#contents .btn_orange .label{display: inline-block;vertical-align: middle;font-size: 16px;padding: 0 10px;line-height: 17px;  padding-top: 1px;}
#contents .btn_orange.eng{width: 160px;border-radius: 100px;}
#contents .btn_orange.eng .label{font-size: 13px;line-height: 13px;font-weight: bold;letter-spacing: 1.1px;}
#contents .btn_orange .ico{display: inline-block;vertical-align: middle;height: 12px;overflow: hidden;opacity: 0;margin-left: -7px;width:7px;text-align: right;
    -webkit-transition: all 0.2s; -moz-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;
}
#contents .btn_orange .ico img{max-width: none; }
#contents .btn_orange:hover .ico{opacity: 1;width:15px;margin-left: 0;text-align: right;}
#contents .btn_orange:hover .ico img{left: 0;}
#contents .slide_section{position: relative;min-height: 900px;;}
#contents .slide_section .bg{opacity: 0;z-index:0;position: absolute;top:0;right:0;bottom: 0;left:0;
    transform:scale(1.4) rotate(0.1deg);-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);
    -webkit-transition:opacity 2s;-moz-transition:opacity 2s;-o-transition:opacity 2s;transition:opacity 2s;
}
#contents .slide_section .bg.active {opacity: 1;z-index: 2;}
#contents .slide_section .bg.motion{
    transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);
    -webkit-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    -moz-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    -o-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
    transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;
}
#contents .slide_section .bg video{width: 100%;position: absolute;display:none}
#contents .slide_section .bg img{width: 100%;max-width: none;}
#contents .slide_section .bg1{}
#contents .slide_section .bg1 img{position: absolute;}
#contents .slide_section .bg2{background:#000 url('../images/slide_bg22.jpg') no-repeat center;background-size: cover}
#contents .slide_section .bg3{background:#000 url('../images/slide_bg3.jpg') no-repeat center;background-size: cover}
#contents .slide_section .timer_circle{background: url('../images/ico_scroll.png') no-repeat center;position: absolute;bottom:290px;left:50%;margin-left:-25px;z-index: 2;font-size: 0;}
#contents .slide_section .title_wrap{position: absolute;top:auto;left:0;right:0;margin-top:0px; z-index: 2;text-align: center;color: #fff; bottom: 640px;}

@media(max-width: 1920px){
    #contents .slide_section .title_wrap{ bottom: 31vw;}
}

#contents .slide_section .title_wrap .text{position: relative;height: 300px;}
#contents .slide_section .title_wrap .text li{position: absolute;top:0;left:0;right:0;}
#contents .slide_section .title_wrap .text li h2{opacity: 0;visibility: hidden;font-size: 70px;line-height: 78px;font-weight: bold;letter-spacing:2px;padding: 0 0 50px;-webkit-transform: translateX(-100px);-moz-transform: translateX(-100px);-ms-transform: translateX(-100px);-o-transform: translateX(-100px);transform: translateX(-100px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s}
#contents .slide_section .title_wrap .text li p{opacity: 0;visibility: hidden;-webkit-transform: translateX(100px);-moz-transform: translateX(100px);-ms-transform: translateX(100px);-o-transform: translateX(100px);transform: translateX(100px);-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s; z-index: 99;}
#contents .slide_section .carousel{  position: absolute;bottom:50%;right:40px;font-size: 0;letter-spacing: 0;word-spacing: 0;opacity: 0;visibility: hidden;}
#contents .slide_section .carousel li{display: block; border-radius:50px;width: 10px;height: 10px;background: #fff;margin: 10px 0px;opacity: .4;}
#contents .slide_section .carousel li.active{opacity: 1}
#contents .slide_section .title_wrap .text li.active h2{opacity: 1;visibility: visible;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px);}
#contents .slide_section .title_wrap .text li.active p{opacity: 1;visibility: visible;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px);}
#contents .slide_section .title_wrap .text li.leave h2{opacity: 0;visibility: hidden;-webkit-transform: translateX(100px);-moz-transform: translateX(100px);-ms-transform: translateX(100px);-o-transform: translateX(100px);transform: translateX(100px);}
#contents .slide_section .title_wrap .text li.leave p{opacity: 0;visibility: hidden;-webkit-transform: translateX(-100px);-moz-transform: translateX(-100px);-ms-transform: translateX(-100px);-o-transform: translateX(-100px);transform: translateX(-100px);}

#contents .slide_section .btn_view_more{opacity: 0;visibility: hidden;}
#contents .slide_section .btn_view_more span{display: inline-block}

#contents .section_360{position: relative;overflow: hidden;height: 730px;  /*background:#fff url(../images/section360_bg.jpg) no-repeat center top;*/}
#contents .section_360 .inner{position: absolute;left: 0;width: 100%;/*left:30px;right:30px;*/top:0;bottom:0; z-index: 2; text-align: center;color: #fff;overflow: hidden;  height: 730px;}
#contents .section_360 .inner .bg{position: absolute;top: 0;bottom: 0;  left: 50%; margin-left: -1000px;background:#3067a6  url(../images/section360_bg.jpg) no-repeat center;background-size: 2000px 730px;width: 0;overflow: hidden}
#contents .section_360 .inner .bg .circle{position: absolute;top:0;left:0;right:0;bottom:0;width: 2000px;}
#contents .section_360 .inner .bg .circle li{position: absolute;top:50%;left:50%;width: 786px; height: 786px;  margin: -393px 0 0 -393px;}
#contents .section_360 .inner .bg .circle li.move{ animation-duration: 2.2s;
    animation-name: circleMotion;
    animation-iteration-count: infinite;
    animation-direction: normal;}
#contents .section_360 .inner .bg .circle li.move:first-child{animation-delay: 1.1s;}
#contents .section_360 .inner .bg .img{position: absolute;top: 0;right:0;bottom: 0;left:0;width: 2000px;}
#contents .section_360 .inner .bg .text{width: 2000px;padding:120px 0 0;height: 730px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;/*display: flex;align-items: center;justify-content: center;line-height: 1.6;*/}
#contents .section_360 .inner .bg .text .icon{line-height: 0;}
#contents .section_360 .inner .bg .text .yw{color: #ffffff;font-size: 18px; font-family: arial;display: block;margin: 25px 0 20px;}
#contents .section_360 .inner .bg .text h3{color: #ffffff;font-size: 48px;}
#contents .section_360 .inner .bg .text p{padding: 30px 0 40px;line-height: 30px;font-size: 16px;}

@keyframes circleMotion {
    0% {
        transform: scale3d(1, 1, 1) rotate(0.1deg); 
        -webkit-transform: scale3d(1, 1, 1); 
        -moz-transform: scale3d(1, 1, 1); 
        -o-transform: scale3d(1, 1, 1);
    }
    21% {
        opacity: 1;
        visibility: visible;
    }
    95%{
        transform: scale3d(1.14, 1.14, 1.14) rotate(0.1deg); 
        -webkit-transform: scale3d(1.14, 1.14, 1.14); 
        -moz-transform: scale3d(1.14, 1.14, 1.14); 
        -o-transform: scale3d(1.14, 1.14, 1.14);
    }

    100% {
        opacity: 0;visibility: hidden;
        transform: scale3d(1, 1, 1) rotate(0.1deg); 
        -webkit-transform: scale3d(1, 1, 1); 
        -moz-transform: scale3d(1, 1, 1); 
        -o-transform: scale3d(1, 1, 1);
    }
}
