@charset "utf-8";

/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 월드컵이벤트 Stylesheet
 * Author - hsa815@hanbitsoft.co.kr 221115
 ------------------------------------------------- */

/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, select, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption{margin:0; padding:0; font-size:100%}
img, fieldset, button{border:0}
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body, input, button, textarea, select, table, kbd{line-height:1.2; font-family:Malgun Gothic,'맑은고딕','돋움', dotum, Helvetica, sans-serif; font-size:12px; color:#000}
img{vertical-align:middle}
ol, ul{list-style:none}
a{text-decoration:none; color:#000}
a:hover, a:focus, a:active{text-decoration:underline; color:#0000ff}
button, label{cursor:pointer}
button::-moz-focus-inner, input::-moz-focus-inner{padding:0; border:0}
table{border-collapse:collapse; border-spacing:0}
caption, legend{width:0; height:0; font-size:0; line-height:0; text-indent:-9999px; visibility:hidden}

/* Reserved Class
-------------------------------------------------------------- */
.irPm{display:block; overflow:hidden; font-size:0px; line-height:0; text-indent:-9999px}
.irWa{display:block; overflow:hidden; position:relative; width:100%; height:100%; z-index:-1}
.blind{width:1px; height:1px; font-size:0; line-height:0; position:absolute; top:0; left:-1000%; overflow:hidden}
.show{display:block}
.hide{display:none}
.fL{float:left}
.fR{float:right}
.clearFix{zoom:1}
.clearFix:after{clear:both; display:block; content:''}
.opc{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}

/* Styles
-------------------------------------------------------------- */
#wrap{position:relative;overflow:hidden;width:100%;min-width:1200px}
.container{width:100%;min-width:1200px;background-position:50% 0;background-repeat:no-repeat}
.inner{position:relative;width:1200px;height:100%;margin:0 auto}
.sp{overflow:hidden;display:block;background-repeat:no-repeat;text-indent:-9999px}
.posi_img, .posi_box{position:absolute}
.hoverimg{position:absolute;cursor:pointer}
.hoverimg+img{display:none;position:absolute;z-index:1}
.hoverimg:hover + img{display:block}

/* common
-------------------------------------------------------------- */
.sp_common{background-image:url(../images/common/sp.png)}
.visual{height:770px;margin-bottom:100px;background-image:url(../images/common/bg_title.jpg); overflow: hidden;}
.menu_area{position:absolute;z-index:10;top:770px;left:50%;width:2000px;height:116px;margin-left:-1000px;background: url(../images/common/bg_menu.png) no-repeat 0 -2px;}
.menu_area.fixed{position:fixed;top:0}
.menu_area ul{position:relative;width:1100px;margin: 0 auto}
.menu_area li{float:left}
.menu_area li a{height:100px}
.menu1{width:366px;background-position:0 0;}
.menu2{width:366px;background-position:-366px 0}
.menu3{width:366px;background-position:-733px 0}
.menu_area li:hover a, .menu_area li.on a{background-position-y:-100px}
.footer{height:91px;background-image:url(../images/common/bg_footer.jpg)}



/* content1
-------------------------------------------------------------- */
.sp_evt1{background-image:url(../images/event1/sp.png)}
.content1_1{height:1913px;background-image:url(../images/event1/bg1.jpg)}

.content1_1 .btn_eight{position:absolute;bottom:1025px;left:50%;width:503px;height:97px;margin-left:-251px;background-position:0 0;}
.content1_1 .ly_wrap{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background:url(../images/event1/bg_ly.png) 0 0 repeat;}
.content1_1 .eight_area{position:absolute;top:50%;left:50%;width:760px;height:482px;margin:-316px 0 0 -380px;padding-top:169px;background:url(../images/event1/ly1.png) 0 0 no-repeat}/* 180614[수정] */
.content1_1 .eight_area .select_area{width:692px;height:322px;margin:0 auto;padding:40px 0 0 40px;background-color:#fff}
.content1_1 .eight_area .select_area p{float:left;position:relative;width:173px;height:16px;margin-bottom:22px}
.content1_1 .eight_area .select_area p input[type="checkbox"]{width:16px;height:16px;margin-right:10px;background-color:#d7d7d7;border:1px solid #c0c0c0;}
.content1_1 .eight_area .select_area p label{position:absolute;top:1px;left:26px;font-size:14px;font-weight:bold}
.content1_1 .setSelct_eight .btn_wrap p.btn_center{position:absolute;bottom:40px;left:0;width:100%;height:54px;margin-bottom:0;text-align: center;}
.content1_1 .ico_soccer{ display: block; position: absolute; bottom: 462px; left: -186px; width: 312px; height: 312px; background: url(../images/event1/ico_soccer.png) 0 0 no-repeat; animation: swing ease-in-out 1s infinite alternate; font-size: 0;}

.content1_1 .btnStyle{display:inline-block;width:152px;height:54px}
.content1_1 .btn_cancel{background-position:0 -297px}
.content1_1 .btn_submit{background-position:-154px -297px}
.content1_1 .btn_close{background-position:-308px -297px}
.content1_1 .btn_save{background-position:-462px -297px}
.content1_1 .btnMy{position:absolute;left:50%;width:503px;height:97px;margin-left:-251px;background-position:0 -198px}
.content1_1 .btnMy.btn_myEight{bottom:1025px}
.content1_1 .btnMy.btn_myFour{bottom:560px}
.content1_1 .btn_wrap .btn_cancel{margin-right:8px}

.content1_1 .btn_four{position:absolute;bottom:560px;left:50%;width:503px;height:97px;margin-left:-251px;background-position:0 -99px}

.content1_1 .four_area{position:absolute;top:50%;left:50%;width:560px;height:329px;margin:-241px 0 0 -280px;padding-top:154px;background:url(../images/event1/ly2.png) 0 0 no-repeat}
.content1_1 .four_area .select_area{width:532px;height:176px;margin:0 auto;padding-top:36px;background-color:#fff;}
.content1_1 .four_area .select_area p{position:relative;height:24px;margin-bottom:14px;text-align: center}
.content1_1 .four_area .select_area p label{display:inline-block;font-size:14px;font-weight:bold;vertical-align:middle}
.content1_1 .four_area .select_area p select{display:inline-block;-webkit-appearance: none;-moz-appearance: none;appearance: none;width:167px;padding:4px;margin-left:10px;border:0;background: url(../images/event1/sp.png) 0 -353px no-repeat;background-color:#fff;font-size:14px;vertical-align: middle;border-radius: 0px}
.content1_1 .four_area .select_area p select::-ms-expand{display: none}
.content1_1 .setSelct_four .btn_wrap p.btn_center{position:absolute;bottom:40px;left:0;width:100%;height:54px;margin-bottom:0;text-align: center}

/* content2 content3
-------------------------------------------------------------- */
.sp_evt2{background-image:url(../images/event2/sp.png)}
.content2_1{height:2021px;background-image:url(../images/event2/bg1.jpg)}
.content2_1.content3{height:2507px;background-image:url(../images/event2/bg2.jpg)}


.content2_1 .btn_buy{position:absolute;width:240px;height:77px;}
.content2_1 .btn_buy.red{bottom:1117px;left:265px;}
.content2_1 .btn_buy.white{bottom:1117px;right:80px;}
.content2_1 .btn_buy.blue{bottom:513px;left:570px;}

.content2_1 .btn_more{position:absolute;width:22px;height:23px;}
.content2_1 .btn_more.more01{top:702px;left:390px;}
.content2_1 .btn_more.more02{top:702px;right:170px;}
.content2_1 .btn_more.more03{top:634px;right:365px;}
.content2_1 .btn_more.more04{top:927px;right:396px;}
.content2_1 .ly_wrap{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:url(../images/event2/bg_ly.png) 0 0 repeat; border: solid blue 1px;}
.content2_1 .ly_wrap div{position:absolute;top:50%;left:50%;width:642px;height:820px;transform: translate(-50%, -50%);}
.content2_1 .ly_wrap div img{position:relative; width: 100%;}
.content2_1 .ly_wrap div .btn_lyClose{position:absolute;z-index:9999;top:0;right:-75px;width:67px;height:67px;background-position:0 -145px}

@keyframes swing {
    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}
canvas {
    z-index: 10;
    pointer-events: none;
    /* position: fixed; */
    top: 0;
    transform: scale(1.1);
}