@charset "utf-8";

body{
	background-color:#1c1c1c;
}

a{
	text-decoration:none;
}

.square{
	position:relative;
	left:50%;
	margin-left:-100px;
	display:inline-block;
	width:200px;
	height:80px;
	margin-top:150px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:50px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:8px;
	width:200px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#about{
	width:100%;
	background-image:url(../img/center.webp);
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:50% 50%;
	padding:50px 0;
}

.about{
	width:800px;
	margin:0 auto;
	overflow:hidden;
}

.about1{
	width:40%;
	float:left;
}

.about1 img{
	width:280px;
}

.about2{
	width:60%;
	float:right;
}

.about2 p{
	color:#f1f1f1;
	font-size:15px;
	line-height:35px;
}

.profile2 p{
	padding-top:10px;
	font-size:18px;
}

.profile2 h3{
	padding-top:20px;
	text-transform:uppercase;
	display:inline-block;
	width:150px;
}

.profile2 h3 a{
	color:#f1f1f1;
	font-size:15px;
	padding:10px 50px;
	border:2px solid #f1f1f1;
	opacity:0.8;
	transition:all 0.5s;
}

.profile2 h3 a:hover{
	background-color:#38bbc9;
	opacity:1;
}

#art{
	width:800px;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#art h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:35px;
}

#art p{
	color:#f1f1f1;
	font-variant:normal;
	line-height:25px;
}

#history{
	width:100%;
	padding:50px 0;
	background-color:#202020;
}

.history{
	width:800px;
	margin:0 auto;
}

.history h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:35px;
	text-align:center;
}

.his1{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his1 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#939292;
	font-size:60px;
	padding-right:10px;
	box-sizing:border-box;
}

.his1 p{
	width:50%;
	float:right;
	text-align:left;
	color:#939292;
	opacity:0.8;
	margin-top:40px;
	padding-left:10px;
	box-sizing:border-box;
	line-height:23px;
}

.his1 p span{
	color:#3abbc2;
}

.his2{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his2 h3{
	width:50%;
	text-align:left;
	float:right;
	color:#939292;
	font-size:60px;
	padding-left:10px;
	box-sizing:border-box;
}

.his2 p{
	width:50%;
	float:left;
	text-align:right;
	color:#939292;
	opacity:0.8;
	margin-top:40px;
	padding-right:1px;
	box-sizing:border-box;
	line-height:23px;
}

.his2 p span{
	color:#3abbc2;
}

.his3{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his3 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#939292;
	font-size:60px;
	padding-right:10px;
	box-sizing:border-box;
}

.his3 p{
	width:50%;
	float:right;
	text-align:left;
	color:#939292;
	opacity:0.8;
	margin-top:40px;
	padding-left:10px;
	box-sizing:border-box;
	line-height:23px;
}

.his3 p span{
	color:#3abbc2;
}

.his4{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his4 h3{
	width:50%;
	text-align:left;
	float:right;
	color:#939292;
	font-size:60px;
	padding-left:10px;
	box-sizing:border-box;
}

.his4 p{
	width:50%;
	float:left;
	text-align:right;
	color:#939292;
	opacity:0.8;
	margin-top:40px;
	padding-right:10px;
	box-sizing:border-box;
	line-height:23px;
}

.his4 p span{
	color:#3abbc2;
}

.his5{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his5 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#939292;
	font-size:60px;
	padding-right:10px;
	box-sizing:border-box;
}

.his5 p{
	width:50%;
	float:right;
	text-align:left;
	color:#939292;
	opacity:0.8;
	margin-top:40px;
	padding-left:10px;
	box-sizing:border-box;
	line-height:23px;
}

.his5 p span{
	color:#3abbc2;
}

#bc{
	width:800px;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#bc h2{
	color:#3abbc2;
	text-transform:uppercase;
	font-size:35px;
}

#bc p img{
	width:800px;
}

#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:800px;
	margin:0 auto;
	padding:50px 0;
	position:relative;
	height:400px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:110px;
}

.info1 img{
	width:180px;
}

.info2{
	position:absolute;
	right:130px;
	top:90px;
	text-align:left;
	color:#fff;
	font-size:14px;
	line-height:25px;
	margin-top:50px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:270px;
	font-size:12px;
}
.info3{
	position:absolute;
	right:0;
	top:70px;
}

.info3 img{
	width:35px;
	margin:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}


