
.text-group{
    width: 100%;
    
}

.graphic-group{
    width: 100%;
    display: block;
    min-height: 600px;
    position: relative;
}

.bubble{
    display: inline-block;
    text-align: center;
    border-radius: 40px;
    height: 70px;
    background-color: #fff;
    padding: 0 40px;
    position: absolute;
    top:0;
}

.bubble.mint{
    background-color: #31C7AA;
    color: #fff;
}
.bubble.blue{
    background-color: #4B98F6;
    color: #fff;
}
.bubble.monun{
    background-image: url(../img/char/monun.png);
    background-size: 1000px;
    background-repeat: no-repeat;
}
.bubble.monun p{
    color:#fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    font-family: 'Usan';
}
.bubble p{
    font-family: "SBAggroL";
    font-size: 30px;
    line-height: 76px;
    font-weight: 300;
}
.bubble i.bubble-arrow{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_2765' data-name='패스 2765' d='M65.308,28.223,0,0H53Z' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 66px;
    height: 30px;
    display: block;
    position: absolute;
    left: 100px;
    bottom:-28px;
}
.bubble i.bubble-arrow.right{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_2765' data-name='패스 2765' d='M0,28.223,65.308,0h-53Z' fill='%23fff'/%3E%3C/svg%3E%0A");
    left: auto;
    right: 100px;
}
.bubble.mint i.bubble-arrow{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_2765' data-name='패스 2765' d='M65.308,28.223,0,0H53Z' fill='%2331C7AA'/%3E%3C/svg%3E%0A");
    left: 100px;
    bottom:-28px;
}
.bubble.mint i.bubble-arrow.right{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_2765' data-name='패스 2765' d='M0,28.223,65.308,0h-53Z' fill='%2331C7AA'/%3E%3C/svg%3E%0A");
    left: auto;
    right: 100px;
}

.bubble.blue i.bubble-arrow{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_3021' data-name='패스 3021' d='M65.308,28.223,0,0H53Z' fill='%234b98f5'/%3E%3C/svg%3E%0A");
    left: 100px;
    bottom:-28px;
}
.bubble.blue i.bubble-arrow.right{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65.308' height='28.223' viewBox='0 0 65.308 28.223'%3E%3Cpath id='패스_3021' data-name='패스 3021' d='M0,28.223,65.308,0h-53Z' fill='%234b98f5'/%3E%3C/svg%3E%0A");
    left: auto;
    right: 100px;
}



.char-group{
    width: 100%;
    max-height: 700px;
}
.char-group .char{
    display: inline-block;
    height: 800px;
    width: 600px;
    display: inline-block;    
    background-position: 50% calc(100% - 17px);
    background-repeat: no-repeat;
    background-size: auto 700px;
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}

.phone-group .char{
    -webkit-box-reflect:inherit;
}
.char-group .char-1-1{
    background-image: url(../img/char/char_1_1.png);
}
.char-group .char-1-2{
    background-image: url(../img/char/char_1_2.png);
}
.char-group .char-1-3{
    background-image: url(../img/char/char_1_3.png);
}
.char-group .char-2-1{
    background-image: url(../img/char/char_2_1.png);
    background-size: auto 420px;
}
.char-group .char-2-2{
    background-image: url(../img/char/char_2_2.png);
    background-size: 800px;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
}
.char-group .char-4-1{
    background-image: url(../img/char/char_4_1.png);
    background-size: auto 560px;
}
.char-group .char-4-2{
    background-image: url(../img/char/phone_4_1.png);
    background-size: auto 700px;
    width: 400px!important;
}
.char-group .char-5-1{
    background-image: url(../img/char/char_5_1.png);
    background-size: auto 560px;
}

