/******************************
  mainContents
******************************/
#main,#mainContents {position: relative;}

/******************************
  title style
******************************/
.tit_s1{color: #222; position: relative; z-index: 1; margin: 0 90px;}
.tit_s2, .tit_s3{color: #222; }
.tit_s1.white {color: #fff;}
.tit_s1 span {color: #013c1e;font-size: 1.125rem;font-weight: 600;}
.tit_s1 h3 {font-size: 4.6rem; font-weight: 900;margin: 0 0 15px 0;font-style: italic;}
.tit_s2 h3 {font-size: 3rem; font-weight: 900;margin: 0 0 10px 0;font-style: italic;}
.tit_s3 h3 {font-size: 2.6rem; font-weight: 900;margin: 0 0 10px 0;font-style: italic;}
.tit_s1 p {font-size: 1.6rem; line-height: 1.412em;}
.tit_s2 p {font-size: 1.4rem; line-height: 1.412em;}
.tit_s3 p {font-size: 1.4rem; line-height: 1.412em;}


/******************************
  button
******************************/
#mainContents #mainVisual{position:relative;}
#mainContents #mainVisual button.slick-arrow{z-index: 998;position:absolute;top:50%;margin-left: -18px;margin-top: 100px;font-family:"Overpass";font-size:1rem;color:#fff;-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}
#mainContents #mainVisual button.slick-prev{left: 40px;top: 50%;margin-top: 75px;}
#mainContents #mainVisual button.slick-prev:before{content:"\e93b";font-family : xeicon;padding-right: 25px;}
#mainContents #mainVisual button.slick-prev:after{content:"";width:6px;height:6px;background:#ccc;position:absolute;top: 6px;right: -33px;}
#mainContents #mainVisual button.slick-next{left: 40px;top: 50%;margin-top: -65px;}
#mainContents #mainVisual button.slick-next:after{content:"\e93e";font-family : xeicon;padding-left: 25px;}

#mainContents #application button.slick-arrow{position:absolute;font-family:"Overpass";z-index:999;font-size:1rem;}
#mainContents #application button.slick-prev {right:100px;top:-30px;}
#mainContents #application button.slick-prev:before{content:"\e93b";font-family : xeicon;padding-right:10px;font-size: 12px;}
#mainContents #application button.slick-prev:after{content:"";width:6px;height:6px;background:#ccc;position:absolute;top:3px;right: -22px;}
#mainContents #application button.slick-next{right:0;top: -30px;}
#mainContents #application button.slick-next:after{content:"\e93e";font-family : xeicon;padding-left:10px;font-size: 12px;}

#mainContents #news button.slick-arrow{position:absolute;font-family:"Overpass";z-index:999;font-size:1rem;}
#mainContents #news button.slick-prev {right:100px;top:-30px;}
#mainContents #news button.slick-prev:before{content:"\e93b";font-family : xeicon;padding-right:10px;font-size: 12px;}
#mainContents #news button.slick-prev:after{content:"";width:6px;height:6px;background:#ccc;position:absolute;top:3px;right: -22px;}
#mainContents #news button.slick-next{right:0;top: -30px;}
#mainContents #news button.slick-next:after{content:"\e93e";font-family : xeicon;padding-left:10px;font-size: 12px;}

.moreBtn{border:1px solid #fff;}
.inquiry .moreBtn{position:absolute;right:40px;}
.moreBtn a{color:#fff;text-align:center;display:block;width:190px;height:64px;line-height:64px;font-size:1rem;font-weight:600;}
.txtBox .moreBtn{width:220px;position: relative;right: 0;z-index: 1000;float: right;}
.txtBox .moreBtn a{color:#fff;text-align:center;display:block;width:220px;height:70px;line-height:70px;}
.moreBtn a:after{content:"\e913";font-family : xeicon;padding-left:20px;}
.moreBtn a:hover{background:#fff;color:#222;-webkit-transition: all 0.5s;transition: all 0.5s;}


/******************************
  mainVisual
******************************/
#mainVisual {position: relative;}
#mainVisual .visu article a {display: block;width: 100%;height: 100%;}
#mainVisual .visu article .bg {height: 100%;background-size: cover;
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
-webkit-transition: -webkit-transform 5s;
transition: -webkit-transform 5s;
transition: transform 5s;
transition: transform 5s, -webkit-transform 5s;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#mainVisual .visu .active-item .bg {
-webkit-transform: scale(1);
transform: scale(1);
}

#mainVisual .barW{background: #ccc;position:absolute;bottom:0;left:0;height:8px;background:rgba(255,255,255,0.3);width:100%;}
#mainVisual .pro-bar{width:0;background: #013c1e;position:absolute;bottom:0;left:0;height:8px;}
#mainVisual .pro-ani{animation: proBar 6s 1;  width:100%;}
@keyframes proBar{
0%{width:0;}
100%{width:100%;}
}


#mainVisual .txtBox {z-index: 10;position: absolute;left: 0;top: 50%;width: 100%;color: #fff;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#mainVisual .txtBox > div {width: 100%;max-width: 1550px;margin: 0 auto;position: relative;}
#mainVisual .txtBox h2, #mainVisual .txtBox p {
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
opacity: 0;
}

#mainVisual .txtBox h2 {text-transform: uppercase;font-size: 5.938rem;/* font-weight: 700; */line-height: 1.2;}
#mainVisual .txtBox p {font-size: 26px;line-height: 1.333em;margin-top: 24px;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}

#mainVisual .txtBox.on h2, #mainVisual .txtBox.on p {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

.vertiCenter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}


/******************************
  sideMenu
******************************/
#mainBtn {position: fixed;right: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 998;display: none;}

#mainBtn li {padding-right: 40px;position: relative;margin: 15px 0;cursor: pointer;}
#mainBtn li a {display: block;width: 15px;height: 15px;position: relative;/* font-size:0; */-webkit-transition: all 0.5s;transition: all 0.5s;}
#mainBtn li a:before { content: ""; display: block; width: 7px; height: 7px; background: #555;position: absolute; top: 3px; left: 4px;}
#mainBtn li a:after {content: "";display: block;width:15px;height: 15px;box-sizing:border-box;position: absolute;top: 0;left: -2px;-webkit-transform: scale(1.2);/* transform: scale(1.2); */}
#mainBtn li.on a:before { display: none; }
#mainBtn li.on a:after {background: transparent;}
#mainBtn.on li a:before { background: #555; }
#mainBtn.on li.on a:after { background: transparent;}

#mainBtn li.on a:after{font-family: 'xeicon';font-size: 19px;}
#mainBtn li.on:first-child a:after {content: "\e900";color: #fff;}
#mainBtn li.on:nth-child(2) a:after {content: "\eb43";color: #013c1e;}
#mainBtn li.on:nth-child(3) a:after {content: "\e986";color: #013c1e;}
#mainBtn li.on:nth-child(4) a:after {content: "\ea14";color: #013c1e;}

#mainContents.zoomOut #video > div {/*padding-top: 100px;*/}
#mainContents.zoomOut #video .pdCont .slideBox {}
#mainContents > section, #mainContents > section > div {/* position: relative; */}
#mainContents .bg {/* height: 495px; */padding-top: 150px;position: relative;z-index: 1;}

/******************************
  video
******************************/
#mainContents  .videoW{margin-top:40px;overflow:auto;}
#mainContents #video {background: #fff;position: relative;overflow:hidden;}
#mainContents #video .list {position: relative;z-index: 1000;}
#mainContents #video .videoPlayer {width: 100%;height: 53vh;overflow:hidden;z-index: 1000;background:#013c1e;}
#mainContents #video .videoPlayer .current {position:relative;padding-bottom: 62.25%;/* padding-top:30px; */height:0;overflow:hidden;}
#mainContents #video .videoPlayer .current iframe,
#mainContents #video .videoPlayer .current object,
#mainContents #video .videoPlayer .current embed {position:absolute; top:0; left:0; width:100%; height:100%;}
#mainContents #video .txtBox {text-align: right;position: relative;margin: 85px 50px;overflow: hidden;}
#mainContents #video .txtBox .moreBtn a{width:220px;height:70px;line-height:70px;}
#mainContents #video {background: #fff;}
#mainContents #video .bg {/* height: 495px; padding-top: 185px;*/position: relative;z-index: 1;}
#mainContents #video #player { display:none; width:100%; height:100%;max-width: 1110px;margin: 0 auto;box-sizing: border-box;position: relative;left: -25px;}
#mainContents #video .video .video-container {position: relative;width: 100%;height: auto;padding-top: 50%;}
#mainContents #video .video iframe {z-index: 1;top: 0;left: 0;position: absolute;width: 100%;height: 100%;}

#mainContents #video .tab {overflow: hidden;position: absolute;top: 70px;/* text-align: right; */right: 36px;/* width: 100%; *//* margin-left: 41px; */z-index: 999;}
#mainContents #video .tab button {background-color: inherit;float: left;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 24px;color: #fff;opacity: 0.2;}
#mainContents #video .tab button:hover {}
#mainContents #video .tab button.active {/* background-color: #ccc; */opacity: 1;}
#mainContents #video .tabcontent {display: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#mainContents #video .videoPlayer .vd{}
#mainContents #video #play-button img{/*width:100%;height: 100%;*/vertical-align:middle;position: relative;top: 50%;margin-top: -51px;}
#mainContents #video .tabWrap{width: 40%;background: url(/img/main/bg_mVideo.jpg) no-repeat left top;color: #fff;background-size: cover;position: relative;justify-content: revert;}
#mainContents #video .tabWrap .txtBox dl dt{font-size:58px;line-height: 1;margin-top: 70px;}
#mainContents #video .tabWrap .txtBox dl dd{font-size:1.125rem;margin: 32px 0;line-height: 1.8;opacity: 0.4;font-weight: 300;}
#play-button {background: url(/img/main/mvideo_thum.jpg) no-repeat left top;background-size: cover;cursor:pointer;text-align:center;}
#play-button img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
#play-button:hover img {
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);   
    -o-transform:scale(1.3);
    transform:scale(1.3);
}
.videoWrap{background:#013c1e;}
.videoWrap > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: start;
  color: #fff;
  height: auto;
}

.videoWrap > div .vd {width: 58.5%;position: relative;overflow: hidden;padding-top: 32.82%;}
.videoWrap > div .vd .thum,
.videoWrap > div .vd #playVideo,
.videoWrap > div .vd iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.videoWrap > div .vd .thum {z-index: 10;}
.videoWrap > div .tabWrap {/* padding: 0 44px; */padding-left: 0;}

@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}


/******************************
  application
******************************/
#mainContents #application{position:relative;}
#mainContents #application:before {content: "";width: 63%;height: 500px;background: #f8f8f8;display: block;position: absolute;top: 0;z-index: 1;}
#mainContents #application .slideBtn {top: 130px;}
#mainContents #application .bg {/* z-index: 1000; */}
#mainContents #application .slideBox {z-index: 1;}
#mainContents #application .slider {margin-top: 0;z-index: 10;top: 0;}
#mainContents #application .slider .slick-slide {overflow: hidden;}
#mainContents #application .slider img {width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#mainContents #application .slider .slick-list {margin-top: 0;padding: 0 !important;}
#mainContents #application .slider .slick-slide {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
/* margin: 0 13px; */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

#mainContents #application .slider .slick-slide.ani {margin-top: 0;}
#mainContents #application .slider .item {position: relative;}
#mainContents #application .slider .item a {overflow: hidden;display: block;width: 100%;height: 100%;position: relative;z-index: 10;}
#mainContents #application .slider .item a:after {content: "";width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;}
#mainContents #application .slider .item a > span{position:absolute;top:20px;right:20px;width:60px;height:60px;background:rgba(255,255,255,0.4);color:#013c1e;z-index:999;-webkit-transition: all 0.5s;
transition: all 0.5s;text-align:center;font-size:20px;display:block;}
#mainContents #application .slider .item a > span:after{content:"\e913";font-family : xeicon;color:#013c1e;position:absolute;top:50%;left:50%;margin-left: -9px;margin-top: -11px;}
#mainContents #application .slider .item:hover a > span{background:#000;color:#fff;width:70px;height:70px;background:#013c1e;}
#mainContents #application .slider .item:hover a > span:after{color:#fff;}
#mainContents #application .slider .item:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
#mainContents #application .slider .item .txtBox {position: absolute;z-index: 2;left: 0;bottom: 50px;width: 100%;color: #222;padding: 0px 35px;opacity: 1;}
#mainContents #application .slider .item .txtBox dl {}
#mainContents #application .slider .item .txtBox dl dt {opacity: 0.5;font-size: 1rem;line-height: 1.3;}
#mainContents #application .slider .item .txtBox dl dd {font-size: 1.6rem;margin-top: 10px;line-height: 1.2;}
#mainContents #application .slider .item .txtBox.white{color:#fff;}
#mainContents #application .tit_s1, #mainContents #video .tit_s1 { margin-bottom: 64px;}
#mainContents #application .tit_s1 p,#mainContents #video .tit_s1 p {}

/******************************
  news
******************************/
#mainContents #news {padding: 90px 0 100px;}
#mainContents #news .inner {
-webkit-transform: translateY(43px);
transform: translateY(43px);
z-index: 10;
}

