@charset "utf-8";


.main-visual {position:relative; overflow:hidden;}
.main-visual .movie-box {position:relative; height:0; padding-bottom:56.25%;}
.main-visual .item {position:absolute; top:50%; left:50%; width:100%; padding-bottom:56.25%; transform:translate(-50%,-50%); object-size:cover; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video,
.main-visual .item iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .content {position:absolute; bottom:16%; left:0; text-align:center; width:100%; color:#fff; padding:0 5%; z-index:50; transition:all 1s; -webkit-transition-timing-function:ease; transition-timing-function:ease; } 
.main-visual .since {font-size:35px; line-height:1.6em; font-family: 'Noto Serif KR', serif;}
.main-visual .title {font-size:70px; line-height:1.4em; letter-spacing:.10em; font-family: 'DM Serif Display', serif;}


.animated {transition: all .5s ease;}

.main-visual [data-animation-in] {
    opacity: 0;
    animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
	transition:1s;
}

@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
		transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
			transition:1s;
  }
}

.zoomInImage {
  animation-name: zoomInImage;
}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
			transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
			transition:1s;
  }
}

.zoomOutImage {
  animation-name: zoomOutImage;
		transition:1s;
}

#section0 {height:0; padding-bottom:56.25%;}
#section0 .main-visual {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}

.main-title {text-align:center; margin-bottom:30px;}
.main-title h2 {color:#242424; font-size:40px; line-height:1.4em; margin-bottom:10px;}
.main-title p {font-size:18px ;line-height:1.6em;}

.main-contain {position:relative; z-index:3;}
#section1 {background:url('../images/main/business_bg.jpg') 0 0 repeat; padding:120px 0; position:relative; z-index:0;}

.main-business {}
.main-business ul {display:flex; margin-left:-30px; flex-wrap:wrap; margin-bottom:-30px;}
.main-business ul li {width:33.33333%; padding-left:30px; margin-bottom:30px;}
.main-business ul li .photo {position:relative;}
.main-business ul li .pic {position:relative; height:0; padding-bottom:65.8%; box-shadow:5px 5px 5px rgba(0,0,0,.25); overflow:hidden}
.main-business ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100% !important; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.main-business ul li .pic:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; background:#137f73; opacity:0; z-index:1; transition:0.3s;}
.main-business ul li .content {position:absolute; top:50%;transform:translateY(-50%);left:0; text-align:center; width:100%; color:#fff; padding:0 15px; z-index:2;}
.main-business ul li .content .tit {font-size:24px ;line-height:1.4em;font-weight:500; margin-bottom:30px;}
.main-business ul li .content .more {display:inline-block;vertical-align:top; padding:0 26px; font-size:15px; line-height:44px; border:1px solid rgba(255,255,255,.30); border-radius:46px; transition:0.3s;}
.main-business ul li .content .more:after {content:""; display:inline-block;vertical-align:top; height:44px; width:24px; background:url('../images/main/more_arrow.png') 50% 50% no-repeat; margin-left:10px;}
.main-business ul li a:hover .pic:after {opacity:.90;}
.main-business ul li a:hover .content .more {background:#d2a648; border-color:#d2a648;}
.main-business ul li a:hover .pic img {transform:translateY(-50%) scale(1.04,1.04); -ms-transform:translateY(-50%) scale(1.04,1.04); -webkit-transform:translateY(-50%) scale(1.04,1.04);}


#section2 {position:relative; height:700px;}
#section2 .content {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; padding:0 15px; text-align:center; color:#fff; z-index:1}
#section2 .content .title {font-size:70px; line-height:1.5em; margin-bottom:20px;font-family: 'DM Serif Display', serif;}
#section2 .content p {font-size:22px; line-height:1.6em; font-weight:500;}

.stay-bg {position:absolute; width:100%; top:-40%; bottom:0; background-position:50% 50%;background-repeat: no-repeat;  background-size: cover; background:url('../images/main/stay_bg.jpg') 50% 0 no-repeat;}

.parallax-stay {position:fixed; width:100%; top:-100px; bottom:0; background-position:50% 50%;background-repeat: no-repeat;  background-size: cover; background:url('../images/main/stay_bg.jpg') 50% 0 no-repeat;}

#section3 {position:relative; z-index:3; background:url('../images/main/bg_bnr.jpg') 50% 50% repeat; background-size:cover; padding:200px 0;}
#section3 .main-title {margin-bottom:100px;}

.main-bnr {}
.main-bnr ul {display:flex;}
.main-bnr ul li {width:25%; position:relative; text-align:center; padding:35px 10px;}
.main-bnr ul li .icon {width:135px; height:135px; background-color:rgba(19,137,115,.80); background-size:contain; background-position:50% 50%; background-repeat:no-repeat; border-radius:50%; margin:0 auto 22px;}
.main-bnr ul li .tit {font-size:22px; line-height:1.6em; color:#242424;font-weight:500;}
.main-bnr ul li:nth-child(even) .icon {background-color:rgba(210,166,72,.80);}
.main-bnr ul li:nth-child(1) .icon {background-image:url('../images/main/ico1.png')}
.main-bnr ul li:nth-child(2) .icon {background-image:url('../images/main/ico2.png')}
.main-bnr ul li:nth-child(3) .icon {background-image:url('../images/main/ico3.png')}
.main-bnr ul li:nth-child(4) .icon {background-image:url('../images/main/ico4.png')}
.main-bnr ul li:first-child:before {content:"";position:absolute; top:0; left:0; width:1px; height:100%; background:#ddd}
.main-bnr ul li:after {content:"";position:absolute; top:0; right:0; width:1px; height:100%; background:#ddd}