/* transition: left .6s cubic-bezier(0.120, 0.870, 0.295, 0.930); */
.red {color:red !important;}
.gray {color:#999 !important;}

html, body {
    overflow-x:hidden;
}
.no-scroll {
    overflow-y:hidden;
}

.primary {color:#0057FF;}
.bg-red {background-color:#FF0000 !important;}
.bg-primary {background-color:#0057FF !important;}
.bg-lightGray {background-color:#AAAAAA !important;}
.bg-gray {background-color:#545454 !important;}
.bg-black {background-color:#000 !important;}
.accent {color:#DBAF47;}
.bold {font-weight:600;}

.width-100 {width:100%;}

html {
    background-color:#eee;
}
#app {
    max-width:450px; min-height:100vh; margin:0 auto;
    background-color:#fff;
}

.wrap {width:100%; padding:20px;}

.mt-100 {margin-top:100px;}
.mt-80 {margin-top:80px;}
.mt-60 {margin-top:60px;}
.mt-50 {margin-top:50px;}
.mt-40 {margin-top:40px;}
.mt-30 {margin-top:30px;}
.mt-20 {padding-top:20px;}
.mt-16 {margin-top:16px;}
.mt-10 {margin-top:10px;}
.pt-50 {padding-top:50px;}

@media screen and (max-width:1200px) {

}

.header {
    background-color:#fff;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    position: fixed;
    width:100%;
    max-width: 450px;
    z-index: 100;
}
.header .logo{
    width:70px;
}
.header .wrap {
    
    display: flex; align-items: center; justify-content: space-between;
    padding-top:8px; padding-bottom:8px;
}
.header .btn {

}
.header .btn-back i {
    font-size:18px; color:#0057FF;
}
.header .btn-menu i {
    font-size:24px; color:#0057FF;
}

.area-messages {
    padding-top:50px;
    padding-bottom:120px;
}
.m-bottom.type01 {
    max-width:450px; width:100%;
    padding:15px;
    position: fixed; bottom:0; left:50%; z-index:1; transform:translateX(-50%);
    border-radius:15px 15px 0 0 ;
    box-shadow:0px -4px 12px rgba(0,0,0,0.16); background-color:#fff;
}
.m-bottom.type01 .m-input-text.type01 input {
    background-color:#fff;
    border:1px solid #e1e1e1;
}

.m-btn-bottom.type01 {
    display: flex; align-items: center; justify-content: center;
    position: fixed; bottom:120px; right:30px;
    width:46px; height:46px;
    background-color:#0057FF;
    border-radius:100%;
    box-shadow:0px 3px 12px rgba(0,87,255,0.16);
}
.m-btn-bottom.type01 i {
    color:#fff;
}

.main {

}
.m-messages.type01 {

}
.m-messages.type01 .m-message {
    margin-top:20px; position:relative;
    opacity:0;
}
.m-messages.type01 .m-message.active {
    animation:fadeInUp 1s forwards;
}
.m-messages.type01 .m-message > .body > i {
    position: relative; top:2px; right:-4px; color:#0057FF;
}
.m-messages.type01 .m-message > .body > .point {
    font-size:14px; font-weight:bold;
}
/* Á¡µéÀ» ¼øÂ÷ÀûÀ¸·Î Åõ¸íÇÏ°Ô ¸¸µé¾îÁִ Ŭ·¡½º */
.fade-dot {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    font-size:14px;
}

@keyframes fadeIn {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeInUp {
    0% {
        opacity:0; top:10px;
    }
    100% {
        opacity:1; top:0px;
    }
}
.m-messages.type01 .m-message:first-of-type {
    margin-top:0;
}
.m-message {
    display: flex; justify-content: flex-end; flex-wrap:wrap;
}
.m-message > .img-wrap {
    width:25px; height:25px;
    margin-right:10px;
    border-radius:100%;
    background-size:cover; background-repeat:no-repeat; background-position:center center; background-position-y:0px; background-color:#fff;
}
.m-message > .body {
    max-width:calc(100% - 35px);
    padding:10px 25px 10px 20px;
    font-size:14px; line-height:20px; white-space: pre-line;
    background-color:#EEEEEE; border-radius: 24px 0 24px 24px;
    text-align: right;
    word-break: keep-all;
}
.bold {font-weight:bold !important;}
.m-message > .body > span {
    font-size:14px;
}
.m-message > .body > .dots {
    display: flex; align-items: center; justify-content: space-between;
    width:60px; height:20px; position:relative;
}
.m-message > .body > .dots .dot {
    display: inline-block;
    content:""; width:6px; height: 6px;
    background-color:#0057FF;
    opacity:0;
    border-radius:100%;
}
@keyframes fadeDot {
    0% {
        opacity:0;
        transform:scale(1);
    }
    100% {
        opacity: .6;
        transform:scale(1.5);
    }
}
.m-message > .body > .dots .dot:nth-child(1) {
    transition-delay:.0s;
    animation:fadeDot .6s ease-in-out alternate infinite;
}
.m-message > .body > .dots .dot:nth-child(2) {
    animation:fadeDot .6s ease-in-out alternate .2s infinite;
}
.m-message > .body > .dots .dot:nth-child(3) {
    animation:fadeDot .6s ease-in-out alternate .4s infinite;
}
.m-message > .body > .dots .dot:nth-child(4) {
    animation:fadeDot .6s ease-in-out alternate .6s infinite;
}
.m-message > .body > .dots .dot:nth-child(5) {
    animation:fadeDot .6s ease-in-out alternate .8s infinite;
}

.m-message.type-left {
    display: flex; justify-content: flex-start;
}
.m-message.type-left .custom-content {
    flex:auto;
    max-width:calc(100% - 35px);
}
.m-message.type-admin {
    justify-content: flex-start;
}
.m-message.type-admin .body {
    padding-right:15px;
    background-color:#ECF2FF; border-radius:0 24px 24px 24px;
    text-align: left;
}

.m-message.type-form {
    padding:25px 20px; margin-left:35px;
    border-radius:24px; border:1px solid #E4E4E4;
    box-shadow:0px 3px 20px rgba(0,0,0,0.16);
}
.m-message.type-info {
    display: block;
    max-width:calc(100% - 35px);
    margin-left:auto; padding:20px;
    border:1px solid #F5F5F5; box-shadow: 0px 3px 20px rgba(0,0,0,0.16);
    background-color:#fff;
}
.m-message.type-info .box-fragment {
    margin-top:35px;
}
.m-message.type-info .box-fragment:first-of-type {
    margin-top:0;
}
.m-message.type-info .box-title {
    padding-bottom:10px; margin-bottom:15px;
    border-bottom:1px solid #e1e1e1;
}
.m-message.type-info .box-title .title {
    font-size:14px;
}
.m-message.type-info .infos {}
.m-message.type-info .infos .info {
    display: flex; justify-content: space-between;
    margin-bottom:10px;
}
.m-message.type-info .infos .info .title {
    font-size:14px; color:#999
}
.m-message.type-info .infos .info .content {
    max-width:200px;
    font-size:15px; font-weight:500; word-break: keep-all; text-align: right; line-height:20px;
}
.m-message.type-info .infos .info:last-child {
    margin-bottom:0;
}

.m-message.type-custom.fixed {
    width:100%;
    max-width:450px;
    position:fixed;
    z-index:100;
    margin-top:50px;
}
.m-message.type-custom.fixed > .img-wrap {
    display:none;
}

.m-message.type-price {
    display: block;
    max-width:calc(100% - 35px);
    margin-left:auto; padding:20px;
    border:2px solid #E4E4E4; border-radius:24px;
    background-color:#fff;
}
.m-message.type-price .box-fragment {
    padding-bottom:15px; margin-bottom:15px;
    border-bottom:1px solid #e1e1e1;
}
.m-message.type-price .box-fragment:last-of-type {
    margin-bottom:0; padding-bottom:0;
    border-bottom:none;
}
.m-message.type-price .box-title {
   margin-bottom:15px;
}
.m-message.type-price .box-title .title {
    font-size:14px; font-weight:bold;
}
.m-message.type-price .box-title .title i {
    position: relative; top:2px;
    color:#0056FD;
}
.m-message.type-price .infos {}
.m-message.type-price .infos .info {
    display: flex; justify-content: space-between;
    margin-bottom:10px;
}
.m-message.type-price .infos .info .title {
    font-size:14px;
}
.m-message.type-price .infos .info .content {
    max-width:200px;
    font-size:15px; font-weight:bold; word-break: keep-all; text-align: right; line-height:20px;
}
.m-message.type-price .infos .info:last-child {
    margin-bottom:0;
}


.m-message.type-price2 {
    display: block;
    max-width:calc(100% - 35px);
    margin-left:auto; padding:20px;
    border:2px solid #E4E4E4; border-radius:24px;
    background-color:#fff;
}
.m-message.type-price2 .box-fragment {
    padding-bottom:15px; margin-bottom:15px;
    border-bottom:1px solid #e1e1e1;
}
.m-message.type-price2 .box-fragment:last-of-type {
    margin-bottom:0; padding-bottom:0;
    border-bottom:none;
}
.m-message.type-price2 .box-title {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom:15px; padding-bottom:10px;
    border-bottom:2px solid #E4E4E4;
}
.m-message.type-price2 .box-title .title {
    margin-bottom:10px; margin-top:4px;
    font-size:15px; font-weight:bold;
}
.m-message.type-price2 .box-title .tags {
    display: flex;
}
.m-message.type-price2 .box-title .tag {
    display: flex; align-items: center; justify-content: center;
    min-width:41px; height:19px;
    margin-right:8px;
    font-size:10px;
    border:1px solid #E4E4E4; border-radius:24px;
}
.m-message.type-price2 .box-title .title i {
    position: relative; top:2px;
    color:#0056FD;
}
.m-message.type-price2 .infos {}
.m-message.type-price2 .infos .info {
    display: flex; justify-content: space-between;
    margin-bottom:10px;
}
.m-message.type-price2 .infos .info .title {
    font-size:14px; font-weight:300;
}
.m-message.type-price2 .infos .info .content {
    max-width:200px; flex:auto;
    font-size:13px; font-weight:500; word-break: keep-all; text-align: left; word-break: keep-all;
}
.m-message.type-price2 .infos .info:last-child {
    margin-bottom:0;
}
@media screen and (max-width:1200px){

}

@media screen and (max-width:768px){}

.m-error {
    margin-top:10px;
    font-size:13px; color:red;
}
.m-comment {
    margin-top:10px;
    font-size:13px; color:#999;
}
.m-input-wrap.type01:first-of-type {margin-top:0;}
.m-input-wrap.type01 {
    width:100%;
    margin-top:25px;
}
.m-input-wrap.type01 .m-input-title {
    margin-bottom:10px;
    font-size:13px; font-weight:600;
}
.m-input-wrap.type01 .m-input-title .star {
    color:#F01515;
}

.m-input-textarea.type01 {}
.m-input-textarea.type01 textarea {
    width: 100%; height:320px; resize:none;
    padding:15px 25px;
    font-size:14px;
    border:1px solid #e1e1e1; border-radius:15px;
}

.m-input-text input {display:block; width:100%;}
.m-input-text.type01 {position:relative;}
.m-input-text.type01 input {
    width:100%; height:48px; padding:0px 20px;
    border-radius:15px;
    font-size:12px;
    background-color:#fff; border:1px solid #e1e1e1;
}
.m-input-text.type01 input[type="date"] {height:auto; padding:16px 20px; background-color:#fff !important;}
.m-input-text.type01 .m-input-text-deco {
    position:absolute; right:100px; top:50%; transform:translateY(-50%); color:#F01515; font-size:15px;
}

.m-input-text.type01.with-btn input {
    padding-right:100px;
}
.m-input-text.type01.with-btn .m-btn {
    position: absolute; right:8px; top:50%; transform:translateY(-50%);
}
@media screen and (max-width:1200px){
    .m-input-text.type01 input {height:50px;}
}



input[type='checkbox'] {
    display: none;
}
label {
    cursor:pointer;
}
.m-input-checkboxes-wrap.type01 {
    padding:20px 25px;
    border:2px solid #E4E4E4; border-radius:24px;
}
.m-input-checkboxes-wrap.type01 .fragment {
    padding-bottom:20px; margin-bottom:20px;
    border-bottom:2px solid #E4E4E4;
}
.m-input-checkboxes-wrap.type01 .fragment .title {
    margin-bottom:15px;
    font-size:14px; font-weight:bold;
}
.m-input-checkboxes-wrap.type01 .fragment:last-of-type {
    padding-bottom:0; margin-bottom:0;
    border-bottom:none;
}
.m-input-checkboxes.type01 {
    background-color:#F1F1F1; border:1px solid #E4E4E4; border-radius:15px;
}
.m-input-checkboxes.type02 {
    display: flex; justify-content: space-around;
    padding:10px 20px;
    background-color:#fff; border-radius:15px;
}
.m-input-checkboxes.type01 .top {
    padding:15px 25px;
    background-color:#fff; border-radius:15px; border:1px solid #E4E4E4;
}
.m-input-checkboxes.type01 .top .m-input-checkbox.type01 label {
    font-size:15px; font-weight:600;
}
.m-input-checkboxes.type01 .top .m-input-checkbox.type01 label:before {
    width:18px; height:18px;
}
.m-input-checkboxes.type01 .bottom {
    padding:13px 25px 20px 25px;
}
.m-input-checkboxes.type01 .bottom > .m-input-checkbox {
    margin-bottom:15px;
}
.m-input-checkboxes.type01 .bottom .comment {
    margin-bottom:15px;
    font-size:13px; color:#909090;
}
input[type='radio'] {display: none;}
.m-input-checkboxes.type03 {
    display: flex; flex-wrap:wrap;
    margin:-5px;
}
.m-input-checkboxes.type03 .m-input-checkboxes-inner {
    width: 100%;
}
.m-input-checkboxes.type03 .m-input-checkbox-wrap {
    width:50%;
    padding:5px;
}
.m-input-checkboxes.type03.align-3 .m-input-checkbox-wrap {
    width:33.33% !important;
}
.m-input-checkboxes.type03 label {
    display: flex; align-items: center; justify-content: center;
    width:100%; height:35px;
    font-size:15px;
    border:1px solid #E4E4E4; border-radius:24px;
    transition: all .3s;
}
.m-input-checkboxes.type03 input:checked + label {
    background-color:#0057FF; color:#fff;
}

.m-input-checkboxes.type04 .m-input-checkbox-wrap {
    margin-bottom:10px;
}
.m-input-checkboxes.type04 .m-input-checkbox-wrap:last-of-type {
    margin-bottom:0;
}
.m-input-checkboxes.type04 .m-input-checkbox label {
    display: block;
    padding:24px 30px;
    position:relative;
    border-radius:24px; border:2px solid #E4E4E4; box-shadow:0px 3px 8px rgba(0,0,0,0.16);
    transition:all .3s;
}
.m-input-checkboxes.type04 .m-input-checkbox label i {
    position: absolute; top:10px; right:15px;
    font-size:25px; color:#0057FF;
    opacity:0;
    transition: all .3s;
}
.m-input-checkboxes.type04 .m-input-checkbox label .title {
    font-size:15px; font-weight:bold;
    transition:all .3s;
}
.m-input-checkboxes.type04 .m-input-checkbox label .body {
    margin-top:5px;
    font-size:14px; font-weight:300;
    transition:all .3s;
}
.m-input-checkboxes.type04 .m-input-checkbox input:checked + label {
    border-color:#0057FF;
}
.m-input-checkboxes.type04 .m-input-checkbox input:checked + label .title {
    color:#0057FF;
}
.m-input-checkboxes.type04 .m-input-checkbox input:checked + label .body {
    color:#0057FF;
}
.m-input-checkboxes.type04 .m-input-checkbox input:checked + label i {
    opacity:1;
}
.m-input-checkbox.type01 {}
.m-input-checkbox.type01 label {
    display:block;
    padding-left:20px;
    position:relative;
    font-size:13px; color:#909090;
    transition:all .3s;
}
.m-input-checkbox.type01 .fragment {
    display: flex; justify-content: space-between; align-items: center;
}
.m-input-checkbox.type01 .link {
    font-size:13px; text-decoration: underline; color:#303030;
}
.m-input-checkbox.type01 label:before {
    content:""; width:15px; height:15px;
    position:absolute; left:0px; top:0px;
    background:url("/assets/images/checkbox-inactive.png") no-repeat; background-size:100% 100%;
    transition: all .3s;
}
.m-input-checkbox.type01 input:checked + .fragment label:before {
    background:url("/assets/images/checkbox-active.png") no-repeat; background-size:100% 100%;
}
.m-input-checkbox.type01 input:checked + .fragment label {
    color:#000;
}
.m-btn.type01 {
    display: inline-block;
    min-width:80px; height:35px;
    position:relative;
    font-size:15px; line-height:35px; color:#fff; font-weight:600; text-align: center;
    background-color:#0057FF; border-radius:9px;
}
.m-btn.type02 {
    display: inline-block;
    width:100%; height:40px;
    position:relative;
    font-size:14px; line-height:40px; color:#fff; font-weight:600; text-align: center;
    background-color:#0057FF; border-radius:9px;
    box-shadow:0px 3px 12px rgba(0,0,0,0.16);
}
.m-btn.type02.type-small {
    width:80px;
}
.m-btn.type02.type-middle {
    width:140px;
}
.m-btn.type03 {
    display: inline-block;
    width:100%; height:40px;
    position:relative;
    font-size:15px; line-height:40px; color:#000; text-align: center;
    background-color:#fff; border-radius:20px;
}
.m-btn.type04 {
    display: inline-block;
    min-width:80px; height:30px;
    position:relative;
    font-size:15px; line-height:30px; color:#fff; font-weight:600; text-align: center;
    background-color:#0057FF; border-radius:24px;
}
.m-btn-go.type01 {
    display: flex; align-items: center; justify-content: center;
    width:60px; height:46px;
    background-color:#EEEEEE;
    border-radius:24px 0 24px 24px;
}
.m-social.type01 {
    display: flex; align-items: center; justify-content: center;
    width:100%; height:54px;
    position: relative;
    background-color:#FEE500;
    overflow:hidden; border-radius:6px;
}
.m-social.type01 .title {
    font-size:17px;
}
.m-social.type01 img {
    position: absolute; left:0; top:0;
}
.m-social.type01.type-naver {
    background-color:#03C75A;
}
.m-social.type01.type-naver .title {
    color:#fff;
}

.m-title.type01 {
    font-size:25px; font-weight:bold;
}

.m-policy.type01 {
    min-height:calc(100vh - 160px);
    padding:20px 25px;
    font-size:14px; font-weight:400; white-space: pre-line; line-height:20px;
    border-radius:24px; background-color:#F1F1F1;
}

@keyframes flash {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

table .m-input-number {margin:0 auto;}



.m-pop.type01 {
    display: none; align-items: center; justify-content: center;
    width:100%; height:100%; padding:20px;
    position: fixed; top:0; left:0; z-index:10;
}
.m-pop.type01.active {
    display: flex;
    animation:popup .6s forwards;
}

@keyframes popup {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.m-pop.type01 .black {
    width:100%; height:100%;
    position: absolute; top:0; left:0;
    background-color:rgba(0,0,0,0.6);
}
.m-pop.type01 .m-pop-inner {
    display: flex; align-items: center; justify-content: center;
    width:382px; max-width:100%; min-height:460px;
    padding:100px 60px 60px 60px;
    position:relative; z-index:1;
    text-align: center;
    background-color:#fff; border-radius:24px;
    box-shadow:0px 3px 20px rgba(0,0,0,0.16);
}
.m-pop.type01 .m-pop-inner .box-title {
    margin-bottom:28px;
}
.m-pop.type01 .m-pop-inner .box-title .title {
    margin-top:4px;
    font-size:25px; font-weight:bold;
}
.m-pop.type01 .m-pop-contents {margin-top:-168px;}
.m-pop.type01 .body {
    line-height:24px;
}
.m-pop.type01 .m-pop-btns {
    width:100%;
    padding:60px;
    position:absolute; left:0; bottom:0;
}

.m-pop.type02 {
    display: none; align-items: center; justify-content: center;
    width:100%; height:100%; padding:100px 20px;
    position: fixed; top:0; left:0; z-index:10;
}
.m-pop.type02.active {
    display: flex;
    animation:popup .6s forwards;
}

@keyframes popup {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.m-pop.type02 .black {
    width:100%; height:100%;
    position: absolute; top:0; left:0;
    background-color:rgba(0,0,0,0.6);
}
.m-pop.type02 .m-pop-title {
    margin-bottom:16px;
    font-size:18px; font-weight:bold; text-align: center;
}
.m-pop.type02 .m-pop-inner {
    width:382px;
    padding:30px 40px;
    position:relative; z-index:1;
    background-color:#fff; border-radius:24px;
    box-shadow:0px 3px 20px rgba(0,0,0,0.16);
}
.m-pop.type02 .m-pop-inner .box-title {
    margin-bottom:28px;
}
.m-pop.type02 .m-pop-inner .box-title .title {
    margin-top:4px;
    font-size:25px; font-weight:bold;
}
.m-pop.type02 .m-policy.type01 {
    min-height:auto; max-height:200px; overflow-y:auto;
}
.m-pop.type02 .m-pop-contents {

}
.m-pop.type02 .body {
    line-height:24px;
}
.m-pop.type02 .m-pop-btns {
    width:100%; margin-top:20px;
}

.m-spaces.type01 {
    display: flex;
    margin:-5px;
}
.m-spaces.type01 .m-space-wrap {
    flex:1;
    padding:5px;
}
.m-spaces.type02 {
    display: flex; justify-content: center;
    margin:-10px;
}
.m-spaces.type02 .m-space-wrap {
    padding:10px;
}

.area-main {
    padding-bottom:60px;
    background-color:#fff;
}
.area-main .swiper2 {

}
.area-main .swiper2 .m-box.type01 {
    height:85px;
}
.area-main .swiper2 .deco {
    width: 390px;
    position: absolute; bottom:-80px; left:50%; transform:translateX(-50%);
    z-index: 1;
}
.area-main .section1 {
    padding:90px 40px 60px 40px;
}
.area-main .section1 .m-btn {
    display: block;
    width:285px; margin: 0 auto;
}
.area-main .section1 .m-btn.float {
    animation:fadeUp .6s forwards;
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:10;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
}
@keyframes fadeUp {
    0% {
        opacity:0;
        bottom:-20px;
    }

    100% {
        opacity:1;
        bottom:20px;
    }
}
.area-main .section1 .title {
    margin-bottom:12px;
    font-size:28px; font-weight:bold; line-height:40px; text-align: center;
}
.area-main .section1 .title .point {
    font-size:28px; font-weight:bold; line-height:40px; color:#0057FF;
}
.area-main .section1 .body {
    margin-bottom:70px;
    font-size:14px; text-align: center; line-height:22px;
}
.area-main .m-messages.type01 .m-message {
    margin-top:0; margin-bottom:10px;
}
.area-main .m-messages.type01 .m-message > .body {
    font-size:12px;
}


.area-main .swiper {
    margin-left:40px;
}
.area-main .swiper1 .swiper-container {
    padding-right:20px;
}
.area-main .section2 .swiper1 .swiper-slide {
    min-height:500px;
    padding:40px 20px;
    background-color:#fff; border-radius:25px;
    box-shadow:0px 3px 12px rgba(6,60,163, 0.12);
}
.area-main .section2 .swiper1 .swiper-slide .content {}
.area-main .section2 .swiper1 .swiper-slide .content .box-title {
    margin-bottom:30px;
    text-align: center;
}
.area-main .section2 .swiper1 .swiper-slide .content .box-title .title {
    font-size:19px; font-weight:800; color:#0057FF;
}
.area-main .section2 .swiper1 .swiper-slide .content .box-title .body {
    margin-bottom:7px;
    font-size:14px;
}
.area-main .section2 .swiper1 .swiper-slide .content .box-title .body .point {
    font-size:14px; font-weight:bold; color:#0057FF;
}
.area-main .section2 {
    padding:40px 0;
    background-color:#EFF4FF;
}
.area-main .section2 > .title {
    margin-bottom:40px;
    font-size:25px; font-weight:bold; text-align: center; line-height:35px;
}

.area-main .section2 .swiper-slide:nth-child(3) {
    position: relative; overflow:hidden;
}
.area-main .section2 .swiper-slide:nth-child(3) .box-title {
}
.area-main .section2 .swiper-slide:nth-child(3) .img-wrap {
    max-width:110px;
    right:0;
}
.area-main .section2 .scroll-boxes {
    display: flex;
    overflow-x: auto;
}
.area-main .section2 .scroll-boxes .m-box {
    flex:0 0 auto; width:225px; margin-right: 10px;
}
.area-main .section2 .swiper2 .swiper-slide {
    min-height:0;
    padding:0; box-shadow:none;
}

.m-box.type01 {
    padding:15px;
    position:relative;
    border-radius:15px; background-color:#0057FF;
    overflow:hidden;
}
.m-box.type01 .img-wrap {
    max-width:250px;
    position:absolute; top:50%; right:-15%; transform:translateY(-52%);
}
.m-box.type01 .img-wrap img {
    display: block;
    max-width:100%;
}
.m-box.type01 .top {
    margin-bottom:40px;
    position:relative; z-index:1;
}
.m-box.type01 .top .title {
    margin-bottom:5px;
    font-size:13px; font-weight:600; color:#fff;
}
.m-box.type01 .top .body {
    font-size:12px; font-weight:600; color:#fff;
}
.m-box.type01 .bottom {
    padding-top:10px;
    position:relative; z-index:1;
}
.m-box.type01 .bottom:before {
    content:"";
    width:12px; height:2px;
    position:absolute; left:0; top:0;
    background-color:#fff;
}
.m-box.type01 .bottom .body {
    font-size:10px; color:#fff;  word-break: keep-all;
}
.m-box.type01.type-big {
    padding:25px 20px 20px 20px;
}
.m-box.type01.type-big .img-wrap {
    transform:translateY(-50%);
}
.m-box.type01.type-big .top .title {
    font-size:20px; font-weight:bold;
}
.m-box.type01.type-big .top .body {
    font-size:15px; font-weight:500;
}
.m-box.type01.type-big .bottom .body {
    font-size:14px; line-height:20px; font-weight:300;
}


.align-left {
    text-align: left !important;
}

.m-boxes.type01 {
    display: flex; align-items: center;
    border:1px solid #e1e1e1; border-radius:15px;
}
.m-boxes.type01 .m-box {
    flex:1;
    padding:15px 4px;
    position:relative;
}
.m-boxes.type01 .m-box:before {
    content:""; width:1px; height:20px;
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    background-color:#E4E4E4;
}
.m-boxes.type01 .m-box:first-of-type:before {
    display: none;
}
.m-boxes.type01 .m-box .title {
    font-size:10px; line-height:16px; text-align: center;
}
.m-boxes.type01 .m-box .body {
    margin-top:4px;
    font-size:10px; font-weight:bold; text-align: center;
}
.m-boxes.type01.type-big .m-box .title {
    font-size:13px;
}
.m-boxes.type01.type-big .m-box .body {
    font-size:14px;
}

.footer {
    padding:40px 0;
    text-align: left;
}
.footer .wrap {
    padding:0 16px;
}
.footer .links {
    display: flex; align-items: center; justify-content: flex-start;
    margin-bottom:20px;
}
.footer .links .link {
    font-size:10px; font-weight:800;
}
.footer .links .deco {
    margin:0 8px;
    position:relative; top:1px;
    font-size:12px; font-weight:800;
}
.footer .infos {
    margin-bottom:12px;
}
.footer .info {
    font-size:12px; line-height:21px; color:#989898;
}
.footer .btn-toggle {
    color:#000; text-decoration: underline; font-weight:bold;
}
.footer .btn-toggle i {
    margin-left:8px;
    font-size:10px; font-weight:bold;
}
.footer .copyright {
    font-size:12px; line-height:21px; color:#989898;
}
.footer.active .btn-toggle i {
    transform:rotate(180deg);
}
.footer.active .info {
    display: none;
}
.footer.active .btn-toggle {
    display: block;
}

.m-top.type01 {
    top:42px;
    z-index:100;
    width:100%;
    background-color:white;
    padding:30px 24px 24px 24px;
    position: fixed;
    box-shadow:0px 3px 12px rgba(0,0,0,0.16);
    border-radius: 0 0 26px 26px;
}
.m-top.type01:after {
    display: none;
    content:"";
    width:58px; height:3px;
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    background-color:black; border-radius:3px;
}
.m-top.type01 .left .box-name {
    margin-bottom:10px;
    font-size:20px; font-weight:500;
}
.m-top.type01 .left .box-name .name {
    margin-right:6px;
    font-size:40px; font-weight:500;
}
.m-top.type01 .box-comment {
    display: flex; align-items: center; justify-content: space-between;
    overflow: hidden;
}
.m-top.type01 .box-comment .right {
    margin-top:-42px;
}
.m-top.type01 .box-comment .right img {
    height:180px;
    position: relative; top:42px;
}
.m-top.type01 .box-comment .left .img {
    display: block; width: 100px;
    margin-bottom:15px;
}
.m-top.type01 .box-comment .left .title {
    font-size:16px; word-break: keep-all;
}

.m-filter.type01 {
    width:100%;
    z-index: 10;
    background-color:#fff; border-radius:24px; overflow:hidden;
    transition: top .3s;
}
.m-filter.type01.top {
    display: none; opacity: 0;
    width: calc(100% - 40px);
    max-width:410px;
    position: fixed; top:20px; left:50%; transform:translateX(-50%);
    z-index: 10;
}
.m-filter.type01.top.active {
    display: block;
    animation: fadeFilter .6s forwards;
}

@keyframes fadeFilter {
    0% {
        top:0;
        opacity:0;
    }
    100% {
        top:20px;
       opacity: 1;
    }
}
.m-filter.type01 > .m-filter-inner {
    border:1px solid #E4E4E4; border-radius:24px;
    box-shadow:0px 3px 20px rgba(0,0,0,0.16);
}
.m-filter.type01 > .m-filter-inner > .box-title {
    display: flex; width:100%; align-items: center; justify-content: space-between;
    padding:6px 10px; padding-left:30px;
    border:1px solid #E4E4E4; border-radius:24px;
}

.m-filter.type01 > .m-filter-inner > .box-title .title {
    font-size:15px; font-weight:bold;
}
.m-filter.type01 > .m-filter-inner > .box-title .btn {
    display: flex; align-items: center; justify-content: center;
    width:26px; height:26px;
    border-radius:100%; background-color:#0057FF;
}
.m-filter.type01 > .m-filter-inner > .box-title .btn i {
    position:relative; top:1px;
    font-size:16px; color:#fff;
}
.m-filter.type01 > .m-filter-inner > .box-title.active .btn i {
    transform:rotate(180deg); top:-1px;
}
.m-filter.type01 > .m-filter-inner > .box-content {
    display: none;
    padding:20px;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner {
    margin-top:10px;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner:first-of-type {
    margin-top:0;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-title {
    display: flex; width:100%; align-items: center; justify-content: space-between;
    padding:11px 25px;
    border:1px solid #E4E4E4; border-radius:15px;
}

.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-title.active {
    border-radius:15px 15px 0 0 ;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-title.active i {
    transform:rotate(180deg);
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-title .title {
    font-size:15px; font-weight:500; color:#777;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-content {
    display: none;
    border:1px solid #e4e4e4; border-radius:0 0 15px 15px;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-content .input label {
    display: block;
    padding:10px 25px;
    font-size:15px; color:#AAAAAA;
    transition: all .3s;
}
.m-filter.type01 > .m-filter-inner > .box-content > .m-filter-inner > .box-content .input input:checked + label {
    background-color:#EFF4FF; color:#0057FF; font-weight:bold;
}
.area-login .fragment {
    display: flex; align-items: center; justify-content: center;
    height: 100vh;
}
.area-login .content {
    width: 100%;
    text-align: center;
}
.area-login .btns {
    width: 100%;
    padding:0 35px; margin-top:40%;

}
.area-mypage {}
.area-mypage .box-title {
    display: flex; align-items: center; justify-content: space-between;
}
.area-mypage .box-title .title {
    font-size:20px; font-weight:bold;
}
.area-mypage .box-title .link {
    font-size:12px; font-weight:300; color:#AAAAAA;
}

.area-out .box-title {
    margin-top:40px;
    text-align: center;
}
.area-out .box-title .title {
    margin-bottom:10px;
    font-size:20px; font-weight:bold;
}
.area-out .box-title .body {
    font-size:13px;
}
.area-out .box-title .body {

}

.m-stick-bottom.type01 {
    height:68px; margin-top:20px;
}
.m-stick-bottom.type01 .m-stick-bottom-inner {
    width:100%; max-width:450px; padding-bottom:20px; padding-top:10px;
    position: fixed; bottom:0px; left:50%; transform:translateX(-50%);
    background-color:#fff;
}

.area-calc-result {
    padding-top:50px;
}
.area-calc-result .m-box.type01 .img-wrap {
    right:-10%;
}

.area-calc-result .m-input-checkboxes.type03 .m-input-checkbox-wrap {
    width:25%;
}

.area-supply {
    padding-top:30px;
}

.m-profile.type01 {
    display: none; align-items: center; justify-content: center;
    width:100%; height:100%; padding:20px;
    position: fixed; top:0; left:0;
    z-index:99;
}
.m-profile.type01.active {
    display: flex;
    animation:fadeIn .3s forwards;
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.m-profile.type01 .black {
    content:"";
    width:100%; height:100%;
    position: absolute; top: 0; left:0;
    background-color:rgba(0,0,0,0.6);
}
.m-profile.type01 .m-profile-inner {
    width: 100%; max-width:450px;
    position: relative; z-index: 1;
    background-color:#fff; border-radius:24px;
}
.m-profile.type01 .m-profile-inner .content {
    padding:76px 40px 40px 40px;
    position:relative; z-index: 1;
}
.m-profile.type01 .m-profile-inner .img-wrap {
    display: block;
    width: 120px; height:120px;
    margin:0 auto; margin-bottom:20px;
    background-size:cover; background-position: center center; background-repeat: no-repeat;
    background-position-y:10px; border:1px solid #e1e1e1; background-color:#fff;
    border-radius:100%;
}
.m-profile.type01 .m-profile-inner .title {
    margin-bottom:12px;
    font-size:20px; font-weight:bold; text-align: center;
}
.m-profile.type01 .m-profile-inner .body {
    margin-bottom:30px;
    font-size:14px; font-weight:500; line-height:20px;
    text-align: center; word-break: keep-all;
}
.m-profile.type01 .m-profile-inner .btn {
    display: flex; align-items: center; justify-content: center;
    width:150px; height:35px; margin:0 auto;
    font-size:15px;
    background-color:#0057FF; color:#fff; border-radius:24px;
}
.m-profile.type01 .m-profile-inner .btn i {
    margin-right:8px;
    font-size:16px;
    color:#fff;
}
.m-profile.type01 .m-profile-inner:before {
    content:"";
    width:100%; height:178px;
    position: absolute; top:0; left:0;
    background-color:#E9EEF9; border-radius:24px 24px 0 0;
}


.area-intro {
    min-height: 100vh;
    background-color:#0057FF;
    position:relative; overflow: hidden;
}
.area-intro .hidden {
    opacity:0;
}
.area-intro .consoles {
    display:block; width: 100%;
    position:absolute;
    color:white;
    top:40%; left:51%;
    transform:translate(-50%, -50%);
    margin:auto;
    text-align:center;
}
.area-intro .console-container #text {
    margin-right:-10px;
    font-size:60px; font-weight:bold; font-family: "scoreDream";
}
.area-intro .console-underscore {
    display:inline-block;
    position:relative;
    top:-0.14em;
    left:10px; color:#fff;
}
.area-intro #console-container2 {
    max-width:60%;
    margin:0 auto; margin-top:20px;
}
.area-intro #console-container2 #text {
    word-break: keep-all;
    margin-right:-10px;
    font-size:20px; line-height:32px; font-weight:500; font-family: "scoreDream";
}

.area-intro .box {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    position: absolute; bottom: 0; left: 0;
    overflow: hidden;
    transform: rotate(180deg);
}

.area-intro .wave {
    opacity: .4;
    position: absolute;
    top: 3%;
    left: 50%;
    background: #0af;
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    transform-origin: 50% 48%;
    border-radius: 43%;
    animation: drift 3000ms infinite linear;
}

.area-intro .wave.-three {
    animation: drift 5000ms infinite linear;
}

.area-intro .wave.-two {
    animation: drift 7000ms infinite linear;
    opacity: .1;
    background: yellow;
}

.area-intro .box:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

.area-intro .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    line-height: 300px;
    text-align: center;
    transform: translate3d(0, 0, 0);
    color: white;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    letter-spacing: .4em;
    font-size: 24px;
    text-shadow: 0 1px 0 rgba(black, .1);
    text-indent: .3em;
}
@keyframes drift {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

.area-intro2 {
    width: 100%; height:100%;
    position:fixed; top:0; left:0; z-index:100;
    min-height: 100vh;
    background-color:#fff;
    overflow: hidden;
}

.area-intro2 .deco {
    position: absolute; bottom:-300px; left:10px;
}
.area-intro2 .deco.top {
    position: absolute; bottom:auto; top:-300px; left:10px;
}

.area-intro2 .hidden {
    opacity:0;
}
.area-intro2 .consoles {
    display:block; width: 100%;
    position:absolute;
    color:white;
    top:45%; left:51%;
    transform:translate(-50%, -50%);
    margin:auto;
    text-align:center;
    transition: opacity .3s, top .3s;
}
.area-intro2 .base {
    width: 100%; height: 100%;
    position:absolute; top:0; left:0; z-index:1;
    background-color:rgba(255,255,255);
    opacity:0;
    transition: .6s;
}
.area-intro2 .base.active {
    opacity:1;
}
.area-intro2 .console-container #text {

}
.area-intro2 .console-container #text span {
    display: inline-block;
    font-size:60px; font-weight:bold; font-family: "scoreDream"; letter-spacing: 6px;
    color:black;
}
.area-intro2 .console-container #text span.point {
    color:#0057ff;
}
.area-intro2 #console-container1 #text span:nth-child(3) {
    transition: all .5s ease-in-out;
}
.area-intro2 #console-container1 #text span:nth-child(3).active {
    font-weight:800;
    transform:scale(6);
}
.area-intro2 .console-underscore {
    display:inline-block;
    position:relative;
    top:-0.14em; font-size:28px;
    left:10px; color:#0057ff;
}
.area-intro2 #console-container2 {
    max-width:80%;
    margin:0 auto; margin-top:20px;
}
.area-intro2 #console-container2 #text {

}
.area-intro2 #console-container2 #text span{
    display: inline-block;
    min-width:10px;
    word-break: keep-all;
    font-size:20px; line-height:32px; font-weight:500; font-family: "scoreDream";
    color:#0057ff;
}

.area-intro2 .box {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    position: absolute; bottom: 0; left: 0;
    overflow: hidden;
    transform: rotate(180deg);
}

.area-intro2 .wave {
    opacity: .4;
    position: absolute;
    top: 3%;
    left: 50%;
    background: #0af;
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    transform-origin: 50% 48%;
    border-radius: 43%;
    animation: drift 3000ms infinite linear;
}

.area-intro2 .wave.-three {
    animation: drift 5000ms infinite linear;
}

.area-intro2 .wave.-two {
    animation: drift 7000ms infinite linear;
    opacity: .1;
    background: yellow;
}

.area-intro2 .box:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

.area-intro2 .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    line-height: 300px;
    text-align: center;
    transform: translate3d(0, 0, 0);
    color: white;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    letter-spacing: .4em;
    font-size: 24px;
    text-shadow: 0 1px 0 rgba(black, .1);
    text-indent: .3em;
}

.area-intro2 .centerLogo {
    opacity:0;
}
.area-intro2 .centerLogo.active {
    animation:fadeLogo 1s forwards;
    position: absolute; top:45%; left:51%;
    transform:translate(-50%, -50%);
}
.area-intro2 .consoles.hide {
    top:50%;
    opacity:0;
}
@keyframes fadeLogo {
    0% {
        top: 50%;
        opacity: 0;
    }

    100% {
        top: 45%;
        opacity: 1;
    }
}