.good-point{
    position: relative;
}
.point-div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.point-div .map-small{
    width:460px;
    height: 460px;
    border-radius: 50px;
    background-image: url(../img/char/point-map.png);
    background-position: 50% 50%;
    display: inline-block;
}
.point-div .map-small img{
    width: 120%;
    margin-left: -10%;
    margin-top: -20%;
}
.point-3 .map-small img{
    width: 100%;
    margin-top: -30px;
    margin-left: -25px;
}
.point-div h4{
    width: 400px;
    display: inline-block;
    margin-top: 80px;
}
.point-div .btn-wrp{
    width: 400px;
    display: inline-block;
    margin-top: 20px;
}
.point-div button{
    font-size: 24px;
    font-family: "SBAggroL";
    line-height: 54px;
    border: 3px solid #000;
    border-radius: 30px;
    display: inline-block;
    width: auto;
    padding: 0 40px;
}
.phone-group{
    position: relative;
}

.point-pop{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    display: block;
    z-index: 101;
    backdrop-filter: blur(10px);
    display: none;
    
}

.point-pop > div{
    width: 980px;
    height: 600px;
    margin: 0 auto 0 auto;
    border-radius: 30px;
    padding: 50px;
    position: relative;
    top: calc(50% - 300px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.3);
}
.point-pop#pop1 > div{
    background-size: cover;
    background-repeat: no-repeat;
}
.point-pop#pop2 > div{
    background-image: url(../img/section3/pop2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.point-pop#pop3 > div{
    background-image: url(../img/section3/pop3.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.point-pop button.close{
    width: 80px;
    height: 80px;
    background-color: #00000080;
    position: absolute;
    border-radius: 100px;
    padding: 0;
    right:30px;
    top: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26.707' height='26.707' viewBox='0 0 26.707 26.707'%3E%3Cg id='그룹_10888' data-name='그룹 10888' transform='translate(-1532.998 -252.998)' opacity='0.3'%3E%3Cline id='선_9' data-name='선 9' x1='26' y2='26' transform='translate(1533.352 253.352)' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Cline id='선_10' data-name='선 10' x2='26' y2='26' transform='translate(1533.352 253.352)' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.point-pop .grid{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 30px;
    height: 390px;
}
.point-pop h5.h5{
    margin-bottom: 10px;
    margin-top: 10px;
}
.point-pop p.summary{
    color:#fff;
    margin-bottom: 15px;
    line-height: 25px;
    font-family: 'SBAggroL';
}
.point-pop .grid > div{
    background-color: rgba(255,255,255,.15);
    border-radius: 15px;
    min-height: 100px;
    padding: 40px 0;
    text-align: center;
}
.point-pop .grid > div h6{
    color:#fff;
    font-size: 20px;
    line-height: 150%;
    margin-bottom: 5px;
}
.point-pop .grid > div p{
    color:#fff;
    line-height: 150%;
    font-family: 'SBAggroL';
    height: 72px;
}
.point-pop .grid .mobile{
    width: 100%;
    height: 315px;
    overflow: hidden;
    text-align: center;
}
.point-pop .grid .mobile img{
    
    margin-top: 30px;
}
.point-pop .grid2{
    margin-top: 20px;
}
.point-pop .grid3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    height: 380px;
    margin-top: 10px;
}
.point-pop .grid3 > div{
    padding-top: 270px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 50% 85px;
    background-size: 100px;
}
.point-pop .grid3 > div.ico_1{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75.49' height='90' viewBox='0 0 75.49 90'%3E%3Cg id='free-icon-alarm-bell-1059116' transform='translate(-0.5)'%3E%3Cpath id='패스_2733' data-name='패스 2733' d='M40.666,68.362V81.074a29.747,29.747,0,0,1-6.994,19.106H97.5a29.747,29.747,0,0,1-6.994-19.106V68.362a24.92,24.92,0,1,0-49.84,0Zm0,0' transform='translate(-27.341 -35.805)' fill='%23fff'/%3E%3Cpath id='패스_2734' data-name='패스 2734' d='M10.887,404.826h71.84v-8.592H10.887Zm0,0' transform='translate(-8.561 -326.584)' fill='%23fff'/%3E%3Cpath id='패스_2735' data-name='패스 2735' d='M184.29,481.613a6.607,6.607,0,0,0,6.6-6.481h-13.2A6.607,6.607,0,0,0,184.29,481.613Zm0,0' transform='translate(-146.044 -391.613)' fill='%23fff'/%3E%3Cpath id='패스_2736' data-name='패스 2736' d='M25.09,4.823,22.95,0A37.793,37.793,0,0,0,.5,34.515H5.776A32.512,32.512,0,0,1,25.09,4.823Zm0,0' transform='translate(0)' fill='%23fff'/%3E%3Cpath id='패스_2737' data-name='패스 2737' d='M309.38,34.515h5.276A37.792,37.792,0,0,0,292.207,0l-2.14,4.823A32.512,32.512,0,0,1,309.38,34.515Zm0,0' transform='translate(-238.666)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.point-pop .grid3 > div.ico_2{
    background-image: url("data:image/svg+xml,%3Csvg id='free-icon-money-management-9703917' xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath id='패스_2738' data-name='패스 2738' d='M162.863,143a19.863,19.863,0,1,0,19.863,19.863A19.886,19.886,0,0,0,162.863,143Zm2.637,31.952v2.991h-5.273v-3a7.437,7.437,0,0,1-6.044-7.295h5.273a2.155,2.155,0,0,0,2.152,2.152h2.569a2.149,2.149,0,1,0,0-4.3h-2.629a7.422,7.422,0,0,1-1.322-14.726v-2.991H165.5v2.984a7.349,7.349,0,0,1,6.063,7.225h-5.273a2.067,2.067,0,0,0-2.065-2.065h-2.676a2.15,2.15,0,1,0,0,4.3h2.629a7.422,7.422,0,0,1,1.322,14.726Z' transform='translate(-117.863 -117.863)' fill='%23fff'/%3E%3Cpath id='패스_2739' data-name='패스 2739' d='M90,50.625V39.375c-6.829-.172-8.505-8.934-3.216-12l-5.625-9.743a6.466,6.466,0,0,1-8.787-8.787L62.628,3.216A6.468,6.468,0,0,1,50.625,0H39.375c-.186,6.819-8.938,8.52-12,3.216L17.629,8.841a6.466,6.466,0,0,1-8.787,8.787L3.216,27.371A6.468,6.468,0,0,1,0,39.375v11.25c6.829.172,8.505,8.934,3.216,12l5.625,9.743c6.024-3.286,11.828,3.5,8.787,8.787l9.743,5.625c3.563-5.822,11.993-2.9,12,3.216h11.25c.172-6.829,8.934-8.505,12-3.216l9.743-5.625c-3.286-6.024,3.5-11.828,8.787-8.787l5.625-9.743c-5.822-3.563-2.9-11.993,3.216-12ZM45,70.137A25.137,25.137,0,1,1,70.137,45,25.165,25.165,0,0,1,45,70.137Z' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-position: 50% 90px;
    background-size: 115px;
}
.point-pop .grid3 > div.ico_3{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67.301' height='90' viewBox='0 0 67.301 90'%3E%3Cg id='free-icon-gift-bag-3420748' transform='translate(-64.565)'%3E%3Cpath id='패스_2740' data-name='패스 2740' d='M184.788,5.273a9.946,9.946,0,0,1,9.9,9.141h5.286a15.208,15.208,0,0,0-30.375,0h5.286A9.946,9.946,0,0,1,184.788,5.273Z' transform='translate(-86.572)' fill='%23fff'/%3E%3Cpath id='패스_2741' data-name='패스 2741' d='M221.264,267.55a3.089,3.089,0,0,0-2.206.921l-3.231,3.254-3.231-3.254a3.1,3.1,0,0,0-4.414,0,3.2,3.2,0,0,0,0,4.5l7.645,7.7,7.645-7.7a3.2,3.2,0,0,0,0-4.5A3.093,3.093,0,0,0,221.264,267.55Z' transform='translate(-117.612 -220.52)' fill='%23fff'/%3E%3Cpath id='패스_2742' data-name='패스 2742' d='M132.932,199.48H71.124L69.19,238.143h65.675Zm-19.519,21.1-11.385,11.466L90.642,220.579a8.486,8.486,0,0,1,0-11.929,8.377,8.377,0,0,1,11.385-.475,8.377,8.377,0,0,1,11.385.475A8.486,8.486,0,0,1,113.413,220.579Z' transform='translate(-3.812 -164.415)' fill='%23fff'/%3E%3Cpath id='패스_2743' data-name='패스 2743' d='M131.317,449.433h-66.2l-.55,11h67.3Z' transform='translate(0 -370.431)' fill='%23fff'/%3E%3Cpath id='패스_2744' data-name='패스 2744' d='M142.2,82H127.518c.012.262.019.527.019.793v7.469h-5.273V82.793c0-.267-.011-.531-.032-.793h-19.8c-.021.262-.032.526-.032.793v7.469H97.124V82.793c0-.265.007-.531.019-.793H82.458L81.69,97.377h61.281Z' transform='translate(-14.115 -67.586)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: 50% 80px;
    background-size: 90px;
}
.pop-phone-3{
    background-image: url(../img/section3/pop-3.png);
    background-position: calc(50% - 60px) bottom;
    background-repeat: no-repeat;
    background-size: 85%;
    display: block;
    height: 410px;
    width: 100%;
}
.point-pop.nopadding > div{
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.point-pop.nopadding > div div.bg{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.point-pop.nopadding > div div.bg .text{
    position: absolute;
    bottom:30px;
    left: 40px;
}
.point-pop.nopadding > div div.bg p.summary{
    padding-right: 20px;
}
.point-pop.nopadding > div div.content{
    background-color: #fff;
    padding: 80px 30px;
}
.point-pop.nopadding > div div.content > div{
    background-color: #f6f6f6;
    padding: 15px;
    border-radius: 15px;
    margin-top: 10px;
}
.point-pop.nopadding > div div.content > div p{
    font-size: 18px;
    line-height: 150%;
    font-family: 'SBAggroL';
}
.point-pop.nopadding > div div.content h5{
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 15px;
}
.point-pop.nopadding > div div.content h5:first-child{
    margin-top: 0;
}

.point-pop.nopadding#pop1 > div div.bg{
    background-image: url(../img/pop/img1.png);
}
.film-group {
    width: auto!important;
    white-space:nowrap;
    position: absolute;
    top:3520px;
    left: 100%;
    transition: all 1s;
}

.film-group > div{
    width: 470px;
    height: 290px;
    background-color: #000;
    box-sizing: border-box;
    padding: 40px 40px;
    border-radius: 30px;
    display: inline-block;
    position: relative;
    margin: 0 5px;
    vertical-align: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    box-shadow: 0 20px 30px rgba(0,0,0,0.3);
}
#film-1{
    background-image: url(../img/section4/f1.jpg);
}
#film-2{
    background-image: url(../img/section4/f2.jpg);
}
#film-3{
    background-image: url(../img/section4/f3.jpg);
}
#film-4{
    background-image: url(../img/section4/f4.jpg);
}
#film-5{
    background-image: url(../img/section4/f5.jpg);
}
#film-6{
    background-image: url(../img/section4/f6.jpg);
}
#film-7{
    background-image: url(../img/section4/f7.jpg);
}

