.mainImg{ width: 100%; min-width: 100px; height: 1080px; min-height: 700px; text-align: center; position: relative; }
.mainImg .swiper-container{ width: 100%; height: 100%; z-index: 1; position: relative; overflow: hidden; }
.mainImg .swiper-slide{ width: 100%; height: 100%; overflow: hidden;}
.mainImg .swiper-slide img{ width: 100%; height: 100%;  object-fit: cover; }
.mainImg .swiper-button-prev:after{ content: ''; }
.mainImg .swiper-button-next:after{ content: ''; }
.mainImg .control{ width: 550px; height: 80px; background-color: #fff; position: relative; bottom: 50px; right: 100px; padding: 10px 0; }
.mainImg .swiper-button-prev{ position: absolute; width: 60px; height: 60px; background-image: url(../img/roomdetail/left.png); background-size: cover; left: 0; }
.mainImg .swiper-button-next{ position: absolute; width: 60px; height: 60px; background-image: url(../img/roomdetail/right.png); background-size: cover; right: 100px; }
.mainImg .control{ width: 550px; height: 80px; background-color: #fff; position: absolute; bottom: 50px; right: 100px;}
.mainImg .control .swiper-scrollbar{ width: 240px; height: 5px; background-color: rgba(255,255,255,0.3); position: absolute; right: 210px; bottom: 42px; padding: 0; overflow: hidden; z-index: 100; }
.mainImg .swiper-scrollbar-drag{ background-color: #fff;}

.mainImg .swiper-number-start{ position: absolute; bottom: 32px; left: 70px; color: #fff; font-family: Montserrat; font-size:18px; font-weight: 600;z-index: 100; }
.mainImg .swiper-number-end{ position: absolute;  bottom: 32px; left: 355px; color: #fff; font-family: Montserrat; font-size:18px; font-weight: 600;  z-index: 100;}

.mainImg .control .swiper-play,.mainImg .control .swiper-paus { width:60px; height:60px; text-align: center; line-height: 60px; margin: 12px 0 8px; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; color:#fff; background:rgba(51,51,51,0.1); position: absolute; right: 10px; top: 13px; }

.control .swiper-play{  position: absolute; /*background:url('/img/icoPlay.png') no-repeat;*/ z-index:100; display:none; }
.control .swiper-paus { position: absolute; /*background:url('/img/icoPause.png') no-repeat; */z-index:100; }


.mainImg .maintitle{ height: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 100; padding-top: 500px; }
.maintitle h2{ font-size: 42px; font-family: Montserrat; font-weight: 600;  color: #fff; text-shadow: 1px 1px rgba(0,0,0,0.3); text-transform: capitalize; }
.maintitle .subText{ font-size: 16px; color: #fff; padding-top: 20px; text-shadow: 1px 1px rgba(0,0,0,0.3); }


/* maincontent */
.maincontent{ position: relative; width: 100%; }
.text{  /*background-image: url(../img/special/13.png);*/ background-repeat: no-repeat; background-size: 100% 100%; /*width: 100%; */text-align: center; border:50px solid #d9a76a; }
.text .backBox1 { position:absolute; right:0; top:0; width:100px; height:190px; background-color:#fff; display:block; }
.text .backBox2 { position:absolute; left:0; bottom:0; width:100px; height:190px; background-color:#fff; display:block; }
.context{ padding: 120px 10px 60px;}
.context > h3{ font-size: 42px; font-weight: 800; font-family: Montserrat; color: #333; text-transform: uppercase}
.context > p{ font-family: NotoSansCJKkr; font-size: 16px; color: #666; line-height: 30px; padding: 0 5px; }
.context img{ padding: 30px 0;}
.context .car{ color: #d9a76a; font-size: 15px;}

.maincontent p{ font-family: NotoSansCJKkr; font-size: 16px; color: #666; line-height: 30px;}
.pctx { padding-top: 10px; padding-bottom: 120px;}
.pctx p{ padding-top: 0;}
.text > img{ width: 60%; height: 320px; object-fit: cover; padding-bottom: 40px; }

/* content */
.content{height: 800px; box-sizing: border-box; text-align: center; font-family: NotoSansCJKkr; font-size: 15px; line-height: 30px;}
.content .special01 > li{ float: left; width: 25%; height: 340px; background-repeat: no-repeat; background-size : cover; position: relative; background-position: center center;  }
.content .special01 > li:nth-child(5), .content .special01 > li:nth-child(6), .content .special01 > li:nth-child(7), .content .special01 > li:nth-child(8), .content .special01 > li:nth-child(9){float: left; width: 20%; height: 340px; background-repeat: no-repeat; background-size : cover; position: relative;}

.special01 figure{
    width: 100%; height: 100%;
	background: #fff;
    overflow: hidden;
}
.special01 figure img, .special01 figure h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
.special01 figure img{
    height: 100%; object-fit: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.special01 figure h3, .special01 figure p, .special01 figure h2{
    width: 100%;
	position: absolute;
	bottom: 0;
    text-align: center;
}
.special01 figure h2{ 
    font-family: Montserrat; 
    font-size: 20px; 
    font-weight: 600; 
    transition: 0.3s; 
    text-align: center; 
    bottom: 30px; 
    text-transform: capitalize; }
.special01 figure h3{
    font-family: Montserrat;
    font-weight: 600;
    text-transform: none;
	font-size: 22px;
    color: #333;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
    bottom: 35px;
}
.special01 figure p {
    font-family: NotoSansCJKkr;
	text-transform: none;
	font-size: 15px;
    color: #666;
    bottom: 15px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.special01 figure:hover img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

.special01 figure:hover h2 {
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
    opacity: 0;
}
.special01 figure:hover p, .special01 figure:hover h3 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.mocontent { display: none; }
.motx{ display: none; }
.mobg{ display: none; }

/*==================== mobile ======================*/
@media screen and (max-width: 749px) {
    
    .mainImg .maintitle{ display: none; }
    
    .mainImg{ width: 100%; min-width: 100px; height: 295px; min-height: 295px; text-align: center; position: relative; z-index: 1; padding-top: 55px; }
    .mainImg .swiper-slide{ width: 100%; height: 265px; overflow: hidden;}
    .mainImg .control{ width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; padding: 5px 0; box-sizing: border-box; }
    
    .mainImg .swiper-button-prev{ width: 35px; height: 35px; position: absolute; top: -125px; left: 7px;}
    .mainImg .swiper-button-next{ width: 35px; height: 35px; position: absolute; top: -125px; right: 7px;}
    
    .mainImg .control .swiper-scrollbar{ width: 75%; height: 5px; background-color: #e0e0e0; position: absolute; left: 7%;  bottom: 14px; padding: 0; overflow: hidden; z-index: 100; }
    .mainImg .swiper-scrollbar-drag{ background-color: #666;}
    
    .mainImg .swiper-number-start{ position: absolute; bottom: 5px; left: 5px; color: #666; font-family: Montserrat; font-size:17px; font-weight: 600;z-index: 100; }
    .mainImg .swiper-number-end{ position: absolute;  bottom: 5px; left: 85%; color: #666; font-family: Montserrat; font-size:17px; font-weight: 600;  z-index: 100;}
    
    .mainImg .control .swiper-play,.mainImg .control .swiper-paus { width:60px; height:60px; text-align: center; line-height: 60px; margin: 0; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; color:#666; background:none; position: absolute; right: -10px; top: -14px; }
    
    /* context */
    .context{ padding: 60px 0 30px;}
    .context img{ padding: 15px 0;}
    .context > h3{ font-size: 26px; font-weight: 800; font-family: Montserrat; color: #333; }
    .text > img{ width: 90%; height: 120px; object-fit: cover; padding-bottom: 30px;}
    .text .backBox1 { display:none; }
    .text .backBox2 { display:none; }

    
    /* maincontent */
    .maincontent{ position: relative; width: 100%; text-align: center;  }
    .maincontent > img{ width: 100%; }
    .text{ border-left:0; border-right:0; border-top: 25px solid #d9a76a; border-bottom: 25px solid #d9a76a; background-image: none;  }
    .maincontent .text p{ font-family: NotoSansCJKkr;  font-size: 14px; color: #666; line-height: 24px; padding: 0 10px 0;}
    .pctx{ padding-bottom: 60px;}
    
    
    /* mocontent */
    .content{ display: none; }
    
    .mocontent{ display: block; width: 100%; height: 500px;  text-align: center; position: relative; }
    .mocontent h3{ font-size: 35px;}
    .mocontent .context p{ font-size: 14px;}
    
    .mocontent .swiper-container{ position: relative; width: 100%; height: 230px; overflow: hidden; }
    
    .mocontent .swiper-slide { height: 200px; text-align: center; font-size: 18px; background-repeat: no-repeat; background-position: center; background-size: cover; }
    
    .mocontent .swiper-button-prev:after{ content: ''; }
    .mocontent .swiper-button-next:after{ content: ''; }
    .mocontent .swiper-button-prev{ position: absolute; width: 35px; height: 35px; background-image: url(../img/roomdetail/left.png); background-size: cover; left: 7px; top: unset;  bottom: 28%;}
    .mocontent .swiper-button-next{ position: absolute; width: 35px; height: 35px; background-image: url(../img/roomdetail/right.png); background-size: cover; right: 7px; top: unset; bottom: 28%; }
    
    .mocontent .swiper-number-start{ position: absolute; bottom: 0; left: 10px; color: #666; font-family: Montserrat; font-size:20px; font-weight: 600; z-index: 100; }
    .mocontent .swiper-number-end{ position: absolute;  bottom: 0; left: 90%; color: #666; font-family: Montserrat; font-size:20px; font-weight: 600;  z-index: 100; }
    .mocontent .swiper-scrollbar{ width: 75%; height: 5px; background-color: #e0e0e0; left: 0; right: 0; margin: 0 auto 6px; z-index: 100; }
    .mocontent .swiper-scrollbar-drag{ background-color: #666; width: 100px;}
    
    
    .motext{ width: 100%; height: 100px; position: absolute; bottom: 0; box-sizing:  border-box; color: #fff; font-size: 13px; padding: 30px 0; }
    .motitle{ font-family: Montserrat; font-size: 19px; font-weight: 600; }  
    
}

/*==================== iphone5 & se ======================*/
@media screen and (max-width: 320px){
    .maincontent .text p{ font-size: 12px; line-height: 22px;}
    .mocontent .context h3{ font-size: 24px;}
    .mocontent .context p{ font-size: 12px;}
    .mocontent .swiper-button-prev{ position: absolute; width: 35px; height: 35px; background-image: url(../img/roomdetail/left.png); background-size: cover; left: 7px; top: 280px; }
    .mocontent .swiper-button-next{ position: absolute; width: 35px; height: 35px; background-image: url(../img/roomdetail/right.png); background-size: cover; right: 7px; top: 280px; }
    
}