/* main css */


/* 메인슬라이더 */
/* .wheel {
	width: 100%;
	height: 100%;
}*/


/* 01 */
/* .mainvisual {
	width: 100%;
}

.mainvisual .bx-wrapper {
	margin-bottom: 0;
	border:none;
	box-shadow:none
	width: 100%;
	height: 100%;
}

.mainvisual [class*='slide-'] {
	padding: 200px 0;
	width: 100%;
	height: 100vh;
	position:relative;
}

.mainvisual [class*='slide-']::before {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	content:'';
	z-index: -1;
	background-color:rgba(0,0,0,0.7);
}

.mainvisual .slide-01 {
	background-image:url('../img/company07.jpg');
}

.mainvisual .slide-02 {
	background-image:url('../img/company08.jpg')
}



[class*='slide-'] .row {
	display:table;
	width: 100%;
	height: 100%;
} 

[class*='slide-'] .row .wh {
	display:table-cell;
	vertical-align:middle
} 

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {
	position:absolute;
	top: 50%;
	width: 50px;
	height: 60px;
}

.bx-wrapper .bx-prev {
	left: 20px;
	background:url('../img/left_w.png') center;
}

.bx-wrapper .bx-next {
	right: 20px;
	background:url('../img/right_w.png') center;
} */



/* [class*='section-'] {
	padding: 60px 0;
} */

/* 텍스트상자 */
.section-01 {
	background-image:url('../img/company07.jpg');
	background-position:center center;
	position:relative;
}

.section-01::before {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	content:'';
	z-index: 1;
	background-color:rgba(0,0,0,0.7);
}

.section-01 .mousewheel {
	
}

.section-01 .mousewheel {
	z-index: 2;
	width: 300px;
	height: 100px;
	left: 50%;
	margin-left: -150px;
	color:#fff;
	font-size:20px;
	position:absolute;
	bottom: 15px;
}

.section-01 .mousewheel p {
	position:absolute;
	left: 0;
	width: 100%;
	text-align:center;
}

.section-01 .mousewheel p.top {
	top: 0;
	animation: wheel1 3s linear infinite;
}
.section-01 .mousewheel p.mid {
	top: 10px;
	animation: wheel2 3s linear infinite;
}
.section-01 .mousewheel p.btm {
	top: 20px;
	animation: wheel3 3s linear infinite;
}

