@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* @font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

:root{
    --main-font: 'Pretendard', sans-serif;
    --primary-white: #fff;
    --primary-black: #333333; 
    --primary-blue: #4282EA;

}

html {
    /* scroll-behavior: smooth;  */
}
/* 공통 스타일 */
.font-bold{font-weight: bold;}
.font-light{font-weight: 300;}
.primary-blue-text{color: var(--primary-blue);}
.primary-white-text{color: var(--primary-white);}
.primary-black-text{color: var(--primary-black);}
.common-rounded {border-radius: 30px;}
.common-small-rounded{border-radius:20px;}
.common-box-bg{background: #EDF3FD;}
.common-box-shadow{box-shadow: 0px 1px 4px 0px #CCCCCC40;}
.text-20{font-size: 20px;}
.text-left { text-align: left!important;}

/* reset */
*{margin: 0; padding: 0; box-sizing: border-box;}
ol,ul,li{list-style: none;}
a{text-decoration: none; display: inline-block; color: #333;}
.center{margin: 0 auto; max-width: 1600px; position: relative;}
body{font-family: var(--main-font);color: #333; position: relative; min-height: 100vh; margin: 0; overflow-x: hidden;}
body.no-scroll{
    overflow:hidden;
}


/**홈페이지 리뉴얼 스타일**/

.relative {
    position: relative;
}

body {
    margin: 0; padding: 0;
    overflow-x: hidden;
}

html, body {
    height: 100%;
}

.box-shadow{
    -webkit-box-shadow: 10px 10px 17px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 10px 10px 17px 0px rgba(0,0,0,0.16);
    box-shadow: 10px 10px 17px 0px rgba(0,0,0,0.16);
    
}
.panel-inner__top{
    /* paddin */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 30px;
    margin-top: 55px;
}

.strong-point{
    background-color: #edf3fd;
    padding: 35px 20px 10px 20px;
    border-radius: 10px;
    width: 439px;
    height: 120px;
    text-align: center;
    font-size: 20px;
}

.strong-point .tag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.strong-point .tag {
    padding: 10px 15px;
}

#container {
    width: 1600vw;
    height: 100vh;
    display: flex;
}

.panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.panel-1 {
    background: url('../images/bg-1.png') no-repeat center;
    background-size: cover;
    position: relative;
}
.panel-layer{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0, 0, 0.6);

}
.panel-1 .panel-inner{
    width: 670px;
    height: 750px;
    z-index: 3;
    text-align: center;
}

.panel-inner__bottom{
    margin-top: 188px;
    /* margin-top: min(188px, 106px); */
}


div[data-label="Section 1"] > span {
    color: var(--primary-white);
}

.panel-1 .panel-inner .panel-inner__bottom .panel-inner-message {
    margin-bottom: 20px;
    color: var(--primary-white);
}
.panel-inner > a {
    display: inline-block;
    width: 100%;
}
.panel-1 .panel-inner .charzu-logo {
    background: url('../images/charzu-logo.png') no-repeat center;
    background-size: contain;
    /* width: 664px; */
    width: 100%;
    height: 124px;
    max-width: 664px;
    max-height: 124px;
    text-indent: -9999px;
    margin-bottom: 300px;
}

.panel .panel-inner .heading {
    /* font-size: 32px; */
    text-align: center;    
    color: var(--primary-white);
    margin-bottom: 20px;
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
}

.panel .panel-inner .cta-links__wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.panel .panel-inner .cta-links__wrapper a:hover{
    background-color: var(--primary-blue);
    color: #fff;
    transition: background .3s;
}

.panel .panel-inner .cta-links__wrapper a{
    display: inline-block;
    padding: 20px 30px;
    background-color: var(--primary-white);
    border-radius: 30px;
}

.panel-2 {
    background: url('../images/building-forest.png') no-repeat bottom;
    background-size: contain;
    background-color: #fff;
}
.panel-2 .panel-inner{
    width: 100%;
    max-width: 1000px;
    height: 100%;
}

.panel-2 .panel-inner .heading {
    margin-top: 90px;
}
.panel-2 .panel-inner .heading .tag-wrapper {
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
}

.panel-2 .panel-inner .heading .tag-wrapper{
    margin-top: 30px;
}

.panel-2 .panel-inner .heading > span {
    /* font-size: 32px; */
    font-size: clamp(0.9375rem, 0.3654rem + 2.6154vw, 2rem);
}
.panel-2 .panel-inner .panel-inner__main{
    display: flex;
    align-items: center;
    gap: 50px;
    margin-top: 50px;
    /* max-width: 460px; */
    /* max-height: 621px; */
}

.panel-2 .panel-inner .panel-inner__main .panel-inner__left{
    background: url('../images/pannel-2-left.png') no-repeat center;
    background-size: cover;
    width: 100%;
    /* max-width: 460px; */
    max-width: clamp(250px, 460px, 460px);
    height: 621px;
    /* max-height: 621px; */
    max-height: clamp(300px, 621px, 621px);
    /* height: 621px; */
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.panel-2 .panel-inner .panel-inner__main .panel-inner__right{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.panel-2 .panel-inner .panel-inner__main .panel-inner__right .panel-inner-message{
    /* font-size: 26px; */
    font-size: clamp(0.9375rem, 0.5673rem + 1.6923vw, 1.625rem);
}

.panel-2 .panel-inner .panel-inner__main .panel-inner__right .charzu-logo{
    background: url('../images/charzu-logo2.png') no-repeat center;
    background-size: contain;
    display: inline-block;
    align-self: center;
    width: 100%;
    max-width: 272px;
    height: 58px;
    text-indent: -9999px;

}
/* .panel-2 .panel-inner .heading .tag-wrapper .tag { */
.tag {
    font-size: clamp(0.8125rem, 0.7452rem + 0.3077vw, 0.9375rem);
    padding: max(10px,10px) max(10px,16px);
    background-color: var(--primary-white);
    border-radius: 60px;
    border: 2px solid var(--primary-blue);
    color: var(--primary-black);
    text-wrap: nowrap;
    font-weight: 500;
    text-align: center;
}

.panel-3 .panel-inner,
.panel-4 .panel-inner,
.panel-5 .panel-inner,
.panel-6 .panel-inner, 
.panel-7 .panel-inner,
.panel-9 .panel-inner,
.panel-10 .panel-inner,
.panel-15 .panel-inner,
.last-container .panel-inner {
    height: 100%;
}
.panel-3 .panel-inner .heading,
.panel-4 .panel-inner .heading,
.panel-5 .panel-inner .heading,
.panel-6 .panel-inner .heading,
.panel-7 .panel-inner .heading,
.panel-9 .panel-inner .heading,
.panel-10 .panel-inner .heading,
.panel-15 .panel-inner .heading{
    margin-top: 90px;
    line-height: 43px;
}
.panel-3 .panel-inner__main .panel-inner-main__top{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 70px;
}

.panel-3 .panel-inner__main .panel-inner-main__top .phrase .message{
    line-height: 40px;
}

.panel-3 .panel-inner__main .panel-inner-main__top .phrase-wrapper{
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.panel-3 .panel-inner__main .phrase-wrapper:nth-child(2) .message {
   font-size: 26px;
}

.panel-3 .panel-inner__main .panel-inner-main__top .promotion-img-1{
    background: url('../images/panel-3-dp-img-1.png') no-repeat center;
    background-size: contain;
    width: 100%;
    height: 260px;
    max-width: 742px;
    max-height: 260px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
}
.panel-3 .panel-inner__main .panel-inner-main__top .promotion-img-2{
    background: url('../images/panel-3-dp-img-2.png') no-repeat center;
    background-size: contain;
    width: 100%;
    height: 260px;
    max-width: 742px;
    max-height: 260px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.panel-3 .panel-inner__main .panel-inner-main__top .phrase{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 30px; */
    justify-content: center;
}
.panel-inner-main__top{
    margin-top: 30px;
}

.panel-inner-main__top .phrase .message {
    text-align: center;
}

.panel-4 .panel-inner__main, 
.panel-5 .panel-inner__main{
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 1200px;
    height: 100%;
    max-height: 719px;
    margin-top: 55px;
    /* background-color: pink; */
}

.panel-4 .panel-inner__main .left-box {
    /* width: calc(50% - 20px); */
    background: url('../images/panel-4-dp-img.png') no-repeat center;
    background-size: contain;
    /* border-radius: 30px; */
    height: 100%;
    max-height: 719px;
}

.panel-4 .panel-inner__main .right-box {
    /* width: calc(50% - 20px); */
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.panel-4 .panel-inner__main .left-box, .panel-4 .panel-inner__main .right-box,
.panel-5 .panel-inner__main .left-box, .panel-5 .panel-inner__main .right-box {
    /* width: calc(50% - 20px); */
    width: 50%;
    border-radius: 30px;
    height: 100%;
    max-height: 719px;
}

.panel-5 .panel-inner__main{
    height: 100%;
}
.panel-5 .panel-inner__main .left-box {
    background: url('../images/panel-5-dp-img.png') no-repeat center;
    background-size: cover;
   
}
.panel-5 .panel-inner__main .right-box {
    background: url('../images/panel-5-dp-bg-img.png') no-repeat center;
    box-shadow: 0px 4px 34px 0px #00000026;
}

.panel-7 .panel-inner__main .ocpp-header{
    text-align: center;
    padding: 25px 35px;
    /* padding: ; */
}
.panel-7 .panel-inner__main .ocpp-header .ocpp-header-message{
    line-height: 36px;
    font-size: 20px;
}

.panel-7 .panel-inner__main .panel-top{
    margin-top: 20px;
    background: url('../images/panel-7-dp-img.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 760px;
    height: 240px;
    max-height: 240px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
}

.panel-8 {
    background: url('../images/service-bg.png') no-repeat center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}
.panel-9 {
    background: url('../images/panel-9-bg.png') no-repeat center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}


.panel-8 .panel-inner__main{
    width: 100%;
    height: 100%;
    max-width: 1200px;
    color: #fff;
    padding-top: 200px;
 
}
.panel-9 .panel-inner__main{
    /* width: 1200px; */
    width: 100%;
    height: 100%;
    max-width: 1200px;
    color: #fff;
    padding-top: 200px;
    background-color: pink;
}
.panel-8 .panel-inner__main .heading{
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
}

.panel-8 .panel-inner__main .heading > span {
    font-size: 40px;
}

.panel-9 .panel-inner .heading{
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
    color: black;
    text-align: center;
}

.panel-9 .panel-inner .subheading {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

.panel-8 .panel-inner__main .heading .charzu-logo{
    background: url('../images/charzu-logo.png') no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 200px;
    height: 40px;
    margin-bottom: -4px;
}
.panel-8 .panel-inner__main .subheading{
    font-size: 20px;
    line-height: 40px;
    font-weight: 200;
    margin-top: 15px;
}

.panel-8 .panel-inner__main .service-list .service-list-title {
    margin-top: 70px;
    font-size: 40px;
}

.panel-8 .panel-inner__main .service-list .service-list-title{
    text-align: center;
}
.panel-8 .panel-inner__main .service-list .service-item {
    width: 32%;
    height: 393px;
    backdrop-filter: blur(30px);
    
}

.panel-8 .panel-inner__main .service-list .service-item:hover {
    background-color: var(--primary-white);
    transition: background ease-in 0.2s;
    color: var(--primary-black)
}
.panel-8 .panel-inner__main .service-list .service-item:hover .service-link a{
    transition: color ease-in 0.2s;
    color: var(--primary-blue);
}

.panel-8 .panel-inner__main .service-list .service-item:hover .service-link a:after{
    transition: background ease-in 0.2s;
    background-color: var(--primary-blue);
}


.panel-8 .panel-inner__main .service-list .service-list-inner{
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
    
}
.panel-8 .panel-inner__main .service-list .service-item{
    text-align: center;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #6b6b6b;
}

.panel-8 .panel-inner__main .service-list .service-item:nth-child(1) .service-item-img{
    background: url('../images/charger-user-icon.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 62px;
    height: 100%;
    max-height: 60px;
    display: inline-block;
}

.panel-8 .panel-inner__main .service-list .service-item .service-item-title{
    font-size: 26px;
    margin-top: 20px;
}

.panel-8 .panel-inner__main .service-list .service-item .service-item-desc{
    font-size: 20px;
    line-height: 30px;
    padding: 40px;
}
.panel-8 .panel-inner__main .service-list .service-item .service-link{
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    
}

.panel-8 .panel-inner__main .service-list .service-item .service-link a{
    color: #fff;
}

.panel-8 .panel-inner__main .service-list .service-item .service-link a:after{
    content: "";
    display: inline-block;
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -4px;
    left: 0;
    background-color: #fff;

}

.panel-8 .panel-inner__main .service-list .service-item:nth-child(1) .service-link a{
  
    margin-top: 30px;
    
}

.panel-8 .panel-inner__main .service-list .service-item:nth-child(1) .service-item-desc{
    margin-top: 30px;
}
.panel-8 .panel-inner__main .service-list .service-item:nth-child(3) .service-item-desc{
    margin-top: 30px;
}

.panel-8 .panel-inner__main .service-list .service-item:nth-child(2) .service-item-img{
    background: url('../images/charger-business-icon.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 90px;
    height: 100%;
    max-height: 60px;
    display: inline-block;
}

.panel-8 .panel-inner__main .service-list .service-item:nth-child(3) .service-item-img{
    background: url('../images/ocpp-compatibility-icon.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 72px;
    height: 100%;
    max-height: 60px;
    display: inline-block;    
}

.user-feedback:nth-child(1){
    position: absolute;
    top: 50px;
    left: 0px;
}


.user-feedback:nth-child(2){
    position: absolute;
    top: 315px;
    left: 10px;

}

.user-feedback:nth-child(3){
    position: absolute;
    top: 534px;
    left: 10px;

}

.line-feedback:nth-child(1){
    position: absolute;
    top: 152px;
    right: 15px;

}


.line-feedback:nth-child(2){
    position: absolute;
    top: 315px;
    right: 10px;

}

.line-feedback:nth-child(3){
    position: absolute;
    top: 550px;
    right: 10px;

}


.user-feedback:nth-child(1) .avatar, .user-feedback:nth-child(2) .avatar, .user-feedback:nth-child(3) .avatar{
    background: url('../images/user-avatar.png') no-repeat center;
    background-size: cover;
    width: 100px;
    height: 100px;
}

.line-feedback:nth-child(1) .avatar, .line-feedback:nth-child(2) .avatar, .line-feedback:nth-child(3) .avatar{
    background: url('../images/line-avatar.png') no-repeat center;
    background-size: cover;
    width: 100px;
    height: 100px;
}

.user-feedback:nth-child(1) .avatar {
    position: absolute;
    top: 73px;
    left: 10px;
}

.user-feedback:nth-child(1) .user-speech-bubble,
.user-feedback:nth-child(3) .user-speech-bubble{
    background: url('../images/user-speech-bubble.png') no-repeat center;
    background-size: cover;
    width: 155px;
    height: 95px;
}

.line-feedback:nth-child(1) .line-speech-bubble{
    background: url('../images/line-speech-bubble.png') no-repeat center;
    background-size: cover;
    width: 215px;
    height: 95px;
    padding: 16px;
    color: #fff;
    position: absolute;
    top: -66px;
    right: 89px
}

.line-feedback:nth-child(2) .line-speech-bubble,
.line-feedback:nth-child(3) .line-speech-bubble {
    background: url('../images/line-speech-bubble-2.png') no-repeat center;
    background-size: cover;
    width: 225px;
    height: 130px;
    padding: 16px;
    color: #fff;
    position: absolute;
    top: -66px;
    right: 89px;
}


.user-feedback:nth-child(1) .user-speech-bubble{
    position: absolute;
    top: 6px;
    left: 92px;
    padding: 16px;
}


.user-feedback:nth-child(2) .user-speech-bubble{
    background: url('../images/user-speech-bubble-2.png') no-repeat;
    background-size: cover;
    position: absolute;
    width: 152px;
    height: 67px;
    top: -43px;
    left: 84px;
    padding: 15px 15px 0 21px;
}


.user-feedback:nth-child(3) .user-speech-bubble{
   
    background: url('../images/user-speech-bubble.png') no-repeat;
    position: absolute;
    top: -69px;
    left: 84px;
    padding: 15px 15px 0 21px;
}


.panel-4 .panel-inner__main .right-box .number-of-user-feedback{
    width: 100%;
    height: 170px;
    padding: 30px;
} 
/** number-of-user-feedback안의 메시지 **/
.panel-4 .panel-inner__main .right-box .number-of-user-feedback > h3{
    font-size: 28px;
}
.panel-4 .panel-inner__main .right-box .number-of-user-feedback p:first-of-type {
    font-size: 10px;
    color: rgba(51, 51, 51, 0.5);
}
.panel-4 .panel-inner__main .right-box .number-of-user-feedback #number-of-users {
    font-size: 50px;
    text-align: right;
    margin-top: 10px;
}

.panel-4 .panel-inner__main .right-box .features-of-service{
    /* width: 100%; */
    height: 100%;
    max-height: 525px;
}

.panel-4 .panel-inner__main .right-box .features-of-service .promotion-message{
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    padding: 30px;
    font-weight: 200;
}

.panel-4 .panel-inner .features-of-service .promotion-message:last-child{
    font-weight: 200;
}
.neumorphic-tag {
    padding: 10px 14px;
    color: #4a4a4a;
    border: none;
    border-radius: 40px;
    box-shadow: 2px 2px 3px 0px #AEAEC099, -1px -1px 3px 0px #FFFFFF, 3px 3px 2px 0px #AEAEC033 inset, -1px -1px 2px 0px #FFFFFFB2 inset;
    transition: all 0.2s ease-in-out;
    outline: none;
    max-width: 103px;
    text-wrap: nowrap;
}

.features-wrapper .tags{
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: center;
}

.features-wrapper .tags .combined-tags{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    font-size: 18px;
}

.features-wrapper .tags .combined-tags:nth-child(1) .tag, .features-wrapper .tags .combined-tags:nth-child(2) .tag  {
    max-width: 108px;
}
.features-wrapper .tags .combined-tags:nth-child(2) .tag{
    max-width: 130px;
}

.panel-4 .right-box .features-of-service .charzu-logo-without-icon {
    text-align: center;
    font-size: 20px;
    font-weight: 200;
    line-height: 40px;
}
.charzu-text-logo{
    font-size: 24px;
}


.panel-6 .panel-inner, .panel-7 .panel-inner{
    height: 100%;
    max-width: 760px;
    width: 100%;
}

.panel-6 .panel-inner__main .dangerous-factors-header{
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}


.panel-6 .panel-inner__main .dangerous-factors-header .dangerous-factors-header-text{
    font-size: 20px;
    width: 50%;
}

.gradient-decorator{
    width: 65%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, rgba(255, 255, 255, 0) 100%);
}

.dangerous-factors-wrapper{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 35px;
    box-shadow: 0px 1px 4px 0px #CCCCCC40;

}
.dangerous-factors-wrapper__left,.dangerous-factors-wrapper__right{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dangerous-factor{
    display: flex;
    align-items: center;
    gap: 30px;
}

.factor-circle {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-blue)
}
.factor-text {
    font-size: 20px;
    font-weight: 200;
}

.panel-6 .panel-inner__main .panel-middle {
    padding: 20px 40px 20px 70px;
    margin-top: 20px;
}

.panel-6 .panel-inner__main .panel-middle .panel-middle__text{
    line-height: 36px;
    font-size: 20px;
    font-weight: 200;
}
.panel-6 .panel-bottom {
    margin-top: 20px;
    width: 100%;
    height: 428px;
    display: flex;
    gap: 10px;
    /* align-items: center; */
}
.panel-6 .panel-bottom .panel-bottom__left, .panel-6 .panel-bottom .panel-bottom__right{
    /* width: calc(50% - 10px); */
    width: 50%;
}
.panel-6 .panel-bottom .panel-bottom__left .panel-bottom__left-img{
    background: url('../images/panel-6-left.png') no-repeat center;
}

.panel-6 .panel-bottom .panel-bottom__right .panel-bottom__right-img{
    background: url('../images/panel-6-right.png') no-repeat center;
}

.panel-6 .panel-bottom .panel-bottom__left .panel-bottom__left-img,
.panel-6 .panel-bottom .panel-bottom__right .panel-bottom__right-img{   
    background-size: cover;
    width: 100%;
    max-width: 387px;
    height: 100%;
    max-height: 213px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.panel-6 .panel-bottom__left-description-header,
.panel-6 .panel-bottom__right-description-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-6 .panel-bottom__left-description-header .solution, 
.panel-6 .panel-bottom__right-description-header .solution{
    font-size: 30px;
    
}

.panel-bottom__left-description-header,
.panel-bottom__right-description-header{
    padding: 20px;
}

.panel-6 .panel-bottom__left-description-header .panel-bottom__left-icon,
.panel-6 .panel-bottom__right-description-header .panel-bottom__right-icon{
    max-width: 40px;
    height: 40px;
    max-height: 40px;
}

.panel-6 .panel-bottom__left-description-header .panel-bottom__left-icon{
    background: url('../images/fire-icon.png') no-repeat center;
}
.panel-6 .panel-bottom__right-description-header .panel-bottom__right-icon{
    background: url('../images/ai-icon.png') no-repeat center;
}


.panel-6 .panel-bottom__left-description-header .panel-bottom__left-icon,
.panel-6 .panel-bottom__right-description-header .panel-bottom__right-icon{
    display: inline-block;
    background-size: cover;
    width: 100%;
    /* max-width: 40px;
    height: 40px;
    max-height: 40px; */
}

.panel-7 .panel-middle {
    margin-top: 20px;
    width: 100%;
    display: flex;
    gap: 10px;
}

.panel-7 .panel-middle .panel-middle__left-description,
.panel-7 .panel-middle .panel-middle__right-description{
    width: 50%;
    height: 225px;
    max-height: 225px;
}

.panel-7 .panel-middle .panel-middle__left-description-header,
.panel-7 .panel-middle .panel-middle__right-description-header{
    padding: 20px;
}


.panel-7 .panel-middle__left-description-header,
.panel-7 .panel-middle__right-description-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-7 .panel-middle__left-description-header .protocol,
.panel-7 .panel-middle__right-description-header .protocol{
    font-size: 30px;
}


.panel-7 .panel-middle .panel-middle__left-description-header .panel-middle__left-icon{
    max-width: 62px;
    height: 45px;
    max-height: 45px;
}
.panel-7 .panel-middle .panel-middle__right-description-header .panel-middle__right-icon{
    max-width: 84px;
    height: 45px;
    max-height: 45px;
}

.panel-7 .panel-middle .panel-middle__left-description-header .panel-middle__left-icon{
    background: url('../images/OCPP\ 1.6.png') no-repeat center;
    /* background-size: cover; */
}
.panel-7 .panel-middle .panel-middle__right-description-header .panel-middle__right-icon{
    background: url('../images/OCPP\ 2.0.1.png') no-repeat center;
    /* background-size: contain; */
}


.panel-7 .panel-middle .panel-middle__left-description-header .panel-middle__left-icon,
.panel-7 .panel-middle .panel-middle__right-description-header .panel-middle__right-icon{
    display: inline-block;
    background-size: contain;
    width: 100%;
}
.panel-7 .panel-bottom {
    margin-top: 20px;
    text-align: center;
    padding: 25px 35px;
    height: 100%;
    max-height: 117px;
}

.panel-7 .panel-bottom .closure-message {
    line-height: 36px;
    font-weight: 200;
    font-size: 20px;
}

.pros-factor{
    display: flex;
    align-items: center;
    gap: 15px;
    line-height: 40px;
    padding-left: 21px;
}
.panel-10 .panel-inner{
    display: flex;
}
.panel-10 .panel-type-center .panel-inner-left{
    background: url('../images/panel-10-bg.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 749px;
    height: 579px;
    max-height: 579px;
    display: inline-block;
}
.panel-11 .panel-type-center .panel-inner-left{
    background: url('../images/panel-11-bg.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 667px;
    height: 501px;
    max-height: 501px;
    display: inline-block;
}
.panel-12 .panel-type-center .panel-inner-left{
    background: url('../images/panel-12-bg.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 514px;
    height: 396px;
    max-height: 396px;
    display: inline-block;
}

.panel-13 .panel-type-center .panel-inner-left{
    background: url('../images/panel-13-bg.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 456px;
    height: 257px;
    max-height: 257px;
    display: inline-block;  
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    
}
.panel-14 .panel-inner {
    background: url('../images/panel-14-bg.png') no-repeat center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.panel-10 .panel-type-center .panel-inner-right .supplement-word,
.panel-11 .panel-type-center .panel-inner-right .supplement-word,
.panel-12 .panel-type-center .panel-inner-right .supplement-word,
.panel-13 .panel-type-center .panel-inner-right .supplement-word
{
    color: #9D9D9D;
    font-weight: 200;
    font-size: 20px;
}

.panel-10 .panel-type-center .panel-inner-right .heading,
.panel-11 .panel-type-center .panel-inner-right .heading,
.panel-12 .panel-type-center .panel-inner-right .heading,
.panel-13 .panel-type-center .panel-inner-right .heading
{
    font-size: 40px;
}

.panel-10 .panel-type-center .panel-inner-right .subheading,
.panel-11 .panel-type-center .panel-inner-right .subheading,
.panel-12 .panel-type-center .panel-inner-right .subheading,
.panel-13 .panel-type-center .panel-inner-right .subheading
{
    font-size: 18px;
    font-weight: 300;
    margin-top: 15px;
}

.panel-type-center{
    width: 100%;
    height: 100%;
}
.panel-12 .panel-type-center-inner, .panel-13 .panel-type-center-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px;
}


.panel-type-center-inner{
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
}

.panel-15 {
    background: url("../images/panel-15-bg.png") no-repeat center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.panel-15 .panel-inner{
    max-width: 1200px;
    

}


.panel-15 .panel-inner .heading{
    font-size: 44px;
    
}

.panel-15 .panel-inner .subheading{
    font-size: 20px;
    font-weight : 300;
    text-align: center;
}
.panel-middle{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 189px;
}
.panel-middle-center .panel-middle-card-header, 
.panel-middle-right .panel-middle-card-header{
    padding: 22px;
}

.panel-middle-card {
    width: 368px;
    max-height: 487px;
    border-radius: 20px;
    padding-bottom: 81px;
    /* box-shadow: 0px 1px 4px 0px #CCCCCC; */
    backdrop-filter: blur(30px);
    border: 1px solid;
    border-image-source: linear-gradient(138.76deg, rgba(231, 231, 231, 0.15) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(153, 153, 153, 0.125) 100%);

}

.panel-middle-card:hover{
    scale: 1.05;
    transition: .4s;
}

.panel-bottom-img {
    background: url(../images/panel-15-bottom-bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 1200px;
    /* height: 192px;
    max-height: 192px; */
    height: 206px;
    max-height: 206px;
    margin-top: 50px;
    border-radius: 20px;
}

.panel-middle-card-header {
    background-color: var(--primary-blue);
    height: 100px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px; 
    padding: 35px;
    text-align: center;
    font-size: 24px;
    font-weight: 200;
    color: var(--primary-white);
}

.panel-middle-card-body {
    padding: 25px 25px 0 25px;
    color: var(--primary-white);
}

.border-bottom {
    height: 1px;
    background-color: #dddddd;
    width: 94%;
    margin: 20px auto;
}
.service-point {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.service-point-desc {
    font-size: 20px;
    font-weight: 300;
}

.service-point .check-icon{
    background:url(../images/check-icon.png) no-repeat center;
    background-size: cover;
    width: 25px;
    height: 25px;
    display: inline-block;
}

.service-popup, .contact-popup{
    width: 100%;
    height: 100%;
    position: relative;
}

#close-popup {
    position: absolute;
    top: 17px;
    right: 31px;
    background: url('../images/popup-close-btn.png') no-repeat;
    background-position: center;
    background-size: contain;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    text-indent: -9999px;
    cursor: pointer;

}

.service-popup-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
}
#dynamic-service-popup-img, .contact-popup{
    width: 1410px;
    /* height: 100%; */
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정색 */
    z-index: 10; /* 팝업보다 위에 위치 */
}

.panel-middle-card-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.panel-middle-card-footer .service-link{
    padding: 10px 15px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-white);
    text-wrap: nowrap;
    width: 259px;
    text-align: center;
    border-radius: 30px;
    border: 2px solid var(--primary-blue);
    cursor: pointer;
}

.panel-middle-card-footer .service-link:hover{
    background-color: var(--primary-blue);
    transition: background .3s;
    color: #fff;
}

/*service popup 스타일*/

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정색 */
    z-index: 10; /* 팝업보다 위에 위치 */
}

.service-popup, .contact-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    /* padding: 20px; */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 30; /* 가장 위에 위치 */
    width: 300px;
    text-align: center;
    /* width: 1410px;
    height: 3350px; */
    width: 1475px;
    height: 986px;
    overflow-y: auto;
}
#notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* display: none; */
}


/*service popup 스타일 끝*/

#progress-container {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* max-width:  800px; */
    max-width:  1200px;
    height: 30px; /* 높이를 더 크게 설정 */
    z-index: 1000;
}

#progress-bar {
    position: absolute;
    top: 5px; /* progress bar의 위치 */
    /* top: 7px;  */
    left: 0;
    height: 3px; /* progress bar의 높이 */
    background-color: #3498db;
    width: 0%; /* 초기 너비 */
    z-index: 3;
}

#default-progress-bar{
    background-color: #CCCCCC;
    width: 100%;
    position: absolute;
    /* top: 7px;  */
    top: 5px; 
    left: 0;
    height: 3px;
    z-index: 2;
}
#circle-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}


.circle {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0;
    z-index: 4;
    cursor: pointer;
}

.circle span{
    width: 100px;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: bold;
}


.section-active {
    opacity: 1;
    transition: all ease .5;
    /* animation: fadeIn 2s forwards;  */
  }


  .circle-active {
    opacity: 1;
    transition: ease all .5;
  }

  .hidden {
    opacity: 0;
  } 
.step-text {
    font-size: 10px;
}
  .step-hidden {
    display: none;
  }
  .test {
    font-size: 40px;
  }

  .step-visible {
    position: absolute;
    transform: translateY(-50px);
  }


  
  .visible {
    opacity: 1; /* 완전히 보이기 */
  }
 

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .last-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #fff;
  }
.last-container .panel-inner {
    width: 100%;
    position: relative;
   
}
.last-container .panel-inner .subheading {
    font-weight: 500;
    font-size: 24px;
}

.last-container .panel-inner .charzu-logo-without-icon {
    font-size: 120px;
}
.last-container .panel-inner .middle {
    text-align: center;
    margin-top: 325px;
}

.last-container .contact-cta-btn {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    
}

.last-container .contact-cta-btn a {
    display: inline-block;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: var(--primary-blue);
    line-height: 74px;
    width: 100%;
    max-width: 368px; 
    height: 74px;
    border: 2px solid var(--primary-blue);
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
}
.last-container .contact-cta-btn a:hover{
    background-color: var(--primary-blue);
    color: #fff;
    transition: background .3s;
}

.last-container .last-container-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #D9EDFD;
    width: 100vw;
    height: 332px;

}

.last-container-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
}



.company-info-links {
    display: flex;
    gap: 40px;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 40px;
}

.company-info-basics{
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 98px;
    margin-bottom: 20px;
}

.company-info-basics div:first-child span:first-child, .company-info-basics div:nth-child(2) span:first-child{
   color: #33333399;
}

.company-info-basics div:first-child span:first-child{
    display: inline-block;
    width: 100px;
}

.company-info-basics div:first-child span:nth-child(2){
    display: inline-block;
    width: 100px;
    color: var(--primary-black);
}

.company-info-basics div:nth-child(2) span:first-child{
    display: inline-block;
    width: 100px;
}


.company-info-basics div:nth-child(2) span:nth-child(2){
    display: inline-block;
    width: 400px;
    color: var(--primary-black);
}



.company-copyright{
    margin-top: 80px;
    font-weight: 500;
    font-size: 12px;
}

.contact-popup{
    display: flex;
    gap: 83px;
    padding-top: 82px;
    /* display: none; */
    
}
.contact-header{
    font-size: 56px;
    color: #4282EA;
    font-weight: 500;
}
.contact-form {
    width: 537px;
    
}
#inquiry-form {
    margin-top: 60px;
}

.email-input {
    display: flex;
    align-items: center;
}

.email-input input[type="text"] {
    flex: 1;
}

.email-input span {
    margin: 0 10px;
}

.email-input select {
    width: auto;
}


#close-popup.contact-form-close{
    position: absolute;
    top: 17px;
    right: 31px;
    background: url('../images/popup-close-btn.png') no-repeat;
    background-position: center;
    background-size: contain;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    text-indent: -9999px;
    cursor: pointer;
}
.form-group {
    text-align: left;
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    gap: 85px;
    padding-bottom: 17px;
    margin-bottom: 21px;
}

.form-group label {
    font-size: 16px;
    font-weight: 400;
    width: 80px;
    text-wrap: nowrap;
}

.form-group input, .form-group select {
    font-size: 16px;
    border: none;
    outline: none;
}
.form-group input, .form-group select{
    font-weight: 300;
}

.form-group #inquiry{
    resize: none;
    width: 337px;
    height: 319px;
    outline: none;
    border: none;
    font-family: "Pretendard";
    font-size: 16px;
    font-weight: 300;
}

#inquiry-form button[type="submit"]{
    outline: none;
    border: none;
    width: 174px;
    height: 51px;
    border-radius: 42px;
    background-color: #4282EA;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    

}

.contact-popup-image {
    background: url("../images/contact-bg.png") no-repeat;
    background-position: center;
    background-size: cover;
    width: 668px;
    height: 661px;
    margin-top: 69px;
}

.virtical-line-breaker {
    width: 1px;
    height: 774px;
    background: #D9D9D9;
    
}

#email {
    width: 139px;
}
#email-domain-input{
    width: 100px;
    margin-left: 5px;
}
.email-input {
    display: flex;
    align-items: center;

}