#mainContents #news .slideBox {margin-top: 90px;position: relative;z-index: 10;}
#mainContents #news .slideBox .item {position: relative;background:#f5f5f5;margin-right:10px;height: 260px;}
#mainContents #news .slideBox .item:nth-child(4n){margin-right:10px;}
#mainContents #news .slideBox .item:hover{background:#013c1e;-webkit-transition: all 0.5s; transition: all 0.5s;}
#mainContents #news .slideBox .item:hover .txtBox dl dt{color:#fff;}
#mainContents #news .slideBox a {display: block;position: relative;}
#mainContents #news .slideBox a:hover img {
-webkit-transform: translate(-50%, -50%) scale(1.2);
transform: translate(-50%, -50%) scale(1.2);
}

#mainContents #news .slideBox a:hover .line span {opacity: 1 !important;}

#mainContents #news .slideBox a:hover .topRight,
#mainContents #news .slideBox a:hover .bottomLeft {width: 100% !important;}
#mainContents #news .slideBox a:hover .rightBottom,
#mainContents #news .slideBox a:hover .bottomTop {height: 100% !important;}
#mainContents #news .slideBox .img {position: relative;padding-top: 67.12643678161%;height: 0;text-align: center;border: 1px solid #ddd;overflow: hidden;}
#mainContents #news .slideBox .img img {display: inline-block;position: absolute;left: 50%;top: 50%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#mainContents #news .slideBox .txtBox {/* margin-top: 40px; */padding: 35px 24px 33px 20px;}
#mainContents #news .slideBox .txtBox .cate {color: #013c1e;font-weight: 700;}
#mainContents #news .slideBox .txtBox dl {/* margin-top: 14px; */}
#mainContents #news .slideBox .txtBox dl dt {font-size: 1.25rem;font-weight: 700;color: #333;overflow: hidden;height: 93px;text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.5em;
}
#mainContents #news .slideBox .txtBox .date {color: #999;margin-top: 87px; display:none; }
#mainContents #news .bg{padding-top:30px;}
#mainContents #news .inner1720{overflow:hidden;}
#mainContents #news .noticeW  {float:left;width: 56%;margin-right: 3%;}
#mainContents #news .noticeW .tit_s2{margin-top:75px;}
#mainContents #news .busW {float:right;width: 40%;position:relative;}
#mainContents #news .busW .item {position: relative;}
#mainContents #news .busW .item a {overflow: hidden;display: block;width: 100%;height: 100%;position: relative;z-index: 10;}
#mainContents #news .busW .item img {width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#mainContents #news .busW .item a:after {content: "";width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;}
#mainContents #news .busW .item:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

