@charset "UTF-8";

html {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    
}
/*@media screen and (max-width: 1920px) {*/
    html {
        font-size: 0.52083333vw;
    }
/*}*/
@media screen and (max-width: 1000px) {
    html {
        font-size: 10px;
    }
}
@media screen and (max-width: 640px) {
    html {
        font-size: 1.5625vw;
    }
}

body {
    background: #fff;
    font-family:Arial,'Noto Sans TC',"微軟正黑體","Microsoft JhengHei",sans-serif;
    background: #f3f4f6;
    color: #222222;line-height: 1.25em;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img {
    position: relative;
    display: block;
    border: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: url(../images/index_bg.jpg) no-repeat top center;
    background-size: 100% auto;
}
.wrap .preload {
    display: none;
}

.nav {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 999;
    height: 8rem;
    background: #fff;
}
.nav-h{height: 8rem;}
.nav .nav-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 120rem;
    padding: 0 2rem;
}
.nav .nav-container .logo {
    position: relative;
    display: block;
    width: 10.8rem;
}
.nav .nav-container .nav-list {
    position: relative;
    display: block;
}
.nav .nav-container .nav-list > li {
    position: relative;
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    color: #4e4e4e;
    padding:0 2.5rem;
    cursor: pointer;
}
.nav .nav-container .nav-list > li a{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.nav .nav-container .nav-list > li.nav-spbtn{
    color: #e8460a;
}
.nav .nav-container .nav-list > li.nav-spbtn  span{
    position: relative;
    color: #fff;
    z-index: 1;
    margin-right: 1em;
    /*background: #e8460a;*/
}
.nav .nav-container .nav-list > li.nav-spbtn  span::before{
    content: "";
    position: absolute;
    height: 2.8rem;
    width: calc(100% + 2rem);
    left: -1rem;
    top:-.4rem;
    background: #e8460a;
    z-index: -1;
    border-radius: 1.2rem;
}

.nav .nav-container .nav-list > li.nav-spbtn small{
    transform: scale(.5);
    -webkit-transform: scale(.5);
    display: inline-block;
    transform-origin: 0 0%;
    font-size: 100%;
    margin-right: -1rem;
}
.nav .nav-container .nav-list > li:not(:last-child):after{
    content: "/";
    /*background: url(../images/nav_line.png) center center no-repeat;*/
    font-size: 2rem;
    display: inline-block;
    position: absolute;
    right: -.7rem;
    /*top: 50%;*/
    /*transform: translateY(-11px);*/
}

.nav .nav-container .nav-list > li:hover {
    /*color: #fcf263;*/
}
.nav .social-list {
    position: absolute;
    display: block;
    right: 2rem;
}
.nav .social-list2 {
    display: none;
}
.nav .social-list li {
    position: relative;
    display: inline-block;
    width: 4rem;
    margin-left: 1rem;
}
.nav-icon{
    width: 5.4rem;
    display: inline-block;
    position:absolute;
    /*margin-left: .5em;*/
    left: calc(100% - .5em);
    top: 50%;
    transform: translateY(-50%);
}

.section-p{
    font-size:calc(3.2rem * .85);
    color: #fff;
    line-height:calc( 4.6rem  * .85);
    text-align: center;
    margin-bottom: 1em;
}
.section-p span{
    color: #ffff00;
}
.section-tip{
    font-size: 14px;
    color: #525252;font-weight: 500;
    margin:1em 0;
    line-height: 20px;
}


.kv{
    background: url(../images/kv_bg.jpg?0723-1) center top no-repeat;
    height: 82.8rem;
    margin-bottom: -16.8rem;
    /*padding-bottom: 16.8rem;*/
    z-index: 0;
}
.kv .section-container{
    max-width: 130rem;
    width: 130rem;
    display: flex;
    justify-content: center;
    height: 100%;
}

.kv-left{width: 50%;position: relative;height: 100%;}
.kv-right{width: 50%;position: relative;height: 100%;}
.kv-title{position: relative;width: 59.9rem;margin-left: -10rem;top: 2rem;}
.kv-sp{position: relative;width: 74.2rem;left: -2rem;top:5.6rem;z-index: 1;}
.kv-ing1{position:absolute;left: -6.5rem;top: -3rem;width: 90.6rem;z-index: 0;}
.kv-ing2{position:absolute;left: -6.5rem;top: -3rem;width: 90.6rem;z-index: 2;}
.kv-ing-ball1,.kv-ing-ball2,.kv-ing-ball3,.kv-ing-ball4,.kv-ing-ball5{position: absolute;width: 100%;top: 0;left: 0;}

.kv-tip{position: absolute;left: 3rem;bottom: 6rem;z-index: 3;text-shadow: 0px 0px 5px #fff;font-size: 1.2rem;white-space:nowrap;}
.kv-pro-jello{width: 10.3rem;position: absolute;bottom: 66.5%;right: 45.5%;z-index: 3;animation: jello 2s infinite;transform-origin: 80% 80%;}


@keyframes jello {
  11.1% {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg)
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg)
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
  }
  100% {
    transform: none
  }
}