.film-group > div h4{
    color:#fff;
    font-family: 'KCCChassam';
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 900;
}
.film-group > div p{
    color:#fff;
    font-family: 'KCCChassam';
    font-size: 17px;
    line-height: 200%;
    width: 100%;
    white-space:normal;
}
.film-fadeOut.left{
    background: linear-gradient(to right, #f6f6f6, #f6f6f600); /* 그라디언트 색상과 투명도 조절 */
    width: 20%;
    height: 290px;
    display: block;
    top:2020px;
    left: 0;
    position: absolute;
}
.film-fadeOut.right{
    background: linear-gradient(to right, #f6f6f600, #f6f6f6); /* 그라디언트 색상과 투명도 조절 */
    width: 20%;
    height: 290px;
    display: block;
    top:2020px;
    right: 0;
    position: absolute;
}
.film-group > div:hover {
    cursor: url('data:image/png;base64,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'),auto;

}
.film-group > div:hover .film-pop{
    opacity: 1;
    
}
.film-pop{
    width: 600px;
    height: 350px;
    background-color: #000;
    border-radius: 30px;
    position: absolute;
    z-index: 1;
    top:-440px;
    left: -140px;
    position: relative;
    opacity: 0;
    transition: all .5s;
    display: none;
}
.film-pop .pop-arrow{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34.286' viewBox='0 0 40 34.286'%3E%3Cpath id='다각형_6' data-name='다각형 6' d='M20,0,40,34.286H0Z' transform='translate(40 34.286) rotate(180)'/%3E%3C/svg%3E%0A");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 30px;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: calc(50% - 20px);
    top:100%;
}

img.bubble-pop{
    width: 500px;
}


#text-5-3-2{
    position: absolute;
    left: calc(50% - 80px);
    top: -75px;
    color: #DDC005;
}
#char-5-3-3{
    position: absolute;
    left: calc(50% - 450px);
    top: -240px;
    width: 900px;
}
.char-group#phone-6{
    height: 500px;
}
.char-group#phone-6 > .char{
    position: absolute;
    top:0;
}
.char-group#phone-6 .phone-6-1{
    background-image: url(../img/char/phone_small_1.png);
    background-size: auto 550px;
    left: -50px;
    top: -30px;
}
.char-group#phone-6 .phone-6-2{
    background-image: url(../img/char/phone_small_2.png);
    background-size: auto 550px;
    right: -50px;
    top: -30px;
}
.char-group#phone-6 .phone-6-3{
    background-image: url(../img/char/phone_small_3.png);
    background-size: auto 660px;
    z-index: 10;
    left: calc(50% - 300px);
}
.char-group .phone-6-1 img{
    position: absolute;
    width: 200px;
    top: -115px;
    left: 120px;
}


