/* common */
html { overflow-y: scroll; } 
html, body { height: 100%; } 
body, input, button, select, textarea, sub { color: #333; font-size: 14px; font-family: 'Pretendard', '돋움', dotum, sans-serif; } 
button { padding: 0; border: none; background: transparent; } 
strong,em { font-weight: bold; } 
th,td { vertical-align: middle; }

.ul li {position: relative; padding-left: 10px; margin-bottom: 30px; font-size: 18px; font-weight:400; word-break: keep-all; line-height: 28px;}
.ul li::before {content: ''; display: block; width: 3px; height: 3px; position: absolute; top: 11px; left: 0; border-radius: 50%; background-color: #333;}
.ul li span {color: #4fb283; font-weight: 500;}

/* layout */
#wrap { position: relative; min-width: 320px; background: url(../images/bg.png)no-repeat; background-size: cover;} 
.inner {max-width: 1600px; margin: 0 auto;}

.landing_box {min-height: 750px; padding: 55px 45px 30px;}
.landing_box .top {position: relative; margin-bottom: 80px;}
/* .landing_box .top::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 80px; height: 104px; background: url(../images/left_bg.png)no-repeat; background-size: 80px;}
.landing_box .top::after {content: ''; display: block; position: absolute; right: 0; top: 0; width: 80px; height: 104px; background: url(../images/right_bg.png)no-repeat; background-size: 80px;} */
.landing_box .top strong {display: block; font-size: 42px; font-weight: 600; color: #fff; font-weight: 500; font-family: 'esamanru'; line-height: 64px; letter-spacing: -0.5px;}
.landing_box .top strong > em {font-weight: 900;}
.landing_box .top .top_logo {margin-bottom: 85px;}
.landing_box .top .top_logo img {width: 290px;}

.landing {flex-direction: column; align-items: flex-start; align-items: center; margin-bottom: 100px;}

.qr_down {display: flex; gap: 30px;}
.qr_down li {position: relative;}
.qr_down li > em {display: flex; align-items: center; gap: 8px; position: absolute; font-size: 16px; padding: 8px 20px; border-radius: 40px; top: -20px; left: 15px; color: #072432; background: linear-gradient(135deg, #57FF94 0%, #00C2A8 100%); box-shadow: 0px 0px 28px rgb(192 255 224 / 72%);}
.qr_down li > em > img {width: 20px;}
.qr_down li > span {display: block; margin-bottom: 20px; width: 225px; height: 225px; background-color: #fff; border-radius: 20px; padding: 25px;}
.qr_down li > span > img {width: 100%;}
.qr_down li .down_btn {display: flex; align-items: center; justify-content: center; padding: 15px 20px; text-decoration: none; font-size: 18px; font-weight: 600; color: #020507; background-color: #222; border-radius: 14px; text-align: center; transition: 0.5s;}
.qr_down li .down_btn > img {width: 38px; margin-right: 8px;}
.qr_down li .down_btn > span {text-align: left; line-height: 24px; color: #fff;}
.qr_down li .down_btn > span > em {display: block; font-size: 16px;}
.qr_down li .down_btn:hover {background-color: #000; box-shadow: 0px 0px 24px rgb(255 255 255 / 29%);}

.cont_box {position: relative; background: #061c2b; padding: 80px 40px; border-radius: 48px;}
.half_box {display: flex; align-items: center; gap: 150px;}
/* .half_box > div {width: 100%;} */
.half_box > div.main_box {width: 25%;}

.worry_box {margin-bottom: 25px; text-align: center;}
.cont_box .tit {display: block; margin-bottom: 15px; font-size: 19px; font-family: 'NanumSquareNeo';}
.cont_box .tit > img {width: 24px; margin-right: 10px;}
.worry_box .bubble {position: relative; margin: 0 auto; text-align: left; height: 197px; background-size: 450px !important;}
.worry_box .bubble p {position: absolute; left: 90px; top: 76px; font-size: 18px; font-weight: 500; line-height: 26px;}
.worry_box .bubble.bb1 {max-width: 519px; background: url(../images/img_worry1.svg)center center no-repeat;}
.worry_box .bubble.bb2 {max-width: 537px; background: url(../images/img_worry2.svg)center center no-repeat;}
.worry_box .txt {font-size: 14px; font-family: 'NanumSquareNeo'; font-weight: 600; margin-top: 20px; line-height: 21px;}
.worry_box .txt span {position: relative; color: #4E72E0; font-weight: 900; background-color: #E6E7F4; padding: 3px 5px; border-radius: 50px;}

.img_box ul {display: flex; justify-content: center; gap: 20px;}
.img_box ul li {display: flex; gap: 40px; align-items: center;}
.img_box ul li > .img {width: 48%;}
.img_box ul li > .img img {width: 100%; border-radius: 10px;}
.img_box ul li .txt {position: relative;}
.img_box ul li .txt > strong {display: block; line-height: 39px; margin-bottom: 14px; font-size: 26px; color: #fff; font-family: 'esamanru'; font-weight: 500;}
.img_box ul li .txt1 > strong {background: linear-gradient(180deg, #FFFFFF, #57FF94); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.img_box ul li .txt2 > strong {background: linear-gradient(180deg, #FFFFFF, #FF9A0C); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.img_box ul li .txt3 > strong {background: linear-gradient(180deg, #FFFFFF, #97E0FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.img_box ul li .txt > p {font-size: 20px; color: #b3b3b3; font-weight: 500; line-height: 30px;}
.img_box ul li .txt .img {position: absolute; bottom: 50px;}

.function_box ul {background-color: #F3F4FA; padding: 25px; border: 1px solid #ddd; border-radius: 30px;}
.function_box ul li {position: relative; margin-bottom: 25px; font-weight: 500; color: #575C69; word-break: keep-all; padding-left: 10px; font-size: 18px; line-height: 30px;}
.function_box ul li::before {content: ''; display: block; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #333;}
.function_box ul li:last-child {margin-bottom: 0;}

.foot_logo {text-align: center; padding-top: 35px;}
.foot_logo img {width: 100px;}
.foot_logo p {margin-top: 15px; font-size: 12px; color: #747474;}

#main1 { position:relative;}
#main1 .list {overflow: hidden; padding: 20px 0 0; box-shadow: 0px 0px 28px rgb(34 92 139 / 72%); border-radius: 12px; background: #061c2b;}
#main1 .list ul li { overflow:hidden;}
#main1 .list ul li > img {width: 100%; padding: 0 20px 20px;}
#main1 .list ul li .txt {text-align: center;}
#main1 .list ul li .txt strong {display: block; line-height: 39px; margin-bottom: 14px; font-size: 26px; color: #fff; font-family: 'esamanru'; font-weight: 500;}
#main1 .list ul li .txt1 > strong {background: linear-gradient(180deg, #FFFFFF, #57FF94); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main1 .list ul li .txt2 > strong {background: linear-gradient(180deg, #FFFFFF, #FF9A0C); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main1 .list ul li .txt3 > strong {background: linear-gradient(180deg, #FFFFFF, #97E0FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.ctrl li {cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%);}
.ctrl li.prev {left: -50px;}
.ctrl li.next {right: -50px;}
.ctrl li img {width: 40px;}
.ctrl li.dot {bottom: -20px; top: auto; left: 50%; transform: translateX(-50%);}
.ctrl li.dot > div {display: flex; gap: 8px; position: relative;}
.ctrl li.dot > div .swiper-pagination-bullet {background-color: #fff;}

@media screen and (max-width:1700px) {
    .img_box ul li .txt .img > img {width: 100%;}
}

@media screen and (max-width:1480px) {
    .half_box {gap: 90px;}
    .landing_box {padding-left: 35px; padding-right: 35px;}
    .landing_box .top .top_logo img {width: 230px;}
    .landing_box .top strong {font-size: 28px; line-height: 43px;}
    .landing_box .top .top_logo {margin-bottom: 55px;}
    .landing {width: 50%;}
    
    .qr_down {gap: 20px;}
    .qr_down li > span {width: 145px; height: 145px; border-radius: 10px; padding: 18px;}
    .qr_down li .down_btn > img {width: 28px;}
    .qr_down li .down_btn {padding: 14px 5px; font-size: 16px;}

    .cont_box {padding-top: 50px;}
    .img_box ul li .txt {padding-top: 30px;}
    .img_box ul li .txt > strong {font-size: 20px;}
    .img_box ul li .txt > p {font-size: 16px; line-height: 23px;}
    .img_box ul li .txt > p br {display: none;}
}

@media screen and (max-width:1300px) {
    .landing_box .top strong {font-size: 24px; line-height: 35px;}

    #main1 .list ul li .txt strong {font-size: 20px; line-height: 29px;}
}

@media screen and (max-width:1200px) {
    .half_box {justify-content: space-between; padding-right: 40px;gap: 0;}

    .landing {width: auto;}
    .half_box > div.main_box {width: 35%;}
    .landing_box .top strong {font-size: 20px; line-height: 33px;}
    .cont_box {padding: 60px 50px 35px;}
    .img_box ul {flex-direction: column; gap: 20px;}
    .img_box ul li {justify-content: center;}
    .img_box ul li .txt {width:50%; padding-top: 100px;}
    .landing_box .top {margin-bottom: 50px;}
}

@media screen and (max-width:920px) {
    .landing {background: none;}
    .landing_box {padding-top: 50px;}
    
    .qr_down li > em {font-size: 12px; padding: 4px 20px; border-radius: 40px; top: -16px;}
}

@media screen and (max-width:800px) {
    .half_box {flex-direction: column; margin-bottom: 50px; padding-right: 0;}
    .landing {width: 100%;}
    .half_box > div.main_box {width: 100%;}
}

@media screen and (max-width:620px) {
    .landing {margin-bottom: 30px; padding-left: 15px; padding-right: 15px;}
    .landing_box {padding-left: 3%; padding-right: 3%; padding-top: 25px; overflow: hidden;}
    .landing_box .top {margin-bottom: 20px;}
    .landing_box .top .top_logo img {width: 160px;}
    .landing_box .top .top_logo {margin-bottom: 35px;}
    .landing_box .top strong {font-size: 16px; line-height: 24px;}
    .cont_box {padding: 30px 30px 25px; border-radius: 28px;}
    .qr_down {gap: 10px;}
    .qr_down li {width: 100%;}
    .qr_down li > span {display: none;}
    .qr_down li .down_btn {padding: 10px 5px; font-size: 13px; border-radius: 8px;}
    .qr_down li .down_btn > span {line-height: 19px;}
    .qr_down li .down_btn > span > em {font-size: 13px;}
    .img_box ul {gap: 10px;}
    .img_box ul li .txt {padding-top: 40px;}
    .img_box ul li .txt > strong {font-size: 15px;line-height: 25px;word-break: keep-all;}
    .img_box ul li .txt > p {font-size: 13px; line-height: 19px; word-break: keep-all;}
    .img_box ul li .txt .img {bottom: 20px;}
    .img_box ul li:nth-child(2) .txt .img > img {width: 85%;}

    .foot_logo {padding-top: 20px;}
    .foot_logo img {width: 90px;}
    .foot_logo p {margin-top: 10px; font-size: 12px;}

    #main1 .list ul li .txt strong {font-size: 18px; line-height: 25px;}
    .qr_down li .down_btn > img {width: 24px;}
    .qr_down li > em {display: none;}
}

@media screen and (max-width:420px) {
    .landing_box .top strong {font-size: 14px; line-height: 22px; font-weight: 300;}
    .worry_box .bubble {background-size: contain !important;}
    .worry_box .bubble p {font-size: 13px; line-height: 18px;}
    .img_box ul li > .img img {width: 170px;}
    .img_box ul li .txt .img > img {width: 85%;}
    .img_box ul li:nth-child(2) .txt .img > img {width: 80%;}
}