@import url("swiper.css");
/* 26.01.30 */
:root {
    --mainFont: Poppins;
    --subFont: Nunito Sans;
    --subFont1: Noto Sans KR;
    --mainColor: #1052A5;
    --subColor: #222;
}

/* main */
.mainCon .main1 { width:100%; overflow:hidden; }
.mainCon .insight { width:100%; padding:120px 0; background:#1d1d1d; }
.mainCon .insight .contbox { max-width:1340px; margin:0 auto; width:96%; display:flex; flex-direction:column;  }
.mainCon .insight .contbox h2 { font-family: var(--subFont); font-size: 48px; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing:-0.03em; text-align:center; }
.mainCon .insight .contbox .listbox { position:relative; display:flex; gap:16px; }
.mainCon .insight .contbox .listbox .box > a > img,
.mainCon .insight .contbox .listbox .box .swiper-slide a > img { transition:all 0.4s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.mainCon .insight .contbox .listbox .box:hover > a > img,
.mainCon .insight .contbox .listbox .box:hover .swiper-slide a > img { transform:translate(-50%, -50%) scale(1.08); }
.mainCon .insight .contbox .listbox .box > a { position:absolute; left:0; top:0; width:100%; height:100%; }
.mainCon .insight .contbox .listbox .box { overflow:hidden; border-radius:24px; }
.mainCon .insight .contbox .top { margin-top:60px; }
.mainCon .insight .contbox .top .box { position:relative; width:calc((100% - 16px) / 2); }
.mainCon .insight .contbox .top .box:before { content:""; display:block; padding-bottom:56%; }
.mainCon .insight .contbox .bottom { margin-top:16px; }
.mainCon .insight .contbox .bottom .box { position:relative; width:calc((100% - 32px) / 3); }
.mainCon .insight .contbox .bottom .box:last-child {  background:var(--mainColor); }
.mainCon .insight .contbox .bottom .box:before { content:""; display:block; padding-bottom:98%; }
.mainCon .insight .contbox .txtbox { position:absolute; left:0; top:0; padding:40px; z-index:2; }
.mainCon .insight .contbox .txtbox h4 { font-size:20px; line-height: 1.3; font-weight: 500; color: #fff; }
.mainCon .insight .contbox .txtbox dd { margin-top:20px; font-size:26px; line-height: 1.5; font-weight: 700; color: #fff; letter-spacing:-0.03em; }
.mainCon .insight .contbox .btn { position:absolute; right:40px; bottom:40px; z-index:5; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:2px solid rgba(255, 255, 255, 0.25); border-radius:48px; transition:all 0.4s; }
.mainCon .insight .contbox .btn img { filter:brightness(0) invert(1); transition:all 0.4s; }
.mainCon .insight .contbox .box:hover .btn { border-color:#fff; background:#fff; }
.mainCon .insight .contbox .box:hover .btn img { filter:none; }
.mainCon .insight .contbox .box.mov .movBox { position:relative; height:calc(100% - 42%); overflow:hidden; }
.mainCon .insight .contbox .box.mov .movBox > img,
.mainCon .insight .contbox .box.mov .youtube { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.mainCon .insight .contbox .box.mov .icon { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.mainCon .insight .contbox .box.mov .txtbox { height:42%; position:relative; left:0; top:0; padding:40px 10px 0 40px; background:#000; }
.mainCon .insight .contbox .box.mov .txtbox .txt { font-size:20px; line-height: 1.5; font-weight:600; color:#fff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mainCon .insight .contbox .box.mov .txtbox .txt span { display:inline; background:linear-gradient(to top, #fff 0 1px, transparent 1px 100%) no-repeat left center; background-size:0 auto !important; line-height:inherit; word-break:inherit; transition:background-size 0.5s; }
.mainCon .insight .contbox .box.mov a:hover .txtbox .txt span  { background-size:100% auto !important; }
.mainCon .insight .contbox .box.mov .txtbox .stxt { margin-top:20px; font-size:16px; line-height: 1.3; font-weight:400; color:rgba(255, 255, 255, 0.50); }
.mainCon .insight .swiper-container { position:absolute; left:0; top:0; width:100%; height:100%; }
.mainCon .insight .swiper-container .swiper-slide,
.mainCon .insight .swiper-container .swiper-slide a { height:100%; overflow:hidden; }
.mainCon .insight .swiper-container .swiper-slide a { display:block; }
.mainCon .insight .swiper-pagination { left:40px; bottom:40px; width:auto; display:flex; gap:12px; }
.mainCon .insight .swiper-pagination .swiper-pagination-bullet { margin:0; padding:0; outline:none; width:10px; height:10px; opacity:1; background:rgba(255, 255, 255, 0.50); }
.mainCon .insight .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#fff; }
.mainCon .insight .swiper-button-prev,
.mainCon .insight .swiper-button-next,
.mainCon .insight .swiper-button-next:after, 
.mainCon .insight .swiper-button-prev:after { display:none; }
.mainCon .NewsLetter { width:100%; height:510px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.mainCon .NewsLetter .inner2 { height:100%; display:flex; align-items:center; }
.mainCon .NewsLetter .inner2 .box dt { font-family: var(--subFont); font-size: 20px; line-height: 1.3; font-weight: 500; color: #fff; }
.mainCon .NewsLetter .inner2 .box dd { margin-top:24px; font-size: 40px; line-height: 1.7; font-weight: 700; color: #fff; letter-spacing:-0.03em; }
.mainCon .NewsLetter .inner2 .link { margin-top:40px; }
.mainCon .NewsLetter .inner2 .link a { display:inline-block; position:relative; padding:15px 20px 15px 0; }
.mainCon .NewsLetter .inner2 .link a:before { content:""; display:block; width:58px; height:58px; border:1px solid #fff; border-color: #fff #fff #fff transparent; border-radius:50%; position:absolute; top:0; right:0; box-sizing:border-box; transition:all .3s; }
.mainCon .NewsLetter .inner2 .link a:hover:before { opacity:.5; }
.mainCon .NewsLetter .inner2 .link a span { display:inline-block; padding:5px; font-family: var(--subFont); color:#fff; font-size:16px; text-transform:uppercase; }
@media screen and (max-width: 1280px) {
	.mainCon .insight .contbox .txtbox { padding:30px; }
	.mainCon .insight .contbox .txtbox dd br { display:none; }
	.mainCon .insight .contbox .bottom .box:before { padding-bottom:102%; }
	.mainCon .insight .contbox .box.mov .txtbox { padding:25px 10px 0 30px; }
	.mainCon .insight .contbox .box.mov .icon img { width:70px; }
	.mainCon .insight .swiper-pagination { left:30px; bottom:30px; gap:10px; }
	.mainCon .insight .contbox .btn { right:30px; bottom:30px; }
	.mainCon .NewsLetter { height:460px; }
}
@media screen and (max-width: 1024px) {
	.mainCon .insight { padding:80px 0; }
	.mainCon .insight .contbox .listbox { gap:10px; }
	.mainCon .insight .contbox .listbox .box { border-radius:12px; }
	.mainCon .insight .contbox .top .box { width:calc((100% - 10px) / 2); }
	.mainCon .insight .contbox .txtbox { padding:20px; }
	.mainCon .insight .contbox .txtbox h4 { font-size:18px; }
	.mainCon .insight .contbox .txtbox dd { margin-top:10px; font-size:23px; }
	.mainCon .insight .contbox .bottom { margin-top:10px; }
	.mainCon .insight .contbox .bottom .box { width:calc((100% - 20px) / 3); }
	.mainCon .insight .contbox .bottom .box:before { padding-bottom:98%; }
	.mainCon .insight .contbox .box.mov .txtbox { padding:10px 10px 0 20px; }
	.mainCon .insight .contbox .box.mov .txtbox .txt { font-size:18px; }
	.mainCon .insight .contbox .box.mov .txtbox .stxt { margin-top:10px; font-size:15px; }
	.mainCon .insight .contbox .box.mov .icon img { width:60px; }
	.mainCon .insight .contbox .btn { right:20px; bottom:20px; width:40px; height:40px; }
	.mainCon .insight .swiper-pagination { left:20px; bottom:20px; }
	.mainCon .NewsLetter { height:420px; }
	.mainCon .NewsLetter .inner2 .box dt { font-size: 19px; }
	.mainCon .NewsLetter .inner2 .box dd { margin-top:20px; font-size: 30px; }
	.mainCon .NewsLetter .inner2 .link { margin-top:30px; }
}
@media screen and (max-width: 860px) {
	.mainCon .insight .contbox .listbox { flex-wrap:wrap; }
	.mainCon .insight .contbox .bottom .box { width:calc((100% - 10px) / 2); }
	.mainCon .insight .contbox .bottom .box:last-child { width:100%; }
	.mainCon .insight .contbox .bottom .box:before { display:none; }
	.mainCon .insight .contbox .bottom .txtbox { position:relative; }
	.mainCon .insight .contbox .bottom.listbox .box:last-child  .txtbox { height:200px; }
	.mainCon .insight .contbox .bottom.listbox .box > a { position:relative; }
	.mainCon .insight .contbox .box.mov .movBox { height:auto; }
	.mainCon .insight .contbox .box.mov .movBox:before { content:""; display:block; padding-bottom:56%; }
	.mainCon .insight .contbox .box.mov .txtbox { height:auto; padding:20px; }
}
@media screen and (max-width: 760px) {
	.mainCon .insight .contbox .top .box { width:100%; }
	.mainCon .insight .contbox .top .box:before { padding-bottom:35%; }
}
@media screen and (max-width: 640px) {
	.mainCon .insight .contbox .top .box:before { padding-bottom:45%; }
	.mainCon .insight .contbox .txtbox h4 { font-size:16px; }
	.mainCon .insight .contbox .txtbox dd { margin-top:5px; font-size:20px; }
	.mainCon .insight .contbox .bottom .box { width:100%; }
	.mainCon .insight .contbox .bottom.listbox .box:last-child  .txtbox { height:180px; }
	.mainCon .insight .contbox .box.mov .icon img { width:55px; }
	.mainCon .NewsLetter { height:360px; }
	.mainCon .NewsLetter .inner2 .box dt { font-size: 17px; }
	.mainCon .NewsLetter .inner2 .box dd { margin-top:10px; font-size: 22px; }
	.mainCon .NewsLetter .inner2 .box dd br { display:none; }
}



/* promotion */
article.subContB { padding-bottom:200px; }
@media screen and (max-width:1024px){
	article.subContB { padding-bottom:100px; }
}

.promotion.blk { background:#1d1d1d; }

.titleBox { text-align:center; }
.titleBox h2 { font-size: 48px; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing:-0.03em; }
.titleBox.blk h2 { color: #111;  }

.promotion .chbox { margin-top:80px; display:flex; align-items:center; gap: 90px; padding:40px 0; border:1px solid rgba(255, 255, 255, 0.20); border-width:1px 0; }
.promotion .chbox h3 { font-family: var(--subFont); font-size: 25px; line-height: 1.3; font-weight: 600; color: #fff; letter-spacing:-0.025em; }
.promotion .chbox .chlist { position:relative; display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap; }
.promotion .chbox input[type="checkbox"] { opacity:0; height:auto; line-height:1; position:absolute; left:0; top:2px; z-index:-1 }
.promotion .chbox input[type="checkbox"] + span { position:relative; font-family: var(--subFont); color:#fff; font-size:17px; font-weight:300; line-height:1.3;  display:flex; align-items:center; gap:0 12px; }
.promotion .chbox input[type="checkbox"] + span:before { content:''; display:block; flex-shrink:0; width:20px; height:20px; vertical-align:middle; transition:all 0.3s; background:#fff; border:none; border-radius:0; }
.promotion .chbox input[type="checkbox"]:checked + span:before { background:#fff url(/img/sub/ch_check_on.png) center center no-repeat; }
.promotion.gallery .listbox { margin-top:60px; display:flex; flex-wrap:wrap; gap:24px; }
.promotion.gallery .listbox .item { width:calc((100% - 72px) / 4); }
.promotion.gallery .listbox .item a { position:relative; aspect-ratio: 1 / 1; overflow:hidden; width:100%; display:flex; }
.promotion.gallery .listbox .item a img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
@media screen and (max-width: 1280px) {
	.promotion.gallery .listbox { gap:20px; }
	.promotion.gallery .listbox .item { width:calc((100% - 40px) / 3); }
}
@media screen and (max-width: 1024px) {
	.titleBox h2 { font-size: 40px; }
	.promotion .chbox { margin-top:40px; gap: 60px; padding:20px 0; }
	.promotion .chbox h3 { font-size: 23px; }
	.promotion.gallery .listbox { margin-top:30px; gap:10px; }
	.promotion.gallery .listbox .item { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width: 860px) {
	.promotion .chbox {gap: 10px; padding:20px 0; flex-wrap:wrap; }
	.promotion .chbox h3 { width:100%; }
}
@media screen and (max-width: 640px) {
	.titleBox h2 { font-size: 32px; }
	.promotion.gallery .listbox { margin-top:20px; }
	.promotion.gallery .listbox .item { width:calc((100% - 10px) / 2); }
	.promotion .chbox { margin-top:20px; gap:10px 50px; padding:15px 0; }
	.promotion .chbox h3 { font-size: 20px; }
	.promotion .chbox input[type="checkbox"] + span { font-size:15px; gap:0 10px; }
	.promotion .chbox input[type="checkbox"] + span:before { width:18px; height:18px; }
	.promotion .chbox input[type="checkbox"]:checked + span:before { background-size:18px auto; }
}

.promotion.gallery .view { position:relative; }
.promotion.gallery .view .swiper-container { position:relative; width:100%; padding-bottom:3px; overflow:hidden; }
.promotion.gallery .view .swiper-container .swiper-slide { position:relative; display:flex; }
.promotion.gallery .view .swiper-container .swiper-slide .imgbox { position:relative; width:550px; aspect-ratio: 1 / 1; }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox { width:calc(100% - 550px); padding:60px 80px 0 120px; display:flex; flex-direction:column; justify-content:space-between; }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top h4 { font-size: 48px; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing:-0.03em; }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top .txt { margin-top:40px; font-size: 20px; line-height: 1.7; font-weight: 300; color: #fff; letter-spacing:-0.01em; }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b { margin-top:40px; padding-top:40px; border-top:1px solid rgba(255, 255, 255, 0.20); }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt { position:relative; padding-left:20px; font-size: 25px; line-height: 1.3; font-weight: 600; color: #fff; letter-spacing:-0.015em;}
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt:before { content:""; display:block; position:absolute; left:0; top:2px; width:8px; height:8px; background-color:#fff; }
.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dd { margin-top:12px; font-size: 20px; line-height: 1.3; font-weight: 300; color: #fff; letter-spacing:-0.015em;}
.promotion.gallery .view .swiper-btn { position:absolute; top:calc(550px / 2); width:60px; height:60px; padding:0; margin:0; background:url(/img/sub/swiper_btn.png) center center no-repeat; }
.promotion.gallery .view .swiper-button-prev { left:-130px; }
.promotion.gallery .view .swiper-button-next { right:-130px; transform:rotate(180deg); }
.promotion.gallery .view .swiper-button-next:after, 
.promotion.gallery .view .swiper-button-prev:after,
.promotion.gallery .view .swiper-pagination { display:none; }
.promotion.gallery .view .btn_pn { position:absolute; top:calc(550px / 2); z-index:5; width:60px; height:60px; padding:0; margin:0; background:url(/img/sub/swiper_btn.png) center center no-repeat; }
.promotion.gallery .view .btn_pn a { display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden; }
.promotion.gallery .view .btn_prev { left:-130px; }
.promotion.gallery .view .btn_next { right:-130px; transform:rotate(180deg); }
@media screen and (max-width: 1760px) {
	.promotion.gallery .view .swiper-button-prev,
	.promotion.gallery .view .btn_prev { left:-5%; }
	.promotion.gallery .view .swiper-button-next,
	.promotion.gallery .view .btn_next { right:-5%; }
}
@media screen and (max-width: 1620px) {
	.promotion.gallery .view .swiper-button-prev,
	.promotion.gallery .view .btn_prev { left:0; }
	.promotion.gallery .view .swiper-button-next,
	.promotion.gallery .view .btn_next { right:0; }
}
@media screen and (max-width: 1440px) {
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox { padding:20px 80px 0 60px; }
}
@media screen and (max-width: 1280px) {
	.promotion.gallery .view .swiper-container .swiper-slide .imgbox { width:50%; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox { width:50%; padding:10px 60px 0 40px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top h4 { font-size: 40px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top .txt { margin-top:30px; font-size: 19px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b { margin-top:30px; padding-top:30px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt { padding-left:20px; font-size: 23px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dd { margin-top:10px; font-size: 19px; }
	.promotion.gallery .view .swiper-btn,
	.promotion.gallery .view .btn_pn { width:50px; height:50px; background-size:auto 50px; }
}
@media screen and (max-width: 1024px) {
	.promotion.gallery .view .swiper-container .swiper-slide .imgbox { width:50%; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox { width:50%; padding:10px 60px 0 30px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top .txt { margin-top:20px; font-size: 18px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b { margin-top:20px; padding-top:20px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt { padding-left:20px; font-size: 22px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt:before { top:2px; width:6px; height:6px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dd { margin-top:8px; font-size: 18px; }
	.promotion.gallery .view .swiper-btn,
	.promotion.gallery .view .btn_pn { width:40px; height:40px; background-size:auto 40px; }
	.promotion.gallery .view .swiper-btn,
	.promotion.gallery .view .btn_pn { top:220px; }
}
@media screen and (max-width: 860px) {
	.promotion.gallery .view .swiper-container .swiper-slide { flex-wrap:wrap; }
	.promotion.gallery .view .swiper-container .swiper-slide .imgbox { width:auto; margin-inline:0 auto; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox { width:100%; padding:20px 0 0 0; }
	.promotion.gallery .view .swiper-btn { top:320px; }
}
@media screen and (max-width: 640px) {
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top h4 { font-size: 32px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .top .txt { margin-top:10px; font-size: 17px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b { margin-top:20px; padding-top:20px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dt { padding-left:18px; font-size: 20px; }
	.promotion.gallery .view .swiper-container .swiper-slide .txtbox .txt_b dd { margin-top:8px; font-size: 17px; }
	.promotion.gallery .view .swiper-btn,
	.promotion.gallery .view .btn_pn { top:240px; width:36px; height:36px; background-size:auto 36px; }
}
@media screen and (max-width: 480px) {
	.promotion.gallery .view .swiper-btn,
	.promotion.gallery .view .btn_pn { top:180px; }
}

.promotion .btn { text-align:center; margin:100px auto; max-width: 190px; }
.promotion .btn a { display:flex; align-items:center; justify-content:center; width:100%; height:70px; background:var(--mainColor); color:#fff; font-size:15px; text-align:center; font-weight:500; }
@media screen and (max-width: 1024px) {
	.promotion .btn { margin:50px auto; max-width: 120px; }
	.promotion .btn a { font-size:14px; height:50px; }
}

.member input,
.member button,
.promotion input,
.promotion button { border: none; outline: none; appearance: none; background: transparent; }

.member .auth-button { height: 60px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--mainColor); font-size: 20px; font-weight: 600; }
.auth-box { width: 100%; margin: 0 auto; }
.auth-box .top { text-align: center; }
.auth-box .top img { width: 224px; height: 34px; }
.auth-box .top p { font-size: 24px; line-height: 1.6; font-weight: 600; color: #111; margin-top: 40px; }
.auth-box .top p span { color: var(--mainColor); }
.auth-box .input-box,
.auth-box .button-box { display: flex; flex-direction: column; }
.auth-box .input-box { row-gap: 10px; margin: 40px 0 20px; }
.auth-box .input-box input { padding: 15px 30px; height: 70px; font-size: 18px; }
.auth-box .input-box input::placeholder { color: #999; }
.auth-box .button-box { row-gap: 5px; }
.auth-box .auth-button { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--mainColor); font-size: 20px; font-weight: 600; }
.auth-box .auth-button.gray { background: #ddd; color: #666; }
.auth-box .link-box,
.auth-box > p { margin-top: 30px; }
.auth-box .link-box { display: flex; justify-content: center; align-items: center; column-gap: 15px; }
.auth-box .link-box a { color: #999; font-size: 17px; font-weight: 500; }
.auth-box .link-box hr { background: #bbb; width: 1px; height: 12px; border: none; margin: 0; }
.auth-box > p { line-height: 1.3; font-size: 18px; font-weight: 600; color: rgba(82, 178, 84, 0.5); text-align: center; }
.auth-box > p:has(span) { text-align: left; }
.auth-box > p span { font-weight: 400; font-size: 16px; color: #999; }

.join .form-box { margin-top: 50px; }
.join .form-box * { line-height: 1.3; }
.join .form-box > span { display: block; text-align: right; }
.join .form-box em { color: var(--mainColor) !important; }
.join .column { border-top: 1px solid var(--mainColor); margin: 20px 0 30px; }
.join .column dl { display: flex; height: 70px; border-bottom: 1px solid #ddd; }
.join .column dl > * { width: 100%; height: 100%; display: flex; align-items: center; }
.join .column dl dt { flex-shrink: 0; max-width: 200px; border-right: 1px solid #ddd; font-size: 18px; color: #333; font-weight: 500; padding: 0 20px; }
.join .column dl dd { padding: 10px 20px; }
.join .column dl dd * { height: 100%; font-size: 17px; }
.join .column dl dd.row { display: flex; column-gap: 10px; }
.join .column dl dd.row button { background: var(--mainColor); color: #fff; padding: 0 20px; }
.join .column input { width: 100%; max-width: 280px; }
.join .agree { display: flex; flex-direction: column; row-gap: 20px; }
.join .agree label,
.join .agree label input { cursor: pointer; }
.join .agree label { display: flex; align-items: center; column-gap: 10px; }
.join .agree label input { width: 16px; height: 16px; border: 1px solid #ddd; appearance: none; }
.join .agree label input:checked { background: var(--mainColor) url('/img/sub/icon_checked.png') no-repeat center / 10px; border-color: var(--mainColor); }
.join .auth-button { width: 200px; }

.member .auth-box { max-width: 640px; border: 1px solid #ddd; padding: 65px 80px 40px; margin: 0 auto; }
.member .auth-box .input-box input { border: 1px solid #eee; }

@media screen and (max-width: 768px) {
	.join .column dl { height: auto; flex-direction: column; }
	.join .column dl dt,
	.join .column dl dd { padding: 20px; }
	.join .column dl dt { max-width: inherit; border-right: none; background: #f8f8f8; }
	.join .column dl dd.row button { padding: 15px 20px; }
}
@media screen and (max-width: 640px) {
	.member .auth-box { padding: 30px 20px; }
	.auth-box .top p { font-size: 21px; margin-top: 30px; }
	.auth-box .input-box { margin: 30px 0 10px; }
	.auth-box .input-box input { height: 60px; padding: 15px 20px; font-size: 16px; }
	.auth-box .auth-button { height: 60px; font-size: 18px; }
	.auth-box > p { margin-top: 20px; }
	.auth-box > p span { font-size: 15px; }
	.join .column dl dt,
	.join .column dl dd * { font-size: 16px; }
	.join .agree label span { font-size: 14px; }
	.join .auth-button { height: 50px; font-size: 18px; width: 160px; }
}

.promotion { padding-top: 180px; }
.promotion .list-box { margin-top:30px; }
.promotion * { line-height: 1.3; }
.promotion .video-box { display: block; position: relative; padding-bottom: 56.25%; overflow: hidden; }
.promotion .video-box video,
.promotion .video-box iframe,
.promotion .video-box .img,
.promotion .video-box .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.promotion .video-box video,
.promotion .video-box .img,
.promotion .video-box iframe { width: 100%; height: 100%; }
.promotion .video-box .img { background: #fff; border: 1px solid #ddd; }
.promotion .video-box .img img { min-width: 100%; min-height: 100%; max-width: 100%; }
.promotion .video-lock { z-index: 1; position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0,0,0,0.7); border-radius: 10px; }
.promotion .main-video { padding-bottom: 100px; width: 100%; max-width: 940px; margin: 0 auto; }
.promotion .main-video dl { margin-bottom: 40px; }
.promotion .main-video dl dt { margin-bottom: 20px; color: #111; font-size: 45px; font-weight: 800; font-family: var(--subFont); }
.promotion .main-video dl dd { font-size: 20px; color: #333; font-weight: 300; }
.promotion .main-video .video-lock { width: 60px; height: 60px; top: 40px; right: 40px; }
.promotion .radio-box,
.promotion .radio-box label { display: flex; align-items: center; justify-content: flex-end; }
.promotion .radio-box { column-gap: 20px; padding-top: 30px; margin-bottom: 60px; border-top: 1px solid #ddd; }
.promotion .radio-box label { column-gap: 10px; }
.promotion .radio-box label span { color: #777; font-weight: 500; font-size: 17px; }
.promotion .radio-box input[type=radio] { width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; }
.promotion .radio-box input[type=radio]:checked { background: url('/img/sub/icon_radio.png') no-repeat center; }
.promotion .radio-box input[type=radio]:checked + span { color: #111; }
.promotion .video-list { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 30px; column-gap: 40px; }
.promotion .video-list .item { width: 100%; }
.promotion .video-list .video-box:has(.video-lock)::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; content: ''; display: block; background: rgba(17,17,17,0.5); }
.promotion .video-list .video-box { margin: 15px 0 20px; }
.promotion .video-list .video-lock { width: 40px; height: 40px; top: 30px; right: 30px; }
.promotion .video-list .video-lock img { width: 20px; min-width: inherit; min-height: inherit; }
.promotion .video-list .item b { color: var(--mainColor); font-size: 20px; font-weight: 600; }
.promotion .video-list .item p { color: #111; font-size: 24px; font-family: var(--subFont); line-height: 1.6; height: 3.2em; font-weight: 800; -webkit-line-clamp: 2; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.popup,
.popup .row,
.popup .inner { display: flex; }
.popup { width: 100%; height: 100vh; z-index: 1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; }
.popup .dimmed,
.popup .row { width: 100%; height: 100%; }
.popup .dimmed { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.4); }
.popup .row { align-items: center; justify-content: center; }
.popup .inner { width: 100%; flex-direction: column; max-width: 600px; background: #f5f5f5; padding: 45px 60px; position: relative; }
.popup .close { font-size: 26px; margin-left: auto; }
.promotion .auth-box { margin-top: 45px; }
.promotion .auth-box .input-box input { border: none; background: #fff; }
@media screen and (max-width: 1500px) {
    .promotion .main-video dl dt { font-size: 34px; }
	.promotion .video-list { column-gap: 10px; }
	.promotion .video-list .item b { font-size: 18px; }
	.promotion .video-list .item p { font-size: 20px; }
}
@media screen and (max-width: 1024px) {
    .promotion .main-video dl dt { font-size: 28px; }
	.promotion .main-video .video-lock { width: 50px; height: 50px; top: 20px; right: 20px; }
	.promotion .radio-box label span { font-size: 16px; }
	.promotion .video-list { grid-template-columns: repeat(2, 1fr); }
	.promotion .video-list .item b { font-size: 16px; }
	.promotion .video-list .item span { width: 35px; height: 35px; top: 10px; right: 10px; }
	.promotion .video-list .item p { font-size: 18px; }
}
@media screen and (max-width: 768px) {
	.popup .inner { max-width: calc(100vw - 100px); }
}
@media screen and (max-width: 640px) {
	.promotion .main-video dl { margin-bottom: 30px; }
    .promotion .main-video dl dt { font-size: 20px; margin-bottom: 10px; }
	.promotion .main-video dl dd { font-size: 16px; }
	.promotion .main-video .video-lock { width: 40px; height: 40px; }
	.promotion .main-video .video-lock img { width: 30px; }
	.promotion .radio-box { column-gap: 10px; margin-bottom: 35px; }
	.promotion .radio-box label { column-gap: 5px; }
	.promotion .radio-box label span { font-size: 14px; }
	.promotion .video-list { grid-template-columns: repeat(1, 1fr); }
	.promotion .video-list .item p { height: auto; max-height: 3.2em; }

	.popup .inner { max-width: calc(100vw - 40px); padding: 30px 20px; }
	.promotion .auth-box { margin-top: 0; }
}


.viewbox .top-box { text-align:center; }
.viewbox .top-box .title { font-size:40px; font-weight:600; color:#333; line-height:1.4; letter-spacing:-0.02em; }
.viewbox .top-box .info { margin-top:20px; padding:20px 0; display:flex; justify-content:center; border-top:2px solid var(--mainColor); }
.viewbox .top-box .date { font-size:16px; font-weight:300; color:#333; line-height:1.3; padding-right:20px; }
.viewbox .top-box .txt { position:relative; font-size:16px; font-weight:300; color:#333; line-height:1.3; padding-left:20px; }
.viewbox .top-box .txt:before { content:""; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px ; background-color:#ddd; }
.viewbox .viewCont { border-top:1px solid #ddd; }
.viewbox .viewCont .contents { min-height:220px; padding:40px; line-height:1.6 }
.viewbox .viewCont .contents img { max-width:100%; height:auto }
.viewbox .btn_pn { border-top:1px solid #ddd; }
.viewbox .btn_pn dl { border-bottom:1px solid #ddd; display:flex; }
.viewbox .btn_pn dt { width:140px; height:70px; background-color:none; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:400; color:#333; background:#f8f8f8; } 
.viewbox .btn_pn dd { width:calc(100% - 140px); display:flex; align-items:center; padding:0 20px; font-size:18px; font-weight:300; color:#333; }
.viewbox .btn_pn dd a { font-size:18px; font-weight:300; color:#333; min-height:20px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
@media screen and (max-width:1400px){	
    .viewbox .top-box .title { font-size:30px; }
    .viewbox .viewCont .contents { padding:30px; }
}
@media screen and (max-width:1024px){	
	.promotion .list-box { margin-top:20px; }
    .viewbox .top-box .title { font-size:30px; }
    .viewbox .top-box .info { margin-top:10px; padding:10px 0; }
    .viewbox .top-box .date,
    .viewbox .top-box .txt { font-size:16px; }
    .viewbox .viewCont .contents { min-height:160px; padding:20px 20px 40px; }
    .viewbox .btn_pn dt { width:120px; height:60px; } 
    .viewbox .btn_pn dd { width:calc(100% - 120px); font-size:17px; }
    .viewbox .btn_pn dd a { font-size:17px; min-height:19px; }
}
@media screen and (max-width:640px){	
    .viewbox .top-box .title { font-size:20px; }
    .viewbox .top-box .date,
    .viewbox .top-box .txt { font-size:16px; }
    .viewbox .viewCont .contents { padding:10px 10px 40px; }
    .viewbox .btn_pn dt { width:100px; height:50px; } 
    .viewbox .btn_pn dd { width:calc(100% - 100px); font-size:16px; }
    .viewbox .btn_pn dd a { font-size:16px; min-height:19px; }
}


/* page */
.page { margin:100px auto 0 auto; text-align:center; padding:0; } 
.page a { vertical-align:middle; position:relative; font-family:Pretendard; font-size:15px; line-height:34px; font-weight:400; color:#111; letter-spacing:-0.02em; border:none; padding:0 8px; min-width:34px; margin:0 -3px; display:inline-block; }
.page ul { display:inline-block; vertical-align:middle; }
.page li { display:inline-block; vertical-align:middle; margin:0 5px; }
.page li.on a { font-weight:500; color:#fff !important; background:var(--mainColor); border-radius:34px; }
.page li:hover a,
.page li a:hover { border:none; }
.page.paging ul li.on a:before { display:none }
.page .btn_pn { display:inline-block; vertical-align:middle; padding:0; }
.page .btn_prev { height:34px; width:34px; margin-right:8px; overflow:hidden; text-indent:-9999em; background:url(/img/sub/btn_b_prev.png) center center no-repeat; }
.page .btn_next { height:34px; width:34px; margin-left:-4px; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_next.png) center center no-repeat;}
.page .btn_first { height:34px; width:34px; margin-right:0; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_first.png) center center no-repeat;}
.page .btn_last { height:34px; width:34px; margin-left:0; overflow:hidden; border:none; text-indent:-9999em; background:url(/img/sub/btn_b_last.png) center center no-repeat;}
.page li span { color:#aaa; display:block; margin-top:-10px; font-weight:800; }
@media screen and (max-width:640px){
	.page { margin:40px auto 0 auto; }
	.page a { font-size:13px; }
    .page li { margin:0 3px; }
}


article .btnbox { margin-top:40px; text-align:center; }
article .btnbox a,
article .btnbox button { display:inline-block; text-align:center; border:none; outline:none; background:none; margin:0 8px;  }
article .btnbox a span,
article .btnbox button span { margin:0 auto; justify-content:center; align-items:center; display:flex; position:relative; text-align:center; border:none; outline:none; background-color:var(--mainColor); min-width:120px; height:43px; color:#fff; font-size:15px; font-weight:600; border-radius:50px; }
article .btnbox a.line span,
article .btnbox button.line span { border:1px solid #ddd; background:#fff; color:#555;}
@media screen and (max-width:640px){	
    article .btnbox { margin-top:30px; }
    article .btnbox a,
    article .btnbox button { margin:0 3px; }
	article .btnbox a span,
	article .btnbox button span { height:40px; }
}