@media screen and (min-width:768px) and (max-width:1199px){

.square{
	position:relative;
	left:50%;
	margin-left:-75px;
	display:inline-block;
	width:150px;
	height:70px;
	margin-top:130px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:40px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:8px;
	width:150px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#about{
	width:100%;
	background-image:url(../img/center.webp);
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:50% 50%;
	padding:50px 0;
}

.about{
	width:700px;
	margin:0 auto;
	overflow:hidden;
}

.about1{
	width:40%;
	float:left;
}

.about1 img{
	width:250px;
	padding-top:30px;
}

.about2{
	width:60%;
	float:right;
}

.about2 p{
	color:#f1f1f1;
	font-size:13px;
	line-height:35px;
}

.profile2 p{
	padding-top:10px;
	font-size:18px;
}

.profile2 h3{
	padding-top:20px;
	padding-bottom:20px;
	text-transform:uppercase;
	display:inline-block;
	width:150px;
}

.profile2 h3 a{
	color:#f1f1f1;
	font-size:15px;
	padding:10px 50px;
	border:2px solid #f1f1f1;
	opacity:0.8;
	transition:all 0.5s;
}

.profile2 h3 a:hover{
	background-color:#38bbc9;
	opacity:1;
}

#art{
	width:700px;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#art h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:25px;
}

#art p{
	color:#f1f1f1;
	font-variant:normal;
	line-height:25px;
	font-size:13px;
}

#history{
	width:100%;
	padding:50px 0;
	background-color:#202020;
}

.history{
	width:700px;
	margin:0 auto;
}

.history h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:25px;
	text-align:center;
}

.his1{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his1 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#3abbc2;
	font-size:60px;
	padding-right:20px;
	box-sizing:border-box;
}

.his1 p{
	width:50%;
	float:right;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:20px;
	padding-left:25px;
	box-sizing:border-box;
	line-height:23px;
	font-size:13px;
}

.his1 p span{
	color:#3abbc2;
}

.his2{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his2 h3{
	width:50%;
	text-align:left;
	float:right;
	color:#3abbc2;
	font-size:60px;
	padding-left:20px;
	box-sizing:border-box;
}

.his2 p{
	width:50%;
	float:left;
	text-align:right;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-right:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:13px;
}

.his2 p span{
	color:#3abbc2;
}

.his3{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his3 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#3abbc2;
	font-size:60px;
	padding-right:20px;
	box-sizing:border-box;
}

.his3 p{
	width:50%;
	float:right;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-left:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:13px;
}

.his3 p span{
	color:#3abbc2;
}

.his4{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his4 h3{
	width:50%;
	text-align:left;
	float:right;
	color:#3abbc2;
	font-size:60px;
	padding-left:20px;
	box-sizing:border-box;
}

.his4 p{
	width:50%;
	float:left;
	text-align:right;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-right:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:13px;
}

.his4 p span{
	color:#3abbc2;
}

.his5{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his5 h3{
	width:50%;
	text-align:right;
	float:left;
	color:#3abbc2;
	font-size:60px;
	padding-right:20px;
	box-sizing:border-box;
}

.his5 p{
	width:50%;
	float:right;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-left:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:13px;
}

.his5 p span{
	color:#3abbc2;
}

#bc{
	width:700px;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#bc h2{
	color:#3abbc2;
	text-transform:uppercase;
	font-size:25px;
}

#bc p img{
	width:600px;
}


#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:700px;
	margin:0 auto;
	padding:40px 0;
	position:relative;
	height:350px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	font-size:12px;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:100px;
}

.info1 img{
	width:130px;
}

.info2{
	position:absolute;
	right:130px;
	top:60px;
	text-align:left;
	color:#fff;
	font-size:12px;
	line-height:25px;
	margin-top:40px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:220px;
	font-size:11px;
}
.info3{
	position:absolute;
	right:0;
	top:70px;
}

.info3 img{
	width:30px;
	margin:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}

}

@media screen and (max-width:767px){

.square{
	position:relative;
	left:50%;
	margin-left:-60px;
	display:inline-block;
	width:120px;
	height:60px;
	margin-top:130px;
	margin-bottom:50px;
}
				
.square h2{
	color:#676767;
	text-transform:uppercase;
	font-size:35px;
	text-align:center;
}

.line1-bottom{
	display: inline-block;
	height:5px;
	width:120px;
	background:#676767;
	position:absolute;
	z-index:2;}

.line1-bottom{left:0;bottom:0;width:0%;}

#about{
	width:100%;
	background-image:url(../img/center.webp);
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:50% 50%;
	padding:50px 0;
}

.about{
	width:90%;
	margin:0 auto;
	overflow:hidden;
}

.about1{
	width:100%;
	float:none;
	text-align:center;
	padding-bottom:50px;
}

.about1 img{
	width:250px;
	padding-top:30px;
}

.about2{
	width:85%;
	margin:0 auto;
	float:none;
}

.about2 p{
	color:#f1f1f1;
	font-size:12px;
	line-height:35px;
}

.profile2{
	width:80%;
	margin:0 auto;
	text-align:center;
}

.profile2 p{
	padding-top:30px;
	font-size:15px;
	text-align:center;
}

.profile2 h3{
	padding-top:20px;
	padding-bottom:20px;
	text-transform:uppercase;
	display:inline-block;
	width:140px;
}

.profile2 h3 a{
	color:#f1f1f1;
	font-size:15px;
	padding:10px 50px;
	border:2px solid #f1f1f1;
	opacity:0.8;
	transition:all 0.5s;
}

.profile2 h3 a:hover{
	background-color:#38bbc9;
	opacity:1;
}

