@charset "UTF-8";
/*===============================================
*  COMMON
===============================================*/
.wp {
	width:100%;
	padding:0 2rem;
}
@media(min-width:600px) {
	.wp {
		padding:0 5rem;
	}
}
@media(min-width:993px) {
	.wp {
		width:900px;
		max-width:900px;
		margin:0 auto;
	}
}
@media(min-width:1201px) {
	.wp {
		width:1180px;
		max-width:1180px;
		margin:0 auto;
	}
}
@media(min-width:1651px) {
	.wp {
		width:1380px;
		max-width:1380px;
		margin:0 auto;
	}
}

/* BUTTON */
/*
*:before,
*:after {
  z-index: -1;
}
*/
[class^="btn-"] {
  position: relative;
  display: inline-block;;
  overflow: hidden;
  padding:20px 0;
  width: 100%;
  max-width: 250px;
  text-transform: uppercase;
  border: 2px solid currentColor;
  font-size:18px;
  text-align:center;
  font-weight:600;
}


.btn-6 {
  color: #fff;
}
.btn-6 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #fff;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.btn-6:hover {
  color: #333;
}
.btn-6:hover span {
  width: 225%;
  height: 562.5px;
}
.btn-6:active {
  background-color: #fff;
}


/*===============================================
*  HEADER
===============================================*/


#header {
	position:fixed;
	width:100%;
	height:100px;
	overflow:hidden;
	z-index:30;
	background-color:#f3f2ea;
	transition: height 0.3s ease;
	border-bottom:1px solid #ddd;
}
#header.normal {
	height:100px;
}
#header.active {
	height:300px;
}
#header:after{
	position:absolute;
	left:50%;
	margin-left:-242px;
	right:0;
	top:102px;
	bottom:0;
	content:"";
	display:block;
	background-color:#fbfbfb;
}
#header.active{
	border-bottom:1px solid #ddd
}
.header_body{
	background-color:#FFF;
	border-bottom:2px solid #171717;
	width:100%;
}
.header_wp {
	width:100%;
	max-width:1400px;
	margin:0 auto;
	padding:0 2rem;
	position:relative;
}
.header_wp:after {
	content:"";
	display:block;
	clear:both;
}
/* HEADER LOGO */
.header_logo{
	float:left;
	width:260px;
	height:100px;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.header_logo a{
	display:block;
	width:100%;
	height:100%;
	font-size:0;
	background:url('../img/top_logo02.png') no-repeat 0% 50%;
	background-size:auto;
	-webkit-transition:all 0s ease;
	transition:all 0s ease;
	display:block;
	line-height:70px;
}

/* HEADER RIGHT */
.header_right {
	width:calc(100% - 260px);
	float:right;
}
/* HEADER TOP MENU */
.header_top{
}
.header_top .top_menu{
	text-align:right;
}
.header_top .top_menu li{
	position:relative;
	display:inline-block;
	margin:0 10px;
}
.header_top .top_menu li.sl {
	margin:0 30px;
}
.header_top .top_menu li:last-child.sl {
	margin-right:0;
	margin-left:10px;
}
.header_top .top_menu li.sl:before{
	position:absolute;
	left:-20px;
	top:50%;
	margin-top:-4px;
	height:8px;
	border-left:1px solid #ddd;
	content:"";
	display:block;
}
.header_top .top_menu li:first-child:after{
	display:none;
}
.header_top .top_menu li a{
	display:block;
	line-height:70px;
	font-size:13px;
	color:#666;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.header_top .top_menu li a:hover {
	color:#222;
}
.header_top .top_menu li a i {
	font-size:20px;
	vertical-align:sub;
}

/* HEADER MENU */
.header_menu {}
.header_menu:after {
	content:"";
	display:block;
	clear:both;
}
#gnb{
	position:relative;
	float:right;
	width:850px; /* 메뉴 원래상태 2018-10-02 */
	/* width:550px; 메뉴 2개 숨겼을때 2018-10-02 */

	margin-right:-50px;
	z-index:99;
}
#gnb > ul:after {
	content:"";
	display:block;
	clear:both;
}
#gnb > ul > li{
	position:relative;
	float:left;
	width:15.6%; /*메뉴 원래상태 2018-10-02*/
    /*width:33.33%; /* 메뉴 2개 숨겼을때 2018-10-02 */
	text-align:center;
}
@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.flux {
  /* font-family: neon; */
  color: #426DFB;
  font-size: 9vw;
  line-height: 9vw;
  /* text-shadow: 0 0 3vw #2356FF; */
}

