@charset "utf-8";

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ color: #222; font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

input{ appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; }
select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/common/selectIcon.png') no-repeat 98% 50% #fff; }
select::-ms-expand{ display:none; }


@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */

/* header */
header{ z-index: 999; background-color: #fff; 
    position: fixed; left: 0; top: 0; width: 100%; padding: 20px 0; 
    /* box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);  */
}
header .inner{ 
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

header .logo{ width: 90px; }
header .menuList{ display: flex; align-items: center; gap: 44px; }
header .menuList > li.active{ color: #1976DE; }
header .menuList .blueBtn{ display: flex; align-items: center; justify-content: center; background-color: #1976DE; width: 156px; padding: 10px; border-radius: 4px; color: #fff; }

@media screen and (max-width: 1250px) { 
    header .logo{ width: 60px; }
}
@media screen and (max-width: 1000px) { 
    header .inner{ justify-content: left; padding-left:20px;}
    header .menuList{ position: fixed; left: 0; top: -100px; width: 100%; background-color: #fff; padding: 20px; justify-content: space-between; transition: top 0.5s; }
    header .menuList.show{ top: 0; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10); }
}
@media screen and (max-width: 900px) { 
    header .menuList{ flex-wrap: wrap; gap: unset; text-align: center; }
    header .menuList > li{ display: flex; justify-content: center; width: calc(100% / 3); padding: 5px 0; }
}
@media screen and (max-width: 650px) { 
    header{ padding: 10px 0; }
    header .menuList{ font-size: 14px; padding: 10px; display : none;}
    header .menuList > li{ word-break: keep-all; }
    header .menuList .blueBtn{ width: 130px; max-width: 100%; padding: 5px; }

}

/* footer */
footer{ background-color: #383838; padding: 90px 0; }
footer .inner{ display: flex; align-items: flex-end; justify-content: space-between; }
footer .logo{ width: 190px; }
footer .leftBox .textDiv{ margin-top: 28px; color: #fff; }

footer .rightBox .menuList{ display: flex; align-items: center; flex-wrap: wrap; color: #fff; font-size: 18px; }
footer .rightBox .menuList + .menuList{ margin-top: 14px; }
footer .rightBox .menuList > li{ position: relative; padding-right: 20px; } 
footer .rightBox .menuList > li:after{ content:'|'; position: absolute; right: 10px; font-size: 0.8em; top: 2px; }
footer .rightBox .menuList > li:last-child{ padding-right: 0; }
footer .rightBox .menuList > li:last-child::after{ display: none; }
footer .rightBox .copyRight{ color: rgba(255,255,255,0.4); margin-top: 28px; }

@media screen and (max-width: 1250px) { 
    footer .logo{ width: 110px; }
    footer .rightBox .menuList{ font-size: 16px; }
    footer .rightBox .copyRight{ font-size: 14px; } 
}
@media screen and (max-width: 900px) { 
    footer .inner{ flex-direction: column; align-items: flex-start; gap: 50px; }
    footer .leftBox .textDiv{ font-size: 14px; margin-top: 10px; }
    footer .rightBox .menuList{ font-size: 14px; }
    footer .rightBox .menuList + .menuList{ margin-top: 10px; }

    footer .rightBox .copyRight{ font-size: 13px; } 
}
@media screen and (max-width: 650px) { 
    footer .logo{ width: 100px; }
}

/* .main .visualArti */
.main .visualArti{ position: relative; overflow: hidden; min-height: 100vh; padding:200px 0 100px 0; display: flex; align-items: center; justify-content: center; }
.main .visualArti .inner{ height: 100%; }
.main .visualArti .moBr{ display: none; } 
.main .visualArti .contentWrap{ display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main .visualArti .circleWrap{ 
    display: flex; align-items: center; justify-content: center;     
}
.main .visualArti .circle{ border-radius: 50%; }
.main .visualArti .circle1{ width: 870px; height: 870px; border: 1px solid rgba(25, 118, 222, 0.2); position: absolute; }
.main .visualArti .circle2{ width: 870px; height: 870px; border: 1px solid rgba(25, 118, 222, 0.2); position: absolute; }
.main .visualArti .circle3{ width: 870px; height: 870px; border: 1px solid rgba(25, 118, 222, 0.2); position: absolute; }
.main .visualArti .circle4{ 
    width: 234px; height: 234px; padding: 10px; 
    /* gradietion으로 배경색깔 채우기 */
    background: linear-gradient(225deg, #ff8da0 0%, #438de7 100%);
}
.main .visualArti .circle5{ border: 1px solid #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.main .visualArti .circle5 .logo{ width: 70%; }

.main .visualArti .textDiv{ position: relative; z-index: 1; background-color: #fff; }
.main .visualArti .textDiv .title{ 
    font-family: "IBM Plex Sans KR", sans-serif;
    background-color: #fff; text-align: center; margin-top: 46px; font-size: 60px; font-weight: 700;
    /* background: linear-gradient(92deg, #75B6FF 4.76%, #1976DE 52.89%);  */
    background: linear-gradient(90deg, #ff8da0 0%, #438de7 100%);
    line-height: 1.3em;
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.main .visualArti .textDiv .content{ line-height: 1.3em; text-align: center; margin-top: 10px; color: #7F7F7F; font-size: 20px; }
.main .visualArti .textDiv .content .blue{ color:#1976DE; font-weight: 500; }
.main .visualArti .btnWrap{ position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 40px; }
.main .visualArti .btnWrap .blueBtn{ 
    background-color: #1976DE; 
    /* box-shadow: 2.737px 5.474px 5.474px 0px rgba(0, 0, 0, 0.15); 
    border-radius: 5.474px;  */
    /* padding: 15px 25px;  */
    color: #fff;
    /* position : fixed; */
    /* bottom : 20px; */
    width : 200px;
    max-width : 700px;
    height: 50px;
    border-radius: 15px;
    font-size : 18px;
    display: flex; align-items: center; justify-content: center;
}
.main .visualArti .btnWrapMobile { 
        display: none;
    }

@media screen and (max-width : 700px) {
    .main .visualArti .btnWrap{ 
        display: none;
    }
    .main .visualArti .btnWrapMobile{ 
        display: block;
    }
    .main .visualArti .btnWrapMobile .blueBtn{ 
        z-index: 9999;
        background-color: #1976DE; 
        color: #fff;
        position : fixed;
        bottom : 20px;
        width : calc(100% - 40px);
        max-width : 700px;
        height: 50px;
        border-radius: 15px;
        font-size : 18px;
        display: flex; align-items: center; justify-content: center;
        left : 50%;
        transform : translateX(-50%);
    }    
}


@media screen and (max-width: 1250px) { 
    .main .visualArti{ min-height: unset; }
    .main .visualArti .textDiv .title{ font-size: 40px; }
    .main .visualArti .textDiv .content{ font-size: 18px; }
}
@media screen and (max-width: 900px) { 
    .main .visualArti .moBr{ display: inline-block; }
}
@media screen and (max-width: 650px) { 
    .main .visualArti .circle1{ width: 130vw; height:130vw; }
    .main .visualArti .circle2{ width: 90vw; height:90vw; }
    .main .visualArti .circle3{ width: 60vw; height:60vw; }
    .main .visualArti .circle4{ width: 50vw; height:50vw; padding: 2vw; }

    .main .visualArti .textDiv .title{ font-size: 45px; }
    .main .visualArti .textDiv .content{ font-size: 16px; }

    .main .visualArti .btnWrap .blueBtn{ 
        /* 텍스트 세로,가로 가운데 정렬 */
        display: flex; align-items: center; justify-content: center;

    } 
}
@media screen and (max-width: 500px) { 
    .main .visualArti{ padding: 150px 0 50px 0; }
    .main .visualArti .textDiv .title{ font-size: 9vw; }
}

/* .main .mainTitle */
.main .mainTitle{ 
    text-align: center; font-weight: 700; font-size: 40px; font-family: "IBM Plex Sans KR", sans-serif;
    /* background: linear-gradient(92deg, #75B6FF 4.76%, #1976DE 52.89%);
    background: linear-gradient(90deg, #ff8da0 0%, #438de7 100%); */
    background : black;
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.main .mainTitle .moBr{ display: none; }
.main .mainTitle.black{ background: transparent; color: #222;  background-clip:unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; }
.main .mainTitle.white{ background: transparent; color: #fff;  background-clip:unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; }
.main .mainTitle.left{ text-align: left; } 

@media screen and (max-width: 1250px) { 
    .main .mainTitle{ font-size: 35px; }
}
@media screen and (max-width: 650px) { 
    .main .mainTitle{ font-size: 30px; }
}
/* .main .mainContent */
.main .mainContent{ color:#222; margin-top: 5px; text-align: center; text-align: center; font-size: 20px; line-height: 1.5em; }
@media screen and (max-width: 1250px) { 
    .main .mainContent{ font-size: 16px; }
}
@media screen and (max-width: 900px) { 
    .main .mainTitle .moBr{ display: inline-block; }
}
@media screen and (max-width: 650px) { 
    .main .mainContent{ font-size: 14px; }
}

/* .main .serviceArti */
.main .serviceArti{ overflow: hidden; background-color: #F4F4F8; display: flex; align-items: center; justify-content: center; padding: 100px 0; min-height: 100vh; }
.main .serviceArti .itemList{ width: calc(100% + 10px); margin-left: -5px; margin-top: 40px; display: flex; flex-wrap: wrap; }
.main .serviceArti .itemList > li{ width: calc(100% / 4); padding: 5px; }
.main .serviceArti .itemList > li .item{ 
    align-items: center; 
    background-color: #fff; height: 100%; display: flex; flex-direction: column; 
    border-radius: 20px; border: 1px solid #EFF3F6; 
    padding: 30px 30px 70px 20px; height: 300px; position: relative;
}
.main .serviceArti .itemList .item .check{ width: 44px; }
.main .serviceArti .itemList .item .title{ margin-top: 20px; font-size: 25px; font-family : "Pretendard", sans-serif; font-weight: 700;}
.main .serviceArti .itemList .item .title .underline{ background: linear-gradient(to top, rgba(207, 220, 255, 0.4) 50%, transparent 50%); }
.main .serviceArti .itemList .item .content{ margin-top: 40px; font-family : "IBM Plex Sans KR"; margin-bottom:30px; flex-grow: 1; color: #7F7F7F; }
.main .serviceArti .itemList .item .icon{ 
    width: 150px; 
    /* 가운데 정렬 */
    display: flex; align-items: center; justify-content: center;
}

@media screen and (max-width: 1250px) { 
    .main .serviceArti{ min-height: unset; }
    .main .serviceArti .itemList > li .item{ height: 100%; padding: 6vw 2vw 2vw 2vw; }
    .main .serviceArti .itemList .item .icon{ margin-top: 5vw; }
    .main .serviceArti .itemList .item .title{ margin-top: 2vw; font-size: 1.8vw; }
}
@media screen and (max-width: 900px) { 
    .main .serviceArti .itemList{ margin: 20px auto 0 auto; max-width: 500px; }
    .main .serviceArti .itemList > li{ width: calc(100% / 2); }
    .main .serviceArti .itemList > li .item{ padding: 40px 10px 20px 10px; }
    .main .serviceArti .itemList .item .title{ font-size: 18px; }
    .main .serviceArti .itemList .item .icon{ margin-top: 40px; }
}
@media screen and (max-width: 500px) { 
    .main .serviceArti .itemList > li .item{ padding: 40px 10px 20px 10px; border-radius: 10px; }
    .main .serviceArti .itemList .item .check{ width: 40px; }    
    .main .serviceArti .itemList .item .icon{ margin-top: 5vw; }
    .main .serviceArti .itemList .item .title{ font-size: 16px; word-break: keep-all; }
    .main .serviceArti .itemList .item .content{ font-size: 14px; }
}

/* .main .processArti */
.main .processArti{ overflow: hidden; padding: 100px 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.main .processArti .stepList{ position: relative;  display: flex; flex-wrap: wrap; margin-top: 60px; width: calc(100% + 60px); margin-left: -30px; }
.main .processArti .stepList > li{ width: calc(100% / 4); padding: 30px; }
.main .processArti .stepList .box{ position: relative; }
.main .processArti .stepList .box .label{ transition: opacity 1.3s; position: absolute; right: calc(100% - 120px); bottom: calc(100% - 80px); }
.main .processArti .stepList .box .label.active{ opacity: 0; transition: opacity 1.3s }
.main .processArti .stepList .box .icon{ width: 100%; }
.main .processArti .stepList .text{ text-align: center; padding: 30px 0; font-size: 20px; }
.main .processArti .stepList .circle{ position: relative; background-color: #fff; position: relative; z-index: 2; margin: 0 auto; width: 33px; height: 33px; border: 1px solid #222; border-radius: 50%; }
.main .processArti .stepList .circle::before{ 
    content:''; display: block; width: 283px; height: 2px; background-color: #222; position: absolute; 
    left: 100%; bottom: calc(50% - 1px); 
}
.main .processArti .stepList .circle::after{ 
    content:''; display: block; width: 0; height: 2px; background-color: #6088F9; position: absolute; 
    left: 100%; bottom: calc(50% - 1px);  transition: width 0s;
}
.main .processArti .stepList .active .circle::after{ width: 283px; transition: width 1.3s; }

.main .processArti .stepList > li:last-child .circle::after{ display: none; }
.main .processArti .stepList > li:last-child .circle::before{ display: none; }
.main .processArti .stepList.mo{ display: none; transition: opacity 0.5s; }

.main .processArti .stepList .active .text{ color: #6088F9; }
.main .processArti .stepList .active .circle{ border-color: #6088F9; }
/* .main .processArti .stepList .active .circle::before{ background:#6088F9; } */

.main .processArti .stepList .active .circle.show{ background-image: url('../img/main/processArti/circle_active.png'); background-size: 50%; background-repeat: no-repeat; background-position: center; }

.main .processArti .stepList .swiper-slide-active .box .label.active{ opacity: 1; }
.main .processArti .stepList .swiper-slide-active .text{ color: #6088F9; }

@media screen and (max-width: 1250px) { 
    .main .processArti{ min-height: unset; }
    .main .processArti .stepList{ padding: 0 50px; width: calc(100% + 20px); margin-left: -10px; }
    .main .processArti .stepList > li{ padding: 10px; }
    .main .processArti .stepList .box .label{ width: 100px; right: calc(100% - 80px); bottom: calc(100% - 60px); }
    .main .processArti .stepList .circle::before{ width: calc((100vw / 4) - 50px); }
    .main .processArti .stepList .circle{ width: 25px; height: 25px; }
}
@media screen and (max-width: 900px) { 
    .main .processArti{ padding-bottom: 0; }
    .main .processArti .stepList.pc{ display: none; }
    .main .processArti .stepList.mo{ display: block; margin: 40px auto; max-width: 300px; }

    .main .processArti .mobileProgressBar{ position: relative; margin: 40px auto 0 auto; max-width: 200px; display: flex; align-items: center; }
    .main .processArti .mobileProgressBar .bar{ position: absolute; left: 0; width: 100%; height: 2px; background-color: #222; }
    .main .processArti .mobileProgressBar .bar .active{ background-color: #1976DE; width: 0; height: 2px; }
    .main .processArti .mobileProgressBar .circleWrap{ width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .main .processArti .mobileProgressBar .circle{ position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #222; background-color: #fff; }
    .main .processArti .mobileProgressBar .circle.active{ display: flex; align-items: center; justify-content: center; border-color: #1976DE; }
    .main .processArti .mobileProgressBar .circle.active::before{ content:''; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #1976DE; }

}
@media screen and (max-width: 650px) { 
    .main .processArti .mobileProgressBar{ max-width: 160px; }
    .main .processArti .stepList .text{ padding: 20px 0; font-size: 16px; }
}

/* .main .expertArti */
.main .expertArti{ padding: 100px 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFF 60.51%, #E2F0FF 100%); }
.main .expertArti .halfBox{  margin-top: 45px; display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px; }
.main .expertArti .halfBox > li{ width: calc(100% / 2); padding: 5px; }
.main .expertArti .halfBox .item{ gap: 50px; padding: 20px; background-color: #fff; border-radius: 20px; border: 1px solid #EFF3F6; height: 100%; display: flex; justify-content: space-between; align-items: center;  }
.main .expertArti .halfBox .item .iconBox{ flex-shrink: 0; background-color: #F5F6F9; border-radius: 20px; width: 280px; height: 216px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .expertArti .halfBox .item .iconBox.img1{ background-image: url('../img/main/expert1.png'); }
.main .expertArti .halfBox .item .iconBox.img2{ background-image: url('../img/main/expert2.png'); }
.main .expertArti .halfBox .item .iconBox.img3{ background-image: url('../img/main/expert3.png'); }
.main .expertArti .halfBox .item .iconBox.img4{ background-image: url('../img/main/expert4.png'); }
.main .expertArti .halfBox .item .contentBox{ flex-grow: 1; }
.main .expertArti .halfBox .item .contentBox .title{ margin: 0 auto; font-size: 20px; background-color: #fff; color: #5C85F9; border: 2px solid #5C85F9; border-radius: 10px; padding: 14px; text-align: center; width: 178px; max-width: 100%; }
.main .expertArti .halfBox .item .contentBox .content{ font-family: "IBM Plex Sans KR"; line-height: 1.5em; text-align: center; margin-top: 18px; font-size: 15px; }

@media screen and (max-width: 1250px) { 
    .main .expertArti{ min-height: unset; }
    .main .expertArti .halfBox{ margin: 20px auto 0 auto; max-width: 900px; }
    .main .expertArti .halfBox .item { padding: 20px; gap: 20px; }
    .main .expertArti .halfBox .item .iconBox{ width: 200px; height: 150px; }
    .main .expertArti .halfBox .item .contentBox .title{ font-size: 16px; padding: 10px; width: 100%; }
    .main .expertArti .halfBox .item .contentBox .content{ font-size: 14px; font-weight:700;}
}
@media screen and (max-width: 900px) { 
    .main .expertArti .halfBox{ max-width: 500px; }
    .main .expertArti .halfBox .item{ flex-direction: column;  }
}
@media screen and (max-width: 650px) { 
    .main .expertArti .halfBox .item .contentBox .title{ padding: 5px; border-radius: 4px; }
}
@media screen and (max-width: 500px) { 
    .main .expertArti .halfBox .item{ gap: 10px; border-radius: 10px; }
    .main .expertArti .halfBox .item .iconBox{ width: 100%; height: 30vw; border-radius: 2vw; }
    .main .expertArti .halfBox .item .contentBox .content{ margin-top: 10px; }
}
@media screen and (max-width: 400px) { 
    .main .expertArti .halfBox .item .contentBox .content{ margin-top: 10px; word-break: keep-all; }
    .main .expertArti .halfBox .item .contentBox .content br{ display: none; }
}

/* .main .priceArti */
.main .priceArti{ position: relative; padding: 100px 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.main .priceArti::before{ content:''; display: block; width: 800px; height: 800px; background-image: url('../img/main/expertArti/circle.png'); background-size: contain; position: absolute; left: -250px; top: -250px; }
.main .priceArti::after{ content:''; display: block; width: 330px; height: 330px; background-image: url('../img/main/expertArti/circle2.png'); background-size: contain; position: absolute; right: 100px; bottom: 100px; }
.main .priceArti .inner{ position: relative; z-index: 1; }
.main .priceArti .bigTitle{ 
    font-family: "IBM Plex Sans KR", sans-serif; text-align: center; 
    /* background: linear-gradient(92deg, #75B6FF 4.76%, #1976DE 52.89%);  */
    /* background: linear-gradient(90deg, #ff8da0 0%, #438de7 100%); */
    background : black;
    font-weight: 700;
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 60px; 
}
.main .priceArti .priceBox{ display: flex; justify-content: center; margin-top: 20px; }
.main .priceArti .priceBox .priceWrap{ width: 100%; max-width: 536px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid #bebebe; }
.main .priceArti .priceBox .priceWrap .titleBox{ background-color:#1976DE; padding: 28px 20px; text-align: center; color: #fff; font-size:24px; font-weight: 700; }
.main .priceArti .priceBox .priceWrap .contentBox{ flex-grow: 1; padding: 48px 35px; background-color: #fff; }

.main .priceArti .priceBox .priceWrap .circle{ 
    margin: 0 auto; 
    /* background-color: #222;  */
    width: 152px; height: 152px; display: flex; align-items: center; justify-content: center; border-radius: 50%; 
    background: linear-gradient(225deg, #ff8da0 0%, #438de7 100%);
}
.main .priceArti .priceBox .priceWrap .circle .logo{ width: 70%; }
.main .priceArti .priceBox .priceWrap .dotList{ margin-top: 24px; background-color: #F4F4F8; border-radius: 10px; padding: 26px; border-radius: 10px; font-family : "IBM Plex Sans KR"; font-size:16px;}
.main .priceArti .priceBox .priceWrap .dotList .list{ position: relative; padding-left: 15px; line-height: 1.5em; font-size: 16px; font-weight: 400; }
.main .priceArti .priceBox .priceWrap .dotList .list::before{ content:'•'; position: absolute; left: 0; }
.main .priceArti .priceBox .priceWrap .dotList .list + .list{ margin-top: 10px;   }
.main .priceArti .priceBox .priceWrap .blackBtn{ display: block; margin-top: 13px; background-color: #222; color: #fff; padding: 16px; text-align: center; border-radius: 10px; font-size: 18px; }

@media screen and (max-width: 1250px) { 
    .main .priceArti{ min-height: unset; }
    .main .priceArti .bigTitle{ font-size: 40px; }
    .main .priceArti .priceBox .priceWrap{ max-width: 400px; }
    .main .priceArti .priceBox .priceWrap .titleBox{ padding: 15px; font-size: 20px; }
    .main .priceArti .priceBox .priceWrap .circle{ width: 120px; height: 120px; }
    .main .priceArti .priceBox .priceWrap .contentBox{ padding: 20px; }
    .main .priceArti .priceBox .priceWrap .dotList .list{ font-size: 16px; word-break: keep-all; }
    .main .priceArti .priceBox .priceWrap .blackBtn{ padding: 14px; font-size: 16px; }
}
@media screen and (max-width: 650px) { 
    .main .priceArti{ padding: 50px 0; }
    .main .priceArti .bigTitle{ font-size: 30px; }
    .main .priceArti .priceBox .priceWrap{ border-radius: 10px; }
    .main .priceArti .priceBox .priceWrap .titleBox{ font-size: 18px; word-break: keep-all; }
    .main .priceArti .priceBox .priceWrap .circle{ width: 100px; height: 100px; }
    .main .priceArti .priceBox .priceWrap .dotList{ margin-top: 10px; padding: 10px; }
    .main .priceArti .priceBox .priceWrap .dotList .list + .list{ margin-top: 5px; }
}

/* .main .additionArti */
.main .additionArti{ padding: 100px 0; background-color: #F7F7F7; display: flex; align-items: center; justify-content: center; }
.main .additionArti .titleWrap{ display: flex; align-items: flex-end; gap: 35px; }
.main .additionArti .titleWrap .mainContent{ color: #7F7F7F; }
.main .additionArti .halfBox{ margin-top: 20px; display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px; }
.main .additionArti .halfBox > li{ padding: 5px; width: calc(100% / 4); }
.main .additionArti .halfBox .item{ padding: 20px; background-color: #fff; height: 100%; border-radius: 20px; border: 1px solid #EFF3F6; background: #FFF; }
.main .additionArti .halfBox .item .imgBox{ height: 246px; background-color: #F5F6F9; border-radius: 20px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .additionArti .halfBox .item .imgBox.img1{ background-image: url('../img/main/additionArti/icon1.png'); }
.main .additionArti .halfBox .item .imgBox.img2{ background-image: url('../img/main/additionArti/icon2.png'); }
.main .additionArti .halfBox .item .imgBox.img3{ background-image: url('../img/main/additionArti/icon3.png'); }
.main .additionArti .halfBox .item .imgBox.img4{ background-image: url('../img/main/additionArti/icon4.png'); }
.main .additionArti .halfBox .item .content{ font-family: "IBM Plex Sans KR"; font-weight: 700; text-align: center; font-size: 20px; line-height:1.5em; padding: 30px 0; font-weight: 500; }
.main .additionArti .halfBox .item .content p{ word-break: keep-all; }

@media screen and (max-width: 1250px) {
    .main .additionArti .halfBox .item{ padding: 15px; }
    .main .additionArti .halfBox .item .imgBox{ height: 20vw; }
    .main .additionArti .halfBox .item .content{ font-size: 18px; padding: 20px 0; word-break: keep-all; }
}
@media screen and (max-width: 900px) {
    .main .additionArti .titleWrap{ flex-direction: column; align-items: center; gap: unset; } 
    .main .additionArti .halfBox { width: 500px; margin: 30px auto 0 auto; }
    .main .additionArti .halfBox > li{ width: calc(100% / 2); }
    .main .additionArti .halfBox .item .imgBox{ height: 200px; }
    .main .additionArti .halfBox .item .content{ font-size: 16px; }
}
@media screen and (max-width: 650px) {
    .main .additionArti .halfBox{  width: 100%; }
    .main .additionArti .halfBox .item{ padding: 10px; border-radius: 10px; } 
    .main .additionArti .halfBox .item .imgBox{ height: 35vw; border-radius: 10px; }
    .main .additionArti .halfBox .item .content{ font-size: 14px; font-weight:700;}
}

/* .main .successArti */
.main .successArti{ padding: 100px 0; background: linear-gradient(283deg, #55AEFE 40.28%, #1976DE 95.26%); }
.main .successArti .halfBox{ display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; margin-top: 16px; }
.main .successArti .halfBox > li{ width: calc(100% / 2); padding: 10px; }
.main .successArti .halfBox .item{ background-color: #fff; padding: 50px; border-radius: 20px; border: 1px solid #EFF3F6; height: 100%; }
.main .successArti .halfBox .item .logo{ margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center; width: 80px; height: 28px; }
.main .successArti .halfBox .item .logo.logo1{ background-image: url('../img/main/successArti/logo1.png'); }
.main .successArti .halfBox .item .logo.logo2{ background-image: url('../img/main/successArti/logo2.png'); }
.main .successArti .halfBox .item .contentWrap{ justify-content: center; margin-top: 16px; display: flex; align-items: center; gap: 20px; }
.main .successArti .halfBox .item .contentWrap .text{ 
    font-family: "IBM Plex Sans KR"; 
    line-height: 1.5em; word-break: keep-all; flex-grow: 1; text-align: center; font-size: 20px; }
.main .successArti .halfBox .item .contentWrap .company{ color: #7F7F7F; margin-top: 16px; font-size: 16px; text-align: center; }

@media screen and (max-width: 1250px) {
    .main .successArti .halfBox .item .contentWrap .text{ font-size: 16px; }
    .main .successArti .halfBox .item .contentWrap .company{ font-size: 14px; }
    .main .successArti .halfBox .item .contentWrap .icon{ width: 20px; margin-bottom: 50px; }   
}   
@media screen and (max-width: 900px) {
    .main .successArti .halfBox > li{ width: 100%; }
    .main .successArti .mainTitle{ text-align: center; }
    .main .successArti .halfBox{ margin: 16px auto 0 auto; max-width: 500px; width: 100%; }
}
@media screen and (max-width: 650px) {
    .main .successArti .halfBox .item{ padding: 40px 20px; border-radius: 10px; }
}

/* .popupSection */
.popupSection{ 
    position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 999; 
    display: flex; align-items: center; justify-content: center; padding: 10px; opacity: 0; visibility: hidden;
}
.popupSection.show{ opacity: 1; visibility: visible; }
.popupSection .popupContent{ width: 100%; max-width: 648px; }
.popupSection .popupContent .btnWrap{ display: flex; justify-content: flex-end; }
.popupSection .popupContent .btnWrap .closeBtn{ background-color: transparent; border: none; }
.popupSection .popupContent .contentWrap{ margin-top: 10px; background-color: #F7F7F7; border-radius: 20px; padding: 50px; }
.popupSection .popupContent .contentWrap .title{ text-align: center; font-weight: 700; font-size: 34px; } 
.popupSection .popupContent .contentWrap .scrollBox{ 
    margin-top: 14px; background-color: #fff; padding: 40px 30px;  border-radius: 20px;
    border: 1px solid #E4E4E4; max-height: 50vh; overflow-y: scroll; color: #7F7F7F;
}
.popupSection .popupContent .contentWrap .balckBtn{ width: 100%; margin-top: 20px; text-align: center; padding: 10px; border-radius: 10px; color: #fff; font-size: 18px; border: 1px solid #222; background-color: #222; }

@media screen and (max-width: 1250px) {
    .popupSection .popupContent .contentWrap{ padding: 30px; }
    .popupSection .popupContent .contentWrap .title{ font-size: 20px; }
    .popupSection .popupContent .contentWrap .scrollBox{ padding: 20px; font-size: 14px; border-radius: 10px; }
    .popupSection .popupContent .contentWrap .balckBtn{ font-size: 16px; border-radius: 10px; }
}
@media screen and (max-width: 650px) {
    .popupSection .popupContent .contentWrap{ padding: 20px; }
}

/* .applySection */
.applySection{ 
    position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; 
    display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s;
}
.applySection.show{ opacity: 1; visibility: visible; }
.applySection .contentArti{ 
    display: flex; align-items: flex-start; justify-content: flex-end; 
    position: fixed; right: -700px; top: 0; transition: right 1s;
}
.applySection.show .contentArti{ right: 0; }
.applySection .contentArti .btnWrap .closeBtn{ padding: 20px 10px; border: 1px solid transparent; background: transparent; }
.applySection .contentArti .contentDiv{ display: flex; flex-direction: column; position: relative; background: #F7F7F7; height: 100vh; width: 648px; padding: 60px 90px 50px 90px; }
.applySection .contentArti .contentDiv .title{ text-align: center; font-size: 34px; font-weight: 700; }
.applySection .contentArti .contentDiv .content{ margin-top: 4px; text-align: center; color: #7F7F7F; }

.applySection .contentArti .contentDiv .growBox{ margin-top: 40px; flex-grow: 1; }
.applySection .contentArti .contentDiv .growBox .formList > li + li{ margin-top: 10px; }
.applySection .contentArti .contentDiv .growBox .formList .ipt{ color: #7F7F7F; width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #E4E4E4; background: #FFF; }
.applySection .contentArti .contentDiv .growBox .formList select.ipt{ display: none; }
.applySection .contentArti .contentDiv .growBox .selectDiv{ position: relative; color: #7F7F7F; }
.applySection .contentArti .contentDiv .growBox .selectDiv .showBox{ cursor: pointer; padding: 10px; border: 1px solid #E4E4E4; border-radius: 4px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; }
.applySection .contentArti .contentDiv .growBox .selectDiv .optionDiv{ opacity: 0; visibility: hidden; z-index: 2; position: absolute; top: 100%; background-color: #fff; padding: 10px 10px; width: 100%;  border-radius: 4px; border: 1px solid #E4E4E4; }
.applySection .contentArti .contentDiv .growBox .selectDiv.show .optionDiv{ opacity: 1; visibility: visible; }
.applySection .contentArti .contentDiv .growBox .selectDiv .optionDiv .option{ cursor: pointer; padding: 10px; display: flex; align-items: center; justify-content: space-between; }

.applySection .contentArti .contentDiv .agreeDiv{ margin-top: 30px; display: block; cursor: pointer; font-size: 14px; color: #7F7F7F; }
.applySection .contentArti .contentDiv .agreeDiv input[type="checkbox"]{ display: none; }
.applySection .contentArti .contentDiv .agreeDiv input[type="checkbox"] + .agreeText{ position: relative; padding-left: 20px; }
.applySection .contentArti .contentDiv .agreeDiv input[type="checkbox"] + .agreeText::before{ content:''; position: absolute; left: 0; display: block; width: 16px; height: 16px; border-radius: 2px; border: 1px solid #E4E4E4; background: #FFF; }
.applySection .contentArti .contentDiv .agreeDiv input[type="checkbox"]:checked + .agreeText::before{ background-image: url('../img/common/checkIcon.png'); background-size: 70%; background-repeat: no-repeat; background-position: center; }
.applySection .contentArti .contentDiv .agreeDiv input[type="checkbox"] + .agreeText .blue{ color: #1976DE; }
.applySection .contentArti .contentDiv .submitBtn{ background-color: #222222; padding: 16px 10px; text-align: center; border-radius: 10px; color: #fff; border: 1px solid #222;  font-size: 18px; font-weight: 700; }


@media screen and (max-width: 1250px) {
    .applySection .contentArti .contentDiv{ width: 400px; padding: 40px 20px 20px 20px; max-width: calc(100% - 120px); }
}
@media screen and (max-width: 900px) {
    .applySection .contentArti .contentDiv .title{ font-size: 20px; }
    .applySection .contentArti .contentDiv .content{ font-size: 14px; }
}
@media screen and (max-width: 650px) {
    .applySection .contentArti .contentDiv .submitBtn{ padding: 10px; font-size: 16px; border-radius: 10px; }
    .applySection .contentArti .contentDiv .growBox .selectDiv .optionDiv{ gap: 20px; }
    .applySection .contentArti .contentDiv .growBox .selectDiv .optionDiv .option{ font-size: 14px; }
    .applySection .contentArti .contentDiv .growBox .selectDiv .optionDiv .option .t2{ flex-shrink: 0; }
}