/* main-inner-box */
.main-inner-box {background:#fff; border:1px solid var(--color-gray-300); border-radius:15px; padding:30px 40px;}
.main-inner-box.special {padding:50px 40px 90px; box-shadow:0 3px 20px rgba(40,39,47,0.1); border:1px solid #FDD7DE; background:url('../images/bg_main_inner_special.png') no-repeat right bottom / cover;}

/* main-cate-box */
.main-cate-box ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
.main-cate-box ul li a {display:block; text-align:center; font-size:12px; font-weight:500;}
.main-cate-box ul li a:before {display:block; margin:0 auto 8px; content:""; width:60px; height:60px; background-size:cover; background-position:center;}
.main-cate-box ul li.cate-1 a:before {background-image:url('../images/icon_gnb_cate_01.png');}
.main-cate-box ul li.cate-2 a:before {background-image:url('../images/icon_gnb_cate_02.png');}
.main-cate-box ul li.cate-3 a:before {background-image:url('../images/icon_gnb_cate_03.png');}
.main-cate-box ul li.cate-4 a:before {background-image:url('../images/icon_gnb_cate_04.png');}
.main-cate-box ul li.cate-5 a:before {background-image:url('../images/icon_gnb_cate_05.png');}
.main-cate-box ul li.cate-6 a:before {background-image:url('../images/icon_gnb_cate_06.png');}
.main-cate-box ul li.cate-7 a:before {background-image:url('../images/icon_gnb_cate_07.png');}
.main-cate-box ul li.cate-8 a:before {background-image:url('../images/icon_gnb_cate_08.png');}
.main-cate-box ul li.cate-9 a:before {background-image:url('../images/icon_gnb_cate_09.png');}
.main-cate-box ul li.cate-10 a:before {background-image:url('../images/icon_gnb_cate_10.png');}
.main-cate-box ul li.cate-11 a:before {background-image:url('../images/icon_gnb_cate_11.png');}
.main-cate-box ul li.cate-12 a:before {background-image:url('../images/icon_gnb_cate_12.png');}

/* main-title-box */
.main-title-box {margin:0 0 30px;}
.main-title-box h2 {display:flex; flex-wrap:wrap; align-items:center; font-size:30px; font-weight:bold;}
.main-title-box h2:before {display:inline-block; content:""; width:28px; height:28px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.main-title-box h2.cate-1:before {background-image:url('../images/icon_aside_cate_01.png');}
.main-title-box h2.cate-2:before {background-image:url('../images/icon_aside_cate_02.png');}
.main-title-box h2.cate-3:before {background-image:url('../images/icon_aside_cate_03.png');}
.main-title-box h2.cate-4:before {background-image:url('../images/icon_aside_cate_04.png');}
.main-title-box h2.cate-5:before {display:none;}
.main-title-box h2.cate-5:after {display:inline-block; content:""; width:30px; height:30px; margin:0 0 0 7px; background:url('../images/icon_aside_cate_05_01.png') no-repeat center / cover; position:relative; top:-8px;}
.main-title-box h2.cate-6:before {background-image:url('../images/icon_aside_cate_06.png');}
.main-title-box h2.cate-7:before {background-image:url('../images/icon_aside_cate_07.png');}
.main-title-box p {font-size:16px; font-weight:500; color:var(--color-gray-700); margin:5px 0 0;}

/* main-swiper-box */
.main-swiper-box {position:relative;}
.main-swiper-box > .swiper-container {overflow:hidden;}
.main-swiper-box .swiper-button-prev {left:-20px; width:40px; height:40px; background:url('../images/icon_swiper_prev.png') no-repeat center / cover; box-shadow:0 3px 20px rgba(40,39,47,0.1); border-radius:50%;}
.main-swiper-box .swiper-button-prev:after {display:none;}
.main-swiper-box .swiper-button-next {right:-20px; width:40px; height:40px; background:url('../images/icon_swiper_next.png') no-repeat center / cover; box-shadow:0 3px 20px rgba(40,39,47,0.1); border-radius:50%;}
.main-swiper-box .swiper-button-next:after {display:none;}
.main-swiper-box .swiper-button-prev.thumb {top:33%;}
.main-swiper-box .swiper-button-next.thumb {top:33%;}
.main-swiper-box.swiper-2 {margin:0 -10px -20px;}
.main-swiper-box.swiper-2 > .swiper-container .swiper-slide {display:flex; flex-wrap:wrap;}
.main-swiper-box.swiper-2 > .swiper-container .swiper-slide .item-box {width:calc(33.33% - 20px); margin:0 10px 20px;}
.main-swiper-box.swiper-2 .swiper-button-prev {left:-10px;}
.main-swiper-box.swiper-2 .swiper-button-next {right:-10px;}

/* main-sca-box */
.main-sca-box {margin:0 0 40px;}
.main-sca-box ul {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.main-sca-box ul li {margin:0 5px 10px;}
.main-sca-box ul li a {display:flex; flex-wrap:wrap; align-items:center; border:1px solid var(--color-gray-300); border-radius:50px; padding:7px 15px 7px 7px;}
.main-sca-box ul li a p {font-size:18px; font-weight:500;}
.main-sca-box ul li a img {width:40px; height:40px; border-radius:50%; object-fit:cover; margin:0 8px 0 0;}
.main-sca-box ul li a:hover {border-color:var(--color-active); background:var(--color-active);}
.main-sca-box ul li a:hover p {color:#fff;}
.main-sca-box ul li.active a {border-color:var(--color-active); background:var(--color-active);}
.main-sca-box ul li.active a p {color:#fff;}

/* main-banner-box */
.main-banner-box ul {display:flex; flex-wrap:wrap;}
.main-banner-box ul li {flex:1; min-width:0; margin:0 20px 0 0;}
.main-banner-box ul li:last-of-type {margin:0;}
.main-banner-box ul li a {display:block;}
.main-banner-box ul li a .list-image {position:relative; border-radius:10px; background-size:cover; background-position:center;}
.main-banner-box ul li a .list-image:after {display:block; content:""; padding-bottom:71%;}
.main-banner-box ul li a .list-image .list-image-info {position:absolute; left:10px; top:10px; display:flex; flex-wrap:wrap; margin:0 -2.5px -5px;}
.main-banner-box ul li a .list-image .list-image-info p {margin:0 2.5px 5px; border-radius:5px; background:rgba(255,255,255,0.5); height:24px; padding:0 7px; font-size:12px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-banner-box ul li a .list-content {margin:10px 0 0;}
.main-banner-box ul li a .list-content p {font-size:18px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* main-top-box */
.main-top-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.main-top-box .top-banner {flex:1; min-width:0;}
.main-top-box .top-banner .swiper-slide .inner {display:block; background-size:cover; background-position:center; border-radius:10px;}
.main-top-box .top-banner .swiper-slide .inner:after {display:block; content:""; padding-bottom:42.5%;}
.main-top-box .top-banner .control {position:absolute; left:40px; bottom:30px; display:flex; flex-wrap:wrap; align-items:center; z-index:20;}
.main-top-box .top-banner .control > div {position:static; margin:0; width:auto;}
.main-top-box .top-banner .control > div.swiper-button-prev {width:20px; height:20px; background:url('../images/icon_main_top_prev.png') no-repeat center / cover; margin:0 10px 0 0;}
.main-top-box .top-banner .control > div.swiper-button-next {width:20px; height:20px; background:url('../images/icon_main_top_next.png') no-repeat center / cover; margin:0 0 0 0 10px;}
.main-top-box .top-banner .control > div.swiper-pagination {font-size:13px; font-weight:500; color:#fff;}
.main-top-box .top-banner .control > div.swiper-pagination span {font-size:13px; font-weight:500; color:#fff;}
.main-top-box .top-banner .control > button.swiper-play {margin:0 0 0 6px; width:14px; height:14px; font-size:0; background:url('../images/icon_main_top_pause.png') no-repeat center / cover;}
.main-top-box .top-banner.active .control > button.swiper-play {background-image:url('../images/icon_main_top_play.png');}
.main-top-box .top-right {width:330px; margin:0 0 0 20px;}

/* main-login-box */
.main-login-box { padding:15px; border:1px solid #FFBABA; border-radius:15px; background:linear-gradient(to bottom, #FFE4DF, #FFFFFF); box-shadow:0 3px 20px rgba(40,39,47,0.1);}
.main-login-box h2 {margin:0 0 15px; display:flex; flex-wrap:wrap; align-items:center; font-size:13px; font-weight:500; color:#000}
.main-login-box h2:before {display:inline-block; content:""; width:28px; height:28px; margin:0 5px 0 0; background:url('../images/icon_heart.png') no-repeat center / cover;}
.main-login-box .login-button > * {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; border-radius:5px; background:var(--color-active); color:#fff; font-size:15px; font-weight:600;}
.main-login-box .login-link {margin:10px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.main-login-box .login-link a {font-size:12px; font-weight:500; color:var(--color-gray-700);}
.main-login-box .login-link a:last-of-type {display:flex; flex-wrap:wrap; align-items:center; color:#000; line-height:1.5;}
.main-login-box .login-link a:last-of-type:after {display:inline-block; content:""; width:16px; height:16px; margin:0 0 0 2px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;}
.main-login-box .login-link a:hover {text-decoration:underline;}
.main-login-box .member-top {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 12px;}
.main-login-box .member-top > div {flex:1; min-width:0; padding:0 15px 0 0;}
.main-login-box .member-top > div h2 {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:bold; margin:0;}
.main-login-box .member-top > div h2 a {font-size:0; display:inline-block; content:""; margin:0 0 0 5px; width:14px; height:14px; background:url('../images/icon_member_more.svg') no-repeat center / cover;}
.main-login-box .member-top > div p {margin:5px 0 0; font-size:13px; font-weight:500; color:var(--color-active);}
.main-login-box .member-top .logout {display:flex; flex-wrap:wrap; align-items:center; height:24px; background:#fff; border-radius:5px; padding:0 7px; font-size:10px; font-weight:500; color:var(--color-gray-700);}
.main-login-box .member-top .logout:before {display:inline-block; content:""; width:14px; height:14px; margin:0 2px 0 0; background:url('../images/icon_logout.svg') no-repeat center / cover;}
.main-login-box .member-bottom {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; border-radius:8px; background:linear-gradient(to right, #000000, #403636);}
.main-login-box .member-bottom > * {display:flex; flex-wrap:wrap; align-items:center; font-weight:600; color:#fff;}
.main-login-box .member-bottom > *:after {display:inline-block; content:""; width:1px; height:10px; background:rgba(255,255,255,0.5); margin:0 10px;}
.main-login-box .member-bottom > *:last-of-type:after {display:none;}

/* main-faq-box */
.main-faq-box {background:#fff; border-radius:10px; box-shadow:0 3px 20px rgba(40,39,47,0.1); padding:15px 15px 22px;}
.main-faq-box .faq-main {margin:0 0 15px; display:flex; flex-wrap:wrap; align-items:center; border-radius:5px; background:var(--color-gray-200); padding:0 10px;}
.main-faq-box .faq-main:before {display:inline-block; content:""; width:18px; height:18px; margin:0 5px 0 0; background:url('../images/icon_alert.svg') no-repeat center / cover;}
.main-faq-box .faq-main .swiper {flex:1; min-width:0; height:42px; overflow:hidden;}
.main-faq-box .faq-main .swiper .swiper-container {height:42px;}
.main-faq-box .faq-main .swiper .swiper-slide {height:42px;}
.main-faq-box .faq-main .swiper .swiper-slide a {display:flex; flex-wrap:wrap; align-items:center; height:100%;}
.main-faq-box .faq-main .swiper .swiper-slide a p {flex:1; min-width:0; padding:0 10px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:500; position:relative; top:1px;}
.main-faq-box .faq-main .swiper .swiper-slide a:after {display:block; content:""; width:16px; height:16px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;}
.main-faq-box .faq-main .swiper .swiper-slide a:hover p {text-decoration:underline;}
.main-faq-box .faq-list h2 {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 15px; font-size:14px; font-weight:600; color:var(--color-active);}
.main-faq-box .faq-list h2 a {font-size:12px; font-weight:500; color:var(--color-gray-600);}
.main-faq-box .faq-list ul li {margin:0 0 10px;}
.main-faq-box .faq-list ul li:last-of-type {margin:0;}
.main-faq-box .faq-list ul li a {display:flex; flex-wrap:wrap; align-items:center;}
.main-faq-box .faq-list ul li a p {flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 15px 0 0; font-size:13px; font-weight:500; color:var(--color-gray-700);}
.main-faq-box .faq-list ul li a:after {display:inline-block; content:""; width:14px; height:14px; background:url('../images/icon_main_faq_more.png') no-repeat center / cover;}
.main-faq-box .faq-list ul li a:hover p {color:var(--color-active);}