/*상단 이미지*/
.swiper .swiper-text{
    position: absolute;
    z-index: 10;
    width: 900px;
    height: 400px;
    left: calc(50% - 450px);
    top: calc(50% - 150px);
    transform: scale(.8);
}
.swiper .swiper-text p.title{
    color:#fff;
    font-size: 50px;
    line-height: 70px;
}
.swiper .swiper-text p.title > *{
    vertical-align: middle;
}
.swiper .swiper-text p.title i{
    font-family: "SBAggroB";
    font-weight: 900;
    display: inline-block;
    line-height: 70px;
}
.swiper .swiper-text p.title span.text{
    line-height: 70px;
}
.swiper .swiper-text p.title span.bold{
    display: inline-block;
    width: 400px;
}

.swiper .swiper-text p.summary{
    color:#fff;
    font-size: 30px;
    line-height: 150%;
    margin-top: 30px;
    font-family: 'SBAggroL';
}

.swiper .swiper-pagination{
    top:calc(50% + 130px)!important;
    z-index: 11;
    height: 10px;
    overflow: hidden;
    width: 900px!important;
    left: calc(50% - 450px)!important;
    text-align: left!important;
    transform: scale(.8);
}
.swiper .swiper-pagination > span{
    border-radius: 0!important;
    width: 100px;
    background-color: #ffffff90!important;
}
.swiper .swiper-pagination > span.swiper-pagination-bullet-active{
    background-color: #ffffff!important;
}
.swiper .swiper-slide .text-bold{
    font-size: 74px;
    color:#fff;
    font-family: 'UhBeeJJIBBABBA';
    color:#41E0C2;
    width: 290px;
    top:calc(50% - 125px)!important;
    left: calc(50% - 155px)!important;
    position: absolute;
    opacity: 0;
    filter: blur(10px);
    transition: all .5s;
    transition-delay: .5s;
    text-align: center;
}
.swiper .swiper-slide.swiper-slide-active .text-bold{
    opacity: 1;
    filter: blur(0px);

}