.flux {
  animation: flux 3s linear infinite;
  -moz-animation: flux 3s linear infinite;
  -webkit-animation: flux 3s linear infinite;
  -o-animation: flux 3s linear infinite;
}

@keyframes flux {
  0%{
	  color: #fff890;
  }
  100% {
    color: #fde145;
  }
  50% {
    color: #694814;
  }
}
#gnb > ul > li:after{
	content:"";
	position:absolute;
	left:50%;
	right:0;
	bottom:-2px;
	width:0%;
	height:2px;
	background:#ada16d;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition:0.3s ease;
	transition: all 0.3s ease;
}
#gnb > ul > li:hover:after,
#gnb > ul > li.active:after {
	width:100%;
}

#gnb > ul > li > a{
	position:relative;
	font-size:20px;
	color:#555;
	display:inline-block;
	line-height:100px;
	font-weight:500;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#gnb > ul > li:hover a,
#gnb > ul > li.active a {
	color:#ada16d;
}

#gnb > ul > li > .depth02 {
	position:absolute;
	padding:25px 0;
	width:100%;
	box-sizing:border-box;
}
#gnb > ul > li > .depth02 .depth02_list {
	display:inline-block;
	text-align:left;
}
#gnb > ul > li > .depth02:after {
	position:absolute;
	left:0;
	top:30px;
	height: 150px;
	content:"";
	display:block;
	border-left:1px solid #d5d5d5;
}
#gnb > ul > li:first-child .depth02:after {
	display:none;
}
#gnb > ul > li > .depth02 li {
	padding: 5px 0;
}
#gnb > ul > li > .depth02 li > a {
	position:relative;
	display:inline-block;
	font-size:16px;
	color:#555;
	padding-bottom:1px;
}
#gnb > ul > li > .depth02 li > a:after {
	position:absolute;
	left:0;
	bottom:0;
	width:0;
	border-bottom:1px solid #543e22;
	content:"";
	display:block;
	transition: width 0.3s;
}
#gnb > ul > li > .depth02 li.active a,
#gnb > ul > li > .depth02 li:hover a {
	color:#543e22;
	font-weight:400;
}
#gnb > ul > li > .depth02 li.active a:after,
#gnb > ul > li > .depth02  i:hover a:after{
	width:100%;
}

.gnb_bg {
	position:relative;
	z-index:98;
}
.gnb_bg:after {
	position:absolute;
	left:50%;
	margin-left:-242px;
	right:0;
	top:0;
	bottom:0;
	content:"";
	display:block;
	background-color:#fbfbfb;
}
.gnb_banner {
	position:absolute;
	left:0;
	top:102px;
	z-index:99;
}
.gnb_banner .gb_box {
	padding-top: 60px;
	width:382px;
	/* height:360px; */
	box-sizing:border-box;
}
.gnb_banner .gb_box .tit01 {
	font-size: 20px;
	line-height: 25px;
	color:#333;
	margin-bottom:30px;
}
.gnb_banner .gb_box .txt02 {
	font-size: 40px;
	color:#777;
	font-weight:600;
	line-height:1;
	letter-spacing:-0.1rem;
}
.gnb_banner .gb_box .more_link {
	font-size:12px;
	text-decoration:underline;
	color:#333;
}

