@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-size:12px;
	vertical-align:baseline;
	background:transparent;
	-webkit-text-size-adjust:none;
	font-family:'Malgun Gothic','Noto Sans KR', 'Dotum', 'Gulim', 'Arial', sans-serif;
	list-style:none;
	line-height:1;
}

ol, ul{list-style:none; display: inline-block; padding: 0; margin: 0;}
img{vertical-align:top;margin: 0px; padding:0; display: inline-block}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;word-break:break-all;}
table th, table td{vertical-align:middle;}
fieldset{margin:0;padding:0;border:0 none;}
legend, caption, .skip{position:absolute; left:-9999px; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}
caption{position:static;}

html, body,input,button,textarea{font-size:12px; color:#888; font-family:'Noto Sans KR', 'Dotum', 'Gulim', 'Arial', sans-serif;}

a {display: inline-block; color:#a7a7a7; text-decoration:none;  -webkit-tap-highlight-color: rgba(0,0,0,0);   -webkit-tap-highlight-color: transparent; /* For some Androids */ }
a:hover {color:#a7a7a7; text-decoration:none;}
img,input{vertical-align:top;}
img,background-image{vertical-align:top; width:100%}
label{vertical-align:middle; font-size:14px; cursor:pointer;}
textarea {border:1px solid #dcdcdc; color:#888; font-size:13px; line-height:18px; padding:5px; overflow-y:auto; resize:none;}
h1,h2,h3,h4,h5,h6,th,strong {font-weight:600;}
select {font-family:'Noto Sans KR', 'Dotum', 'Gulim', 'Arial', sans-serif;}
input, select {vertical-align:middle;}
select{padding:7px;border:1px solid #ddd;}

input,textarea,select{-webkit-appearance: none;}

/*.input{border:0px;display:inline-block;padding:7px;border:1px solid #ddd;line-height:14px;color:#444 !important;font-size:14px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
*/
.B{font-weight:bold; font-size: 13px; color: #232323}
.flex{display: flex;}

/*Basic*/
#warp {position:relative; width:100%; z-index:999; margin:0 auto;}
.img{position: relative; width:100%;}
.img img{width:100%; height: auto;}

.sec02{position: relative; background: url(/Resources/Event/IceOne/event_ox_bg_m.png)no-repeat center/cover; padding-bottom:15vw;}
.sec02 .title{text-align: center; position: relative; padding:17vw 0 7vw; width: 80%; margin: 0 auto; max-width:1000px;}
.sec02 .flex{justify-content: center; align-items: center; width: 96%; margin: 0 auto;}
.sec02 .flex .box{background: url(/Resources/Event/IceOne/event_ox_box_01.png)no-repeat center/100%; width: 58.4vw; height:85.3vw; max-width: 438px; max-height:640px; position: relative;}
.sec02 .flex .box + .box{margin-left:2vw;}
.sec02 .flex .box:last-child{background: url(/Resources/Event/IceOne/event_ox_box_02.png)no-repeat center/100%; width: 58.4vw; height:85.3vw; max-width: 438px; max-height:640px; }
.sec02 .flex .box ul{position: absolute; left:50%; bottom:0; transform: translate(-50%,-50%);}
.sec02 .flex .box ul li + li{margin-top: 5px;}
.label {display: block; cursor: pointer;}
.hiddenRadio {display: none;}
.hiddenRadio:checked + .radio {background: url(/Resources/Event/IceOne/img_radio_o_on.png) no-repeat center/100% ;}
.radio {width: 42.13vw; height:10.13vw; max-width: 361px; max-height: 91px; background: url(/Resources/Event/IceOne/img_radio_o.png) no-repeat center/100%;}
.label_x .hiddenRadio:checked + .radio {background: url(/Resources/Event/IceOne/img_radio_x_on.png) no-repeat center/100% ;}
.label_x .radio {width: 42.13vw; height:10.13vw; max-width: 361px; max-height: 91px; background: url(/Resources/Event/IceOne/img_radio_x.png) no-repeat center/100%;}
.sec02 .btn{display: block; text-align: center; padding-top:5vw; width: 85vw; max-width: 900px; margin: 0 auto;}
.sec02 .btn:last-child{padding-top:12vw;}

.sec03{position: relative; background-color:#5fb2d2;}
.sec03 .title{text-align: center; position: relative; padding:10vw 0 5vw; width: 90vw; max-width: 1000px; margin: 0 auto;}
.vieo_cont{position: relative; padding-bottom: 57.25%; height:0; background-color:#5fb2d2;  box-sizing: border-box;}
.vieo_cont iframe{position: absolute; left:50%; top:0; width: 90%; height: 90%; z-index:1; transform: translateX(-50%);} 
.sec03 .img{padding:2vw 5vw 5vw; box-sizing: border-box; width: 100%;}

/***** btn area *****/
.btnAreaList {position:relative; box-sizing: border-box; width: 100%; text-align:center; clear:both; overflow:hidden; display: flex;  justify-content: space-between; padding: 0 7vw 15vw;}
.btnAreaList a{position:relative; width:42vw; text-align:center; clear:both; overflow:hidden;}

/* 모달 팝업 배너*/
.modal-bg {display:none; width:100%;height:100%;position:fixed;top:0;left:0;right:0;background: rgba(0, 0, 0, 0.6);z-index:1000; }
.modal-wrap {display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 73.33vw; max-width:550px; height: 46.66vw; max-height:350px; background:#fff;z-index:1100;}
.modal-wrap button{position: absolute; right:-40px; top:0; width: 40px; height: 40px; color:#333; background: transparent url(/Resources/Event/IceOne/ico_button_x.png)no-repeat center/50%; box-sizing: border-box; border: none; cursor: pointer;}

@media all and (max-width: 820px){
	.sec02 .flex .box ul{bottom:5vw;}
	.sec02 .title{padding-bottom:0;}
}

@media all and (max-width: 500px){
	.flex{flex-direction: column;}
	.sec02 .title{padding-bottom:7vw;}
	.sec02 .flex .box{width: 80vw; height:118.3vw; max-width: 600px; max-height:568px;}
	.sec02 .flex .box + .box{margin-left:0;}
	.sec02 .flex .box:last-child{width: 80vw; height:118.3vw; max-width: 600px; max-height:568px;}
	.sec02 .flex .box ul{position: absolute; left:50%; bottom:-30px; transform: translate(-50%,-50%);}
	.radio {width: 67.4vw; height:20vw; max-width: 600px; max-height: 84px;}
	.label_x .radio {width: 67.4vw; height:20vw; max-width: 600px; max-height: 84px;}
}