body {word-break:keep-all;}

#WRAP{overflow:hidden;}

#COMPANY_VISION {margin: 88px auto 0;height:calc(100vh - 88px);width:100vw;background:#000;min-height:1000px;}
#COMPANY_VISION #SUB_WRAPPER {height:100%;}

#VISION {max-width:100%; padding:0; height:100%;}
#VISION .gu_content {color:#fff; text-align:center;max-width:100%; padding:0;height:100%; position:relative; width:100%; margin:0 auto;*zoom:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#VISION .gu_content:after {display:block;content:"";clear:both;}
#VISION .gu_content .bg_area {width:100%;height:100%;z-index:0;position:absolute;top:0;left:0;}
#VISION .gu_content .bg_area > div {opacity:0; z-index:0; position:absolute;width:100%;height:100%;top:0;left:0;transition:opacity 0.3s}
#VISION .gu_content .bg_area > div.on {opacity:1; z-index:1;}
#VISION .gu_content .bg_area > div:nth-of-type(1) {background:url(../../../img/company/vision/bg_vision1.jpg) no-repeat center / cover;}
#VISION .gu_content .bg_area > div:nth-of-type(2) {background:url(../../../img/company/vision/bg_vision2.jpg) no-repeat center / cover;}
#VISION .gu_content .bg_area > div:nth-of-type(3) {background:url(../../../img/company/vision/bg_vision3.jpg) no-repeat center / cover;}
#VISION .gu_content .bg_area > div:nth-of-type(4) {background:url(../../../img/company/vision/bg_vision4.jpg) no-repeat center / cover;}
#VISION .gu_content .bg_area > div:nth-of-type(5) {background:url(../../../img/company/vision/bg_vision5.jpg) no-repeat center / cover;}
#VISION .gu_content > .text_area {position:relative;top:50%;transform:translateY(-100%); padding-bottom:20px;}
#VISION .gu_content > .text_area .gu_title_en {font-size:50px;color:#fff; line-height:70px; text-align:center; padding-bottom:55px; font-family: "Plain",sans-serif;font-weight:700;}
#VISION .gu_content > .text_area .gu_title_en + .gu_text {color:#d2d2d2; font-size:16px; line-height:30px;}
#VISION .gu_content .inner {position:relative;top:50%;transform:translateY(-100%);}
#VISION .gu_content .inner ul {font-size:0; margin-top:100px;}
#VISION .gu_content .inner ul li {display:inline-block; vertical-align:top;width:25%;max-width:320px; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#VISION .gu_content .inner ul li .img {transition:all .3s ease}
#VISION .gu_content .inner ul li .text_li .gu_box_sub_title {font-size:18px; line-height:28px; font-weight:700; color:#fff; margin-top:40px; display:inline-block;transition:all .3s ease;max-width:210px;}
#VISION .gu_content .inner ul li .text_li .gu_text {opacity:0;visibility:hidden;transform:translateY(-20px);transition:all .3s ease; text-align:left;max-width:260px;margin:20px auto 0; font-size: 16px; line-height: 30px;}
#VISION .gu_content .inner ul li .text_li .gu_text span {display:block; padding-left:22px;}
#VISION .gu_content .inner ul li .text_li .gu_text span:before {content:'- '; margin-left:-12px;}
#VISION .gu_content .inner ul li.on .img {transform:translateY(-20px)}
#VISION .gu_content .inner ul li.on .text_li .gu_box_sub_title {transform:translateY(-20px)}
#VISION .gu_content .inner ul li.on .text_li .gu_text {opacity:1;visibility:visible;transform:translateY(0)}


@media all and (max-width:1280px){
    #COMPANY_VISION{margin:86px auto 0; height:calc(100vh - 86px);}
}

@media all and (max-width: 1080px) {
    #COMPANY_VISION {margin: 67px auto 0;height:100%;}

    #VISION .gu_content .bg_area {position:relative;}
    #VISION .gu_content .bg_area > div {display:none;height:488px; position:relative;}
    #VISION .gu_content .bg_area > div.on {display:block}
    #VISION .gu_content .text_area {position:absolute;top:18%; left:50%;transform:translate(-50%,-50%)}
    #VISION .gu_content > .text_area .gu_title_en {font-size:36px; line-height:45px; padding-bottom:45px;}
    #VISION .gu_content > .text_area .gu_title_en > br {display:none;}
    #VISION .gu_content > .text_area .gu_text > br {display:none;}
    #VISION .gu_content .inner {transform:none;top:auto;}
    #VISION .gu_content .inner ul {transform:none;top:auto;margin-top:0;}
    #VISION .gu_content .inner ul li {display:block; width:100%;max-width:100%;height:200px; position:relative;}
    #VISION .gu_content .inner ul li:nth-of-type(1) {background:url(../../../img/company/vision/bg_vision2.jpg) no-repeat center 30% / cover}
    #VISION .gu_content .inner ul li:nth-of-type(2) {background:url(../../../img/company/vision/bg_vision3.jpg) no-repeat center 80% / cover}
    #VISION .gu_content .inner ul li:nth-of-type(3) {background:url(../../../img/company/vision/bg_vision4.jpg) no-repeat center 10% / cover}
    #VISION .gu_content .inner ul li:nth-of-type(4) {background:url(../../../img/company/vision/bg_vision5.jpg) no-repeat center / cover}
    #VISION .gu_content .inner ul li > div {display:inline-block; vertical-align:middle;top:50%;transform:translateY(-50%); position:relative; text-align:left;}
    #VISION .gu_content .inner ul li .img {position:absolute;}
    #VISION .gu_content .inner ul li .text_li {padding-left:120px;}
    #VISION .gu_content .inner ul li .text_li .gu_box_sub_title {font-size:16px; line-height:24px; margin-top:0;max-width:none;}
    #VISION .gu_content .inner ul li .text_li .gu_text {font-size:14px; line-height:24px; opacity:1;visibility:visible;transform:translateY(0);max-width:280px;margin:10px auto 0;}
    #VISION .gu_content .inner ul li .text_li .gu_text span {padding-left:0px; font-size:12px; line-height:19px; position:relative;}

    #VISION .gu_content > .text_area .gu_title_en + .gu_text {font-size:14px; line-height: 21px;}

    #VISION .gu_content .inner ul li .text_li .gu_text span:before {position:absolute; left:0; }


}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #VISION .gu_content .inner ul li .text_li {padding-left:100px;}
    #VISION .gu_content > .text_area .gu_title_en {font-size:28px; line-height:38px; padding-bottom:40px;}
    #VISION .gu_content .inner ul li .text_li .gu_text {font-size:13px; line-height:24px;}
    #VISION .gu_content .gu_box_sub_title {font-size:16px; line-height:24px;}
}

@media all and (max-width:374px){
    #VISION .gu_content .inner ul li .text_li .gu_box_sub_title,#VISION .gu_content .inner ul li .text_li .gu_text{line-height:20px;}
}