.swiper2 .swiper-slide .char{
    transition: all .5s;
    transition-delay: .5s;
    opacity: 0;
    filter: blur(10px);
}
.swiper2 .swiper-slide.swiper-slide-active .char{
    opacity: 1;
    filter: blur(0px);
}
.img-group {
    position: relative;
    width: 100%;
    height: 600px;
    top: -500px;
}
.img-group img{
    position: absolute;
    transition: all 1s;
    
}
.img-group img#sImg1{
    width: 250px;
    opacity: 0.1;
    filter: blur(10px);
}
.img-group img#sImg2{
    width: 250px;
    opacity: 0.1;
    filter: blur(10px);
}
.img-group img#sImg3{
    width: 250px;
    opacity: 0.1;
    filter: blur(10px);
}
.img-group img#sImg4{
    height: 250px;
    opacity: 0.1;
    filter: blur(10px);
}

.img-group.ac img#sImg1{
    opacity: 1;
    filter: blur(0px);
    transition-delay: 0;
}
.img-group.ac img#sImg2{
    width: 250px;
    opacity: 1;
    filter: blur(0px);
    transition-delay: 0.4s;
}
.img-group.ac img#sImg3{
    width: 250px;
    opacity: 1;
    filter: blur(0px);
    transition-delay: 0.8s;
}
.img-group.ac img#sImg4{
    height: 250px;
    opacity: 1;
    filter: blur(0px);
    transition-delay: 1.6s;
}


