@charset "euc-kr";
/* ------------------------------------------
* Filename: vote.css
* Description: vote page css
* Created: 2025-09-30
* Updated: 2025-10-05
* Author: workyj@gmail.com
------------------------------------------ */

@font-face {
	font-family: 'Gmarket Sans';
  font-style: normal;
  font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('../../img/font/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../img/font/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';
  font-style: normal;
  font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('../../img/font/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../img/font/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';
  font-style: normal;
  font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('../../img/font/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../img/font/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.vote #contents {
    font-family: 'Gmarket Sans', sans-serif;
}

/* ------------------------------------------------------------------------------------
submain ¼±°Å¹®ÀÚ ¸ÞÀÎ 
------------------------------------------------------------------------------------ */
/* ¼±°Å¸ÞÀÎ ·¹À̾ƿô */
.submain * { letter-spacing: -0.2px; line-height: 1.2;}
.submain #aside, 
.submain #quick { display: none; }
.submain #wrapper { *zoom:1; width: 100%; margin: 0 auto; padding: 0; background: none; }
.submain #contents { position: relative; *zoom: 1; width: 100%; margin: 0 auto; float: none; }
.emph { color: #cf3a00; }

.vote-bg { position: relative; width: 100%; padding-bottom: 120px; background: #eaebec url('../../img/vote/index/bg_keyvisual.jpg') no-repeat center top; background-size: auto; }

/* ¼±°Å¹®ÀÚ ¸ÞÀÎ */
.vote-keyvisaul { position: relative; width: 100%; padding: 82px 0 90px; text-align: center; }
.vote-keyvisaul .keyvisual-inner { position: relative; display: flex; justify-content: space-between; width: 1200px; margin: 0 auto;}
.vote-keyvisaul .slogan { margin-left: 52px; text-align: left; }
.vote-keyvisaul .slogan .title { margin: 0; font-size: 45px; line-height: 58px; font-weight: 700; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.9px; }
.vote-keyvisaul .slogan .title .emph { color: #cf3a00; }
.vote-keyvisaul .slogan .sub-desc { margin: 30px 0 0; font-size: 22px; line-height: 32px; font-weight: 500; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.6px; }
.shotcut-list { box-sizing: border-box; width: 362px; height: 210px; margin: 0; padding: 5px 30px; background-color: #fff; border-radius: 20px; border: 1px solid #cdcdcd; list-style: none; }
.shotcut-list-item + .shotcut-list-item { border-top: 1px solid #ddd; }
.shotcut-list-item .shotcut-link { display: flex; align-items: center; justify-content: center; gap: 10px; height: 66px; padding-left: 10px; font-size: 18px; color: #000; text-decoration: none; }
.shotcut-list-item .shotcut-link::before,
.shotcut-list-item .shotcut-link::after { content:''; display: block; width: 30px; height: 30px; background-size: contain; background-position: center center; background-repeat: no-repeat;}
.shotcut-list-item .shotcut-link::after { margin-left: auto; width: 0; height: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #000; border-right: 10px solid transparent;}
.shotcut-list-item.n1 .shotcut-link::before { background: url('../../img/vote/index/icon_shortcut_1.png') no-repeat center center; }
.shotcut-list-item.n2 .shotcut-link::before { background: url('../../img/vote/index/icon_shortcut_2.png') no-repeat center center; }
.shotcut-list-item.n3 .shotcut-link::before { background: url('../../img/vote/index/icon_shortcut_3.png') no-repeat center center; }

.check-law-layer { opacity: 0; transform: translateY(8px); transition: all 0.1s ease-in; z-index: -1; visibility: hidden; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 818px; height: 210px; background-color: #fff; border: 1px solid #d2d2d2; border-radius: 20px; text-align: left; }
.check-law-layer ul { margin: 0; padding: 30px; list-style: none; }
.check-law-layer li::before { content: ""; position: absolute; left: 0; top: 5px; display: block; width: 6px; height: 6px; background: #cf3a00; border-radius: 50%; }
.check-law-layer li { position: relative; padding-left: 15px; font-size: 16px; font-weight: 500; color: #333; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.4px; }
.check-law-layer li + li { margin-top: 6px; }
.check-law-layer.show { opacity: 1; visibility: visible; z-index: 9; transform: translateY(0); }/* 2025-11-24 zindex ¼öÁ¤ */
.btn-close-layer { position: absolute; right: 25px; top: 25px; display: block; width: 27px; height: 27px; background: url('../../img/vote/index/btn_close_layer.png') no-repeat center center; background-size: contain; border: none; cursor: pointer; }

/* ÃÖÀú°¡ ¼±°Å¹®ÀÚ */
.price-info	{ box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: space-between; width: 1200px; height: 150px; margin: 0 auto; padding: 20px 60px 20px 50px; text-align: left; border-radius: 20px; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1);	 }
.price-info .title { margin: 0; font-size: 25px; font-weight: 700; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px; }
.price-info .title .small { font-size: 12px; font-weight: 500; color: #666; margin-left: 5px; }
.price-info .sub-desc { margin: 8px 0 0; font-size: 18px; font-weight: 500; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px; }
.price-info-list { display: flex; align-items: center; gap: 15px; list-style: none; padding: 0; margin: 0; }
.price-info-list-item { flex-shrink: 0; position: relative; box-sizing: border-box; flex: 1; padding-right: 35px; }
.price-info-list-item + .price-info-list-item { border-left: 1px solid #000; padding-left: 35px; }
.price-info-list-item .subject { position: absolute; right: 0; top: 10px; display: block; width: 50px; font-size: 20px; font-weight: 500; color: #666; text-align: left; transform: scaleX(0.95); transform-origin: 0 0; }
.price-info-list-item .desc { flex-shrink: 0; display: block; font-size: 15px; color: #666; white-space: nowrap; }
.price-info-list-item .desc .value { font-size: 55px; font-weight: 700; color: #000; }
.price-info-list-item .desc .unit { font-size: 15px; font-weight: 500; color: #666; margin-left: 3px; }

/* features */
.features { position: relative; display: flex; gap: 12px; width: 1200px; margin: 0 auto; padding: 85px 0 0; text-align: center; }
.features-item { box-sizing: border-box; position: relative; flex: 1 1 calc(50% - 6px); position: relative; background-color: #fff; border-radius: 20px; text-align: left; }
.features-item .features-link { box-sizing: border-box; display: block; height: 285px; padding: 45px 50px; color: inherit; text-decoration: none; }
.features-item .subject { display: block; margin: 0; font-size: 30px; font-weight: 700; transform: scaleX(0.92); transform-origin: 0 0; letter-spacing: -0.5px; }
.features-item .desc { display: block; margin: 15px 0 0; font-size: 18px; font-weight: 500; transform: scaleX(0.92); transform-origin: 0 0; letter-spacing: -0.5px; }
.features-item .slide-area { overflow: hidden; position: absolute; right: 0; bottom: 0; width: 500px; height: 100%; }
.features-item.n1 { background-color: #262671; color: #fff;}
.features-item.n2 { background-color: #f7de54; color: #000;}

/* ÃÖ°íÀÎ ÀÌÀ¯ */
.merits { box-sizing: border-box; position: relative; width: 1200px; margin: 140px auto 0; padding-left: 375px; text-align: center; }
.merits-head { position: absolute; left: 0; top: 57px; text-align: left; color: #000; }
.merits-head .title { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; transform: scaleX(0.93); transform-origin: 0 0; letter-spacing: -0.3px; }
.merits-head .sub-desc { margin-top: 22px; font-size: 20px; color: #555; font-weight: 500; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.merits-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 15px; list-style: none; padding: 0; margin: 50px 0 0 0; }
.merits-list-item { box-sizing: border-box; flex: 1 1 calc(33.3333% - 15px); min-width: 265px; height: 315px; position: relative; padding: 10px; background-color: #fff; border-radius: 20px; text-align: center; }
.merits-list-item::before { content: ""; display:block; width:190px; height: 150px; margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center; }
.merits-list-item .subject { display: block; margin-top: 5px; font-size: 23px; font-weight: 700; color: #000; transform: scaleX(0.95); }
.merits-list-item .desc { display: block; margin-top: 15px; font-size: 15px; color: #333; transform: scaleX(0.95);}
.merits-list-item.n1::before { background-image: url('../../img/vote/index/icon_merits_1.png'); }
.merits-list-item.n2::before { background-image: url('../../img/vote/index/icon_merits_2.png'); }
.merits-list-item.n3::before { background-image: url('../../img/vote/index/icon_merits_3.png'); }
.merits-list-item.n4::before { background-image: url('../../img/vote/index/icon_merits_4.png'); }
.merits-list-item.n5::before { background-image: url('../../img/vote/index/icon_merits_5.png'); }
.merits-list-item.n6::before { background-image: url('../../img/vote/index/icon_merits_6.png'); }

/* ¼±°Å¹®ÀÚ ÀÌ¿ë¼ø¼­ */
.howto-use { position: relative; width: 1200px; margin: 120px auto; text-align: center; }
.howto-use-head { position: absolute; left: 0; top: 3px; text-align: left; color: #000; }
.howto-use-head .title { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px; }
.howto-use-head .sub-desc { margin-top: 25px; font-size:20px; color: #555; font-weight: 500; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px; }
.howto-use-list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; list-style: none; padding: 0; margin: 0; counter-reset: howto; }
.howto-use-list-item { box-sizing: border-box; flex: 1 1 calc(25% - 20px); min-width: 250px; position: relative; border: 1px solid #d2d2d2; background-color: #f3f4f5; border-radius: 20px; text-align: left; }
.howto-use-list-item::before { counter-increment: howto; content: counter(howto); position: absolute; left: 20px; top: 28px; font-size: 50px; color: #e04f00; }
.howto-use-list-item .howto-use-link { box-sizing: border-box; display: block; height: 186px; padding: 30px 25px 25px 70px; text-decoration: none; }
.howto-use-list-item .howto-use-link::after { content: ""; position: absolute; right: 20px; bottom: 20px; display: block; width: 48px; height: 48px; border-radius: 50%; background: #fff url('../../img/vote/index/icon_howto_arrow.png') no-repeat center center; }
.howto-use-list-item .subject { display: block; font-size: 20px; font-weight: 700; color: #000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.howto-use-list-item .subject span { font-weight: 300; }
.howto-use-list-item .desc { display: block; margin-top: 9px; font-size: 15px; color: #333; /*transform: scaleX(0.95);*/}
.howto-use-list-item.n1 { margin-left: calc(25% + 5px); }
.howto-use-list-item.n6 .subject { margin-right: -12px; }

/* 1:1 »ó´ãÇϱâ */
.vote-foot { width: 1200px; margin: 0 auto 126px; }
.vote-foot .vfoot-inner { position: relative; display: flex; align-items: center; justify-content: center; height: 145px; background: #265900; border-radius: 20px; text-align: center; color: #fff; font-family: 'Gmarket Sans', sans-serif; }
.vote-foot .vfoot-inner::before { content: ""; position: absolute; left: -88px; bottom: 0; display:block; width:340px; height: 190px; background: url('../../img/vote/index/bg_vfoot.png') no-repeat left bottom -30px; }
.vote-foot .vfoot-inner p { font-size: 23px; font-weight: 700; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.vote-foot .vfoot-inner p span { font-weight: 300; }
.vote-foot .vfoot-inner .btn-consult { position: absolute; right: 7px; top: 7px; display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; background: #fff; color: #265900; font-size: 18px; font-weight: 700; border-radius: 20px; }

/* 20°Ç¾¿ ºÐÇÒ Àü¼Û */
.anime-checklist { box-sizing: border-box; position: absolute; right: 0; bottom: 0; width: 280px; height: 100%; padding-top: 100px; display: flex; flex-direction: column; gap: 5px; background: url('../../img/vote/index/bg_anime_checklist.png') no-repeat right 15px bottom;}
.anime-checklist .item { position: relative; width: 35px; height: 35px; margin-left: 35px; }
.anime-checklist .item::after { content: ""; position: absolute; left: 0; top: 10px; width: 34px; height: 27px; background: url('../../img/vote/index/bg_anime_check.png') no-repeat left top; }
.anime-checklist .cursor { z-index: 1; position: absolute; top: 100px; left: 45px; width: 186px; height: 294px; background: url('../../img/vote/index/bg_anime_cursor.png') no-repeat left top; }
.anime-checklist .airplain { position: absolute; left: -100%; bottom: -100px; width: 112px; height: 73px; background: url('../../img/vote/index/bg_anime_airplane.png') no-repeat center center; background-size: contain; }
.anime-checklist .item::after { transform: scale(0); opacity: 0; }
.anime-checklist .item:nth-child(1)::after { animation: check1 4s infinite ease-in-out; }
.anime-checklist .item:nth-child(2)::after { animation: check2 4s infinite ease-in-out; }
.anime-checklist .item:nth-child(3)::after { animation: check3 4s infinite ease-in-out; }
.anime-checklist .item:nth-child(4)::after { animation: check4 4s infinite ease-in-out; }
.anime-checklist .cursor { animation: tap 4s infinite ease; }
.anime-checklist .airplain { animation: fly 4s infinite ease-in-out; }
/* üũ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes check1 {
  0%, 7% { opacity: 0; transform: scale(0.8); }
  9%, 80% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes check2 {
  0%, 20% { opacity: 0; transform: scale(0.8); }
  22%, 80% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes check3 {
  0%, 30% { opacity: 0; transform: scale(0.8); }
  32%, 80% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes check4 {
  0%, 40% { opacity: 0; transform: scale(0.8); }
  42%, 80% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 1; transform: scale(1); }
}
/* ¼Õ°¡¶ô ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes tap {
  0%   { transform: translate(0, 0) scale(1); }
  10%  { transform: translate(5px, 5px) scale(0.9); }
  /* 20%  { transform: translate(0, 60px) scale(1); }
  30%  { transform: translate(10px, 50px) scale(0.9); }
  40%  { transform: translate(0, 100px) scale(1); }
  50%  { transform: translate(10px, 90px) scale(0.9); }
  60%  { transform: translate(0, 140px) scale(1); }
  70%  { transform: translate(10px, 130px) scale(0.9); }
  85%  { transform: translate(0, 200px) scale(1); } */
  70%, 100%  { transform: translate(0, 150px) scale(1); }
}
/* ºñÇà±â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes fly {
  0%   { transform: translate(10px, 10px); opacity: 1; }
  20%  { transform: translate(140px, -120px); opacity: 1; }
  100% { transform: translate(140px, -120px); opacity: 1; }
}

/* RCS ¼±°Å ¹®ÀÚ */
.anime-cardlist { overflow: hidden; position: relative; width: 100%; height: 100%; }
.anime-cardlist .cardlist { position: absolute; right: 35px; top: 60px; width: 210px; height: 293px; pointer-events: none; }
.anime-cardlist .slide { width: 210px; height: 293px; background-position: left top; background-size: auto; background-repeat: no-repeat; }
.anime-cardlist .slide.n1 { background-image: url('../../img/vote/index/bg_anime_slider_1.png'); }
.anime-cardlist .slide.n2 { background-image: url('../../img/vote/index/bg_anime_slider_2.png'); }
.anime-cardlist .slide.n3 { background-image: url('../../img/vote/index/bg_anime_slider_3.png'); }
.anime-cardlist .swiper-slide-shadow { display: none; }
.anime-cardlist .speaker { position: absolute; left: 100px; bottom: -30px; display: block; width: 104px; height: 134px; background-image: url('../../img/vote/index/bg_anime_speaker.png'); }
.anime-cardlist .speaker { animation: speaker 5s infinite ease-in-out; }
@keyframes speaker {
  0% { transform: scale(0.9); }
  5% { transform: scale(1); }
  15% { transform: scale(0.9); }
  20%, 100% { transform: scale(1); }
}

/* 2025-11-24 ¼±°Å¿ë ¾ÆÀ̵ð Àüȯ ¾È³» Æ˾÷ */
.layer-wrap{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:100; font-family: 'Gmarket Sans', sans-serif;}
.layer-wrap.show{ display:block;}
.layer-wrap .dimmed{ position:absolute; left:0; top:0; width:100%; height:100%;}
.layer-wrap .layer-core{ box-sizing:border-box; position:absolute; left:50%; top:50%; width:758px; padding:40px 50px; background:#fff; border-radius:20px; transform:translate(-50%, -50%);}
.layer-wrap .layer-head{ margin:0; border-bottom:1px solid #ddd; padding-bottom:20px;}
.layer-wrap .tit{margin:0; font-size:22px; font-weight:700; color:#000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.layer-wrap .input-tit{margin:0; font-size:17px; font-weight:700; color:#000; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.layer-wrap .layer-head .desc{margin:10px 0 0; font-size:16px; color:#333; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.layer-wrap .layer-body{ margin:0; padding: 20px 0 30px; font-size:16px; color:#555; line-height:1.5;}
.layer-wrap .layer-foot{padding-top: 30px 0 0; text-align: center;}
.layer-wrap .btn-close{ position: absolute; right:30px; top:30px; display: block; width:30px; height: 30px; background:url('../../img/vote/index/btn_close_layer.png') center center no-repeat;}
.box-gray{margin:20px 0; padding: 20px 40px; background-color: #e8e9ea; }
.list-dot { margin: 0; padding: 0; list-style: none; }
.list-dot li::before { content: ""; position: absolute; left: 0; top: 5px; display: block; width: 6px; height: 6px; background: #cf3a00; border-radius: 50%; }
.list-dot li { position: relative; padding-left: 15px; font-size: 15px; font-weight: 500; color: #333; transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.list-dot li + li { margin-top: 6px; }
.list-circle{ margin: 0; padding: 0; list-style: none;}
.list-circle li::before { content: ""; position: absolute; left: 0; top: 2px; display: block; width: 6px; height: 6px; border:5px solid #e56751; border-radius: 50%; }
.list-circle li { position: relative; padding-left: 22px; font-size: 14px; line-height: 22px; font-weight: 400; color: #333;  transform: scaleX(0.95); transform-origin: 0 0; letter-spacing: -0.3px;}
.list-circle li + li { margin-top: 15px; }
table.conversion { text-align: left; font-family: 'NanumGothic', '³ª´®°íµñ', 'Malgun Gothic', '¸¼Àº °íµñ', Sans-Serif; letter-spacing: 0; margin: 10px 0 5px; }
table.conversion th { font-size: 14px; }
table.conversion td .forms { width: 510px; }

a.btn-pop-a { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; height: 22px; padding: 0 10px; box-sizing: border-box; font-family: 'Dotum', 'µ¸¿ò', Sans-Serif; font-size: 12px; line-height: 1; font-weight: 600; background-color: #7b7b7b; color: #fff; text-align: center; text-decoration: none; border: none; }