@charset "utf-8";
.hidden{visibility: hidden;}
.img-box img{width:100%;}
body.main #container > .inner{padding:0; max-width: 100%;}
main section{padding:12rem 0;}
main section .inner{padding:0 6%;}
main section .tit-area{padding-bottom:4rem; text-align: center;}
main section .tit-area p{font-size:2.4rem;}
main section .tit-area h3{font-size:5.2rem;}
main section .tit-area h3 span{}
main section .tit-area h4{font-size:4rem; font-weight:800;}

.sec0{background:#f5f5f5; padding:0 0 20px; text-align:center;}
.sec0 .bg-white{padding:5% 0;background:#fff; border-radius: 0 0 100px 100px; box-shadow:0 0 10px #aaa;}
.sec0 div.primary{padding-bottom:16px; font-size:2rem; }
.sec0 .txt-area{padding-bottom:30px;}
.sec0 .m-title-area .txt-sub{font-size:6rem;}
.sec0 .m-title-area p.txt.bold{padding:10px 0;font-size:8.2rem; line-height:1.2;}
.sec0 .m-title-area p.txt.bold span{display:block;}
.sec0 .m-info-area p{font-size:2.4rem; color:#999;}
.sec0 .m-btn-area a{display:block; width:500px; border-radius: 500px; padding:20px; font-size:2.4rem; color:#fff;}


.sec1{background:#f5f5f5;}
.sec1 .tit-area{margin-bottom:1rem; text-align: left;}
.sec1 .tit-area h4{font-size:3.2rem; text-align: center;}
.sec1 .box .input-area{width:80%; margin:0 auto;}
.sec1 .input-area dl{padding:10px 0;}
.sec1 .input-area dt{padding-bottom:5px; font-weight:800; }
.sec1 .input-area dd{}
.sec1 .box{width:90%; padding:6%; margin:0 auto; background:#fff; box-sizing: border-box;}
.sec1 .box .input-area input[type="text"]{width:100%; padding:10px; border-radius:5px; border:1px solid #ccc;}
.sec1 .box .btn{display:block; width:80%; height:auto; margin:2rem auto 0; border-radius:10rem; line-height:1; padding:1.5rem; color:#fff;}
.sec1 .input-area .btn-radio dd p{width:33%; position:relative;}
.sec1 .input-area input[type="radio"] {width: 100%; height: 100%; position: absolute; opacity: 0; cursor: pointer;}
.sec1 .input-area input[type="radio"] + span {display: inline-block; width:100%;
padding: 15px 10px; border: 1px solid #dfdfdf; background: #eee; text-align: center; cursor: pointer; }
.sec1 .input-area input[type="radio"]:checked + span {background: #333; color: #fff;}
.sec1 .captcha-area{padding-top:2rem;}

.sec2{background:#fff; padding:6% 6% 0;}
.sec2 .green-box{padding:5% 8%; background:#fff; border:8px solid #409553; border-radius:4rem; font-size:2rem; box-shadow:0 -5px 5px #ccc; font-family: "pretendard"!important;}
.sec2 .green-box .qa-box{width:100%; padding:20px 0;}
.sec2 .green-box .qa-box > div{width:25%; text-align: center;}
.sec2 .green-box .qa-box .qa-status{max-width:12rem;}
.sec2 .green-box .qa-box .qa-status span.status{display:block; padding:8px 0 5px; border:1px solid #409553; color:#409553; border-radius:100px;}
.sec2 .green-box .qa-box .qa-status span.status.on{background:#409553; color:#fff}
.swiper { width: 100%; height:320px; }
.swiper-wrapper{height:100%;}
.swiper-slide {height: fit-content !important;}

.sec3 {}
.sec3 .tit-area h4 span.txt-big{font-size:4.4rem;}
.sec3 .cont-area ul{padding:3% 0;}
.sec3 .cont-area ul > li{width:25%; text-align:center; }
.sec3 .cont-area ul li{display:flex; flex-direction: column; align-items: center;}
.sec3 .cont-area ul li dt{display:flex; flex-direction: column; align-items: center;font-weight:800;}
.sec3 .cont-area ul li dt p{font-size:2.4rem;}
.sec3 .cont-area ul li dt p span{  font-size:6rem;}

.sec4{overflow: hidden;}
.sec4 .star-area{padding-bottom:4rem; font-size:3rem;}
.sec4 .cont-area{}
.rolling-container {margin-bottom: 30px;}
.rolling-container,
.rolling-container2 { display: flex; }
.rolling-container .rolling-list ul,
.rolling-container2 .rolling-list2 ul { display: flex; }
.rolling-container .rolling-list ul li,
.rolling-container2 .rolling-list2 ul li {
position: relative; width: 440px; height: 320px; box-sizing: border-box; border-radius: 20px; margin: 0 15px;
padding: 0.3%; background: #fff; border: 1px solid #E3E3E3; box-shadow: 3px 12px 8px hsla(0, 0%, 46%, .1)
}
.rolling-container .img-box,
.rolling-container2 .img-box{width: 100%; height: 180px; overflow: hidden;  border-radius: 0.5rem; margin-bottom: 0.5rem;}
.rolling-container .img-box img,
.rolling-container2 .img-box img{height:180px;}
.rolling-text {font-size: 1.2rem; color: #696969; text-align: left; word-break: keep-all; line-height: 1.2;}
.rolling-name {font-size: 1.2rem; color: #696969; padding-bottom:0.3%}
.rolling-list.original { animation: rollingleft1 60s linear infinite;}
.rolling-list.clone {animation: rollingleft2 60s linear infinite;}
.rolling-list2 {display: inline-flex;}
.rolling-container2 .original { animation: rollingRight 40s linear infinite; }
.rolling-container2 .clone { animation: rollingRight 40s linear infinite;}
  
/* 애니메이션을 오른쪽으로 빈틈없이 반복 */
@keyframes rollingRight {
    0% {transform: translateX(-100%);}
    100% { transform: translateX(0%);}
    }

    @keyframes rollingleft1 {
    0% {transform: translateX(0);}
    50% { transform: translateX(-100%);}
    50.01% { transform: translateX(100%);}
    100% {transform: translateX(0);}
}

@keyframes rollingleft2 {
    0% {transition: translateX(0);}
    100% { transform: translateX(-200%);}
}
  


.sec5{}
main section.sec5 .tit-area h3{font-weight:500;}
.sec5 .tit-area h3 span.dot{position:relative;}
.sec5 .tit-area h3 span.dot:before{position:absolute; width:10px; height:10px; border-radius: 10px; background:#409553; display: block; top:-10px; left:45%; content: "";} 
.sec5 .sub-tit{text-align:center; font-weight:bold; font-size:4rem;}
.sec5 .sub-tit .ch-num{width:8rem; height:8rem; margin-bottom:2rem; border-radius:50%; overflow:hidden;  line-height:8.5rem; font-size:3.6rem; text-align: center; color:white; color:#fff;}
.sec5 .sub-cont-area{padding-top:5rem;}
.sec5 .cont-box{padding:4% 0; text-align: center;}
.sec5 .cont-box:nth-child(1){padding-top:0;}

.sec5 .cont-one .tb-gray{width:38%; padding:0 20px; background:#ccc; border-radius: 3rem; font-size:2rem;}
.sec5 .cont-one .tb-gray .tb-tit{width:100%; padding:20px; font-size:2.2rem; color:#666;}
.sec5 .cont-one .tb-gray .tb-cont {width:100%;}
.sec5 .cont-one .tb-gray .tb-cont li{padding:2rem 2%; border-top:1px solid#666; color:#999;}
.sec5 .cont-one .tb-primary{width:40%; background:#fff;border-radius: 3rem; overflow: hidden; margin-left:-1%; font-size:2.2rem; z-index:1;}
.sec5 .cont-one .tb-primary .tb-tit{width:100%; padding:3rem; font-size:3.2rem; }
.sec5 .cont-one .tb-primary .tb-cont {width:100%; padding:0 2%; }
.sec5 .cont-one .tb-primary .tb-cont li{ width:100%; padding:2rem 2%; border-top:1px solid#666;}
.sec5 .cont-one .tb-primary .tb-cont li:first{border:none;}

.sec5 .cont-box.cont-two{background:#f5f5f5;}
.sec5 .cont-box.cont-two .upper-box{width:36%; padding:2%; }
.sec5 .cont-box.cont-two .upper-box > p.bold{padding-top:1rem; font-size:2rem;}
.sec5 .cont-box.cont-two .upper-box .graph-box{min-height:24rem; padding:0 4%;border-bottom:1px solid #333;}
.sec5 .cont-box.cont-two .upper-box .graph-box .left-box,
.sec5 .cont-box.cont-two .upper-box .graph-box .right-box{position:relative; width:8rem; margin:0 3rem; word-break: break-all; text-align: center;}
.sec5 .cont-box.cont-two .upper-box .graph-box .right-box:before{width:8rem; height:8rem; display:block; position:absolute; top:3rem; left:-9rem; background:url("../../basic/img/main/arrowup.png") center center no-repeat; background-size:contain; content: "";z-index:1;}

.sec5 .cont-box.cont-two .upper-box .graph-box .upcont{height: 0; padding:0 0; display:flex; flex-direction: column; align-items: center; justify-content: center; transition: 1s ease-out; overflow: hidden;}
.sec5 .cont-box.cont-two .upper-box .graph-box .bg-lightgray{height:fit-content; padding:1.5rem 0;}
.sec5 .cont-box.cont-two .upper-box:nth-child(1) .graph-box .bg-lightgray{padding:3rem 0;}
.sec5 .cont-box.cont-two .upper-box .graph-box .bg-third.active{height: 20rem; padding:6rem 1rem;}
.sec5 .cont-box.cont-two .upper-box .graph-box .txt-tiny{display:block; font-size:1.2rem;}

.sec5 .cont-box.cont-thr .sub-cont-area{font-size:2.4rem;}
.sec5 .cont-box.cont-thr .percent-area {padding-top:5rem;}
.sec5 .cont-box.cont-thr .percent-area .txt-bignum{line-height:0.9;font-weight:700; font-size:18rem;}
.sec5 .cont-box.cont-thr .percent-area .black{font-size:10rem;}

.sec6{background:#333; color:#fff;}
.sec6 .gold{background: linear-gradient(#C8A31A, #E3CE5D, #95631A, #C08A24); color: transparent; -webkit-background-clip: text;}
.sec6 .gold-area{padding-bottom:6rem;}
.sec6 .gold-area .goldnum{width:30%; background:url("")}
.sec6 .gold-area .gold-txt{width:50%; padding:0 2rem; font-size:2.4rem;}
.sec6 .gold-area .gold-txt .gold{font-size:4rem; padding-bottom:1rem;}
.sec6 .cont .cont-area{text-align:center; font-size:3.2rem;}
.sec6 .cont .cont-area .certi-list{padding-top:5rem;}
.sec6 .cont .cont-area .certi-box{width:30%; padding:1rem; background: linear-gradient(#C8A31A, #E3CE5D, #95631A, #C08A24);}
.sec6 .cont .cont-area .certi-box img-box{width:100%;}

.sec7{font-size:3rem; text-align: center;}
.sec7 .cont-btn{padding-top:3rem;}
.sec7 .cont-btn a{display:block; width:500px; margin:1rem; border-radius: 5px; padding:1rem 3rem;}

@media (max-width: 1420px) {

}

@media (max-width: 1280px) {
    
    

}

@media (max-width: 1024px) {
    .only-box{font-size:2rem;}
    main section{padding:8rem 0;}
    main section .inner{padding:4%;}
    main section .tit-area h3{font-size:4rem;}
    main section .tit-area h4{font-size:3rem;}
    main section .tit-area p{font-size:1.8rem;}

    .sec0 .bg-white{border-radius:0 0 80px 80px;}
    .sec0 .m-title-area .txt-sub{font-size:4rem;}
    .sec0 .m-title-area p.txt.bold{font-size:6rem;}
    .sec0 .m-info-area p{font-size:1.6rem;}
    .sec0 .m-btn-area{width:60%;}
    .sec0 .m-btn-area a{width:100%; padding:10px;}

    .sec1 .box{width:100%;}
    .sec1 .box .input-area{width:100%;}
    .sec3 .cont-area ul{flex-wrap:wrap;}
    .sec3 .cont-area ul > li{width:50%; padding:3%;}
    
    .sec4 .star-area{padding-bottom:2rem; font-size:3rem;}
    
    .sec5 .sub-tit .ch-num{width:6rem; height:6rem; line-height:6.5rem; font-size:3rem;}
    .sec5 .cont-box.cont-two .upper-box{width:50%;}
    .sec5 .cont-one .tb-gray{width:45%;}
    .sec5 .cont-one .tb-primary{width:50%;}
    .sec5 .cont-one .tb-gray .tb-tit{font-size:2rem; padding:1.4rem;}
    .sec5 .cont-one .tb-primary .tb-tit{font-size:2.4rem; padding:2rem;}
    .sec5 .cont-box.cont-thr .percent-area .txt-bignum{font-size:14rem;}
    .sec5 .cont-box.cont-thr .percent-area .black{font-size:8rem;}
    
    .sec6 .cont .cont-area{font-size:2.2rem;}
    .sec6 .gold-area{flex-direction:column;}
    .sec6 .gold-area .goldnum{width:60%; max-width: 28rem; margin-bottom:2rem;}
    .sec6 .gold-area .gold-txt{width:auto; text-align: center; padding:0; font-size:1.8rem;}
    .sec6 .gold-area .gold-txt .gold{font-size:3.6rem;}
    .sec6 .cont .cont-area{font-size:1.8rem}
    .sec6 .cont .cont-area .certi-list{padding-top:3rem;}
    .sec6 .cont .cont-area .certi-box{padding:1%;}
    
    .sec7 .cont-btn a{width:40rem;}
    
}

@media (max-width: 860px) {
    .sec2 .green-box{padding:4%;}
}
@media (max-width: 768px) {
    .m-hidden{display:none;}
    main section{padding:4rem 0;}
    main section .tit-area{padding-bottom:2rem;}
    main section .tit-area h3{font-size:3rem;}
    main section .tit-area h4{font-size:2.4rem;}

    .sec0 .bg-white{border-radius:0 0 40px 40px;}
    .sec0 div.primary{font-size:1.8rem;}
    .sec0 .m-title-area .txt-sub{font-size:3rem;}
    .sec0 .m-title-area p.txt.bold{font-size:4.8rem;}
    .sec0 .m-info-area p{font-size:1.2rem;}
    .sec0 .m-btn-area{width:85%;}
    .sec0 .m-btn-area a{font-size:2rem;}

    .sec1 .box{width:100%;}
    .sec1 .tit-area{margin-bottom:0;}
    .sec1 .box .input-area{width:100%;}
    .sec1 .input-area input[type="radio"] + span{padding:10px;}
    .sec1 .box .btn{width:100%; font-size:2rem; }

    .sec2{padding:4rem 0;}
    .sec2 .green-box{padding:3%; text-align: center; font-size:1.6rem;}
    .sec2 .green-box .qa-box{padding:2% 0;}
    .sec2 .green-box .qa-box .qa-status span.status{padding:0.5rem 1rem;}
    .sec2 .swiper{height:22.4rem;}

    main section.sec3 .tit-area h4 .primary{font-size:3.6rem;}
    .sec3 .cont-area ul li dt p span{font-size:4.8rem;}
    .sec3 .tit-area h4 span.txt-big{font-size:3.6rem;}

    .sec4 .star-area {padding-bottom: 1rem; font-size: 2rem;}
    .sec4 .rolling-container .rolling-list ul li,
    .sec4 .rolling-container2 .rolling-list2 ul li{width:260px; height:300px;}
    .rolling-container .img-box, .rolling-container2 .img-box{height:140px;}
    .rolling-container .img-box img, .rolling-container2 .img-box img{height:100%;}

    .sec5 .tit-area h3 span.dot:before{top:-16px; left:29%;}
    .sec5 .sub-tit{font-size:3rem;}
    .sec5 .cont-one .tb-gray{padding:0 1%;}
    .sec5 .cont-one .tb-primary,
    .sec5 .cont-one .tb-gray{border-radius:2rem; font-size:1.4rem;}
    .sec5 .cont-one .tb-primary .tb-tit,
    .sec5 .cont-one .tb-gray .tb-tit{font-size:1.8rem;}
    .sec5 .cont-one .tb-primary .tb-cont li,
    .sec5 .cont-one .tb-gray .tb-cont li{padding:4% 2%;}
    .sec5 .cont-box.cont-two .upper-box .graph-box .left-box,
    .sec5 .cont-box.cont-two .upper-box .graph-box .right-box{width:30%; min-width:8rem;}
    .sec5 .cont-box.cont-two .sub-cont-area{padding-top:3rem; flex-direction: column;}
    .sec5 .cont-box.cont-two .upper-box{width:100%; padding-bottom:2rem;}
    .sec5 .cont-box.cont-thr .sub-cont-area{font-size:1.8rem;}
    .sec5 .cont-box.cont-thr .percent-area .txt-bignum{font-size:10rem;}
    .sec5 .cont-box.cont-thr .percent-area .black{font-size:5.8rem;}

    .sec6 .gold-area .gold-txt{font-size:1.6rem;}

    .sec7{font-size:1.8rem;}
    .sec7 .cont-btn a{width:100%;}
}
@media (max-width: 420px) {
    .sec2 .green-box .qa-box{flex-wrap: wrap;}
    .sec2 .green-box .qa-box > div{width:50%;}
    .sec2 .swiper{height:25.8rem;}

}