@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

/* reset.css */
html {scroll-behavior:smooth;}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea{margin:0; padding:0;}
img, fieldset {border:0px!important;}
table {border-collapse:collapse;}
ul, ol, li {list-style:none;}
address, em {font-style:normal;}
li img, object {vertical-align:top;}
input, select, textarea, form img {vertical-align:middle;}
a {outline:0; text-decoration:none!important; border:none;}

body {font-family: 'Pretendard', sans-serif; font-weight:400; line-height:1; letter-spacing:0; font-size:16px;}
body {padding-right: 0 !important;}
h1, h2, h3, h4, h5, h6 {font-family: 'Pretendard', sans-serif; line-height:1;}
input, button {font-family: 'Pretendard', sans-serif;}
textarea, select {font-family: 'Pretendard', sans-serif;}

body {background-color:rgba(0, 0, 0, .04);}

body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/* 공통 */
.gray-bar {height:8px; background-color:rgba(0, 0, 0, 0.04);}
.gray-bar2 {height:8px; background-color:rgba(0, 0, 0, 0.04); margin-top:50px; margin-bottom:50px;}
.gray-bar3 {height:8px; background-color:rgba(0, 0, 0, 0.04); margin-top:50px; margin-bottom:20px;}

.swiper-pagination-main-Swiper {width:fit-content; left:inherit; position:absolute; right:20px; bottom:40px; z-index:100000; color:#fff; font-size:10px; border:1px solid #fff; border-radius:10px; line-height:1; padding:4px 10px 5px;}

.wrap {max-width:560px; margin:0 auto; background-color:#fff; position:relative;}
.wrap .header {position:sticky; top:0; z-index:100; text-align:center; padding:10px 0; transition:background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;}
.wrap .header.shrink {background-color:rgba(255, 255, 255, 0.92); backdrop-filter:blur(6px);}
.wrap .header.shrink h1 {color:#000;}
.wrap .header h1 {font-size:14px; font-weight:700; line-height:1.5; color:#fff;}
.wrap .main {margin-top:-42px;}
.wrap .main .visual {position:sticky; top:0;}
.wrap .main .box {position:relative;}

.w-container {margin:0 auto; padding-left:24px; padding-right:24px;}

.box {border-radius:20px 20px 0px 0px; margin-top:-20px; padding-top:24px; transform:translateZ(0px); background-color:#fff;}
.box .box-top {display:flex; flex-direction:row; justify-content:space-evenly; margin-bottom:70px;}
.box .box-top button {display:inline-block; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center;
position:relative; box-sizing:border-box; -webkit-tap-highlight-color:transparent; background-color:transparent; outline: 0px;
border: 0px; margin: 0px; padding: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none;
color: inherit; flex-direction: column;}
.box .box-top button .box-text {font-size:12px; font-weight:700; margin-top:10px;}

.box .box-mid .desc {margin-bottom:20px;}
.box .box-mid .desc span {display:inline-block; font-size:14px; font-weight:500; margin-bottom:6px; color:rgba(0, 0, 0, 0.5);}
.box .box-mid .desc .desc-tit {font-size:20px; font-weight:700;}

.box .box-mid .section-1 {margin-bottom:50px;}
.box .box-mid .section-1 .swiper-slide a span {font-size:13px; font-weight:700; display:inline-block; margin-top:14px; color:#000; word-break:keep-all; line-height:1.5;}
.box .box-mid .section-2 {margin-bottom:50px; background-color:rgba(0, 0, 0, .02); padding-top:50px; padding-bottom:50px;}
.box .box-mid .section-2 .swiper-slide a span {font-size:13px; font-weight:700; display:inline-block; margin-top:14px; color:#000; word-break:keep-all; line-height:1.5;}
.box .box-mid .section-3 {margin-bottom:50px;}
.box .box-mid .section-3 .swiper-slide a span {font-size:13px; font-weight:700; display:inline-block; margin-top:14px; color:#000; word-break:keep-all; line-height:1.5;}
.box .box-mid .section-4 {margin-bottom:50px; background-color:rgba(0, 0, 0, .02); padding-top:50px; padding-bottom:50px;}
.box .box-mid .section-4 .swiper-slide a span {font-size:13px; font-weight:700; display:inline-block; margin-top:14px; color:#000; word-break:keep-all; line-height:1.5;}
.box .box-mid .section-5 {margin-bottom:50px;}
.box .box-mid .section-5 .swiper-slide a span {font-size:13px; font-weight:700; display:inline-block; margin-top:14px; color:#000; word-break:keep-all; line-height:1.5;}

.footer {padding:24px 24px 40px;}
.footer .footer-top {display:flex; }
.footer .footer-top button {    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    margin: 0px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    text-align: center;
    flex: 0 0 auto;
    font-size: 1.5rem;
    padding: 8px;
    border-radius: 50%;
    overflow: visible;
    color: rgba(0, 0, 0, 0.54);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    width: 40px;
    height: 40px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgba(0, 0, 0, 0.04); margin-right:16px;}
.footer .footer-mid h6 {font-size:13px; font-weight:700; margin-top:40px;}
.footer .footer-mid p {font-size:12px; font-weight:500; line-height:1.5; margin-top:15px;}