.section1 {}
.section1 .section1-wrap {
    position: relative;
    height: 676px;
}
.section1 .section1-wrap .text-wrap {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.section1 .section1-wrap .text-wrap > h1 {
    font-size: 50px;
    font-weight: 700;
    color: #fff;

}
.section1 .section1-wrap .text-wrap > p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding-top: 20px;
}
.section1 .section1-wrap .section1-background-image {
    background-image: url('../../image/company/company/company-top-image.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.section1 .section1-wrap .section1-opacity {
    background-color: #073557;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Section2 */
.section2 {}
.section2 .section2-wrap {
    padding: 120px 0;
}
.section2 .section2-wrap .text-wrap {text-align: center;}
.section2 .section2-wrap .text-wrap > h1 {
    font-size: 30px;
    font-weight: 700;
    color: #000;
}
.section2 .section2-wrap .text-wrap > p {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    padding-top: 45px;
}

.section2 .section2-wrap .content {
    margin: 0 auto;
    max-width: 1400px;
    padding-top: 100px;
}
.section2 .section2-wrap .content > ul {
    display: flex;
    justify-content: space-between;
}
.section2 .section2-wrap .content > ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.section2 .section2-wrap .content > ul > li:nth-child(2) {
    border-right: 1px solid #dedede;
    border-left: 1px solid #dedede;
}
.section2 .section2-wrap .content > ul > li .img-box {
    position: relative;
    
}
.section2 .section2-wrap .content > ul > li .img-box img {
    margin-top: 10px;
}
.section2 .section2-wrap .content > ul > li .img-back {
    position: absolute;
    top: -10px;
    left: 40px;
    width: 76px;
    height: 76px;
    background-color: #ECEEF2;
    border-radius: 100%;
    z-index: -1;
}
.section2 .section2-wrap .content > ul > li  > h1 {
    padding-top: 60px;
    font-size: 22px;
    color: #000;
    font-weight: 700;
}
.section2 .section2-wrap .content > ul > li  > p {
    padding-top: 20px;
    color: #666;
    font-size: 16px;
    font-weight: 400;
}

/* Section3 */
.section3 {}
.section3 .section3-wrap {
    /* background-image: url('../../image/company/company/section3-bg.jpg');
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed; */

}
.section3 .section3-wrap .text-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.section3 .section3-wrap .text-wrap > h2 {
    font-size: 35px;
    font-weight: 700;
    color: #fff;
}
.section3 .section3-wrap .text-wrap > h1 {
    font-size: 140px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 0px 6px #FFFFFF9D;
    padding-top: 55px;
}
.section3 .section3-wrap .text-wrap > h1 > span {
    font-size: 140px;
    font-weight: 700;
    letter-spacing: -35px;
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
}
.section3 .section3-wrap .text-wrap.on > h1 > span {
    animation: fadeInSlow 1.2s forwards;
}
.section3 .section3-wrap .text-wrap > p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    padding-top: 36px;
}

/* Section4 */
.section4 {}
.section4 .section4-wrap {
    height: 100vh;
    position: relative;
}
.section4 .section4-wrap .section4-background-image {
    /* background-image: url('../../image/company/company/section4-bg.png'); */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.section4 .section4-wrap .section4-opacity {
    background-color: #000;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.section4 .section4-wrap .content {
    max-width: 1400px;
    height: 100%;
    position: relative;
    margin: 0 auto;
}
.section4 .section4-wrap .text-wrap {
    width: 440px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 3;
}
.section4 .section4-wrap .text-wrap > div {

}
.section4 .section4-wrap .text-wrap h1 {
    font-size: 35px;
    font-weight: 700;
    color: #fff;
}
.section4 .section4-wrap .text-wrap .item {
    padding-top: 70px;
}
.section4 .section4-wrap .text-wrap .item > h1 {
    font-size: 24px; 
    font-weight: 700;
    color: #fff;
}
.section4 .section4-wrap .text-wrap .item > p {
    padding-top: 20px;
    font-weight: 400;
    font-size: 16px;
    color: #aaa;
}

/* Section5 */
.section5 {}
.section5 .section5-wrap {
    padding: 120px 0;
}
.section5 .section5-wrap > h1 {
    font-weight: 700;
    font-size: 30px;
    color: #000;
    text-align: center;
}

.section5 .section5-wrap .content {
    display: flex;
    justify-content: center;
    padding-top: 50px;
}
.section5 .section5-wrap .content .item {}
.section5 .section5-wrap .content .item:nth-child(2) {
    margin: 0 20px;
}
.section5 .section5-wrap .content .item > img {
    width: 440px;
    height: 615px;
}
.section5 .section5-wrap .content .item > h1 {
    padding-top: 40px;
    font-weight: 600;
    font-size: 22px;
    color: #000;
}
.section5 .section5-wrap .content .item > p {
    padding-top: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
}


.section6 {}
.section6 .section6-wrap {
    background-color: #F7F7F7;
    padding: 80px 0;
}


.section6 .section6-wrap > h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #000;
}


.section6 .section6-wrap .content {
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    max-width: 1400px;
}

.section6 .section6-wrap .content > div {
    width: 50%;
    height: 300px;
    border: 1px solid #dedede;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.section6 .section6-wrap .content > div:nth-child(1) {border-right: 0;}
.section6 .section6-wrap .content > div > h1 {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 16px;
    font-weight: 600;
}
.section6 .section6-wrap .desc {
    max-width: 1400px;
    margin: 0 auto;
}
.section6 .section6-wrap .desc .item {padding-top: 50px;}
.section6 .section6-wrap .desc .item > h1 {font-size: 20px;font-weight: 600;color: #000;}
.section6 .section6-wrap .desc .item > p {font-size: 16px;font-weight: 400;color: #666;padding-top: 15px;}

.section6 .section6-wrap .download {
    margin-top: 80px;
    display: flex;
    align-items: center;    
    justify-content: center;
}
.section6 .section6-wrap .download > a {
    width: 250px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #888;
}
.section6 .section6-wrap .download > a:nth-child(1) {margin-right: 15px;}
.section6 .section6-wrap .download > a > h1 {font-size: 17px;font-weight: 600;color: #222;margin-right: 20px;}
.section6 .section6-wrap .content .download-wrap .item:nth-child(2) {padding-top: 50px;}
.section6 .section6-wrap .content .download-wrap .item:nth-child(3) {padding-top: 50px;}
.section6 .section6-wrap .content .download-wrap .item:last-child {padding-top: 90px;}
.section6 .section6-wrap .content .download-wrap .item > h1 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}
.section6 .section6-wrap .content .download-wrap .item > p {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    padding-top: 14px;
}
.section6 .section6-wrap .content .download-wrap .item:last-child {
    display: flex;
}
.section6 .section6-wrap .content .download-wrap .item > a:first-child {margin-right: 15px;}
.section6 .section6-wrap .content .download-wrap .item > a {
    width: 250px;
    height: 56px;
    border: 1px solid #888;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section6 .section6-wrap .content .download-wrap .item > a > span {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-right: 20px;
}
.section6 .section6-wrap .content .download-wrap .item > a > img {
  width: 24px;
  height: 24px;  
}

/* Section7 */
.section7 {}
.section7 .section7-wrap {
    padding-top: 120px;
    padding-bottom: 170px;

}
.section7 .section7-wrap > h1 {
    font-size: 35px;
    font-weight: 700;
    color: #222;
    text-align: center;
}
.section7 .section7-wrap .map-wrap {
    max-width: 1400px;
    height: 460px;
    padding-top: 50px;
    margin: 0 auto;
}
.section7 .section7-wrap .map-wrap #map {
    width: 100%;
    height: 100%;
}
.section7 .section7-wrap .text-wrap {max-width: 1400px; margin: 0 auto;}
.section7 .section7-wrap .text-wrap .item {}
.section7 .section7-wrap .text-wrap .item > h1 {
    padding-top: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.section7 .section7-wrap .text-wrap .item > p {
    padding-top: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
}
.section7 .section7-wrap > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 56px;
    margin: 0 auto;
    margin-top: 100px;
    border: 1px solid #222;
    color: #222;
}
.section7 .section7-wrap > a > span {
    font-weight: 600;
    font-size: 17px;
    
}

.section7 .section7-wrap > a:hover {
    background-color: #222;
    border: 0;
    color: #fff;
    transition: 0.3s;
}
@media all and (max-width: 1600px) {
    .section4 .section4-wrap .text-wrap .item {padding-top: 20px;}
    .section4 .section4-wrap .text-wrap .item > p {font-size: 14px;padding-top: 10px;}
    .section3 .section3-wrap .text-wrap > h1 > span {font-size: 100px;}
}
/* Mobile */
@media all and (max-width: 1024px) { 

    .section3 .section3-wrap {background-attachment: scroll;}

    h1 {font-size: calc(100vw * (44 / 1024));}
    p {font-size: calc(100vw * (36 / 1024));}

    .section1 .section1-wrap {height: 300px;}
    .section1 .section1-wrap .section1-background-image {background-image: url('../../image/company/company/m-company-top-img.jpg');}
    .section1 .section1-wrap .text-wrap {left: 0;transform: translate(0, -50%);padding-left: 24px;}
    .section1 .section1-wrap .text-wrap > h1 {font-size: 30px;}
    .section1 .section1-wrap .text-wrap > p {display: none;}

    .section2 .section2-wrap {padding: 70px 24px;}
    .section2 .section2-wrap .text-wrap {text-align: left;}
    .section2 .section2-wrap .text-wrap > h1 {font-size: 24px;}
    .section2 .section2-wrap .text-wrap > p {font-size: 15px;padding-top: 20px;}
    .section2 .section2-wrap .content {padding-top: 0;}
    .section2 .section2-wrap .content > ul {flex-direction: column;}
    .section2 .section2-wrap .content > ul > li {padding-top: 70px;}
    .section2 .section2-wrap .content > ul > li:nth-child(2) {border: 0;}

    .section2 .section2-wrap .content > ul > li > h1 {font-size: 20px;padding-top: 32px;}
    .section2 .section2-wrap .content > ul > li > p {font-size: 15px;padding-top: 10px;}

    .section3 .section3-wrap .text-wrap {text-align: left;transform: translate(0, -50%);left: 0;padding-left: 24px;padding-right: 24px;}
    .section3 .section3-wrap .text-wrap > h2 {font-size: 24px;}
    .section3 .section3-wrap .text-wrap > h1 {font-size: 40px;padding-top: 50px;}
    .section3 .section3-wrap .text-wrap > h1 > span {font-size: 45px;padding-top: 50px;letter-spacing: -10px;}
    .section3 .section3-wrap .text-wrap > p {font-size: 15px;padding-top: 20px;}

    .section4 .section4-wrap .text-wrap h1 {font-size: 24px;}
    .section4 .section4-wrap .text-wrap .item {padding-top: 50px;}
    .section4 .section4-wrap .text-wrap .item > h1 {font-size: 18px;}
    .section4 .section4-wrap .text-wrap .item > p {font-size: 15px;}

    .section4 .section4-wrap .text-wrap {width: auto;left: 0;padding: 0 24px;}

    .section5 .section5-wrap {padding: 70px 24px;}
    .section5 .section5-wrap > h1 {text-align: left;}
    .section5 .section5-wrap .content {padding-top: 20px;flex-direction: column;}
    .section5 .section5-wrap .content .item {padding-top: 50px;}
    .section5 .section5-wrap .content .item:nth-child(1) {padding-top: 0;}
    .section5 .section5-wrap .content .item:nth-child(2) {margin: 0;}
    .section5 .section5-wrap .content .item > img {width: 100%;height: auto;}
    .section5 .section5-wrap .content .item > h1 {padding-top: 20px;font-size: 18px;}
    .section5 .section5-wrap .content .item > p {font-size: 15px;}

    .section6 .section6-wrap {padding: 70px 24px;}
    .section6 .section6-wrap > h1 {text-align: left;}
    .section6 .section6-wrap .content {flex-direction: column;background-color: transparent;margin-top: 0;}
    .section6 .section6-wrap .content > div {border: 0;height: auto;top: 0;}
    
    .section6 .section6-wrap .content > div {width: 100%;margin-top: 40px;}
    .section6 .section6-wrap .content > div.ai-logo {margin-top: 70px;}
    .section6 .section6-wrap .content > div > h1 {left: 0;top: -30px;}
    .section6 .section6-wrap .content img {width: 100%;height: auto;}
    .section6 .section6-wrap .desc .item:nth-child(1) {padding-top: 70px;}
    .section6 .section6-wrap .desc .item {padding-top: 40px;}
    .section6 .section6-wrap .desc .item > h1 {font-size: 18px}
    .section6 .section6-wrap .desc .item > p {font-size: 15px;padding-top: 14px; }
    .section6 .section6-wrap .download > a:nth-child(1) {margin: 0;}
    .section6 .section6-wrap .download img {display: none;}
    .section6 .section6-wrap .download > a > h1 {margin: 0;}
    .section6 .section6-wrap .download {margin-top: 70px;}

    .section7 .section7-wrap {padding-top: 70px;padding-left: 24px;padding-right: 24px;}
    .section7 .section7-wrap > h1 {font-size: 24px;text-align: left;}
    .section7 .section7-wrap .map-wrap {padding-top: 20px;}
    .section7 .section7-wrap .text-wrap .item > h1 {padding-top: 40px;}
    .section7 .section7-wrap > a {background-color: #222;border: 0;color: #fff;width: 100%;}


    .main-dn .txt h3 {font-size: 50px;}
    /* .section3 {margin-top: 50px;} */
    p.tit {margin-top: 50px;}
}



/* animate */
@keyframes fadeInSlow {
    0% {opacity: 0;}
    100% {opacity: 1;transform: translateY(0);}
}




/* .section3 {background-color: black;} */
.section3 .section3-wrap {
    position: relative;
}
.section3 .section3-wrap .item {
    font-size: 3vw;
    position: sticky;
    mix-blend-mode: difference;
    color: #fff;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}
.section3 .section3-wrap .white-bg {
    height: 100vh;
    background-color: #000;
    background-image: url('../../image/company/company/section3-bg.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
    
}




.section3 {position: relative;}
.section3 .border {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    background-color: #000;
    height: 1.5px;
    z-index: 9999;

}
.main-dn .bg-box .bg {
    background-image: url('../../image/company/company/section3-bg.jpg');
    background-attachment: fixed;
    background-color: #000;
    position: relative;

}
/* ===== DN ===== */
.main-dn {
    min-height: 100vh;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.main-dn .txt {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    min-height: 30rem;
}
.main-dn .txt .tit {
    font-size: 35px;
    color: #222222;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.main-dn .txt .tit.opa {
    opacity: 0;
}
.main-dn .txt h3 {
    font-size: 180px;
    color: #222;
    font-weight: 900;
}
.main-dn .txt .desc {
    /* font-size: 1.8rem; */
    margin-top: 18px;
}

.main-dn .bg-box {
    width: 100%;
    position: absolute;
    bottom: 0;
    clip: rect(0, auto, auto, 0);
}
.main-dn .bg-box .txt {
    position: fixed;
    z-index: 2;
}
.main-dn .bg-box .txt > * {
    color: #fff;
}

.main-dn .bg-box .txt.txt02 {
    opacity: 0;
    min-height: auto;
}
.main-dn .bg-box .bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
.section3 .desc {
    font-size: 16px;
}
.section3 .bg-box .txt .tit {
    /* transform: translateY(50px); */
    transition: 0.25s;
    opacity: 0;
}
.section3 .bg-box.on .txt .tit {
    /* transform: translateY(0); */
    transition: 0.25s;
    opacity: 1;
}
.section3 .bg-box .txt .desc {
    transform: translateY(50px);
    transition: 0.5s;
    opacity: 0;
}
.section3 .bg-box.on .txt .desc {
    transform: translateY(0);
    transition: 0.5s;
    opacity: 1;
}


@media all and (max-width: 1024px) { 

    .section3 .section3-wrap {background-attachment: scroll;}

    h1 {font-size: calc(100vw * (44 / 1024));}
    p {font-size: calc(100vw * (36 / 1024));}

    .section1 .section1-wrap {height: 300px;}
    .section1 .section1-wrap .section1-background-image {background-image: url('../../image/company/company/m-company-top-img.jpg');}
    .section1 .section1-wrap .text-wrap {left: 0;transform: translate(0, -50%);padding-left: 24px;}
    .section1 .section1-wrap .text-wrap > h1 {font-size: 30px;}
    .section1 .section1-wrap .text-wrap > p {display: none;}

    .section2 .section2-wrap {padding: 70px 24px;}
    .section2 .section2-wrap .text-wrap {text-align: left;}
    .section2 .section2-wrap .text-wrap > h1 {font-size: 24px;}
    .section2 .section2-wrap .text-wrap > p {font-size: 15px;padding-top: 20px;}
    .section2 .section2-wrap .content {padding-top: 0;}
    .section2 .section2-wrap .content > ul {flex-direction: column;}
    .section2 .section2-wrap .content > ul > li {padding-top: 70px;}
    .section2 .section2-wrap .content > ul > li:nth-child(2) {border: 0;}

    .section2 .section2-wrap .content > ul > li > h1 {font-size: 20px;padding-top: 32px;}
    .section2 .section2-wrap .content > ul > li > p {font-size: 15px;padding-top: 10px;}

    .section3 .section3-wrap .text-wrap {text-align: left;transform: translate(0, -50%);left: 0;padding-left: 24px;padding-right: 24px;}
    .section3 .section3-wrap .text-wrap > h2 {font-size: 24px;}
    .section3 .section3-wrap .text-wrap > h1 {font-size: 40px;padding-top: 50px;}
    .section3 .section3-wrap .text-wrap > h1 > span {font-size: 45px;padding-top: 50px;letter-spacing: -10px;}
    .section3 .section3-wrap .text-wrap > p {font-size: 15px;padding-top: 20px;}

    .section4 .section4-wrap .text-wrap h1 {font-size: 24px;}
    .section4 .section4-wrap .text-wrap .item {padding-top: 50px;}
    .section4 .section4-wrap .text-wrap .item > h1 {font-size: 18px;}
    .section4 .section4-wrap .text-wrap .item > p {font-size: 15px;}

    .section4 .section4-wrap .text-wrap {width: auto;left: 0;padding: 0 24px;}

    .section5 .section5-wrap {padding: 70px 24px;}
    .section5 .section5-wrap > h1 {text-align: left;}
    .section5 .section5-wrap .content {padding-top: 20px;flex-direction: column;}
    .section5 .section5-wrap .content .item {padding-top: 50px;}
    .section5 .section5-wrap .content .item:nth-child(1) {padding-top: 0;}
    .section5 .section5-wrap .content .item:nth-child(2) {margin: 0;}
    .section5 .section5-wrap .content .item > img {width: 100%;height: auto;}
    .section5 .section5-wrap .content .item > h1 {padding-top: 20px;font-size: 18px;}
    .section5 .section5-wrap .content .item > p {font-size: 15px;}

    .section6 .section6-wrap {padding: 70px 24px;}
    .section6 .section6-wrap > h1 {text-align: left;}
    .section6 .section6-wrap .content {flex-direction: column;background-color: transparent;margin-top: 0;}
    .section6 .section6-wrap .content > div {border: 0;height: auto;top: 0;}
    
    .section6 .section6-wrap .content > div {width: 100%;margin-top: 40px;}
    .section6 .section6-wrap .content > div.ai-logo {margin-top: 70px;}
    .section6 .section6-wrap .content > div > h1 {left: 0;top: -30px;}
    .section6 .section6-wrap .content img {width: 100%;height: auto;}
    .section6 .section6-wrap .desc .item:nth-child(1) {padding-top: 70px;}
    .section6 .section6-wrap .desc .item {padding-top: 40px;}
    .section6 .section6-wrap .desc .item > h1 {font-size: 18px}
    .section6 .section6-wrap .desc .item > p {font-size: 15px;padding-top: 14px; }
    .section6 .section6-wrap .download > a:nth-child(1) {margin: 0;}
    .section6 .section6-wrap .download img {display: none;}
    .section6 .section6-wrap .download > a > h1 {margin: 0;}
    .section6 .section6-wrap .download {margin-top: 70px;}

    .section7 .section7-wrap {padding-top: 70px;padding-left: 24px;padding-right: 24px;}
    .section7 .section7-wrap > h1 {font-size: 24px;text-align: left;}
    .section7 .section7-wrap .map-wrap {padding-top: 20px;}
    .section7 .section7-wrap .text-wrap .item > h1 {padding-top: 40px;}
    .section7 .section7-wrap > a {background-color: #222;border: 0;color: #fff;width: 100%;}


    .main-dn .txt h3 {font-size: 40px;}
    .main-dn .txt .tit {font-size: 24px;}
    .main-dn .txt .desc {font-size: 15px;}
}