@charset "utf-8";

/*메인 섹션1*/
.section1 {/*background:url('http://kmmc-sian.woobi.co.kr/img/main/bg.png') background:#f3f3f3;*/ padding:0px 0 0px 0;}
.section1 .inner {position:relative; background:#fff}
.section1 .inner:after {clear:both; content:''; display:block}
.section1 .inner .slideWrapper {position:relative}
.section1 .inner .slideWrapper button.slick-arrow {position:absolute; border:none; background:none; padding:0; margin:0; font-size:45px; font-weight:500; color:#333; cursor:pointer; z-index:750; top:50%; margin-top:-39px; transition:all 0.3s ease; opacity:0.66}
.section1 .inner .slideWrapper button.slick-arrow:hover {opacity:1}
.section1 .inner .slideWrapper button.slick-prev {left:50px}
.section1 .inner .slideWrapper button.slick-next {right:50px}
.section1 .inner .slideWrapper > ul.slick-dots {position:absolute; bottom:10%; left:21.5%; margin:0 -3px}
.section1 .inner .slideWrapper > ul.slick-dots:after {clear:both; content:''; display:block}
.section1 .inner .slideWrapper > ul.slick-dots > li {float:left; padding:0 3px}
.section1 .inner .slideWrapper > ul.slick-dots > li button {margin:0; padding:0; font-size:0; width:25px; height:1px; background:#e2e2e2; border:none; transition:all 0.3s ease}
.section1 .inner .slideWrapper > ul.slick-dots > li.slick-active button {background:#000}
.section1 .inner .slideWrapper:after {clear:both; content:''; display:block}
.section1 .inner .slideWrapper .slideItem {float:left}

.section1 .inner .imgWrapper {float:right; width:50%}
.section1 .inner .imgWrapper:after {clear:both; content:''; display:block}
.section1 .inner .imgWrapper .photoBox {position:relative; overflow:hidden}
.section1 .inner .imgWrapper .photoBox:after {clear:both; content:''; display:block}
.section1 .inner .imgWrapper .photoBox .roomPhoto {float:right}
.section1 .inner .imgWrapper .photoBox .roomPhoto img {display:block; width:100%}



.section1 .inner .txtWrapper {float:left; width:50%}
.section1 .inner .txtWrapper .roomInfoBox {position:relative; overflow:hidden; padding:80px 80px 0 0}
.section1 .inner .txtWrapper .roomInfoBox:after {clear:both; content:''; display:block}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo {/*float:left;*/ text-align:right}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle h4 {font-family: 'NanumSquare';font-size:50px; font-weight:800; color:#000; letter-spacing: -3px}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle span {font-size:24px; font-weight:500; color:#333; letter-spacing:-1px;}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt {padding-top:25px}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p {font-family: 'Nanum Myeongjo';font-size:15px; font-weight:600; color:#555; line-height:2; word-break:keep-all; padding-bottom:25px text-align:right}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon {width:90%; margin:0 auto; background:#f3f3f3; padding:20px 30px}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul {margin:0 -5px; overflow:hidden}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul:after {clear:both; content:''; display:block}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li {float:left; width:20%; padding:0 5px; text-align:center}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li .iconBox {}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li .iconBox i {font-size:26px; font-weight:500; color:#b1b1b1; padding-bottom:5px}
.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li span {font-size:17px; font-weight:500; color:#727272; letter-spacing:-1px; font-family:'NanumSquare'}


/*미디어 쿼리*/
@media screen and (max-height:980px) {
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left {padding:20px 45px}
}
@media screen and (max-width:1440px) {
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left {padding:0 20px; height:220px; overflow:hidden}
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox {padding-bottom:50px}
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left h4 {font-size:18px; padding-top:30px}
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left p {font-size:13px}
    #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .right {height:220px; overflow:hidden}
    #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .right .descBox {}
    #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .right .descBox > ul {height:314px; overflow:hidden; padding:20px 25px}
    #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .left .title > ul > li .descBox {padding:35px 10px}
    #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .left .title > ul {height:334px; overflow:hidden}
	.section1 .inner .txtWrapper {/*padding:30px 0px 0px 0px*/}
	.section1 .inner .txtWrapper .roomInfoBox {padding:20px 60px}
    .section1 .inner .slideWrapper button.slick-prev {left:30px}
    .section1 .inner .slideWrapper button.slick-next {right:30px}
}
@media screen and (max-width:1366px) and (min-width:650px) {
 .bx-viewport {height:100% !important}
}
@media screen and (max-width:1366px) {
 #video_wrap .right .tel_box {width:100%}
 /* 메인비디오커버 */
 #mainVisual .video .inner .mainPopup {width:80%; left:-1240px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left {padding:45px 25px; height:261px; max-height:261px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left h4 {font-size:17px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .left p {font-size:11px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .topBox .right {max-height:261px; height:261px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .right .descBox > ul {padding:32px 60px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .left .title > ul > li .descBox > p {font-size:11px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .right .descBox > ul > li {font-size:11px}
 #mainVisual .video .inner .mainPopup .popInner .topSection .bottomBox .left .title > ul > li .imgBox {max-height:164px}
 /*header*/
 #header .inner {padding:0 50px}
 /*main slide*/
 .bx-wrapper {box-shadow:none}

 
 /*section1*/
 .section1 .inner .txtWrapper {/*padding:50px 0px 0px 0px*/}
 .section1 .inner .txtWrapper .roomInfoBox {padding:20px 60px}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle h4 {font-size:35px}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle span {font-size:17px}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p {font-size:15px}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon {/*width:100%*/}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li span {font-size:14px}
 .section1 .inner .slideWrapper button.slick-next {right:-50px}
 .section1 .inner .slideWrapper button.slick-prev {left:-50px}
 
 
}
@media screen and (max-width:1280px) {
 /*header*/
 #header {}
 #mainVisual .openPopup {display:none}
 #mainVisual .video .inner .mainPopup {display:none}

 .section1 .inner .txtWrapper {/*padding:40px 0px 0px 0px*/}
 .section1 .inner .txtWrapper .roomInfoBox {padding:0; padding-top:70px}
 .section1 .inner .txtWrapper .roomInfoBox {position:relative; overflow:hidden; padding:10px 50px}
 .section1 .inner .slideWrapper > ul.slick-dots {bottom:8%; left:20%}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon {padding:20px 20px}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li span {font-size:40px}
}
@media screen and (max-width:1024px) {

 /* section1 */

 .section1 .inner .txtWrapper {padding:10px 0px 0px 0px}
 .section1 .inner .slideWrapper > ul.slick-dots {bottom:25%; left:20%}
 .section1 .inner .txtWrapper .roomInfoBox {padding:10px 20px}
 /*.section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p {padding-bottom:17px}*/
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p {font-family: 'Nanum Myeongjo';font-size:14px; font-weight:600; color:#555; line-height:1.5; word-break:keep-all; padding-bottom:45px }
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li span {font-size:10px}

}
@media screen and (max-width:980px) {
 
 /*section1*/
 .section1 {padding-top:0px}
 .section1 .inner .imgWrapper {float:none; width:100%}
 .section1 .inner .txtWrapper {float:none; width:100%}
 .section1 .inner .imgWrapper .photoBox .roomPhoto {float:none}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo {float:none}
 .section1 .inner .slideWrapper button.slick-next {right:50px}
 .section1 .inner .slideWrapper button.slick-prev {left:50px}

}
@media screen and (max-width:812px) {
#mainSlider .sliderArea ul.slick-dots {top:60%}    
.section2 .sliderArea2 ul.slick-dots {top:60%}
}
@media screen and (max-width:768px) {
.slick-dots {display:none !important}
 #mainSlider .sliderArea ul.slick-dots {top:38%}    
 .section2 .sliderArea2 ul.slick-dots {top:38%}
 #mainVisual .video {height:60vh}
 #mainVisual .videoTitle h3 {font-size:40px}
 #mainVisual .videoTitle p span {font-size:20px}
 .section1 {padding-top:40px}
 .section1 .inner .slideWrapper button {width:40px; height:40px; line-height:42px; text-align:center; color:#fff !important; font-size:22px !important; background:#333 !important}
 .section1 .inner .slideWrapper button.slick-prev {left:0}
 .section1 .inner .slideWrapper button.slick-next {right:0}
 .section1 .inner .imgWrapper {float:none; width:100%}
 .section1 .inner .txtWrapper {float:none; width:100%}
 .section1 .inner .imgWrapper .photoBox .roomPhoto {float:none}
 .section1 .inner .txtWrapper .roomInfoBox .roomInfo {float:none}
 .section2 .postSlider .innerWrap .imgWrap ul li {padding:0}
}
@media screen and (max-width:640px) {
 
 .section1 .inner .box {width:76%; margin-bottom:30px}
 .section1 .inner .box a .img_area {max-height:300px}
 .section1 .inner .box a .desc h4 {padding:10px 0 0}
 .section1 .inner .box a .desc h5 {padding:20px 0}
 .section2 .postSlider .innerWrap .imgWrap {width:80%; position:relative}
 .section2 .postSlider .innerWrap .txtWrap {width:80%}
 .section2 .postSlider .innerWrap .imgWrap a.control {width:50px; height:50px; line-height:50px}
 .section2 .postSlider .innerWrap .txtWrap .box_info ul li {width:100px; height:100px; line-height:100px; margin:3px 1px}
 .section2 .postSlider .innerWrap .imgWrap a.control i {font-size:25px; line-height:50px}
 /*하단 동영상*/
 #video_wrap .right {width:100%}
 #video_wrap .right span.middle {font-size:11px}
 #video_wrap .right p {font-size:11px}
 #video_wrap .right .tel_box {width:85%}
}
/* 저해상도 및 모바일 사이즈 */
@media screen and (max-width:580px) {
    #mainVisual .video {height:100vh}
    #mainSlider .sliderArea .slider {height:35vh}
    #mainSlider .sliderArea ul.slick-dots {top:60%}
    #mainSlider .sliderArea .slider .slideTxt h4 {font-size:20px}
    #mainSlider .sliderArea .slider .slideTxt p {font-size:15px; line-height:1.55}
    .section1 {padding:50px 20px}
    .section1 .inner .txtWrapper {padding:0}
    .section1 .inner .txtWrapper .roomInfoBox {padding:40px 25px}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle h4 {font-size:20px; padding-bottom:10px}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTitle span {font-size:14px}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p {font-size:13px; word-break:keep-all; line-height:1.55}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoTxt p > br {display:none}
    
    .section2 .sliderArea2 .slider {height:35vh}
    .section2 .sliderArea2 ul.slick-dots {top:60%}
    .section2 .sliderArea2 .slider .slideTxt h4 {font-size:20px}
    .section2 .sliderArea2 .slider .slideTxt p {font-size:15px; line-height:1.55}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul:after {clear:both; content:''; display:block}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li {float:none; width:100%; padding-top:10px}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li:after {clear:both; content:''; display:block}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li .iconBox {float:left; width:50%}
    .section1 .inner .txtWrapper .roomInfoBox .roomInfo .infoIcon > ul > li:first-child {padding-top:0}
}