﻿@charset "utf-8";

/*-------------------------------------------------
Contents Style Sheet - 밀크T 여름방학 프로모션
Author : jane228@chunjae.co.kr
Create date : 2025.06
-------------------------------------------------*/

/* common */
.wrapEvent{position:relative;width:100%}
.wrapEvent *{box-sizing:border-box;font-family:inherit;font-weight:inherit}
.wrapEvent .inner{position:relative;max-width:1140px;margin:0 auto}
.wrapEvent button{border:none;outline:none;cursor:pointer}

/* reply 공통 */
.wrapEvent .event02 .replyArea{padding:38px 0 80px;background:#fff4f9}
.wrapEvent .event03 .replyArea{padding:50px 0 47px}
.wrapEvent .replyArea .inner{width:1030px;letter-spacing:-0.025em;text-align:left;color:#000}
.wrapEvent .titArea{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #000}
.wrapEvent .titArea strong{font-size:24px;font-weight:500;color:#222;letter-spacing:-0.06em}
.wrapEvent .txtLength{margin-bottom:10px;color:#777;font-size:14px}
.wrapEvent .myReply{display:flex;align-items:center;justify-content:flex-end}
.wrapEvent .myReply label{margin-right:18px;font-size:20px;font-weight:500;line-height:32px;color:#222}
.wrapEvent .myReply input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:62px;height:34px;margin:0;border-radius:17px;background:#cfcfcf;cursor:pointer}
.wrapEvent .myReply input[type=checkbox]:after{position:absolute;top:5px;left:7px;width:24px;height:24px;background:#fff;border-radius:50%;content:'';transition:all 0.35s}
.wrapEvent .myReply input[type=checkbox]:checked{background:#ffb2d4}
.wrapEvent .myReply input[type=checkbox]:checked:after{left:31px}
.wrapEvent .event03 .myReply input[type=checkbox]:checked{background:#95dba7}

.wrapEvent .replyWrite{display:-webkit-box;display:-ms-flexbox;display:flex;column-gap:10px;margin-bottom:20px}
.wrapEvent .replyWrite textarea{width:900px;height:100px;padding:16px 30px;font-size:16px;line-height:24px;color:#000;resize:none;outline:none}
.wrapEvent .replyWrite textarea::placeholder{font-size:inherit;font-family:inherit;font-weight:inherit;color:#777}
.wrapEvent .replyWrite .textareaWrap textarea::-webkit-scrollbar{display:none}
.wrapEvent .replyWrite .btnApply{width:120px;height:100px;background-color:#000;color:#fff;font-size:18px}

.wrapEvent .replyList{margin-top:20px}
.wrapEvent .replyItem{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:15px 20px;border:solid 1px #dddddd;background:#fff}
.wrapEvent .replyItem + .replyItem {margin-top:10px}
.wrapEvent .replyItem img{width:70px;height:70px}
.wrapEvent .replyItem .textWrap{position:relative;flex-grow:1;margin-left:20px;padding-right:80px}
.wrapEvent .replyItem .textWrap .info{margin-bottom:12px;font-size:14px}
.wrapEvent .replyItem .textWrap .text{font-size:16px;line-height:24px}
.wrapEvent .replyItem .textWrap .info .writer{position:relative;display:inline-block;padding-right:30px}
.wrapEvent .replyItem .textWrap .info .writer::after{position:absolute;top:50%;right:0;width:1px;height:10px;margin-top:-5px;background-color:#b2b2b2;content:''}
.wrapEvent .replyItem .textWrap .info .date{display:inline-block;padding-left:30px}
.wrapEvent .replyItem .textWrap .btnDel{display:inline-block;position:absolute;top:0;right:0;width:60px;height:30px;background-color:#000;font-size:14px;color:#fff}

.wrapEvent .paging{overflow:hidden;margin-top:20px;text-align:center}
.wrapEvent .paging a{display:inline-block;width:30px;height:30px;margin:0 5px;border-radius:50%;color:#777;line-height:29px;font-size:18px;font-weight:400}
.wrapEvent .paging a.active{background-color:#000;color:#fff}
.wrapEvent .paging [class^="btn"]{display:inline-block;width:25px;height:30px;margin:0;border-radius:0;background:url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/btn_paging.png)no-repeat left center/10px 16px;text-indent:-999em}
.wrapEvent .paging .btnNext{transform:rotate(180deg)}

/* visual */
.wrapEvent .visual{position:relative;padding:100px 0 120px;height:1051px;background:#32cafe url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/visual_bg.jpg) no-repeat center top / 1920px;text-align:center}
.wrapEvent .visual .period{display:inline-block;margin-top:30px}
.wrapEvent .visual .gift{position:absolute;bottom:120px;left:50%;transform:translateX(-50%)}

/* quick */
.wrapEvent .quickNavi{z-index:10;position:absolute;top:931px;left:0;right:0;background:#fff}
.wrapEvent .quickNavi.fixed{position:fixed;top:0}
.wrapEvent .quickNavi ul{display:flex;align-items:center;justify-content:center}
.wrapEvent .quickNavi li{width:380px;height:120px}
.wrapEvent .quickNavi a{display:block;height:100%;background-repeat:no-repeat;background-size:1140px;background-image:url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/navi.jpg);text-indent:-99999px}
.wrapEvent .quickNavi li:nth-of-type(1) a{background-position:0 0}
.wrapEvent .quickNavi li:nth-of-type(2) a{background-position:-380px 0}
.wrapEvent .quickNavi li:nth-of-type(3) a{background-position:-760px 0}
.wrapEvent .quickNavi li.on a{background-position-y:-120px}

/* event01 */
.wrapEvent .event01{height:1232px;background:#017eff url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/event01_cont01_bg_250728.jpg) no-repeat center top / 1920px} /* #149807 25-07-28 수정 */
.wrapEvent .event01 .btnGo{position:absolute;top:603px;right:128px;width:110px;height:34px;text-indent:-99999px}
.wrapEvent .event01 .btnArea{display:flex;justify-content:center}
.wrapEvent .event01 .btnArea a{z-index:1;position:relative;margin:0 40px}
.wrapEvent .event01 .btnArea a:first-child:after{z-index:-1;position:absolute;bottom:0;left:-59px;width:88px;height:109px;background:url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/img_dumi_i.png)no-repeat 0 0;content:''}
.wrapEvent .event01 .btnArea a:last-child:after{z-index:-1;position:absolute;bottom:0;right:-69px;width:101px;height:137px;background:url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/img_dumi_ele.png)no-repeat 0 0;content:''}

/* event02 */
.wrapEvent .event02 .contArea01{height:2079px;background:#ffe6f1 url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/event02_cont01_bg.jpg) no-repeat center top / 1920px}
.wrapEvent .event02 .picture{position:absolute;top:0;left:-38px}
.wrapEvent .event02 .badge{position:absolute;top:50px;right:55px}
.wrapEvent .event02 .review{position:relative}
.wrapEvent .event02 .review ul{display:flex;justify-content:center}
.wrapEvent .event02 .review ul li{overflow:hidden;display:flex;flex-direction:column;width:240px;height:340px;margin:0 10px;border-radius:30px}
.wrapEvent .event02 .review .thumb{display:block;width:100%;height:240px}
.wrapEvent .event02 .review .thumb img{width:100%;margin-top:-27px}
.wrapEvent .event02 .review li:nth-of-type(2) .thumb img{margin-top:-11px}
.wrapEvent .event02 .review [class*=obj]{position:absolute}
.wrapEvent .event02 .review .obj01{top:104px;left:130px}
.wrapEvent .event02 .review .obj02{top:3px;right:129px}
.wrapEvent .event02 .review .obj03{top:325px;left:86px}
.wrapEvent .event02 .review .obj04{top:316px;right:1px}

.wrapEvent .event02 .contArea02{padding-bottom:48px;background:#ffd6e8}
.wrapEvent .event02 .step{margin-left:-42px}
.wrapEvent .event02 .roundBox{position:relative;width:100%;height:80px;margin-top:30px;border-radius:40px;background:#fff;display:flex;align-items:center}
.wrapEvent .event02 .roundBox .btn{position:absolute;top:0;right:0;width:180px;height:80px;border-radius:40px;background:url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/btn_bg.png) no-repeat 0 0 / 180px}
.wrapEvent .event02 .roundBox + .roundBox{margin-top:16px;border:3px solid #8200f2}
.wrapEvent .event02 .roundBox + .roundBox .btn{top:-3px;right:-3px}
.wrapEvent .event02 .roundBox strong{margin:0 30px 0 55px}
.wrapEvent .event02 .roundBox .hashtag{display:flex}
.wrapEvent .event02 .roundBox .hashtag li{margin-right:16px;padding:12px 12px 11px 12px;border-radius:20px;background:#ffe062;font-size:18px;font-weight:900;color:#000;letter-spacing:-0.05em}
.wrapEvent .event02 .roundBox input[type=text]{width:670px;height:44px;border-radius:22px;border:2px solid #ffc6df;padding:16px 22px;font-size:14px;font-family:inherit;font-weight:inherit;color:#000;outline:none}
.wrapEvent .event02 .roundBox input[type=text]::placeholder{color:#424242;font-family:inherit;font-weight:inherit}
.wrapEvent .event02 .notice{margin:10px 0 0 55px;color:#500020;font-size:16px;line-height:26px;letter-spacing:-0.05em}

/* event03 */
.wrapEvent .event03 .contArea01{background:#e0fae7 url(//cdndata.milkt.co.kr/ele/www/Images/event/250623_summer/event03_cont01_bg.jpg) no-repeat center center / 1920px}
.wrapEvent .event03 .contArea01 .info{margin-left:-37px}

/* 유의사항 */
.wrapEvent .noticeArea{background:#f8f8f8}
.wrapEvent .noticeArea .title{display:flex;align-items:center;justify-content:center;height:80px;background:#222}
.wrapEvent .noticeArea .inner{padding:50px 0;font-size:16px;color:#222;line-height:26px;letter-spacing:-0.01em}
.wrapEvent .noticeArea .inner strong,
.wrapEvent .noticeArea .inner .info{font-weight:600}
.wrapEvent .noticeArea .inner ul{margin-bottom:25px}

