@charset "utf-8";

/*레인보우필름*/
#container .subpage_top_title.index{position: relative;}
#container .subpage_top_title.index .bg{background: url(./img/bg.png) no-repeat bottom center / cover;position: absolute; height: 65%; bottom: 0; left: 0; width: 100%;}
.wideimg{width: 100%; height: 100vh; padding: 160px 200px 160px;}
.wideimg .tit{font-size: 80px; line-height: 1.3;margin-bottom: 56px;font-weight: bold;}
.wideimg .subtext{line-height: 1.5;padding: 0 8px 0; opacity: 0.8;}
.wideimg.img1{background: url(./img/bg_index1.png) no-repeat center center / cover; text-align: left;}
.wideimg.img2{background: url(./img/bg_index2.png) no-repeat center center / cover; text-align: right;}
.wideimg{opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.wideimg.show{opacity: 1;transform: translateY(0);}
.sub_container.index .d-flex{display: flex; justify-content: space-between; gap: 24px;}
.sub_container.index .d-flex .cont{border-radius: 8px; width: calc((100% - 24px) / 2); color: white; padding: 560px 56px 56px;}
.sub_container.index .d-flex .cont .tit{font-weight: bold; line-height: 1.1; font-size: 60px; margin-bottom: 32px; z-index: 3; position: relative;}
.sub_container.index .d-flex .cont .subtext{line-height: 1.5; opacity: .8;}
.sub_container.index .d-flex .cont1{background: url(./img/bg_index3.png) no-repeat center center / cover;}
.sub_container.index .d-flex .cont2{background: url(./img/bg_index4.png) no-repeat center center / cover;}
.sub_container.index .d-flex .cont{transition: background 0.4s ease-in-out, transform 0.3s ease-in-out;}
.sub_container.index .d-flex .cont:hover{background-blend-mode: multiply;background-color: rgba(0, 0, 0, 0.4);transform: scale(1.02);}
.sub_container.index .d-flex .cont .tit, .sub_container.index .d-flex .cont .subtext{transition: color 0.3s ease-in-out;}
.wideimg.img3{background: url(./img/bg_index5.png) no-repeat center center / cover; height: auto; margin-top: 160px;}
.wideimg.img3 .tit, .wideimg.img3 .subtext{text-align: center; color: white;}
.wideimg.img3 .d-flex{display: flex; flex-wrap: wrap; gap: 24px; margin-top: 80px;}
.wideimg.img3 .d-flex div{padding: 56px; border-radius: 8px; height: 400px; width: calc((100% - 48px) / 3);}
.wideimg.img3 .d-flex div b{font-size: 60px; line-height: 1.1; margin-bottom: 24px; display: block;}
.wideimg.img3 .d-flex div span{opacity: .8; line-height: 1.5; display: block;}
.wideimg.img3 .d-flex div:nth-child(1){background: url(./img/icon_index1.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:nth-child(2){background: url(./img/icon_index2.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:nth-child(3){background: url(./img/icon_index3.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:nth-child(4){background: url(./img/icon_index4.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:nth-child(5){background: url(./img/icon_index5.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:nth-child(6){background: url(./img/icon_index6.png) no-repeat right 56px bottom 56px white;}
.wideimg.img3 .d-flex div:hover b,.wideimg.img3 .d-flex div:hover span{color: white;}
.wideimg.img3 .d-flex div:hover:nth-child(1){background: url(./img/icon_index1_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div:hover:nth-child(2){background: url(./img/icon_index2_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div:hover:nth-child(3){background: url(./img/icon_index3_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div:hover:nth-child(4){background: url(./img/icon_index4_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div:hover:nth-child(5){background: url(./img/icon_index5_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div:hover:nth-child(6){background: url(./img/icon_index6_1.png) no-repeat right 56px bottom 56px #3AB6F3;}
.wideimg.img3 .d-flex div{position: relative;transition: background 0.4s ease-in-out, color 0.4s ease-in-out;}
.wideimg.img3 .d-flex div b,.wideimg.img3 .d-flex div span{transition: color 0.4s ease-in-out;}
.wideimg.img3 .d-flex div:hover{background-color: #3AB6F3;}
.wideimg.img3 .d-flex div::after{content: "";position: absolute;top: 0;right: 56px;bottom: 56px;background-repeat: no-repeat;background-position: right bottom;background-size: contain;transition: opacity 0.4s ease-in-out;opacity: 1;}
.wideimg.img3 .d-flex div:hover::after{opacity: 0;}
.wideimg.img3 .d-flex div:hover::before{content: "";position: absolute;top: 0;right: 56px;bottom: 56px;width: 100px;height: 100px;background-repeat: no-repeat;background-position: right bottom;background-size: contain;opacity: 0;transition: opacity 0.4s ease-in-out;opacity: 1;}
.sub_container.index2{text-align: center;}
.sub_container.index2 .tit{margin-top: 80px; font-size: 80px; line-height: 1.3; margin-bottom: 80px; font-weight: bold;}
.sub_container.index2 .btns{display: flex; justify-content: center; gap: 24px;}
.sub_container.index2 .btns a{display: inline-block; width: 400px; line-height: 80px; height: 80px; padding: 0 40px 0; cursor: pointer; color: white; font-weight: bold; border-radius: 40px; font-size: 22px; text-align: left;}
.sub_container.index2 .btns a span{float: right;}
.sub_container.index2 .btns a:nth-child(1){background: #3AB6F3;}
.sub_container.index2 .btns a:nth-child(2){background: #8AD598;}

@keyframes fadeUpScroll {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* 1800px 이하일때 */
@media (max-width: 1800px){
    .wideimg.img3 .d-flex div b{font-size: 48px;}
}

/* 1600px 이하일때 */
@media (max-width: 1600px){
    .wideimg.img3 .d-flex div{width: calc((100% - 24px) / 2);}
    .wideimg{padding: 10%;}
    .wideimg .tit{font-size: 72px;margin-bottom:40px}
}

/* 1200px 이하일때 */
@media (max-width: 1200px){
    .wideimg{padding: 10% 5%;}
    .wideimg .tit{font-size: 56px; line-height: 1.2; margin-bottom: 32px;}
    .sub_container.index .d-flex .cont .tit{font-size: 48px;}
    .sub_container.index .d-flex .cont2 .tit br{display: none;}
    .sub_container.index2 .tit{font-size: 56px; word-break: keep-all;}
}

/* 900px 이하일때 */
@media (max-width: 900px){
    .wideimg.img3 .d-flex div{padding: 40px;}
    .wideimg.img3 .d-flex div b{font-size: 40px;}
    .sub_container.index .d-flex .cont .tit{font-size: 40px;}
    .sub_container.index .d-flex .cont{padding: 340px 32px 40px; width: 100%;}
    .sub_container.index .d-flex{flex-wrap: wrap;}
    .sub_container.index .d-flex .cont .tit br{display: none;}
    .sub_container.index .d-flex .cont .tit{margin-bottom: 16px;}
    .wideimg.img1{background-position: right -150px center !important;}
    .wideimg.img2{background-position: left -150px center !important;}
    .wideimg.img3 .d-flex div{width: 100%; height: 280px;}
    .sub_container.index2 .btns{gap: 16px;}
    .sub_container.index2 .tit{margin: 40px 0 40px; font-size: 40px;}
    .sub_container.index2 img{height: 40px;}
    .wideimg .tit{font-size: 40px; margin-bottom: 24px;}
    .wideimg.img3 .d-flex div span{font-size: 16px; line-height: 1.3;}
    .sub_container.index2 .btns a{height: 60px; line-height: 60px; font-size: 16px; padding: 0 24px 0;}
    #container .subpage_top_title.index .bg{height: 70%;}
}

/* 500px 이하일때 */
@media (max-width: 500px){
    .wideimg.img1 .tit, .wideimg.img1 .subtext{color: white;}
    .wideimg .subtext{word-break: keep-all;}
    .wideimg{padding-top: 16%;}
    .wideimg.img3{margin-top: 120px;}
    .wideimg.img3 .d-flex div{padding: 32px;}
    .sub_container.index2 .tit{font-size: 32px;}
    .sub_container.index2 .btns{flex-wrap: wrap; gap: 8px;}
    .sub_container.index2 .btns a{width: 100%;}
    .wideimg .subtext{font-size: 16px;}
    .sub_container.index .d-flex .cont .subtext{font-size: 16px;}
    .wideimg.img3 .d-flex{gap: 16px;margin-top: 40px;}
}

/* 400px 이하일때 */
@media (max-width: 400px){
    .wideimg.img3 .d-flex div b{font-size: 32px;}
    .wideimg.img3 .d-flex div{background-position:  right 32px bottom 32px !important; background-size: 52px !important; height: 224px;}
    .wideimg .tit{font-size: 32px;}
    .sub_container.index .d-flex .cont .tit{font-size: 32px;}
    #container .subpage_top_title.index .bg{height: 60%;}
}