.section-01 .mousewheel p.text {
	display:inline-block;
	vertical-align:middle;
	bottom: 15px;
}
@keyframes wheel1 {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	20%  { opacity: 1; }
	30%  { opacity: 1; }
	40%  { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes wheel2 {
	0%   { opacity: 0; }
	10%  { opacity: 0; }
	20%  { opacity: 1; }
	30%  { opacity: 1; }
	40%  { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes wheel3 {
	0%   { opacity: 0; }
	10%  { opacity: 0; }
	20%  { opacity: 0; }
	30%  { opacity: 1; }
	40%  { opacity: 1; }
	50%  { opacity: 1; }
	60%  { opacity: 0; }
	100% { opacity: 0; }
}

.mainvisual .text-box {
	z-index: 2;
	margin: auto;
	padding: 30px;
	color:#d5d5d5
}

.mainvisual .text-box .title {
	font-size:25px;
	margin-bottom: 10px;
}

.mainvisual .text-box .subtitle {
	font-size:20px;
	margin-bottom: 10px;
}

.mainvisual .text-box .content {
	font-size:60px;
	color:#efefef;
	line-height:120%
}

/* 컨텐츠 */

/* 02 */
.section-02 {
	background:#fff;
}

.section-02 .kind {
	width: 35%;
	float:left;	
	padding: 40px;
	color:#333;
	!animation: fadeIn 500ms 2s ease-in-out both
}

.section-02 .kind {
	position:relative;
	z-index: 10
}

.section-02.active .itemslider {
	width: 90%;
	margin: auto;
	animation: fadedown 500ms 1500ms  ease-in-out both
}

@keyframes fadedown {
	0% {transform: translateY(-60px); 	opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

.section-02 .owl-item {
	height: 500px;
}

.section-02 .owl-dots {
	text-align:right;
}

/* .section-02 .itemslider .owl-item {
	width: 100%;
} */

.section-02 .owl-dots button {
	width: 10px;
	height: 10px;
	border-radius:50%;
	background-color:#adadad;
	margin: 0 5px
}

.section-02 .owl-dots button:hover,
.section-02 .owl-dots button.active {
	background-color:#333
}


/* section-03 */
.section-03 {
	position:relative;
	background:url('../img/company09.jpg');
	background-position:center center;
	color:#fff
}

.section-03::before {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	content:'';
	z-index: 1;
	background-color:rgba(0,0,0,0.7);
}

.section-03 .row {
	
}


.section-03 .text-box {
	z-index: 2;
	width: 400px;
	margin: auto;
	height: 350px;
	padding: 40px;
	margin-bottom: 80px;
}

.section-03 h4 {
	line-height:120%;
	margin-bottom: 40px;
}

.section-03 .menulist li {
	/* display:none; */
	z-index: 2;
	position:relative;
	float:left;
	width: 20%;
	text-align:center;
	padding: 40px 0;
	
}

.section-03.active .menulist li.list01 {
	animation: fadeIn 500ms 1500ms  ease-in-out both;
}

.section-03.active .menulist li.list02 {
	animation: fadeIn 500ms 1600ms  ease-in-out both;

}

.section-03.active .menulist li.list03 {
	animation: fadeIn 500ms 1700ms  ease-in-out both;

}

.section-03.active .menulist li.list04 {
	animation: fadeIn 500ms 1800ms  ease-in-out both;
	
}

.section-03.active .menulist li.list05 {
	animation: fadeIn 500ms 1900ms  ease-in-out both;
	
}

@keyframes fadeIn {
	0% {opacity: 0;  visibility: hidden;}
	100% {opacity: 1; visibility: block;}
}

.section-03 .menulist li::after {
	position:absolute;
	right: 0;
	top: 0;
	display:inline-block;
	content:'';
	width: 1px;
	height: 100%;
	background-color:#dfdfdf;
	vertical-align:middle
}

.section-03 .menulist li:last-child::after {
	content:none
}

.section-03 .menulist li a  {
	display:block;
	color:#fff;
}

.section-03 .menulist li .icon {
	margin-bottom: 10px;
	font-size:40px;
}

.section-03 .menulist li h6 {
	font-size:25px;
}

.section-03 .menulist li .hidden-box {
	position:relative;
	width: 100%;
	transition:all 0.3s;
	opacity: 0;
	position:absolute;
	height: 250px;
	top: 50%;
	margin-top: -125px;
	background-color:rgba(0,0,0,0.7);
	padding: 20px;
	padding-top: 40px;
}

.section-03 .menulist li .hidden-box h6 {
	margin-bottom: 20px
}

.section-03 .menulist li .hidden-box p {
	font-size:14px
}

.section-03 .menulist li:hover .visibility {
	opacity: 0
}

.section-03 .menulist li:hover .hidden-box {
	opacity: 1
}


/* section-02, section-03 */
.text-box {
	position:relative;
	padding: 100px 40px
}

.text-box h4 {
	font-size:40px
}

.text-box p {
	font-size:20px;
	margin-bottom: 40px;
}

.text-box a {
	border:2px solid #333;
	padding: 5px;
	color:#333;
	
}

.section-03 .text-box a {
	border-color:#fff;
	color:#fff;
}

.text-box a:hover {
	background-color:#333;
	color:#fff;
}

.section-03 .text-box a:hover {
	background-color:#fff;
	color:#333;
}

.section-03 .hidden-box [class*="line"],
.text-box [class*="line"] {
	position:absolute;
	background-color:#333;
	opacity: 0;
}

.section-03 .hidden-box [class*="line"],
.section-03 .text-box [class*="line"] {
	background-color:#fff;
}
.text-box .line-left {
	bottom: 0;
	left: 0;
	width: 5px;
	height: 100%
}

.hidden-box .line-left {
	top: 0;
	left: 0;
	width: 5px;
	height: 100%
}

.hidden-box .line-right,
.text-box .line-right {
	right: 0;
	top: 0;
	width: 5px;
	height: 100%
}

.hidden-box .line-left,
.hidden-box .line-right {
	width: 3px
}


.text-box .line-top {
	top: 0;
	left: 0;
	width: 100%;
	height: 5px
}

.hidden-box .line-top {
	top: 0;
	left: 0;
	width: 100%;
	height: 5px
}

.hidden-box .line-bottom,
.text-box .line-bottom {
	bottom: 0;
	right: 0;
	width: 100%;
	height: 5px
}

.hidden-box .line-top,
.hidden-box .line-bottom {
	height: 3px
}

.section-02.active .text-box {
	animation: fadeUp 500ms 500ms ease-in-out both
}

.section-03.active .text-box {
	text-align:center;
	height: auto;
	animation: fade-down 500ms 500ms ease-in-out both
}

.section-03.active .text-box p {
	margin-bottom: 0
}

@keyframes fadeUp {
	0% {transform: translateY(60px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes fade-down {
	0% {transform: translateY(-100px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

.section-02.active .text-box .line-top {
		animation: linew 500ms 800ms ease-in-out both
}

.section-02.active .text-box .line-bottom {
		animation: linew 500ms 1400ms  ease-in-out both
}

.section-02.active .text-box .line-left {
		animation: lineh 500ms 1700ms  ease-in-out both
}

.section-02.active .text-box .line-right {
		animation: lineh 500ms 1100ms  ease-in-out both
}

.section-03.active .text-box .line-top {
		animation: linew 500ms 800ms ease-in-out both
}

.section-03.active .text-box .line-bottom {
		animation: linew 500ms 1400ms  ease-in-out both
}

.section-03.active .text-box .line-left {
		animation: lineh 500ms 1700ms  ease-in-out both
}

.section-03.active .text-box .line-right {
		animation: lineh 500ms 1100ms  ease-in-out both
}

.section-03.active .menulist li:hover .hidden-box .line-top,
.section-03.active .menulist li:hover .hidden-box .line-bottom {
	animation: linew 500ms 100ms ease-in-out both
} 

.section-03.active .menulist li:hover .hidden-box .line-left,
.section-03.active .menulist li:hover .hidden-box .line-right {
	animation: lineh 500ms 100ms ease-in-out both
} 

@keyframes linew {
	0% {width: 0%; opacity: 0;}
	100% {width: 100%; opacity: 1;}
}

@keyframes lineh {
	0% {height: 0%; opacity: 0;}
	100% {height: 100%; opacity: 1;}
}

.section-04 {
	position:relative;
	background-color:#efefef;
}

.section-04 .kind {
	border-top:30px solid #333;
	box-shadow:5px 5px 5px #999;
	background-color:#fff;
	padding: 80px 40px;
	width: 30%;
	float:left;
	text-align:center;
}

.section-04 .kind.middle {
	margin: 0 5%;
}

.section-04 .kind i {
	display:inline-block;
	margin-bottom: 20px;
	font-size:70px;
}

.section-04 .kind h6 {
	font-size:25px
}

.section-04.active .kind-01 {
	animation: zoomIn 500ms 500ms ease-in-out both
}

.section-04.active .kind-02 {
	animation: zoomIn 500ms 800ms ease-in-out both
}

.section-04.active .kind-03 {
	animation: zoomIn 500ms 1100ms ease-in-out both
}



@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

/* media queries  O▽O/ */
@media(max-width:991px) {
	
	
}

@media(max-width:575px) {


}