#art{
	width:95%;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#art h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:25px;
}

#art p{
	color:#f1f1f1;
	font-variant:normal;
	line-height:25px;
	font-size:12px;
}

#history{
	width:100%;
	padding:50px 0;
	background-color:#202020;
}

.history{
	width:95%;
	margin:0 auto;
}

.history h2{
	padding-bottom:50px;
	color:#3abbc2;
	text-transform:uppercase;
	font-size:25px;
	text-align:center;
}

.his1{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his1 h3{
	width:100%;
	text-align:right;
	float:none;
	color:#3abbc2;
	font-size:45px;
	padding-right:20px;
	box-sizing:border-box;
}

.his1 p{
	width:100%;
	float:none;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:20px;
	padding-left:25px;
	box-sizing:border-box;
	line-height:23px;
	font-size:11px;
}

.his1 p span{
	color:#3abbc2;
}

.his2{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his2 h3{
	width:100%;
	text-align:left;
	float:none;
	color:#3abbc2;
	font-size:45px;
	padding-left:20px;
	box-sizing:border-box;
}

.his2 p{
	width:100%;
	float:none;
	text-align:right;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-right:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:11px;
}

.his2 p span{
	color:#3abbc2;
}

.his3{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his3 h3{
	width:100%;
	text-align:right;
	float:none;
	color:#3abbc2;
	font-size:45px;
	padding-right:20px;
	box-sizing:border-box;
}

.his3 p{
	width:100%;
	float:none;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-left:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:11px;
}

.his3 p span{
	color:#3abbc2;
}

.his4{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his4 h3{
	width:100%;
	text-align:left;
	float:none;
	color:#3abbc2;
	font-size:45px;
	padding-left:20px;
	box-sizing:border-box;
}

.his4 p{
	width:100%;
	float:none;
	text-align:right;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-right:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:11px;
}

.his4 p span{
	color:#3abbc2;
}

.his5{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
}

.his5 h3{
	width:100%;
	text-align:right;
	float:none;
	color:#3abbc2;
	font-size:45px;
	padding-right:20px;
	box-sizing:border-box;
}

.his5 p{
	width:100%;
	float:none;
	text-align:left;
	color:#f1f1f1;
	opacity:0.8;
	margin-top:25px;
	padding-left:20px;
	box-sizing:border-box;
	line-height:23px;
	font-size:11px;
}

.his5 p span{
	color:#3abbc2;
}

#bc{
	width:95%;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

#bc h2{
	color:#3abbc2;
	text-transform:uppercase;
	font-size:20px;
}

#bc p img{
	width:320px;
}

#footer{
	width:100%;
	background:#060606;
}
				
.foot{
	width:320px;
	margin:0 auto;
	padding:40px 0;
	position:relative;
	height:350px;
}
			
.foot1{
	text-align:center;
}

.foot1 p a{
	color:#31a2a8;
	text-decoration:underline;
	font-size:10px;
	opacity:0.8;
	transition:all 0.5s;
}

.foot1 p a:hover{
	color:#fff;
	text-decoration:underline;
	opacity:1;
}
			
.foot2{
	width:100%;
}

.info1{
	position:absolute;
	left:0;
	top:120px;
}

.info1 img{
	width:100px;
}

.info2{
	position:absolute;
	right:0px;
	top:60px;
	text-align:left;
	color:#fff;
	font-size:8px;
	line-height:25px;
	margin-top:40px;
	width:200px;
}

.info4{
	color:#666;
	position:absolute;
	bottom:50px;
	left:50px;
	font-size:7px;
}
.info3{
	position:absolute;
	right:0;
	top:70px;
}

.info3 img{
	width:25px;
	margin-left:0px;
}

.info3 p{
	display:inline-block;
	opacity:1;
	transition:all 0.5s;
}

.info3 p:hover{
	opacity:0.8;
	transform: translate(0, -5px);
}

}

/*애니메이션*/

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
    -webkit-animation-duration:1s;
  animation-duration:1s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInOut {
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut;
    -webkit-animation-duration:1s;
  animation-duration:1s;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
      -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeIn{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
      -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes top{
	from {width:0%;}
	to {width: 100%;}
}
		
.bottom{animation:top 0.5s 0.2s 1 normal;
				-webkit-animation-fill-mode:forwards;}
		
@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.opacity{ -webkit-animation-name: opacity;
  animation-name: opacity;
      -webkit-animation-duration:1s;
  animation-duration:1s;}

.wp1,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7,.wp8,.wp9,.wp10,.wp11,.wp12,.wp13,.wp14,.wp15,.wp16,.wp17,.wp18,.wp19,.wp20,.wp21,.wp22,.wp23,.wp24,.wp25,.wp26,.wp27,.wp28,.wp29,.wp30{visibility:hidden;}
.fadeInUp,.fadeInLeft,.fadeInOut,.fadeInRight,.fadeInOut,.fadeIn,.top,.bottom,.right,.left,.opacity{visibility:visible;}

.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-03s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }