@charset 'utf-8';
html, html * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: arial, sans-serif;
	font-size: 1vw;
	background: white;
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
a, a:visited {
	color: inherit;
}
header {
	position: fixed;
	padding: 1.5em;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
.site-logo {
	position: relative;
	display: block;
	float: left;
	width: 3.1em;
}
.site-logo img {
	width: 3.1em;
}
.logo {
	opacity: 1;
}
#topMenu {
	height: 30px; /* 메인 메뉴의 높이 */
	width: 1900px; /* 메인 메뉴의 넓이 */
}
#topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */
	list-style-type: none; /* 메인 메뉴 안의 ul 내부의 목록 표시를 없애줌 */
	margin: 0px; /* 메인 메뉴 안의 ul의 margin을 없앰 */
	padding: 0px; /* 메인 메뉴 안의 ul의 padding을 없앰 */
	border: solid 0px #dddddd; /* 테두리를 설정 */
}
#topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */
	color: #fff; /* 글씨 색을 흰색으로 설정 */
	/* background-color: #ffffff; /* 배경 색을 RGB(2D2D2D)로 설정 */  
	float: left; /* 왼쪽으로 나열되도록 설정 */
	line-height: 30px; /* 텍스트 한 줄의 높이를 30px로 설정 */
	vertical-align: middle; /* 세로 정렬을 가운데로 설정 */
	text-align: center; /* 텍스트를 가운데로 정렬 */
	position: relative; /* 해당 li 태그 내부의 top/left 포지션 초기화 */
	opacity: .80;
	z-index: 5000;
	padding: 0em 0em 0 0;
	border: solid 0px #dddddd; /* 테두리를 설정 */
}
.menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */
	text-decoration: none; /* a 태그의 꾸밈 효과 제거 */
	display: block; /* a 태그의 클릭 범위를 넓힘 */
	width: 200px; /* 기본 넓이를 150px로 설정 */
	font-size: 16px; /* 폰트 사이즈를 12px로 설정 */
	font-weight: bold; /* 폰트를 굵게 설정 */
	font-family: arial, sans-serif;
	border: solid 0px #dddddd; /* 테두리를 설정 */
	margin-top: 0px; /* 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설덩 */
	color: #000;
}
.menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */
	color: #000;
}
.topMenuLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */
	color: #000000;  /* 글씨 색 빨간색 */
	background-color: #dddddd; /* 배경색을 밝은 회색으로 설정 */
	border: solid 0px #dddddd; /* 테두리를 설정 */
}
.submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */
	color: #000; /* 글씨 색을 RGB(2D2D2D)로 설정 */
	background-color: #dddddd; /* 배경색을 흰색으로 설정 */
	border: solid 0px; /* 테두리를 설정 */
	margin-top: 0px; /* 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설덩 */
	border: solid 0px #dddddd; /* 테두리를 설정 */
}
.longLink { /* 좀 더 긴 메뉴 스타일 설정 */
	width: 200px; /* 넓이는 190px로 설정 */
}
.submenu { /* 하위 메뉴 스타일 설정 */
	position: absolute; /* html의 flow에 영향을 미치지 않게 absolute 설정 */
	height: 0px; /* 초기 높이는 0px로 설정 */
	overflow: hidden; /* 실 내용이 높이보다 커지면 해당 내용 감춤 */
	transition: height .5s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(기본) */
	-webkit-transition: height .5s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 크롬/사파라ㅣ) */
	-moz-transition: height .5s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 파폭) */
	-o-transition: height .5s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 오페라) */
	font-family: arial, sans-serif;
	border: solid 0px #dddddd; /* 테두리를 설정 */
	color: #000;
}
.topMenuLi:hover .submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */
	height: 257px; /* 높이를 217(서브메뉴 7개)px로 설정 */
	border: solid 0px #dddddd; /* 테두리를 설정 */
	color: #000;
}
.submenuLink:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */
	color: #000000; /* 글씨색을 빨간색으로 설정 */
	background-color: #dddddd; /* 배경을 RGB(DDDDDD)로 설정 */
	border: solid 0px #dddddd; /* 테두리를 설정 */
}
.site-nav {
	position: relative;
	float: right;
	z-index: 5000;
	top: 0;
	left: 0;
	display: block !important;
	width: 45%;
	padding: .75em 1em 0 0;
	opacity: .95;
	background: none;
}
.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: center;
	color: #000;
}
.site-nav ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 0;
	color: #000;
}
.site-nav ul li a {
	font-size: .9em;
	padding-bottom: .5em;
	text-decoration: none;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #fff;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 0px solid white;
	color: #000;
}
.hero {
	position: relative;
	height: 18vw;
	background-image: -moz-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -webkit-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -ms-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
}
.hero-content {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color: #fff;
	position: relative;
	padding-top: 1.5em;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
h12 {
	margin-left: 2px;
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	font-weight: 100;
	font-size: 1.5em;
	line-height: 2.2;
	margin-bottom: -.35em;
	padding-top: 13%;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
	font-weight: bold; /* 폰트를 굵게 설정 */
}

h14 {
	margin-left: 11.5%;
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color: #000;
	font-size: 0.8em;

	ext-shadow: 0px 0px 8px rgba(230, 230, 230,.2);
}

h14:hover {
	margin-left: 11.5%;
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color: blue;
	font-size: 0.8em;

	ext-shadow: 0px 0px 8px rgba(230, 230, 230,.2);
}

h11 {
	margin-bottom: 1.5%;
	text-transform: uppercase;
	text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
	letter-spacing: .85em;
	margin-left: .7em;
	font-size: 8.5vw;
}

h3 {
	font-size: 1.5em;
	font-weight: 100;
	line-height: 12.75;
	letter-spacing: .35em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}


.intro {
	position: relative;
	color: #343144;
	background: #eeeeee;
	padding: 4.5em 6em 4.5em;
}
.intro-text {
	position: relative;
}
.intro p {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	font-size: 2.5em;
	line-height: 1.8;
	position: relative;
	z-index: 200;
	text-align: center;
	letter-spacing: .325em;
	text-transform: uppercase;
}
.artworks {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.artwork {
	display: flex;
}
.artwork .artwork-piece {
	padding: 8% 0 8% 23.5%;
	background-image: -moz-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -webkit-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -ms-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	width: 50%;
}
.artwork-piece figure {
	position: relative;
}
.artwork-piece figure img {
	position: relative;
	z-index: 100;
}
.artwork .artwork-description {
	background: #26223e;
	color: #fff;
	width: 50%;
	padding: 11.25em 13em 11.5em;
}
.artwork-title {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	font-size: 3em;
	font-weight: 100;
	padding: 2em 0 0 0;
	letter-spacing: .36em;
	text-transform: uppercase;
	line-height: 1.5;
	max-width: 9em;
	margin-bottom: .5em;
}
.artwork-text {
	font-size: 1.1em;
	line-height: 1.9;
	opacity: .8;
	max-width: 20em;
}
.notices {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.notice {
	display: flex;
}
.notice .notice-piece {
	padding: 11.25em 13em 11.5em;
	background-image: -moz-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -webkit-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	background-image: -ms-linear-gradient( 135deg, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
	width: 90%;
}
.notice-piece figure {
	position: relative;
}
.notice-piece figure img {
	position: relative;
	z-index: 100;
}
.notice .notice-description1 {
	background: #dddddd;
	color: #fff;
	width: 100%;
	padding: 3em 4em 3em;
}
.notice .notice-description2 {
	background: #26223e;
	color: #fff;
	width: 45%;
	padding: 5em 6em 5em;
}
.notice-title {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	font-size: 3em;
	font-weight: 100;
	padding: 2em 0 0 0;
	letter-spacing: .36em;
	text-transform: uppercase;
	line-height: 1.0;
	max-width: 3em;
	margin-bottom: .2em;
}
.notice-text {
	font-size: 1.1em;
	line-height: 1.9;
	opacity: .8;
	max-width: 2em;
}
.notice-social {
	display: block;
	width: 100%;
	list-style-type: none;
	text-align: center;
}
.notice-social li {
	display: inline-block;
	margin: 0 0em;
}
.notice-social li a img {
	width: auto;
	height: auto;
	text-align: center;
}
.notice-social li a {
	line-height: auto;
	display: inline-block;
	width: auto;
	height: auto;
	text-align: center;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
}
.notice-social li a .social-hover {
	display: none;
}
.notice-social li a:hover .social-default {
	display: none;
}
.notice-social li a:hover .social-hover {
	display: inline;
}
.see-more {
	font-size: 1em;
	display: inline-block;
	margin-top: 4.1em;
	padding: 0 0 .4em 0;
	transition: all .3s;
	text-decoration: none;
}
.see-more:hover {
	border-bottom: 1px solid white;
}
footer {
	margin-top: -3.5em;
	padding-top: 10em;
	background-image: -moz-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
	background-image: -webkit-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
	background-image: -ms-linear-gradient( -45deg, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
}
.footer-content {
	width: 95%;
	margin: 0 auto;
	padding-bottom: 1.7em;
}
.footer-social {
	display: block;
	width: 100%;
	list-style-type: none;
	text-align: center;
}
.footer-social li {
	display: inline-block;
	margin: 0 1.2em;
}
.footer-social li a {
	line-height: 3.5em;
	display: inline-block;
	width: 4em;
	height: 4em;
	text-align: center;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
}
.footer-social li a:hover {
	border-color: #fff;
	background: #fff;
}
.footer-social li a img {
	width: auto;
	height: 1em;
}
.footer-social li a .social-hover {
	display: none;
}
.footer-social li a:hover .social-default {
	display: none;
}
.footer-social li a:hover .social-hover {
	display: inline;
}
.footer-info {
	padding-top: 2em;
}
.footer-info p {
	font-size: .8em;
	color: #fff;
	line-height: 1.55;
	max-width: 46em;
	margin-bottom: .7em;
}
.footer-disclaimer {
	width: 20%;
	position: relative;
}
.footer-credit {
	float: right;
	width: 80%;
	text-align: right;
	position: relative;
}
.footer-legal {
	opacity: .8;
}
.footer-credit a:hover {
	text-decoration: none;
}
Edit in JSFiddle  JavaScript  HTML  CSS  Result  Resources  body {
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container {
	width: 500px;
	margin: 0 auto;
}
ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}
ul.tabs li.current {
	background: #ededed;
	color: #222;
}
.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;
}
.tab-content.current {
	display: inherit;
}
body {
	
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container {
	width: 500px;
	margin: 0 auto;
}
ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}
ul.tabs li.current {
	background: #ededed;
	color: #222;
}
.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;
}
.tab-content.current {
	display: inherit;
}
/*--------------------------------------------------내정보----------------------------------------------------------------*/

.profiles {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.profile {
	display: flex;
}
.profile .profile-piece {
	
	background-image: -moz-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	width: 50%;
	height: 2em;
}
.profile a {
	text-decoration: none;	
}

.profile a:hover {
	color:blue;	
	text-decoration: none;	
}

.profile-piece figure {
	position: relative;
}

.profile .profile-description {
	background-image: -moz-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(170,209,246) 0%, rgb(114,178,238) 100%);
	
	width: 50%;
}

.profile-text {
	font-size: 1.0em;
	line-height: 0.7;
	opacity: .8;
	text-align: center;
	max-width: 20em;
}
.profile p {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	text-align: left;
	font-size: 0.8em;
	
}

.profile-piece a img {
	width: auto;
	height: 2em;
}

.profiles {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.profile .profile-left {
	
	padding : 50px 0px 0px 250px;
	background: #fff;
	width: 475px;
}

.profile-notice figure {
	position: relative;
}

.profile .profile-notice {
	margin-top: 55px;
	background: #fff;
	color: #222;
	width: 1425px;
	text-align: left;
}
.profile-notice-title {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	font-size: 1.3em;
	font-weight: 50;
	padding: 3em 0 0 0;
	letter-spacing: .36em;
	text-transform: uppercase;
	line-height: 2;
	max-width: 9em;
	margin-bottom: .5em;
}
.profile-notice-text {
	font-size: 0.5em;
	line-height: 1.5;
	opacity: .8;
	max-width: 25em;
}

h13 {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color:#000000;
	font-weight: 35;
	font-size: 0.75em;
	line-height: 0.85;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

h23 {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color:#000000;
	font-weight: 50;
	font-size: 1.em;
	line-height: 0.85;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}

footer_profile {
	margin-top: 3.5em;
	padding-top: 20em;
}