@charset "utf-8";
/*header*/
#header{position: fixed;height:50px; /*height:130px;*/  background: #1B151A; width:100%; color:#ffffff;top:0;z-index: 100;}
.header_wrap{width: 100%;max-width: 1200px;margin: 0 auto; line-height:50px;}

.logo {position: relative;display: inline-block; width: 114px; height: 20px; font-size: 1.5rem; vertical-align: text-bottom;}
.logo img {position: absolute; top: 0;left: 0;width: 100%; height: 100%;transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */}
.logo .lo1 {opacity: 0; z-index: 1; }
.logo .lo2 {opacity: 1; z-index: 0; }
.logo:hover .lo1 {opacity: 1; }
.logo:hover .lo2 {opacity: 0;}

.logo2{display:flex; align-items:center; height:100%; gap:8px;}
.logo2 img{height:20px; width:100%;}

nav{position: absolute; left:152px;}
.nav_menu{display: flex;}
.nav_menu li{margin-right:38px;}
.nav_menu li:last-child{margin-right:0 !important;}
.nav_menu li a{font-size: 16px; font-weight: 600; display: block; height:94%;}
.nav_menu li a:hover{/*border-bottom:3px solid #FFEA00;*/ color:#FFEA00; box-shadow: inset 0px -3px #FFEA00;}
.nav_menu li a.active{/*border-bottom:3px solid #FFEA00;*/ color:#FFEA00; box-shadow: inset 0px -3px #FFEA00;}
.share_logjoin_area{display: flex; align-items: center;}
.share_logjoin_area li{ font-size: 14px; margin-right:16px;}
.share_logjoin_area li a{color:#fff;}
/*.share_logjoin_area li:first-child, .share_logjoin_area li:last-child{margin-right:0;}*/
.share_logjoin_area li:last-child{margin-right:0;}
.menu_ico{height:20px; margin-top:-15px;}
.mr_33 li{margin-right:25.9px !important;}
/*하단 메뉴 영역 추가*/
.bt_menu_area{width:100%; max-width:1200px; margin:0 auto; position: relative; display: flex; justify-content: center; line-height:50px;  background: #1B151A;}
.bt_menu_wrap{width:100%; background: #1B151A; }
.bt_line{border-top:1px solid #333;width:100%;}
.bt_menu_area nav{left:unset; position: relative;}
.bt_menu_area nav .nav_menu li{margin-right:26.5px;}
.bt_menu_area nav .nav_menu li a{height:100%; line-height: 50px; display:flex; align-items: center; font-weight:500; color:#fff; white-space: nowrap;}
.menu_line{position: relative;}
.menu_line::after{display: inline-block; content: ""; height:13px; width:1px; background-color: #ccc; position: absolute; top:50%; transform: translateY(-50%); right:-36%; box-sizing: border-box;}
.no_active{color:#fff !important; box-shadow:unset !important;font-weight:100 !important;}

.share_btn{width:89px; height:27px; background: #FFEA00; color:#1B151A; line-height: 27px; border-radius: 100px; display: flex; justify-content: center; align-items: center; padding:9px 6px; letter-spacing: -0.3px; position: relative;}
/*.share_btn:hover{background: #FFEA00; color:#1B151A;}
.share_btn.active{background: #FFEA00; color:#1B151A;}*/
.share_btn img{margin-right:7px;}

.share_area{position: absolute; top:68px; display: none;}
.share_area .share_dropdown{width:97px;  background: #FFFFFF; }
.share_area .share_dropdown li{height:37px; line-height:37px;text-align: center;  color:#999999;}
.share_area .share_dropdown li a{display: block;}
.share_area .share_dropdown li a:hover{background: #F7F7F7; color:#000000; font-weight: 600;}
.share_area .share_dropdown li a.active{background: #F7F7F7; color:#000000; font-weight: 600;}
.wrap{position:relative;}
/*main*/
.container{margin:0 auto;}
.content_wrap{width: 100%;max-width: 1200px;margin: 0 auto;}
.main_cont{/*width:100%; max-height:661px;*/ width:100vw; height:659px;  position:absolute; top:100px; /*top:65px;*/ left:0; z-index:-999;}

.main_tit{color:#ffffff; font-size:20px; }
.top_txt{font-size:20px;  font-family: 'SBAggroL'; color:#ffffff; opacity: 0.8;}
.main_tit .sub_tit{margin-bottom:46px;}
.tit_info{margin-bottom:19px; font-family: "Pretendard-Regular"; font-size: 20px; color:#ffffff; }
.main_tit h1{/*font-size: 100px; font-family: 'SBAggroM'; font-weight: 500;*/} 
.back_square{background: url(../images/main/back_square.svg) no-repeat; background-size: contain; width:445px; height:175px;}
.hageul{background: url(../images/main/hangeul.svg) no-repeat; background-size: cover; /*width:100%; */height:100%;}
.hageul::after{}
.hageul:hover{}

/* 메인 타이틀 영역 */
.clouds {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.clouds .book{position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:1; 
    top: 41%; 
    left: 51%;
    transform: translate(-52%, -49%); 
    width: 24%;
    height: 72%;
    background-image: url("../images/main/book.png");
}
/* 공통 구름 스타일 */
.clouds .cloud1,
.clouds .cloud2,
.clouds .cloud3,
.clouds .cloud4,
.clouds .cloud5,
.clouds .cloud6,
.clouds .cloud7 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: -9; /* 텍스트 뒤 */
}

/* 각 구름 위치 및 애니메이션 */

/* 구름 1 */
.clouds .cloud1 {
    top: 20%; /* 구름 위치 */
    left: 50%; /* 초기 위치 */
    width: 66px;
    height: 33px;
    background-image: url("../images/main/cloud_1.svg");
    animation: moveCloud1 12s linear infinite;
}

/* 구름 2 */
.clouds .cloud2 {
    top: 16%;
    left: 50%;
    width: 96px;
    height: 43px;
    background-image: url("../images/main/cloud_2.svg");
    animation: moveCloud2 15s linear infinite;
}

/* 구름 3 */
.clouds .cloud3 {
    top: 183px;
    right: 50%;
    width: 180px;
    height: 90px;
    background-image: url("../images/main/cloud_3.svg");
    animation: moveCloud3 10s linear infinite;
}

/* 구름 5 */
.clouds .cloud5 {
    top: 128px;
    right: 50%;
    width: 185px;
    height: 82px;
    background-image: url("../images/main/cloud_5.svg");
    animation: moveCloud5 15s linear infinite;
}

/* 구름 6 */
.clouds .cloud6 {
    top: 325px;
    right: 50%;
    width: 126px;
    height: 61px;
    background-image: url("../images/main/cloud_6.svg");
    animation: moveCloud6 22s linear infinite;
}

/* 구름 7 */
.clouds .cloud7 {
    top: 306px;
    left: 50%;
    width: 96px;
    height: 48px;
    background-image: url("../images/main/cloud_7.svg");
    animation: moveCloud7 28s linear infinite;
}

/* Keyframes for Each Cloud */
@keyframes moveCloud1 {
    0% {
        left: 50%;
    }
    100% {
        left: 100%;
    }
}

@keyframes moveCloud2 {
    0% {
        left: 100%;
    }
    100% {
        left: -200px;
    }
}

@keyframes moveCloud3 {
    0% {
        right: 50%;
    }
    100% {
        right: 100%;
    }
}



@keyframes moveCloud5 {
    0% {
        right: 50%;
    }
    100% {
        right: -100%;
    }
}

@keyframes moveCloud6 {
    0% {
        right: 70%;
    }
    100% {
        right: -250px;
    }
}

@keyframes moveCloud7 {
    0% {
        left: 50%;
    }
    100% {
        left: 120%;
    }
}

/*사주 인트로 카드 링크 영역*/
.saju_intro{width:100%; display: flex; justify-content: center; height:100%; /*max-height: 243px;*/margin-bottom:65px; gap:27px;max-width:1200px; margin:0 auto; justify-content: space-between;}
.saju_intro .intro_card{max-width: 376.8px; width:100%; height:180px; color:#ffffff; border-radius: 10px; margin-right:20px; position: relative;display: block;overflow: hidden;transition: all 0.3s ease; }
.intro_height{max-height:180px !important; height:100% !important;}
.intro_card .hageul {position: relative;z-index: 2;}
.plus_btn{/*position: absolute; right:18px;*/}
.intro_card .hageul_2 {position: relative;z-index: 5;}
.intro_card::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; z-index: 1; }
.intro_card:hover::after {opacity: 1;}

.saju_intro .intro_card:last-child{margin-right: 0;}
.saju_intro .intro_card h1{font-size: 28px; font-weight: 600; margin-bottom:16px;}
.saju_intro .intro_card p{font-size: 20px; white-space: pre-line; letter-spacing: -1.3px; font-weight: 200; line-height: 28px;}
.color1{background-color: #DB4463 !important;}
.color2{background-color: #1565C0;}
.color3{background-color: #673AB7;}
.color4{background-color: #008751;}
.m_show{display:none !important;}
.hageul_ico1::before{content: ''; display: inline-block; width:24px; height:26px; background: url(../images/main/hageul_ico1.svg) no-repeat; background-size: contain; margin-right:10px;}
.hageul_ico2::before{content: ''; display: inline-block; width:26px; height:22px; background: url(../images/main/hageul_ico2.svg) no-repeat; background-size: contain; margin-right:10px;}
.hageul_ico3::before{content: ''; display: inline-block; width:20px; height:26px; background: url(../images/main/hageul_ico3.svg) no-repeat; background-size: contain; margin-right:10px;}
.hageul_ico4::before{content: ''; display: inline-block; width:27px; height:27px; background: url(../images/main/face.svg) no-repeat; background-size: contain; margin-right:10px;}

.hageul_2{background: url(../images/main/hageul_2.png) no-repeat; background-size: cover; width:100%; height:100%;}

.shine_text {
font-size: 23px;
font-weight: bold;
color: transparent;          
background: linear-gradient(
    135deg,
    #fff 0%,   
    #fff 35%,  
    #555 50%,  
    #fff 65%, 
    #fff 100% 
);
background-size: 280% 100%;
background-clip: text;
-webkit-background-clip: text;
animation: shine 3.2s ease-in-out infinite;
}

@keyframes shine {
0%   { background-position: 100% 0; }
60%  { background-position: -200% 0; }
100% { background-position: -200% 0; }
}

.sub_btn{width:387px; height:47px; line-height:47px; font-size: 20px; font-weight: 600; font-family: "Pretendard-Bold";  color:#ffffff; border-radius: 10px; margin-top:16px;}
.sub_btn_back1{background: #8E0925;}
.sub_btn_back2{background: #00397B;}
.sub_btn_back3{background: #300976;}
.sub_btn_back2, .sub_btn_back3 .down_btn{padding-left:8px;}

.sub_btn_back1:hover{background-color: #DB4463;}
.sub_btn_back2:hover{background-color: #1565C0;}
.sub_btn_back3:hover{background-color: #673AB7;}

/*오늘의 운세 구독 서비스 메인 배너 영역*/
.main_intro{width:100%; height:170px; border-radius: 10px;}
.fortune_banner{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;position: relative;}
.banner_back{background: url(../images/main/main_banner.png) no-repeat; background-size: cover; width:100%; height:100%; }
.banner_back2{background: url(../images/main/main_banner2.svg) no-repeat; background-size: cover; width:100%; height:100%;}
.banner_txt{}
.banner_smtit{ font-size: 14px; color:#ffffff;margin-bottom:16px; font-weight:200;}
.banner_sm{}
.banner_sm li{display: inline-block; margin-right:12px; font-size: 14px;}
.banner_sm li span{width:3px; height:3px; background:#D9D9D9 ; display: block;}

.banner_tit{font-family: "Pretendard-Bold"; font-size: 36px; color:#59EBFF;}
.banner_tit span{color:#FFBEEB;}
.banner_btn{max-width: 160px; width:100%; height:35px; line-height:35px; font-size:15px;color:#000; border-radius: 50px;  display: flex; align-items: center; justify-content: center; position: absolute; right:60px; top:50%; transform: translateY(-50%);font-family: "Pretendard-SemiBold"; background-color: #ffcc00;
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.7); transform-origin: center center; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.banner_btn:hover{   box-shadow: 0 0 40px rgba(255, 204, 0, 0.9);
  transform: translateY(-50%) scale(1.05);
}
.banner_btn img{margin-left:9px;}
/*.banner_tit .banner_smtit{font-size: 24px; color:#083A71; font-weight: 700; margin-bottom:10px; line-height: 24px;}
.banner_tit h1{font-size: 46px; color:#083A71; font-weight: 700;}
.banner_descript{}
.banner_descript li{color:#083A71; margin-bottom:13px; font-weight: 500;}
.banner_descript li::before{content: ""; display: inline-block; width:4px; height:4px; border-radius: 50px; background: #083A71; margin-right:12px; vertical-align: middle;}*/
.amulet{height:223px;}
/*메인 배너 슬라이더 영역*/
.main_banner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    /*margin-bottom:97px;*/
  }

.main_banner_slide{
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*.main_banner_slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }*/


/*운세 카테고리 영역*/
.saju_category{width:100%; max-width:1200px; margin:0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.saju_category li{ width:31.4%; display: inline-block; margin-right:27px; margin-bottom:33px; max-width: 382px;box-sizing: border-box; background: #ffffff;}
.saju_category li:nth-child(3),.saju_category li:nth-child(6),.saju_category li:nth-child(9){margin-right:0;}
.category_card{position: relative;width: 100%;height: 110px;display: flex;align-items: center;justify-content: flex-start;border: 1px solid #DDDDDD; box-sizing: border-box;padding-left: 30px; border-radius: 10px;}
.category_card:hover{border: 1px solid transparent; outline: 2px solid #274D85;}
.category_card:last-child{margin-right: 0;}
.category_card .ca_img{display: flex; flex-direction: column; margin-right:26px;}
.category_card .ca_img img{}
.category_card .ca_txt{}
.category_card .ca_txt h1{font-weight:600; font-size: 18px; color:#111111; margin-bottom:8px;}
.category_card .ca_txt p{color:#333333; font-size: 14px; letter-spacing: -1.0px;}

/*카테고리 영역 */
.bd_card{display: flex !important; flex-direction: column !important; align-items: baseline !important; padding:10px 30px !important; height:100% !important;}
.bd_card [id^="popular-"] .most_popular .tab-wrap .tit .more {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    color:#999999;
  }
  .bd_card [id^="popular-"] .most_popular .tab-container .cell{margin-bottom:10px;}
  .bd_card [id^="popular-"] .most_popular .tab-container .cell:last-child{margin-bottom:20px;}
  .bd_card [id^="popular-"] .most_popular .tab-container .cell a {
    font-size:14px;
    display:inline-block;
    max-width:300px !important; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bd_card [id^="popular-"] .most_popular .tab-container .cell a .AB-LF-common{color:#333333;}
  .bd_card [id^="popular-"] .most_popular .tab-container .cell a em{color:#FF4949; font-weight:600; font-size: 13px; letter-spacing: -1px; margin-right:5px;}
  .bd_card [id^="popular-"] .most_popular .tab-container .cell a:hover{text-decoration: underline;}
  /*footer*/
footer{width:100%; margin:0 auto; text-align: center; bottom:0;}
.ft_txt{white-space: pre-line; line-height: 20px; color:#999999; padding-bottom:80px;}
footer .copy{height:136px;  background: #383840; color:#999999; display: flex; justify-content: center; align-items: center;}
footer .copy p{line-height: 23px;}


.section_cont{width:100%;  margin-top:65px;padding-top:84px;}
/*서브페이지*/
.sub_main_cont{width:100%; /*max-height:560px;*/ height:560px; /*margin-top:65px;padding-top:84px;*/ position:absolute; top:0; left:0; z-index:-999;}
.sub_main_tit{}
.sub_main_tit h1{font-size: 100px; color:#ffffff;font-family: 'SBAggroM';margin-bottom:8px;}



/*.gradient3{background: linear-gradient(180deg, #DB4463 0, #C76B6C 107%) ;}
.gradient8{background: linear-gradient(180deg, #D6A243 0, #ED6A5E 107%) ;}*/

.gra_back1{background: linear-gradient(180deg, #00162A 0, #274D85 107%) ;}
.gra_back2{background: linear-gradient(180deg, #00162A 0, #274D85 107%) ;}

.back_layer{background: url(../images/main/back_layer.png) no-repeat center center; background-size: cover;position: absolute; top:-1px; /*top:25px; width:100%; height:97%;*/width:-webkit-fill-available; height:114%;/*height:inherit; /*height:-webkit-fill-available;*/}
.gradient5{background: linear-gradient(180deg, #673AB7 0, #8878A9 107%) ;}
.back_layer2{background: url(../images/main/make_ticket_destiny.png) no-repeat center center; background-size: cover;position: absolute; top:-10px; width:100vw; height:-webkit-fill-available; }

.gradient1{background: url(../images/main/taste_saju_non-member.svg) no-repeat center center; background-size: cover; position: absolute; top:65px;}

.gradient3{background: url(../images/main/todays_horoscope.svg) no-repeat center center; background-size: cover; position: absolute; top:65px;} 
.gradient2{background: url(../images/main/compatibility.svg) no-repeat center center; background-size: cover; position: absolute; top:65px;}
.gradient4{background: url(../images/main/authentic_fortune_back.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient6{background: url(../images/main/subscription_service.svg) no-repeat center center; background-size: cover;position: absolute; top:37px;}
.gradient7{background: url(../images/main/explanation_information.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient8{background: url(../images/main/tojeongbigyeol.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient9{background: url(../images/main/number_fortune.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient10{background: url(../images/main/select_date.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient11{background: url(../images/main/naming.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient12{background: url(../images/main/dream_interpretation.svg) no-repeat center center; background-size: cover;position: absolute; top:65px;}
.gradient13{background: url(../images/main/spouse.svg) no-repeat center center; background-size: cover; position: absolute; top:65px;}


.back_color0{background: #000;}
.back_color1{background:#1565C0 !important;}
.back_color2{background:#0B3A70 !important;}
.back_color3{background:#673ab7 !important;}
.back_color4{background:#371574 !important;}
.back_color5{background:#005F5A !important;}
.back_color6{background:#09A889 !important;}
.back_color7{background:#ffffff !important; border:1px solid #09A889 !important; color:#09A889 !important;}
.back_color8{background: #071A62;}
.back_color9{background: #FCECED;}
.back_color10{background: #ffffff !important;}
.back_color11{background: #D1F5D8 !important;}
.back_color12{background: #FFDADB !important;}
.back_color13{background: #D9EFFE !important;}
.back_color14{background: #DB4463;}
.back_color15{background: #4a2a82 !important;}
.back_color16{background: #073f80 !important;}
.back_color17{  background: linear-gradient(93deg, #6A38FF 0%, #39CAFF 107%); background-size: 380% 100%;animation: smooth-gradient 9s infinite ease-in-out;}
.back_color18{background:#FF4262 !important;}
.back_color19{background:#c5374f !important;}
.back_color20{background:#005F5A  !important;}
.glow {background: linear-gradient(93deg, #6A38FF 10%, #39CAFF 107%);background-size: 300% 100%;border-radius: 12px;border: none;color: white;font-weight: bold;text-align: center;animation: background-glow 8s ease-in-out infinite, glow-box 1.5s infinite alternate;cursor: pointer;overflow: hidden;display: inline-block;}
.fix_maxwidth971{max-width: 971px !important; padding:2px; }
.fix_maxwidth971 .txt_edit{width:100% !important;}
/*.glow::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.5);transform: skewX(-45deg);animation: light-sweep 3.5s linear infinite;z-index: 1;}*/
@keyframes background-glow {
    0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%; 
  }
}

/*@keyframes glow-box {
    0% {
        box-shadow: 0 0 15px #6666ff, 0 0 25px #6666ff, 0 0 35px #6666ff;
    }
    100% {
        box-shadow: 0 0 20px #0099ff, 0 0 30px #0099ff, 0 0 40px #0099ff;
    }
}

@keyframes light-sweep {
    0% {
        left: -100%;
    }
    50% {
        left: 50%;
    }
    100% {
        left: 200%;
    }
}*/
/*.hide_btn{width:98.5% !important;}
.hide_btn .btn_width{width:98.5% !important;}*/
.glow_width{height: 61px; max-width:260px; padding:2px;}
.glow_width1{max-width:380px; height:60px; padding:2px;}
.glow_width2{max-width:481.5px; height:59px;}
.glow_width3{max-width:971px !important; /*height:61px !important;*/}
.btn_width{width:473.5px !important;}
.glow_width,.glow_width1 button{width:100%;}
span.glow_bg2{width:500px !important; height:500px !important;}
span.glow_bg3{width:800px !important; height:800px !important;}

.glow_ani {
    width:100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.hide_btn{ padding:2px;}
.hide_btn .btn_width{height:inherit !important; width:100% !important;}
button.glow {
    color: #fff;
    z-index: 2; 
    cursor: pointer;
    transition: 0.3s; 
}

button.glow:hover {
    font-size: 1.3rem;  
}

span.glow_bg4 {
    width: 100vw;
    height: 490px;
    background-image: linear-gradient(
    45deg,
    #682a92,      
    #682a92,      
    #682a92,     
    #682a92,     
    #682a92      
);
    position: absolute;
    animation: none;
    z-index: 1;
    border-radius: 50%;
}

@keyframes circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* 배경이 한 바퀴 회전 */
    }
}

span.glow_bg {
    width: 320px;
    height: 320px;
    background-image: linear-gradient(
    45deg,
    
    #ff00dd,
    #ae00ff,       
    #00ccff,     
    #00bfff
);
    position: absolute;
    animation: circle 4s infinite linear;
    z-index: 1;
    border-radius: 50%;
}

@keyframes circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* 배경이 한 바퀴 회전 */
    }
}
span.glow_bg6 {
    width: 320px;
    height: 320px;
    background-image: linear-gradient(
    45deg,
    
    #ff0000,
    #ffffff,       
    #ff0000,     
    #ffffff
);
    position: absolute;
    animation: circle1 4s infinite linear;
    z-index: 1;
    border-radius: 50%;
}

@keyframes circle1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* 배경이 한 바퀴 회전 */
    }
}
span.glow_bg9 {
    width: 320px;
    height: 320px;
    background-image: linear-gradient(
    45deg,
    
    #a40055,
    #c500ff,       
    #a40055,     
    #c500ff
);
    position: absolute;
    animation: circle1 4s infinite linear;
    z-index: 1;
    border-radius: 50%;
}

@keyframes circle1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* 배경이 한 바퀴 회전 */
    }
}
.glow_bg7{width:800px !important; height:800px !important;}

.glow_bg5 {
    display: inline-block;
    background-image: linear-gradient(
        45deg,
        #ff00dd,
        #ae00ff,
        #6f00ff,
        #0051ff
    );
    background-size: 400% 400%; /* 배경 크기를 크게 설정 */
    animation: gra5 4s infinite linear; /* 자연스러운 흐름 */
}

@keyframes gra5 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.glow_bg8 {
    display: inline-block;
    background-image: linear-gradient(
        176deg,
        #ff0000,
        #ffffff,       
        #ff0000,     
        #ffffff
    );
    background-size: 400% 400%; /* 배경 크기를 크게 설정 */
    animation: gra8 4s infinite linear; /* 자연스러운 흐름 */
}

@keyframes gra8 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.glow2 {background-size: 300% 100%;border-radius: 12px;border: none;color: white;font-weight: bold;text-align: center;animation: background-glow2 9s ease-in-out infinite, glow-box2 1.5s infinite alternate;cursor: pointer;overflow: hidden;display: inline-block;}
.glow2::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.5);transform: skewX(-45deg);animation: light-sweep 3s linear infinite;z-index: 1;}
@keyframes background-glow2 {
    0% {
    background-position: 0% 50%;
  } 
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%; 
  }
}
.border_radi0{border-radius: 0 !important;}
.border_radi5{border-radius: 5px !important;}
.title_area{ top:16%; left:50%; transform: translate(-50%); z-index: 5;}
.title_area img{width:100%; height:auto;}

.back_none{background: none !important;}
.back_color18{background:#7122FF;}
.font_color1{color: #09A889 !important;}
.font_color2{color:#344178 !important;}
.font_color3{color:#537BB2 !important;}
.font_color4{color:#474342 !important;}
.font_color5{color:#fff100;}
.font_color6{color:#ffffff;}
.font_color7{color:#333333;}
.font_color8{color:#673AB7;}
/*다크모드*/
.font_color9{color:#97979797 !important;}
.font_color10{color:#ccc !important;}
.font_color20{color:#fff !important;}
.place_txt::placeholder{color:#97979797;}
.place_txt:focus{background: #242424 !important;}
/* Chrome, Safari 자동완성 배경색 제거 */
.place_txt:-webkit-autofill {
    background-color: #222 !important; /* 기존 색 유지 */
    color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #222 inset !important; /* 내부 배경색 덮어쓰기 */
    box-shadow: 0 0 0px 1000px #222 inset !important;
}

/* 자동완성 드롭다운 리스트 스타일 변경 */
.place_txt::autocomplete,
.place_txt:-webkit-autofill:hover,
.place_txt:-webkit-autofill:focus {
    background-color: #242424 !important; /* 배경색 유지 */
    color: #ccc !important;
}

/* 자동완성 텍스트 색상 변경 */
.place_txt:-webkit-autofill {
    -webkit-text-fill-color:  #ccc !important;
}


.back_19{background: #242424 !important;}
.border_color1{border: 1px solid #3b3b3b !important;}
.border_tb{border-top:1px solid #3b3b3b !important; border-bottom:1px solid #3b3b3b !important; }
/**/


.border_lr0{border-left:none !important; border-right:none !important;}
.border_r0{border-right:none !important;}

.border_font_color{border:1px solid #537BB2; color:#537BB2;}

.txt_striket{text-decoration: line-through;}
.opa_8{opacity: 0.8;}
.terms_btn{text-decoration: underline; color:#999999; font-size:0.9rem; display: inline-block; }
.right_area{width:100%; max-width:1200px; margin: 0 auto; text-align: right;}
/*오늘의 운세*/
.sub_intro{width:100%; padding-top:84px; padding-bottom:90px;  display: flex; justify-content: center; align-items: center; flex-direction: column;background: #FFFFFF; border-radius: 10px;box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.05),0 0 60px 20px rgba(51, 51, 51, 0.02);border: 1px solid rgba(102, 102, 102, 0.1);}  
.sub_bo_none{box-shadow:unset !important; border:unset !important; }
.sub_intro .sub_cont_tit{font-family: 'Batang_Bold'; font-size: 26px; color:#333333; white-space: pre-line; text-align: center; line-height: 40px;}
.sub_intro .sub_cont_tit strong{font-weight: 600;}
.font_28{font-size:28px !important;}
.font_20_gray{font-size:20px !important; color:#666666 !important; line-height: 32px !important;}
.sub_tit{font-family: "Pretendard-Regular"; font-size:20px; color:#D6A243; white-space: pre-line;}
.sub_cont{font-family: "Pretendard-Regular"; font-size:20px; color:#666666; white-space: pre-line; text-align: center; line-height: 32px;}
.sub_cont_tit_2{font-family: "NotoSansKR-Regular"; font-weight:400; font-size: 26px; line-height: 60px; color:#000; white-space: pre-line;text-align: center;}
.sub_cont_tit_2 strong{font-weight: 600;}
/*커스텀 셀렉트박스*/
/* 기본 아이콘 추가 (드롭다운 화살표) */
.basic_select_area {width: 190px;/*max-width: 200px;*/height: 47px;position: relative;display: flex;align-items: center;border: 1px solid #E3E7EF;background: #fff;font-size: 14px;cursor: pointer; box-sizing: border-box;}
.basic_selelct {width: 100%;height: 100%;font-size: 14px;color: #333;border: none;background: transparent;appearance: none; -moz-appearance: none;-webkit-appearance: none;outline: none;padding-left: 20px;position: relative; z-index: 1; margin:0; padding-right:0;padding-top:0;padding-bottom:0; height:47px;}
.select_icon_area {width: 34px;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 1px solid #E3E7EF;pointer-events: none; position:absolute;right:0; z-index:1;}
.select_icon {pointer-events: none; width: 16px; height: 16px;}
.basic_selelct optgroup {font-weight: bold;font-size: 14px; margin:0; padding:0 !important; border:0;}
.basic_selelct option {font-size: 14px; margin:0; border:none; padding:0; border:0;}
.select_icon::before{content:'';width:1px; height:47px; background:#E3E7EF; display:inline-block;}
.basic_selelct:focus {outline: none;/*border-color: #007BFF;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);*/}
.basic_selelct optgroup {font-weight: bold;font-size: 14px;}
.basic_selelct option {font-size: 14px;position: static; z-index: auto;}
.per_label{font-size:22px; color:#111111; font-family: "Pretendard-Regular"; width:174px; letter-spacing:0.7px; margin-bottom:0 !important;}
.basic_input{height:47px; line-height:47px; width:calc(100% - 10px); font-size:15px; color:#111111; border:#E3E7EF 1px solid; padding-left:20px; outline:none;box-sizing: border-box;}
.btn_area{text-align: center; width:100%;}

.basic_btn{width:590px; height:60px; line-height:60px; font-size:24px; font-family: "Pretendard-Regular"; color:#FFFFFF;background:#0077E7; border-radius:5px; position: relative; z-index: 1;overflow: hidden;}
.basic_btn span{position: relative; z-index: 5; }
/*정통사주 맛보기*/
.saju_taste_category{}
.saju_taste_category .cate_tit{width:100%; height:67px; line-height:67px; font-size:28px;font-family: "Pretendard-SemiBold"; color:#FFFFFF; background:#DB4463; text-align:center; border-top-left-radius:5px; border-top-right-radius:5px;}
.saju_taste_category .cate_cont{width:100%; height:100px; line-height:100px; text-align:center; background:#F7F7F7; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.saju_taste_category .cate_cont1{width:100%;  text-align:center; background:#F7F7F7; border-bottom-left-radius:5px; border-bottom-right-radius:5px; padding:35px 0;}
.line_2{text-align:left; display:flex; align-items:center; justify-content: center; font-family: "Pretendard-Regular"; color:#666666;}
.line_2, .line_3 p{line-height: 32px; font-family: "Pretendard-Regular"; color:#666666;}
.line_3{text-align:left; display:flex; align-items:baseline; justify-content: center; font-family: "Pretendard-Regular";}

.cate_cont .cate_list{}
.cate_cont .cate_list li{display:inline-block; font-family: "Pretendard-Regular"; font-size:14px; color:#666666; margin-right:48px;}
.cate_cont .cate_list li:last-child{margin-right:0;}
.line2_area{margin-right:48px;}
.line2_area p{line-height: 32px;}
.line2_area:last-child{margin-right:0;}
.personal_form_area{height:271px;}
.birth_info_tit{font-family: "Pretendard-SemiBold"; color:#111111; text-align: center;}
.birth_info_tit p{font-size:23px;}
/*구독서비스*/
.service_cont{display:flex; gap:30px; max-width:1200px; width:100%; margin:0 auto; justify-content: center;}
.service_cont .service1{/*background:url('../images/main/service_1.svg') no-repeat;*/ height:auto; padding:40px 43px; background-size: contain; border:3px solid #005F5A; border-radius: 10px; position : relative; width:33.3333%;}
.service_cont .service2{/*background:url('../images/main/service_2.svg') no-repeat;*/  height:auto; padding:40px 45px; background-size: contain; border: 1px solid #09A889; border-radius: 10px; width:33.3333%;}
.service_cont .service3{/*background:url('../images/main/service_2.svg') no-repeat;*/ height:auto; padding:40px 36px; background-size: contain; border: 1px solid #09A889; border-radius: 10px; }
.pd_20{padding:0 20px;}
.service_intro{width:100%; display:flex; flex-direction: column; align-items: center;}
.best{position: absolute; padding:5px 10px; color:#fff; font-size: 15px; font-weight: 600; text-align: center; display: inline-block; background-color: #005F5A; top:-29px; right:30px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.service_intro .service_tit{font-size:25px; color:#666666; font-family: "Pretendard-Bold";}
.service_intro .service_price{color:#005F5A; font-family: "Pretendard-Regular"; font-size:32px;}
.service_intro .service_price span{ font-family: "Pretendard-Bold";}
.discount{border-top:1px solid #D9D9D9; display:block; width:100%;}
.discount li:first-child{padding-top:28px;}
.discount li{ line-height:32px; font-size:16px; color:#666666; font-family: "Pretendard-Regular"; display: flex;}
.discount li span{color:#111111;}
.btn_height{height:45px !important; display:flex; align-items: center; justify-content: center;}
.payment_cancel{border: 1px solid #E3E7EF;padding:20px 14px;}
.payment_cancel h1{font-size:13px;}
.circle_point{font-size:12px;}
.circle_point::before{content:''; display:inline-block;width:4px; height:4px; background:#999999; margin-right:8px; vertical-align: middle; border-radius: 50px;}
/*구독페이지 샘플 영역*/
.sub_sample_area{padding-top:80px; margin-top:50px; max-width: 914px; width:100%; border-top:1px solid #D9D9D9;}
.sub_txt{font-family: "Batang_Bold"; font-size:28px; color:#000; text-align: center; margin-bottom:80px;}
.sub_sample_box{display: flex; gap:86px; justify-content: center;}
.sub_sample_box img{}
/*풀이 정보*/
.information {width: 100%;height: auto !important;}
.information_slide {text-align: left;font-size: 18px;background: #fff;display: flex;align-items:flex-start;flex-direction: column;height:auto;justify-content: space-between;}
.information_slide{}
.information_slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.information_area{text-align: left; width: 100%;}
.information_area .info_tit{font-size:26px; font-family: 'Batang_Bold';color:#333333;}
.information_area .info_txt{color:#666666; font-size:18px;font-family: "Pretendard-Regular"; white-space: pre-line; line-height: 32px;}
/* Swiper 하단 네비게이션 버튼 스타일 */
.information .swiper-navigation-buttons {display: flex;justify-content: space-between;position: absolute;bottom: 15px; width: 180px; z-index: 50; left:50%; transform: translate(-50%);}
.information .swiper-navigation-buttons .swiper-button-next, .swiper-button-prev {width: 44px !important;height: 44px !important;background-size: 28px 28px !important;border:1px solid #E3E7EF !important;color: #333333 !important;border-radius: 50% !important;cursor: pointer !important;background-color: #fff;}

.information .swiper-button-next::after,
.information .swiper-button-prev::after {font-size: 20px; font-weight:800;color: #333; opacity: 1; width:100%;height:100%;position: absolute;top:50%;left:50%;transform: translate(-13%, -23%);}
.information .swiper-pagination{position: unset;}
.information .swiper-button-next::after,
.information .swiper-button-prev::after {font-size: 20px; font-weight:800;color: #333; opacity: 1; width:100%;height:100%;position: absolute;}
.information .swiper-button-next::after{top:50%;left:50%;transform: translate(-10%, -23%);}
.information .swiper-button-prev::after{top:50%;left:50%;transform: translate(-16%, -23%);}
.information .swiper-pagination{position: unset; z-index: 1;}
.information .swiper-button-next:hover, .swiper-button-prev:hover{background-color: #f0f0f0;}

/*택일 페이지*/
.date_select_area{}
.date_select_box{ padding:32.5px 65.5px; max-width:475px; width:100%; height:123px; font-family: "Pretendard-Regular"; border:1px solid #dddddd;position:relative; }
.date_select_box:hover{ border: 1px solid transparent; outline: 2px solid #274D85;}
.data_select_tit{color:#111111; font-size:24px; }
.date_select_box p{font-size:18px; color:#666666; line-height:24px;}

/*결혼 택일*/
.gray_line{width:100%;height:1px; background: #D9D9D9;margin-top:41px; margin-bottom:30px; }

/*한자 작명*/
.naming_label{font-size:24px; color:#333333;}
.explan_txt{color:#AAAAAA; font-size:15px; }
/*꿈해몽*/
.dream_section {margin-bottom: 20px;width:971px;}
.dream_textarea {width: calc(100% - 56px); height: 180px; padding: 29px 29px; border: 1px solid #333333; font-size: 15px;font-weight: 500;color: #AAAAAA; line-height: 1.5; resize: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); color:#111111;}
.dream_textarea:focus {border-color: #007BFF;outline: none; box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);}


/*앱 메인*/
.app_back {
    height: 100%;
    background: linear-gradient(to bottom, #041c37, #001875);
}

.app_hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.app_hd .flex_col {
    margin-top: 49px;
    position: relative;
    left: 20px;
}

.app_hd .flex_col h2 {
    line-height: 22px;
    color: #AFB9C2;
    font-size: 14px;
    font-weight: 300;
}

.app_hd .flex_col img {
    margin-bottom: 25px;
}

.app_hd .book {
    margin-top: 17px;
    position: relative;
    right: -20px;
    width: 280px;
}

.app_card_intro {
    display: flex;
    flex-direction: column !important;
    gap: 16px;
    margin-bottom: 0;
    position: relative;
    top: -144px;
}

.app_btn {
    width: 160px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    border-radius: 50px;
}

.app_card {
    height: 219px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.app_card .hageul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app_card .hageul .flex {
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
    align-items: center;
    margin-left: -5px;
}

/*.app_card .hageul .flex.top{margin-top:-50px !important;}*/
.app_card .hageul .flex .img1 {
    max-height: 94px;
    max-width: 100%;
}

.app_card .hageul .flex .img2 {
    max-width: 93px;
    width: 100%;
}

.app_card .hageul .flex .flex_col h1 {
    /*font-size: 18px;*/
    font-size: 14px;
    margin-bottom: 5px;
}

.app_card .hageul .flex .flex_col p {
    font-size: 14px;
    line-height: 20px;
}

.align_start {
    align-items: flex-start !important;
}

.mt-10 {
    margin-top: -10px;
}

.mt-15 {
    margin-top: -15px;
}

.app_btn_area {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 45px;
}

.app_custom_btn {
    width: 160px;
    box-shadow: 0px 0px 40px rgba(255, 0, 255, 0.7);
    padding: 0 20px;
    height: 45px;
}

.app_custom_btn span {
    font-size: 14px;
    font-weight: 600;
}

.app_custom_btn2 span {
    font-size: 14px;
    font-weight: 600;
}

.app_custom_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #a40055 0%, #c500ff 50%, #a40055 100%);
    background-size: 50% auto;
    animation: gradientMove 3s linear infinite;
    z-index: -1;
}

@keyframes gradientMove {
    from {
        background-position: 0 center;
    }

    to {
        background-position: -200% center;
    }
}

.app_custom_btn:after {
    background-color: #c5374f !important;
    inset: 1.5px;
}

.app_custom_btn2 {
    width: 160px;
    box-shadow: 0px 0px 40px rgba(255, 0, 255, 0.7);
    padding: 0 20px;
    height: 45px;
}

.app_custom_btn2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #a40055 0%, #c500ff 50%, #a40055 100%);
    background-size: 50% auto;
    animation: gradientMove 3s linear infinite;
    z-index: -1;
}

.app_custom_btn2:after {
    background-color: #4a2a82 !important;
    inset: 1.5px;
}

.flip_container {
    width: 100px;
    height: 100px;
    perspective: 1000px;
}

.flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* 내부 요소들을 3D로 보여줌 */
    animation: continuousFlip 3s linear infinite;
    margin-top: -10px;
}

/* 앞면과 뒷면의 공통 스타일 */
.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    /* 뒤쪽 면은 보이지 않게 설정 */
}

/* 이미지가 컨테이너를 꽉 채우도록 */
.front img,
.back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* 뒷면은 기본적으로 180도 회전된 상태에서 시작 */
.back {
    transform: rotateY(180deg);
}


@keyframes continuousFlip {
    0% {
        transform: rotateY(0deg);
    }

    40% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    90% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@media screen and (max-width:380px) {
    .app_hd .flex_col h2 {
        font-size: 14px;
    }

    .app_hd .book {
        width: 70%;
    }
    .glow-button2, .glow-button3{padding:6px 11px !important;}
}

/*결과보기*/
.fix_btn_area{width:100%; text-align: center;/*display: none; visibility: hidden;*/ transition: visibility 0.3s, opacity 0.3s ease-in-out; z-index:3; position: relative; }
.fix_btn_area.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
} 

.fix_btn_area.static {
    position: static;
}
.fix_btn_area.show {display: flex;visibility: visible;opacity: 1; z-index: 1;}
.fix_btn_area.hide {visibility: hidden;opacity: 0;}
.fix_btn_area .basic_btn{width:100%; max-width:971px; line-height: 27px; height:80px;  position: relative;z-index: 3; transition: all 0.3s ease;}
.fix_btn_area .basic_btn h1{z-index: 5;}
.fix_btn_area .basic_btn p{z-index: 5;}
.basic_btn:hover::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); z-index: 1;pointer-events: none;transition: all 0.3s ease;}
/*고정버튼 추가 수정*/
.edit_main_btn{}
/*.edit_main_btn .basic_btn{height:52px; width:100%; max-width: 485.5px; line-height: 52px;}*/
.edit_height{height:52px !important; line-height: 52px !important;}
.edit_height2{height:61px !important; line-height:61px !important; }

/*상세페이지 (정통사주, 운명한권)*/
@keyframes smooth-gradient {
    0% {
        background-position: 0% 50%; /* 시작점 */
      }
      50% {
        background-position: 100% 50%; /* 끝점 */
      }
      100% {
        background-position: 0% 50%; /* 다시 시작점으로 */
      }
    }
    
  
  
.detail_btn{font-size:24px;font-family: "Pretendard-Bold"; color:#ffffff; max-width:260px; width:100%; height:60px; line-height:60px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3); border-radius:5px;position: absolute; /* 이미지 위에 위치하도록 설정 */
    left: 50%; /* 가로 중앙 정렬 */
    transform: translateX(-50%); /* 가로 중앙 정렬 보정 */ z-index: 1; /* 이미지 위로 버튼이 표시되도록 설정 */}  

/* Swiper 하단 네비게이션 버튼 스타일 */

.sample_area .swiper-button-next, .swiper-button-prev {width: 44px !important;height: 44px !important;background-size: 28px 28px !important;border:1px solid #E3E7EF !important;color: #333333 !important;border-radius: 50% !important;cursor: pointer !important;background-color: #fff; z-index: 1000;}
/* Swiper 화살표 아이콘 크기 줄이기 */
.sample_area .swiper-button-next::after,
.sample_area .swiper-button-prev::after {font-size: 20px; font-weight:800;color: #333; opacity: 1; width:100%;height:100%;position: absolute;}
.sample_area .swiper-button-next::after{top:50%;left:50%;transform: translate(-10%, -23%);}
.sample_area .swiper-button-prev::after{top:50%;left:50%;transform: translate(-16%, -23%);}
.sample_area .swiper-button-next:hover, .swiper-button-prev:hover{background-color: #f0f0f0;}
.blink{position: absolute; right:20px; top:20px; font-size:23px; font-weight:600; animation: blink-animation 1s steps(2, start) infinite;  z-index: 1002;padding:5px 20px; border-radius: 20px; border:2px solid #673AB7;color:#673AB7; background: #ffffff;}
@keyframes blink-animation {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}
.blink_pink{border:1px solid #FF4262 !important; color:#FF4262 !important;}

/*샘플 전체화면 스와이퍼*/
.sample_area2 .sample_slide{width:100% !important;}
.sample_area2 .swiper-button-next, .swiper-button-prev {width: 44px !important;height: 44px !important;background-size: 28px 28px !important;border:1px solid #E3E7EF !important;color: #333333 !important;border-radius: 50% !important;cursor: pointer !important;background-color: #fff; z-index: 1000;}
/* Swiper 화살표 아이콘 크기 줄이기 */
.sample_area2 .swiper-button-next::after,
.sample_area2 .swiper-button-prev::after {font-size: 20px; font-weight:800;color: #333; opacity: 1; width:100%;height:100%;position: absolute;}
.sample_area2 .swiper-button-next::after{top:50%;left:50%;transform: translate(-10%, -23%);}
.sample_area2 .swiper-button-prev::after{top:50%;left:50%;transform: translate(-16%, -23%);}
.sample_area2 .swiper-button-next:hover, .swiper-button-prev:hover{background-color: #f0f0f0;}
.blink{position: absolute; right:20px; top:20px; font-size:23px; font-weight:600; animation: blink-animation 1s steps(2, start) infinite;  z-index: 1002;padding:5px 20px; border-radius: 20px; border:2px solid #673AB7;color:#673AB7; background: #ffffff;}
@keyframes blink-animation {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}



/* 레이어 팝업 스타일 */
.sample_popup {display: none;position: fixed;top: 53%;left: 50%;transform: translate(-50%, -50%);width: 95%;max-width: 548px; /*height:auto;*/ overflow-y: scroll; background-color: #fff;border: 2px solid #000;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);z-index: 10;border-radius: 10px;}
.popup_header {padding: 10px;text-align: right;}
.popup_close {cursor: pointer;font-size: 26px;color: #111111; line-height: 16px; display: inline-block;}


/*레이어 팝업 내부 스와이퍼 슬라이드*/
.sample_area .swiper {width: 100%;height: 300px;touch-action: none; overflow-y: auto;}

/*배우자 팝업 스와이퍼 */
.find_sample_pop_area .swiper { 
    touch-action: auto !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch; 
}
.find_sample_pop_area .swiper-button-next, .swiper-button-prev {width: 44px !important;height: 44px !important;background-size: 28px 28px !important;border:1px solid #E3E7EF !important;color: #333333 !important;border-radius: 50% !important;cursor: pointer !important;background-color: #fff; z-index: 1000;}
/* Swiper 화살표 아이콘 크기 줄이기 */
.find_sample_pop_area .swiper-button-next::after,
.find_sample_pop_area .swiper-button-prev::after {font-size: 20px; font-weight:800;color: #333; opacity: 1; width:100%;height:100%;position: absolute;}
.find_sample_pop_area .swiper-button-next::after{top:50%;left:50%;transform: translate(-10%, -23%);}
.find_sample_pop_area .swiper-button-prev::after{top:50%;left:50%;transform: translate(-16%, -23%);}
.find_sample_pop_area .swiper-button-next:hover, .swiper-button-prev:hover{background-color: #f0f0f0;}



.find_sample_pop .pop_btn_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 548px;
    margin: 0 auto;
    background: #fff;
    z-index: 1001;
    padding: 16px 0;
    text-align: center;
  }
  .sample_view_pop{
    max-height: 90vh !important;  overflow-y: auto !important;
    position: fixed;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 548px;
    height: 85vh; /* 버튼 높이 남겨둠 */
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #000;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* 스크롤 가능 영역 */
.find_sample_pop {
    max-height: 90vh !important;  overflow-y: auto !important;
    position: fixed;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 548px;
    height: 85vh; /* 버튼 높이 남겨둠 */
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #000;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* 하단 고정 버튼 */
  
  .sample_close_button_wrap {
    display: none;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 548px;
    background-color: #fff;
    padding: 12px 0;
    text-align: center;
    z-index: 1001;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border:2px solid #000;
    border-top:0;
  }
  
  .sample_close_button_wrap button {
    width: 90%;
    max-width: 300px;
  }
  
.sample_slide2 .swiper-slide {display: flex;justify-content: center;align-items: center;font-size: 18px;background: #f0f0f0;}
/*부적 팝업*/
.sample_popup2{padding:52px; position: fixed;top: 8%;left: 50%;transform: translate(-50%, 0);width: 80%;max-width: 600px;max-height: 100%; background-color: #fff;border: 1px solid #ddd;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);z-index: 10;border-radius: 10px;overflow: hidden; padding: 0; height:80%;}
/* 팝업 내부 스크롤 설정 */
.amulet_area {/*max-height: calc(90vh - 50px);*/ max-height:calc(86vh - 200px); overflow-y: auto; padding: 20px; padding-bottom:100px; height:100%;}
/* 팝업 헤더 */
.sample_popup2 .popup_header {padding: 30px 10px;text-align: right;position: sticky;top: 0; z-index: 10;display:flex; justify-content: center; align-items: center;}
/* 팝업 닫기 버튼 */

/* 부적 리스트 스타일 */
.sample_popup2 .amulet_cont {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 15px; /* 아이템 간격 추가 */}
.sample_popup2 .amulet_cont li {width: calc(25% - 15px); /* 한 줄에 4개씩 배치 */box-sizing: border-box;text-align: center;border:1px solid #D9D9D9; padding:15px 35px; display: inline-block;position: relative;margin-bottom:68px;display: flex;justify-content: center;align-items: center; position: relative;}
.sample_popup2 .amulet_cont li img {width: 100%; height: auto;max-width: 72px; margin-bottom: 8px;}
.sample_popup2 .amulet_cont li .pop_txt_area {margin: 0;position: absolute;bottom:-63px; left:50%; transform: translate(-50%); width:100%; text-align: center; display: flex; align-items: center; flex-direction: column;}
.sample_popup2 .amulet_cont li .pop_txt_area p {font-size: 15px;color: #333;font-weight:700;}
.sample_popup2 .amulet_cont li .pop_txt_area span{font-size:13px; line-height: 18px; letter-spacing: -1.3px;}
/*.pop_btn_area{display: block; padding-bottom:30px; text-align: center; padding-top:10px;}*/
/*부적팝업 추가 수정*/
.popup_header .disflex_center img{margin-right:15px;}
.popup_header .disflex_center h2{color:#111111; font-weight:700; font-size: 28px; }
.btn_posi_ab{position: absolute; right:20px;}
.sample_view,
.amulet_btn {pointer-events: auto;}
.new_posi_fixed{
    display: none;
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background-color: #fff;
    padding: 12px 1px;
    text-align: center;
    z-index: 102;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* border: 2px solid #000; */
    border-top: 0;
        }
        .new_posi_fixed .basic_btn{width:50% !important;}
/*.sample_popup2 .pop_btn_area {
    position: fixed !important;
    bottom: 10% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: 300px !important; 
    text-align: center;
    pointer-events: none; 
    background-color: unset !important;
  }
  
  .sample_popup2 .pop_btn_area button {
    pointer-events: all;
  }*/



.sample_popup .pop_btn_area{
    display: block; 
    padding-bottom:30px; padding-top:10px;
    /*position: fixed;*/
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 548px;
    margin: 0 auto;
    background: #fff;
    z-index: 1001;
    padding: 16px 0;
    text-align: center;
}

/*스크롤 방지*/
.no_scroll{overflow: hidden;}
.amulet_area{}
.amulet_cont{}
.amulet_cont li{}
.amulet_cont li img{}
.amulet_cont li img p{}
/*상세페이지 이미지 영역*/
.img_area{width:100%; max-width:971px; margin:0 auto;}
.img_cont{}
.img_cont img{width: 100%;height: auto; image-rendering: crisp-edges; -webkit-backface-visibility: hidden; }
/* 이미지 버튼 위치 */
.top_btn {top: 26%;}
.bottom_btn {bottom: 10%;}

/*위아래 버튼 오른쪽  fix*/
.w_scroll_buttons {display: none; position: fixed;right: 5%; top: 50%;transform: translateY(-50%);z-index: 1000; display: flex;flex-direction: column;gap: 10px;}
.w_scroll_btn {width: 50px;height: 50px;border: 2px solid #ccc; border-radius: 50%; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);display: flex;justify-content: center;align-items: center;font-size: 20px; color: #333;cursor: pointer;transition: all 0.3s ease; }
.w_scroll_btn:hover {background-color: #f0f0f0; color: #fff;border-color: #f0f0f0;}

/*운명한권 불안감 슬라이드*/
.anxiety .swiper {width: 100%;height: 460px; }
.anxiety_slide .swiper-slide {display: flex;justify-content: center;align-items: center;font-size: 18px;}
/*정통사주 이미지 버튼*/
.top_btn2 {top: 23%;}
.bottom_btn2 {bottom: 7.5%;}

.bling{width:135px; height:200px; left: 50%; transform: translateX(-50%); top:38%;}
/*운명한권 토글*/
.dot_line{ width: 100%;border: none; border-top: 1px dotted #D9D9D9; }
.qna_arae{padding:0 20px;}
.question_area{padding:18px 0; cursor: pointer; width:100%;}
.question_area p{font-size:18px; font-family: "Pretendard-SemiBold"; font-weight:500; line-height: 20px;}
.answer_area{padding:30px 45px; background: #F7F7F7; font-size:18px;  line-height: 30px; white-space: pre-line; display: none;color:#666666; font-family: "Pretendard-Regular"; font-weight:400; }
.answer_area p{font-size:18px; font-family: "Pretendard-SemiBold"; font-weight:500; color:#333333;}
.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease; /* 부드러운 회전 효과 */
}
/*디데이*/
.d_day{display: none;}
/*추가버튼*/
.pay_btn{font-size: 24px;font-family: "Pretendard-Bold";color: #ffffff;max-width: 260px;width: 100%;height: 60px;line-height: 60px;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);border-radius: 5px;position: absolute;}
/* 구매버튼 깜빡거림 추가 */
@keyframes blink {
    0%, 80% { opacity: 1; }
    81%, 100% { opacity: 0; }
  }
.btn_align{width:100%; display: flex; align-items: center; justify-content: center;}
.btn_align h1{ animation: blink 1s infinite; position: absolute; width:100%; top:50%; transform: translateY(-50%);}
.mini_btn{padding:5px 8px; text-align: center; color:#fff; font-size: 13px; vertical-align: center; line-height: 13px; right:20%; position: absolute !important;}

/*운명한권 텍스트 타이핑 효과 영역*/
.typing_area {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 10;
}

.typing {
    font-size: 130px;
    font-family: 'SBAggroM';
    font-weight: 400;
    color: #fff;
    visibility: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* 커서 깜빡임 효과 추가 
.typing::after {
    content: "|";
    display: inline-block;
    margin-left: 5px;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}*/


/*카카오 상담 버튼*/
.kakao_btn {position: fixed;bottom: 270px;right: 20px;z-index: 1000;width: 50px; height: 50px;border-radius: 50%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);cursor: pointer;display: flex;align-items: center;justify-content: center;overflow: hidden; }
.kakao_btn img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity 0.3s ease;}
.kakao_btn .ka1 {opacity: 0;z-index: 0;}
.kakao_btn .ka2 {opacity: 1;z-index: 1;}
.kakao_btn:hover .ka2 {opacity: 0;}
.kakao_btn:hover .ka1 {opacity: 1;}
/*카카오톡 채널 버튼*/
.kakao_btn2 {position: fixed;bottom: 150px;right: 20px;z-index: 1001;width: 50px;height: 50px;border-radius: 50%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);cursor: pointer;display: flex;align-items: center;justify-content: center;overflow: hidden; }
.kakao_btn2 img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity 0.3s ease;}
.kakao_btn2 .ka1 {opacity: 0;z-index: 0;}
.kakao_btn2 .ka2 {opacity: 1;z-index: 1;}
.kakao_btn2:hover .ka2 {opacity: 0;}
.kakao_btn2:hover .ka1 {opacity: 1;}
/*구독하기 버튼*/
.sub_side_btn{position: fixed;bottom: 210px;right: 20px;z-index: 1000;width: 50px; height: 55px;border-radius: 50%;/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/cursor: pointer;display: flex;align-items: center;justify-content: center; }
.sub_side_btn img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity 0.3s ease; object-fit:cover; filter:drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));}
.sub_side_btn .ka1 {opacity: 0;z-index: 0;}
.sub_side_btn .ka2 {opacity: 1;z-index: 1;}
.sub_side_btn:hover .ka2 {opacity: 0;}
.sub_side_btn:hover .ka1 {opacity: 1;}
/*앱 환경일때*/
.bt_btn{bottom:210px !important;}
/*버튼 비활성화*/
.disabled_btn{opacity: 0.5; pointer-events: none; filter:grayscale(100%); cursor: not-allowed;}
/*링크 복사 버튼*/
.copy_btn{position: fixed; bottom:90px; right:20px; z-index: 999;  width:50px; height:50px; background: #1565C0; border-radius: 50%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);cursor: pointer;display: flex;align-items: center;justify-content: center;/*overflow: hidden; visibility: hidden;*/}
.copy_btn img{vertical-align: middle;}
/*아이폰 구매복구 버튼*/
.posi_ab_detail{right:0 !important; left:unset; transform: unset;}
/* 팝업 배경 (overlay) */
.pop_wrap{display: none;}
.pop_wrap2{display: none;}
.pop_1_overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;}
/* 팝업 창 */
.pop_1 {background: #fff;padding: 32px 53px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);text-align: center; position: relative;}
/* 팝업 내용 */
.pop_1 h1{font-size: 24px; font-family: "Pretendard-Bold"; color:#111111; line-height: 24px; white-space: pre-line;}
.pop_1 p {font-size: 14px;color: #666666;font-family: "Pretendard-Regular";white-space: pre-line;line-height: 20px;}
.pop_1 h2{font-size:14px; font-family: "Pretendard-SemiBold"; color:#666666;}
/*팝업 닫기 버튼 */
.pop_btn {border: none;cursor: pointer; position: absolute; top:13px; right:15px;}
.pop_btn2{max-width: 243px; width:100%; height:45px; line-height: 45px; font-size:20px; margin-top:20px;}

.visibi_hidden{visibility: hidden;}
.sm_btn{font-size:15px; color:#ffffff; width:76px; height:47px; line-height:47px; background: #111111; border:1px solid #111111; }
.dis_ruby{display: ruby;}
.dis_block{display: block !important;}
.flex{display: flex !important;}
.align_base{align-items: baseline !important;}
.flex_end{display: flex; justify-content: end;}
.flex_col{display: flex; flex-direction: column;}
.dis_none{display: none ;}
.disflex_center1{display: flex; justify-content: center;}
.disflex_justispace{display: flex;justify-content: space-between;}
.disflex_justispace_center{display: flex;justify-content: space-between; align-items: center;}
.disflex_justispace_end{display: flex;justify-content: space-between; align-items: end;}
.disflex_alingcenter{display:flex; align-items:center;}
.disflex_column{display: flex; flex-direction: column; }
.disflex_column_center{display: flex; flex-direction: column; justify-content: center; align-items: center; }
.disflex_center{display: flex;  justify-content: center; align-items: center; }
.disflex_baseline{display: flex; justify-content: space-between; align-items: baseline;}
.disflex_start{display: flex; justify-content: flex-start; align-items: center;}
.disflex_start2{display: flex; align-items: flex-start; justify-content: space-between; /*width:100%; max-width:290px;*/padding:23px 22px; }
.posi_re{position: relative;}
.posi_ab{position: absolute;}
.bold{font-weight: 600;}
.txt_center{text-align: center;}
.txt_left{text-align: left;}
.white_pre{white-space: pre-line;}
.m_disflex_alingcenter{display: flex !important; align-items: center !important;} 
main{flex: 1;}
.gap8{gap:8px;}
.gap15{gap:15px;}
.gap17{gap:17px;}
.t_center{text-align: center;}
.t_left{text-align:left;}
.border_ra_none{border-radius: 0 !important;}
.web_hidden{display: none !important; visibility: hidden ;}
.web_none{display: none;}
.width_max971{max-width:860px; width:100%;}
.max_width_50{width:100%; max-width: 50%;}
.max_width_100{width:100% !important;}
.btn_width_971{width:100% !important; max-width: 971px !important;}
.width_971{width:100%; max-width: 971px;}
.width_791{width:791px;}
.width_414{width:414px;}
.width_590{width:590px;}
.width_126{width:126px; /*margin-right:2px;*/}
.width_190{width:200px;}
.width_201{width:201px;}
.width_203{width:203px;}
.width_208{width:208px;}
.width_223{width:223px;}
.width_258{width:277px;}
.width_316{width:316px;}
.width_390{width:390px;}
.width_392{width:414px;}
.width_170{width:170px;}
.width_105{width:105px;}
.width_100{width:100% !important;}
.m_width_100_none{width:100%;}
.width_90{width:90% !important;}
.width_70{width:70%;}
.width_50{width:50%;}
.width_0{width:0% !important;}
.h_48{height:48px !important;}
.h_100{height:100% !important;}
.width_unset{width:unset !important;}
.width_auto{width:auto !important;}
.max_width971{max-width:971px !important;}
.max_width380{max-width:380px;}
.max_width_1600{max-width:1600px !important;}
.height427{height:427px;}
.font_12{font-size: 12px;}
.font_13{font-size: 13px !important;}
.font_14{font-size: 14px !important;}
.font_15{font-size: 15px;}
.font_16{font-size: 16px !important;}
.font_17{font-size: 17px;}
.font_20{font-size:20px !important;}
.font21{font-size:21px;}
.font22{font-size:22px;}
.font23{font-size:23px !important;}
.font_27{font-size:27px !important;}
.font18{font-size:18px;}
.font_batang{font-family: 'Batang_Regular';}
.font_bold{font-weight:600;}
.lineh_13{line-height: 13px;}
.lineh_30{line-height: 30px;}
.lineh_32{line-height: 32px;}
.lineh_22{line-height: 22px !important;}
.lineh_15{line-height: 15px;}
.height_line{height:15px; margin-bottom:4px;}
.height_line30{height:30px !important; line-height:28px !important;}
.pd8_border_none{padding-top:8px!important; border:none !important; padding-bottom:0 !important;}
.pdlr_190{padding:0 190px;}
.pdt_pdb60{padding: 60px 0; padding-bottom:35px;}
.pdt_pdb88{padding: 88px 0;}
.pdb_35{padding-bottom:35px;}
.pdt_pdb63{padding: 63px 0;}
.pdt_pdb38{padding: 40.5px 38px;}
.pdt_pdb51{padding-top:60; padding-bottom:51px;}
.pdt_pdb104{padding-top:104px; padding-bottom:104px;}
.mt16_mb24{margin-top:16px; margin-bottom:24px;}
.mb_0{margin-bottom:0;}
.mb_8{margin-bottom:8px;}
.mb_12{margin-bottom:12px;}
.mb_16{margin-bottom:16px;}
.mb_18{margin-bottom:18px;}
.mb_20{margin-bottom:20px;}
.mb_24{margin-bottom:24px;}
.mb_25{margin-bottom:25px;}
.mb_30{margin-bottom:30px;}
.mb_33{margin-bottom:33px;}
.mb_40{margin-bottom:40px;}
.mb_41{margin-bottom:41px;}
.mb_55{margin-bottom:55px;}
.mb_60{margin-bottom:60px;}
.mb_76{margin-bottom:76px;}
.mb_80{margin-bottom:80px;}
.mb_86{margin-bottom:86px;}
.mb_25{margin-bottom:25px;}
.mb_16{margin-bottom:16px;}
.pb_68{padding-bottom: 68px;}
.mb_78{margin-bottom: 78px;}
.mb_90{margin-bottom: 90px;}
.ml_5{margin-left:5px;}
.ml_8{margin-left:8px;}
.ml_10{margin-left:10px;}
.ml_20{margin-left:20px;}
.ml_100{margin-left:100px;}
.ml_489{margin-left:489px;}
.mr_0{margin-right:0px !important;}
.mr_4{margin-right:4px;}
.mr_8{margin-right:8px;}
.mr_10{margin-right:10px;}
.mr_12{margin-right:12px;}
.mr_20{margin-right:20px;}
.m_mr_20{margin-right:20px;}
.mr_60{margin-right:60px;}
.mr_80{margin-right:80px;}
.mr_120{margin-right:120px;}
.mr_240{margin-right:240px;}
.mt_0{margin-top:0;}
.mt_16{margin-top:16px;}
.mt_20{margin-top:20px;}
.mt_30{margin-top:30px;}
.mt_40{margin-top:40px;}
.mt_42{margin-top:42px;}
.mt_45{margin-top:45px;}
.mt_46{margin-top:46px;}
.mt_60{margin-top:60px;}
.mt_68{margin-top:68px;}
.mt_80{margin-top:80px;}
.mt_70{margin-top:70px;}
.mt_65{margin-top:65px;}
.mt_85{margin-top:85px;}
.mt_90{margin-top:90px;}
.mt_118{margin-top:118px;}
.mt_130{margin-top:130px;}
.mt_155{margin-top:155px !important;}
.mt_189{margin-top:189px;}
.mt_341{margin-top:341px;}
.pl_27{padding-left:27px !important;}
.pt_60{padding-top:60px;}
.pt_65{padding-top:65px;}
.pt_46{padding-top:46px;}
.pt_56{padding-top:56px;}
.pt_100{padding-top:100px;}
.pt_121{padding-top:121px;}
.pt_129{padding-top:129px;}
.pt_169{padding-top:169px;}
.pt_186{padding-top:186px;}
.pt_68{padding-top:68px;}
.pb_15{padding-bottom:15px;}
.pb_30{padding-bottom:30px;}
.pb_39{padding-bottom:39px;}
.pb_60{padding-bottom:60px;}
.pb_84{padding-bottom:84px;}
.pb_0{padding-bottom:0 !important;}
.pr_33{padding-right:33px;}
.pd_rl20{padding:0 20px;}
.vh_full{height:100vh;}
.w_pd_0{padding: 0 !important;}
.top_64{top:64px;}
.pd_0{padding:0 !important;}
/*모바일 헤더*/
.m_header{height:65px;}
.m_header_cont{height:100%;}
.m_header_cont h1{margin-left:20px;}
.m_header_cont .ham_btn{margin-right:30px;}
.m_menu_area {width: 100%;font-family: 'Pretendard-SemiBold';border: 1px solid #ccc;background-color: #fff;padding: 0;display: none; height:60vh; position:fixed; z-index:99999; overflow-y: auto;}
.m_menu_item {border-bottom: 1px solid #e0e0e0;color:#111111;display: block;}
.m_menu_title {display: flex;justify-content: space-between;align-items: center;padding: 15px;cursor: pointer;}
.m_menu_title span {font-size: 16px;font-weight: 500;}
.m_new_label {font-size: 12px;color: red;margin-left: 8px;font-weight: bold;}
.m_toggle_icon {width: 16px;height: 16px;transition: transform 0.3s ease;}
.m_submenu {display: none;padding: 10px 15px;background-color: #f9f9f9;}
.m_submenu a {display: block;padding: 8px 0;color: #333;text-decoration: none;font-size: 14px;}
.m_submenu a:hover {color: #007BFF;}

.m_new_btn{display: flex; align-items: center; gap:15px;}
.p_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    margin-top:0.5px;
}
    
.button-wrapper {
    position: relative;
    z-index: 2;
}
    
.glow-button {
    position: relative;
    padding: 5px 20px;
    background-color: #ffcc00;
    color: #000;
    border: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.7);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.glow-button:hover {
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.9);
    transform: scale(1.05);
}
.glow-button2 {
    position: relative;
    padding: 6px 20px;
    background-color: #7120ff;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(113, 32, 255, 1);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.glow-button2:hover {
    box-shadow: 0 0 40px rgba(113, 32, 255, 1.1);
    transform: scale(1.05);
}
.glow-button3 {
    position: relative;
    padding: 6px 20px;
    background-color: #ff4262;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 66, 98, 1);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.glow-button3:hover {
    box-shadow: 0 0 40px rgba(255, 66, 98, 1.2);
    transform: scale(1.05);
}
@keyframes blink {
    0%, 49.9%   { opacity: 1; }   /* 보임 */
    50%, 100%   { opacity: 0; }   /* 사라짐 */
  }
  
  .blink_txt {
    display: inline-block;               /* opacity 애니메이션 적용을 위해 */
    animation: blink 0.6s steps(1) infinite;
  }

/*canvas {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
width: 100%;
height: 100%;
z-index: 1;
}*/
.particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

/* 열릴 때 토글 아이콘 회전 효과 */
.m_menu_item.active .m_toggle_icon {transform: rotate(180deg);}
.m_menu_item.active .m_submenu {display: block;}
.m_toggle_icon.rotated {transform: rotate(180deg);transition: transform 0.3s ease;}


.m_txt_area{display: flex; justify-content: center; align-items: flex-start;}
.m_txt_cont{text-align: left; line-height: 27px; margin-right:30px;}
.m_txt_cont:last-child{margin-right:none;}
.m_txt_cont p{ color:#666666;}

/*배우자 상세 페이지*/
.loading_area {
    display: grid;
    place-items: center;
    height: auto;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
    
    }
    .loader div {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    transform: scale(0);
    animation: animate_1 1.5s ease-in-out infinite;
    display: inline-block;
    margin: .3rem;
    }
    .loading_area .loader div:nth-child(1) { animation-delay: 0s; }
    .loading_area .loader div:nth-child(2) { animation-delay: 0.2s; }
    .loading_area .loader div:nth-child(3) { animation-delay: 0.4s; }
    .loading_area .loader div:nth-child(4) { animation-delay: 0.6s; }
    .loading_area .loader div:nth-child(5) { animation-delay: 0.8s; }
    .loading_area .loader div:nth-child(6) { animation-delay: 1s; }
    .loading_area .loader div:nth-child(7) { animation-delay: 1.2s; }

    /*@keyframes animate {
    0%, 100% {
        transform: scale(0.2);
        background-color: #bd0036;
    }
    40% {
        transform: scale(1);
        background-color: #f25330;
    }
    50% {
        transform: scale(1);
        background-color: #f2b900;
    }
    }*/

    @keyframes animate_1 {
    0%, 100% {
        transform: scale(0.2);
        background-color: #fff ;
    }
    40% {
        transform: scale(1);
        background-color: #fff ;
    }
    50% {
        transform: scale(1);
        background-color: #fff ;
    }
    }
/*이미지 로딩 효과 추가*/
/*.img_cont_loading {
    position: relative;
  }
  
  .img_loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.6);
  }
  
  .loader div {
    width: 14px;
    height: 14px;
    margin: 5px;
    background: #000;
    border-radius: 50%;
    animation: animate 1.5s ease-in-out infinite;
  }
  
  @keyframes animate {
    0%, 100% { transform: scale(0.2); }
    40%, 50% { transform: scale(1); }
  }

  
  .img_cont_loading img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0; 
    transition: opacity 0.1s ease;
  }*/
  
  .loading_area2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    z-index: 9999;
  }
  
  .loading_area2 .loader div {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: scale(0);
    animation: animate 1.5s ease-in-out infinite;
    display: inline-block;
    margin: .3rem;
  }
  
  .loading_area2 .loader div:nth-child(1) { animation-delay: 0s; }
  .loading_area2 .loader div:nth-child(2) { animation-delay: 0.2s; }
  .loading_area2 .loader div:nth-child(3) { animation-delay: 0.4s; }
  .loading_area2 .loader div:nth-child(4) { animation-delay: 0.6s; }
  .loading_area2 .loader div:nth-child(5) { animation-delay: 0.8s; }
  .loading_area2 .loader div:nth-child(6) { animation-delay: 1s; }
  .loading_area2 .loader div:nth-child(7) { animation-delay: 1.2s; }
  
  @keyframes animate {
    0%, 100% {
      transform: scale(0.2);
      background-color: #000;
    }
    40%, 50% {
      transform: scale(1);
      background-color: #000;
    }
  }

  .loading_area3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    z-index: 9999;
}
  
  .loading_area3 .loader div {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: scale(0);
    animation: animate 1.5s ease-in-out infinite;
    display: inline-block;
    margin: .3rem;
  }
  
  .loading_area3 .loader div:nth-child(1) { animation-delay: 0s; }
  .loading_area3 .loader div:nth-child(2) { animation-delay: 0.2s; }
  .loading_area3 .loader div:nth-child(3) { animation-delay: 0.4s; }
  .loading_area3 .loader div:nth-child(4) { animation-delay: 0.6s; }
  .loading_area3 .loader div:nth-child(5) { animation-delay: 0.8s; }
  .loading_area3 .loader div:nth-child(6) { animation-delay: 1s; }
  .loading_area3 .loader div:nth-child(7) { animation-delay: 1.2s; }
  
  @keyframes animate {
    0%, 100% {
      transform: scale(0.2);
      background-color: #000;
    }
    40%, 50% {
      transform: scale(1);
      background-color: #000;
    }
  }

    .no_back{background-color: transparent !important; box-shadow: unset !important; border-radius: unset !important;}
/*배우자 결과 페이지*/
.finding_slider_container {position: relative;/*width: 791px;*/height: 450px;overflow: hidden;}
.finding_slider_wrapper {position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
.finding_slide {position: absolute;transition: transform 0.3s ease-in-out/*, opacity 1s ease-in-out*/;border-radius: 10px;object-fit: cover;cursor: pointer;}
.finding_slide img {width: 100%;height: 100%;border-radius: 10px;}
/* 중앙 활성화 이미지 */
.slide_active {width: 400px;height: 400px;z-index: 10;opacity: 1;left: 50%;transform: translateX(-50%);  /*box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4);*/}
/* 왼쪽 이미지 */
.finding_slide_left {width: 300px;height: 300px;left: 10%;opacity: 0.5;z-index: 5;}
/* 오른쪽 이미지 */
.finding_slide_right {width: 300px;height: 300px;right: 10%;opacity: 0.5;z-index: 5;}
/* 숨겨진 이미지 */
.finding_slide_hidden {display: none;}
.finding_slider_container .prev,
.finding_slider_container .next {position: absolute;top: 50%;transform: translateY(-50%);border: none;cursor: pointer;border-radius: 50%;z-index: 20;background-color: transparent; width:70px;}
.finding_slider_container .prev {left: 26%;}
.finding_slider_container .next {right: 26%;}

/*슬라이드 관련*/
.re_tit_txt{font-weight:600; margin:90px 0 65px 0 !important;}
.quest_one{padding:25px 0;}
.quest_img{width:400px; height:100%; background-color: #000; border-radius: 10px;}
.blur_back{background-color: #000; opacity: 0.2; border-radius: 10px;}
.quest_img img{filter:blur(5px);}
.button_container {position: absolute; transform: translate(-50%, -50%); top:50%; left:50%; width:100%;}
.custom_button {border: none;background: transparent;position: absolute;display: flex;align-items: center;justify-content: center;padding: 20px;overflow: hidden;border-radius: 100vmax;cursor: pointer;box-shadow: 0px 0px 40px rgba(255, 0, 255, 1);transition: box-shadow 0.2s ease-in-out;}
.custom_button::after, .custom_button::before {content: "";position: absolute;inset: 0;}
.custom_button::before {z-index: 1;right: -100%;background: linear-gradient(to right, #9900F0 0%, #FF85B3 50%, #9900F0 100%);background-size: 50% 100%;animation: scroll 1.2s infinite linear;}
.custom_button::after {z-index: 2;inset: 3px;border-radius: 100vmax;background-color: black;transition: inset 0.2s ease-in-out;}
.custom_button span {z-index: 3;color: white;text-transform: uppercase;font-size: 1rem;font-weight: bold;}
.custom_button:hover {box-shadow: 0px 0px 50px rgba(255, 0, 255, 1);}
.custom_button:hover::after {inset: 5px;}
@keyframes scroll {
    to {
        transform: translateX(-50%);
    }
}

/*인삿말 및 배우자 정보*/
.profile_box {margin: auto;font-family: 'Noto Sans' !important; margin-top:50px;}
.table_border{border-top:1px solid #000; border-bottom:1px solid #000; padding: 20px;}
.profile_box table {width: 100%;border-collapse: collapse;}
.profile_box td {padding: 5px;}
.profile_box td:first-child{width:20%;}
.profile_box td:last-child{width:90%;}
.profile_box strong {font-weight: bold;}
.greeting_text {text-align: center;font-weight: bold;font-size: 32px !important;margin-top: 57px;}

/*편관 어쩌구*/
.finding_result_area{width:860px; }
.saju_txt_area{width:100%;}
.saju_txt{display: flex;}
.saju_txt_area .saju_txt li{width:25%; text-align: center; color:#333333;font-size:26px; display: inline-flex; position: relative; align-items: center; justify-content: center; font-family: 'Noto Sans';}
.saju_txt_area .saju_txt li::after{width:1px; height:20px; background: #D9D9D9; content: ''; display: inline-block; position: absolute; right:0;}
.saju_txt_area .saju_txt li:last-child:after{display: none;}
.m_mb_30{margin-bottom:30px;}
.nature_area{width:861px; display: grid; grid-template-columns: repeat(4,1fr); justify-content: space-around; gap:3px;}
.nature_box{width:213px; height:213px; display:flex; flex-direction: column; justify-content: center; color:#333333; align-items: center;}
.nature_box p{font-size: 26px; line-height: 26px; margin-bottom:18px; font-family: 'Noto Sans';}
.nature_box h1{font-size: 80px; line-height: 80px; font-family: 'Noto Sans';font-weight: 600;}
.nature_area_2{width:861px; display: grid; grid-template-columns: repeat(5,1fr); justify-content: space-around; gap:3px;margin-top:70px; margin-bottom:100px;}
.nature_area_2 .nature_box p{font-size: 26px; line-height: 26px;  font-family: 'Noto Sans'; margin-bottom:0 !important;}
.cnt_area{font-size:16px; margin-top:10px;}
.cnt_area em{}
.nature_five{width:169px !important; height:169px !important;}
.soil{background:#FFD95E ;}
.tree{background: #549C6D;}
.iron{background: #E8E8E8;}
.fire{background: #FF6464;}
.water{background: #111111;}
.txt_box{max-width:861px; width:100%; text-align: center; border:1px solid #E3E7EF; height:80px; line-height: 80px !important; margin-top:200px !important; margin-bottom:24px;}
.spouse_info_area{}
.spouse_info {display: grid;grid-template-columns: 20% auto;gap: 10px;align-items: center;}
.spouse_info span {text-align: center; font-weight: bold;}
.spouse_info p {text-align: left; margin: 0;}
.re_tit{background-color: #FF6464; width:100%; height:50px; line-height: 50px; color:#fff; font-size:24px; font-weight: 600; text-align: center; border-radius: 10px 10px 0 0; /*margin:20px 0;*/}
.font_noto{font-family: 'Noto Sans' !important;}
/* 팝업이 열릴 때 body 스크롤 막기 */
body.popup_open {position: fixed;width: 100%;height: 100%;overflow: hidden;}
.spouse_popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);display: flex;align-items: center;justify-content: center;z-index: 9999;opacity: 1;transition: opacity 0.3s ease; overflow: hidden;}
/* 팝업이 닫힐 때 */
.spouse_popup.hidden {opacity: 0;pointer-events: none;}
/* 팝업 배경 클릭 */
.sp_popup_overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;}
/* 팝업 내부 컨텐츠 */
.sp_popup_content {position: relative;width: 100%;max-width: 800px;padding: 20px;border-radius: 10px;z-index: 10000;text-align: center;}
/* 닫기 버튼 */
.sp_popup_close {position: absolute;background: none;border: none;color:#fff;font-size: 24px;cursor: pointer;z-index:2; left:50%; transform: translate(-50%, 0); background: #1565C0; bottom:-20%; padding:10px 30px; border-radius: 5px;}

/* Swiper 스타일 */
.sp_slider {width: 100%;height: 100%;}
.sp_swiper_slide {display: flex;justify-content: center;align-items: center;}
.sp_swiper_slide img {/*max-width: 100%;*/width:800px; max-height: 100%;transition: transform 0.3s ease;}
.sp_slider .swiper-navigation-buttons .swiper-button-next, 
.sp_slider .swiper-button-prev, 
.sp_swiper_prev, 
.sp_swiper_next {
    width: 70px !important; 
    height: 70px !important;
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background-color: transparent !important;
    border: 0px solid transparent !important;
    border-color: transparent !important;
}

/* ✅ Swiper 기본 버튼 초기화 및 강제 제거 */
.sp_slider .swiper-navigation-buttons .swiper-button-next, 
.sp_slider .swiper-button-prev {
    background-color: transparent !important;
    border: 0px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ✅ hover 시에도 border 적용 안되도록 설정 */
.sp_slider .swiper-button-next:hover, 
.sp_slider .swiper-button-prev:hover {
    
    border: none !important;
    box-shadow: none !important;
}

/* ✅ Swiper 기본 가상 요소 제거 */
.sp_slider .sp_swiper_prev:after,
.sp_slider .sp_swiper_next:after,
.sp_slider .swiper-button-next:after,
.sp_slider .swiper-button-prev:after {
    display: none !important;
    background-color: transparent !important;
    content: none !important;
}

/* ✅ 왼쪽 버튼 (이전) */
.sp_slider .sp_swiper_prev {
    left: 10px;
    background-image: url('../images/ico/chevron_left_slide.svg') !important;
}

/* ✅ 오른쪽 버튼 (다음) */
.sp_slider .sp_swiper_next {
    right: 10px;
    background-image: url('../images/ico/chevron_right_slide.svg') !important;
}

.view_spouse{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 10;  color: #000; font-weight:600;}
/* 애니메이션 효과: rotate-vert-left */
.rotate-vert-left {
    animation: rotate-vert-left 1s ease-in-out;
}

/* 실제 애니메이션 동작 정의 */
@keyframes rotate-vert-left {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}



@keyframes slide-fwd-right {
  0% {
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(160px) translateX(100px);
    opacity: 0;
  }
}

@keyframes slide-fwd-left {
  0% {
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(160px) translateX(-100px);
    opacity: 0;
  }
}

.slide-fwd-right {
  animation: slide-fwd-right 1s ease-out;
}

.slide-fwd-left {
  animation: slide-fwd-left 1s ease-out;
}

@keyframes fade-in {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

/* 두근두근(하트비트) 효과 */
.heartbeat {
  /* 애니메이션 이름: heartbeat, 지속 시간: 1.2초, 반복: 무한 */
  animation: heartbeat 1.2s ease-in-out infinite both;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* 두근두근(하트비트) 효과 */
.heartbeat2 {
  /* 애니메이션 이름: heartbeat, 지속 시간: 1.2초, 반복: 무한 */
  animation: heartbeat2 1.2s ease-in-out infinite both;
}

@keyframes heartbeat2 {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.05);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}


.m_img{display: none !important;}


/* 반응형 처리 */
@media screen and (min-width: 2000px) {
.back_layer{background: url(../images/main/back_layer.png) no-repeat; background-size: cover;position: absolute; top:0; width:100vw; height:100%; max-height:646px;/*max-height:714px;*/}
.back_layer2{background: url(../images/main/make_ticket_destiny.png) no-repeat; background-size: cover;position: absolute; top:0; width:100vw; height:100vh; top:-13px; max-height:590px;}

.main_gradient{background: url(../images/main/main_background.svg) no-repeat ; background-size: cover;position: absolute; top:120px;}
.gradient1{background: url(../images/main/taste_saju_non-member.svg) no-repeat ; background-size: cover; position: absolute; top:65px;}
.gradient3{background: url(../images/main/todays_horoscope.svg) no-repeat ; background-size: cover; position: absolute; top:65px;} 
.gradient2{background: url(../images/main/compatibility.svg) no-repeat ; background-size: cover; position: absolute; top:65px;}
.gradient4{background: url(../images/main/authentic_fortune_back.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
/*.gradient5{background: url(../images/main/make_ticket_destiny.svg) no-repeat ; background-size: cover;position: absolute; top:43px;}*/
.gradient6{background: url(../images/main/subscription_service.svg) no-repeat ; background-size: cover;position: absolute; top:0;/*top:65px;*/}
.gradient7{background: url(../images/main/explanation_information.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient8{background: url(../images/main/tojeongbigyeol.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient9{background: url(../images/main/number_fortune.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient10{background: url(../images/main/select_date.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient11{background: url(../images/main/naming.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient12{background: url(../images/main/dream_interpretation.svg) no-repeat ; background-size: cover;position: absolute; top:65px;}
.gradient13{background: url(../images/main/spouse.svg) no-repeat ; background-size: cover; position: absolute; top:65px;} 

.sample_popup{/*top:50%;*/ height:auto;}
.sample_popup2{top:8%;}
}

@media screen and (min-width: 1200px) {
    
    .m_menu_area{display: none !important;}
    .m_header {display: none !important;}
    
   
}
@media screen and (max-width: 1250px) {
    .m_column{flex-direction: column ;}
    .personal_info_area {margin-right:0;}
    /*.web_none{display: block;}*/
    .bt_menu_area nav .nav_menu li{margin-right:25px !important;}
	.menu_line::after{right:-20% !important;}
}


@media screen and (max-width: 1200px) {
    .saju_intro{gap:10px;}
    .wrap{/*padding-right:30px; padding-left:30px;*/}
    .bt_menu_area nav .nav_menu li a{font-size:14px !important;}
    
}

@media screen and (min-width: 1024px) {
    .m_menu_area{display: none !important;}
    .m_header {display: none !important;}
    
    
   
}
/*@media screen and (max-width: 1112px) {
    .saju_category li{ width:47.5%; display: inline-block; margin-right:27px; margin-bottom:33px; max-width:unset;}
    .saju_category li:nth-child(3){margin-right:27px;}
    .category_card{width:100%;}

}*/
@media screen and (max-width: 1025px) {
    .bt_menu_wrap{border-top:none;}
    .sample_view_pop{height:auto;}
    .sample_popup .pop_btn_area{position: unset;}
    .pt_100{padding-top:65px;}
    #header{height:65px;}
    .m_hidden{display: none;}
    .bt_line{display:none;}
    /*메인 사주 카드3장*/
    .m_plr_20{padding-right:20px; padding-left:20px;}
    .main_cont{/*height:671px;*/ height:800px;}
    .back_layer{display: none;}
    .saju_intro{width:100%; display: block; height:100%; max-height:unset;margin-bottom:65px;}
    .m_block{display: block !important;}
    .saju_intro .intro_card{max-width: unset; width:100%; height:180px; color:#ffffff; border-radius: 10px; margin-right:20px; position: relative;display: block;overflow:unset;transition: all 0.3s ease; }
    .sub_btn{display: none;}
    .m_mt_20{margin-top:20px;}
    .clouds{display: none;}
    .saju_intro .intro_card h1{font-size: 28px; font-weight: 600; margin-bottom:16px; display: flex; flex-direction: row; line-height: 25px;}
    .sub_intro{width:unset; padding-left:20px; padding-right:20px;}
    .terms_btn{margin-right:20px;}
    .bt_menu_area{display: none !important;}
    .saju_intro .intro_card h1{font-size: 28px; font-weight: 600; margin-bottom:16px; display: flex; flex-direction: row; line-height: 25px;}
    .saju_category li {width:49%; margin-right:0; max-width: unset;}
    .date_select_area{width:100%; align-items: center;}
    /*.date_select_box{max-width:834px; width:100%;}*/
    .dream_textarea{width:calc(100% - 58px);}
    .dream_section{max-width:971px; width:100%;}
    .web_none{display: block;}
    .copy_btn{display: flex; visibility: visible; opacity: 10;}
    .main_cont{top:65px;}
    .service_cont{flex-direction: column; align-items: center;}
    .service_cont .service1{width:-webkit-fill-available; padding:20px 40px;}
    .service_cont .service2{width:-webkit-fill-available; padding:20px 40px;}
    .discount{display: block;}
    .gradient6{top:0;}
    .main_banner{display: none;}
    .sample_popup2{height:90%;}
    .m_show{display: block !important;}
    
}
@media screen and (max-width: 1010px) {
    .mr_240{margin-right:28px;}
    .line_2{align-items: baseline;}
}
@media screen and (max-width: 971px) {
    .glow_width2{max-width: 50%;}
    /*.edit_main_btn .basic_btn{max-width:96%;}*/
    .glow_width3 {max-width:800px !important; width:100% !important;}
}
@media(max-width:898px){
    .finding_slider_container{width:unset; margin:30px 0;}
    .finding_result_area{width:100%;}
    .saju_txt_area{width:100%;}
    .nature_area{width:100%; }
    .nature_area_2{width:100%;}
    .nature_box{width:50%;height:auto;}
    .nature_box p{font-size:19px; line-height:unset;  margin-bottom:5px; }
    .nature_box{width:100%; height:/*-webkit-fill-available*/auto; padding:10px 0 20px; justify-content: unset;}
    .nature_box h1{font-size:50px;line-height:unset;}
    .nature_five {width:100% !important;height:unset !important; padding:5px 0 !important;}
    .nature_five  p{font-size:19px; line-height:unset;  margin-bottom:5px; }
    .nature_five {width:100%; height:/*-webkit-fill-available*/auto; padding:10px 0 20px; justify-content: end;}
    .nature_five h1{font-size:50px;line-height:50px; margin-top:3px;}
    .saju_txt_area .saju_txt li{font-size: 20px;}
    .cnt_area{margin-top:3px;}
    /*.sp_popup_close{right:30px !important;}*/

}
@media screen and (max-width: 886px){
    .m_dis_no{visibility: hidden !important; display: none !important;}
    .web_hidden{visibility: visible !important; display:flex !important;}

}
@media screen and (max-width: 870px){
    .typing_area{top:16%;}
    .typing{font-size:106px;}

}
@media screen and (max-width: 845px) {
    .sub_intro .sub_cont_tit{font-size: 16px; white-space:unset;line-height: 29px;}
    .profile_box td:last-child{ font-size:16px;}
    
}
@media screen and (max-width: 768px) {
    .m_img{display: block !important;}
    .w_img{display: none !important; opacity: 0 !important;}
    .information {
      
    }

    .swiper-container {
        width: 100%;
        overflow: hidden;
    }

    .information_slide.swiper-slide {
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
    align-items: flex-start;
    }
    .information .swiper-wrapper{display: flex; flex-wrap: nowrap;}
    .information_slide:first-child{margin-right:10px;}
    .information_slide:last-child{}
    .typing_area{top:16%;}
    .typing{font-size:94px;}
}
/* 태블릿 화면 (최대 너비: 768px) */
@media screen and (max-width: 768px) {
    .max_width_100{max-width: 100% !important;}
    .sub_sample_box{gap:20px;}
    .find_sample_pop{top:7.5%;}
    .content_wrap {
        /*padding: 0 20px;*/
    }

    .width_590 {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .basic_select_area {
        width: 100%;
    }

    .personal_info_area {
        flex-direction: column;
        gap: 16px;
    }

    .disflex_alingcenter {
        flex-direction: column;
        align-items: flex-start;
    }
    .none_flex_align{
        flex-direction: unset !important;
        align-items: center !important;
    }
    .question_area p{font-size:14px;}
    .btn_area {
        flex-direction: column;
        gap: 12px;
        display: flex; width:100%;
        
    }

    .basic_btn {
        width: 100%; max-width: 590px;
    }
    .m_width_100{width:100%;}
    .m_hidden{display: none;}
    
    .m_header {display: block;}
    .saju_category li {
       margin-bottom:15px;
    }
    .m_width_100{width:100%;}
    .cate_cont1 .line_2{display: grid;}
    .sub_main_tit h1{font-size: 59px;}
    footer .copy{padding: 0 15px;}
    footer .copy p{font-size:13px;}
    .txt_center{padding:0 20px;}
    .ft_txt{font-size:12px; padding-bottom:50px;}
    .saju_taste_category .cate_cont{line-height: unset; padding:35px 0; height:100%;}
    .cate_cont .cate_list{display: grid; justify-content: center; justify-items: start;}
    .cate_cont .cate_list li{line-height: 32px;}
    .sub_cont{font-size:15px; line-height:27px;}
    .web_hidden{visibility: visible !important; display: flex !important;}
    .m_dis_no{visibility: hidden !important;  display: none !important;}
    .m_mt_0{margin-top:0 !important;}
    .m_align{flex-direction: row; align-items:center;}
    .information_slide{margin-left:0; width:100%;}
    .line_3{display: grid;}
    .line_3 .mr_120{margin-right:0;}
    .m_flex{display: flex;}
    .m_disF_center2{display:flex; justify-content: center; flex-direction: column;}
    .m_white_space{white-space:pre-line;}
    .per_label{margin-bottom:12px !important;}
    .pd_0{padding:0 !important;}
    .date_select_box{max-width:475px; width:100%;}
    .sample_popup2 .amulet_cont li{width:calc(33.3333% - 15px);}
    .sample_popup2 .amulet_cont{}
    .bottom_btn{bottom:7%;}
    .sample_popup2 {
        top: 12%; /* 모바일에서 상단 여백 */
        width: 90%; /* 모바일 화면에 맞춤 */
        max-height: 80%; /* 팝업 높이 제한 */
    }
    .amulet_area {
        padding: 15px;
        /*max-height:calc(90vh - 120px);*/
    }
    .m_height40{height:40px; line-height: 40px;}
    .w_scroll_buttons{display: none;}
    .blink{}
    .m_btn_width {
        width: 90% !important; 
        max-width: auto !important;
        height: 50px;
        line-height: 61px;
        font-size: 16px;
        margin: 0 auto;
        text-align: center;
    }
    .m_width_100_none{width:auto !important;}
    .width_126{margin-right:0;}
    .fix_maxwidth971 .basic_btn{max-width:100%;}
    .m_mb_30{margin-bottom:0;}
    .m_mr_20{margin-right:5px !important;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:250px !important;}

}
@media screen and (max-width: 650px){
    .typing_area{top:15%;}
    .typing{font-size:82px;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:200px !important;}
    .discount li img{margin-right:5px !important;}
}
@media screen and (max-width: 600px) {
    .mini_btn{right:10%;}
    .sub_sample_box{flex-direction: column; padding:0 20px;}
}
@media screen and (max-width: 560px){
    .typing_area{top:15%;}
    .typing{font-size:70px;}
    .sp_swiper_prev, .sp_swiper_next {color:#fff !important; }
    .re_tit{font-size:16px;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:220px !important;}

}
@media screen and (max-width: 550px) {
    .greeting_text{font-size:20px !important;}
    .custom_button{padding:15px;}
    .custom_button span{font-size:14px;}
    .sp_slider .swiper-navigation-buttons .swiper-button-next, .sp_slider .swiper-button-prev, .sp_swiper_prev, .sp_swiper_next{height:50px !important;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:199px !important;}    
}
    

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

    
    .saju_category li {
        width: 100%; /* 한 줄에 하나씩 */
    }
    .tit_info{font-size: 14px; padding-bottom:30px !important;}
    .sub_main_tit h1{font-size: 55px;}
  
    .m_btn_width{width:95% !important;}
    .glow_width2{height:45px;}
    .q_toggle{width:20px; height:20px;}
    .answer_area{font-size: 13px;}
    .answer_area p{font-size:13px;}
    .typing{font-size:65px;}
    .typing_area{top:16%;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:300px !important;}    

}
@media (max-width: 505px) {
    .finding_slider_container {padding: 0 20px; height:350px;}
    .finding_slider_wrapper{height:100%;}
    /*.slide_active {width: 100%;height: auto;}
    .finding_slide_left {width: 100%;height: auto;left: 0;}
    .finding_slide_right {width: 100%;height: auto;right: 0;}*/
    /* 물음표 이미지일 때 적용되는 스타일 */
    .question_mark_mode .slide_active { width: 100%; height: auto; }
    .question_mark_mode .finding_slide_left { width: 100%; height: auto; left: 0; }
    .question_mark_mode .finding_slide_right { width: 100%; height: auto; right: 0; }
    .question_mark_mode .finding_slider_container .prev { left: 6%; }
    .question_mark_mode .finding_slider_container .next { right: 6%; }

    /* 배우자 이미지로 변경되었을 때 적용되는 스타일 */
    .spouse_image_mode .slide_active { width: 100%; height: 350px; }
    .spouse_image_mode .finding_slide_left { width: 100%; height: 350px; left: 0; }
    .spouse_image_mloading_areaode .finding_slide_right { width: 100%; height: 350px; right: 0; }
    .finding_slider_container .prev {left: 6%;}
    .finding_slider_container .next {right: 6%;}
    .sp_popup_close{}
    .popup_header .disflex_center h2{font-size:20px;}
    
}

/* 모바일 화면 (최대 너비: 480px) */
@media screen and (max-width: 480px) {
    .sample_popup2{top:39px; max-height:100%;}
    .amulet_area{max-height:calc(90vh - 138px);}
    .new_posi_fixed{bottom:5px;}
    .sample_popup2 .popup_header{padding:15px 10px;}
    .find_sample_pop{top:2%;}
    .content_wrap {
        /*padding: 0 10px;*/
    }

    .per_label {
        font-size: 18px;
    }

    .basic_select_area {
        width: 100%;
    }

    .basic_input {
        width: 100%;
    }

    .btn_area {
        flex-direction: column;
        align-items: center;
    }

    .basic_btn {
        width: 100%;
        font-size: 20px;
    }
    .m_width_100{width:100%}
    .m_hidden{display: none;}
    
    
    .saju_category li {
        width: 100%; /* 한 줄에 하나씩 */
    }
    .saju_taste_category .cate_tit{font-size: 20px;}
    .line_2 .disflex_column p{font-size: 15px; line-height: 26px;}
    .pdt_pdb38{padding:30.5px 21px;}
    .cate_cont .cate_list li{font-size:15px; line-height: 26px;}
    .m_dis_no{visibility: hidden !important; display: none !important;}
    .m_txt_cont{margin-right:20px;}
    .m_txt_cont p{font-size:15px;}
    .top_txt{font-size:15px;}
    .data_select_tit {margin-bottom:7px !important; font-size:20px;}
    .date_select_box p{line-height:17px; font-size:14px;}
    .date_select_box img{width:30% !important;}
    .fix_btn_area .basic_btn{padding:0 10px;}
    .sample_popup2 .amulet_cont li{width:calc(50% - 15px);}
    .detail_btn{font-size:15px; height:36px; line-height: 36px; max-width: 127px;}
    .pay_btn{font-size:15px; height:36px; line-height: 36px; max-width: 127px;}
    .max_width380{max-width:180px;}
    .sample_popup{/*top:50%;*/ padding-bottom:34px; height:auto;}
    .mpb_10{padding-bottom:10px !important; top:15%;}
    .sample_popup .pop_btn_area{margin:0; padding:0; }
    .sample_popup2{}
    .mr_ml0{padding-left:0; padding-right:0;}
    .date_select_area{width:90%; display: block !important;}
    .date_select_box{display:flex; justify-content: center; height:123px; padding:0;}
    .date_select_box a{width:90%;}
    .bling{top:34%; width:80px !important; height:100px !important; }
    .blink{padding:5px 8px; font-size:18px;}
    .glow_width{max-width:126px; height:36px;}
    .glow_width1{max-width:180px; height:36px;}
    span.glow_bg2{width:320px !important; height:320px !important; }
    span.glow_bg3{width:100vw !important; height:467px !important;}
    .mini_btn{right:10px; padding:5px; font-size:10px;}
    .glow h1{font-size: 18px;}
    .typing{font-size:55px;}
    .s_txt{font-size:17px !important;}
    .m_btn{height:unset !important; padding:15px 0 !important;}
    .m_btn h1{font-size:16px !important;}
    .find_sample_pop_area .sample_wrapper .swiper-slide .swiper-zoom-container{touch-action:auto !important;}
.find_sample_pop_area  .swiper-button-next, .swiper-button-prev {z-index: 9999 !important;}
}
@media screen and (max-width: 380px) {
    .mpb_10{padding-bottom:5px !important;}
    .line_2 .disflex_column p{font-size:11px;}
    .sample_view,
    .amulet_btn {
        touch-action: manipulation; /* 터치 이벤트를 명확히 설정 */
        width: 100%;
    height: auto;
    padding: 5px 20px; /* 버튼 크기를 조정 */
    }

    .sample_popup,
    .sample_popup2 {
        
        position: fixed;
    }
    .glow_width{max-width:126px; height:45px;}
    .max_width380{max-width:187px;}
    .detail_btn{line-height: 36px;}
    .glow_width1{max-width:186px; height:46px;}
    .bottom_btn2{bottom:7%;}
    .sample_popup .pop_btn_area{}
    .typing{font-size:42px;}
    .bd_card [id^="popular-"] .most_popular .tab-container .cell a{max-width:250px !important;}    
    .saju_intro .intro_card p{font-size:18px;}
}
@media screen and (max-width: 370px) {
    .sample_popup .pop_btn_area{}
    .m_width_100_none{padding:0px 20px; width:100vw !important;}
}