/* BASIC css start */
#content{position:relative; max-width:1920px; width:100%; margin:0 auto}
#content img{width:100%; min-width:700px}

/* 버튼 */
#evt03 {
    position: relative;
    width: 100%; /* 원하는 너비로 설정 */
    max-width: 1920px; /* 최대 너비 설정 */
}
#evt01,#evt02,#evt03{position:relative;}
#evt01 > a{display:inline-block; width:18%; height:3.5%; position:absolute; top:37%; left:50%; transform:translateX(-50%);}
#evt02 a.coupon{position:absolute; top:50%; left:50%; width:20%; height:41%; transform:translate(-50%, -61%);}
#evt03 > a{ display: inline-block;width: 18%;height:8%; position: absolute; bottom: 15.5%; left: 50%; transform: translateX(-50%);}
.con1_img{position:relative}
.con1_img > a{display:inline-block; width:18%; height:8%; position:absolute; bottom:15.5%; left:50%; transform:translateX(-50%);}

/* 메뉴 바 */
.evt_tab_box .evt_tab_bar { position: relative; padding-top: 70px; }
.evt_tab_box .evt_tab.fixed { position: fixed; top: 65px !important; left: 0; z-index: 10; }
.evt_tab_box .evt_tab { position: absolute; left: 0; right: 0; top: 0; max-width: 1920px; min-width: 1440px; height: 70px; margin: 0 auto; background: #fff; }
.evt_tab_box .evt_tab ul { display: -webkit-box; display: -ms-flexbox; display: flex; width: 72%; margin: 0 auto; }
.evt_tab_box .evt_tab ul li { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 70px; margin-bottom: 0; }
.evt_tab_box .evt_tab ul li.on a {position:relative; color: #00b289; border-right: 0; transition:all 0.2s ease-in-out;}
.evt_tab_box .evt_tab ul li.on a:after{content:''; width:100%; position:absolute; bottom:0;  left:0; height:4px;background:#00b289}
.evt_tab_box .evt_tab ul li a { display: block; width: 100%; font-size: 18px; font-weight: 500; color: #969696; letter-spacing: -1px; line-height: 70px; text-align:center;}
.evt_tab_box .evt_tab ul li:last-child a { border-right: 0; }
    
/* tab */
#tab01 .prd_thumb, #tab02 .prd_thumb{display:flex; position:relative; padding-bottom:200px}
#tab01 > a, #tab02 > a{display:inline-block; width:18%; height:8.5%; position:absolute; bottom:9.5%; left:50%; transform:translateX(-50%);}

/*event_tab1*/
.event_tab1{width:100%; max-width:1920px; margin:0 auto; background:#f4f4f4}
.event_tab1 .tabnav{font-size:0; width:90%; margin:0 auto; padding:5% 0 2%; text-align:center}
.event_tab1 .tabnav li.active{background:#00b188}
.event_tab1 .tabnav li{ position:relative; display:inline-block; width: 100px; margin:0 5px; color: #aaa; line-height:45px; text-decoration:none; font-size:18px; border-radius:5px; border:1px solid #ccc; cursor:pointer}
.event_tab1 .tabnav li:hover,
.event_tab1 .tabnav li.active{background:#00b188; border:1px solid #00b188; color:#fff; }
.event_tab1 .tabcontent{position:relative; border-top:none; background:url("//xexymix.jpg3.kr/xexymix/main/mobile/2025/250220_join_benefit_con2_bg.jpg"); background-position:bottom;}
.prd_thumb {width:fit-content; margin:0 auto;}
.prd_thumb li{float:left; padding:0 5px; width:25%;}
#content .prd_thumb li img{min-width:0px; width:100%}

/*event_tab2*/
.event_tab2{background:url('//xexymix.jpg3.kr/xexymix/sub/event/2025/250220_join_benefit_con3.jpg')no-repeat center; background-size:cover; text-align:center}
.event_tab2 .tabnav li{display:inline-block;text-align:center; background-color:#fff; padding:12px 4.95%; font-size:18px; color:#888; margin:11% 5px 2%; border-radius:5px; cursor:pointer}
.event_tab2 .tabnav li.active{background:#00b188; color:#fff}
.event_tab2 .tabcontent{position:relative; padding-bottom:3%}
.event_tab2 .tabcontent .bg_img{display:inline-block; width:100%; max-width:1440px; height:480px; background-size:cover; background-repeat:no-repeat;}
.event_tab2 .tabcontent .bg_img:after{content:""; display:block; width:100%; height:480px; background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);}
.event_tab2 .tabcontent .box{position:absolute; top:50%; transform:translateY(-90%); left:20%; font-size:18px; text-align:left; color:#fff}
.event_tab2 .tabcontent .box .main_tit{font-size:2.3em; line-height:1.4; font-weight:600; padding-bottom:10px; }
.event_tab2 .tabcontent .box a{background:#00b188; font-size:18px; color:#fff; border-radius:100px; position:absolute; width:300px; text-align:center; margin-top:30px; line-height:70px}

/* 유의사항 */
.card_guide { max-width: 1920px; margin: 0 auto; }
.card_guide .card_tit { position: relative; font-size: 18px; text-align: center; line-height: 130px; font-weight: 400; cursor: pointer;}
.card_guide .card_tit::before{content:""; display:block; width:80%; height:1px; background:#ddd; margin:0 auto;}
.card_guide .card_tit span {display:block; position: relative;  letter-spacing: -1px; width:fit-content; text-align:left; margin:0 auto; padding-right: 22px; }
.card_guide .card_tit span::before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 44%; right: 0; transform: rotate(45deg); border-bottom: 1.5px solid #000; border-right: 1.5px solid #000; transition: 0.4s; }
.card_guide.on .card_tit span::before { transform: rotate(-135deg); top: 48%; }
.card_guide .card_cont { position: relative; }
.card_guide .card_cont img { width: 100%; }
#evt01 .card_guide .card_tit {color: #000000; background: #f4f4f4;}
#evt02 .card_guide .card_tit {color: #000000; background: #faffdd;}
#evt03 .card_guide .card_tit {color: #000000; background: #f4f4f4;}

/* 공통 유의사항 */
.content_guide{background:#f4f4f4;color:#000; font-weight:300}
.common_guide{width:100%; max-width:1440px; margin:0 auto; line-height:1.6; font-size:14px; padding:3% 0; text-align:center}
.content_guide h4{font-size:18px; font-weght:600}

/* 고정 cta */
.evt_tab_box .fixed_cta{display:block; width:100%; line-height:70px; text-align:center; background:#00b188; color:#fff; font-size:20px; position:fixed; bottom:0; left:0; z-index:9}
.evt_tab_box .fixed_cta:hover{color:#fff;}
.evt_tab_box .fixed_cta span::after { content: ""; width: 10px; height: 10px; position: absolute; top: 31px; margin-left: 10px; transform: rotate(45deg); border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transition: 0.4s; }

/* 팝업 레이어 */
.popup_layer { display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;  overflow-y: scroll; }
.popup_layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); }
.popup_layer .contImg { display: block; position: absolute; top: 50%; left: 50%; translateX(-50%); width: 800px; height: auto; z-index: 10; }
.popup_layer .contImg .layerClose { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; }
.popup_layer .contImg .layerClose:before,
.popup_layer .contImg .layerClose:after { content: ""; width: 33px; height: 2px; position: absolute; top: 50%; right: 8px; background: #b3b3b3; transition: 0.4s; }
.popup_layer .contImg .layerClose:before { transform: rotate(135deg); }
.popup_layer .contImg .layerClose:after { transform: rotate(45deg); }

@media (max-width: 1000px) {
.join_event_menu_wrap{height:70px}
.join_event_menu a{font-size:16px; line-height:70px;}
.event_tab1 .tabnav li{font-size:16px}
.event_tab2 .tabnav li{padding:12px 3%; }
.event_tab2 .tabcontent .bg_img{height:340px; background-size:150%; background-repeat:no-repeat; background-position:top;}
.event_tab2 .tabcontent .bg_img:after{height:340px}
.event_tab2 .tabcontent .box{left:10%}
}

@media (max-width: 1360px) {
#evt03 > a{bottom: 18.5%;}
}

/* BASIC css end */