@charset "utf-8";

/* 첫화면 */
/* .main_page{ background: rgba(189, 162, 193) url(../img/main/main_soul.jpg) no-repeat center / cover;} */
.main_page.first .in{position: relative; display: flex; flex-direction: column; min-height: calc(100vh - var(--headerH) - var(--footerH)); padding-bottom: 3rem; z-index: 2;}

.main_page.first .tit_box{color: #fff; padding-top: 10vh;}
.main_page.first .tit_box .tit{font-size: 3rem;}
.main_page.first .tit_box .txt{font-size: var(--txt); margin-top: 1rem;}

.main_page.first .btm_cont { margin-top: auto; }
.main_page.first .btm_cont .basic_btn{margin-top: 5rem; width: 100%; max-width:100%;}


/* ---------- 메인 ---------- */
.main_page:not(.first) {padding-top: 0; padding-bottom: calc(var(--headerH) + 8rem);}
.main_page div[class$="sect"]{padding-top: 6.5rem;}
.main_page .top_sect{position: relative; height: 38rem; min-height: max-content; padding-top: calc(var(--headerH) +  2rem); padding-bottom: 3rem; overflow: hidden; background: linear-gradient(153deg, rgba(103, 32, 170, 0.60) 21.05%, rgba(233, 3, 144, 0.60) 96.55%); border-radius: 0 0 5rem 5rem;}

/* 상단 */
.main_page .top_sect .cont{display: flex; justify-content: center; } /*width: 115%;*/

.main_page .top_sect .cont .txt_wrap{color: #fff; padding-right: 2rem; z-index: 2;}
.main_page .top_sect .cont .txt_wrap .txt_box .txt{margin-top: 1rem; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; text-overflow: ellipsis;}
.main_page .top_sect .cont .character{position: absolute; flex-shrink: 0; } 
.main_page .top_sect .cont .character > *{width:100%; height: 100%; object-fit: contain;}
/* .main_page .top_sect .character{margin-left: 3rem;} */

/*로그인전*/
.main_page .top_sect .guest_cont .txt_wrap{max-width: 20rem; margin-right: 35%;}
.main_page .top_sect .guest_cont .character.soul{width: 50rem; margin-left: 60%; margin-top: -7%; max-width: 100%;}
.main_page .top_sect .txt_wrap .tit{font-size: var(--tit); font-weight: 700;}
.main_page .top_sect .txt_wrap .btn a{display: block; border: 1px solid #fff; border-radius: 0.7rem; width: 13rem; padding: 1rem 0; text-align: center; margin-top: 2.5rem; transition: background 0.3s ease, color 0.3s ease;}


/* 로그인후*/
.main_page .top_sect .user_cont .txt_wrap{max-width: 20rem; margin-right: 40%;}
.main_page .top_sect .user_cont .character.user{width: 42rem; margin-top: 0; margin-left: 20rem;}
.main_page .top_sect .user_cont .txt_wrap .btn a{background-color: #4D25AF; color: #fff; border:none;}

.main_page .top_sect .txt_wrap .user_box{display: flex; align-items: center; font-size: var(--tit); font-weight: 700; word-break: break-all; line-height: 1.2;} /*flex-wrap: wrap;*/
.main_page .top_sect .txt_wrap .user_box .profile{position: relative; width: 4.8rem; height: 4.8rem; margin-right:1rem; flex-shrink: 0;}
.main_page .top_sect .txt_wrap .user_box .profile .img_box{display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 100%; border-radius: 1.5rem; background: rgba(245, 228, 255, 0.66);; overflow: hidden;}
.main_page .top_sect .txt_wrap .user_box .profile .img_box img{width: 80%;}


/* .main_page .top_sect .txt_wrap .today_box{margin-top: 1.5rem;}
.main_page .top_sect .txt_wrap .today_box .tit{font-weight: 700; font-size: var(--txt); }
.main_page .top_sect .txt_wrap .today_box .list{margin-top: 1rem; font-size: var(--subTxt); width: 18rem;}
.main_page .top_sect .txt_wrap .today_box .list .item{display: inline-flex; width: 100%; background-color: rgba(255, 255, 255, 0.15); border-radius: 0.5rem; padding: 0.6rem 1.5rem;}
.main_page .top_sect .txt_wrap .today_box .list .item + .item{margin-top: 0.5rem;}
.main_page .top_sect .txt_wrap .today_box .list .item .label{display: inline-block; flex-shrink: 0; width: 7.6rem; font-weight: 700; white-space: nowrap;}
.main_page .top_sect .txt_wrap .today_box .list .item .txt{word-break: break-all;} */


/* CTA */
.main_page div[class$="sect"].cta_sect {padding: 3rem 0 5rem;}
.com_nav_list{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
.com_nav_list .nav_item a{display: flex; flex-direction: column; align-items: center; justify-content: center; height: 8rem;}
.com_nav_list .nav_item .ico{position: relative; width: 3.5rem; height: 3.5rem;}
.com_nav_list .nav_item .ico img{display: block; width: 100%; height: 100%; transition: opacity 0.3s ease;}
.com_nav_list .nav_item .ico img.hover{position: absolute; left: 0; top: 0; opacity: 0;}
.com_nav_list .nav_item .label{font-size: var(--subTxt); margin-top: 0.7rem; color: var(--gray); font-weight: 500; transition: 0.3s ease;}

.com_nav_list .nav_item.active .ico img.default {opacity: 0;}
.com_nav_list .nav_item.active .ico img.hover {opacity: 1;}
.com_nav_list .nav_item.active .label{color: var(--primary); font-weight: 700;}

.main_page .cta_sect .cta_banner_slide{position: relative; width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1); margin-top: 2rem;}
.main_page .cta_sect .cta_banner_slide .swiper-container{padding: 0 var(--inPd);}
.main_page .cta_sect .cta_banner_slide .com_banner a .cont .ico.lg{height:4.5rem}
.main_page .cta_sect .cta_banner_slide .paging{ display: flex; justify-content: center; margin-top: 1rem;}


/* 배너 탭 */
.main_page div[class$="sect"].banner_sect {padding-top : 0;}
.main_page .banner_sect .com_tab_wrap .com_tab_box .tab{font-size: var(--subTit);}
.main_page .banner_sect .com_tab_wrap .tab{flex: 1;}
.main_page .banner_sect .slide_cont{margin-top: 2rem;}
.main_page .banner_sect .banner_slide{position: relative; width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1);}
.main_page .banner_sect .banner_slide a{position: relative; padding-top: 71%; display: block; border-radius: 1.5rem; overflow: hidden;}
.main_page .banner_sect .banner_slide a img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; background-color: #f9f9f9;}
/* .main_page .banner_sect .banner_slide a.light:before{content:''; position: absolute; top: 0; left: 0; width: 50%; height: 50%; background: linear-gradient(135deg, rgba(13, 95, 168, 0.5) 0%, rgba(13, 95, 168, 0) 40%); z-index: 2;} */
.main_page .banner_sect .banner_slide .paging { position: absolute; width: auto; top: 1.2rem; bottom: unset; left: 7%; padding: 0.3rem 0.8rem;  border-radius: 10rem;background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.60); font-size: 12px; z-index: 2;}
.main_page .banner_sect .banner_slide .paging .swiper-pagination-current{color: rgba(255, 255, 255, 1);}

.main_page .banner_sect .banner_slide .swiper-container.item_1{padding: 0 var(--inPd);}


/* 추천 운세 */
.main_page .in > .tit{font-size: var(--tit); font-weight: 700; margin-bottom: 2rem;}
.main_page .recom_sect .in > .tit {margin-bottom: 1rem;}

/* 사랑에도 */
.main_page .fortune_sect .slide{position: relative; width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1); margin-top: 2rem;}
.main_page .fortune_sect .slide .swiper-container{padding: 0 var(--inPd);}
.main_page .fortune_sect .slide .item{width: 24rem;}
.main_page .fortune_sect .slide .item .img{position: relative; padding-top: 75%; border-radius: 1rem; overflow: hidden;}
.main_page .fortune_sect .slide .item .img img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; background-color: #f9f9f9;}
.main_page .fortune_sect .slide .item .txt_box{margin-top: 1rem;}
.main_page .fortune_sect .slide .item .txt_box .tit{font-size: var(--subTit); font-weight: 600;}
.main_page .fortune_sect .slide .item .txt_box .txt{font-size: var(--subTxt); margin-top: 0.5rem; color: var(--gray);}


/* 운세에 대한 모든 것 */
.main_page .all_sect .ico_list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.main_page .all_sect .ico_list .item a{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 10rem; padding: 0.5rem;}
.main_page .all_sect .ico_list .item .ico{display: block; width: 4.3rem; height: auto;}
.main_page .all_sect .ico_list .item .ico img{width: 100%; height: 100%;}
.main_page .all_sect .ico_list .item .txt{margin-top: 1rem; font-weight: 500; font-size: var(--subTxt);}

.main_page .in > .tit + .com_tag_board .item:first-child a{padding-top: 1rem;}



/* ---------- 메인 반응형 ---------- */
 
/* 721~ */
@media screen and (min-width: 721px) {
    .main_page.first .tit_box{padding-top: 4rem;}

    .main_page div[class$="sect"]{padding-top: 7.5rem;}
    .main_page .top_sect{height: 32rem; padding-top: calc(var(--headerH) + 1.5rem);}
    .main_page .top_sect .cont {width: 100%;}

    .main_page .top_sect .cont .txt_wrap{max-width: 26rem; padding-right: 3rem;}

    .main_page .top_sect .guest_cont .txt_wrap{max-width: 50%;}
    .main_page .top_sect .guest_cont .character.soul{width: 40rem; margin-left: 45%;}

    .main_page .top_sect .user_cont .txt_wrap{max-width: 50%; margin-right: 30%;}
    .main_page .top_sect .user_cont .character.user{width: 38rem; margin-top: -2rem; margin-left: 25rem;}
    
    .main_page .top_sect .cont .txt_wrap .user_box{font-size: 2.5rem;}
    .main_page .top_sect .txt_wrap .btn a{margin-top: 2rem;}


    .com_nav_list .nav_item a{height: 9rem;}

    .com_nav_list .nav_item .label{font-size: var(--subTxt);}
    .com_nav_list .nav_item.active .ico img.default {opacity: 1;}
    .com_nav_list .nav_item.active .ico img.hover {opacity: 0;}
    .com_nav_list .nav_item.active .label{color: rgba(2, 2, 2, 0.30);; font-weight: 500;}

    .main_page .banner_sect .banner_slide .paging{left: 21%;}

    .main_page .all_sect .ico_list .item .ico{width: 5rem;} 
    .main_page .all_sect .ico_list .item .txt{font-size: var(--subTxt);}

}

/* 1241~ */
@media screen and (min-width: 1241px) {

    .com_nav_list .nav_item:hover .ico img.default {opacity: 0;}
    .com_nav_list .nav_item:hover .ico img.hover {opacity: 1;}
    .com_nav_list .nav_item:hover .label{color: var(--primary); font-weight: 700;}

    .main_page .all_sect .ico_list .item a{height: 12rem; transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;}
    .main_page .all_sect .ico_list .item a:hover{transform: translateY(-1rem); color:var(--primary)}

    
    .main_page .top_sect .cont .txt_wrap .btn a{transition: 0.3s ease;}
    .main_page .top_sect .cont .txt_wrap .btn a:hover{background-color: #fff; color: #1a1a1a;}
    .main_page .top_sect .cont.user_cont .txt_wrap .btn a:hover{background-color: #1a1a1a; color: #fff;}
}











/* ---------- 마이블렌 (베타에선 삭제) ----------*/
.myblend_page .in{position: relative; display: flex; flex-direction: column; height: calc(100vh - var(--headerH) - var(--footerH)); padding-top: 15vh; padding-bottom: 4rem; z-index: 2;}
.myblend_page .character_box {position: relative; display: flex; justify-content: center;}
.myblend_page .character_box > *{max-width: 100%; max-height: 50vh; margin: 0 auto;}

.myblend_page .character_box:before {content: ''; position: absolute; top: calc(100% + 1.5rem); left: 50%; transform: translateX(-50%);  width: 12.5rem; height: 5rem;  border-radius: 50%;
background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 51" fill="none"><g filter="url(%23filter0_f_14_253)"><ellipse cx="62.5" cy="25.5" rx="47.5" ry="10.5" fill="%23A98DD0" fill-opacity="0.4"/></g><defs><filter id="filter0_f_14_253" x="0" y="0" width="125" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_14_253"/></filter></defs></svg>') no-repeat center / cover;}
    /* background: radial-gradient( ellipse at center, rgba(169, 141, 208, 1) 0%,rgba(169, 141, 208, 1) 40%, rgba(169, 141, 208, 1) 100%); */

.main2_page .btm_btn_box{margin-top: auto; display: flex; justify-content: center;}
.main2_page .btm_btn_box .set_btn{position: relative; display: flex; align-items: center; width: max-content; margin-top: 2rem; font-size: 1.5rem; padding: 0 5rem; font-weight: 700; background-color: #000; color: #fff; height: 4.5rem; border-radius: 10rem;}
.main2_page .btm_btn_box .set_btn .txt{padding-right: 0.5rem;}
.main2_page .btm_btn_box .set_btn .ico{position: absolute; right: 1.5rem;}
.main2_page .btm_btn_box .set_btn .ico svg{display: block;}