html{font-family: 'Poppins';}

/* sec01 */
.sunproWrap .sunWrap{max-width: 1280px; width: 90%; margin: 0 auto}
.sunproWrap .sec01 {background: url('../img/main_bg.jpg') no-repeat; background-size: cover; background-position: center; position: relative;  animation: bgani 2s both; }
.sunproWrap .sec01 .sunWrap {text-align: center; height: 135vh; padding-bottom: 100px; }
.sunproWrap .sec01 .sunWrap .imgbox{position: sticky;  position: -webkit-sticky; top: 22%; left: 50%; z-index: 2;}
.sunproWrap .sec01 .sunWrap .imgbox img{z-index: 1; width: 40%;}
.sunproWrap .sec01 .sunWrap .textbox {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: -8%; }
.sunproWrap .sec01 .sunWrap .textbox span{font-size: 13vw; color: #fff; text-transform: uppercase; font-weight: 700;z-index: 1;}
.sunproWrap .sec01 .sunWrap .textbox span:nth-of-type(2){font-family: 'baskvill'; font-weight: 400; z-index: 2; font-size: 11vw;}


@keyframes bgani {
    0%{
        background-size: 115% 115%;
    }
    100%{
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 1300px){
    .sunproWrap .sec01 .sunWrap{height: auto;}
}

@media screen and (max-width: 900px){
    .sunproWrap .sec01 .sunWrap{height: 60vh;}
}

@media screen and (max-width: 600px){
    .sunproWrap .sec01 .sunWrap .textbox{margin-top: 22%;}
}

/* sec02 */
.sunproWrap .sec02 {padding: 150px 0; overflow: hidden;}
.sunproWrap .sec02 .flex{position: relative;}
.sunproWrap .sec02 .flex .lef{position: absolute; left: -18%; top: -11%; right: 43%;}
.sunproWrap .sec02 .flex .lef img{width: 88%;}
.sunproWrap .sec02 .flex .rig{transform: translateX(22px);}
.sunproWrap .sec02 .flex .rig span{font-size: 10.5vw; color: #d80606; display: block; text-align: right; text-transform: uppercase; font-weight: 900;}
.sunproWrap .sec02 .flex .rig span:nth-of-type(2){color: #000;}
.sunproWrap .sec02 .flex .rig span:nth-of-type(3){color: #7b7b7b;}

@media screen and (max-width: 900px){
    .sunproWrap .sec02{padding: 15% 0;}
}

/* sec03 */
.sunproWrap .sec03{padding: 150px 0; overflow: hidden;}
.sunproWrap .sec03 .bg_{width: 42%; height: 200px; background-color: #d80606;}
.sunproWrap .sec03 .sunWrap {margin-top: -72px;}
.sunproWrap .sec03 .sunWrap strong{font-size: 120px; font-weight: 900; text-transform: uppercase; display: block; margin-bottom: 35px;}
.sunproWrap .sec03 .sunWrap p{font-size: 22px; font-weight: 500; line-height: calc(40/22); font-family: 'Noto Sans KR', sans-serif;}
.sunproWrap .sec03 .imglist{display: flex; margin-top: 150px;}
.sunproWrap .sec03 .imglist li{width: 90%;}
.sunproWrap .sec03 .imglist li:nth-of-type(1){margin-top: 25%;}
.sunproWrap .sec03 .imglist li:nth-of-type(2){margin-top: 10%;}
.sunproWrap .sec03 .imglist li img{width: 90%;}
.sunproWrap .sec03 .logobox{margin-top: -97px; text-align: right; margin-right: -100px;}
.sunproWrap .sec03 .logobox img{width: 62%;}

.sunproWrap .sec03 > a{display: inline-flex; justify-content: center; align-items: center; position: relative; top: auto; width: 250px; float: right; margin-top: -16%; right: 12%; z-index: 99; }
.sunproWrap .sec03 > a::after{content: ""; display: block; padding-bottom: 100%;}
.sunproWrap .sec03 > a .circlewrap{width: 100%; background-size: cover; position: absolute; top: 0; left: 0; animation: rotate 8s linear infinite; text-transform: uppercase; font-weight: 600;}
.sunproWrap .sec03 > a .circlewrap svg{transition: 0.3s;}
.sunproWrap .sec03 > a dl{text-align: center;}
.sunproWrap .sec03 > a dl dt{transition: 0.3s;}
.sunproWrap .sec03 > a dl dt .onimg{opacity: 0; display: none; transition: 0.3s;}
.sunproWrap .sec03 > a dl dt img{transition: 0.3s;}
.sunproWrap .sec03 > a dl dd{font-size: 17px; margin-top: 12px; font-weight: 600; transition: 0.3s; font-family: 'Noto Sans KR', sans-serif;}
.sunproWrap .sec03 > a:hover svg{fill: #d80606;}
.sunproWrap .sec03 > a:hover dt .offimg{opacity: 0; display: none;}
.sunproWrap .sec03 > a:hover dt .onimg{opacity: 1; display: block; margin: 0 auto;}
.sunproWrap .sec03 > a:hover dl dd{color: #d80606;}

@keyframes rotate{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

@media screen and (max-width: 1150px){
    .sunproWrap .sec03 > a{width: 150px; margin-top: -30%; right: 20px;}
    .sunproWrap .sec03 > a dl dt img{width: 45%;}
    .sunproWrap .sec03 > a dl dd{font-size: 13px;}
}

@media screen and (max-width: 900px){
    .sunproWrap .sec03{padding: 15% 0 0;}
    .sunproWrap .sec03 .bg_{height: 100px;}
    .sunproWrap .sec03 .sunWrap{margin-top: -33px;}
    .sunproWrap .sec03 .sunWrap strong{font-size: 10vw; margin-bottom: 16px;}
    .sunproWrap .sec03 .sunWrap p{font-size: 15px;}

    .sunproWrap .sec03 .imglist{margin-top: 70px;}
    .sunproWrap .sec03 .logobox{margin-top: 0;}
}

@media screen and (max-width: 600px){
    .sunproWrap .sec03 .imglist{margin-top: 40px;}
    .sunproWrap .sec03 .sunWrap p{font-size: 13px; word-break: keep-all; line-height: calc(28/13);}
    .sunproWrap .sec03 .sunWrap p br{display: none;}
}

@media screen and (max-width: 400px){
    .sunproWrap .sec03 > a{width: 100px; }
    .sunproWrap .sec03 > a dl dt img{width: 30%;}
    .sunproWrap .sec03 > a:hover dl dd{font-size: 10px;}
}
 
/* sec04 */
/* .sunproWrap .sec04_mo{display: none;} */
.sunproWrap .sec04 {padding: 80px 0; height: 100vh;}
/* .sunproWrap .sec04 ul {position: relative;}
.sunproWrap .sec04 ul li{position: absolute;} */
.sunproWrap .sec04 .imgani {position: relative;}
.sunproWrap .sec04 .imgani li{position: relative;}
.sunproWrap .sec04 .imgani li:nth-of-type(2){position: absolute; top: 12%;left: 5%;width: 100%;}
.sunproWrap .sec04 .imgani li:nth-of-type(3){position: absolute; top: 24%;left: 10%; width: 100%;}
/* .sunproWrap .sec04 .imgani li img{width: 75%;} */
.sunproWrap .sec04 .txtlist {display: flex; align-items: center; margin-bottom: 50px;}
.sunproWrap .sec04 .txtlist li {margin-right: 90px;}
.sunproWrap .sec04 .txtlist li:nth-of-type(3){margin-right: 0;}
.sunproWrap .sec04 .txtlist li dl dt{font-size: 50px; text-transform: uppercase; font-weight: 700; margin-bottom: 20px;}
.sunproWrap .sec04 .txtlist li dl dd{font-size: 30px; font-family: 'Noto Sans KR', sans-serif;}

@media screen and (max-width: 900px){
    .sunproWrap .sec04{padding: 0;}
    .sunproWrap .sec04 .sunWrap{display: flex; flex-direction: column; justify-content: center; height: 100%; margin-top: -15%;}

    .sunproWrap .sec04 .imgani li:nth-of-type(2){top: 20%;}
    .sunproWrap .sec04 .imgani li:nth-of-type(3){top: 40%;}
    .sunproWrap .sec04 .imgani li img{width: 91%;}

    .sunproWrap .sec04 .txtlist{margin-top: 40px;}
    .sunproWrap .sec04 .txtlist li{margin-right: 25px;}
    .sunproWrap .sec04 .txtlist li dl dt{font-size: 22px; margin-bottom: 15px;}
    .sunproWrap .sec04 .txtlist li dl dd{font-size: 15px;}
}

/* sec05 */
.sunproWrap .sec05{padding: 150px 0; overflow: hidden;}
.sunproWrap .sec05 > dl {font-size: 10vw; color: rgba(216, 6, 6, 0.3); text-transform: uppercase; font-weight: 800; max-width: 1520px; width: 90%; display: block; margin: 0 auto;}
.sunproWrap .sec05 dl dt{}
.sunproWrap .sec05 dl dd{ margin-left: 56%;}
.sunproWrap .sec05 .sunWrap ul{display: flex; margin-top: 50px; width: 100%; position: relative; flex-wrap: nowrap;}
.sunproWrap .sec05 .sunWrap ul li{width: calc(40% + 17px); background-color: #7d7d7d; border-radius: 50%; position: absolute;}
.sunproWrap .sec05 .sunWrap ul li:nth-of-type(1){position: relative;}
.sunproWrap .sec05 .sunWrap ul li:nth-of-type(2){background-color: #d80606; left: calc(30% - 10px);}
.sunproWrap .sec05 .sunWrap ul li:nth-of-type(3){background-color: #000; left: calc(60% - 20px);}
.sunproWrap .sec05 .sunWrap ul li::after{content: ""; display: block; padding-bottom: 100%;}

@media screen and (max-width: 900px){
    .sunproWrap .sec05{padding-top: 0;}
    .sunproWrap .sec05 dl dd{margin-left: 59%;}
}

.index-Se5 .tx dl dd{font-family: 'Noto Sans KR', sans-serif;}