.change-phone {
    position: fixed;
    top:0;
    left: 0;
    width: 100%!important;
    height: 100%;
    transition: all 1s;
    transform: scale(.7)!important;
    display: none;
}
.change-phone.ac {
    display: block;
}
.change-phone img{
    width: 400px;
    position: absolute;
    left: calc(50% - 210px);
    top: calc(50% - 390px);
    opacity: 0;
    transition: all .5s;
    
}
.change-phone .bubble{
    z-index: 20;
}
.change-phone img.ac{
    opacity: 1;
}
.change-phone img#pImg1{
    z-index: 11;
}
.change-phone img#pImg2{
    z-index: 12;
}
.change-phone img#pImg3{
    z-index: 13;
}
.change-phone img#pImg4{
    z-index: 14;
}
.change-phone img#pImg5{
    z-index: 15;
}
.change-phone img#pImg6{
    z-index: 16;
}
#section6.ac .change-phone{
    opacity: 0;
    display: none;
}
.location{
    position: absolute;
    width: 130%;
    height: 96%;
    top: 2%;
    left: -15%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1079.999' viewBox='0 0 1920 1079.999'%3E%3Cpath id='패스_2347' data-name='패스 2347' d='M514.34,1820.726l17.177-64.606,95.005,36.916-9.555,52.144Zm-368.815-3.83L214.26,1632.86l120.874,46.961-31.219,178.3Zm574.009-176.871,14-149.885,204.987,43.534-40.367,149.132ZM571.8,1604.641l37.466-140.893,97.341,20.673-13.934,149.17Zm-347.933,2.5,80.306-215.031,12.25,3.061,239.51,56.264L487.309,1709.5ZM9.9,1485.359l41.519-156.4,199.327,49.809-61.586,164.906Zm845.444-182.824,136.812,43.343-38.716,134.815-246.979-52.45,32.963-105.674,1.7.611ZM611.524,1408.084l-100.508-23.609L575.5,1206.622l58.8,17,9.028,64.295,70.343,25.366-34.077,109.259ZM785.488,1174.9l233.333,78.137-19.084,66.439-142.6-45.177-108.792,19.669ZM329.42,1341.82l-5.91-1.473,67.578-180.952L548.9,1199.715l-64.7,178.464ZM668.1,1267.671l-9.2-65.511-74.015-21.4,23.609-65.124,151.05,50.584-37.689,120.837Zm-267.35-134.144,29.036-77.739,152.756,51.156L558.3,1173.787Zm-215.591-2.668L203.1,979.877,377.87,1038.4l-55.377,148.27Zm21.251-178.825,15.547-130.816L434.23,887.5l-46.75,125.164Zm559.216-34.1-79.3-16.75,42.72-116.019L869.52,813.65,767.724,1140l-149.872-50.18L676.8,927.236l83.2,17.58ZM439.4,1030.057,544.81,747.817,701.928,779.67,649.7,921.512l.076.016-57.865,159.592ZM290.079,813.732l14.8-67.705,166.7,41.483-27.726,74.236ZM738.65,759.1,782.3,640.56l128.305,41.352L877.739,787.3ZM554.539,721.769l51.542-138,150.159,48.39L711.522,753.595Zm-243.79-2.575,47.033-215.211,16.3,5.014,179.869,57.966L481.241,761.621ZM613.034,528.322l59.945-210L930.622,410.3,866.565,610.033Zm67.491-236.458,62.01-217.241L993.854,171.71l11.6,5.227L939,384.149l-145.6-51.981,32.061-120.488-26.417-7.087-31.5,118.349Zm-647.7,54.763,2.086-7.6L96.592,74.6l105.386,30.953L169.737,196.11,340.48,253.563l-46.794,173.27ZM204.879,178.966,247.213,60.05,381.847,100.4l-34.2,126.615ZM413.522,464.022l57.544-210.77,77.4-25.186,55.9-206.814L716.91,64.726,624.73,387.685,520.767,355.237l-8.116,26.228L617.2,414.093,586.986,519.925ZM1046.439,0l13.939,5.7L1022.33,124.334l-6.79-3.055L701.678,0H542.045L578.68,11.469,525.965,206.514,448.6,231.689,387.453,455.663l-67.6-20.788L437.289,0H408.959L389.006,73.876,230.193,26.293l-19,53.355L102.839,47.817,113.991,0H57.832L0,247.981V466.253L18.291,399.6l188.131,57.846L177.1,570.885l26.472,6.9,29.019-112.3,98.955,30.423L284.2,712.592,0,641.875v28.29l278.329,69.26-14.455,66.123L0,723.15v28.765L195.4,812.93,180.276,940.205,0,843.943v31.105l176.8,94.407-18.242,153.454L0,1086.98v28.154L8.219,1117,0,1137.984V1213l35.207-89.884L166.244,1152.8l146.639,59.6L270.083,1327,0,1259.514v56.6l24.885,6.22L0,1416.061V1511l179.548,58.413-24.6,65.861L0,1585.4v28.841l145.33,46.776L49.4,1917.888,0,1904.057V1920H107.016l28.856-77.248,163.295,42.5L293.083,1920h27.759l40.286-230.074,119.081,46.263L431.335,1920h56.6l19.344-72.73,104.735,24.957L603.267,1920h27.8l7.589-41.423L812.508,1920h73.477l1.293-10.41-243.671-58.059,10.642-58.086,6.394-16.6-3.129-1.217,11.647-63.575-26.9-4.965-10.707,58.462-92.941-36.114,26.124-98.243L1080,1754.592v-28.235l-155.233-37.178,40.547-149.814,32.458,6.891L1080,1569.782v-57.115l-68.154-19.5-.907-.256-30.676-6.52,79.752-277.7,19.985,4.49v-28.148l-12.391-2.783L1080,1139.1V1040l-53.59,186.616-232.746-77.93L936.647,690.3l47.967,15.463.733.24L1080,730.684V673.935l-12.619-3.29L1080,609.979V475.72l-39.118,188.013-40.3-10.509L892.6,618.425l137.969-430.188L1080,210.481v-60.2l-32.561-14.65L1080,34.1V0Z' transform='translate(1920) rotate(90)' fill='%23f1f1f1'/%3E%3C/svg%3E%0A");
    background-size: cover;
    background-color: #e9e9e9;
    opacity: 0;
    filter: blur(10px);
    transition: all 1s;
    transform: scale(0.01);
    border-radius: 0px;
}
.location > div{
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(.85);
}
.location.ac{
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

.location .user{
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 100px;
    background-color: #000;
    position: absolute;
    opacity: 0;
    transition: all 1s;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
.location .user .alarm{
    width: 200px;
    height: 140px;
    background-image: url("../img/section6/alarm.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    margin-top: -90px;
    margin-left: -30px;
    background-size: 100%;
    opacity: 0;
    transition: all 1s;
}
.location .user .alarm span{
    display: block;
    background-image: url("../img/section6/200plus.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
    height: 30px;
    top: -50px;
    position: relative;
    opacity: 0;
    transition: all 1s;
}
.location .user.ac,
.location .user .alarm.ac,
.location .user .alarm span.ac{
    opacity: 1;
}
.location .user .alarm.ac{
    margin-top: -120px;
}
.location .user#user1{
    background-image: url("../img/section6/u1.jpg");
}
.location .user#user2{
    background-image: url("../img/section6/u2.jpg");
}
.location .user#user3{
    background-image: url("../img/section6/u3.jpg");
}
.location .user#user4{
    background-image: url("../img/section6/u4.jpg");
}
.location .user#user5{
    background-image: url("../img/section6/u5.jpg");
}
.location .user#user6{
    background-image: url("../img/section6/u6.jpg");
}
.location .user#user7{
    background-image: url("../img/section6/u7.jpg");
}
.location .user#user8{
    background-image: url("../img/section6/u8.jpg");
}
.location .circle{
    width: 1600px;
    height: 1600px;
    border-radius: 1000px;
    background-color: #01CED530;
    border: 2px solid #01CED5;
    position: absolute;
    left: calc(50% - 800px);
    top: calc(50% - 800px);
    transform: scale(0.1);
    transition: all .5s;
}
.location .circle.ac{
    transform: scale(1);
}
.location .circle span{
    display: inline-block;
    background-color: #01CED5;
    color:#fff;
    padding: 10px 20px;
    font-size: 30px;
    margin-top: -10px;
    border-radius: 10px;

}
.local-group{
    width: 100%;
    height: 400px;
    position: relative;
    text-align: center;
}
.local-group .system{
    display: inline-block;
    width: 300px;
    height: 300px;
    border-radius: 200px;
    background-color: #ddd;
    margin: 0 90px;
    position: relative;
}
.local-group .system img{
    position: absolute;
    left: calc(50% - 180px);
    max-width: 360px;
    max-height: 360px;
}
.local-group .system h6{
    display: block;
    font-size: 32px;
    line-height: 150%;
    width: 550px;
    margin-left: -125px;
    margin-top: 340px;
}

.shape{
    width: 140%;
    margin-top: -390px;
    margin-left: -25%;
}
#text-5-3-1 .no1,
#text-5-3-1 .no2,
#text-5-3-2 span{
    transition: all .5s;
}
#text-5-3-1 .no1.ac{
    opacity: 0;
}
#text-5-3-1 .no2.ac{
    opacity: 0;
}

#text-5-3-2 span.ac{
    opacity: 0;
}

#text-5-3-1.left{
    margin-left: -80px;
}
#text-5-3-3{
    margin-top: -60px;
    margin-left: 140px;
}
#text-5-3-3.ac{
    margin-left: 180px;
}
#text-5-3-3 span{
    color:#DDC005
}