@charset "utf-8";

/*---
font-family: 'NanumSquareNeoLight';
font-family: 'NanumSquareNeo';
font-family: 'NanumSquareNeoBold';
font-family: 'NanumSquareNeoExtraBold';
font-family: 'NanumSquareNeoHeavy';
---*/

/*-----------------------공통-----------------------*/
html {width:100%; -webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust:none; overflow-y:scroll; overflow-x:hidden; word-break:keep-all;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline; list-style:none; font-family: 'NanumSquareNeo'; font-size:15px; line-height:1.7; -webkit-text-size-adjust:none;}

html, body { height:100% !important;}

a {text-decoration:none;color:#000;-webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;outline:none;}
a:hover, a:focus {text-decoration:none !important;}

/*-----드래그----*/
::-moz-selection {
   background: #6f00c4;
   color: #fff;
}
::selection {
   background: #6f00c4;
   color: #fff;
}
/*-----드래그----*/

/*-----스크롤----*/
::-webkit-scrollbar { width:8px; height:4px;}
::-webkit-scrollbar-track { background:#fff;}
::-webkit-scrollbar-thumb { background: linear-gradient(to top, #a41990, #6619ab);}
/*-----스크롤----*/

/*-----공통----*/
img { height:auto; max-width:100%; vertical-align:middle;}
.clear {clear:both;}
.clear20 {clear:both; height:20px;}
.clear40 {clear:both; height:40px;}
.clear60 {clear:both; height:60px;}
.clear80 {clear:both; height:80px;}
.clear100 {clear:both; height:100px;}
.clear200 {clear:both; height:200px;}
.clear_dot {clear:both; height:80px; margin-bottom:80px; border-bottom:#ddd dashed 1px;}

.text_center { text-align:center;}

.container { font-family: 'NanumSquareNeo'; max-width:1300px; width:100%; position:relative; margin:0 auto; padding:0 20px;}
h1 { font-family: 'NanumSquareNeoHeavy';}
h2 { font-family: 'NanumSquareNeoBold';}
h3 { font-family: 'NanumSquareNeoLight';}

#top_btn {position:fixed; bottom:20px; right:20px; width:45px; height:45px; border:1px solid #fff; text-align:center; z-index:90; background:rgba(0,0,0,0.25); -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;}
#top_btn img { position:relative; top:-3px;}
#top_btn:hover {border:1px solid #fff; background:#5b00a1;}

.footer { position:relative; background:#5b00a1; padding:180px 0; overflow:hidden;}
.footer .bottom_ul { font-size:0}
.footer .bottom_ul li { display:inline-block; vertical-align:top; width:70%; color:#fff;}
.footer .bottom_ul li:last-child { width:30%; text-align:right;}
.footer .bottom_ul li:last-child a { font-size:18px; color:#fff; font-weight:bold; padding:20px 30px; border:#fff solid 1px; border-radius:50px; position:relative; z-index:1;}
.footer .bottom_ul li .bottom_title { font-size:20px; margin-bottom:10px;}
.footer .bottom_slog { text-align:right; right:-40px; margin-top:-300px; font-size:100px; line-height:1.3; color:rgba(255,255,255,0.2);}
.footer .bottom_slog span { font-family: 'NanumSquareNeoHeavy'; font-size:100px; line-height:1.3; color:rgba(255,255,255,0.3);}
.footer .bottom_copy { font-size:15px; color:rgba(255,255,255,0.7);}

.footer_sub { position:relative; background:#fff; padding:100px 0; border-top:#000 solid 1px;}
.footer_sub .bottom_ul { font-size:0}
.footer_sub .bottom_ul li { display:inline-block; vertical-align:top; width:70%;}
.footer_sub .bottom_ul li:last-child { width:30%; text-align:right;}
.footer_sub .bottom_ul li:last-child a { font-size:18px; color:#6f00c4; font-weight:bold; padding:20px 30px; border:#6f00c4 solid 1px; border-radius:50px; position:relative; z-index:1;}
.footer_sub .bottom_ul li .bottom_title { font-size:20px; margin-bottom:5px;}
.footer_sub .bottom_copy { font-size:15px; color:rgba(0,0,0,0.7); margin-top:40px;}
/*-----공통----*/


/* 메뉴 */
/* 스크롤 내렸을때 CSS .active */
.navigation.active { background:rgba(0,0,0,0.75);}
/* 스크롤 내렸을때 CSS .active */

.navigation {
	width: 100%;
	position: fixed;
	background: rgba(0,0,0,0);
	padding:20px;
	font-size:0;
	z-index: 99;
	-webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;
}
.navigation .nav_logo { display:inline-block; vertical-align:middle; width:50%;}
.navigation .nav_logo img { width:140px;}
.navigation .nav_btn { display:inline-block; vertical-align:middle; width:50%; text-align:right;}
.navigation .nav_btn img { padding:10px; border:#fff solid 1px; border-radius:50%; background:rgba(255,255,255,0.25);}

.nav_menu { font-size:0;}
.nav_menu li { display:inline-block; vertical-align:middle; text-align:left;}
.nav_menu li:first-child { margin-right:15%;}
.nav_menu li:first-child p { margin:15px 0;}
.nav_menu li:first-child a { position:relative; font-family: 'NanumSquareNeoHeavy'; font-size:60px; color:#fff;}
.nav_menu li:first-child a span { position:absolute; top:-5px; right:-20px; padding:5px 10px; background:#57029a; border-radius:10px;}
.nav_menu li:first-child a:hover { background:#57029a;}
.nav_menu li:last-child { color:#fff;}
.nav_menu li:last-child .nav_title { font-family: 'NanumSquareNeoHeavy'; font-size:20px; color:#6f00c4; margin-bottom:15px;}
.nav_menu li:last-child .nav_line { height:1px; background:#fff; margin:15px 0;}
/* 메뉴 */


/* 메인 */
.section {
    position:relative;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
	overflow:hidden;
	background:url("/web/img/main/main_top.jpg") center center no-repeat; background-size:cover;
}

.main_title01 { font-size:30px; color:#6f00c4; margin-bottom:20px;}

.main_video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
}

.main_slogan { margin:150px 0;}
.main_slogan li { font-family: 'NanumSquareNeoHeavy'; font-size:50px; line-height: 1.3; text-transform:uppercase; margin:15px 0;}
.main_slogan li:nth-child(2) { text-align:right;}
.main_slogan li b { font-family: 'NanumSquareNeoHeavy'; font-size:50px; color:#6f00c4; line-height: 1.3;}
.main_slogan_text { margin-top:60px; font-size:18px; text-align:right;}
.main_slogan_text strong { display:block; font-size:20px; margin-top:15px;}

.main_category {}
.main_category li { position:relative; padding:20px 0 50px 0; border-top:#000 solid 1px; text-align:right;}
.main_category li span { position:absolute; top:20px; left:0; font-family: 'NanumSquareNeoHeavy'; font-size:22px; color:#999; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;}
.main_category li a { font-family: 'NanumSquareNeoHeavy'; font-size:60px; line-height: 1.3; text-transform:uppercase; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;}
.main_category li:hover span { font-size:32px;}
.main_category li:hover a { font-size:70px; color:#fff; background:#57029a;}

.main_port { margin:150px 0; overflow:hidden;}
.main_port_box { width:120%;}
.main_btn { margin:40px 0 20px 0;}
.main_btn a { font-size:15px; color:#6f00c4; padding:18px 30px; border:#6f00c4 solid 1px; border-radius:50px;}
.main_btn a:hover { color:#fff; background:#57029a;}

.main_bottom { position:relative; background:#000; padding:150px 0; overflow: hidden;}

.glowing-light01 {
    position: absolute;
    top: -600px;
    right: -700px;
    animation: moveLight01 15s ease-in-out infinite;
}
.glowing-light02 {
    position: absolute;
    top: -600px;
    left: -600px;
    animation: moveLight02 15s ease-in-out infinite;
}
.glowing-light03 {
    position: absolute;
    bottom: -900px;
    left: -600px;
    animation: moveLight03 10s ease-in-out infinite;
}
@keyframes moveLight01 {
    0% {
        top: -600px;
    	right: -700px;
    }
    50% {
        top: -400px;
    	right: -500px;
    }
    100% {
        top: -600px;
    	right: -700px;
    }
}
@keyframes moveLight02 {
    0% {
        top: -600px;
		opacity:0;
    }
    50% {
        top: -400px;
		opacity:1;
    }
    100% {
        top: -600px;
		opacity:0;
    }
}
@keyframes moveLight03 {
    0% {
        left: -600px;
    }
    50% {
        left: -100px;
    }
    100% {
        left: -600px;
    }
}

.main_bottom_title { margin-bottom:240px;}
.main_bottom_title li { position:relative; display:inline-block; vertical-align:middle; color:#fff; font-size:50px; font-weight:bold; margin-right:20px;}
.main_bottom_title li:first-child { display:block;}
.main_bottom_title li span { color:#6f00c4; font-size:50px; font-weight:bold;}
.main_bottom_title li .main_arrow01 { position:absolute; right:50px; bottom:-200px;}
.main_bottom_title li .main_arrow02 { position:absolute; right:-260px; bottom:-220px;}

.main_bottom_text { color:#fff; font-size:50px; font-weight:bold; text-align:right;}
.main_bottom_text span { color:#6f00c4; font-size:50px;}

.main_bottom_icon { border-top:#fff solid 1px; margin-top:100px;}
.main_bottom_icon li { font-size:20px; color:#fff; border-bottom:#fff solid 1px; padding:30px 20px 30px 400px;}
.main_bottom_icon li span { font-size:20px; color:#fff; font-weight:bold; letter-spacing:1px; display:inline-block; width:395px; margin-left:-400px;}
.main_bottom_icon li span img { margin:0 40px 0 20px;}
/* 메인 */



/* 서브 */
.sub_top_title { text-align:center; font-size:20px; padding:30px 0;}
.sub_top_title span { background:#8934cc; padding:5px 8px; border-radius:20px; font-size:12px; font-weight:normal; color:#fff; position:relative; top:-10px; left:-10px;}
.sub_box { min-height:600px; padding:80px 0 150px 0;}

.about_top_bg { position:relative; overflow:hidden;}
.about_top_bg .about_top_bg_img { position:absolute; width:1200px; right:-100px; top:50%; margin-top:-120px; animation: moveLeftRight 20s infinite alternate;}
@keyframes moveLeftRight {
    0% {
        right: -50px; /* 초기 위치 */
    }
    50% {
        right: 100px; /* 중간 위치 */
    }
    100% {
        right: -50px; /* 끝 위치 */
    }
}

.about_top_title { margin-bottom:60px; font-size:50px; line-height:1.5;}
.about_top_title span { font-family: 'NanumSquareNeoHeavy'; color:#6f00c4; font-size:50px; line-height:1.5;}
.about_top_box02 { margin:250px 0 0 auto; max-width:900px;}

.about_img_bg { height:500px; margin:200px 0; background:url("/web/img/sub/about_bg.jpg") center center no-repeat; background-size:cover;}

.sub_title { font-size:30px; color:#6f00c4; text-transform:uppercase; margin-bottom:60px;}
.sub_title span { font-size:20px; color:#666; margin-left:10px;}

.abo_bus_ul { font-size:0; margin:0 -5%;}
.abo_bus_ul li { position:relative; display: inline-block; vertical-align: middle; width: 23.33%; margin: 0 5%; text-align: center;}
.abo_bus_ul li:nth-child(2) img { position:absolute; top:50%; margin-top:-5px; left:-150px; z-index:-1;}
.abo_bus_ul li:nth-child(3) img { position:absolute; top:50%; margin-top:-109px; left:-140px; z-index:-1;}
.abo_bus01 {
    display: inline-block;
    background: #6f00c4;
    color:#fff;
    font-size: 20px;
	font-weight:bold;
    padding: 50%;
    height: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.abo_bus02 {
    display: inline-block;
    background: #fff;
    color:#6f00c4;
	border: #6f00c4 solid 1px;
    font-size: 20px;
	font-weight:bold;
    padding: 50%;
    height: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.abo_bus03 {
    display: inline-block;
    background: #fff;
    color:#6f00c4;
	border: #6f00c4 solid 1px;
    font-size: 20px;
	font-weight:bold;
    padding:30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.abo_bus03:nth-child(2) { margin-bottom:100px;}
.abo_bus03:nth-child(3) { margin-top:100px;}


.abo_work_ul { border-top:#6f00c4 solid 1px;}
.abo_work_ul .abo_work_li { padding:60px 0; border-bottom:#6f00c4 solid 1px;}
.abo_work_ul .abo_work_li .abo_work_box { margin-left:300px; }
.abo_work_ul .abo_work_li .abo_work_box span { display:inline-block; vertical-align:middle; width:290px; margin-left:-300px; text-align:center; font-size:20px; font-weight:bold; color:#6f00c4;}
.abo_work_ul .abo_work_li .abo_work_box span img { display:block; margin:0 auto 10px auto;}
.abo_work_ul .abo_work_li .abo_work_box div { display:inline-block; vertical-align:middle; font-size:16px; width:100%;}
.abo_work_ul .abo_work_li .abo_work_box ul { font-size:0; display:inline-block; vertical-align:middle; width:100%;}
.abo_work_ul .abo_work_li .abo_work_box ul li { font-size:16px; display:inline-block; width:50%; padding:10px 10px 10px 0;}
.abo_work_ul .abo_work_li .abo_work_box ul li strong { font-size:18px; display:block;}

.abo_pro_top { width:300px; height:300px; border-radius:50%; background:linear-gradient(45deg, #7c39e1, #ce98d1); margin:0 auto; display:flex; justify-content:center; align-items: center;}
.abo_pro_top_bar { width:1px; height:60px; background:#6f00c4; margin:0 auto;}

.abo_pro_logo_top { height:70px; border:#6f00c4 solid 1px; border-bottom:none; border-radius:50px 50px 0 0;}
.abo_pro_logo_bottom { height:70px; border:#6f00c4 solid 1px; border-top:none; border-radius:0 0 50px 50px;}
.abo_pro_ul { padding:0 20px; text-align:center;}
.abo_pro_ul .abo_pro_ul_text { max-width:1000px; margin:0 auto; font-size:18px; line-height:2; margin-bottom:20px;}
.abo_pro_ul .abo_pro_ul_text strong { font-size:18px;}
.abo_pro_ul li { display:inline-block; vertical-align:middle; margin:20px 3% 0 3%;}

.abo_pro_box { position:relative; overflow:hidden;}
.abo_pro_box .abo_pro_bg_img01 { position:absolute; width:800px; left:-250px; top:100px; animation: aboRight 5s forwards; z-index:-2;}
.abo_pro_box .abo_pro_bg_img02 { position:absolute; width:1000px; right:-250px; bottom:0; animation: aboLeft 15s forwards; z-index:-3;}
@keyframes aboRight {
    0% {
        left: -150px; /* 초기 위치 */
    }
    100% {
        left: -50px; /* 끝 위치 */
    }
}
@keyframes aboLeft {
    0% {
        right: -150px; /* 초기 위치 */
    }
    100% {
        right: -50px; /* 끝 위치 */
    }
}

.abo_pro_line_box { position:relative; padding-top:80px;}
.abo_pro_line_box .abo_pro_line { position:absolute; top:0; left:50%; width:1px; height:100%; background:linear-gradient(to bottom, #6f00c4 50%, #ccc 50%) fixed; z-index:-1;}

.step_box .step_left { position:relative; padding:30px 40px; width:50%; text-align:right;}
.step_box .step_right { position:relative; padding:30px 40px; width:50%; margin:0 0 0 auto;}
.step_dot { position:absolute; width:14px; height:14px; background:#fff; border:#6f00c4 solid 2px; border-radius:50%;}
.step_box:hover .step_dot { background:#6f00c4;}
.step_box .step_left .step_dot { right:-8px; top:40px;}
.step_box .step_right .step_dot { left:-6px; top:40px;}
.step_title01 { font-size:25px; color:#6f00c4;}
.step_title02 { font-size:20px; margin-bottom:20px; line-height:1.3;}

.contact_text { font-size:50px; line-height: 1.5; font-weight:bold; margin:80px 0;}
.contact_text span { font-size:50px; line-height: 1.5; color:#6f00c4;}
/* 서브 */

/*팝업*/
.layer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;}
.layer .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=80);}
.layer .btn-r { position:absolute; right:20px; top:20px;}
.layer .btn-r img { padding:10px; border:#fff solid 1px; border-radius:50%;}
.pop-box { height:100%; width:100%; display:flex; align-items:center; text-align:center;}
.pop-box .nav_logo { width:140px; position:absolute; left:20px; top:20px;}
/*팝업*/

@media screen and (max-width:991px){
	.clear200 {height:100px;}
	
	.nav_menu li { display:table;}
	.nav_menu li:first-child { margin-right:0; margin-bottom:20px;}
	.nav_menu li:first-child p { margin:0;}
	.nav_menu li:first-child a { font-size:40px;}
	
	.main_slogan { margin:80px 0;}
	.main_slogan li { font-size:35px;}
	.main_slogan li:nth-child(2) { text-align:left;}
	.main_slogan li b { font-size:35px;}
	.main_slogan_text { margin-top:40px; font-size:15px; text-align:left;}
	.main_slogan_text strong { font-size:17px;}
	
	.main_category li { padding:15px 0 20px 0;}
	.main_category li span { font-size:17px;}
	.main_category li a { font-size:35px;}
	.main_category li:hover span { font-size:20px;}
	.main_category li:hover a { font-size:35px;}
	
	.main_port_box { width:100%;}
	
	.main_bottom_title { margin-bottom:180px;}
	.main_bottom_title li { font-size:30px; line-height:1.5;}
	.main_bottom_title li span { font-size:30px; line-height:1.5;}
	.main_bottom_title li .main_arrow01 { right:80px; bottom:-160px;}
	.main_bottom_title li .main_arrow02 { right:-160px; bottom:-130px;}

	.main_bottom_text { font-size:30px; line-height:1.5;}
	.main_bottom_text span { font-size:30px; line-height:1.5;}	

	.main_bottom_icon li { font-size:17px; padding:30px 20px;}
	.main_bottom_icon li span { display:block; width:100%; margin-left:0; margin-bottom:10px;}
	.main_bottom_icon li span img { margin:0 20px 0 0;}
	
	.about_top_bg .about_top_bg_img { width:900px;}
	.about_top_title { margin-bottom:30px; font-size:30px;}
	.about_top_title span { font-size:30px;}
	.about_top_box02 { margin:150px 0 0 auto;}
	.about_img_bg { height:300px; margin:100px 0;}
	
	.sub_title { font-size:24px; margin-bottom:20px;}
	.sub_title span { font-size:17px;}
	
	.abo_bus01 { font-size: 17px;}
	.abo_bus02 { font-size: 17px;}
	.abo_bus03 { font-size: 17px; padding:24px;}
	.abo_bus_ul li:nth-child(3) img { top:-180px; margin-top:0; left:50%; margin-left:-60px; transform: rotate(90deg);}
	.abo_bus_ul li:nth-child(3) { width:90%; margin-top:120px;}
	.abo_bus03:nth-child(2) { margin-bottom:0; width:40%; display:inline-block;}
	.abo_bus03:nth-child(3) { margin-top:0; width:40%; display:inline-block;}
	
	.abo_work_ul .abo_work_li { padding:30px 0;}
	.abo_work_ul .abo_work_li .abo_work_box { margin-left:0; }
	.abo_work_ul .abo_work_li .abo_work_box span { display:block; margin-left:0; text-align:left; font-size:18px;}
	.abo_work_ul .abo_work_li .abo_work_box span img { display:none;}
	.abo_work_ul .abo_work_li .abo_work_box div { font-size:15px;}
	.abo_work_ul .abo_work_li .abo_work_box ul li { font-size:15px; width:50%;}
	.abo_work_ul .abo_work_li .abo_work_box ul li strong { font-size:16px;}
	
	.abo_pro_top { width:250px; height:250px;}
	.abo_pro_top img { width:150px;}
	.abo_pro_ul .abo_pro_ul_text { font-size:15px;}
	.abo_pro_ul .abo_pro_ul_text strong { font-size:15px;}
	
	.abo_pro_box .abo_pro_bg_img01 { width:600px;}
	.abo_pro_box .abo_pro_bg_img02 { width:800px;}
	
	.contact_text { font-size:25px; margin:40px 0;}
	.contact_text span { font-size:25px;}
}


@media screen and (max-width:767px){
	.footer { padding:100px 0;}
	.footer .bottom_ul li { width:100%;}
	.footer .bottom_ul li:last-child { width:100%; text-align:left; margin-top:40px;}
	.footer .bottom_ul li:last-child a { font-size:15px; padding:15px 20px;}
	.footer .bottom_slog { margin-top:-100px; font-size:60px; bottom:50px;}
	.footer .bottom_slog span { font-size:60px;}
	
	.footer_sub { padding:80px 0;}
	.footer_sub .bottom_ul li { width:100%;}
	.footer_sub .bottom_ul li:last-child { width:100%; text-align:left; margin-top:30px;}
	.footer_sub .bottom_ul li:last-child a { font-size:15px; padding:15px 20px;}
	
	.sub_top_title { opacity:0;}
	
	.abo_bus_ul li { display:block; margin: 0 auto;}
	.abo_bus_ul li:nth-child(1) { width:220px;}
	.abo_bus_ul li:nth-child(2) { width:220px; margin-top:80px;}
	.abo_bus_ul li:nth-child(2) img { top:-20px; margin-top:-50px; left:50%; margin-left:-50px; transform: rotate(90deg);}
	
	.abo_work_ul .abo_work_li .abo_work_box ul li { width:100%; padding:0 0 10px 0;}
	
	.abo_pro_line_box .abo_pro_line { left:20px;}
	.step_box .step_left { padding:20px 0 20px 50px; width:100%; text-align:left;}
	.step_box .step_right { padding:20px 0 20px 50px; width:100%; margin:0;}
	.step_box .step_left .step_dot { right:auto; left:13px; top:35px;}
	.step_box .step_right .step_dot { left:13px; top:35px;}
}