.kv-pro-peo1{position: absolute;width: 10rem;z-index: 0;left: 54%;top: 25%;}
.kv-pro-peo2{position: absolute;width: 8.7rem;z-index: 0;left: 71%;top: 58%;}
.kv-pro{
    position: absolute;
    width: 55rem;
    left: 9rem;
    bottom: 5rem;
    z-index: 3;
}
.kv-pro > picture{position: relative;z-index: 1;}
.kv-pro-txt{
    width: 100%;
    position: absolute;
    left: 0;
    top:0;
}

.wrap2{
    position: relative;
    width: 100%;
    background: url(../images/wrap2_bg.png) center top no-repeat;
    background-size: cover;
    padding-top: 22.2rem;
    /*padding-bottom: 16.5rem;*/
    margin-bottom: -16.5rem;
}

/*s2*/
.s2 {
    
}
.s2 .section-title{
    width: calc(100.3rem * .85);
    margin-bottom: calc(3rem * .85);

}

.yt-con{
    position: relative;
    max-width: calc( 122rem * .85);
    margin:0 auto;
    
}

.ytplay{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 4px;
    border:3px solid #edc640;    
    margin-bottom: 2rem;
}
.ytplay iframe{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

.video-ing1{width: 11rem;position: absolute;left: 0;top:20%;transform: translateX(-75%);display: flex;justify-content: center;align-items: center;}

.video-ing2{width: 13.8rem;position: absolute;left: 0;top: 0;transform: translate(100%,-100%);display: flex;justify-content: center;align-items: center;}

.video-ing3{width: 7.5rem;position: absolute;right: 0;top: 0;transform: translate(-200%,-100%);display: flex;justify-content: center;align-items: center;}

/*s3*/
.s3{}
.s3 .section-title{
    position: relative;
    width: calc(100.2rem * .85);
    margin-bottom: calc(3rem * .85);
    margin-top: calc(9rem * .85);
}

.s3 .s3-title-ing{
    width: 9.4rem;
    position: absolute;
    left: 100%;
    top: -100%;
}

.s3-lines{
    width: calc(239.6rem * .85);
    left: 50%;
    position: relative;
    margin-top: -30rem;
    transform: translateX(-50%);
}
.s3-line2{position: absolute;left: 0;top: 0;width: 100%;}
.s3-line3{position: absolute;left: 0;top: 0;width: 100%;}
.s3-icons{position: absolute;left: 0;top: 0;width: 100%;}
.s3-pro{position: absolute;bottom: calc(7rem * .85);left: 50%;width: calc(67.6rem * .85);}


.wrap3{
    position: relative;
    width: 100%;
    background: url(../images/wrap3_bg.png) center top no-repeat;
    background-size: 192rem auto;
    padding-top: 22.6rem;
    padding-bottom: 17rem;
    margin-bottom: -17rem;
    z-index: 3;
}

/*s4*/
.s4 .section-title{
    width: calc(72rem * .85);
    margin-bottom: calc(5rem * .85);

}
.s4-pro-wrap{
    position: relative;
    display: flex;justify-content: center;align-items: center;
}
.s4-pro-light{
    width: calc( 68.5rem * .85);
    mix-blend-mode: screen;
}
.s4-pro{width: calc( 35rem * .85);position: absolute;left: 50%;top: 50%;transform: translate(-70%,-50%);
-webkit-mask-image: url(../images/s4-pro.png);
    -webkit-mask-size: 100%;
    mask-image: url(../images/s4-pro.png);
    mask-size: 100%;

}

.s4-pro-t1{position: absolute;width: calc( 56.5rem * .85);left: 48%;top:4%;}
.s4-pro-t2{position: absolute;width: calc( 57.9rem * .85);left: 52.5%;top:29.5%;}
.s4-pro-t3{position: absolute;width: calc( 51.7rem * .85);left: 57%;top:55.5%;}
.s4-pro-t4{position: absolute;width: calc( 48.9rem * .85);right: 64.5%;top:31%;}
.s4-pro-t5{position: absolute;width: calc( 46.5rem * .85);right: 59%;top:53%;}

.s4-pro-wrap p{font-size:calc(  2.8rem * .85);color: #2d2d2d;font-weight: 700;line-height: 4rem;}

.s4-pro-t1 p{position: absolute;left: calc( 23rem * .85);top: calc(11rem * .85);}
.s4-pro-t2 p{position: absolute;left: calc( 23rem * .85);top: calc(12rem * .85);}
.s4-pro-t3 p{position: absolute;left: calc( 22rem * .85);top: calc(12rem * .85);}

.s4-pro-t4 p{position: absolute;left: 0rem;top: calc(12rem * .85);}
.s4-pro-t5 p{position: absolute;left: 0rem;top: calc(12rem * .85);}

.s4-pro-t1-ball,.s4-pro-t2-ball,.s4-pro-t3-ball{
        position: absolute;left: 0;top:0;width: 100%;height: 100%;
        -webkit-mask-size: 100%;
        mask-size: 100%;
    }
    .s4-pro-t1-ball{
        -webkit-mask-image: url(../images/pro_t1_ball.png);  
        mask-image: url(../images/pro_t1_ball.png);  
    }

    .s4-pro-t2-ball{
        -webkit-mask-image: url(../images/pro_t2_ball.png);  
        mask-image: url(../images/pro_t2_ball.png);  
    }
    .s4-pro-t3-ball{
        -webkit-mask-image: url(../images/pro_t3_ball.png);  
        mask-image: url(../images/pro_t3_ball.png);  
    }

/*s5*/

.s5 .section-title{
    width: calc(82.8rem * .85);
    margin-bottom: calc(5rem * .85);

}
.s5-list{
    display: flex;
    justify-content: center;align-items: center;
}

.s5-list li{
    width: 28.5rem;
    position: relative;
    margin:0 1.5rem;
        -webkit-box-shadow: 0px 0px 2rem 1rem rgb(99 70 10 / .5);
    border-radius: 4rem;
    box-shadow: 0px 0px 2rem 1rem rgb(99 70 10 / .35);
}
.s5-list li h3{
    position: absolute;
    width: 100%;
    top: 28.1rem;
    width: 100%;
    text-align: center;
    font-size: 3.6rem;
    line-height: 2em;
    color: #fff;
    font-weight: 700;
}
.s5-list li p{
    position: absolute;
    color: #2d2d2d;
    top: 35.3rem;
    font-size: 2.8rem;
    line-height: 4rem;
    text-align: center;
    width: 100%;
    margin-top: .5em;
}


.s5-title2{
    margin-top: 9rem;
    margin-bottom: 5rem;
    text-align: center;
    
}
.s5-title2 h2{
    text-align: center;
    font-size: 4.5rem;
    font-weight: 900;
    color: #096246;
    margin:0 1em;
    display: inline-block;
    vertical-align: middle;
}
.s5-title2::before,.s5-title2::after{width: 17.5rem;content: "";display: inline-block;height: 2px;background: #096246;vertical-align: middle;}
.s5-row{display: flex;justify-content: center;align-items: center;}
.s5-row-box{margin-left: 5rem;display: flex;justify-content: center;align-items: center;}
.s5-row-pic{
    width: 12rem;
    margin-right: 2rem;
}
.s5-row-box h3{color: #0c6237;font-size: 3.6rem;font-weight: 900;line-height: 1.33em;margin-bottom: .25em;}
.s5-row-box p{font-size: 2.8rem;
    line-height: 4rem;}


/*table*/

.table{
    background: url(../images/table_bg.png) center top no-repeat;
    background-size: 192rem auto;
    width: 100%;
    height: 134.4rem;
    padding-top: 21.5rem;
    z-index: 4;
}
.table .section-title{
    position: relative;
    width: calc(47.7rem * .85);
    margin-bottom: calc(5rem * .85);

}
.table-pro2{
    position: absolute;
    top: 1%;
    left: 38.5%;width: 15.5rem;
}
.table-pro3{
    position: absolute;
    top: 1%;
    left: 64.25%;
    width: 10.7rem;
}
.table-ing1{position: absolute;width: 11.5rem;right: 100%;top: 2rem;}
.table-ing2{position: absolute;width: 9.2rem;left: 100%;top: -2rem;}
.table .table-block{
    width: 148.3rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.table-award1{position: absolute;width: 29rem;left: 24.25%;top: -6.5%;    -webkit-mask-image: url(../images/table_award1.png);
    -webkit-mask-size: 100%;
    mask-image: url(../images/table_award1.png);
    mask-size: 100%;}
.table-award2{position: absolute;width: 28rem;left: 49.75%;top: -6.5%;    -webkit-mask-image: url(../images/table_award2.png);
    -webkit-mask-size: 100%;
    mask-image: url(../images/table_award2.png);
    mask-size: 100%;}
.table-award3{position: absolute;width: 28rem;right: 5.6%;top: -6.5%;    -webkit-mask-image: url(../images/table_award2.png);
    -webkit-mask-size: 100%;
    mask-image: url(../images/table_award2.png);
    mask-size: 100%;}

.table-txt{width: 100%;position: absolute;top: 52.5%;    width: 77.5%;    left: 11.25%;}
.table-row{display: flex;justify-content: center;align-items: center;position: relative;font-size: 2.4rem;line-height: 1.58333em;padding: 2rem 0;color:#595757;}
.table-row b{font-weight: 700;}
.table-row small{vertical-align: top;margin-top: -.25em;position: relative;display: inline-block;margin-right: -.25em;}
.table-row .small{font-size: .8em;margin-right: -5em;}
.table-row > div{width: 100%; }
.table-row1 > div{text-align: center;}
.table-row1 > div:nth-child(1),.table-row2 > div:nth-child(1){width: 34.5%;}
.table-row1 > div:nth-child(2),.table-row1 > div:nth-child(3),.table-row2 > div:nth-child(2),.table-row2 > div:nth-child(3){width: 32.75%;}
.table-sptxt{white-space: nowrap;letter-spacing: -0.025em;}
.table-row ul{padding-left: 2rem;line-height: 1.8em;}

.table-row i{color: #18943b;}
.table-row3{
    justify-content: flex-start;
    padding: 2.4rem 0;
}
.table-row3 ul li{margin-right: 3.5rem;}
.table-row3 ul{display: flex;}
.s4-pro::after,.table-award1::after,.table-award2::after,.table-award3::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(70deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 70%);
    top: 0;
    left: -100%;
}
.table-tip{
    font-size: 1.4rem;
    color: #4e4d4d;
    text-align: right;
    padding-top: 1.25em;
}
.table-link1{
    position: absolute;
    width: 15%;
    left: 36.5%;
    top: 21%;
    height: 30%;
}
.table-link2{
    position: absolute;
    width: 15%;
    left: 60.5%;
    top: 15%;
    height: 38%;
}



/*kol*/

.kol{
    background: #55b65c url(../images/kol_bg.png) center top no-repeat;
    background-size: 192rem auto;
    width: 100%;
    height: 165.6rem;
    padding-top: 25.5rem;
    z-index: 4;
}
.kol .section-title{
    position: relative;
    width: calc(75.7rem * .85);
    margin-bottom: calc(10.5rem * .85);

}

.kol-ing1{position: absolute;width: 13.4rem;right: 102%;top: -2rem;}
.kol-ing2{position: absolute;width: 5.5rem;left: 100%;top: -2rem;}

.kol-docbox{width: 109.9rem;margin:0 auto;position: relative;margin-bottom: 9.5rem;}

.kol-docbox .section-tip{position: absolute;left: 0;bottom: -3rem;margin:0;}

.kol-docrow{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.kol-doc{width: 45.2rem;}
.kol-docmain{width: calc(100% - 45.2rem);padding:0 8rem 6rem 2rem;}
.kol-docmain h2{font-size: 4rem;color: #00471d;line-height: 1.25em;text-align: left;}
.kol-docmain h2 small{font-size: 1.2rem;transform: translateY(-2em); position: absolute;width: 3em;}
.kol-docmain p{font-size: 2.4rem;line-height: 1.5em;color: #2d2d2d;border-top: 1px solid #2d2d2d;border-bottom: 1px solid #2d2d2d;padding: .5em 0;margin-top: .5em;}
.kol-docmain p small{font-size: 1.2rem;transform: translateY(-1em);    display: inline-block; }
.kol-dell{position: absolute;right: 0;top: 0;width: 12.9rem;transform: translateY(-100%);}
.kol-pro{position: absolute;right: 0;bottom: 0;width: 20rem;transform: translate(-10%,40%);}

.kol-list{width: 128rem;position: relative;margin:0 auto;}
.kol-slider{width: 128rem;position: relative;}
.kol-box{width: calc(39.8rem + 3rem);flex-direction: column;display: flex;padding: 0 1.5rem;padding-top: 2rem;}
.kol-head{position: relative;width:100%;
    box-shadow: -.5rem 1rem 2rem 1rem rgba(99,70,10,0.4);-webkit-box-shadow: -.5rem 1rem 2rem 1rem rgba(99,70,10,0.4);border-radius: 3rem;}
.kol-head::before{content: "";width: 95%;height: 95%;position: absolute;top: 2.5%;left: 2.5%;border:1px solid #c99115;z-index: 2;border-radius: 2rem;}
.kol-name{position: absolute;bottom: 0;right: 0;font-size: 2.1rem;color: #fff;min-width: 27rem;text-align: center;line-height: 2em;background: #096246;border-radius: 3rem 0 3rem 0;z-index: 3;}
.kol-name span{font-size: 2.4rem;font-weight: bold;}
.kol-txts{}
.kol-box h3{font-size: 3.6rem;color: #00471d;line-height: 1.15em;text-align: center;font-weight: 700;margin: 1em 0 .5em 0;}
.kol-box p{font-size: 2.4rem;line-height: 1.5em;color: #2d2d2d;}
/*.kol-pic{width: 39.8rem;}*/
@media screen and (min-width: 1921px) {
    .kv,.wrap2,.wrap3,.table{background-size: cover;}
    .kv{margin-bottom: -21.8rem;}
    .wrap2{padding-top: 26.8rem;margin-bottom:-22rem;}
    .wrap3{padding-top: 26.8rem;margin-bottom:-22rem;}
    .table{padding-top: 26.8rem;height: auto;padding-bottom: 3rem;}
    /*.wrap2*/
}
@media screen and (max-width: 1500px) {
    .nav .nav-container {
        width: 100%;
    }
    .nav .nav-container .nav-list {
        margin-right: 12rem;
    }
    .nav .nav-container .nav-list > li{
        margin-left: 4rem;
    }
}
.nav .burger-btn {
    display: none;
}
@media screen and (max-width: 1000px) {
    .nav-h,.nav {
        height: 70px;
    }

    .nav::before {
        content: "";
        position: absolute;
        display: block;
        width: 100vw;
        height: calc(100vh - 70px);
        top:70px;
        left: 0;
        background: rgba(0,0,0,0.9);
        pointer-events: none;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }
    .nav.expand::before {
        opacity: 1;
        pointer-events: auto;
    }
    .nav .nav-container {
        position: absolute;
        display: block;
        padding: 0 2rem;
        height: 100%;
    }
    .nav .nav-container .logo {
        width: 90px;
        position: absolute;
        top:0;
    }
    .nav .nav-container .nav-list {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 31rem;
        align-items: center;
        top:70px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background:#55b65c url(../images/mb/nav_bg.png) center top no-repeat;
        background-size: 100% auto;
        margin: 0;
        -webkit-transition: right 0.5s ease;
        transition: right 0.5s ease;
    }

    .nav .nav-container .nav-list > li:not(:last-child):after,.nav .nav-container .nav-list > li:after{
        content: none;
        /*background: url(../images/mb/nav_arr.png) center center no-repeat;*/
        background-size: 100% auto;
        width: 3.5rem;
        height: 3.5rem;
        display: inline-block;
        position: absolute;
        font-size: 2rem;
        right: 0px;
        top: 50%;
        color: #0c6237;
        transform: translateY(-11px);
    }
    .nav.expand .nav-container .nav-list {
        right: 0;
    }
    .nav .nav-container .nav-list > li {
        width:52rem;
        display: block;
        font-size: 5.4rem;
        line-height: 11.8rem;
        /*letter-spacing: 0.8rem;*/
        color: #fff;
        margin: 0rem 0;
        padding:0;
        border-bottom: none;
        text-indent: -99999px;
    }
/*    .nav .nav-container .nav-list > li:first-child{
        border-top: 1px solid #fff;
    }*/
    .nav .social-list1 {
        display: none;
    }
    .nav .social-list2 {
        display: block;
    }
    .nav .social-list {
        position: relative;
        right: auto;
    }
    .nav .social-list li {
        width: 5rem;
        margin: 0 0.5rem;
    }
    .nav .burger-btn {
        position: absolute;
        display: block;
        width: 35px;
        height: 30px;
        top:22px;
        right: 20px;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .nav .burger-btn span {
        position: absolute;
        display: block;
        width: 100%;
        height: 4px;
        background: #028762;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
    }
    .nav .burger-btn span:nth-child(1) {
        -webkit-transform: scale(1,1) translate(0,0) rotate(0deg);
        transform: scale(1,1) translate(0,0) rotate(0deg);
    }
    .nav .burger-btn span:nth-child(2) {
        -webkit-transform: scale(1,1) translate(0,10px) rotate(0deg);
        transform: scale(1,1) translate(0,10px) rotate(0deg);
    }
    .nav .burger-btn span:nth-child(3) {
        -webkit-transform: scale(1,1) translate(0,20px) rotate(0deg);
        transform: scale(1,1) translate(0,20px) rotate(0deg);
    }
    .nav.expand .burger-btn span:nth-child(1) {
        -webkit-transform: scale(1,1) translate(0,10px) rotate(45deg);
        transform: scale(1,1) translate(0,10px) rotate(45deg);
    }
    .nav.expand .burger-btn span:nth-child(2) {
        -webkit-transform: scale(0,1) translate(0,10px) rotate(0deg);
        transform: scale(0,1) translate(0,10px) rotate(0deg);
    }
    .nav.expand .burger-btn span:nth-child(3) {
        -webkit-transform: scale(1,1) translate(0,10px) rotate(-45deg);
        transform: scale(1,1) translate(0,10px) rotate(-45deg);
    }

}
h2 {
    position: relative;
    display: block;
    font-size: 4rem;
    line-height: 5.5rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.2rem;
    text-align: center;
}
h5 {
    position: relative;
    display: block;
    font-size: 2.3rem;
    line-height: 3.5rem;
    font-weight: bold;
    color: #00244a;
    text-align: center;
    letter-spacing: 0.2rem;
}
h5 p {
    display: inline;
}
h4 {
    position: relative;
    display: block;
    font-size: 3rem;
    line-height: 4.5rem;
    font-weight: bold;
    color: #00244a;
    letter-spacing: 0.2rem;
}
h6 {
    position: relative;
    display: block;
    font-size: 2rem;
    line-height: 3.5rem;
    color: #00244a;
    letter-spacing: 0.05rem;
}
@media screen and (max-width: 1000px) {
    h4 {
        font-size: 3.6rem;
        line-height: 5.4rem;
    }
     h6 {
        font-size: 2.4rem;
        line-height: 4.3rem;
    }
}
.text-blue {
    color: #007bc3;
}
.text-b {
    font-weight: bold;
}
.text-yellow {
    color: #f1bd46;
}
.big-t1 {
    font-size: 1.5em;
}
.big-t2 {
    font-size: 1.2em;
}
.m-br {
    display: none;
}
section {
    position: relative;
    display: block;
    width: 100%;
    /*background: #eff1f7;*/
}

.section-container {
    position: relative;
    display: block;
    width: 144rem;
    max-width: 144rem;
    margin: 0 auto;
}
.fixed-icon{
    width: 9.8rem;
    position: fixed;
    z-index: 5;
    right: 1rem;
    top: calc(70px + 1rem);
}
.fixed-btn{
    width: 6.3rem;
    position: fixed;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    cursor: pointer;
}
.fixed-btns{
    position: fixed;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
}
.fixed-btns > a{margin:1rem 0;display: block;    
    /*-webkit-box-shadow: 0px 0px 2rem 1rem rgb(99 70 10 / .5);*/
    border-radius: 4rem;
    box-shadow: -.5rem .5rem 1rem .25rem rgb(99 70 10 / .3);
}
.section-title{text-align: center;margin:0 auto;}
.section-title img{width: 100%;margin:0 auto;}
.section-line{width: 100%;height: 30rem;background: url(../images/section_line.png) center center no-repeat;margin: -15rem 0;position: relative;z-index: 3;pointer-events: none;}
.tip{color: #777777;font-size: 1.2rem;margin:1em 0;}
@media screen and (max-width: 1440px) {

    .section-container {
        width: 90vw;
    }
    .kv .section-container{
        width: 130rem;
        max-width: 130rem;
    }
}
@media screen and (max-width: 1000px) {
    .section-container {
        width: 90vw;
        max-width: 640px;
    }
    .m-br {
        display: block;
    }
    .pc-br {
        display: none;
    }
}

.mb{display: none;}
@media screen and (min-width: 1001px) and (max-height: 800px) {
    .fixed-btns{top:10rem;transform: translateY(0); }
    .fixed-btns > a{margin:1rem 0;display: block;height:26.75vh; }
    .fixed-btns > a img{height: 100%;width: auto;}
}
@media screen and (max-width: 1000px) {
    .wrap section,.wrap2,.wrap3{
        max-width: 640px;
        margin-left: auto;margin-right: auto;
        overflow: hidden;
        /*margin:0 auto;*/
    }
    .pc{display: none;}
    .mb{display: block;}
    .fixed-btn{
        width: 64rem;
        bottom: 0;
        top: initial;
        left: 50%;
        transform: translateX(-50%);
    }
    .fixed-btns{display: flex;width: 100%;bottom: 0;transform: translateY(0);top: initial;right: 0;flex-wrap: wrap;}
    .fixed-btns::before{
        content: "";
        width: 100%;
        background: url(../images/mb/fixed_bar.png);
        background-size: cover;
        height: 1rem;
    }
    .fixed-btns a{
        width: 33.33%;
        height: auto;
        margin:0;
    }
    .fixed-btns a img{width: 100%;}
    .section-container{max-width: 61.8rem;} 
    .section-p{font-size: 2.7rem;line-height: 3.6rem;}
    .section-tip{font-size: 1.2rem;line-height: 2rem;}

    .kv{height: 90.5rem;margin-bottom: -8.5rem;}
    .kv .section-container{width: 100%;max-width: 100%;}
    .kv-left{width: 100%;position: absolute;}
    .kv-right{width: 100%;position: absolute;}
    .kv-ing1{display: none;}
    .kv-ing2{width: 37.1rem;left: 12.7rem;top: 36rem;}
    .kv-sp{
        position: absolute;
        width: 41.1rem;
        left: 35.3rem;
        /*right: 0;*/
        top: 48.7rem;
    }
    .kv-pro-txt,.kv-pro-peo1,.kv-pro-peo2{display: none;}
    .kv-pro{width: 24.5rem;left: 0;bottom: -2rem;}
    .kv-title{width: 49.4rem;margin-left: 9rem;top: 3.6rem;}
    .kv-tip{width: 31rem;left: 50%;transform: translateX(-50%);bottom: 5rem;white-space:initial;}
    .kv-p{position: absolute;top: 30%;left: 14rem;width: 49.1rem;}
    .kv-p-light{position: absolute;left: 0;top: 0;width: 100%;height: 100%;mix-blend-mode: screen;}
    .wrap2{background-image: url(../images/mb/wrap2.png);padding-top: 12rem;padding-bottom: 14rem;background-size: cover;}
    .kv-pro-jello{width: 16.7rem;position: absolute;bottom:initial;right: 20.5%;transform-origin: 50% 100%;top: 2.4%;z-index: 0;}

    /*s2*/
    /*.s2{margin-bottom: 6rem;}*/
    .s2 .section-title{width: 57.2rem;margin-bottom: 2rem;}

    
    .video-ing1{width: 8.8rem;left: 2.5rem;}
    .video-ing2{width: 11.1rem;transform: translate(-30%,-110%);}
    .video-ing3{width: 6rem;transform: translate(0,-80%);}
    .yt-con{width: 53.8rem;}
    .s2 .section-tip{width: 110%;margin-left: -5%;text-align: center;}
    /*s3*/
    .s3-lines{
        width: 100%;
        margin-top: -6rem;
    }
    .s3 .section-title{width: 45.2rem;margin-top: 6rem;}
    .s3 .s3-title-ing{width: 7.5rem;top: -20%;left: 90%;}
    .s3-pro{width: 44.4rem;left: initial;right: 0rem;bottom:-1rem;}

    .wrap3{background-image: url(../images/mb/wrap3.png);padding-top: 13rem;background-size: cover;}

    /*s4*/
    .s4 .section-title{width: 55.5rem;}
    .s4-pro-wrap{flex-direction: column;}
    .s4 .section-title{margin-bottom: 2.5rem;}
    .s4-pro-t1,.s4-pro-t2,.s4-pro-t3,.s4-pro-t4,.s4-pro-t5{
        position: relative;left: initial;top: initial;width: 53rem;margin-bottom: -3rem;right: initial;
    }
    .s4-pro-t5{margin-bottom: 0;}
    .s4-pro-light{width: 54.8rem;margin-top: -8rem;}
    .s4-pro-wrap p{font-size: 2.7rem;line-height: 3.6rem;}
    .s4-pro-t1-ball,.s4-pro-t2-ball,.s4-pro-t3-ball{
        position: absolute;left: 0;top:0;width: 100%;height: 100%;
        -webkit-mask-size: 100%;
        mask-size: 100%;
    }
    .s4-pro-t1-ball{
        -webkit-mask-image: url(../images/mb/pro_t1_ball.png);  
        mask-image: url(../images/mb/pro_t1_ball.png);  
    }

    .s4-pro-t2-ball{
        -webkit-mask-image: url(../images/mb/pro_t2_ball.png);  
        mask-image: url(../images/mb/pro_t2_ball.png);  
    }
    .s4-pro-t3-ball{
        -webkit-mask-image: url(../images/mb/pro_t3_ball.png);  
        mask-image: url(../images/mb/pro_t3_ball.png);  
    }

    .s4-pro-t1 p,.s4-pro-t2 p,.s4-pro-t3 p,.s4-pro-t4 p,.s4-pro-t5 p{position: absolute;left: 18.5rem;top: 10rem;}
    .s4-pro{width: 25.7rem;transform: none;top: 0%;left: 50%;transform: translateX(-50%);}
    .s4-award{position: absolute;width: 19.4rem;left: 60%;top:8%;}
    /*s5*/
    .s5 .section-title{width: 60.3rem;left: 50%;position: relative;transform: translateX(-50%);margin-bottom: -1rem;}
    .s5-list{flex-wrap: wrap;}
    .s5-list li{width: 22.8rem;margin:1.2rem ;    
    border-radius: 4rem;
    box-shadow: -.5rem .5rem 1.5rem .5rem rgb(99 70 10 / .35);}
    .s5-list li h3{top: 22.5rem;font-size: 2.9rem;line-height: 2em;}
    .s5-list li p{top:28.2rem;font-size: 2.4rem;line-height: 3.2rem;}
    .s5-title2 h2{font-size: 3.6rem;margin:0 .5em;}
    .s5-title2::before, .s5-title2::after{width: 12.7rem;}
    .s5-row{flex-direction: column;align-items: flex-start;}
    .s5-row-box{margin:1.5rem;margin-left: 4rem;}
    .s5-title2{margin-bottom: 2rem;margin-top: 7rem;}
    /*table*/
    .table{height: 119rem;}
    .table-ing1{width: 9.2rem;}
    .table-ing2{width: 7.4rem;}


    .table{background-image: url(../images/mb/table_bg.png);padding-top: 11rem;background-size: cover;}
    .table .section-title{margin-bottom: 2.5rem;width: 38.3rem;}
    .table .table-block{
        width: 61.6rem;
    }
    .table-txt {
        width: 100%;
        position: absolute;
        top: 35.5%;
        width: 100%;
        left: 0;
    }
    .table-row {
        font-size: 2.2rem;
        line-height: 1.363636em;
        padding: 1rem 0;
        font-weight: 400;
    }
    .table-row b{font-weight: 700;}
    .table-row1{margin-bottom: 4.25rem;}
    .table-row2{margin-bottom: 4.25rem;}
    .table-row2{justify-content: flex-start;align-items: flex-start;}
    .table-row ul{line-height: 1.4em;padding-left: 1.8rem}
    .table-row3 ul{flex-direction: column;}
    .table-sptxt{white-space: initial;}
    .table-pro2{
            top: -1.3%;
    left: 36%;
    width: 8.5rem;
    }
    .table-pro3{
        top: -1.2%;
    left: 69.25%;
    width: 5.85rem;
    }
    .kol{height: auto;padding-bottom: 5rem;padding-top: 13rem;}
    .kol{background-image: url(../images/mb/kol_bg.png);background-size: cover;}
    .kol-docbox{width: 60.1rem;left: 50%;transform: translateX(-50%);}
    .kol .section-title{
        width: 35.7rem;margin-bottom: calc(2.5rem * .85);
}
    .kol-ing1{width: 10.8rem;    right: 88%;}
    .kol-ing2{width: 4.4rem;    left: 89%;}
    .kol-docrow{
        position: relative;
    }
    .kol-dell{width: 10.3rem;transform: translateY(-45%);}
    .kol-pro{bottom: initial;top: 10rem;width: 23.4rem;}
    .kol-docmain{width: 100%;padding: 3rem 2rem;}
    .kol-docmain h2{font-size: 3.8rem;}
    .kol-docmain h2 small{width: 4em;}
    .kol-docmain p{font-size: 2.8rem;}
    .kol-list,.kol-slider{width: 48rem;}
    .kol-box{
        width: 48rem;
        padding: 3rem;
    }
    .kol-docbox .section-tip{left: 2rem;bottom: 0;}
    .kol-box h3{font-size: 3.5rem;}
    .kol-box p{font-size: 2.8rem;}
}



@keyframes donut-fill {
    to {
        stroke-dasharray: 0 100;
    }
}

/*small{font-size: 50%;position: relative;top: -2em;margin-right: -1.5em;}*/
footer{
    position: relative;
    background: #c8c8c8;
    color: #454545;
    width: 100%;text-align: center;
    font-size: 2.9rem;
    line-height: 1.25em;
    padding: 1em 0;
}
footer a{color: #fff;}
/*@media screen and (max-width: 1000px) {
    body{
        padding-bottom: 10.3rem;
    }
}
@media screen and (max-width: 767px) {
    footer{font-size: 2rem;}

}

@media only screen and (min-width: 1025px) {
    .for-m {
        display: none! important;
    }
}

.anchor{
    position: absolute;
    margin-top: -100px;
}*/