@charset "UTF-8";

._fnctWrap {line-height:1.5;}

/* Service */
.wrap-service {overflow: hidden; position: relative; height: 100%; background: #0063ec;}
.wrap-service .container {display: table; width: 100%; table-layout: fixed;}
.wrap-service .con {position: relative; display: table-cell; width: 50%; vertical-align: top;}
.wrap-service .con::after {content: ''; position: absolute; right: 0; top: 0; width: 442px; height: 376px; background: url('../images/bg-quick.png') no-repeat right top; background-size: contain;}
.wrap-service .con .slider {padding: 35px 55px 73px 0;}
.check .wrap-service .con .slider {padding-bottom: 18px;}
.wrap-service .con .slider li {float: left; width: 33.333%; padding: 48px 0; text-align: center;}
.wrap-service .con .slider li img {display: inline-block;}
.wrap-service .con .slider a {display: block;}
.wrap-service .con .title {padding-top: 197px;}
.check .wrap-service .con .title  {padding-top: 60px;}
.wrap-service .con .title strong {position: relative; display: inline-block; font-family: 'Arita SemiBold'; font-size: 49px; color: #fff;}
.wrap-service .con .title strong::after {content: ''; position: absolute; left: 120%; top: 50%; width: 260px; height: 1px; background: rgba(255,255,255, .5);}
.wrap-service .con .title strong::before {content: ''; position: absolute; left: 120%; top: 49%; width: 50px; height: 3px; background: rgba(255,255,255, 1);}
.wrap-service .con .title span {display: inline-block; margin-left: -10px;}
.wrap-service .con .desc {position: relative; z-index: 1;}
.wrap-service .con .subject strong {position: relative; display: inline-block; margin: 20px 0 10px 0; font-family: 'Dream Medium'; font-size: 25px; color: #fff;}
.wrap-service .con .subject strong::after {content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: #fff; transition: 1s;}
.wrap-service .con a:hover .subject strong::after {width: 100%; transition: 1s;}
.wrap-service .con .txt p {font-family: 'Dream Regular'; font-size: 14px; color: #fff;}
.wrap-service .con .control {position: absolute; left: 0; bottom: 96px; z-index: 10; width: 100%; font-size: 0; text-align: center;}
.wrap-service .con .paging {display: inline-block; vertical-align: middle; font-size: 0;}
.wrap-service .con .paging button {display: inline-block; width: 8px; height: 8px; background: #83b7ff; border-radius: 100px; vertical-align: middle; text-indent: -99999px;}
.wrap-service .con .paging li {display: inline-block; margin-right: 5px; margin-left: 5px; vertical-align: middle;}
.wrap-service .con .paging .slick-active button {width: 35px; background: #003071;}
.wrap-service .img {display: table-cell; vertical-align: middle;}
.wrap-service .img .deco {position: absolute; right: 0; bottom: 0; z-index: 2;}
.wrap-service .img::after {content: ''; position: absolute; right: 0; top: 0; z-index: 1; width: 50%; height: 100%; background: url('../images/bg-main1.jpg') no-repeat; background-size: cover;}

.wrap-service .slider .ani {bottom: -100px}
.ani-on .wrap-service .slider .ani {bottom: 0;}
.ani-on .wrap-service .slider .ani1 {transition-delay: 0s;}
.ani-on .wrap-service .slider .ani2 {transition-delay: .2s;}
.ani-on .wrap-service .slider .ani3 {transition-delay: .4s;}
.ani-on .wrap-service .slider .ani4 {transition-delay: .6s;}
.ani-on .wrap-service .slider .ani5 {transition-delay: .8s;}
.ani-on .wrap-service .slider .ani6 {transition-delay: 1s;}

.wrap-service .slider .ani img {transform: rotateY(0deg); transition: 1s;}
.ani-on .wrap-service .slider .ani img {transform: rotateY(360deg);}
.ani-on .wrap-service .slider .ani1 img {transition-delay: 0s;}
.ani-on .wrap-service .slider .ani2 img {transition-delay: .2s;}
.ani-on .wrap-service .slider .ani3 img {transition-delay: .4s;}
.ani-on .wrap-service .slider .ani4 img {transition-delay: .6s;}
.ani-on .wrap-service .slider .ani5 img {transition-delay: .8s;}
.ani-on .wrap-service .slider .ani6 img {transition-delay: 1s;}

@media all and (max-width: 1800px) {
    .wrap-service .con {width: 65%;}
    .wrap-service .img::after {width: 36%;}
}

@media all and (max-width: 950px) {
    .wrap-service .img .deco img {width: 300px;}
}

@media all and (max-width: 900px) {
    .wrap-service .con {width: 50%;}
    .wrap-service .con::after {height: 230px;}
    .check .wrap-service .con .slider {padding: 19px 10px 33px 0;}
    .wrap-service .con .slider li {padding: 33px 0;}
    .wrap-service .con .slider li img {height: 61px;}
    .check .wrap-service .con .title {padding-top: 63px;}
    .wrap-service .con .title strong {font-size: 36px;}
    .wrap-service .con .title strong::after {left: 112%; width: 180px;}
    .wrap-service .con .title strong::before {left: 112%;}
    .wrap-service .con .subject strong {margin: 20px 0 7px 0; font-size: 20px;}
    .wrap-service .con .control {bottom: 70px;}
    .wrap-service .img .deco img {width: 240px;}
    .wrap-service .img::after {width: 50%; background-size: cover; background-position: center center;}
}

@media all and (max-width: 840px) {
    .wrap-service .con {width: 75%;}
    .wrap-service .img::after {width: 26%;}
    .wrap-service .img .deco img {width: 150px;}
}

@media all and (max-width: 600px) {
    .wrap-service .con {width: 100%;}
    .wrap-service .con::after {right: -30px;}
    .wrap-service .img::after {width: 0%;}
    .wrap-service .img .deco img {width: 0;}
}

@media all and (max-width: 500px) {
    .wrap-service .container {height: auto;}
    .wrap-service .container,
    .wrap-service .con,
    .wrap-service .img {display: block; width: 100%;}
    .wrap-service .con {padding-top: 270px;}
    .wrap-service .con::after {right: -60px; top: 270px;}
    .wrap-service .con .slider {padding: 28px 0 67px 0;}
    .wrap-service .con .slider li {padding: 18px 0;}
    .wrap-service .con .slider li img {height: 57px;}
    .check .wrap-service .con .title {padding-top: 40px;}
    .wrap-service .con .title strong {font-size: 30px;}
    .wrap-service .con .subject strong {margin: 16px 0 7px 0; font-size: 18px;}
    .wrap-service .con .txt {display: none;}
    .wrap-service .con .control {bottom: 37px;}
    .wrap-service .img::after {width: 100%; height: 270px;}
    .wrap-service .img .deco {bottom: auto; top: 84px;}
    .wrap-service .img .deco img {width: 170px;}
}

@media all and (min-width: 2000px) {
  .wrap-service {max-width: 1920px; margin: 0 auto;}
}