@charset "utf-8";

/* CSS Document */

/**********************
Publishing : Lee Bit-na
Beginning : 2016-06-07
Final : 
***********************/
/* FONT */
@font-face {
	font-family: 'BarunGothic_bold';
	src: url(../font/NanumBarunGothicWebBold.eot);
	src: url(../font/NanumBarunGothicWebBold.eot.eot?#iefix) format('embedded-opentype'),
		 url(../font/NanumBarunGothicWebBold.eot.woff) format('woff'),
		 url(../font/NanumBarunGothicWebBold.eot.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'BarunGothic';
	src: url(../font/NanumBarunGothicWeb.eot);
	src: url(../font/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
		 url(../font/NanumBarunGothicWeb.woff) format('woff'),
		 url(../font/NanumBarunGothicWeb.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;

}
@font-face {
	font-family: 'BarunGothic_Light';
	src: url(../font/NanumBarunGothicWebLight.eot);
	src: url(../font/NanumBarunGothicWebLight.eot?#iefix) format('embedded-opentype'),
		 url(../font/NanumBarunGothicWebLight.woff) format('woff'),
		 url(../font/NanumBarunGothicWebLight.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'MalgunGothic';
	src:url(../font/MalgunGothic.eot);
	src:url(../font/MalgunGothic.eot?#iefix) format('embedded-opentype'),
		url(../font/MalgunGothic.ttf) format('truetype'),
		url(../font/MalgunGothic.woff) format('woff');
	font-style: normal;
}
@font-face {
	font-family: 'NanumSquare';
	src: url(../font/NanumSquareR.eot);
	src: url(../font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
	 	 url(../font/NanumSquareR.woff) format('woff'),
	  	url(../font/NanumSquareR.ttf) format('truetype');
}

body {width: 100%; font-family: 'Lato', sans-serif, 'BarunGothic', 'NanumBarunGothic'; font-weight: 400}
.wrap_intro {position: fixed; width: 100%; height: 100%; top:0; left: 0; bottom: 0; background:#111}
/* layout */
.intro-logo {
	left:50%;
	top:50%;
	position:absolute; 
	margin:-100px 0 0 -127px;
	z-index: 100; 
	text-align: center;
	transition: all ease-in .1s;
    -webkit-transition: all ease-in .1s;
    -moz-transition: all ease-in .1s;
    -ms-transition: all ease-in .1s;
}
.main-logo {
	left:50%;
	top:35px;
	position:absolute; 
	margin-left:-75px;
	z-index: 200; 
	text-align: center;
	transition: all ease-in .1s;
    -webkit-transition: all ease-in .1s;
    -moz-transition: all ease-in .1s;
    -ms-transition: all ease-in .1s;
}
.main-logo a {display: block;}
.main-logo a:after {display: block; clear: both; content: ""}
.main-logo h1  {}
.main-logo img {height:80px}
.btn_gnb_open {position:fixed; left:15px; top:15px; z-index:1000; cursor:pointer}
.btn_gnb_open img {height:45px}
#contents_wrap {position:relative; padding:65px 0 0}

/* header menu */
.main-header {position:fixed; top:0; left:0; right:0; z-index:100}
.main-header.m_header {position:relative; display: none }
.main-header.m_header.mainFixed {position:fixed; display: block}
.mainFixed .main-logo {height:0}
.mainFixed.m_header .main-logo {height:0 }

.main-header .scroll_logo {position:absolute; left:50px; top:20px}
.main-header .scroll_logo img {height:40px}
.main-header.mainFixed.m_header .scroll_logo {display:inline-block}
.main-header.mainFixed .scroll_logo {display:inline-block}

.main-nav-box {height: 65px; position: relative; z-index: 40;}
.main-nav {
    position: relative;
    z-index: 2;
    height: 65px;
    text-align: center;
    background-color: #000;
    transition: border .3s;
}
.main-nav .main-menu {
	float:left;
    display: inline-block;
    font-size: 0px;
	margin-left:120px;
}
.main-nav .main-menu>.item {
    display: inline-block;
}
.main-nav .main-menu>.item>a {
	position:relative;
    display: block;
    margin:0 22px;
	color:#fff;
	cursor:pointer;
	font-family:'Roboto Condensed';
    font-size: 12px;
    line-height: 65px;
	transition: all .2s ease-in-out;
}
.main-nav .main-menu>.item>a:after {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(50%);
    -webkit-transform: translateX(-50%) scaleX(0);
    transform: translateX(-50%) scaleX(0);
    width: calc(100%);
    height: 10px;
    border-bottom: 2px solid #fff;
    transition: all .2s ease-in-out;
}
.main-nav .main-menu>.item>a:after {content: '';}
.main-nav .main-menu>.item>a:hover:after {
        -webkit-transform: translateX(-50%) scaleX(1);
        transform: translateX(-50%) scaleX(1)
}
.main-nav .main-menu>.item.arrow > a {display:inline-block; padding-right:15px; background:url(../images/common/bbs_gnb_arrow.gif) no-repeat right center}

/* gnb */
.head_gnb {
	position: absolute;
	top:0;
	left: 0;
	right: 0;
    z-index: 999;
    margin-top: 1.66667rem;
	padding-left:50px;
    padding-right:50px;
}
.head_gnb ul {display: block;}
.head_gnb li {position: relative; display: inline-block; margin-right: 50px;}
.head_gnb li a {position: relative; color: #000; letter-spacing: 1px}
.head_gnb li a:after {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    bottom: -.11111rem;
    left: 0;
    border-bottom: .11111rem solid #000;
    transition: width .5s cubic-bezier(.215,.61,.355,1);
}
.head_gnb li a:hover:after{width: 100%}

.wing_cate {position:fixed; right:0; top:50%; margin-top:-128px; z-index:10}
.wing_cate img {width:40px}
.link_ems {position:absolute; width:100%; height:50%; bottom:50%}
.link_pilates {position:absolute; width:100%; height:50%; top:50%}

.gnb_zone {position: absolute; left:50px;  top:60px; text-align: center; z-index: 1000}
.gnb_zone:after {display:block; clear:both; content:""}
.gnb_zone .snb {padding: 25px; width: 250px; background-color:#f5f5f5; text-align: left; }
.gnb_zone .snb li {display: block; clear: both; margin: 0}
.gnb_zone .snb li a {display:block; padding: 5px 0; color: #888; font-size: 12px}
.gnb_zone .snb li a:after {display: none}
.gnb_zone .snb li a h2 {font-size: 14px}
.gnb_zone .snb li a:hover h2 {color: #000; text-decoration: underline}
.gnb_zone .snb.project {width: 390px; margin-left: 50px; text-align: left; padding: 25px}
.gnb_zone .snb.project li {display: block; border-bottom: 1px dotted #ddd; padding-bottom: 10px; margin-bottom: 20px}
.gnb_zone .snb.project h2 {display: block; margin-bottom: 10px; font-size: 14px; color: #000; font-weight: 500}
.gnb_zone .snb.project li.last {margin: 0; padding: 0; border: 0}

.gnb_zone .snb.information { margin-left: 350px; width: 200px; }

.gnb_zone .detail {}
.gnb_zone .detail p {margin-bottom: 5px; display: block; clear: both; float: none; width: 100%}
.gnb_zone .intro01 .detail p em {color: #f47920}
.gnb_zone .intro02 .detail p em {color: #6bc9c7}
.gnb_zone .intro03 .detail p em {color: #62c3ee}

.sub_gnb {display: block; width: 800px; height: 300px; margin: auto; padding: 30px 0}
.sub_gnb:after {display:block; clear:both; content:""}
.sub_gnb li {display: block; width: 50%; float: left; font-family:'Roboto Condensed';font-size: 14px;}
.sub_gnb li img {width: 250px; margin:0}
.sub_gnb li a {display:inline-block; height:122px}
.sub_gnb li a:hover img {margin-top:5px; transition: all ease-in .1s;}
.sub_gnb li p {padding: 10px 0 30px}

/* footer */
#footer {background-color: #fff; padding:20px 0}
#sub_footer {padding:30px 0 0; border-top:1px solid #ddd; background-color:#f5f5f5}
#sub_footer:after, .footer-nav:after {display:block; clear:both; content:""}
#sub_footer .col {width:16%; float:left}
.footer-nav {width:1140px; margin:auto; padding-bottom:30px}
.footer-nav h2 {color:#444; font-size:16px; display:block; padding-bottom:15px; font-weight:normal; }
.footer-nav li {display:block; padding-bottom:8px; font-size:12px}

.footer_copy.m {background-color: #111; border:0}
.footer_copy {position:relative; clear:both; text-align:center; padding:20px 0; line-height:1.85em; font-size:12px;}
.footer_copy.index {position:absolute; left:0; right:0; bottom:0; z-index:100; color:#8c9192}

a.btn_top {display:block; width:50px; height:50px; position:absolute; right:20px; top:5px}
a.btn_top img {width:50px}

a.top_scroll {position: fixed; right: 30px; bottom: 20px; display: none; }

/**/
video {
    position: absolute;
    overflow: hidden;
    right: 0;
    bottom: 0;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-size: 100% 100%;
    background-color: black;
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: -1;
}
/* menu */
.menu_wrap {position:fixed; top:0; left:0; right:0; bottom:0; background:url(../images/common/dim_01.png); opacity: 0;} 
.menu_list {position:absolute; text-align:center; top:50%; left:0; right:0; margin-top:-327px}
.menu_list h1 {display:block; padding-bottom:40px}
.menu_list h1 img {height:70px}
.menu_list ul {display:block; width:460px; margin:auto}
.menu_list ul:after {display:block; clear:both; content:""}
.menu_list li {display:inline-block; float:left; width:220px; height:220px; margin:5px}
.menu_list a {color:#fff; font-size:20px; display:block; height:220px;  background:url(../images/common/menu_bg.png) no-repeat 0 100%;
    transition: all ease-in .2s;
    -webkit-transition: all ease-in .2s;
    -moz-transition: all ease-in .2s;
    -ms-transition: all ease-in .2s;
	line-height:220px;
}
.menu_list a.rectangle { background:url(../images/common/menu_bg2.png) no-repeat 0 100%;}
.menu_list a:hover {background-position:0 0; color:#fff}
a.btn_close {display:inline-block; border:0; margin-top:30px; width:50px; height:50px; background:url(../images/common/btn_close.png) no-repeat 0 0;}
.ie_img {width:100%}
a.index_enter {position:absolute; bottom:30%; z-index:auto; left:50%; display:inline-block; width:200px; margin-left:-100px; text-align:center; color:#8c9192; font-size:20px; font-weight:700;}

.tab_style:after{content:"";display:block;clear:both;}
.tab_style {padding-top: 160px; text-align: center; position: relative; z-index: 100}
.tab_style ul{float:left;width:100%;}
.tab_style ul li {display:inline-block; border-right:1px dotted #ccc}
.tab_style ul li.last {border:none}
.tab_style ul li a{display:block;text-align:center; padding:0 15px; color:#888; cursor:pointer; font-weight: 300;}
.tab_style ul li.on a{color:#000; font-weight:700}
.tab_style ul li a span{display:inline-block}