.popup-hidden {
    display: none; /* 숨기기 */
}


 @media (max-height: 1000px) {

    .panel-3 .panel-inner .heading, 
    .panel-4 .panel-inner .heading, 
    .panel-5 .panel-inner .heading, 
    .panel-6 .panel-inner .heading, 
    .panel-7 .panel-inner .heading, 
    .panel-9 .panel-inner .heading, 
    .panel-10 .panel-inner .heading, 
    .panel-15 .panel-inner .heading{
        margin-top: 35px;
    }
    .panel-3 .panel-inner .heading,
    .panel-4 .panel-inner .heading, 
    .panel-5 .panel-inner .heading, 
    .panel-6 .panel-inner .heading, 
    .panel-7 .panel-inner .heading,
    .panel-9 .panel-inner .heading, 
    .panel-10 .panel-inner .heading,
    .panel-15 .panel-inner .heading{
        margin-top: 35px;
    }
    
    .panel-inner .heading {

    }
    .panel-inner__bottom {
        margin-top: min(188px, 106px);
    }

    .panel-2 .panel-inner .panel-inner__main .panel-inner__left {
        max-height: min(400px, 621px)
    }

    .panel-3 .panel-inner .panel-inner__top{
        gap: 16px;
    }

    .panel-3 .panel-inner .panel-inner__top .strong-point {
        width: 334px;
        height: 108px;
        font-size: 16px;
    }

    .panel-3 .panel-inner__main .panel-inner-main__top .phrase .message{
        font-size: 20px;
        line-height: 33px;
    }
    .panel-3 .panel-inner__main .phrase-wrapper:nth-child(2) .message {
        font-size: 20px;
        line-height: 33px;
    }

    .panel-3 .panel-inner__main .panel-inner-main__top{
        gap: 30px;
    }

    .panel-3 .panel-inner__main .panel-inner-main__top .promotion-img-1{
        max-width: 523px;
        height: 183px;
        max-height: 183px;
    }
    .panel-3 .panel-inner__main .panel-inner-main__top .promotion-img-2{
        height: 165px;
        max-width: 470px;
        max-height: 165px;
    }

    .panel-4 .panel-inner__main, .panel-5 .panel-inner__main{
        width: 935px;
        max-height: 561px;
        margin-top:30px;
    }

    .panel-4 .panel-inner__main .right-box .number-of-user-feedback > h3 {
        font-size: 24px;
    }

    .panel-4 .panel-inner__main .right-box .number-of-user-feedback #number-of-users{
        font-size: 33px;
    }


    .panel-4 .panel-inner__main .right-box .features-of-service .promotion-message {
        line-height: 28px;
        padding: 10px;
        font-size: 18px;
    }

    .features-wrapper .tags .combined-tags {
        gap: 8px;
        font-size: 15px;
    }
    .tag {
        padding: 10px 12px;
        font-size: 14px;
    }

    .panel-4 .right-box .features-of-service .charzu-logo-without-icon{
        line-height: 28px;
        font-size: 16px;
    }

    .user-feedback:nth-child(1) .user-speech-bubble {
        top: -41px;
    }
    


    .user-feedback:nth-child(1) .avatar{
        top: 31px;
    }

    .line-feedback:nth-child(1) .avatar, 
    .line-feedback:nth-child(2) .avatar, 
    .line-feedback:nth-child(3) .avatar{
        height: 78px;
    }

    .line-feedback:nth-child(1) {
        top: 161px;
    }

    .user-feedback:nth-child(2) {
        top: 218px;
    }
    .user-feedback:nth-child(3) {
        top: 395px;
    }

    .line-feedback:nth-child(2){
        top: 295px;
    }

    .line-feedback:nth-child(3) {
        top: 471px;
    }
    .user-feedback:nth-child(1) .user-speech-bubble, .user-feedback:nth-child(3) .user-speech-bubble

    .user-feedback:nth-child(1) .user-speech-bubble, 
    .user-feedback:nth-child(2) .user-speech-bubble,
    .user-feedback:nth-child(3) .user-speech-bubble   {
        font-size: 14px;
        background-size: contain;
        width: 153px;
        /* height: 96px; */
    }

    .user-feedback:nth-child(1) .user-speech-bubble, .user-feedback:nth-child(3) .user-speech-bubble  {
        height: 96px;
    }

    .line-feedback:nth-child(1) .line-speech-bubble{
        width: 200px;
        height: 91px;
        font-size: 14px;
    }

    .line-feedback:nth-child(2) .line-speech-bubble, 
    .line-feedback:nth-child(3) .line-speech-bubble{
        width: 185px;
        height: 107px;
        font-size: 14px;
    }

    .factor-text {
        font-size: 16px;
    }

    .panel-6 .panel-inner .panel-inner__main .panel-middle__text{
        font-size: 16px;
        line-height: 25px;
    }

    .panel-6 .panel-inner .panel-inner__main .panel-middle__text .charzu-text-logo{
        font-size: 20px;
    }
    .panel-6 .panel-bottom .panel-bottom__left .panel-bottom__left-img,
    .panel-6 .panel-bottom .panel-bottom__right .panel-bottom__right-img{
        max-height: 158px;
    }
    .panel-6 .panel-bottom__left-description-header .panel-bottom__left-icon, 
    .panel-6 .panel-bottom__right-description-header .panel-bottom__right-icon {
        max-width: 34px;
        height: 34px;
        max-height: 34px;
    }

    .panel-6 .panel-inner__main .panel-middle {
        margin-top: 10px;
    }
    .panel-6 .panel-bottom {
        margin-top: 10px;
        height: 326px;
    }


    .panel-7 .panel-inner__main .ocpp-header{
        padding: 15px 35px;
    }

    .panel-7 .panel-inner__main .ocpp-header .ocpp-header-message{
        line-height: 28px;
        font-size: 18px;
    }

    .panel-7 .panel-inner__main .panel-top {
        max-height: 147px;
    }
    .panel-7 .panel-middle__left-description-header .protocol, 
    .panel-7 .panel-middle__right-description-header .protocol {
        font-size: 25px;
    }
    .panel-7 .panel-middle .panel-middle__left-description-header .panel-middle__left-icon,
     .panel-7 .panel-middle .panel-middle__right-description-header .panel-middle__right-icon{

    }

    .panel-7 .panel-middle .panel-middle__left-description-header .panel-middle__left-icon{
        max-width: 54px;
    }

    .pros-factor {
        line-height: 34px;
    }

    .panel-7 .panel-bottom{
        padding: 15px 35px;
    }


    .panel-8 .panel-inner__main{
        padding-top: 44px;
    }

    .panel-8 .panel-inner__main .heading {
        line-height: 50px;
        font-size: 35px;
    }
    .panel-8 .panel-inner__main .heading > span{
        font-size: 35px;
    }

    .panel-8 .panel-inner__main .subheading{
        line-height: 30px;
    }

    .panel-8 .panel-inner__main .heading .charzu-logo{
        height: 35px;
    }
    .panel-8 .panel-inner__main .service-list .service-list-title {
        margin-top: 40px;
        font-size: 30px;
    }

    .panel-8 .panel-inner__main .service-list .service-list-inner {
        margin-top: 20px;
    }

    
    .panel-8 .panel-inner__main .service-list .service-item{
        height: 360px;
    }

    .panel-8 .panel-inner__main .service-list .service-item .service-item-title{
        font-size: 22px;
    }
    .panel-8 .panel-inner__main .service-list .service-item:nth-child(1) .service-item-desc{
        margin-top: 0px;
        
    }

    .panel-8 .panel-inner__main .service-list .service-item .service-item-desc{
        padding: 25px;
    }

    .panel-9 .panel-inner .heading {
        font-size: 35px;
        line-height: 45px;
    }
    .panel-9 .panel-inner .subheading {
        font-size: 18px;
        line-height: 28px;
    }
    .panel-15 .panel-inner .heading {
        font-size: 35px;
    }
    .panel-15 .panel-inner .subheading{
        font-size: 18px;
    }
    .panel-middle {
        margin-top: 32px;
    }

    .panel-15 .panel-middle{
        margin-top: 189px;
    }
    .panel-middle-card {
        max-height: 386px;
    }
    .panel-middle-card-footer .service-link {
        font-size: 17px;
        padding: 7px 15px;
    }
    

    .panel-middle-center .panel-middle-card-header, 
    .panel-middle-right .panel-middle-card-header {
        padding: 25px;
    }

    .panel-middle-card-header {
        font-size: 21px;
    }

    .panel-middle-card-body{
        padding: 17px 17px 0 17px;
    }

    .border-bottom {
        margin: 12px auto;
    }

    .service-point-desc {
        font-size: 17px;
    }

    .service-point{
        padding: 5px;
    }

    .panel-middle-card-footer{
        gap: 5px;
    }

    .panel-bottom-img {
        max-height: 180px;
        margin-top: 20px;
    }

    .last-container .panel-inner .middle{
        margin-top: 214px;
    }



    .service-popup{
        width: 1418px;
        height: 744px;
    }


}