﻿@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
.evt_wp *{font-family:'Plus Jakarta Sans', 'Noto Sans KR', sans-serif; box-sizing: border-box; position:relative; letter-spacing: -1px;}

.quick_top{border-radius: 50%; background: #333; color: #fff; position: fixed; right: 20px; bottom: 5%; padding: 10px 0; text-align: center; width: 50px; height: 50px; z-index: 5; font-weight: 600; font-size: 13px;}
.quick_top span{display:block; font-size: 1px;}

.visual{background: #62e1e3 url('imgs/bg_visual.png') no-repeat center 0; text-align: center;}
.inner.typo{padding-top: 100px; animation: bounce-in-fwd 1.1s both;}
.visual > .typo > .pop{position: absolute; top: 337px; right: 30px; animation: shake-vertical .8s 1.5s cubic-bezier(.455,.03,.515,.955) alternate infinite;}
.visual_typo{position: absolute; top: 210px; left: 295px;}
.visual_txt{font-size: 39px; font-weight: 900; color: #fff; padding: 40px 0 20px; animation: down .6s 1.2s both;}

.visual > .box{padding-bottom: 100px}
.visual > .box li div{border-radius: 30px; border: 5px solid #021213; width: 207px; height: 167px;}
.visual > .box li {margin: 0 5px;}
.visual > .box li:first-child div{border: 5px solid #ff0084;}

.inner{position: relative; width: 1100px; margin: 0 auto;}
.blink{animation: blink 1s infinite;}
.violet{color: #6600ff;}

.btn_pop{ position: absolute; left: 479px; bottom: 62px; border-radius: 3px; text-align: center; font-size: 16px; border: 1px solid #333; padding: 7px 28px 5px; font-weight: 500; z-index: 1;}
.pop_detail{position: absolute; top: 110px; left: 9px; background: rgba(0,0,0,0.95); border-radius: 8px; width: 1082px; height: 515px; border: 2px solid #000; padding: 45px 0 0 20px; animation: fadeIn .5s; z-index: 5; display: none;}
.pop_detail.show{display: block; -webkit-animation: fadeIn .5s; animation: fadeIn .5s;}

.notice{position: relative; color: #fff; padding: 0 50px; font-size: 17px; line-height: 34px; letter-spacing: 0;}
.pop_tit{display: block; text-align: center; font-size: 30px; font-weight: 900; margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid #fff; color: #fff;}
.notice .closeX{position: absolute; top: -15px; right: 40px;  width: 50px; line-height: 50px; font-size: 50px; color: #fff;  text-align: center; cursor: pointer; text-decoration: none;}
.closeX:hover{color: #deff00;}

.box{width: 1100px; margin: 0 auto; overflow: hidden; text-align: center;}
.box li{display: inline-block;}

.bg_01{background: #e3f5f5;}
.bg_02{background: #fff;}
.bg_03{background: #232420;}
.bg_04{background: #000;}
.bg_05{background: #efefef;}
.bg_06{background: #111933;}

.down-scroll,
.up-on-scroll{transition: transform 0.7s, opacity 1.7s;}
.blurred{transition: transform 0.3s, opacity 1.7s;}
.delay{transition-delay: 0.1s;}
.delay2{transition-delay: 0.3s;}

.con1.typo{position: absolute; left: 280px; bottom: 113px;}
.bg_02 .box{position: relative; padding: 50px 0 100px;}
.bg_03 .stemp{position: absolute; top: 83px; right: 184px; z-index: 1; }
.bg_03 .typo{position: absolute; top: 195px; right: 184px; z-index: 2;}
.vs{position: absolute; top: 235px; left: 505px;}

@keyframes fade-in-bck{0%{transform:translateZ(80px);opacity:0}100%{transform:translateZ(0);opacity:1}}
@keyframes blink{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}
@keyframes shake-vertical{80%{transform:translateY(0px)} 90%{transform:translateY(-6.4px)} 100%{transform:translateY(8px)}}
@keyframes down{0%{transform:translateY(-30px); opacity:0} 100%{transform:translateY(0); opacity:1}}
@keyframes bounce-in-fwd{0% {transform: scale(0); animation-timing-function: ease-in; opacity: 0} 38% {transform: scale(1); animation-timing-function: ease-out; opacity:1} 55%{transform:scale(.7); animation-timing-function: ease-in} 72%{transform:scale(1); animation-timing-function: ease-out} 81%{transform:scale(.84); animation-timing-function: ease-in} 89%{transform:scale(1); animation-timing-function: ease-out} 95%{transform:scale(.95); animation-timing-function:ease-in} 100%{transform:scale(1); animation-timing-function:ease-out}}

.apply_wp{text-align: center;}
.evt_wp table{table-layout: fixed; word-break: break-all;}

table.apply{width: 1100px; margin: 30px auto;}
table.apply th,
table.apply td{padding: 12px; text-align: left; font-size: 26px; color: #555; font-weight: 500;}

table.apply tbody th,
table.apply tbody td{text-align: center;}
table.apply thead th{padding: 0 5px 0 35px}

table.apply input[type='text'],
table.apply input[type='tel']{width: 350px; padding: 20px; border-radius: 5px;}
table.apply textarea{width: 902px; border-radius: 5px; height: 200px;}
table.apply input[type='radio']{width: 25px; height: 25px; margin: 0 20px 0 50px;}
table.apply td.select{ padding-bottom: 30px; border-bottom: 1px solid #000;}

table.info{width: 1024px; margin-left: 20px;}
table.info th,
table.info td{font-size: 20px; font-weight: 300; text-align: center;}
table.info th{background: #efefef;}
table.info td{border-bottom: 1px solid #efefef;}

.tit{color: #6600ff; font-size: 38px; padding: 70px 0 0; font-weight: 900; font-family:'Plus Jakarta Sans','Noto Sans KR', 'Noto Sans KR', sans-serif;}
.big{color: #000; font-size: 50px; border-bottom: 2px solid #000; padding: 0 0 20px;}
.info_tit{color: #555; font-size: 22px; border-top: 1px solid #dedede; padding-top: 35px; text-align: center; line-height: 12px; font-weight: 600;}
.txt{font-size: 17px; text-align: center; color: #777;}
.btn_apply{margin: 50px auto 70px; border-radius: 50px; width: 500px; text-align: center; background: #6600ff; color: #fff; font-size: 30px; font-weight: 900; padding: 20px 0;}
label{cursor: pointer;}
