/* 섹션별 배경 */
#service-section1{background-color:var(--color-dark3);}
.service-section2{background-color:var(--color-beige);}
#service-section3{background-image:url('/assets/images/sub_service/service_section3_bg.png');background-size:cover;}
#service-section4{background-color:var(--color-dark3); height:900px;}

.section4-box{background-color:var(--color-blue2);border-radius:10px;}

.circle-container {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
    top: var(--circle-container-top,auto);
    width: 100%
}
.circle {
    cursor:pointer;
    border-radius: 50%;
    background-color: #636363;
    display: inline-flex;
}

.circle.active {
    background-color: #FCFCFC;
}


/* mobile */
@media (max-width: 833px) {
    .default-text{display: none;}
    .moblie-text{display: block;}
    .tablet-text{display: none;}
    .circle {width: 8px; height: 8px; margin:0px 4px;}
    .circle-container {font-size:0px; bottom:50px;}

    #service-section1{height:582px;}
    #service-section1>.sub-container{margin-top:38px;}
    .section1-text1{font-size:13px; font-weight:400; line-height:135%; margin-bottom:20px;}
    .section1-text2{font-size:20px; font-weight:600; line-height:135%;}
    .section1-img{width:312px; height:260px; margin-bottom:20px;}

    .service-section2{display:flex; justify-content:center; width:100%; height:538px;}
    .section2-text1{font-size:16px; font-weight:600; line-height:135%; margin-top:50px; margin-bottom:20px;}
    .section2-text2{font-size:20px; font-weight:600; line-height:135%;}
    .section2-img1{width:248px; height:231px; margin-bottom:24px;}
    .section3-img2_pc{ display: none;}
    .section3-img2_m{display: block;}

    #service-section3{height:849px;}
    .section3-text1{margin-bottom:10px;}
    .section3-text1, .section3-text2{font-size:20px; font-weight:600; line-height:135%; width:286px;}
    .section3-text2{margin-bottom:10px;}
    .section3-img1{width:286px; margin-bottom:20px;}
    .section3-img2{width:286px; height:208px; margin-top:40px; margin-bottom:20px;}
    .section3-div2{width:286px;}
    .section3-img3{width:59px; margin-right:12.5px;}

    #service-section4{height:509px;}
    .section4-text1{font-size:16px; font-weight:600; line-height:135%; margin-bottom:10px; height:66px;}

    .section4-text2{font-size:13px; font-weight:600; line-height:135%;}
    .section4-img1{width:286px; height:210px; margin-bottom:20px;}
    .section4-div{width:286px;}
    .section4-box{width:88.67px; height:83px;}
    .section4-box:not(:last-child){margin-right:10px;}

    
}
/* pad */
@media (min-width: 834px) and (max-width: 1279px) {
    .section3-img2_pc{ display: none;}
    .section3-img2_m{display: block;}
    .default-text{display: none;}
    .moblie-text{display: none;}
    .tablet-text{display: block;}
    .circle { width: 8px; height: 8px; margin:0px 4px;}
    .circle-container {width:60px; height:8px; font-size:0px; bottom: 80px; left:calc(50vw + 12px);}

    #service-section1{height:540px;}
    .section1-text1{font-size:20px; font-weight:600; line-height:135%; margin-bottom:20px;}
    .section1-text1:first-child{margin-top:30px;}
    .section1-text2{font-size:36px; font-weight:600; line-height:125%;}
    .section1-img{width:346px; height:288px; margin-right:34px;}
    .section1-div2{height:178px; margin-bottom:20px}

    .service-section2{display:flex; justify-content:center; width:100%; height:553px;}
    .section2-text1{font-size:20px; font-weight:500; line-height:135%; margin-top:80px; margin-bottom:40px;}
    .section2-text2{font-size:30px; font-weight:500; line-height:125%;}
    .section2-img1{width:352px; height:326px; margin-right:34px;}
    .section2-div{height:326px;}

    #service-section3{height:784px;}
    .section3-text1,.section3-text2{font-size:24px; font-weight:600; line-height:135%; width:343px;}
    .section3-text2{margin-bottom:50px;}
    .section3-text2{margin-bottom:30px;}
    .section3-img1{width:360px; margin-right:34px;}
    .section3-div1{margin-bottom:60px;}
    .section3-img2{width:360px; height:262px; margin-left:34px;}
    .section3-div2{width:343px;}
    .section3-img3{width:98px;}
    .section3-img3:not(:last-child){margin-right:19px;}

    #service-section4{height:474px;}
    #service-section4 .sub-container{margin-bottom:0.33px;}
    .section4-text1{font-size:24px; font-weight:600; line-height:135%; margin-bottom:24px; height:137.67px;}

    .section4-text2{font-size:16px; font-weight:500; line-height:135%;}
    .section4-img1{width:360px; height:292.67px; margin-right:34px;}
    .section4-div{width:344px;}
    .section4-box{width:108px; height:83px;}
    .section4-box:not(:last-child){margin-right:10px;}

}
/* pc */
@media (min-width: 1280px) and (max-width: 1919px) {
    .section3-img2_pc{ display: block;}
    .section3-img2_m{display: none;}
    .default-text{display: none;}
    .tablet-text{display: block;}
    .moblie-text{display: none;}
    .circle { width: 14px; height: 14px; margin:0px 7.5px;}
    .circle-container {width:100px; height:14px; font-size:0px; bottom:132px; left:calc(50vw + 18px);}

    #service-section1{height:925px;}
    .section1-text1{font-size:24px; font-weight:600; line-height:125%;}
    .section1-text1:first-child{margin-bottom:48px;}
    .section1-text2{font-size:50px; font-weight:600; line-height:125%;}
    .section1-img{width:568px; height:473px; margin-right:60px;}
    .section1-div{width:434px;}
    .section1-div2{height:212.5px; margin-bottom:48px;}

    .service-section2{display:flex; justify-content:center; width:100%; height:875px;}
    .section2-text1{font-size:30px; font-weight:500; line-height:125%; margin-top:131px; margin-bottom:60px;}
    .section2-text2{font-size:50px; font-weight:600; line-height:125%;}
    .section2-img1{width:550px; height:514px; margin-right:60px;}
    .section2-div{height:514px;}

    #service-section3{height:1098px;}
    .section3-text1,.section3-text2{font-size:36px; font-weight:600; line-height:125%; width:509px;}
    .section3-text2{margin-bottom:60px;}
    .section3-img1{width:510px; margin-right:60px;}
    .section3-div1{margin-bottom:50px;}
    .section3-img2{width:510px; height:345px; margin-left:60px;}
    .section3-div2{width:509px;}
    .section3-img3{width:106px; margin-right:20px;}

    #service-section4{height:626px;}
    .section4-text1{font-size:36px; font-weight:600; line-height:125%; margin-bottom:46px; height:204px;}

    .section4-text2{font-size:20px; font-weight:500; line-height:135%;}
    .section4-img1{width:524px; height:426px; margin-right:60px;}
    .section4-div{width:576px;} .section4-box{width:164px; height:128px;}
    .section4-box:not(:last-child){margin-right:20px;}

}
/* hd */
@media (min-width: 1920px) {
    .section3-img2_pc{ display: block;}
    .section3-img2_m{display: none;}
    .default-text{display: block;}
    .tablet-text{display: none;}
    .moblie-text{display: none;}
    .circle { width: 14px; height: 14px; margin:0px 7.5px;}
    .circle-container {width:100px; height:14px; font-size:0px; bottom: 202px; left:calc(50vw + 48px);}

    #service-section1{height:925px;}
    #service-section1 .sub-container{margin-top:89px;}
    .section1-text1{font-size:36px; font-weight:600; line-height:125%; margin-bottom:48px;}
    .section1-text1:first-child{margin-top:60px;}
    .section1-text2{font-size:64px; font-weight:700; line-height:125%;}
    .section1-img{width:660px; margin-right:120px;}

    .service-section2{display:flex; justify-content:center; width:100%; height:1080px;}
    .section2-text1{font-size:30px; font-weight:500; line-height:125%; margin-top:160px; margin-bottom:60px;}
    .section2-text2{font-size:60px; font-weight:600; line-height:125%;}
    .section2-img1{width:700px; height:640px; margin-right:80px;}
    .section2-div{height:640px;}

    #service-section3{height:1582px;}
    .section3-text1,.section3-text2{font-size:44px; font-weight:600; line-height:135%; width:677px;}
    .section3-text2{margin-bottom:50px;}
    .section3-img1{width:677px; margin-right:86px;}
    .section3-div1{margin-bottom:180px;}
    .section3-img2{width:677px; height:458px; margin-left:86px;}
    .section3-div2{width:677px;}
    .section3-img3{width:138px; margin-right:30px;}

    #service-section4{height:899px;}
    #service-section4 .sub-container{margin-bottom:1px;}
    .section4-text1{font-size:44px; font-weight:600; line-height:125%; margin-bottom:46px; height:220px;}

    .section4-text2{font-size:24px; font-weight:500; line-height:135%;}
    .section4-img1{width:677px; height:550px; margin-right:86px;}
    .section4-div{width:677px;}
    .section4-box{width:200px; height:156px;}
    .section4-box:not(:last-child){margin-right:20px;}

}