@charset "utf-8";

/**
 * --------------------------------
 * main CSS
 * --------------------------------
*/

.tabs {position: relative;margin: 20px 20px 0;display: flex;border-radius: 30px;background: #F8F8F8;opacity: 1;transition: opacity .4s ease-in-out;}
.tabs .btn-tab {position: relative;flex: 1 1 30%;line-height: 40px;color: #8C97A4;font-family: 'RiaSans';font-size: 12px;font-weight: 800;text-transform: lowercase;transition: color .5s ease-in-out;}
.tabs .btn-tab.active {color: #FFF;}
.tabs::before {content: '';position: absolute;top: 0;left: 0;width: 33.3333%;height: 40px;border-radius: 40px;background-color: #1D78FC;box-shadow: 2px 6px 10px 0px rgba(7, 16, 91, 0.20);transition: all .4s ease-in-out;}
.tabs.tab0::before {left: 0;background-color: #FFA010;}
.tabs.tab1::before {left: 33.3333%;background-color: #1D78FC;}
.tabs.tab2::before {left: 66.6666%;background-color: #00BD94;}

.con0 {position: relative;;margin-top: 36px;padding: 0 20px;height: 72px;}
.con0 .txt {position: absolute;top: 0;left: 20px;height: 72px;color: #000;font-size: 24px;font-weight: 700;line-height: 36px;opacity: 0;transform: translate(0, 0);transition: opacity .4s ease-in-out, transform .6s ease-in-out;}
.con0 .txt strong {color: #1D78FC;}
.con0 .txt .icon {display: inline-block;width: 28px;height: 24px;background: url('../images/main/con0_icon1.svg') no-repeat 0 0;background-size: 100% 100%;vertical-align: top;margin: 5px 0 0 2px;}
.con0 .txt .icon2 {background: url('../images/main/con0_icon2.svg') no-repeat 0 0;background-size: 100% 100%;}
.con0 .txt .icon3 {background: url('../images/main/con0_icon3.svg') no-repeat 0 0;background-size: 100% 100%;}
.con0 .txt.active {opacity: 1;transform: translate(0, 0);}

.con1 {margin-top: 30px;opacity: 0;transition: opacity .4s ease-in-out;}
.con1.active {opacity: 1;}
.con1 .con1-swiper {padding: 0 20px;width: 100%;height: 444px;}
.con1 .con1-swiper .swiper-slide {border-radius: 16px;color: #fff;}
.con1 .con1-swiper .swiper-slide.careon {background-color: #FFA010;}
.con1 .con1-swiper .swiper-slide.my {background-color: #1D78FC;}
.con1 .con1-swiper .swiper-slide.service {background-color: #00BD94;}
.con1 .con1-swiper h2 {padding: 20px 20px 0;color: #FFF;font-family: 'RiaSans';font-size: 24px;font-weight: 800;line-height: 24px;}
.con1 .con1-swiper .txt-area {position: absolute;bottom: 54px;left: 0;right: 0;padding: 0 20px 40px;}
.con1 .con1-swiper .txt-area small {display: block;color: #FFF;font-size: 14px;font-weight: 600;line-height: 22px;text-transform: uppercase;}
.con1 .con1-swiper .txt-area strong {margin-top: 8px;display: block;color: #FFF;font-size: 30px;font-weight: 700;line-height: 42px;}
.con1 .con1-swiper .txt-area p {margin-top: 8px;display: block;color: #FFF;font-size: 16px;font-weight: 500;line-height: 26px;}
.con1 .con1-swiper .my .txt-area small {font-size: 20px;font-weight: 700;line-height: 30px;}
.con1 .con1-swiper .my .txt-area small .icon1 {display: inline-block;margin-right: 8px;width: 12px;height: 12px;background-image: url("data:image/svg+xml,%0A%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.67336 8.95034C6.35856 9.44106 5.64144 9.44106 5.32664 8.95034L2.46018 4.48196C2.11861 3.94951 2.50095 3.25 3.13353 3.25L8.86647 3.25C9.49905 3.25 9.88139 3.94951 9.53982 4.48196L6.67336 8.95034Z' fill='white' /%3E%3C/svg%3E%0A");}
.con1 .con1-swiper .my .txt-area strong {margin-top: 0;}
.con1 .con1-swiper .my .txt-area p {font-size: 14px;font-weight: 500;line-height: 22px;}
.con1 .con1-swiper .my .txt-area p span {position: relative;display: inline-block;margin-left: 10px;padding-left: 10px;}
.con1 .con1-swiper .my .txt-area p span::before {content: '';position: absolute;top: calc(50% - 5px);left: 0;width: 1px;height: 10px;background-color: #fff;}
.con1 .con1-swiper .my .txt-area .graph {margin-top: 30px;height: 156px;display: flex;justify-content: space-around;align-items: flex-end;}
.con1 .con1-swiper .my .txt-area .graph .txt-price {display: block;margin-bottom: 5px;color: #FFF;font-size: 12px;font-weight: 500;line-height: 20px;text-align: center;}
.con1 .con1-swiper .my .txt-area .graph .bar {position: relative;display: block;margin: 0 auto;width: 40px;height: 0;border-radius: 8px;background: rgba(0, 0, 0, .25);transition: height .6s ease-out;}
.con1 .con1-swiper .my .txt-area .graph .bar::after {content: '';position: absolute;top: -3px;left: calc(50% - 4px);width: 8px;height: 8px;background-color: rgba(255, 255, 255, .8);border-radius: 4px;filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.30));z-index: 1;}
.con1 .con1-swiper .my .txt-area .graph div:nth-of-type(3) .bar {background: #FFF;box-shadow: 4px 8px 12px 0px rgba(0, 0, 0, 0.20);}
.con1 .con1-swiper .my .txt-area .graph div:nth-of-type(3) .bar::after {background: #FFF;box-shadow: 4px 8px 12px 0px rgba(0, 0, 0, 0.20);}
.con1 .con1-swiper .my .txt-area .graph .txt-month {display: block;margin-top: 10px;color: #FFF;font-size: 12px;font-weight: 500;line-height: 20px;text-align: center;}
.con1 .con1-swiper .btns {display: flex;justify-content: center;position: absolute;bottom: 0;left: 0;right: 0;padding: 16px;border-top: 1px solid rgba(255, 255, 255, 0.35);text-align: center;}
.con1 .con1-swiper .btns span {display: flex;align-items: center;justify-content: center;width: 50%;color: #FFF;font-size: 14px;font-weight: 500;line-height: 22px;text-align: center;}
.con1 .con1-swiper .btns span::after {content: '';display: inline-block;margin-left: 4px;width: 12px;height: 12px;background-image: url("data:image/svg+xml,%0A%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10L8.5 6L4.5 2' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.con1 .con1-swiper .btns span + span::before {content: '';position: absolute;top: calc(50% - 5px);left: 50%;width: 1px;height: 10px;background-color: rgba(255, 255, 255, .3);}
.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(1) .bar {height: 40px;transition-delay: .3s;}
.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(2) .bar {height: 60px;transition-delay: .4s;}
.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(3) .bar {height: 100px;transition-delay: .5s;}

.con2 {position: relative;margin-top: 40px;padding: 0 20px;}
.con2 h2 {color: #000;font-size: 20px;font-weight: 700;line-height: 30px;}
.con2 h2 strong {color: #1D78FC;}
.con2 div {position: relative;margin-top: 16px;display: flex;flex-direction: column;padding: 20px;border-radius: 16px;border: 1px solid #A2C8FF;background: #FFF;box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.12);}
.con2 div p {color: #494949;font-size: 14px;font-weight: 500;line-height: 22px;}
.con2 div .ipt {margin-top: 16px;height: 44px;padding: 10px 16px;color: #000;font-size: 14px;font-weight: 400;line-height: 24px;border-radius: 8px;border: 1px solid #FFF;background: #F2F8FF;}
.con2 div .ipt + .ipt {margin-top: 8px;}
.con2 div .ipt .icon {display: inline-block;margin: 0 16px 0 40px;width: 12px;height: 12px;background: url('../images/main/con2_icon1.svg') no-repeat 0 0;background-size: 100%;}
.con2 div .ipt span {color: #949494;font-size: 14px;font-weight: 400;line-height: 24px;}
.con2 div .btn {margin-top: 16px;padding: 0px 24px;border-radius: 8px;background: #1D78FC;color: #FFF;text-align: center;font-size: 14px;font-weight: 500;line-height: 44px;}
.con2 div .btn .icon {display: inline-block;margin: 12px 10px 0 0;width: 20px;height: 20px;background: url('../images/main/con2_icon2.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;}
.con2 div .icon3 {position: absolute;top: -54px;right: -5px;width: 100px;height: 100px;background: url('../images/main/con2_icon3.svg') no-repeat 0 0;background-size: 100%;}

.con3 {position: relative;margin-top: 40px;padding: 0 20px 64px;}
.con3 .con3-swiper {border-radius: 10px;background: #F2F8FF;}
.con3 .con3-swiper .swiper-slide {padding: 30px 20px;overflow: hidden;}
.con3 .con3-swiper .swiper-slide .icon {position: absolute;top: 28px;right: 0;transform: translate(100px, 100px);opacity: 0;width: 143px;height: 97px;background: url('../images/main/con3_icon1.svg') no-repeat 0 0;background-size: 100%;transition: transform .8s ease-in .2s, opacity .4s ease-in;}
.con3 .con3-swiper .swiper-slide .icon2 {top: 26px;right: 24px;transform: translate(0, -100px);width: 68px;height: 86px;background: url('../images/main/con3_icon2.svg') no-repeat 0 0;background-size: 100%;}
.con3 .con3-swiper .swiper-slide .icon3 {top: 32px;right: 24px;transform: translate(0, 100px);width: 88px;height: 76px;background: url('../images/main/con3_icon3.svg') no-repeat 0 0;background-size: 100%;}
.con3 .con3-swiper .swiper-slide.active .icon,
.con3 .con3-swiper .swiper-slide.swiper-slide-active .icon {transform: translate(0, 0);opacity: 1;}
.con3 .con3-swiper .swiper-slide strong {display: flex;align-items: top;color: #000;font-size: 18px;font-weight: 700;line-height: 28px;}
.con3 .con3-swiper .swiper-slide strong em {position: relative;margin: 4px 0 0 4px;color: #1D78FC;font-family: 'RiaSans';font-size: 18px;font-weight: 800;line-height: 16px;}
.con3 .con3-swiper .swiper-slide strong em::before {content: '';position: absolute;top: -4px;left: calc(50% - 2px);width: 4px;height: 4px;background-color: #1D78FC;border-radius: 100%;}
.con3 .con3-swiper .swiper-slide p {margin-top: 6px;color: #777;font-size: 14px;font-weight: 500;line-height: 22px;}
.con3 .swiper-pagination {top: auto;bottom: 40px;}
.con3 .swiper-pagination .swiper-pagination-bullet {margin: 0 5px;width: 8px;height: 8px;border-radius: 4px;background-color: #B1B9C2;opacity: 1;transition: width .2s ease-in-out;}
.con3 .swiper-pagination .swiper-pagination-bullet-active {width: 20px;background-color: #1D78FC;}

.con4 {position: relative;height: 370px;overflow: hidden;}
.con4 .box {position: absolute;top: 0;left: 0;right: 0;padding: 40px 20px;height: 370px;background-color: #E4F1FF;opacity: 0;transform: translateY(200px);transition: opacity .2s ease-in-out, transform .4s ease-in-out;}
.con4.active0 .box.box1 {opacity: 1;transform: translateY(0);}
.con4.active1 .box.box2 {opacity: 1;transform: translateY(0);}
.con4.active2 .box.box3 {opacity: 1;transform: translateY(0);}
.con4 h2 {color: #000;font-size: 24px;font-weight: 700;line-height: 36px;}
.con4 h2 strong {color: #1D78FC;}
.con4 .btns {margin-top: 24px;display: flex;flex-wrap: wrap;gap: 10px;}
.con4 .btns div {position: relative;flex: 1 1 40%;padding: 16px;color: #777;font-size: 14px;font-weight: 500;line-height: 22px;border-radius: 16px;background: #FFF;}
.con4 .btns div .icon {position: absolute;bottom: 19px;right: 19px;width: 56px;height: 54px;background: url('../images/main/con4_icon1.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon2 {bottom: 19px;right: 18px;width: 56px;height: 54px;background: url('../images/main/con4_icon2.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon3 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon3.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon4 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon4.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon5 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon5.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon6 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon6.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon7 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon7.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div .icon8 {bottom: 16px;right: 16px;width: 40px;height: 40px;background: url('../images/main/con4_icon8.svg') no-repeat 0 0;background-size: 100%;}
.con4 .btns div strong {display: block;color: #000;font-size: 16px;font-weight: 700;line-height: 26px;}
.con4 .box.box1 .btns div {height: 192px;}
.con4 .box.box2 .btns div {height: 92px;}
.con4 .box.box3 .btns div {flex: 1 1 60%;height: 92px;}
.con4.pc {display: none;}

.area3 {padding: 60px 20px;}

.con5 {padding: 0 20px;}
.con5 h2 {position: relative;color: #000;font-size: 24px;font-weight: 700;line-height: 36px;}
.con5 h2 strong {display: block;margin-bottom: 6px;color: #1D78FC;font-size: 16px;font-weight: 700;line-height: 26px;}
.con5 .icon {position: absolute;top: 0;right: 0;width: 92px;height: 92px;background: url('../images/main/con5_icon1.svg') no-repeat 0 0;background-size: 100%;}
.con5 .icon.icon2 {top: 0;right: 0;width: 68px;height: 68px;background: url('../images/main/con5_icon2.svg') no-repeat 0 0;background-size: 100%;}
.con5 .icon.icon3 {top: 0;right: auto;left: 0;width: 68px;height: 78px;background: url('../images/main/con5_icon3.svg') no-repeat 0 0;background-size: 100%;}
.con5 .icon.icon4 {top: 0;right: 0;width: 68px;height: 68px;background: url('../images/main/con5_icon4.svg') no-repeat 0 0;background-size: 100%;}
.con5 .ls div {position: relative;margin-top: 60px;}
.con5 .ls div:first-of-type {margin-top: 40px;}
.con5 .ls div:nth-of-type(2) {text-align: right;}
.con5 .ls div h3 {color: #8C97A4;font-size: 14px;font-weight: 500;line-height: 22px;}
.con5 .ls div p {margin-top: 4px;color: #000;font-size: 16px;font-weight: 500;line-height: 26px;}
.con5 .ls div p br.pc {display: none;}

.con6 {position: relative;margin-top: 60px;padding: 20px;border-radius: 16px;background: #F2F8FF;}
.con6 .icon {position: absolute;top: 0;right: 30px;display: inline-block;width: 78px;height: 129px;background: url('../images/main/con6_icon1.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;margin: 1px 0 0 0;}
.con6 .txt {font-family: 'Pretendard';font-size: 14px;font-weight: 600;line-height: 130%;}
.con6 .txt strong {margin-top: 8px;display: block;color: #000;font-size: 18px;font-weight: 700;line-height: 24px;}
.con6 .txt strong em {color: #2364EE;}
.con6 .btn {position: relative;margin-top: 20px;display: block;color: #FFF;font-family: 'Pretendard';font-size: 14px;font-weight: 600;line-height: 36px;border-radius: 8px;background: #1D78FC;text-align: center;}

.con7 {position: relative;margin-top: 40px;}
.con7 h2 {color: #000;font-family: 'Pretendard';font-size: 24px;font-weight: 700;line-height: 36px;}
.con7 .btn-more {position: absolute;top: 4px;right: 0;width: 28px;height: 28px;}
.con7 .btn-more::before {content: '';position: absolute;top: 0;right: 0;width: 28px;height: 28px;background: url('../images/main/con7_icon1.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;}
.con7 ul li {position: relative;margin-top: 20px;padding-left: 50px;}
.con7 ul li .icon-new {position: absolute;top: 3px;left: 0;padding: 2px 8px;height: 20px;color: #FFF;font-style: normal;font-size: 11px;font-weight: 500;line-height: 18px;border-radius: 20px;background: #1D78FC;}
.con7 ul li span {margin-top: 9px;display: block;width: 100%;color: #000;font-size: 16px;font-weight: 600;line-height: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.con8 {position: relative;margin-top: 40px;padding-top: 40px;border-top: 1px solid #EEE;}
.con8 h2 {color: #000;font-family: 'Pretendard';font-size: 24px;font-weight: 700;line-height: 36px;}
.con8 .btn-more {position: absolute;top: 44px;right: 0;width: 28px;height: 28px;}
.con8 .btn-more::before {content: '';position: absolute;top: 0;right: 0;width: 28px;height: 28px;background: url('../images/main/con7_icon1.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;}
.con8 ul li {position: relative;margin-top: 20px;}
.con8 ul li .icon-q {display: inline-block;width: 20px;height: 20px;background: url('../images/main/con8_icon1.svg') no-repeat 0 0;background-size: 100%;vertical-align: top;}
.con8 ul li strong {color: #1D78FC;font-size: 12px;font-weight: 600;line-height: 20px;}
.con8 ul li span {margin-top: 8px;display: block;width: 100%;color: #000;font-size: 16px;font-weight: 600;line-height: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

@media (min-width: 768px) {
	.container .tabs {opacity: 0;display: none;}
	.con0 {margin-top: 6.2500vw;height: 5.0000vw;}
	.con0 .txt {font-size: 3.7500vw;line-height: 5.0000vw;height: 5.0000vw;}
	.con0 .txt br {display: none;}
	.con0 .txt .icon {width: 3.5938vw;height: 3.1250vw;margin: 0.9375vw 0 0 0.7813vw;}

	.con1 {margin-top: 3.7500vw;}
	.con1 .con1-swiper {height: 44vw;}
	.con1 .con1-swiper .swiper-wrapper {display: block;position: relative;}
	.con1 .con1-swiper .swiper-slide {position: relative;transform: none !important;transition: none !important;border-radius: 1.8750vw;}

	.con1 .con1-swiper .swiper-slide.careon {position: absolute;top: 0;right: 0;width: 57% !important;height: 21vw;}
	.con1 .con1-swiper .swiper-slide.my {position: absolute;top: 0;left: 0;width: 41% !important;height: 44vw;}
	.con1 .con1-swiper .swiper-slide.service {position: absolute;bottom: 0;right: 0;width: 57% !important;height: 21vw;}

	.con1 .con1-swiper h2 {padding: 3.1250vw 3.7500vw;font-size: 3.1250vw;line-height: 3.1250vw;}
	.con1 .con1-swiper .txt-area {bottom: auto;left: 0;top: 0;right: 0;padding: 3.7500vw;text-align: right;}
	.con1 .con1-swiper .txt-area small {font-size: 1.5625vw;line-height: 2.3438vw;}
	.con1 .con1-swiper .txt-area strong {margin-top: 1.5625vw;font-size: 3.7500vw;line-height: 4.3750vw;}
	.con1 .con1-swiper .txt-area p {margin-top: 1.5625vw;font-size: 1.5625vw;line-height: 2.3438vw;}
	.con1 .con1-swiper .btns {border-top: 0;padding: 0 3.7500vw 3.1250vw;gap: 1.2500vw;justify-content: flex-start;}
	.con1 .con1-swiper .btns span {height: 4.0625vw;padding: 0.7813vw 0;width: 15.6250vw;border-radius: 7.8125vw;border: 0.1172vw solid #FFF;font-size: 1.5625vw;line-height: 2.3438vw;}
	.con1 .con1-swiper .btns span::after {margin-left: 0.7813vw;width: 1.2500vw;height: 1.2500vw;background-size: 100%;}
	.con1 .con1-swiper .btns span + span::before {display: none;}

	.con1 .con1-swiper .careon .txt-area {left: auto;top: 3.9063vw;right: 4.6875vw;padding: 0;width: 21.8750vw;text-align: left;}
	.con1 .con1-swiper .service .txt-area {left: auto;top: 3.9063vw;right: 4.6875vw;padding: 0;width: 21.8750vw;text-align: left;}

	.con1 .con1-swiper .my .txt-area p {margin-top: 1.2500vw;font-size: 1.5625vw;line-height: 2.3438vw;}
	.con1 .con1-swiper .my .txt-area small {font-size: 2.1875vw;line-height: 3.1250vw;}
	.con1 .con1-swiper .my .txt-area small .icon1 {width: 1.5625vw;height: 1.5625vw;background-size: 100%;}
	.con1 .con1-swiper .my .txt-area strong {font-size: 4.0625vw;line-height: 5.1563vw;}
	.con1 .con1-swiper .my .txt-area p span {margin-left: 1.0938vw;padding-left: 1.0938vw;}
	.con1 .con1-swiper .my .txt-area p span::before {top: calc(50% - 0.4688vw);height: 1.0938vw;}
	.con1 .con1-swiper .my .txt-area .graph {margin-top: 3.5938vw;height: 16.0938vw;}
	.con1 .con1-swiper .my .txt-area .graph .txt-price {margin-bottom: 0.6250vw;font-size: 1.4063vw;line-height: 2.1875vw;}
	.con1 .con1-swiper .my .txt-area .graph .bar {width: 5.3125vw;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(1) .bar {height: 5.3125vw;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(2) .bar {height: 6.8750vw;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(3) .bar {height: 10.0000vw;}
	.con1 .con1-swiper .my .txt-area .graph .bar::after {top: -0.4688vw;left: calc(50% - 0.4688vw);width: 0.9375vw;height: 0.9375vw;border-radius: 100%;}
	.con1 .con1-swiper .my .txt-area .graph .txt-month {margin-top: 1.2500vw;font-size: 1.4063vw;line-height: 2.1875vw;}

	.con1 .con1-swiper.swiper-3d .swiper-slide-shadow {opacity: 0 !important;}

	.con2 {margin-top: 8.1250vw;}
	.con2 h2 {font-size: 2.8125vw;line-height: 4.0625vw;}
	.con2 div {margin-top: 2.5000vw;padding: 3.1250vw;flex-wrap: wrap;flex-direction: row;justify-content: left;gap: 0.7813vw;border-radius: 1.8750vw;}
	.con2 div p {font-size: 1.5625vw;line-height: 2.3438vw;width: 100%;flex-shrink: 0;}
	.con2 div p br {display: none;}
	.con2 div .ipt {margin-top: 1.5625vw;height: 5.0000vw;padding: 1.3281vw 1.8750vw;font-size: 1.5625vw;line-height: 2.3438vw;flex: 2 1 0;}
	.con2 div .ipt + .ipt {margin-top: 1.5625vw;}
	.con2 div .ipt .icon {margin: 0 1.8750vw 0 4.6875vw;width: 1.5625vw;height: 1.5625vw;}
	.con2 div .ipt span {font-size: 1.5625vw;line-height: 2.3438vw;}
	.con2 div .btn {margin-top: 1.5625vw;font-size: 1.5625vw;line-height: 5.0000vw;flex: 1 1 0;}
	.con2 div .btn .icon {margin: 1.7188vw 0.7813vw 0 0;}
	.con2 div .icon3 {top: -8.2813vw;right: 1.5625vw;width: 15.2344vw;height: 15.2344vw;}

	.con3 {margin-top: 7.8125vw;padding-bottom: 7.8125vw;}
	.con3 .con3-swiper {background-color: #fff;}
	.con3 .con3-swiper .swiper-slide {padding: 3.1250vw 3.1250vw 11.2500vw;background-color: #F2F8FF;border-radius: 1.8750vw;}
	.con3 .con3-swiper .swiper-slide .icon {transition: none;top: auto;bottom: 1.5625vw;width: 14.5313vw;height: 10.4688vw;}
	.con3 .con3-swiper .swiper-slide .icon2 {bottom: 1.8750vw;right: 2.5000vw;width: 7.3438vw;height: 9.3750vw;}
	.con3 .con3-swiper .swiper-slide .icon3 {bottom: 1.8750vw;right: 2.3438vw;width: 10.1563vw;height: 8.7500vw;}
	.con3 .con3-swiper .swiper-slide strong {font-size: 2.5000vw;line-height: 3.4375vw;}
	.con3 .con3-swiper .swiper-slide strong em {margin: 0.7813vw 0 0 0.6250vw;font-size: 2.5000vw;}
	.con3 .con3-swiper .swiper-slide strong em::before {top: -0.9375vw;width: 0.4688vw;height: 0.4688vw;}
	.con3 .con3-swiper .swiper-slide p {margin-top: 0.9375vw;font-size: 1.5625vw;line-height: 2.3438vw;}

	.inner.area2 {max-width: 100%;width: 100%;padding: 0 20px;background: #E4F1FF;}

	.con4 {display: none;}
	.con4.pc {margin: 0 auto;display: block;padding: 7.8125vw 0;max-width: 100.0000vw;height: auto;}
	.con4.pc .txt-ti {position: relative;height: 5.0000vw;overflow: hidden;}
	.con4.pc .txt-ti div {animation: anycon4ti 12s infinite;}
	.con4.pc h2 {font-size: 3.7500vw;line-height: 5.0000vw;transition: opacity .2s ease-in-out, transform .6s ease-in-out;}
	.con4.pc .btns {margin-top: 3.7500vw;gap: 2.1875vw;flex-wrap: nowrap;}
	.con4.pc .btns .ls {display: block;width: 50%;display: flex;flex-wrap: wrap;gap: 2.1875vw;}
	.con4.pc .btns div {padding: 2.5000vw;font-size: 1.5625vw;line-height: 2.3438vw;}
	.con4.pc .btns .ls1 div:nth-of-type(1) {width: 50%;height: 30.3125vw;flex-shrink: 0;}
	.con4.pc .btns .ls1 div:nth-of-type(2) {width: 50%;height: 30.3125vw;flex-shrink: 0;}
	.con4.pc .btns .ls1 div:nth-of-type(3) {width: 50%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(1) {width: 25%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(2) {width: 25%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(3) {width: 25%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(4) {width: 25%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(5) {width: 50%;height: 14.0625vw;flex-shrink: 0;}
	.con4.pc .btns div strong {margin-bottom: 0.6250vw;font-size: 2.1875vw;line-height: 3.1250vw;}
	.con4.pc .btns div .icon {bottom: 2.5000vw;right: 2.5000vw;width: 6.2500vw;height: 6.2500vw;}
	.con4.pc .btns div .icon1 {bottom: 2.9688vw;right: 2.9688vw;width: 8.6719vw;height: 8.4375vw;}
	.con4.pc .btns div .icon2 {bottom: 2.9688vw;right: 2.7344vw;width: 8.6719vw;height: 8.4375vw;}
	@keyframes anycon4ti {
		5%  {margin-top: -5.0000vw;}
		40%  {margin-top: -5.0000vw;}
		45%  {margin-top: -10.0000vw;}
		75%  {margin-top: -10.0000vw;}
		80% {margin-top: -15.0000vw;}
		100% {margin-top: -15.0000vw;}
	}

	.inner.area3 {display: flex;flex-wrap: wrap;}

	.con5 {width: 100%;flex-shrink: 0;}
	.con5 h2 {font-size: 3.7500vw;line-height: 5.0000vw;}
	.con5 h2 strong {margin-top: 2.1875vw;margin-bottom: 1.2500vw;font-size: 2.1875vw;line-height: 2.3438vw;}
	.con5 h2 br {display: none;}
	.con5 .icon {width: 11.5625vw;height: 11.5625vw;}
	.con5 .icon.icon2 {top: auto;bottom: 1.0938vw;right: 2.3438vw;width: 7.8125vw;height: 7.8125vw;}
	.con5 .icon.icon3 {top: auto;bottom: 0;right: 2.3438vw;left: auto;width: 7.8125vw;height: 9.3750vw;}
	.con5 .icon.icon4 {top: auto;bottom: 1.0938vw;right: 2.3438vw;width: 7.8125vw;height: 7.8125vw;}
	.con5 .ls {margin-top: 7.8125vw;display: flex;justify-content: space-between;gap: 2.1875vw;}
	.con5 .ls div {margin-top: 0;flex: 1 1 30%;height: 16.7188vw;}
	.con5 .ls div h3 {font-size: 1.5625vw;line-height: 2.3438vw;}
	.con5 .ls div p {margin-top: 0.9375vw;width: 14.9219vw;font-size: 2.1875vw;line-height: 3.1250vw;word-break: keep-all;}
	.con5 .ls div p br {display: none;}
	.con5 .ls div:first-of-type {margin-top: 0;}
	.con5 .ls div:nth-of-type(2) {text-align: left;}
	.con5 .ls div:nth-of-type(2) p {width: 18.2031vw;}
	.con5 .ls div:nth-of-type(3) p {width: 17.5781vw;}
	.con5 .ls div p br.pc {display: block;}

	.con6 {width: 100%;flex-shrink: 0;margin-top: 9.3750vw}
	.con6 {padding: 4.6875vw 6.2500vw;}
	.con6 .icon {right: 7.8125vw;width: 13.5938vw;height: 30.4688vw;}
	.con6 .txt {font-size: 2.1875vw;line-height: 2.3438vw;}
	.con6 .txt strong {margin-top: 1.8750vw;font-size: 3.1250vw;line-height: 3.4375vw;}
	.con6 .txt strong br {display: none;}
	.con6 .btn {margin-top: 3.1250vw;width: 16.2500vw;border-radius: 0.6250vw;height: 4.0625vw;padding: 0.7813vw 2.5000vw;font-size: 1.5625vw;line-height: 2.3438vw;}

	.con7 {margin-top: 7.8125vw;padding-right: 4.6875vw;width: 50%;flex-shrink: 0;}
	.con7 h2 {font-size: 3.7500vw;line-height: 5.0000vw;}
	.con7 .btn-more {right: 4.6875vw;}
	.con7 .btn-more::before {width: 3.7500vw;height: 3.7500vw;}
	.con7 ul li {margin-top: 2.8125vw;padding-left: 0;}
	.con7 ul li .icon-new {position: relative;display: inline-block;top: 0;height: 2.1875vw;padding: 0.1563vw 0.9375vw;font-size: 1.0938vw;line-height: 1.8750vw;}
	.con7 ul li span {margin-top: 1.0938vw;font-size: 1.8750vw;line-height: 2.8125vw;}

	.con8 {margin-top: 7.8125vw;padding-top: 0;padding-left: 4.6875vw;width: 50%;flex-shrink: 0;border-top: 0;border-left: 1px solid #EEE;}
	.con8 h2 {font-size: 3.7500vw;line-height: 5.0000vw;}
	.con8 .btn-more {top: 0;}
	.con8 .btn-more::before {width: 3.7500vw;height: 3.7500vw;}
	.con8 ul li {margin-top: 2.8125vw;}
	.con8 ul li .icon-q {width: 2.1875vw;height: 2.0313vw;}
	.con8 ul li strong {margin-left: 0.6250vw;font-size: 1.4063vw;line-height: 2.1875vw;}
	.con8 ul li span {margin-top: 1.0938vw;font-size: 1.8750vw;line-height: 2.8125vw;}
}
@media (min-width: 1280px) {
	.con0 {margin-top: 80px;height: 64px;}
	.con0 .txt {font-size: 48px;line-height: 64px;height: 64px;}
	.con0 .txt br {display: none;}
	.con0 .txt .icon {width: 46px;height: 40px;margin: 12px 0 0 10px;}

	.con1 .con1-swiper h2 {padding: 40px 48px;font-size: 40px;line-height: 40px;}
	.con1 .con1-swiper .txt-area {padding: 48px;}
	.con1 .con1-swiper .txt-area small {font-size: 20px;line-height: 30px;}
	.con1 .con1-swiper .txt-area strong {margin-top: 20px;font-size: 48px;line-height: 56px;}
	.con1 .con1-swiper .txt-area p {margin-top: 20px;font-size: 20px;line-height: 30px;}
	.con1 .con1-swiper .btns {border-top: 0;padding: 0 48px 40px;gap: 16px;}
	.con1 .con1-swiper .btns span {height: 52px;padding: 10px 0;width: 200px;border-radius: 100px;border: 1.5px solid #FFF;font-size: 20px;line-height: 30px;}
	.con1 .con1-swiper .btns span::after {margin-left: 10px;width: 16px;height: 16px;}

	.con1 .con1-swiper .careon .txt-area {left: auto;top: 50px;right: 60px;padding: 0;width: 280px;}
	.con1 .con1-swiper .service .txt-area {left: auto;top: 50px;right: 60px;padding: 0;width: 280px;}

	.con1 .con1-swiper .my .txt-area p {margin-top: 16px;font-size: 20px;line-height: 30px;}
	.con1 .con1-swiper .my .txt-area small {font-size: 28px;line-height: 40px;}
	.con1 .con1-swiper .my .txt-area small .icon1 {width: 20px;height: 20px;}
	.con1 .con1-swiper .my .txt-area strong {font-size: 52px;line-height: 66px;}
	.con1 .con1-swiper .my .txt-area p span {margin-left: 14px;padding-left: 14px;}
	.con1 .con1-swiper .my .txt-area p span::before {top: calc(50% - 6px);height: 14px;}
	.con1 .con1-swiper .my .txt-area .graph {margin-top: 46px;height: 206px;}
	.con1 .con1-swiper .my .txt-area .graph .txt-price {margin-bottom: 8px;font-size: 18px;line-height: 28px;}
	.con1 .con1-swiper .my .txt-area .graph .bar {width: 68px;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(1) .bar {height: 68px;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(2) .bar {height: 88px;}
	.con1 .con1-swiper .swiper-slide-active.my .txt-area .graph div:nth-of-type(3) .bar {height: 128px;}
	.con1 .con1-swiper .my .txt-area .graph .bar::after {top: -6px;left: calc(50% - 6px);width: 12px;height: 12px;border-radius: 100%;}
	.con1 .con1-swiper .my .txt-area .graph .txt-month {margin-top: 16px;font-size: 18px;line-height: 28px;}

	.con2 {margin-top: 104px;}
	.con2 h2 {font-size: 36px;line-height: 52px;}
	.con2 div {margin-top: 32px;padding: 40px;gap: 10px;border-radius: 24px;}
	.con2 div p {font-size: 20px;line-height: 30px;width: 100%;}
	.con2 div .ipt {margin-top: 20px;height: 64px;padding: 17px 24px;font-size: 20px;line-height: 30px;width: 460px;}
	.con2 div .ipt + .ipt {margin-top: 20px;}
	.con2 div .ipt .icon {margin: 0 24px 0 60px;width: 20px;height: 20px;}
	.con2 div .ipt span {font-size: 20px;line-height: 30px;}
	.con2 div .btn {margin-top: 20px;font-size: 20px;line-height: 64px;width: 258px;}
	.con2 div .btn .icon {margin: 22px 10px 0 0;}
	.con2 div .icon3 {top: -106px;right: 20px;width: 195px;height: 195px;}

	.con3 {margin-top: 100px;}
	.con3 .con3-swiper .swiper-wrapper {width: 1280px;}
	.con3 .con3-swiper .swiper-slide {padding: 40px 40px 144px;border-radius: 24px;}
	.con3 .con3-swiper .swiper-slide .icon {bottom: 20px;width: 186px;height: 134px;}
	.con3 .con3-swiper .swiper-slide .icon2 {bottom: 24px;right: 32px;width: 94px;height: 120px;}
	.con3 .con3-swiper .swiper-slide .icon3 {bottom: 24px;right: 30px;width: 130px;height: 112px;}
	.con3 .con3-swiper .swiper-slide strong {font-size: 32px;line-height: 44px;}
	.con3 .con3-swiper .swiper-slide strong em {margin: 10px 0 0 8px;font-size: 32px;}
	.con3 .con3-swiper .swiper-slide strong em::before {top: -12px;width: 6px;height: 6px;}
	.con3 .con3-swiper .swiper-slide p {margin-top: 12px;font-size: 20px;line-height: 30px;}

	.con4.pc {padding: 100px 0;max-width: 1280px;}
	.con4.pc .txt-ti {height: 64px;}
	.con4.pc h2 {font-size: 48px;line-height: 64px;}
	.con4.pc .btns {margin-top: 48px;gap: 28px;flex-wrap: nowrap;}
	.con4.pc .btns .ls {display: block;width: 50%;display: flex;flex-wrap: wrap;gap: 28px;}
	.con4.pc .btns div {padding: 32px;font-size: 20px;line-height: 30px;}
	.con4.pc .btns .ls1 div:nth-of-type(1) {width: 50%;height: 388px;flex-shrink: 0;}
	.con4.pc .btns .ls1 div:nth-of-type(2) {width: 50%;height: 388px;flex-shrink: 0;}
	.con4.pc .btns .ls1 div:nth-of-type(3) {width: 50%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(1) {width: 25%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(2) {width: 25%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(3) {width: 25%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(4) {width: 25%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns .ls2 div:nth-of-type(5) {width: 50%;height: 180px;flex-shrink: 0;}
	.con4.pc .btns div strong {margin-bottom: 8px;font-size: 28px;line-height: 40px;}
	.con4.pc .btns div .icon {bottom: 32px;right: 32px;width: 80px;height: 80px;}
	.con4.pc .btns div .icon1 {bottom: 38px;right: 38px;width: 111px;height: 108px;}
	.con4.pc .btns div .icon2 {bottom: 38px;right: 35px;width: 111px;height: 108px;}
	@keyframes anycon4ti {
		5%  {margin-top: -64px;}
		40%  {margin-top: -64px;}
		45%  {margin-top: -128px;}
		75%  {margin-top: -128px;}
		80% {margin-top: -192px;}
		100% {margin-top: -192px;}
	}

	.inner.area3 {padding-top: 120px;padding-bottom: 120px;}

	.con5 h2 {font-size: 48px;line-height: 64px;}
	.con5 h2 strong {margin-top: 28px;margin-bottom: 16px;font-size: 28px;line-height: 30px;}
	.con5 .icon {width: 148px;height: 148px;}
	.con5 .icon.icon2 {bottom: 14px;right: 30px;width: 100px;height: 100px;}
	.con5 .icon.icon3 {right: 30px;width: 100px;height: 120px;}
	.con5 .icon.icon4 {bottom: 14px;right: 30px;width: 100px;height: 100px;}
	.con5 .ls {margin-top: 100px;gap: 28px;}
	.con5 .ls div {height: 214px;}
	.con5 .ls div h3 {font-size: 20px;line-height: 30px;}
	.con5 .ls div p {margin-top: 12px;width: 191px;font-size: 28px;line-height: 40px;}
	.con5 .ls div:nth-of-type(2) p {width: 233px;}
	.con5 .ls div:nth-of-type(3) p {width: 225px;}

	.con6 {padding: 60px 80px;margin-top: 120px}
	.con6 .icon {right: 100px;width: 174px;height: 290px;}
	.con6 .txt {font-size: 28px;line-height: 30px;}
	.con6 .txt strong {margin-top: 24px;font-size: 40px;line-height: 44px;}
	.con6 .btn {margin-top: 40px;width: 208px;border-radius: 8px;height: 52px;padding: 10px 32px;font-size: 20px;line-height: 30px;}

	.con7 {margin-top: 100px;padding-right: 60px;}
	.con7 h2 {font-size: 48px;line-height: 64px;}
	.con7 .btn-more {right: 60px;}
	.con7 .btn-more::before {width: 48px;height: 48px;}
	.con7 ul li {margin-top: 36px;}
	.con7 ul li .icon-new {height: 28px;padding: 2px 12px;font-size: 14px;line-height: 24px;}
	.con7 ul li span {margin-top: 14px;font-size: 24px;line-height: 36px;}
	.con8 {margin-top: 100px;padding-left: 60px;}
	.con8 h2 {font-size: 48px;line-height: 64px;}
	.con8 .btn-more::before {width: 48px;height: 48px;}
	.con8 ul li {margin-top: 36px;}
	.con8 ul li .icon-q {width: 28px;height: 26px;}
	.con8 ul li strong {margin-left: 8px;font-size: 18px;line-height: 28px;}
	.con8 ul li span {margin-top: 14px;font-size: 24px;line-height: 36px;}
}
@media (min-width: 1336px) {
	.con1 {margin-top: 48px;}
	.con1 .con1-swiper {height: 588px;}
	.con1 .con1-swiper .swiper-slide {border-radius: 24px;}
	.con1 .con1-swiper .swiper-slide.careon {width: 735px !important;height: 280px;}
	.con1 .con1-swiper .swiper-slide.my {width: 517px !important;height: 588px;}
	.con1 .con1-swiper .swiper-slide.service {width: 735px !important;height: 280px;}
}