@charset "utf-8";
@font-face {
    font-family: 'GmarketSans';
    src: url('./font/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    font-weight: 700;
    font-style: normal;
    src: url('./font/GmarketSansBold.eot');
    src: url('./font/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('./font/GmarketSansBold.woff2') format('woff2'),
         url('./font/GmarketSansBold.woff') format('woff'),
         url('./font/GmarketSansBold.ttf') format("truetype");
    font-display: swap;
}

/******************** 공통 ********************/
.dim {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); z-index:1000; display:none;}
body.noScroll {display:block; height:100%; overflow:hidden;}
* {letter-spacing:0px; font-weight:400; line-height:1.0; word-break:keep-all;}
.wrap * {font-family:'GmarketSans'; font-weight:400; font-size:18px;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed , .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.evWrap {position:relative; overflow:hidden;}
.evWrap .subDim {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); z-index:51; display:none;}

.gloHeader {display:flex; justify-content:space-between; align-items:center; position:absolute; left:0; top:0; padding:50px 80px; width:100%; z-index:100;}
.gloHeader .brand a {display:block; width:127px; height:54px; background:url(../../../img/logo_mt_all.svg) no-repeat 50% 50%; background-size:100%;}
.gloHeader .gloUtil {display:flex; justify-content:flex-start; align-items:center; gap:17px;}
.gloHeader .gloUtil .account {display:flex; justify-content:flex-start; align-items:center; gap:26px;}
.gloHeader .gloUtil .account .txtMenu {display:block; position:relative;}
.gloHeader .gloUtil .account .txtMenu a {display:block; color:#000; font-size:14px; font-weight:500; padding:12px 14px; border-radius:50px; border:1px solid #000;}
.gloHeader .gloUtil .logo a {display:block; width:75px; height:21px; background:url(../../../img/logo_miraen_kr.svg) no-repeat 50% 50%;}

.gloHeader.white .gloUtil .account .txtMenu a {color:#FFF; border:1px solid #FFF;}
.gloHeader.white .gloUtil .logo a {display:block; width:75px; height:21px; background:url(../../../img/logo_miraen_kr_w.svg) no-repeat 50% 50%; background-size:100%;}

.comnChk {display:inline-flex; justify-content:flex-start; align-items:center; gap:28px;}
.comnChk input {display:flex; justify-content:flex-start; align-items:center; gap:0px; cursor:pointer; width:0; height:0; position:relative;}
.comnChk input:before {content:''; width:18px; height:18px; background:url(../img/bg_chk_off.svg) no-repeat 50% 50%; background-size:18px; flex:0 0 auto;}
.comnChk input:checked:before {content:''; background:url(../img/bg_chk_on.svg) no-repeat 50% 50%; background-size:18px;}

.comnRadio {display:inline-flex; justify-content:flex-start; align-items:center; gap:28px;}
.comnRadio input {display:flex; justify-content:flex-start; align-items:center; gap:0px; cursor:pointer; width:0; height:0; position:relative;}
.comnRadio input:before {content:''; width:18px; height:18px; background:url(../img/bg_radio_off.svg) no-repeat 50% 50%; background-size:18px; flex:0 0 auto;}
.comnRadio input:checked:before {content:''; background:url(../img/bg_radio_on.svg) no-repeat 50% 50%; background-size:18px;}

input[type="radio"],
input[type="checkbox"] {-webkit-appearance:none; appearance:none; border:0; background:none; border-radius:0;}

/** 이벤트 하단 공통 **/
.eventCauSec {background:#050050; position:relative; z-index:10;}
.eventCauSec * {font-family:'Pretendard Variable';}
.eventCauSec .innerCon {padding:90px 0; width:100%; max-width:1200px; margin:0 auto;}

.cauCon {display:block; height:auto; overflow:hidden;}
.cauCon .title {color:#FFF; font-size:26px; font-weight:500; margin-bottom:30px;}
.cauCon .title:before {content:''; display:inline-block; width:23px; height:23px; background:url(../../../img/ico_cau_w.svg) no-repeat 50% 50%; background-size:100%; margin-right:10px; vertical-align:0;}
.cauCon .cauBox {display:block; height:auto; overflow:hidden; margin-bottom:30px; padding-left:0px;}
.cauCon .cauBox .caTitle {color:#FFF; font-size:20px; padding-left:0px; position:relative; font-weight:500; margin-bottom:10px; font-family:'GmarketSansBold'; line-height:1.0; padding:8px 0;}
.cauCon .cauBox li {display:block; height:auto; overflow:hidden; padding:4px 0 4px 35px; font-size:18px; position:relative; color:#FFF; line-height:1.6; font-weight:400;}
.cauCon .cauBox li a {color:#CDFF70; font-weight:500; line-height:1.4;}
.cauCon .cauBox li:after {content:''; position:absolute; left:20px; top:15px; width:5px; height:1px; background:#FFF;}
.cauCon .cauBox li em {color:#FFF;}
.cauCon .cauBox li.cauMidTitle {color:#222; font-size:18px; margin-bottom:5px; padding-left:15px;}
.cauCon .cauBox li.cauMidTitle.device {margin-top:15px;}
.cauCon .cauBox li.cauMidTitle:after {background:none;}
.cauCon .cauBox li.simple:after {display:none;}

/** paging **/
.pagingWrap {display:flex; justify-content:center; align-items:center; gap:5px; margin:60px 0;}
.pagingWrap a {display:inline-flex; justify-content:center; align-items:center; border-radius:50%; color:#000; font-size:16px; width:40px; height:40px; line-height:1.0; font-weight:400;}
.pagingWrap a.dir {border:2px solid transparent; width:30px;}
.pagingWrap a.dir.first {background:url(../../../img/btn_dir_end.svg) no-repeat 50% 50%; background-size:auto 36px; transform:rotate(180deg);}
.pagingWrap a.dir.forward {background:url(../../../img/btn_dir.svg) no-repeat 50% 50%; background-size:auto 36px; transform:rotate(180deg);}
.pagingWrap a.dir.back {background:url(../../../img/btn_dir_end.svg) no-repeat 50% 50%; background-size:auto 36px;}
.pagingWrap a.dir.backword {background:url(../../../img/btn_dir.svg) no-repeat 50% 50%; background-size:auto 36px;}
.pagingWrap a.on {background:#5A371E; color:#FFF; font-weight:700; position:relative;}

.forDesk {display:block;}
.forPc {display:block;}
.forMo {display:none;}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content div {height:auto; padding:5px 0;}

/******* btn *******/
a.pBtn {display:flex; justify-content:center; align-items:center; padding:28px 0; gap:8px; color:#FFF; font-size:28px; font-weight:600; position:relative; border-radius:8px; width:100%; max-width:454px;}
a.pBtn:after {content:''; width:11px; height:22px; background:url(../img/ar_tail_w.svg) no-repeat 50% 50%; background-size:100%;}
a.pBtn.policy {background:#000;}
a.pBtn.mypoint {background:#FF4A73;}

/*
a.goTop {position:fixed; right:24px; bottom:24px; width:66px; height:66px; border-radius:50%; background:#2F2C29; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#FFF; font-size:15px; font-weight:600; text-align:center; gap:8px;  z-index:1000; opacity:1; transform:translateX(0); transition:.4s all;}
a.goTop:before {content:''; width:18px; height:11px; background:url(../../../img/ar_top.svg) no-repeat 50% 50%; background-size:100%; flex:0 0 auto;}
a.goTop.hide {opacity:0; transform:translateX(120px);}
*/
/******************** 공통 ********************/

/******************** 개별 이벤트 ********************/
.innerCon {position:relative; width:100%; max-width:1162px; margin:0 auto;}
.evHead {position:relative; background:#FEEFD8 url(../img/ev_head_bg.jpg) no-repeat left top; background-size:3840px auto; padding:140px 0;}
.evHead h2 {position:relative; width:100%; max-width:818px; margin:0 auto 24px;}
.evHead h2 .bubble {position:absolute; left:-96px; top:-60px; width:110px; height:103px;}
.evHead .desc {color:#03216D; font-size:26px; line-height:1.5; text-align:center;}
.evHead .desc span {font-size:30px;}
.evHead .target {position:relative; display:flex; justify-content:center; align-items:center; width:100%; max-width:772px; margin:60px auto 0;}
.evHead .target ul {display:inline-flex; flex-wrap:wrap; gap:14px 24px;}
.evHead .target ul li {display:flex; align-items:center; gap:12px; line-height:1.0;}
.evHead .target ul li .item {width:126px; padding:10px 20px 6px; border:2px solid #202696; background:#FFF; border-radius:100px; text-align:center; color:#202696; font-size:22px; font-family:'GmarketSansBold'; line-height:1.0;}
.evHead .target ul li .ipCon {color:#111; font-size:24px; padding-top:6px;}
.evHead .innerCon .deco {position:absolute;}
.evHead .innerCon .deco.left {left:-180px; top:20px; width:231px; height:127px; background:url(../img/ev_head_deco01.png) no-repeat 50% 50%; background-size:100%;}
.evHead .innerCon .deco.right {right:-180px; top:40%; width:312px; height:257px; background:url(../img/ev_head_deco02.png) no-repeat 50% 50%; background-size:100%;}

.evBenefit {position:relative; margin-top:120px;}
.evBenefit .innerCon {display:flex; align-items:stretch; z-index:20;}
.evBenefit .innerCon .temp {background:rgba(0, 0, 0, 0.4); width:calc(50% - 5px);}
.benefitBox {width:50%; padding:0 16px; position:relative;}
.benefitBox .title {position:absolute; width:182px; left:50%; top:-8px; transform:translate(-50%, 0); z-index:10;}
.benefitBox .bCont {position:relative; border:6px solid #FFF; border-radius:32px; background: rgba(255, 255, 255, 0.50); box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(13px); height:100%; padding:62px 40px 50px;}
.benefitBox .bCont .bTitle {color:#222; font-size:38px; line-height:1.3; letter-spacing:-1px; text-align:center;}
.benefitBox .bCont .bTitle strong {font-size:38px; line-height:1.3; font-family:'GmarketSansBold';}
.benefitBox .bCont .bTitle em {font-size:38px; line-height:1.3; color:#0381FF; font-family:'GmarketSansBold';}
.benefitBox .bCont .giftBox {position:relative; margin-top:36px;}

.evPollSec {position:relative; background:#FEEFD8; padding:0 0 160px;}
.pollTab {display:flex; align-items:stretch; gap:18px; padding:0 50px;}
.pollTab > a {width:calc(33.33334% - 12px); position:relative; border-radius:16px 16px 0 0; padding:34px 0 24px 0; opacity:0.35; transition:.4s ease;}
.pollTab > a p {text-align:center; color:#FFF; font-size:24px; font-family:'GmarketSansBold'; line-height:1.0; position:relative; z-index:10; margin-left:30px;}
.pollTab > a p em {font-size:24px; font-family:'GmarketSansBold';}
.pollTab > a .obj {position:absolute; left:0; bottom:-36px; width:161px; height:124px; transition:.4s ease;}
.pollTab > a.pollEle {background:#02A39F;}
.pollTab > a.pollMid {background:#C43CB4;}
.pollTab > a.pollHigh {background:#7547D9;}
.pollTab > a.on {opacity:1.0;}
.pollTab > a.on .obj {bottom:0;}
.pollTab > a.none {cursor:not-allowed;}
.pollTab > a:hover {opacity:1.0;}

.pollContWrap {position:relative;}
.pollContWrap .pollCont {display:none; border-radius:32px; background:#FFF; box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.30); padding:60px 50px 80px; position:relative;}
.pollContWrap .pollCont.noLogin {border:6px solid #444;}
.pollContWrap .pollCont.noLogin .txt {text-align:center; color:#000; font-size:28px; line-height:1.3;}
.pollContWrap .pollCont.noLogin .txt br {display:none;}

.pollContWrap .pollCont.formEle {border:6px solid #02A39F;}
.pollContWrap .pollCont.formMid {border:6px solid #C43CB4;}
.pollContWrap .pollCont.formHigh {border:6px solid #7547D9;}
.pollContWrap .pollCont.pollComplete {border:6px solid #999;}
.pollContWrap .pollCont a.btn {position:absolute; left:50%; bottom:-30px; transform:translate(-50%, 0);}
.pollContWrap .pollCont.formEle a.btn {background:#02A39F;}
.pollContWrap .pollCont.formMid a.btn {background:#C43CB4;}
.pollContWrap .pollCont.formHigh a.btn {background:#7547D9;}
.pollContWrap .pollCont.pollComplete a.btn {background:#999; cursor:not-allowed;}

a.btn {position:relative; padding:16px 60px 12px; border-radius:100px; letter-spacing:-1px; box-shadow: 0 4px 8px 0 #818181; transition:.4s ease;}
a.btn:after {content:''; position:absolute; left:5px; top:5px; width:calc(100% - 10px); height:calc(100% - 10px); background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 40.52%); border-radius:100px; opacity:0.2;}
a.btn p {color:#FFF; font-size:32px; font-family:'GmarketSansBold'; line-height:1.0; position:relative; z-index:10;}
a.btn.login {background:#444;}
a.btn.login:hover {background:#222;}

.perPoll {display:block; padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #E5E5E5;}
.perPoll * {font-family:'Pretendard Variable';}
.perPoll:last-child {padding-bottom:0; margin-bottom:0; border-bottom:0;}
.perPoll .question {display:flex; gap:6px; margin-bottom:16px; align-items:center;}
.perPoll .question p {color:#222; font-size:22px; font-weight:600; line-height:1.4;}
.perPoll .question em {color:#222; font-size:22px; font-weight:600; line-height:1.4;}
.perPoll .question span {color:#777; font-size:18px;}
.perPoll > ul {padding-left:24px; display:flex; flex-direction:column; gap:6px;}
.perPoll > ul li {display:flex; gap:10px; height:auto; min-height:36px; font-size:20px; font-weight:500; line-height:1.4;}
.perPoll > ul li input[type="text"] {height:36px; line-height:34px; background:#f9f9f9; padding:0 16px; font-size:18px; color:#222;}
.perPoll > ul li textarea {height:120px; line-height:1.4; background:#f9f9f9; padding:16px; font-size:18px; color:#222; border-radius:6px; background:#f9f9f9;}
.perPoll .sample {padding-left:24px; color:#777; font-size:18px; margin-bottom:22px;}

.childPoll {padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #E5E5E5;}
.partTitle {position:relative; background:#f2f9ff; border-radius:16px; padding:30px; color:#0381FF; font-size:22px; font-weight:700; font-family:'Pretendard Variable'; margin-bottom:50px;}
.partTitle p {color:#777; position:relative; padding-left:16px; font-size:18px; font-weight:500; font-family:'Pretendard Variable'; margin-top:10px;}
.partTitle p:after {content:'※'; position:absolute; left:0; top:0;}

.introPoll {position:relative; padding:20px 0px; margin-bottom:50px; border-top:1px solid #333; border-bottom:1px solid #333;}

.pollContWrap .pollCont.formEle .introPoll {border-top:1px solid #02A39F; border-bottom:1px solid #02A39F;}
.pollContWrap .pollCont.formMid .introPoll {border-top:1px solid #C43CB4; border-bottom:1px solid #C43CB4;}
.pollContWrap .pollCont.formHigh .introPoll {border-top:1px solid #7547D9; border-bottom:1px solid #7547D9;}

.introPoll .introTxt {color:#333; font-size:18px; line-height:1.4; font-weight:500; font-family:'Pretendard Variable';}

@media only screen and (max-width:1200px) {
	.gloHeader {padding:20px;}
	.evInner {padding:0 20px;}
	.eventCauSec .innerCon {padding:90px 20px;}
}

@media only screen and (max-width:1024px) {
	.forDesk {display:none !important;}
	.forMo {display:block;}

	.gloHeader {padding:15px;}
	.gloHeader .brand a {width:64px; height:28px;}
	.gloHeader .gloUtil {gap:16px;}
	.gloHeader .gloUtil .logo a {width:75px !important; height:22px !important; background-size:100% auto !important;}
	.gloHeader .gloUtil .account .txtMenu a {font-size:12px; padding:6px 12px;}

	#mo-footer {margin-top:0;}
	#mo-footer .mo-ft-top {padding-top:0;}

	.eventCauSec .innerCon {padding:30px 20px;}
	.cauCon {margin-top:0px;}
	.cauCon .title {font-size:18px; margin-bottom:20px;}
	.cauCon .title:before {width:18px; height:18px; vertical-align:-2px; margin-right:5px;}
	.cauCon .cauBox {padding-left:11px;}
	.cauCon .cauBox:last-child {margin-bottom:0;}
	.cauCon .cauBox .caTitle {font-size:16px; padding-left:10px; margin-bottom:5px;}
	.cauCon .cauBox .caTitle:after {width:4px; height:4px; top:7px;}
	.cauCon .cauBox li {font-size:14px; line-height:1.3; padding:4px 0 4px 10px;}
	.cauCon .cauBox li:after {left:0px; top:11px;}

	/*********** 개별 이벤트  **************/
	.evHead {padding:80px 0 60px; background-size:auto 560px;}
	.evHead .innerCon .deco.left {left:15%; top:-3%; width:115px; height:64px;}
	.evHead .innerCon .deco.right {right:unset; left:10px; top:34%; width:100px; height:82px;}
	.evHead h2 {margin:0 auto 30px; position:relative; z-index:10;}
	.evHead .desc {font-size:18px; padding:0 20px; position:relative; z-index:10; line-height:1.5;}
	.evHead .desc span {font-size:20px; margin:10px 0 0 5px;}

	.evHead .target {padding:0 20px; margin:30px 0 0;}
	.evHead .target ul {display:flex; flex-direction:column; gap:6px;}
	.evHead .target ul li {align-items:flex-start;}
	.evHead .target ul li .item {font-size:14px; width:80px; padding:8px 0; flex:0 0 auto;}
	.evHead .target ul li .ipCon {font-size:16px; margin-top:0px; line-height:1.4;}

	.evBenefit {padding:0 20px; margin-top:50px;}
	.evBenefit .innerCon {flex-direction:column; gap:30px;}
	.benefitBox {width:100%; padding:0;}
	.benefitBox .title {width:130px; top:-6px;}
	.benefitBox .bCont {border-radius:16px; border:4px solid #FFF; padding:40px 10px 20px;}
	.benefitBox .bCont .bTitle {font-size:20px;}
	.benefitBox .bCont .bTitle strong {font-size:20px;}
	.benefitBox .bCont .bTitle em {font-size:20px;}
	.benefitBox .bCont .giftBox {margin-top:20px;}

	.evPollSec {padding:0 20px 60px;}
	.pollTab {padding:0 0px; gap:2px; margin-bottom:-14px;}
	.pollTab > a {width:calc(33.33334% - 1.333333px); padding:16px 0 24px; border-radius:10px 10px 0 0; overflow:hidden;}
	.pollTab > a .obj {width:60px; height:46px; bottom:-5px;}
	.pollTab > a p {font-size:18px; text-align:center; margin:0; padding:0 2px 0 14px;}
	.pollTab > a p em {display:block; font-size:16px;}
	.pollTab > a.on .obj {bottom:10px; left:-10px;}
	.pollContWrap .pollCont {border-radius:16px; padding:30px 20px;}
	.pollContWrap .pollCont a.btn {bottom:-22px;}
	.pollContWrap .pollCont.noLogin {padding:30px 20px; border:3px solid #444;}
	.pollContWrap .pollCont.noLogin .txt {font-size:16px;}
	.pollContWrap .pollCont.noLogin .txt br {display:block;}
	.pollContWrap .pollCont.formEle {border:3px solid #02A39F;}
	.pollContWrap .pollCont.formMid {border:3px solid #C43CB4;}
	.pollContWrap .pollCont.formHigh {border:3px solid #7547D9;}

	.perPoll {padding-bottom:30px; margin-bottom:30px;}
	.perPoll .question {margin-bottom:18px; align-items:flex-start;}
	.perPoll .question p {font-size:16px;}
	.perPoll .question em {font-size:16px; flex:0 0 auto;}	
	.perPoll .question span {font-size:14px;}
	.perPoll > ul {gap:8px; padding-left:16px;}
	.perPoll > ul li {font-size:16px; min-height:30px; align-items:center;}
	.perPoll .sample {font-size:14px;}
	.comnRadio {font-size:16px; line-height:1.3; align-items:flex-start;}
	.comnRadio input {align-items:flex-start;}
	.comnChk {font-size:16px; line-height:1.3; align-items:flex-start;}
	.comnChk input {align-items:flex-start;}
	.perPoll > ul li input[type="text"] {font-size:16px;}
	.perPoll > ul li textarea {height:100px; font-size:16px;}
	.partTitle {padding:16px; font-size:16px; line-height:1.4; border-radius:8px; margin-bottom:30px;}
	.partTitle p {font-size:12px; padding-left:12px; line-height:1.4;}

	.introPoll {position:relative; padding:14px 0px; margin-bottom:30px;}
	.introPoll .introTxt {font-size:14px;}

	a.btn {padding:12px 30px;}
	a.btn:after {left:3px; top:3px; width:calc(100% - 6px); height:calc(100% - 6px);}
	a.btn p {font-size:18px;}

	.cauCon .cauBox li a {font-size:14px; line-height:1.4;}
}

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

}