@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
@font-face { font-family:'NanumSquareL'; src:url("/font/NanumSquareL.woff") format('woff'); }
@font-face { font-family:'NanumSquareR'; src:url("/font/NanumSquareR.woff") format('woff'); }
@font-face { font-family:'NanumSquareB'; src:url("/font/NanumSquareB.woff") format('woff'); }
@font-face { font-family:'NanumSquareEB'; src:url("/font/NanumSquareEB.woff") format('woff'); }
@font-face {
    font-family: 'BMDOHYEON';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.kto2022-2 { font-family:'NanumSquareR'; }
.kto2022-2 .container { background: #92d0da; overflow-x: hidden; min-width: 1000px; }
.kto2022-2 section { min-width: 1000px; }
.container * { margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; font-weight: normal;  }

.kto2022-2 .top-logos { width: 100vw; height: 100px; background: url('/images/event/tri-bg.svg'); z-index: 1; margin-top: 68px; }
.kto2022-2 .top-logos .inner { height: 100%; width: 800px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center; }
.kto2022-2 .top-logos img {  }

.kto2022-2 .visual { width: 100vw; height: 120vh; background: url('/images/event/kto2022Area/bg.jpg') no-repeat center center; background-size: cover; position: relative; overflow: hidden; }
.kto2022-2 .visual .heading { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 485px; height: 550px; }
.kto2022-2 .visual .heading .title { width: 476px; height: auto; }
.kto2022-2 .visual .heading .ticket { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

.kto2022-2 .visual .date { position: absolute; top: 50%; left: 22%; }
.kto2022-2 .visual .date h1 { display: inline-block; font-size: 20px; border: 2px solid #000; padding: 1px 10px; margin-bottom: 7px; }
.kto2022-2 .visual .date p { }
.kto2022-2 .visual .date p span { font-size: 18px; }
.kto2022-2 .visual .date p span:first-child { position: relative; margin-right: 30px; }
.kto2022-2 .visual .date p span:first-child::after { content: ''; position: absolute; top: 5px; right: -15px; width: 2px; height: 15px; background-color: #000; }



.kto2022-2 .get-coupon {  }
.kto2022-2 .get-coupon>div { width: fit-content; margin: 0 auto; position: relative; }
.kto2022-2 .get-coupon>div .pc-img { display: block; margin: 0 auto; position: relative; }
.kto2022-2 .get-coupon>div .btn-coupon { position: absolute; }
.kto2022-2 .get-coupon>div .btn-coupon1 { left: 399px; top: 546px; }
.kto2022-2 .get-coupon>div .btn-coupon img {  }

.kto2022-2 .use-steps { text-align: center; padding-top: 100px; padding-bottom: 30px;}
.kto2022-2 .use-steps>div { width: 1195px; position: relative; margin: 0 auto; }
.kto2022-2 .use-steps>img { display: block; margin: 0 auto; }
.kto2022-2 .use-steps a { position: absolute; right: 191px; bottom: 38px; }

.kto2022-2 .alert { background: #EED980; }
.kto2022-2 .alert img { display: block; margin: 0 auto; }

.kto2022-2 .info { background: #fff; padding: 130px 0; position: relative; }
.kto2022-2 .info .inner { width: 830px; margin: 0 auto; position: relative; z-index: 1; }
.kto2022-2 .info .inner .banner { width: 830px; height: auto; margin-bottom: 40px; }
.kto2022-2 .info h1 { font-family:'NanumSquareEB'; font-size: 25px; color: #303030;  margin-bottom: 15px; }
.kto2022-2 .info .inner>p { line-height: 25px; margin-bottom: 40px;  }
.kto2022-2 .info ul { list-style: none; margin-bottom: 50px; }
.kto2022-2 .info ul li { margin-bottom: 7px; display: flex; align-items: flex-start; }
.kto2022-2 .info ul li p { font-family:'NanumSquareEB'; color: #000; font-size: 17px; position: relative; margin-top: 10px; margin-bottom: 5px; }
.kto2022-2 .info ul li p::before { content: '|'; position: absolute; left: -10px; color: #000; font-weight: bold; }
.kto2022-2 .info ul li p::after { content: '|'; position: absolute; right: -10px; color: #000; font-weight: bold; }
.kto2022-2 .info ul li span { font-family:'NanumSquareB'; color: #303030; font-size: 17px; }
.kto2022-2 .info ul li span:first-child { width: 130px; font-family: NanumSquareEB; }
.kto2022-2 .info ul li span:last-child { line-height: 25px; }
.kto2022-2 .info .footer-bg-img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 1920px; height: auto; }
.kto2022-2 .info .footer-bg { background: #eed980; position: absolute; left: 0; bottom: 0; width: 100%; height: 51px; text-align: center; color: #000; font-size: 18px; padding-top: 17px; }
.kto2022-2 .info .footer-bg b { font-family: NanumSquareEB; font-size: 18px; }


/* 개인정보동의 팝업 popup */
.kto2022-2 .kto-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; background: #fff; border: 5px solid #222; padding: 30px 20px; z-index: 200; color: #222; display: none; max-height: 70vh; overflow-y: scroll; }

.kto2022-2 .kto-popup .selectAddress { margin-bottom: 50px; }

.kto2022-2 .kto-popup h1 { margin-bottom: 30px; font-size: 19px; line-height: 1.3; }
.kto2022-2 .kto-popup h1 b { font-weight: bold; font-size: 19px; }
.kto2022-2 .kto-popup h2 { font-weight: bold; font-size: 18px; margin-bottom: 5px; }
.kto2022-2 .kto-popup h2:nth-of-type(2) { margin-top: 30px; }
.kto2022-2 .kto-popup table { border-top: 2px solid #333; border-bottom: 2px solid #333; width: 100%; text-align: center; border-spacing: 0px; border-collapse: collapse; margin-bottom: 15px; }
.kto2022-2 .kto-popup table thead th { font-weight: bold; border-bottom: 2px solid #888; padding: 7px; font-size: 16px; }
.kto2022-2 .kto-popup table tbody td { padding: 30px 5px; line-height: 1.5; }
.kto2022-2 .kto-popup table tbody td.bg-gray { background: #ebebeb; }
.kto2022-2 .kto-popup table:nth-of-type(1) tbody td { width: 25%; }
.kto2022-2 .kto-popup table:nth-of-type(1) tbody td.bg-gray { width: 50%; }
.kto2022-2 .kto-popup table:nth-of-type(2) tbody td { width: 25%; }
.kto2022-2 .kto-popup p { padding-left: 20px; position: relative; font-size: 17px; margin-bottom: 15px; line-height: 1.3; }
.kto2022-2 .kto-popup p::before { content: ''; position: absolute; top: 8px; left: 3px; width: 8px; height: 8px; background-color: #222; border-radius: 50%; }
.kto-popup .labels { text-align: right; }
.kto-popup .label-wrapper { display: inline-block; }
.kto-popup label { cursor: pointer; font-size: 17px; font-weight: bold; position: relative; }
.kto-popup label em { font-family: xeicon; font-size: 15px; position: absolute; top: 0; left: -25px; width: 16px; height: 16px; border: 1px solid #000; border-radius: 5px; background-color: transparent; color: transparent; text-shadow: none; }
.kto-popup .label-wrapper:nth-of-type(1) label { margin-right: 35px; position: relative; }
.kto-popup .label-wrapper:nth-of-type(1) label::after { content: '/'; position: absolute; top: 0; right: -19px; }
.kto-popup input[type=radio] { opacity: 0; }
.kto-popup input[type=radio]:checked+label em { content: "\e929"; color: #fff; background: #222; }

.kto-popup .get-coupon { background: #222; color: #fff; font-size: 25px; padding: 15px 100px; border-radius: 30px; display: block; cursor: pointer; margin: 0 auto; margin-top: 70px; font-family: NanumSquareEB; }

body.pop-opened { overflow-y: hidden; height: 100%; }



@media screen and (max-width: 1400px) {
	.kto2022-2 .visual .heading { width: 400px; height: 467px; }
	.kto2022-2 .visual .heading .title { width: 400px; }
	.kto2022-2 .visual .heading .ticket { width: 100px; }

    .kto2022-2 .use-steps>div { width: 900px; height: auto; }
    .kto2022-2 .use-steps>div>img { width: 900px; }
    .kto2022-2 .use-steps>div a { right: 143px; bottom: 29px; }
    .kto2022-2 .use-steps>div a img { width: 152px; }

	.kto2022-2 .get-coupon .pc-img { width: 900px; height: auto; padding-bottom: 136px; }
    .kto2022-2 .get-coupon>div .pc-img { display: block; margin: 0 auto; position: relative; }
    .kto2022-2 .get-coupon>div .btn-coupon1 { left: 300px; top: 411px; }
    .kto2022-2 .get-coupon>div .btn-coupon img { width: 305px; }

	.kto2022-2 .info h1 { font-size: 22px; }
	.kto2022-2 .info p,
	.kto2022-2 .info ul li span { font-size: 16px; }
}