#mainContents #news .busW .item .txtBox {position: absolute;z-index: 2;left: 0;top: 50px;width: 100%;padding: 0px 35px;opacity: 1;}
#mainContents #news .busW .item a > span{position:absolute;bottom:20px;right:20px;width:60px;height:60px;border:1px solid #222;color:#222;z-index:999;-webkit-transition: all 0.5s;
transition: all 0.5s;text-align:center;font-size:20px;display:block;}
#mainContents #news .busW .item a > span:after{content:"\e913";font-family : xeicon;color:#222;position:absolute;top:50%;left:50%;margin-left: -9px;margin-top: -11px;}
#mainContents #news .busW .item:hover a > span{background:#000;color:#fff;width:70px;height:70px;background:#013c1e;border:1px solid #013c1e;}
#mainContents #news .busW .item:hover a > span:after{color:#fff;}
#mainContents #news .inquiry {background: #013c1e url(/img/main/bg_mInq.jpg) no-repeat left top;background-size:cover;text-align:left;padding-left:50px;margin-top: 100px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: left;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 160px;}
#mainContents #news .inquiry .tit_s3{color:#fff;margin:10px 20px 0  0;}
#mainContents #news .inquiry a{}


#mainContents #news .ntmBtn a{position:absolute;top:20px;right:0;width:60px;height:60px;border:1px solid #222;color:#013c1e;line-height:63px;text-align:center;font-size:30px;display:block;z-index:999;-webkit-transition: all 0.5s;
transition: all 0.5s;}
#mainContents #news .ntmBtn a:hover{background:#013c1e;color:#fff;}