@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:686px; position:relative; }	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:686px;}
#mainVisual .main-visual-list-con, 
#mainVisual .main-visual-con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative; overflow:hidden;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1,1);
    -o-transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
     transform: scale(1,1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute;  left:50%; margin-left:-32%;  top:400px;  } /* margin-top은 조정 (텍스트영역 높이의 반) */

.main-visual-item .main-visual-txt-bg {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.75); opacity:0;filter:Alpha(opacity=0); -webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;}

.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-txt3{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px); 
     transform: translateY(50px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;font-family: 'Pretendard', sans-serif;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-family: 'Pretendard', sans-serif; font-size:39px; color:#fff;
font-weight:400;margin-bottom:5px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}

.main-visual-item .main-visual-txt-con .main-visual-txt2{ 
display:block; font-family: 'Pretendard', sans-serif; font-size:56px; color:#9fdaeb;
font-weight:700;margin-bottom:15px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;
}



.main-visual-item .main-visual-txt-con .main-visual-txt3{ font-family: 'Play', sans-serif; font-size:55px;  font-weight:600; line-height: 140%; letter-spacing:-0.5px; color:#9fdaeb; word-break:keep-all; margin-top:10px; margin-bottom: 0px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}





.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; text-align:center; font-size:20px; font-weight:400;font-family: 'Pretendard', sans-serif; 
letter-spacing: -0.5px; color:rgba(255, 255, 255, 0.8);  line-height: 49px; height:50px; width: 130px; background:#e41619; margin-top:15px;
background-image: linear-gradient(45deg, #fff 50%, transparent 50%); background-position:100%; background-size:400%; opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-50px); 
    -o-transform: translateY(-50px); 
    -moz-transform: translateY(-50px);
    -webkit-transform: translateY(-50px); 
     transform: translateY(-50px);
	-webkit-transition:opacity 1.0s 0.8s, transform 1.0s 0.8s, color 300ms,  background 300ms ease-in-out;
	-moz-transition:opacity 1.0s 0.8s, transform 1.0s 0.8s, color 300ms, background 300ms ease-in-out;
	-o-transition:opacity 1.0s 0.8s, transform 1.0s 0.8s, color 300ms, background 300ms ease-in-out;
	-ms-transition:opacity 1.0s 0.8s, transform 1.0s 0.8s, color 300ms, background 300ms ease-in-out;
	transition:opacity 1.0s 0.8s, transform 1.0s 0.8s, color 300ms, background 300ms ease-in-out;}

.main-visual-item .main-visual-txt-con .main-visual-more-btn .arrow {display:inline-block; vertical-align: middle; margin-left: 5px; width:22px; height:9px; background:url("/images/icon/ic_arrow_3.png") no-repeat center;}

.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{background-position: 0; color:#333; }
.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover .arrow {background:url("/images/icon/ic_arrow_2.png") no-repeat center;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
	-ms-transform: scale(1.0,1.0) rotate(0.0001deg);
    -o-transform: scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform: scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.0001deg);
     transform: scale(1.0,1.0) rotate(0.0001deg);
}
.main-visual-item.active-item .main-visual-txt-bg {opacity:1;filter:Alpha(opacity=100);}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3,
.main-visual-item.active-item .main-visual-more-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);font-family: 'Pretendard', sans-serif; 
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; text-align:center; bottom:50px; left:50%; margin-left: -30px;}
#mainVisual .slick-dots li{display:inline-block; margin:0 3px ; }
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:35px; height:7px; background-color:#797979; 
	-webkit-border-radius:15px;-moz-border-radius:15px;-o-border-radius:15px;border-radius:0px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;
}
#mainVisual .slick-dots li.slick-active button{background-color:#fff; width:35px;}		/* 버튼 active */

@media all and (max-width:1420px){
	/*.main-visual-item .main-visual-txt-con {left:0; margin-left:428px;}
*/
	#mainVisual .slick-dots {left:90px; margin-left: 0;}
}



@media all and (max-width:1020px){
/*
	.main-visual-item .main-visual-txt-con {left:0; margin-left:216px;}
*/

}

