/* 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-color: #E6E7F4;}
.inner {max-width: 1400px; margin: 0 auto;}

.landing_box {min-height: 750px; padding: 75px 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: 38px; font-weight: 600; color: #121212; font-family: 'NanumSquareNeo'; line-height: 63px;}
.landing_box .top strong > em {font-weight: 900;}
.landing_box .top .top_logo {margin-bottom: 85px;}
.landing_box .top .top_logo img {width: 400px;}

.landing {margin-bottom: 100px; background: url(../images/img_bg.png)right bottom no-repeat;}

.qr_down {display: flex; gap: 30px;}
.qr_down li > span {display: block; margin-bottom: 20px; width: 225px; height: 225px; background-color: #fff; border-radius: 20px; padding: 40px;}
.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: 20px; font-weight: 600; color: #121212; 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(182 184 213);}

.cont_box {position: relative; background-color: #fff; padding: 80px 15px 35px; border-radius: 48px;}
.half_box {display: flex; align-items: center; gap: 20px;}
.half_box > div {width: 100%;}

.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: 60px;}
.img_box ul li {display: flex;}
.img_box ul li > .img img {width: 100%;}
.img_box ul li .txt {position: relative; padding-top: 105px;}
.img_box ul li .txt > strong {display: block; line-height: normal; margin-bottom: 14px; font-size: 26px; color: #121212; font-family: 'NanumSquareNeo'; font-weight: 900;}
.img_box ul li .txt > p {font-size: 20px; color: #555555; 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: 140px;}
.foot_logo p {margin-top: 15px; font-size: 16px; color: #555555;}

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

@media screen and (max-width:1400px) {
    .landing_box {padding-left: 35px; padding-right: 35px;}
    .landing_box .top .top_logo img {width: 260px;}
    .landing_box .top strong {font-size: 28px; line-height: 43px;}
    .landing_box .top .top_logo {margin-bottom: 55px;}

    .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:1200px) {
    .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;}
}

@media screen and (max-width:920px) {
    .landing {background: none;}
    .landing_box {padding-top: 50px;}
}

@media screen and (max-width:620px) {
    .landing {margin-bottom: 30px; padding-left: 15px; padding-right: 15px;}
    .landing_box {padding-left: 3%; padding-right: 3%;}
    .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 {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;}
    .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: 14px;}
}

@media screen and (max-width:420px) {
    .landing_box .top strong {font-size: 14px; line-height: 22px;}
    .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%;}
}