/* ************ 메인페이지 스타일 ************ */

@media screen and (min-width:1367px) {

	/* 메인-비쥬얼 */
	.main .visual {display:flex; height:100vh; justify-content:center; align-items:center;}
	.main .visual>* {z-index:10; position:relative;}
	.main .visual .videoWrap {z-index:1; position:absolute; left:0; top:0; width:100%; height:100vh; background:#000; overflow:hidden;}
	.main .visual .videoWrap video {width:100%; height:100%; object-fit:cover; opacity:.5; animation:video ease 3s forwards;}
	.main .visual .slogan {color:#fff;}
	.main .visual .slogan:before,
	.main .visual .slogan:after {content:""; position:absolute; top:22px; width:30px; height:195px; border:10px solid #fff; opacity:0;}
	.main .visual .slogan:before {left:0; border-right:0; animation:bar_before ease 2s forwards;}
	.main .visual .slogan:after {right:0; border-left:0; animation:bar_after ease 2s forwards;}
	.main .visual .slogan .wrap {position:relative; display:flex; flex-wrap:wrap; width:900px; justify-content:center; margin-top:30px;}
	.main .visual .slogan .wrap span {display:block; padding:5px; font-size:60px; font-weight:600; line-height:1.4; transform:rotate(.3deg); opacity:0;}
	.main .visual .slogan .wrap span:nth-child(1) {padding-left:40px; animation:word ease 2s 1.2s forwards;}
	.main .visual .slogan .wrap span:nth-child(2) {animation:word ease 2s 1.4s forwards;}
	.main .visual .slogan .wrap span:nth-child(3) {animation:word ease 2s 1.8s forwards;}
	.main .visual .slogan .wrap span:nth-child(4) {animation:word ease 2s 1.2s forwards;}
	.main .visual .slogan .wrap span:nth-child(5) {animation:word ease 2s 1s forwards;}
	.main .visual .slogan .wrap span:nth-child(6) {animation:word ease 2s 1.6s forwards;}
	.main .visual .slogan .wrap span:nth-child(7) {animation:word ease 2s 1.3s forwards;}
	.main .visual .slogan .wrap span:nth-child(8) {animation:word ease 2s 1.9s forwards;}
	.main .visual .slogan .wrap span:nth-child(9) {padding:0 20px;}
	.main .visual .slogan .wrap span:nth-child(10) {animation:word ease 2s 1.7s forwards;}
	.main .visual .slogan .wrap span:nth-child(11) {animation:word ease 2s 1.5s forwards;}
	.main .visual .slogan .wrap span:nth-child(12) {animation:word ease 2s 1.1s forwards;}
	.main .visual .slogan .wrap span:nth-child(13) {animation:word ease 2s 1.3s forwards;}
	.main .visual .slogan .wrap span:nth-child(14) {animation:word ease 2s 1.9s forwards;}
	.main .visual .slogan .wrap span:nth-child(15) {animation:word ease 2s 1.1s forwards;}
	.main .visual .slogan .wrap span:nth-child(16) {animation:word ease 2s 1.5s forwards;}
	.main .visual .slogan .wrap span:nth-child(17) {animation:word ease 2s 1.3s forwards;}
	.main .visual .slogan .wrap span:nth-child(18) {animation:word ease 2s 1.7s forwards;}
	.main .visual .slogan .wrap span:nth-child(19) {animation:word ease 2s 1s forwards;}
	.main .visual .slogan .wrap span:nth-child(20) {padding:0 20px;}
	.main .visual .slogan .wrap span:nth-child(21) {animation:word ease 2s 1.5s forwards;}
	.main .visual .slogan .wrap span:nth-child(22) {animation:word ease 2s 1.9s forwards;}
	.main .visual .slogan .wrap span:nth-child(23) {animation:word ease 2s 1.3s forwards;}
	.main .visual .slogan .wrap span:nth-child(24) {animation:word ease 2s 1.7s forwards;}
	.main .visual .slogan .wrap span:nth-child(25) {padding:0 20px;}
	.main .visual .slogan .wrap span:nth-child(26) {animation:word ease 2s 1.2s forwards;}
	.main .visual .slogan .wrap span:nth-child(27) {animation:word ease 2s 1s forwards;}
	.main .visual .slogan .wrap span:nth-child(28) {animation:word ease 2s 1.4s forwards;}
	.main .visual .slogan .wrap span:nth-child(29) {padding:0 20px;}
	.main .visual .slogan .wrap span:nth-child(30) {animation:word ease 2s 1.6s forwards;}
	.main .visual .slogan .wrap span:nth-child(31) {animation:word ease 2s 1.2s forwards;}
	.main .visual .slogan .wrap span:nth-child(32) {animation:word ease 2s 1.8s forwards;}
	.main .visual .slogan .wrap span:nth-child(33) {animation:word ease 2s 1.3s forwards;}
	.main .visual .slogan .wrap span:nth-child(34) {animation:word ease 2s 1.5s forwards;}
	.main .visual .slogan p {
		margin-top:35px; font-weight:400; font-size:18px; line-height:1.8; text-align:center; opacity:0;
		transform:rotate(.3deg); animation:copytext ease 1s 2s forwards;
	}
	.main .visual .scroll_down_circle {
		position:absolute; bottom:30px; left:50%; transform:translateX(-50%); overflow:hidden;
		display:flex; justify-content:center; align-items:center; height:65px; width:65px;
		border:2px solid #fff; border-radius:50%; background:rgba(0,0,0,.2);
	}
	.main .visual .scroll_down_circle div {
		z-index:2; position:absolute; display:block; width:12px; height:21px; animation:ani_slideDown 1.5s infinite;
		background:url(../images/main/main_arrow_down.webp) no-repeat center ;
	}

	@keyframes video {
		from{transform:scale(1.4); opacity:.5;} to{transform:scale(1); opacity:.8;}
	}
	@keyframes bar_before {
		from{left:50%; width:10px; opacity:0;} to{left:0; width:30px; opacity:1;}
	}
	@keyframes bar_after {
		from{right:50%; width:10px; opacity:0;} to{right:0; width:30px; opacity:1;}
	}
	@keyframes word {
		from{opacity:0; filter:blur(3px);} to{opacity:1; filter: blur(0);}
	}
	@keyframes copytext {
		from{transform:translateY(20px);} to{transform:translateY(0); opacity:1;}
	}
	@keyframes ani_slideDown {
		from{transform:translateY(-35px); opacity:0;}
		50%{transform:translateY(0);opacity:1;}
		to{transform:translateY(35px); opacity:0;}
	}



	/* 비즈니스 */
	.main .busi_wrap { background:#fff; }
	.main .busi_wrap .busi_con { width:100%; max-width:1400px; padding:150px 0; margin:0 auto; }
	.main .busi_wrap .busi_con>.tit h2 { font-size:48px; text-align:center; }
	.main .busi_wrap .busi_con>.tit p { font-size:18px; color:#666; text-align:center; margin-top:25px; }
	.main .busi_wrap .busi_con .menu { display:grid; grid-template-columns:repeat(5,1fr); margin-top:125px; }
	.main .busi_wrap .busi_con .menu article { text-align:center; padding:0 35px; }
	.main .busi_wrap .busi_con .menu article + article { border-left:1px solid #e5e5e5; }
	.main .busi_wrap .busi_con .menu article > a { display:flex; flex-direction:column; justify-content:space-between; height:100%; transition:all 0.3s;}
	.main .busi_wrap .busi_con .menu article > a:hover h3 { color:#4169e0; }
	.main .busi_wrap .busi_con .menu article h3 {font-size:24px; transition:all 0.5s; transform:rotate(0.03deg); min-height:50px;}
	.main .busi_wrap .busi_con .menu article .tit { display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
	.main .busi_wrap .busi_con .menu article img { margin-top:35px;  }
	/*.main .busi_wrap .busi_con > div article > a:hover img { filter: opacity(0.5) drop-shadow(0 0 0 #4169e0); }*/
	.main .busi_wrap .busi_con .menu article p { font-size:16px; color:#666; margin-top:28px; }
	/*.main .busi_wrap .busi_con > div article > a:hover p { color : #7890d6; }*/
	.main .busi_wrap .busi_con .menu article .bottom {margin-top:80px;}
	.main .busi_wrap .busi_con .menu article span { margin-top:90px; position:relative; color:#666;  }
	.main .busi_wrap .busi_con .menu article span i { position:absolute; width:70px; height:2px; background:#000; bottom:-7px; left:50%; transform:translateX(-50%); transition:all 0.2s;}
	.main .busi_wrap .busi_con .menu article span i:after { content: "";
    position: absolute; right: 5px; bottom: -1px; width: 15px; border-top: 2px solid #000; transform: rotate(45deg) translateY(-9px); opacity:0; transition:0.2s;}
	.main .busi_wrap .busi_con .menu article > a:hover span i { width:140px; background:#4169e0;}
	.main .busi_wrap .busi_con .menu article > a:hover span i:after {border-top: 2px solid #4169e0; opacity:1;}
	.main .busi_wrap .busi_con .menu article > a:hover span { color:#4169e0; }


	/* 공지사항&QnA */
	.main_etc { background:url(../images/main/main_notice_bg.webp) no-repeat center / cover; }
	.main_etc .etc_con { margin:0 auto; max-width:1400px; padding:150px 0; display:grid; grid-template-columns:36% auto; gap:20px; }
	.main_etc .etc_con .left h3 { font-size:65px; font-weight:800; color:#17e38f; transform:rotate(0.03deg);}
	.main_etc .etc_con .left h3 span.small { font-size:18px; display:block; margin-bottom:5px; font-weight:800; color:#fff; }
	.main_etc .etc_con .left > p { position:relative; font-size:16px; color:#fff; margin-top:50px; color:#fff; transform:rotate(0.03deg); }
	/* .main_etc .etc_con .left > p:after { content:""; display:block; position:absolute; top:5px; right:175px; width:50px; height:5px; background-color:#17e38f; } */

	.main_etc .etc_con .right .btn a { display:inline-block; color:#fff; font-size:18px; border-bottom:2px solid #fff; padding-bottom:2px; transition:all .3s ease}
	.main_etc .etc_con .right .btn a+a { margin-left:50px; }
	.main_etc .etc_con .right .btn a:hover {letter-spacing:3px; color:#17e38f; border-bottom-color:#17e38f;}
	.main_etc .etc_con .right .notice { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:105px; }
	.main_etc .etc_con .right .notice article { display:flex; flex-direction:column; justify-content:space-between; }
	.main_etc .etc_con .right .notice article a dl dt { position:relative; font-size:18px; font-weight:600; margin-bottom:5px; color:#17e38f; transform:rotate(0.03deg)}
	.main_etc .etc_con .right .notice article a dl dt:after { content:""; display:block; position:absolute;  height:1px; width:10px; background:#17e38f; top:13px; left:70px; transition:all .3s;}
	.main_etc .etc_con .right .notice article a:hover dl dt:after {left:80px;}
	.main_etc .etc_con .right .notice article a dl dd {
		margin-bottom:28px; color:#fff; font-size:18px; font-weight:500;
		white-space:normal;	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
		overflow:hidden;
	}
	.main_etc .etc_con .right .notice article p {position:relative; padding-top:25px; border-top:1px solid rgba(229, 229, 229, 0.3); color:#fff; }
	.main_etc .etc_con .right .notice article p:before {content:""; position:absolute; left:0; top:-1px; width:0; border-top:1px solid #17e38f; transition:all .5s ease;}
	.main_etc .etc_con .right .notice article:hover p:before {width:100%;}

	/* 스폰서 */
	.spon_wrap .spon_con { max-width:1400px; margin:0 auto; padding:30px 0; }
	.spon_wrap .spon_con .list { display:flex; justify-content:space-between; align-items:center; }
}



/* ************************ 태블릿 (~1366) ************************ */
@media screen and (max-width:1366px) {
	/* 메인-비쥬얼 */
	.main .visual {display:flex; height:100svh; justify-content:center; align-items:center;}
	.main .visual>* {z-index:10; position:relative;}
	.main .visual .videoWrap {z-index:1; position:absolute; left:0; top:0; width:100%; height:100svh; background:#000; overflow:hidden;}
	.main .visual .videoWrap video {width:100%; height:100%; object-fit:cover; opacity:.5; animation:video ease 3s forwards;}
	.main .visual .slogan {color:#fff; display:flex; flex-direction:column;
    align-items:center; width:80vw; }
	.main .visual .slogan:before,
	.main .visual .slogan:after {content:""; position:absolute; top:1vw; width:2vw; height:25vw; border:1vw solid #fff; opacity:1;}
	.main .visual .slogan:before {left:0; border-right:0; animation:bar_before ease 2s forwards;}
	.main .visual .slogan:after {right:0; border-left:0; animation:bar_after ease 2s forwards;}
	.main .visual .slogan .wrap {position:relative; text-align:center;}
	.main .visual .slogan .wrap span {display:inline-block; padding:1vw 0.5vw; font-size:6vw;  font-weight:800; line-height:1; transform:rotate(.3deg); opacity:1;}
	.main .visual .slogan .wrap span:nth-child(9),
	.main .visual .slogan .wrap span:nth-child(20) {display:block;}
	.main .visual .slogan p {
		margin-top:35px; font-size:16px; line-height:1.8; text-align:center; opacity:.7;}
	.main .visual .scroll_down_circle {
		position:absolute; bottom:50px; left:50%; transform:translateX(-50%); overflow:hidden;
		display:flex; justify-content:center; align-items:center; height:40px; width:40px;
		border:1px solid #fff; border-radius:50%; opacity:.7;
	}
	.main .visual .scroll_down_circle div {
		z-index:2; position:absolute; display:block; width:12px; height:21px; animation:ani_slideDown 1.5s infinite;
		background:url(../images/main/main_arrow_down.webp) no-repeat center/70% ;
	}

	/* 비즈니스 */
	.main .busi_wrap {padding:70px 20px;}
	.main .busi_wrap .busi_con {}
	.main .busi_wrap .busi_con>.tit h2 { font-size:30px; text-align:center; }
	.main .busi_wrap .busi_con>.tit p {color:#666; text-align:center; margin-top:25px; }
	.main .busi_wrap .busi_con .menu {display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:30px;}
	.main .busi_wrap .busi_con .menu article { text-align:center; padding:40px 20px; border:1px solid #e5e5e5; border-radius:1rem; word-break:break-all;}
	.main .busi_wrap .busi_con .menu article + article { border-left:1px solid #e5e5e5; }
	.main .busi_wrap .busi_con .menu article > a { display:flex; flex-direction:column; justify-content:space-between; height:100%; transition:all 0.3s;}
	.main .busi_wrap .busi_con .menu article > a:hover h3 { color:#4169e0; }
	.main .busi_wrap .busi_con .menu article h3 {font-size:24px; transition:all 0.5s; transform:rotate(0.03deg); min-height:50px;}
	.main .busi_wrap .busi_con .menu article .tit { display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
	.main .busi_wrap .busi_con .menu article img { margin-top:35px;  }
	/*.main .busi_wrap .busi_con > div article > a:hover img { filter: opacity(0.5) drop-shadow(0 0 0 #4169e0); }*/
	.main .busi_wrap .busi_con .menu article p { font-size:16px; color:#666; margin-top:28px; }
	/*.main .busi_wrap .busi_con > div article > a:hover p { color : #7890d6; }*/
	.main .busi_wrap .busi_con .menu article .bottom {margin-top:30px;}
	.main .busi_wrap .busi_con .menu article span { margin-top:90px; position:relative; color:#666;  }
	.main .busi_wrap .busi_con .menu article span i { position:absolute; width:70px; height:2px; background:#000; bottom:-7px; left:50%; transform:translateX(-50%); transition:all 0.2s;}
	.main .busi_wrap .busi_con .menu article span i:after { content: "";
    position: absolute; right: 5px; bottom: -1px; width: 15px; border-top: 2px solid #000; transform: rotate(45deg) translateY(-9px); opacity:0; transition:0.2s;}
	.main .busi_wrap .busi_con .menu article > a:hover span i { width:140px; background:#4169e0;}
	.main .busi_wrap .busi_con .menu article > a:hover span i:after {border-top: 2px solid #4169e0; opacity:1;}
	.main .busi_wrap .busi_con .menu article > a:hover span { color:#4169e0; }


	/* 공지사항&QnA */
	.main_etc {padding:70px 20px; background:url(../images/main/main_notice_bg.webp) no-repeat center / cover; }
	.main_etc .etc_con { margin:0 auto; max-width:1400px;}
	.main_etc .etc_con .left {text-align:center;}
	.main_etc .etc_con .left h3 { font-size:40px; font-weight:800; color:#17e38f; transform:rotate(0.03deg);}
	.main_etc .etc_con .left h3 span.small { font-size:18px; display:block; margin-bottom:5px; font-weight:800; color:#fff; }
	.main_etc .etc_con .left > p { position:relative; font-size:16px; color:#fff; margin-top:20px; color:#fff; opacity:.7;}

	.main_etc .etc_con .right .btn {display:grid; grid-template-columns:repeat(3,1fr);  justify-content:center; gap:5px; margin-top:30px;}
	.main_etc .etc_con .right .btn a {color:#fff; font-size:15px; font-weight:600; line-height:1; padding:13px 0; background:#fff; color:#000; text-align:center; border-radius:5px;}

	.main_etc .etc_con .right .notice {margin-top:30px;}
	.main_etc .etc_con .right .notice article { display:flex; flex-direction:column; justify-content:space-between; }
	.main_etc .etc_con .right .notice article+article {margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2);}
	.main_etc .etc_con .right .notice article a dl dt { position:relative; font-size:15px; font-weight:600; margin-bottom:5px; color:#17e38f; }
	.main_etc .etc_con .right .notice article a dl dt:after { content:""; display:block; position:absolute;  height:1px; width:10px; background:#17e38f; top:11px; left:70px; }
	.main_etc .etc_con .right .notice article a dl dd { color:#fff; white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	}
	.main_etc .etc_con .right .notice article p {margin-top:5px; font-size:14px; color:#fff;}

	/* 스폰서 */
	.spon_wrap .spon_con { max-width:1400px; margin:0 auto; padding:20px; }
	.spon_wrap .spon_con .list { display:flex; justify-content:space-between; align-items:center; }
	.spon_wrap .spon_con .list img {height:2.5vw;}
}


@media screen and (max-width:768px) {
	/* 비즈니스 */
	.main .busi_wrap .busi_con .menu article {padding:20px;}
	.main .busi_wrap .busi_con .menu article h3 {font-size:16px; line-height:1.2; order:1; min-height:auto; word-break:keep-all;}
	.main .busi_wrap .busi_con .menu article img {margin:0 0 20px; width:50%; max-width:80px;}
	.main .busi_wrap .busi_con .menu article p {display:none;}
	.main .busi_wrap .busi_con .menu article .bottom {display:none;}
	.main .busi_wrap .busi_con .menu article:nth-child(5) {grid-column:span 2;}

	/* 스폰서 */
	.spon_wrap .spon_con {padding:0;}
	.spon_wrap .spon_con .list { display:grid; grid-template-columns:1fr 1fr; justify-content:space-between; align-items:center;}
	.spon_wrap .spon_con .list li {display:flex; justify-content:center; padding:15px 0; border-top:1px solid #f0f0f0;}
	.spon_wrap .spon_con .list li:nth-child(even) {border-left:1px solid #f0f0f0;}
	.spon_wrap .spon_con .list img {height:25px; max-height:40px;}
}