@charset "utf-8";

/* 헤더 */
#header {position:relative}
#header > .btm {position:fixed;right:-100%;width:100%;z-index:999;background:#fff;height:100%;top:0px;overflow-y:auto;-ms-overflow-style:none;}
#header > .btm::-webkit-scrollbar { display: none; }

#nav {width:100%;height:auto;margin:auto;overflow:hidden;font-size:0px;padding-left:0px;}
#nav:after {display:block; width:100%; content:'';}
#nav > li {display:block; width:1;padding:0px;text-align:left;border-bottom:solid 1px #ebebeb;}
#nav > li > a {display:block; font-size:16px; font-weight:600; color:#404040; line-height:50px;padding-left:20px;letter-spacing:0px;}
#nav > li.active > a, #nav > li > a:hover {color:#333}
#nav > li:before {content:'';width:100%;position:fixed;}
#nav > li:first-child {padding-left:0px;}
#nav > li:last-child {padding-right:0px;}

.mask {display:block; position:fixed; width:100%; height:0; background:#000; opacity:0; z-index:998; transition:all 0.3s ease}


#gnbTrigger {display:none;position:fixed; top:0px; right:0px; width:60px; height:60px; border:none; background:#fff; cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;}
#gnbTrigger > span {display:block; position:absolute; left:50%; width:20px; height:1px; margin-left:-13px; background:#fff; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbTrigger > .bar1 {top:20px}
#gnbTrigger > .bar2 {top:28px;}
#gnbTrigger > .bar3 {top:36px}
#gnbTrigger.open {}
#gnbTrigger.open > span {background:#fff}
#gnbTrigger.open > .bar1 {top:28px; transform:rotate(135deg)}
#gnbTrigger.open > .bar2 {opacity:0; left:-30px}
#gnbTrigger.open > .bar3 {top:28px; transform:rotate(-135deg)}


/* 전체레이아웃 */
#wrapper {min-width:480px; overflow:hidden;width:480px;left:50%;margin-left:-400px;position:relative;z-index:1;}


/* 배경관련 */
#total-bg {position:fixed;width:100%; }

.bg_content {position:absolute;left:50%;top:100px;margin-left:180px;width:490px;}
.bg_content .bg_logo {margin-bottom:30px;}
.bg_content .txtArea {font-family:Gmarket Sans;}
.bg_content .txtArea > span {font-size:27px;color:#fff;line-height:1.2;margin-bottom:30px;display:block;}
.bg_content .txtArea > h2 {font-size:55px;color:#fff;line-height:1;margin-bottom:10px;}
.bg_content .txtArea > h1 {font-size:63px;color:#003237;line-height:1;margin-bottom:30px;}
.bg_content .bg_nav {width:285px;}
.bg_content .bg_nav > span {display:block;margin-bottom:15px;border-radius:100px;}
.bg_content .bg_nav > span > a {display:block;padding:15px 20px;border:solid 1px #fff;text-align:center;border-radius:100px;font-size:18px;font-family:Gmarket Sans;color:#fff;transition:all 0.2s ease}
.bg_content .bg_nav > span > a:hover,
.bg_content .bg_nav > span > a.active {color:#fff;}
.bg_content .bg_nav > span.link-btn {background:#003237;box-shadow:10px 10px 10px #0e171d;transition:all 0.2s ease}
.bg_content .bg_nav > span.link-btn:hover {background:#007c89;}
.bg_content .bg_nav > span.link-btn > a {border:0px;}
.bg_content .bg_nav > span.link-btn:hover > a {color:#fff;}

.bg_content_m {position:relative;padding:0px;width:100%; }
.bg_content_m .bg_logo {margin-bottom:30px;}
.bg_content_m .txtArea {font-family:Gmarket Sans;text-align:center;}
.bg_content_m .txtArea > span {font-size:20px;color:#908f8f;line-height:1;margin-bottom:15px;display:block;}
.bg_content_m .txtArea > h2 {font-size:35px;color:#fff;line-height:1;margin-bottom:10px;}
.bg_content_m .txtArea > h1 {font-size:50px;color:#af7300;line-height:1;margin-bottom:20px;}
.bg_content_m .bg_nav_m {width:285px;text-align:center;margin:0px auto;}
.bg_content_m .bg_nav_m > span {display:block;margin-bottom:15px;border-radius:100px;}
.bg_content_m .bg_nav_m > span > a {display:block;padding:12px 20px;border:solid 1px #535a63;text-align:center;border-radius:100px;font-size:18px;font-family:Gmarket Sans;color:#fff;transition:all 0.2s ease}
.bg_content_m .bg_nav_m > span > a:hover {color:#3a69df;}
.bg_content_m .bg_nav_m > span.link-btn {background:#3a69df;box-shadow:10px 10px 10px #0e171d;transition:all 0.2s ease}
.bg_content_m .bg_nav_m > span.link-btn:hover {background:#fadd1b;}
.bg_content_m .bg_nav_m > span.link-btn > a {border:0px;}
.bg_content_m .bg_nav_m > span.link-btn:hover > a {color:#000;}

/* 상단으로 스크롤 */
#scrollTop {display:block;opacity:0; position:fixed; bottom:30px; right:-30px;  width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#003237; z-index:10;transition:all .3s ease;}
#scrollTop i {position:absolute; top:30%; left:30%; transition:all .4s ease; font-size:18px; }
#scrollTop span {position:absolute; width:100%; top:0; left:50%; font-weight:600; margin-left:-22px; line-height:45px; opacity:0; filter:alpha(opacity='0'); transform:rotate(-360deg); transition:all .4s ease}
#scrollTop.active i {opacity:0; filter:alpha(opacity='0'); transform:rotate(360deg)}
#scrollTop.active span {display:block; opacity:1; filter:alpha(opacity='100'); transform:rotate(0deg)}

body.scrollfix #scrollTop {right:30px;opacity:1;}

/* 꽃 */
.bg_flower1 {position:absolute;left:50%;margin-left:-600px;top:60px; z-index:-1;}
.bg_flower1 .rotate_flower {position:absolute; left:50%; top:50%; z-index:10;  background-repeat: no-repeat; background-size:cover; animation:rotate_flower 3s infinite ease running;animate-play-state:running;}
@keyframes rotate_flower {
	0%{
		transform: translateY(10px);
	}
	50%{
		transform: translateY(30px);
	}
	100%{
		transform: translateY(10px);
	}
}

.bg_flower2 {position:absolute;left:41%;margin-left:750px;top:480px; z-index:-1;}
.bg_flower2 .rotate_flower2 {position:absolute; left:50%; top:50%; z-index:10;  background-repeat: no-repeat; background-size:cover; animation:rotate_flower2 4.5s infinite ease running;animate-play-state:running;}
@keyframes rotate_flower2 {
	0%{
		transform: translateY(15px);
	}
	50%{
		transform: translateY(30px);
	}
	100%{
		transform: translateY(15px);
	}
}

.bg_flower3 {display:none; position:absolute;left:47%;top:383px;margin-left:-130px; z-index:-1;}
.bg_flower3 .rotate_flower3 {position:absolute; left:50%; top:50%; margin-left:130px; z-index:10;  background-repeat: no-repeat; background-size:cover; animation:rotate_flower3 6.5s infinite ease running;animate-play-state:running;}
@keyframes rotate_flower3 {
	0%{
		transform: translateY(5px);
	}
	50%{
		transform: translateY(20px);
	}
	100%{
		transform: translateY(5px);
	}
}