/* PC 기본 */
/*mainImg*/
.mainImg{ width: 100%; min-width: 100px; height: 1080px; min-height: 700px; text-align: center; position: relative; z-index: 1;}
.mainImg .swiper-container{ width: 100%; height: 100%; }
.mainImg .swiper-slide{ width: 100%; height: 100%; overflow: hidden;}
.mainImg .swiper-slide img{ width: 100%; height: 100%;  object-fit: cover; }
.mainImg .control{ width: 550px; height: 80px; position: absolute; bottom: 50px; right: 100px; padding: 10px 0; }
.mainImg .swiper-button-prev:after{ content: ''; }
.mainImg .swiper-button-next:after{ content: ''; }
.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-size: cover; right: 100px; background-image: url(../img/roomdetail/right.png); }
.mainImg .control .swiper-scrollbar{ width: 240px; height: 5px; background-color: rgba(255,255,255,0.5); 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 0; }
.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;}

.line{ width: 1px; height: 80px; background-color: #333; margin: 30px auto; display: inline-block;}
.mainpctext > p{ font-family: NotoSansCJKkr; font-size: 16px; color: #666; line-height: 33px; padding: 0 20%; }
.mainpctext{ padding-bottom: 120px; }

/* content */
.mocontent{ display: none; }
.pccontent{ width: 100%; padding-bottom: 100px; position: relative; }
.pccontent .context{ width: 100%; height: auto; text-align: center; padding-bottom: 60px;}

.pccontent .swiper-container{ position: relative; width: 80%; height: 400px; overflow: hidden;}

.pccontent .swiper-slide{ width: 100%; height: 260px; position: relative; background-size: cover; }
.pccontent .swiper-slide figure{ width: 100%; height: 260px; margin-bottom: 20px; overflow: hidden;}
.pccontent .swiper-slide img{ width: 100%; height: 10px; object-fit: cover; }
.pccontent a{ display: block; width: 100%; height:100%; position: relative; }
.pccontent .overbg{ width: 100%; height: 260px; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s; background-image: url(../img/travel/9.png); background-repeat: no-repeat; background-position: center; }
.pccontent a:hover img, .pccontent a:focus img{ transform: scale(1.1,1.1); }
.pccontent a:hover .overbg, .pccontent a:focus .overbg{ opacity: 1; }



.pccontent .swiper-button-prev:after{ content: ''; }
.pccontent .swiper-button-next:after{ content: ''; }
.pccontent .swiper-button-prev{ position: absolute; width: 60px; height: 60px; background-image: url(../img/roomdetail/left.png); background-size: cover; left: 3%; top: 520px; }
.pccontent .swiper-button-next{ position: absolute; width: 60px; height: 60px; background-image: url(../img/roomdetail/right.png); background-size: cover; right: 3%; top: 520px; }
.pccontent .swiper-number-start{ position: absolute; bottom: -5px; left: 10px; color: #333; font-family: Montserrat; font-size:18px; font-weight: 600; z-index: 100; }
.pccontent .swiper-number-end{ position: absolute;  bottom: -5px; right: 5px; color: #333; font-family: Montserrat; font-size:18px; font-weight: 600;  z-index: 100;}
.pccontent .swiper-scrollbar{ width: 90%; height: 5px; background-color: #e0e0e0; left: 0; right: 0; margin: 0 auto; z-index: 100; }
.pccontent .swiper-scrollbar-drag{ background-color: #666; width: 100px;}
.motext{ position: relative; bottom: -280px; color: #333; }
.motext .motitle{ font-size: 15px; color: #d9a76a; }
.motext p{ font-size: 20px; color: #333; font-weight: 600; padding-top: 5px;}





@media screen and (max-width: 749px) {
    /* mainImg */
    .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: -95px; left: 7px;}
    .mainImg .swiper-button-next{ width: 35px; height: 35px; position: absolute; top: -95px; right: 7px;}
    
    .mainImg .control .swiper-scrollbar{ width: 75%; height: 5px; background-color: #e0e0e0; position: absolute; left: 7%;  bottom: 15px; padding: 0; overflow: hidden; z-index: 100; }
    .mainImg .swiper-scrollbar-drag{ background-color: #666;}
    
    .mainImg .swiper-number-start{ position: absolute; bottom: 7px; left: 5px; color: #666; font-family: Montserrat; font-size:17px; font-weight: 600;z-index: 100; }
    .mainImg .swiper-number-end{ position: absolute;  bottom: 7px; left: 83%; 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: -15px; }
    
    
    /* maincontent */
    .maincontent{ position: relative; width: 100%; text-align: center;  }
    .text{  height: 100%; width: 100%; text-align: center; border-left:0; border-right:0; border-top: 25px solid #d9a76a; border-bottom: 25px solid #d9a76a; background-image: none; text-align: center; overflow: hidden;}
    .text .backBox1 { display:none; }
    .text .backBox2 { display:none; }
    .context{ padding-top: 50px; box-sizing: border-box;}
    .maincontent .context h3{ padding-top: 0; font-size: 26px; font-weight: 800; font-family: Montserrat; color: #333; }
    .context img{ width: 170px; padding: 10px 0;}
    .context p{ font-size: 13px; line-height: 24px; }
    .context .car{ font-size: 13px;}
    .text > p{ font-family: NotoSansCJKkr; font-size: 14px; color: #666; line-height: 24px; padding: 0 12px; }
    .line{ height: 30px;  margin: 20px auto; }
    .mainpctext{ padding-bottom: 60px;}
    .mainpctext > p{ padding: 0 20px;}
    
    /* mocontent */
    .pccontent{ display: none; }
    .mocontent{ display: block; width: 100%; padding-bottom: 50px; position: relative; }
    .mocontent .context{ width: 100%; height: auto; text-align: center; padding-bottom: 30px;}
    .mocontent .context h3{ padding-top: 0; font-size: 35px; font-weight: 800; font-family: Montserrat; color: #333; }

    .mocontent .swiper-container{ position: relative; width: 90%; height: 255px; overflow: hidden;}

    .mocontent .swiper-slide{ width: 100%; height: 255px;}
    .mocontent .swiper-slide img{ width: 100%; height: 170px; object-fit: cover; transition: 0.3s; }
    .mocontent .swiper-slide figure{ width: 100%; height: 170px; margin-bottom: 20px; overflow: hidden;}
    .mocontent a{ display: block; width: 100%; position: relative; }
    .mocontent .overbg{ width: 100%; height: 170px; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s; background-image: url(../img/travel/9.png); background-repeat: no-repeat; background-position: center; }



    .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: 5px; top: 335px; }
    .mocontent .swiper-button-next{ position: absolute; width: 35px; height: 35px; background-image: url(../img/roomdetail/right.png); background-size: cover; right: 5px; top: 335px; }
    .mocontent .swiper-number-start{ position: absolute; bottom: 0; left: 10px; color: #666; font-family: Montserrat; font-size:17px; font-weight: 600; z-index: 100; }
    .mocontent .swiper-number-end{ position: absolute;  bottom: 0; right: 5px; color: #666; font-family: Montserrat; font-size:17px; font-weight: 600;  z-index: 100;}
    .mocontent .swiper-scrollbar{ width: 80%; height: 5px; background-color: #e0e0e0; left: 0; right: 0; margin: 0 auto 5px; z-index: 100; }
    .mocontent .swiper-scrollbar-drag{ background-color: #666; width: 100px;}

    .mocontent .textarea p{ font-size: 13px; color: #d9a76a; }
    .mocontent .textarea h3{ font-size: 15px; color: #333; font-weight: 600; padding-top: 5px;}

    
    .pctx{ display: none; }
    .motx{ display: block; padding: 0;}
    
    .content .swiper-container{ position: relative; width: 90%; height: 520px; overflow: hidden;}
}

/*==================== iphone5 & se ======================*/
@media screen and (max-width: 320px){
    .maincontent .text p{ font-size: 13px; line-height: 22px;}
    .line{ margin: 10px auto; }
    .mocontent .context h3{ font-size: 24px;}
    .mocontent .context p{ font-size: 13px;}
    
}