/* HEADER FIXED */
#header.fixed, #header.fixed.noraml {
	height:70px;
}
#header.fixed.active {
	height:290px;
}
#header.fixed:after {
	top:72px;
}
#header.fixed .header_logo {
	height:70px;
}
#header.fixed .header_logo a {
	background-image:url('../img/top_logo03.png');
}


#header.fixed #gnb > ul > li > a {
	line-height:70px;
}
#header.fixed .gnb_banner {
	top:72px;
}
/*=========================================
* mobile header
*==========================================*/
#Mheader { display:none; }
nav#slide-menu { display:none; }
@media (max-width:1080px) {
	.flux {
	  font-size: 18px;
	}

	header { display:none; }
	/*헤더전체*/
	#Mheader {
		display:block;
		position:fixed;
		width:100%;
		height:60px;
		top:0;
		z-index:999;
		background:#fff;
		border-bottom:1px solid #ccc;
	}
	#Mheader:after {
		content:"";
		display:block;
		clear:both;
	}
	/*logo*/
	.Mlogo {
		display:inline-block;
		height:60px;
		position:absolute;
		left:calc(.7rem + 5px);
		right:0;
	}
	.Mlogo a {
		display:inline-block;
		width:140px;
		height:100%;
		text-align:left;
		padding:10px 0;
	}

	/*hambug*/
	.menu-trigger {
	  position: fixed;
	  top: 11px;
	  right: 10px;
	  width: 40px;
	  height: 37px;
	  border:1px solid transparent;
	  z-index:9999;
	}
	.hambuger {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  display:inline-block;
	  cursor:pointer;
	  -moz-transition: all 300ms;
	  -webkit-transition: all 300ms;
	  transition: all 300ms;

	}
	.bar {
	  width: 26px;
	  height: 3px;
	  background-color: #ba915b;
	  margin: 5px 6px;
	  position:absolute;
	}
	.hambuger .bar.one {top: 3px; right: 0; }
	.hambuger .bar.two {top: 11px; right: 0; }
	.hambuger .bar.three {top: 19px; right: 0; }
	.hambuger .bar.one.active { animation: one 1s forwards }
	.hambuger .bar.two.active { animation: two 1s forwards }
	.hambuger .bar.three.active { animation: three 1s forwards }
	.hambuger .bar.one.notActive {animation: one-reverse 1s forwards;}
	.hambuger .bar.two.notActive {animation: two-reverse 1s forwards;}
	.hambuger .bar.three.notActive {animation: three-reverse 1s forwards;}
	@keyframes one {
		0% {top:0;}
		60% {top:10px}
		80% {transform: rotate(0)}
		100% {top:10px; transform: rotate(45deg);}
	}
	@keyframes one-reverse {
		0% {top:10px; transform: rotate(45deg);}
		30% {transform: rotate(0)}
		60% {top:10px}
		100% {top:3px;}
	}
	@keyframes two {
		0% {opacity:1;}
		80% {opacity:1;}
		100% {opacity:0;}
	}
	@keyframes two-reverse {
		0% {opacity:0;}
		80% {opacity:1;}
		100% {opacity:1;}
	}
	@keyframes three {
		0% {top: 18px; }
	  60% {top: 10px; }
		80% {transform: rotate(0)}
		100% {top: 11px; transform: rotate(-45deg);}
	}
	@keyframes three-reverse {
		0% {top: 10px; transform: rotate(-45deg);}
		30% {transform: rotate(0); }
	  60% {top: 10px; }
		100% {top: 19px; }
	}
	.hambuger.active {
		background:#fff;
	}
	.hambuger.active .bar {
		background:#ba915b;
	}

	/*메뉴컨텐츠*/
	nav#slide-menu {
	  position: fixed;
	  top: 0;
	  right: 0px;
	  bottom: 0;
	  display: block;
	  float: left;
	  width: 100%;
	  max-width: 284px;
	  min-height: 100%;
	  height: auto;
	  background:#fff;
	  -moz-transition: all 300ms;
	  -webkit-transition: all 300ms;
	  transition: all 300ms;
	  overflow-y:auto;
	  border-left:1px solid #aaa;
		opacity:0;
	z-index:-99;

	}

	nav#slide-menu > ul {
	  display: block;
	  padding: 0;
	  opacity: 0.5;
	  -moz-transition: all 300ms;
	  -webkit-transition: all 300ms;
	  transition: all 300ms;
	}
	/*메뉴클릭*/
	body.menu-active nav#slide-menu {
	  right: 0px;
	   z-index:99999;
	   opacity:1;
	}
	body.menu-active nav#slide-menu ul {
	  right: 0px;
	  opacity: 1;
	}
	body.menu-active #WP {
	  right: 284px;
	  border-radius: 0;
	}
	body.menu-active .menu-trigger {
	  right: 294px;
	}
	#WP {

	}
	.menu-active #WP {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100vh;
		padding: 0;
		background:#fff;
		overflow-y: scroll;
		overflow-x: hidden;
		border-radius: 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-moz-box-shadow: -3px 0 6px rgba(0,0,0,.3);
		-webkit-box-shadow: -3px 0 6px rgba(0,0,0,.3);
		box-shadow: -3px 0 6px rgba(0,0,0,.3);
		-moz-transition: all 300ms;
		-webkit-transition: all 300ms;
		transition: all 300ms;
		overflow:hidden;
	}
	.menu-active #WP:before {
		content:"";
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		top:0;
		background:rgba(0,0,0,.5);
		z-index:99;
	}
	.menu-active #Mheader {
		background:transparent;
		border:0;
	}
	/*ACCORDIDON*/
	.accordion {
	  width: 100%;
	  max-width: 360px;
	  margin: 0 auto ;
	  border-top:1px solid #aaa;
	  border-bottom:1px solid #aaa;
	}
	.accordion .link {
	  cursor: pointer;
	  display: block;
	  padding: 15px 30px 15px 20px;
	  color: #555;
	  font-size:17px;
	  font-weight:600;
	  border-bottom: 1px solid #ddd;
	  position: relative;
	  -webkit-transition: all 0.3s ease;
	  -o-transition: all 0.3s ease;
	  transition: all 0.3s ease;
	}
	.accordion li:last-child .link { border-bottom: 0; }
	.accordion li i {
		position: absolute;
		top: 18px;
		right: 20px;
		font-size: 24px;
		color: #aaa;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.accordion li.open .link { color: #ba915b;}
	.accordion li.open i {
		color: #ba915b;
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	/**
	 * Submenu
	 -----------------------------*/
	.submenu {
	  display: none;
	  background: #f7f7f7;
	  font-size: 15px;
	}
	.submenu li { border-bottom: 1px solid #ddd; }
	.submenu a {
	  display: block;
	  text-decoration: none;
	  color: #222;
	  padding: 12px;
	  padding-left: 20px;
	  -webkit-transition: all 0.25s ease;
	  -o-transition: all 0.25s ease;
	  transition: all 0.25s ease;
	}
	.submenu a:hover {
	  background: #ba915b;
	  color: #fff;
	}
	/* MOBILE MENU INTRO */
	.mmenu_intro {
		padding:20px 0 20px;
		text-align:center;
	}
	.mmenu_intro figure {
		text-align:center;
	}
	.mmenu_intro figure img {
		width:80px;
	}
	/* MOBILE MENU LOGIN */
	.mmenu_login {
		margin-top:20px;
		text-align:center;
	}
	.mmenu_login a {
		display:inline-block;
		padding:8px 0;
		width:110px;
		font-size:15px;
		background:#666;
		color:#fff;
		font-weight:500;
	}
	.mmenu_login a.mm-join {
		background:#fff;
		border:1px solid #666;
		color:#666;
		margin-left:5px;
	}
	.mmenu_login a.mm-out {
		width:200px;
	}
	/* MOBILE MENU SNS */
	.mmenu_sns {
		margin-top:20px;
		text-align:center;
	}
	.mmenu_sns a {
		display:inline-block;
		margin:0 5px;
		width:40px;
		height:40px;
		border-radius:50%;
		background:#f5f5f5;
		color:#aaa;
		font-size:22px;
		text-align:center;
		line-height:45px;
	}

}
@media (max-width:767px) {
	#Mheader { height:50px; }
	.menu-trigger { right:.7rem; top:7px; }
	.Mlogo { height:50px; }
	.Mlogo a img { max-height:30px; }
	.Mright { padding-right:.7rem; }
	.Mright .tel { margin-top:6px; border:0; padding:0;}
	.Mright .tel a { font-size:26px;	}
	.Mright .tel span { display:none; }

}



/*===============================================
*  FOOTER
===============================================*/
/* 하단 마진 */
#teacher, #inquiry, #review, #community {
	padding-bottom:80px;
}
/* quick */
.Bquick {
	padding:10px 0 20px 0;
    text-align: center;
/* 	border-top:1px solid #222;*/
	background:#f7f7f7;
}
.Bquick_wp {
	width:100%;
	max-width:1110px;
	margin:auto;
}
.Bquick_wp:after {
	content:"";
	display:block;
	clear:both;
}
.Bquick_box_wp {
	width:19%;
	display: inline-block;
    vertical-align: top;
	text-align:center;
}
.Bquick_box {
	width:100%;
	max-width:230px;
	margin:0 auto;
	padding:20px 0;
	cursor:pointer;
}
.Bquick_box.mobile {
	display:none;
}
.Bquick_box h5 {
	margin-top:10px;
	font-family: "Nanum Square", "NanumSquare", sans-serif;
	font-size:17px;
	font-weight:400;
}
.Bquick_box p {
	margin-top:10px;
	font-size:14px;
	font-weight:300;
	color:#777;
	letter-spacing:
}
.Bquick_box img {
	transition: all 0.3s ease;
}
.Bquick_box:hover img {
	transform:translateY(10px);
}
.Bquick_box:hover h5,
.Bquick_box:hover p {
	color:#000;
}

footer {
	padding:15px 0 10px;
	text-align:center;
	background:#444;
}
.ft-link {
	padding:20px 0;

	display:inline-block;
}
.ft-link:after {
	content:"";
	display:block;
	clear:both;
}
.ft-link li {
	float:left;
	padding:0 20px;
}
.ft-link li a {
	font-size:15px;
	color:#222;
	font-weight:600;
}
.ft-info {
	margin-top:0px;
}
.ft-info li {
	font-size:15px;
	display:inline-block;
	margin:2px 30px 2px 0;
	color:#999;
}
.ft-info li:nth-child(4) {
	display:block;
}
.ft-info li span {
	font-weight:500;
	margin-right:5px;
}
footer p {
	margin-top:10px;
	font-size:13px;
	color:#999;
}

@media (max-width:767px) {
	#teacher, #inquiry, #review, #community { padding-bottom:40px; }
	.Bquick { padding:0 0 10px 0; }
	.Bquick_box { padding:10px 0; }
	.Bquick_box img { max-width:50px; }
	.Bquick_box h5 { margin-top:0; font-family: 'Notokr', sans-serif; font-size:10px; }
	footer { padding:15px 0 10px }
	.ft-link li { padding:0 5px; }
	.ft-link li a {font-size:12px; }
	.ft-info { margin-top:0px; }
	.ft-info li { font-size:12px; margin:0 10px 0 0; }
	footer p { margin-top:5px; font-size:11px; }
}




/*===============================================
*  QUICK MENU
===============================================*/
@media screen and (min-width: 993px) {
    .ms-nav-container {
        display: none;
    }
}

@media screen and (max-width: 992px) {
    .ms-nav-container {
        display: block;
    }

    #ms-menu {
        display: none;
    }
    .bg-change {
        position: absolute;
        bottom: -75px;
        right: -90px;
        width: 1px;
        height: 1px;
        border-radius: 100% 0% 0% 0%;
        background: rgba(0,0,0,.6);
        transition: all .25s ease;
    }
    .ms-nav .ms-menu-toggle:checked ~ .bg-change {
        width: 3000px;
        height: 3000px;
        transition: all .5s ease;
    }
    .ms-nav {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index:50;

    }
    .ms-nav > .ms-main {
        position: relative;
    }
    .ms-nav > .ms-main i {
        font-size:30px;
        line-height:60px;
    }
    .ms-nav > .ms-li {
        position: absolute;
        bottom: 0;
        right: 6px;
        transition: bottom .5s ease;
        z-index: 1;
        cursor:pointer;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li a:after {
        content:"";
        width:120px;
        position:absolute;
        font-size:12px;
        text-align:right;
        right:65px;
        top:18px;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li1 a:after {
        content:"투비단 어학원 블로그";
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li2 a:after {
        content:"온라인 상담";
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li3 a:after {
        content:"센터 문의";
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li a {
        box-shadow: 0px 5px 10px #333333;
    }
	.ms-nav .ms-menu-toggle:checked ~ .ms-li1 {
		bottom: 120%;
		transition: bottom .5s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li1 a i {
		opacity: 1;
		transition: opacity .5s ease .1s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
			animation: big-border-bottom-animation .5s ease .1s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li1:before {
			animation: border-top-animation .5s ease .2s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li1:after {
			animation: border-bottom-animation .5s ease .2s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li2 {
		bottom: 220%;
		transition: bottom .6s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li2 a i {
		opacity: 1;
		transition: opacity .6s ease .2s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li2:before {
			animation: border-top-animation .5s ease .2s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li2:after {
			animation: border-bottom-animation .5s ease .3s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li3 {
		bottom: 320%;
		transition: bottom .7s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li3 a i {
		opacity: 1;
		transition: opacity .7s ease .3s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li3:before {
			animation: border-top-animation .5s ease .3s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li3:after {
			animation: border-bottom-animation .5s ease .4s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li4 {
		bottom: 495%;
		transition: bottom .8s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li4 a i {
		opacity: 1;
		transition: opacity .8s ease .4s;
	}
    .ms-nav .ms-menu-toggle:checked ~ .ms-li4:before {
        animation: border-top-animation .5s ease .4s;
    }

    .ms-nav .ms-menu-toggle ~ .ms-li:before {
        content: '';
        width: 35px;
        display: block;
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 0px solid #c3af6c;
    }
    .ms-nav .ms-menu-toggle ~ .ms-li:before {
        content: '';
        width: 35px;
        display: block;
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 0px solid #c3af6c;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li:before {
        content: '';
        width: 35px;
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 19px solid transparent;
        border-right: 19px solid transparent;
        border-top: 20px solid #c3af6c;
        z-index: 11;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li:after {
        content: '';
        width: 35px;
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 19px solid transparent;
        border-right: 19px solid transparent;
        border-bottom: 20px solid #c3af6c;
        transition: border-bottom .3s ease;
        z-index: 11;
    }

    .ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
        content: '';
        width: 45px;
        display: block;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 19px solid transparent;
        border-right: 19px solid transparent;
        border-bottom: 30px solid #c3af6c;
        transition: border-bottom .3s ease;
        z-index: 11;
    }
    .ms-nav .ms-menu-toggle:checked ~ .ms-li-last:after {
        content: '';
        width: 45px;
        display: block;
        position: absolute;
        top: -5px;
        left: 0;
        right: 0;
        margin: auto;
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 0px solid #c3af6c;
    }

    .ms-nav .ms-menu-toggle:checked ~ .ms-main i {
        transform: rotate(-45deg);
        transition: transform .35s ease;
    }
    .ms-nav .ms-menu-toggle ~ .ms-main i {
        transition: transform .35s ease;
        opacity: 1;
    }
    .ms-nav > .ms-main > a {
        box-shadow: 0px 5px 10px #333333;
    }
    .ms-nav > li a {
        font-size: 30px;
        color: #FFFFFF;
        background: #c3af6c;
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 100%;
        position: relative;
        text-align: center;
    }

	.ms-nav > .ms-main a,
	.ms-nav > .ms-main > a > label {
		font-size: 30px;
		color: #FFFFFF;
		background: #c3af6c;
		width: 60px;
    	height: 60px;
		display: block;
		border-radius: 100%;
		position: relative;
		text-align: center;
		z-index: 19;
		cursor:pointer;

	}

    .ms-nav > li > a i {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size:20px;
        line-height:50px;
        opacity: 0;
        z-index: 12;
    }
}

@media (max-width:767px) {
	.ms-nav { right:15px; bottom:15px; }
	.ms-nav > .ms-main a, .ms-nav > .ms-main > a > label { width:50px; height:50px; }
	.ms-nav > .ms-main i { line-height:50px; }
	.ms-nav > .ms-li { right:3px; }
	.ms-nav > li a { width:45px; height:45px; }
	.ms-nav > li > a i { line-height:45px; }
	.ms-nav .ms-menu-toggle:checked ~ .ms-li a:after { right:55px; }
}











/*===============================================
*  TAB bellatrix edit
===============================================*/
.tab {
    font-size: 0;
}

.tab li {
    position: relative;
    width: 24.2%;
/*    height: 35px;*/
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background-color: #454545;
}

.tab li:nth-of-type(1) ~ li {
    margin-left: 1%;
}

.tab li a {
    padding: .5rem 0;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: -.06rem;
    text-transform: uppercase;
    display: block;
}

.on.dongtan {
    background-color: #fe7c00;
}

.on.suwon {
    background-color: #0086be;
}

.on.asan {
    background-color: #0c9a2b;
}

.on.chunan {
    background-color: #781C68;
}

.dongtan-bdr {
    border: 3px solid #fe7c00;
}

.suwon-bdr {
    border: 3px solid #0086be;
}

.asan-bdr {
    border: 3px solid #0c9a2b;
}

.chunan-bdr {
    border: 3px solid #781C68;
}




/*===============================================
*  SIDE QUICK MENU bellatrix edit
===============================================*/
@media screen and (min-width: 993px) {
    .side-quick-menu {
        position: fixed;
        top: 30%;
        right: 0;
        z-index: 100;
        width: 90px;
        background: #fff;
    }

    .menu-list li {
        padding-top: 1.25rem;
        min-height: 70px;
        background: #fff;
    }

    .menu-list li:nth-of-type(1) ~ li {
        margin-top: 1px;
    }

    .menu-list li:nth-of-type(1) {
        color: #2f2a25;
        background: #fae100;
    }

    .menu-list li:nth-of-type(1) i::before {
        font-size: 2.8125rem;
        line-height: 1;
    }

    .menu-list li:nth-of-type(1) span {
        font-weight: 700;
    }

    .menu-list li:nth-of-type(2) {
        color: #fff;
        background: #0c9a2b;
    }

    .menu-list li:nth-of-type(2) span {
        font-weight: 600;
    }

    .menu-list li:nth-of-type(3) {
        color: #fff;
        background: #454545;
    }

    .menu-list li:nth-of-type(3) span {
        font-weight: 600;
    }

    .menu-list li:nth-of-type(4) span {
        font-weight: 700;
    }

    .menu-list a {
        height: 100%;
        color: inherit;
        display: block;
    }

    .menu-list span {
        font-size: 1.25rem;
        text-align: center;
        display: block;
    }

    .menu-list span i {
        margin-bottom: .625rem;
        height: 24px;
        font-size: 2.1875rem;
        display: block;
        overflow: hidden;
    }
}

@media screen and (max-width: 992px) {
    .side-quick-menu {
        display: none;
    }
}














@keyframes border-top-animation {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: -9px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -8px;
  }
  100% {
    top: 0px;
  }
}
@keyframes big-border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -15px;
  }
  100% {
    top: 0px;
  }
}