/** 모바일 **/
@media (max-width: 767px){
    .contents_wrap{width:90%; margin:0px auto;}

    h2{font-size:5.5vw; margin-top:10%; padding-top:3%;}
    h2::before{width:30px; height:2px; margin:0px auto 2%;}
    h2 span{color:#2f4a91; font-weight:600;}
    h2 .sub_t{font-size:3.2vw;}

    gnb{width:100%; height:14vw; display:flex; position:fixed; top:0px; left:0px; z-index:999999;}
    gnb .back_bg{width:100%; height:100%; background:#2f4a91; opacity:0.8; position:absolute;}
    gnb .logo{width:45%; float:left; justify-items:center; margin-top:2%; position:absolute;}

    gnb .nav{float:right; margin-top:25px; margin-right:7%;
         > a{display:none;
            &.contact_btn{width:85%; height:8vw; line-height:8vw; margin-top:-4%; display:block;
                p {font-size: 4vw;
                    &::before{display:none;}
                }
            }
        }
    }

    gnb .nav #overlay-button {position:absolute; right:0px; top:0.5vw; z-index:5; cursor:pointer; user-select:none;
	    span{position:relative; transition:all .2s ease-in-out;
            &:before{content:'\e9bd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:10vw; display:inline-block;}
        }
	    &:hover span:before{content:'\e9bd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:10vw; display:inline-block;}
    }

    input[type=checkbox]#overlay-input{display:none;  
	    &:checked ~ #overlay {visibility: visible;}
	    &:checked ~ #overlay-button {
		    &:hover span, span{background: transparent;}
        span {
		    &:before {content:'\e5cd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:10vw; display:inline-block; opacity:1; color:#ffffff;}
		    &:after {transform:rotate(-45deg) translate(7px, -7px); opacity:1; color:red;}
	        }
	    }
    }
    #overlay {width:100vw; height:100vh; background:#2f4a91; visibility:hidden; position:fixed; left:0px; top:0px; display:block; z-index:4;
	    &.active {visibility:visible;}
	    ul {height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; padding-left:0; list-style-type:none;
		    li {padding:1.5em;
			    a {color:white; text-decoration:none; font-size:1.5em;
				    &:hover{color:#333332;}
			    }
		    }
	    }
    }

    header{display:block;}
    header .group1{width:90%; display:flex; align-items:center; left:50%; margin-left:-45%;}
    header .group1 .sub_arrow_box{width:90%; font-size:4vw;}
    header .group1 .title1{font-size:13vw; letter-spacing:-2px; position:relative; z-index:20; margin-top:4%; text-align:center; font-weight:300; color:#fff; transform: translateY(0); animation:loopColor 8s infinite ease-in-out;}
    header .group1 .title1 span{font-weight:500; display:block; font-size:15vw;}
    header .group2 .title2{width:90%; font-size:10vw; letter-spacing:-1px; position:relative; z-index:20;}
    header .group2 .title2 span{font-size:15vw;}
    header .group2 .title2 span.green{font-size:10vw; }
    header .group2 .title2_sub{width:80%; font-size:4vw; line-height:6vw;}
    header .group2 .title2_sub span{padding:2px 3px; font-size:4vw;}
    header .h_btn_box{width:90%; bottom:25vw; margin-left:-45%;}
    header .h_btn_box > a{width:49%; height:10vw; line-height:10vw; margin-right:2%; font-size:4vw; border-radius:10px;}

    /* 3. 숫자 롤링 섹션 */
    .stats-section{margin:20% 0px 0px;}
    .stat-item::after{top:10%;}
    .stat-item p{font-size:3.5vw;}
    .stat-item > div .number{font-size:10vw; line-height:15vw;}
    .stat-item > div span{font-size:5vw; margin-left:0px;}

    .why_partners .why_con_box{margin-top:5%;
        > div{width:100%; height:auto; float:none; padding:4% 0px 4% 4%; border-radius:4vw; margin-left:0px; margin-top:5%;
            .sub_title{font-size:2vw;}
            .title{font-size:5vw;}
            .descrip{width:90%; font-size:3.5vw;}
        }
    }

    .who_needs{width:100%; height:auto; margin-top:10%; overflow:hidden; background:#efefef; padding-bottom:10%;
        img{width:80%; float:none; margin-top:10%}
        .who_container{float:none; margin-left:0px;
            h2{margin-top:5%;}
            ul{margin-top:5%;
                li{font-size:3.5vw; margin-top:1%;
                &::before{font-size:3.5vw; vertical-align:-3px;}
                    span{color:#2f4a91; font-weight:500;}
                }
            }
        }
    }

    .service_process{background:url('/partners/images/service_bg.png') no-repeat top center #212121; background-size:100% auto; padding-bottom:10%;}
    .service_process .service_container{margin-top:5%; padding:0px;}
    .service_process .service_container dl{margin-top:10%;}
    .service_process .service_container dl::before{top:-8vw; right:92%; height:16%;}
    .service_process .service_container dl dt .step{width:70px; height:25px; line-height:23px; font-size:3vw; border-radius:15px;}
    .service_process .service_container dl dt h3{font-size:5vw;}
    .service_process .service_container dl dt h3 > span{font-size:4vw;}
    .service_process .service_container dl dt p.sub_t{font-size:3.5vw; line-height:3.5vw;}
    .service_process .service_container dl dd{margin-top:2%;}
    .service_process .service_container dl dd li{font-size:3vw; margin-top:2%;}
    .service_process .service_container dl .icon_box{display:none;}

 
    .with_con{width:100%; height:145vw; background:url('/partners/images/with_bg.jpg') 50% 0 no-repeat fixed;}
    .with_con article .title{font-size:6vw; line-height:6vw;}
    .with_con article .sub_t{width:90%; margin:6% auto 0px; font-size:3.5vw; line-height:5.5vw;}
    .with_con article .free_gift_box{width:90%; height:auto; padding:3% 5%; margin:5% auto 0px; border-radius:2vw;}
    .with_con article .free_gift_box .gift_title{font-size:4vw;}
    .with_con article .free_gift_box .gift_title:before{width:28px; height:31px; background-size:100% auto;}
    .with_con article .free_gift_box .gift_sub_t{font-size:3.5vw;}
    .with_con article .consult_btn{width:90%; height:13vw; line-height:13vw; border-radius:3vw; margin:12% auto 0px; font-size:5.5vw;}

    footer{width:100%; height:75vw; padding-top:10%; display:block;
        background-size:150% auto, 120% auto;
        background-repeat:no-repeat, no-repeat;
        background-position:bottom left, top left;
    }
    footer .foot_logo{width:25%; float:none; margin-left:3%;}
    footer .foot_con{width:94%; float:none; margin:6% auto 0px;}
    footer .foot_con > div:nth-child(1){font-size:3vw; line-height:3.5vw;}
    footer .foot_con > div:nth-child(2){font-size:2.5vw; margin-top:5%;}


    section.stats-section {scroll-margin-top:140px;}
    section.who_needs, section.service_process {scroll-margin-top:70px;}
}

@media (max-width:426px){
    gnb .nav > a.contact_btn{margin-top:-10%;}
}

/** 태블릿 (tablet) **/
@media (min-width: 768px) and (max-width: 1023px) {
    .contents_wrap{width:90%; margin:0px auto;}
    
    h2{font-size:35px; margin-top:5%; padding-top:3%;}
    h2 .sub_t{font-size:17px;}

    gnb{width:100%; height:10vw; display:flex; position:fixed; top:0px; left:0px; z-index:999999;}
    gnb .back_bg{width:100%; height:100%; background:#2f4a91; opacity:0.8; position:absolute;}
    gnb .logo{width:45%; float:left; justify-items:center; margin-top:0%; position:absolute;}
    gnb .nav{float:right; margin-top:25px; margin-right:7%;
         > a{display:none;
            &.contact_btn{width:90%; height:6vw; line-height:6vw; margin-top:-5%; display:block;
                p {font-size:3vw;
                    &::before{display:none;}
                }
            }
        }
    }
    gnb .nav #overlay-button {position:absolute; right:0px; top:-0.5vw; z-index:5; cursor:pointer; user-select:none;
	    span{position:relative; transition:all .2s ease-in-out;
            &:before{content:'\e9bd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:8vw; display:inline-block;}
        }
	    &:hover span:before{content:'\e9bd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:8vw; display:inline-block;}
    }

    input[type=checkbox]#overlay-input{display:none;  
	    &:checked ~ #overlay {visibility: visible;}
	    &:checked ~ #overlay-button {
		    &:hover span, span{background: transparent;}
        span {
		    &:before {content:'\e5cd'; font-family:'Material Symbols Rounded'; color:#ffffff; font-size:8vw; display:inline-block; opacity:1; color:#ffffff;}
		    &:after {transform:rotate(-45deg) translate(7px, -7px); opacity:1; color:red;}
	        }
	    }
    }
    #overlay {width:100vw; height:100vh; background:#2f4a91; visibility:hidden; position:fixed; left:0px; top:0px; display:block; z-index:4;
	    &.active {visibility:visible;}
	    ul {height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; padding-left:0; list-style-type:none;
		    li {padding:1.5em;
			    a {color:white; text-decoration:none; font-size:1.5em;
				    &:hover{color:#333332;}
			    }
		    }
	    }
    }

    header{display:block;}
    header .group1{width:90%; display:flex; align-items:center; left:50%; margin-left:-45%;}
    header .group1 .sub_arrow_box{width:70%; font-size:3vw;}
    header .group1 .title1{font-size:10vw; letter-spacing:-2px; position:relative; z-index:20; margin-top:4%; text-align:center; font-weight:300; color:#fff; transform: translateY(0); animation:loopColor 8s infinite ease-in-out;}
    header .group1 .title1 span{font-weight:500; display:block; font-size:11vw;}
    header .group2 .title2{width:80%; font-size:8vw; letter-spacing:-1px; position:relative; z-index:20;}
    header .group2 .title2 span{font-size:12vw;}
    header .group2 .title2 span.green{font-size:8vw; }
    header .group2 .title2_sub{width:70%; font-size:3vw; line-height:5vw;}
    header .group2 .title2_sub span{padding:2px 3px; font-size:3vw;}
    header .h_btn_box{width:76%; bottom:25vw; margin-left:-38%;}
    header .h_btn_box > a{width:49%; height:9vw; line-height:9vw; margin-right:2%; font-size:3.3vw; border-radius:10px;}

    /* 3. 숫자 롤링 섹션 */
    .stats-section{margin:20% 0px 0px;}
    .stat-item::after{top:5px; height:120px;}
    .stat-item p{font-size:20px;}
    .stat-item > div .number{font-size:80px; line-height:15vw;}
    .stat-item > div span{font-size:5vw; margin-left:0px;}

    .why_partners .why_con_box{margin-top:5%;
        > div{width:100%; height:105px; float:none; padding:3% 0px 3% 3%; box-shadow:0px 1px 5px #e5e5e5; border-radius:15px; margin-left:0%; margin-top:2%; transition:none; position:relative;
            &:hover{margin-top:2%;}
            .icon_box{border-radius:5px; top:15px; left:15px; position:absolute;}
            .sub_title{position:absolute; top:5px; left:65px;}
            .title{font-size:20px; position:absolute; top:30px; left:65px}
            .descrip{width:90%; font-size:14px; position:absolute; top:65px; left:15px;}
        }
    }

    .who_needs{height:auto; margin-top:50px; padding-bottom:50px; background-color:#f8f8f8; background-position:top left; background-size:150% auto;
        img{display:none;}
        .who_container{float:left; margin-left:20px;
            h2{text-align:left; padding-top:0px; margin-top:50px;
                &::before{margin-left:0px;}
            }
            ul{margin-top:25px;
                li{font-size:18px; margin-top:10px;
                    &::before{font-size:22px; vertical-align:-6px; margin-right:5px;}
                    span{font-weight:500;}
                }
            }
        }
    }

    .service_process{background-size:100% auto; padding-bottom:50px;
        .service_container{margin-top:0px; padding:0px 0px 0px 0px;
            dl{position:relative; margin-top:45px;
                &::before{content:''; position:absolute; display:block; top:-40px; right:80px; width:2px; height:65px;}
                dt{
                    h3{font-size:25px;
                        > span{font-size:20px;}
                    }
                    p.sub_t{font-size:16px; line-height:16px;}
                }
                dd{margin-top:10px;
                    li{font-size:18px; margin-top:5px;}
                }
                .icon_box{width:160px; height:160px; top:25px;
                    img{width:55%; margin:0px auto;}
                }
            }
        }
    }

    .with_con{width:100%; height:895px; background:url('/partners/images/with_bg.jpg') 50% 0 no-repeat fixed;
        article{width:80%; text-align:center;
            .title{font-size:45px; line-height:60px;}
            .sub_t{width:95%; font-size:17px; line-height:25px; margin:5px auto 0px;}

            .free_gift_box{width:90%; height:auto; padding:10px 20px; margin:30px auto 0px; border-radius:10px;
                .gift_sub_t{font-size:16px;}
            }
        .consult_btn{width:90%; height:65px; line-height:65px; border-radius:15px; margin:60px auto 0px; font-size:30px;}
        }
    }

}