@media all and (max-width:920px){
/*
	.main-visual-item .main-visual-txt-con {left:0; margin-left:163px;}
	*/
}

@media all and (max-width:800px){
	#mainVisual {height:auto; }

.main-visual-item .main-visual-txt-con{position:absolute; width:70%; padding:10px; top:150px; left:0px; margin:0 5%;}
.main-visual-item .main-visual-txt-con .main-visual-txt1{ font-size:26px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{ font-size:40px; }


	#mainVisual .slick-dots {bottom:60px; left:5%;}
	#mainVisual .slick-dots li button {width:20px; height:6px}
	#mainVisual .slick-dots li.slick-active button {width:20px;}
}


@media all and (max-width:768px){
	#mainVisual {height:auto; }
/*	.main-visual-item .main-visual-txt-con {width:52.5%; bottom:150px; margin-left:175px; padding:25px 5% 25px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {margin-top:-30px;}
    .main-visual-item .main-visual-txt-con .main-visual-txt2 {margin-top:-30px;}*/


	#mainVisual .slick-dots {bottom:60px; left:5%;}
	#mainVisual .slick-dots li button {width:20px; height:6px}
	#mainVisual .slick-dots li.slick-active button {width:20px;}
}


@media all and (max-width:480px){
	#mainVisual {height:auto; }
	/*
	.main-visual-item .main-visual-txt-con {width:62.5%; bottom:150px; margin-left:80px; padding:25px 5% 25px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {margin-top:-30px;}
    .main-visual-item .main-visual-txt-con .main-visual-txt2 {margin-top:-30px;}
*/
	#mainVisual .slick-dots {bottom:60px; left:5%;}
	#mainVisual .slick-dots li button {width:20px; height:6px}
	#mainVisual .slick-dots li.slick-active button {width:20px;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
#mainContent > article{}
/* 공통 :: 타이틀 */
.main-tit{margin-bottom:50px; text-align:center;}
.main-tit h3 {font-size:40px; letter-spacing: -0.5px; color:#333333;}

@media all and (max-width:1220px){
	
}

@media all and (max-width:800px){
	.main-tit {margin-bottom: 20px;}
	.main-tit h3 {font-size:23px;}
}

/* -------- 메인 컨텐츠 :: 패키지&프로모션 -------- */
#mainPackage {margin-top: 90px; margin-bottom: 140px; overflow:hidden;}

.main-package-slider {margin:0 -10px}

.main-package-slider .slick-arrow {position:absolute; z-index:10; width:40px; height:60px; cursor:pointer; top:23%; font-size:0; border:0;}
.main-package-slider .slick-prev {background:#fff url('/images/icon/ic_prev.png') no-repeat 15px center; left:0;}
.main-package-slider .slick-next {background:#fff url('/images/icon/ic_next.png') no-repeat 15px center; right:0;}

.main-package-inner {float:left; padding:0 10px; width:calc(33.333% - 20px);}

.main-package-img {position:relative; padding-top: 63.63%; overflow:hidden;}
.main-package-img span {position:absolute; left:0; top:0; width:100%; height:100%;}
.main-package-img span img {width:100%; height:100%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

.main-package-hover {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(34, 34, 34, 0.8); text-align:center; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; opacity:0;filter:Alpha(opacity=0);}
.main-package-inner .main-package-hover img {display:inline-block; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

.main-package-info {margin-top: 15px;}
.main-package-info .category {font-size:16px; line-height: 26px; letter-spacing: -0.1px; color:#999999; font-weight: 600;}
.main-package-info h4 {font-size:23px; line-height: 30px; letter-spacing: -0.1px; color:#333333; margin-top: 10px; margin-bottom: 15px;  overflow:hidden; text-overflow:ellipsis;}
.main-package-info h4 span {display:inline-block; position:relative; white-space:nowrap;}
.main-package-info h4 span::after {content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background-color:#333333; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.main-package-info p {font-size:15px; line-height: 25px; letter-spacing: -0.5px; color:rgba(51, 51, 51, 0.7); height:50px; overflow:hidden;}

.main-package-inner a:hover .main-package-img span img {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}
.main-package-inner a:hover .main-package-hover {opacity:1;filter:Alpha(opacity=100);}
.main-package-inner a:hover .main-package-hover img {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}

.main-package-inner a:hover .main-package-info h4 span::after {width:100%; }

@media all and (max-width:1220px){
	#mainPackage {margin-top: 63px; margin-bottom: 98px;}
}

@media all and (max-width:800px){
	#mainPackage {margin-top: 30px; margin-bottom: 45px;}
	.main-package-info {margin-top: 10px;}
	.main-package-info .category {font-size:11px; line-height: 23px;}
	.main-package-info h4 {font-size:14px; line-height: 23px; margin-top: 5px; margin-bottom: 8px;}
	.main-package-info p {font-size:11px; line-height: 17px; height:34px;}

	.main-package-inner .main-package-hover img {max-width:30px;}

	.main-package-slider .slick-arrow {width:20px; height:30px; }
	.main-package-slider .slick-prev {background:#fff url(/images/icon/ic_prev.png) no-repeat center; background-size:5px auto; left:10px;}
	.main-package-slider .slick-next {background:#fff url(/images/icon/ic_next.png) no-repeat center; background-size:5px auto; right:10px;}

}

/* -------- 메인 컨텐츠 :: 객실소개 -------- */
#mainRoom {margin-bottom: 120px;}
.main-room-tit {position:absolute; bottom:50px; left:4%; right:4%;}
.main-room-tit h4 {float:left; font-size:40px; letter-spacing: -0.25px; color:#fff; font-weight: 400;}
.main-room-tit h4 span {display:inline-block; vertical-align: middle; font-size:22px; line-height: 40px; letter-spacing: -0.5px; color:rgba(255, 255, 255, 0.7);}
.main-room-tit a {float:right; padding:0 15px; border:1px solid #fff; font-size:15px; line-height: 53px; letter-spacing: -0.5px; color:#fff; height:53px; background-image: linear-gradient(45deg, #fff 50%, transparent 50%); background-position:100%; background-size:400%; -webkit-transition: background 300ms ease-in-out, color 0.3s; -moz-transition: background 300ms ease-in-out, color 0.3s; -ms-transition: background 300ms ease-in-out, color 0.3s; -o-transition: background 300ms ease-in-out, color 0.3s; transition: background 300ms ease-in-out, color 0.3s;}
.main-room-tit a .arrow {display:inline-block; width:22px; height:9px; margin-left: 55px; background:url("/images/icon/ic_arrow_3.png") no-repeat center; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

.main-room-tit a:hover {background-position:0; color:#333;}
.main-room-tit a:hover .arrow {background:url("/images/icon/ic_arrow_2.png") no-repeat center;}

	
/* general style */
.preview {
	width: 200px;
	height:120px;
	position: absolute;
	top:0;
	left:0px;
	z-index:100;
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 	
	opacity:0;
	background:#000;
}

.preview img {
	position: absolute;
	left:0px;
	top:0;
	width: 200px;
	height:120px;
	opacity:0.6;
}

.preview .alt {
	position: absolute;
	right:30px;
	top:60px;
	width: 75px;
	height:60px;
	color:rgba(255, 255, 255, 0.7);
	font-weight: 400;
	text-indent:0;
	text-transform: uppercase;
	text-align:left;
	font-size:14px;
	line-height:16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}


/* next button */			
.flex-next .preview {
	right:0px;
	left:auto;	
	background:#000;
}

.flex-next .preview img {
	position: absolute;
	left:0px;
	top:0;
	width: 200px;
	height:120px;
}

.flex-next .preview .alt {
	left:30px;
	right:auto;
}


/* hover style */		
.flexslider:hover .flex-prev .preview {
	left:0px;
	opacity:1;
}

.flexslider:hover .flex-next .preview {
	right:0px;
	opacity:1;
}		

.flex-prev::after {content:"PREV"; position:absolute; width:75px; right:30px; z-index:100; top:30px; font-size:16px; letter-spacing: -0.1px; color:#fff;}
.flex-next::after {content:"NEXT"; position:absolute; left:30px; z-index:100; top:30px; font-size:16px; letter-spacing: -0.1px; color:#fff;}
.flex-prev .arrow {position:absolute; z-index:101; width:14px; height:28px; background:url("/images/button/btn_prev.png") no-repeat; left:30px; top:45px;}
.flex-next .arrow {position:absolute; z-index:101; width:14px; height:28px; background:url("/images/button/btn_next.png") no-repeat; right:30px; top:45px;}

.flex-direction-nav a.flex-disabled {
   display:none;
}

#mainRoom .main-room-m-slider {display:none;}

@media all and (max-width:1420px){
	.flex-direction-nav .flex-next {right:0;}
	.flexslider:hover .flex-next {right:0;}

	.flex-direction-nav .flex-prev {left:0;}
	.flexslider:hover .flex-prev {left:0;}
}

@media all and (max-width:1220px){
	#mainRoom {margin-bottom: 84px;}
}

@media all and (max-width:800px){
	#mainRoom {margin-bottom: 40px;}
	
	.flex-direction-nav {display:none;}
	#mainRoom .main-room-m-slider {display:block; margin-top: 35px;}
	.main-room-m-inner {position:relative;}
	.main-room-m-inner img {max-width:100%;}

	.main-room-m-slider .slick-dots {position:absolute; text-align:center; top:-25px; left:0; width:100%; font-size:0;}
	.main-room-m-slider .slick-dots li {display:inline-block; margin:0 3px ; }
	.main-room-m-slider .slick-dots li button {width:20px; height:6px; cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:10px; height:10px; background-color:#575858; 	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
	.main-room-m-slider .slick-dots li.slick-active button {width:20px; background-color:#cecece;}

	.main-room-tit {left:2.5%; right:2.5%; bottom:12px;}
	.main-room-tit h4 {font-size:18px; line-height: 20px;}
	.main-room-tit h4 span {display:block;}

	.main-room-tit a {padding:0 10px; height:35px; line-height: 35px; font-size:11px; margin-top: 10px;}
	.main-room-tit .arrow {margin-left: 8px; width:18px; background-size:contain;}
	.main-room-tit a:hover .arrow {background-size:contain;}
}

/* -------- 메인 컨텐츠 :: 배너 -------- */
.main-banner-info {float:left; width:34%;}
.main-banner-info-slider {}
.main-banner-info h4 {font-size:36px; line-height: 50px; letter-spacing: -0.5px; color:#333333; font-weight: 400;}
.main-banner-info h4 span {display:block;}
.main-banner-info p {font-size:18px; line-height: 30px; letter-spacing: -0.5px; color:#777777; margin-top:30px; word-break:keep-all;}

.main-banner-more {margin-top: 105px;}
.main-banner-more a {display:inline-block; height:53px; line-height: 53px; padding:0 20px; border:1px solid #444; font-size:15px; letter-spacing: -0.5px; color:#333333; background-image: linear-gradient(45deg, #444 50%, transparent 50%); background-position:100%; background-size:400%; -webkit-transition: background 300ms ease-in-out, color 0.3s; -moz-transition: background 300ms ease-in-out, color 0.3s; -ms-transition: background 300ms ease-in-out, color 0.3s; -o-transition: background 300ms ease-in-out, color 0.3s; transition: background 300ms ease-in-out, color 0.3s;}
.main-banner-more .arrow {display:inline-block; margin-left: 15px; vertical-align: middle; width:22px; height:9px; background:url("/images/icon/ic_arrow_2.png") no-repeat center; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

.main-banner-more a:hover {background-position:0; color:#fff;}
.main-banner-more a:hover .arrow {background:url("/images/icon/ic_arrow_3.png") no-repeat center;}

.main-banner-img {float:right; width:66%;}
.main-banner-img img {max-width:100%;}

.main-banner-img .slick-arrow {position:absolute; z-index:10; width:30px; height:60px; cursor:pointer; top:50%; margin-top: -30px; font-size:0; border:0;}
.main-banner-img .slick-prev {background:#fff url('/images/icon/ic_prev.png') no-repeat center; left:0;}
.main-banner-img .slick-next {background:#fff url('/images/icon/ic_next.png') no-repeat center; right:0;}


.main-banner-info-slider .slick-dots {position:absolute; bottom:120px; left:0; width:100%; font-size:0;}
.main-banner-info-slider .slick-dots li {display:inline-block; margin:0 3px ; }
.main-banner-info-slider .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:10px; height:10px; background-color:#cecece; 	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.main-banner-info-slider .slick-dots li.slick-active button {width:28px; background-color:#575858;}

@media all and (max-width:1220px){
	.main-banner-info-slider {margin-bottom: 50px;}
	/* .main-banner-info-slider .slick-dots {bottom:-25px;} */
}

@media all and (max-width:800px){
	.main-banner-info {float:none; width:100%; text-align:center; margin-bottom: 25px;}
	.main-banner-info h4 {font-size:17px; line-height: 26px;}
	.main-banner-info h4 span {display:inline;}
	.main-banner-info p {font-size:12px; line-height: 20px; margin-top: 15px;}

	.main-banner-info-slider {margin-bottom: 40px;}

	.main-banner-more {margin-top: 40px;}
	.main-banner-more a {padding:0 15px; height:35px; line-height: 35px; font-size:11px; }
	.main-banner-more .arrow {margin-left: 8px; width:18px; background-size:contain;}
	.main-banner-more a:hover .arrow {width:18px; background-size:contain;}

	.main-banner-img {float:none; width:100%;}

	.main-banner-img .slick-arrow {width:20px; height:30px; margin-top: -15px;}
	.main-banner-img .slick-next {background:#fff url(/images/icon/ic_next.png) no-repeat center; background-size:5px auto;}
	.main-banner-img .slick-prev {background:#fff url(/images/icon/ic_prev.png) no-repeat center; background-size:5px auto;}

	.main-banner-info-slider .slick-dots {bottom:55px;  text-align:center;}
	.main-banner-info-slider .slick-dots li button {width:20px; height:6px;}
	.main-banner-info-slider .slick-dots li.slick-active button {width:20px;}
}

/* -------- 메인 컨텐츠 :: 링크 -------- */
#mainLink {margin-top: 80px; margin-bottom: 155px;}
.main-link-inner {position:relative; float:left; width:33.333%; text-align:center;}
.main-link-inner::after {content:""; position:absolute; width:1px; height:100%; left:0; top:0; background-color:#D5D5D5}
.main-link-inner:first-child::after {background:transparent;}
.main-link-inner a {display:block; padding:15px 0;}
.main-link-icon {float:left; width:50%; }
.main-link-icon img {-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; margin-top:3%;}
.main-link-info {float:left; width:50%; text-align:left;}
.main-link-info h4 {font-size:26px; letter-spacing: -0.5px; color:#333333; font-weight: 400; margin-bottom: 20px; line-height:35px;}
.main-link-info p {font-size:16px; line-height: 26px; letter-spacing: -0.5px; color:#777777; word-break:keep-all;}
.main-link-info p span {display:block;}

.main-link-inner a:hover .main-link-icon img {-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px);}
/* .main-link-inner a:hover h4 {text-decoration: none; display:inline-block; border-bottom: 2px solid #333; padding-bottom: 3px;} */

.main-link-info h4 span{display:inline-block; position:relative; white-space:nowrap;}
.main-link-info h4 span::after {content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background-color:#333333; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.main-link-inner a:hover .main-link-info h4 span::after {width:100%; }


@media all and (max-width:1220px){
	#mainLink {margin-top: 56px; margin-bottom: 108px;}
	.main-link-info p span {display:inline;}
}

@media all and (max-width:800px){
	#mainLink {margin-top: 25px; margin-bottom: 50px;}
	.main-link-icon {float:none; width:100%; margin-bottom: 5px;}
	.main-link-icon img {max-width:50%;}
	.main-link-info {float:none; width:100%; text-align:center;}
	.main-link-info h4 {font-size:15px; margin-bottom: 0;}
	.main-link-info p {display:none;}
	.main-link-inner a {padding:0;}
}