@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #3D84FF;
    --black-color : #222;
    --white-color : #fff
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--main-color); color:#fff; }


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 3vw; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */


/* header */
header{ position: fixed; z-index: 999; left: 0; top: 0; width: 100%; background-color: #fff; }
header .lang-div{ padding: 8px 0; background-color: rgba(34, 34, 34, 1);color: #fff;   }
header .lang-div .inner{ display: flex; align-items: center; justify-content: flex-end; }
header .lang-div .now-div{ cursor: pointer; position: relative; display: flex; align-items: center; gap: 14px; }
header .lang-div .now-div .now{  display: flex; align-items: center; gap: 6px; }
header .lang-div .lang-list{ font-size: 14px; display: none; width: 180px; border-radius: 10px; border:1px solid #000; overflow: hidden; padding: 10px 4px; color: #222; position: absolute; left: -5px; top: -5px; background-color: #fff; }
header .lang-div .lang-list > li{ position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
header .lang-div .lang-list > li:last-child{ border-bottom: none; }
header .lang-div .lang-list .icon{ position: absolute; right: 10px; }
header .lang-div .lang-list a{ padding:5px 10px; flex-grow: 1; display: flex; align-items: center; justify-content: flex-start; gap: 6px; }

header .header-content{ background-color: #fff; padding: 5px 0; }
header .header-content .inner{ display: flex; align-items: center; justify-content: space-between; }
header .header-content .menu-list{ display: flex; align-items: center; gap: 9px; align-items: center; }
header .header-content .menu-list .item{ padding: 8px 20px; border-radius: 4px; width: 178px; display: flex; align-items: center; gap: 6px; justify-content: center; background-color: #3D84FF; color: #fff; }
header .header-content .menu-list .item img{ width: 25px; }
@media screen and (max-width: 1400px) { 
    header .lang-div .lang-list{ right: 0; left: unset; }
}
@media screen and (max-width: 950px) { 
    header .header-content .menu-list .item{ width: auto; padding: 8px; }
    header .header-content .menu-list .item .text{ display: none; }
}
@media screen and (max-width: 650px) { 
    header .header-content .logo{ width: 120px; }
    header .header-content .menu-list .icon{ width: 20px; }
}

/* footer */
footer{ font-family: 'Gmarket Sans'; line-height: 1.5em; font-weight: 550; background-color: #222; padding: 12px 0 42px 0; color: #fff; }
footer .info{ margin-top: 20px; }
footer .floor{ margin-top: 17px; } 
@media screen and (max-width: 1250px) { 
    footer{ font-size: 14px; }
}
@media screen and (max-width: 650px) { 
    footer { font-size: 13px; padding: 20px 0 50px 0; }
    footer .logo{ width: 120px; }
}

/* sec_top */
.sec_top{ padding-top: 98px; }
@media screen and (max-width: 650px) { 
    .sec_top{ padding-top: 84px; }
}

/* .main .banner-arti */
.main .banner-arti{ color: #fff; text-align: center; min-height: 100vh; padding: 100px 0; background-image: url('../img/main/banner-arti/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .banner-arti .inner{ gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main .banner-arti .title{ line-height: 1.3em; text-align: center; font-size: 64px; background: linear-gradient(92deg, #C1D4F5 9.96%, #3D84FF 77.27%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.main .banner-arti .title .big{ font-size: 1.5em; }
.main .banner-arti .content{ font-size: 26px;  }
.main .banner-arti .bg-content{ font-size: 26px; padding: 4px 15px; border-radius: 10px; background-color: #3D84FF; color: #fff; font-weight: 700; }
.main .banner-arti .bar{ margin: 20px 0; width: 100%; height: 1px; background-color: #fff; }
.main .banner-arti .title2{ font-size: 40px; font-weight: 700; }
.main .banner-arti .item-list{ display: flex; flex-wrap: wrap; width: calc(100% + 22px); margin-left: -11px; }
.main .banner-arti .item-list > li{ width: calc(100% / 4); padding: 11px; }  
.main .banner-arti .item-list .item{ font-weight: 600; overflow: hidden; height: 100%; padding: 30px 20px; position: relative; color: #222; border-radius: 10px; background: linear-gradient(180deg, rgba(61, 132, 255, 0.00) 0%, rgba(61, 132, 255, 0.20) 100%), #FFF; box-shadow: 5.037px 10.074px 10.074px 0 rgba(0, 0, 0, 0.20); }
.main .banner-arti .item-list .item .number{ border-radius: 10px 0 10px 0; position: absolute; width: 50px; height: 50px; background-color: #3D84FF; color: #fff; font-size: 34px; font-weight: 700; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; }
.main .banner-arti .item-list .item .icon{ font-size: 68px; }
.main .banner-arti .item-list .item .t1{ font-size: 22px; color: #3D84FF; }
.main .banner-arti .item-list .item .t2{ margin-top: 10px; line-height: 1.5em; font-size: 18px; }

@media screen and (max-width: 1250px) { 
    .main .banner-arti .logo{ width: 120px; }
    .main .banner-arti .title{ font-size: 7vw; }
    .main .banner-arti .content{ font-size: 20px; }
    .main .banner-arti .bg-content{ font-size: 20px; }
    .main .banner-arti .title2{ font-size: 24px; }
    .main .banner-arti .item-list .item .number{width: 40px; height: 40px; font-size: 22px; }
    .main .banner-arti .item-list .item .t1{ font-size: 18px; }
    .main .banner-arti .item-list .item .t2{ font-size: 16px; }
}
@media screen and (max-width: 950px) { 
    .main .banner-arti .item-list{ flex-wrap: wrap; }
    .main .banner-arti .item-list > li{ width: calc(100% /2); }
}
@media screen and (max-width: 650px) { 
    .main .banner-arti .content{ font-size: 16px; }
    .main .banner-arti .bg-content{ font-size: 16px; }
    .main .banner-arti .item-list{ width: calc(100% + 10px); margin-left: -5px; }
    .main .banner-arti .item-list > li{ padding: 5px; }
    .main .banner-arti .item-list .item .t1{ font-size: 16px; word-break: keep-all;}
    .main .banner-arti .item-list .item .t2{ font-size: 14px; word-break: keep-all; }
    .main .banner-arti .item-list .item .t2 br{ display: none; }
}

/* .main .vision-arti */
.main .vision-arti{ font-family: 'Paperlogy'; color: #fff; padding: 30px 0; background-image: url('../img/main/vision-arti/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }

.main .main-title{ font-family: 'Paperlogy'; display: flex; align-items: center; justify-content: center;  }
.main .main-title h2{ border-bottom: 4px solid #3D84FF; font-size: 42px; font-weight: 700; color: #fff; }

.main .vision-arti .item-list{ margin-top: 18px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; }
.main .vision-arti .item-list > li{ padding: 10px; width: calc(100% / 4); }
.main .vision-arti .item-list .item{ color: #222; background-color: #fff; height: 100%; }
.main .vision-arti .item-list .item .img-box{ height: 134px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .vision-arti .item-list .item .content-box{ padding: 20px; text-align: center; }
.main .vision-arti .item-list .item .t1{ display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; font-weight: 600; }
.main .vision-arti .item-list .item .t2{ margin-top: 10px; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.5em; }
.main .vision-arti .center-text{ line-height: 1.5em; text-align: center; margin-top: 16px; font-weight: 600; font-size: 24px; }
.main .vision-arti .pcNone{ display: none; }
@media screen and (max-width: 1250px) { 
    .main .main-title h2{ font-size: 30px; }
    .main .vision-arti .item-list{ width: calc(100% + 10px); margin-left: -5px; }
    .main .vision-arti .item-list > li{ display: flex; align-items: center; justify-content: center; padding: 5px; }
    .main .vision-arti .item-list .item .img-box{ height: 10vw; }
    .main .vision-arti .item-list .item .t1{ font-size: 25px; }
    .main .vision-arti .item-list .item .icon{ width: 25px; }
    .main .vision-arti .item-list .item .t2{ font-size: 16px; }
    .main .vision-arti .item-list .item .t2 br{ display: none; }
    .main .vision-arti .center-text{ word-break: keep-all; font-size: 16px; }
}
@media screen and (max-width: 650px) { 
    .main .main-title h2{ font-size: 24px; }
    .main .vision-arti .item-list > li{ width: 50%; }
    .main .vision-arti .item-list .item .img-box{ height: 16vw; }
    .main .vision-arti .pcNone{ display: block; }
    .main .vision-arti .moNone{ display: none; }
}

/* .main .wave-arti */
.main .wave-arti{ padding: 70px 0; background-image: url('../img/main/wave-arti/background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.main .wave-arti .main-title h2{ line-height: 1.5em; border-bottom: 4px solid #fff; }
.main .wave-arti .item-list{ margin-top:20px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; }
.main .wave-arti .item-list > li{ width: calc(100% / 3); padding: 10px; }
.main .wave-arti .item-list .item{ text-align: center; gap: 20px; padding: 40px 20px; display: flex; flex-direction: column; background-color: #fff; box-shadow: 11px 17px 18px 0 rgba(0, 0, 0, 0.15); height: 100%; align-items: center; justify-content: center; }
.main .wave-arti .item-list .item .content{ font-family: "Paperlogy"; line-height: 1.5em; font-weight: 600;  }
.main .wave-arti .item-list .item .content .blue{ color: #3D84FF; }

@media screen and (max-width: 1250px) { 
    .main .wave-arti .item-list{ width: calc(100% + 10px); margin-left: -5px; }
    .main .wave-arti .item-list > li{ padding: 5px; width: calc(100% / 3); }
    .main .wave-arti .item-list .icon{ width: 35px; }
}
@media screen and (max-width: 950px) { 
    .main .wave-arti .item-list > li{ width: calc(100% / 2); }
    .main .wave-arti .item-list > li:last-child{ width: 100%; }
}
@media screen and (max-width: 650px) { 
    .main .wave-arti .item-list > li{ width: 100%; }
    .main .wave-arti .item-list .item { gap: 10px; padding:20px 10px; }
    .main .wave-arti .item-list .item .content{ font-size: 14px; }
}

/* .main .coin-arti */
.main .coin-arti{ padding: 80px 0; background-image: url('../img/main/coin-arti/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .coin-arti .title{ text-align: center; font-size: 52px; color: #fff; font-weight: 600; }
.main .coin-arti .title .big{ font-size: 1.5em; }
.main .coin-arti .white-bg{ height: 448px; margin-top: 92px; padding: 0 80px; display: flex; position: relative; background-color: #fff; background-image: url('../img/main/coin-arti/white-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: right center; }
.main .coin-arti .left-box{ width: 620px; font-family: "Paperlogy"; display: flex; flex-direction: column; padding: 50px 0 50px; justify-content: center; position: relative;  }
.main .coin-arti .left-box .coin{ position: absolute; z-index: 2; }
.main .coin-arti .left-box .coin1{ left: 0; top: -50px; }
.main .coin-arti .left-box .coin2{ right: 20px; bottom: 20px; }
.main .coin-arti .left-box .t1{ font-size: 20px; font-weight: 600;  }
.main .coin-arti .left-box .t2{ line-height: 1.5em; margin-top: 20px; font-size: 34px; font-weight: 600; }
.main .coin-arti .left-box .t2 .blue{ color: #3D84FF; }
.main .coin-arti .phone{ position: absolute; right: 50px; bottom: 0; }
.main .coin-arti .btn-list{ margin-top: 44px; display: flex; align-items: center; justify-content: center; padding: 0 50px; }
.main .coin-arti .btn-list > li{ padding: 10px; width: calc(100% / 3); }
.main .coin-arti .btn-list .item{display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px;  color: #fff; background-color: #3D84FF; border-radius: 8px; padding: 15px; }
.main .coin-arti .btn-list .item .icon{ width: 30px; } 
@media screen and (max-width: 1250px) { 
    .main .coin-arti .title{ font-size: 40px; }
    .main .coin-arti .white-bg{ padding: 0 6vw;  height: 38vw; }
    .main .coin-arti .left-box{ padding: 7vw 0; }
    .main .coin-arti .left-box .coin{ width: 7vw; }
    .main .coin-arti .left-box .coin1{ left: 0vw; top: -2vw; }
    .main .coin-arti .left-box .coin1{ right: 10vw; bottom: 2vw; }
    .main .coin-arti .phone{ width: 40vw; }
    .main .coin-arti .left-box{ width: 44vw; }
    .main .coin-arti .white-bg{ margin-top: 11vw; }

    .main .coin-arti .btn-list{ padding: 0; width: calc(100% + 10px); margin-left: -5px; }
    .main .coin-arti .btn-list .item{ font-size: 16px; padding: 10px; }
    .main .coin-arti .btn-list .item .icon{ width: 20px; }
    .main .coin-arti .btn-list > li{ padding: 5px; }
}
@media screen and (max-width: 950px) { 
    .main .coin-arti .left-box .t1{ font-size: 16px; }
    .main .coin-arti .left-box .t2{ font-size: 24px; }

    .main .coin-arti .left-box .t1{ font-size: 3vw; }
}
@media screen and (max-width: 650px) { 
    .main .coin-arti .title{ font-size: 5vw; }
    .main .coin-arti .phone{ right: 2vw; }
    .main .coin-arti .left-box .t2{ margin-top: 2vw; font-size: 3.5vw; }
    .main .coin-arti .btn-list .item{ border-radius: 5px; }

    .main .coin-arti .btn-list{ flex-direction: column; margin-top: 20px; }
    .main .coin-arti .btn-list > li{ width: 100%; }
}

/* .main .partnership-arti */
.main .partnership-arti{ background-image: url('../img/main/partnership-arti/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 100px 0; }
.main .partnership-arti .inner{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
.main .partnership-arti .title1{ font-weight: 600; font-size: 64px; color: #4A3BC2; text-align: center; }
.main .partnership-arti .content{ text-align: center; margin-top: 20px; font-weight: 600; line-height: 1.25em; font-size: 35px; }
.main .partnership-arti .img-list{ margin-top: 47px; display: flex; flex-wrap: wrap; width: calc(100% + 5px); margin-left: -2.5px; }
.main .partnership-arti .img-list > li{ padding: 2.5px; width: calc(100% / 4); }
.main .partnership-arti .img-list .item{ height: 187px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.main .partnership-arti .blue-bg{ border-radius: 10px; background-color: #3D84FF; text-align: center; margin-top: 47px; padding: 20px 40px; color: #fff; font-weight: 600; font-size: 35px; }

@media screen and (max-width: 1250px) { 
    .main .partnership-arti .title1{ font-size: 40px; }
    .main .partnership-arti .content{ font-size: 20px; }
    .main .partnership-arti .img-list .item{ height: 15vw; }
    .main .partnership-arti .blue-bg{  padding: 10px 20px; font-size: 24px; }
}
@media screen and (max-width: 950px) { 

}
@media screen and (max-width: 650px) { 
    .main .partnership-arti .title1{ font-size: 24px; }
    .main .partnership-arti .img-list > li{ width: calc(100% / 2); }
    .main .partnership-arti .img-list .item{ height: 30vw; }
    .main .partnership-arti .blue-bg{ font-size: 16px; }


}