/* 반응형 */


@media screen and (max-width: 1400px) {
    
	
}

@media screen and (max-width: 1200px) {
	html.fix, body.fix {height: 100%; overflow: hidden;}
	.wrap1200 {width: 100%;}
	.sub-container .wrap1200,
	.board-container .wrap1200 {padding: 0 20px;}
	#quickArea {width: 100%;}
	#bookArea {overflow: inherit !important;}
    .nav {width: 1000px;}
    .nav ul .menu {min-width: inherit; font-size: 15px; padding: 0 20px;}
    .main_section .bx-wrapper ul li {padding: 0 50px;}
    .main_section .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item {padding: 0;}
    p.title {font-size: 60px;}
    .main_section .con_room .con_info .info_desc dt.title {font-size: 40px;}
	.main_section .con_room .con_info .info_desc dd {font-size: 15px;}
	.main_section .con_room .con_info .info_desc dd span {font-size: 20px; margin-bottom: 20px;}
	.main_section .con_room .con_info .info_desc .view {padding: 5px 15px; font-size: 12px;}
	.main_section .main_acco .bx-pager {right: 24%; bottom: 20%;}
	.main_section .main_fac .bx-pager {right: 70%;}
	
	.outside .prev {left: 0;}
	.outside .next {right: 0;}
}


@media screen and (max-width: 1024px) {
	
	/* intro */
	#introWrap a {width: 100%; height: 50%; position: inherit;}
	#introWrap .introImg {width: 50%; height: 100%; }
	
    #header .m_line {overflow: hidden; height: 100%; padding: 16px 20px;}
    .logo {display: block; margin: 10px auto;}
	.m_line .rMenu {float: right;}
	.m_line .rMenu .rsvn, .m_line .rMenu .lang_wrap {display: none;}
	.m_line .rMenu .lang_list, .m_line .side_menu {display: block;}
	.m_line .side_menu .close_menu {display: none;}
	.nav {width: 100%; position: fixed; height: calc(100% - 120px); top: 120px; z-index: 9999; background: #fff; padding: 20px 80px;}
	.nav.over {height: 0; display: none;}
	.nav .nav_m {margin: 0;}
	.nav .nav_m .menu {display: block; width: 100%; height: auto; padding: 0; background: #fff; margin-left: 0!important; text-align: center;}
	.nav .nav_m .menu > a {text-align: left; font-size: 30px; font-weight: 600; width: 100%; margin-bottom: 0; padding: 0; color: #2a2a2a;}
    /* .nav .nav_m .menu.toggle > a {background: url(/Template05_common/images/homepage/common/m_nav_up.png) right 18px center no-repeat;} */
    .nav .nav_m .menu .nav2 {display: none;position: relative; height: auto; overflow: hidden; top: auto;}
    .nav .nav_m .menu .nav2 .nav2-inner ul {height: 100%; line-height: 40px; padding-left: 0;}
    .nav .nav_m .menu .nav2 .nav2-inner ul li {display: block; text-align: left; margin-bottom: 0; font-size: 20px; line-height: 2.5em;}
    .nav .nav_m .menu .nav2 .nav2-inner ul li a {color: #7e7e7e;}
    
    .nav .language_list {display: block; text-align: left; padding: 40px 0;}
	.nav .language_list li {display: inline-block; color: #654f30; font-size: 26px; font-weight: 600;}
	.nav .language_list li:after {content: ''; display: inline-block; width: 1px; height: 14px; background: #9d9d9d; margin: 0 12px 0 15px; vertical-align: -2px;}
	.nav .language_list li:last-child:after {display: none;}
    
    .main_section .con_room .con_info {padding-top: 25px;}
	.main_section .con_room .con_info .info_desc dt.title {font-size: 32px;}
	.main_section .con_room .con_info .info_desc dd span {font-size: 18px; margin-bottom: 10px;}
	.main_section .con_room .con_info p.info_acc:after {height: 20px;}
	.main_section .main_banner {height: 600px;}
	.main_section .banner_info {padding: 100px 0 50px;}
	.main_section .banner_info p {font-size: 24px;}
	.main_section .banner_btn ul a {width: 24%;}
	.main_section .banner_btn ul li {font-size: 18px;}
	
	#gnbArea .gnbIns ul {width: 80%;}
	
    .sub-info{padding: 50px 0 20px}
    .sub-info > ul > li {width: 100%; float: none;}
    .sub-info ul li.con h3 {margin: 0 0 20px;}
    .sub-info ul li.con figure {border: none; margin: 30px 0 0; padding: 0;}
 	.amenity-area ul {display: block;}
 	.amenity-area ul li {width: 100%; float: none;}
 	.amenity-area ul li:last-child {margin-bottom: 0;}
 	 
 	.about_wrap .about_img ul li {height: 300px;}
 	 
 	.otherRoom .outside .prev {left: 5%;}
 	.otherRoom .outside .next {right: 5%;}
}

@media screen and (max-width: 850px) {
	.main_section .con_room .con_info {padding: 0;}
	.main_section .con_room .con_info .info_desc dd {margin-bottom: 15px;}
}

@media screen and (min-width: 640px) {
    .hidden {display: none;}
}

@media screen and (max-width: 768px) {
	#introWrap .introText {top: 40%;}
	#introWrap .intro1 .introText {right: 20px;}
	#introWrap .intro2 .introText {left: 25px;}
	#introWrap .introText h2 {font-size: 40px; margin: 0;}
	#introWrap .introText span {width: 86px; background-size: contain;}
	
	.main_section.section_acco {padding-top: 250px;}
	.main_section .bx-wrapper ul li {padding: 0 30px;}
	.main_section .con_info .info_desc dt.title {font-size: 30px; margin-bottom: 0;}
	
	.nav ul .menu .nav2 .nav2-inner ul li {display: block; width: 100%; text-align: left; line-height: 1.5em;}
}

@media screen and (max-width: 640px) {
    
    body {font-size: 14.5px;}
    .m_hidden {display: none;}
    .m_block {display: block;}
    .board-container {padding-bottom: 50px;}
    h3 {font-size: 25px;}
    
    /* nav */
    .nav .nav_m .menu {line-height: 60px;}
    .nav .nav_m .menu > a {font-size: 22px;}
    .nav .nav_m .menu .nav2 .nav2-inner ul li {font-size: 17px;}
    .nav ul .menu .nav2 .nav2-inner ul {line-height: 30px;}
    
    .nav .language_list {padding: 20px 0;}
    .nav .language_list li {font-size: 20px;}
    
    /* main */
    .main_visual_title {top: 32%;}
    .main_visual_title p {font-size: 18px; font-weight: 200;}
    p.title {font-size: 55px;}
    .main_visual {height: 750px !important;}
    .main_visual .bx-viewport {height: 750px !important;}
    .main_visual .bxslider li {min-height: inherit; height: 750px !important;}
    
    .main_section {height: auto;}
    .main_section .con_room > div {float: none; width: 100%;}
    .main_section .con_room .con_info {padding-top: 30px;}
    .main_section .con_room .con_info {margin: 0;}
    .main_section .con_room.con_fac .con_info {margin: 0;}
    .main_section .con_room .con_info p.info_acc {display: none;}
    .main_section .main_acco .bx-pager {right: 43%; bottom: 5%;}
    .main_section .bx-wrapper ul li {padding: 0 50px;}
    .main_section .main_banner {height: 500px;}
    .main_section .banner_info {padding: 60px 0;}
    .main_section .banner_info p {font-size: 22px;}
    .main_section .banner_info p.title {font-size: 26px; letter-spacing: 2px;}
    .main_section .banner_btn ul a {width: 30%; margin-right: 2%; height: 180px;}
    .main_section .banner_btn ul li {padding-top: 60px;}
    
    .main_section .bx-wrapper .bx-viewport {height: 100% !important;}
   
    .bx-wrapper .bx-pager.bx-default-pager a, 
    .bx-wrapper .bx-pager.bx-default-pager a:hover,
	.bx-wrapper .bx-pager.bx-default-pager a.active,
	.bx-wrapper .bx-pager.bx-default-pager a:focus {background-size: 80%;}
    
    /* sub */
    
    #gnbArea .gnbIns ul {width: 100%;}
    #gnbArea .gnbIns ul li {font-size: 13px;}
    #gnbArea .gnbIns ul li::after {right: -15px; top: 2px; background-size: 80%;}
    #gnbArea .gnbIns ul li img {width: 25%;}
    
    .sub_visual {height: 440px !important;}
    .subTitle {margin-top: 40px;}
    .subTitle h2 {font-size: 24px;}
    .subTitle h2:after {height: 50px; margin: 15px auto;}
    .subTitle.loc_title p {font-size: 16px; padding-top: 15px;}
    
    .sub-info {padding: 30px 0;}
    .sub-info.sub-din {padding: 20px 0 70px;}
    .sub-info ul li.tit p {margin: 0; font-size: 16px;}
    .sub-info ul li.tit a.rsvnBtn {width: 100%;}
    .sub-info ul li.tit h2 {margin-bottom: 5px;}
    .sub-info ul li.con em {width: 85px;}
    .sub-info ul li.con em i {font-size: 16px;}
    .sub-info ul li.con ul.room span {font-size: 15px;}
    .amenity-area {padding: 0 20px; font-size: 15px; margin: 20px 0 70px;}
    .amenity-area .tit {font-size: 18px;}
    .amenity-area .list {padding: 25px 0;}
    .amenity-area .list ul li span {display: block;}
    
    .otherRoom .otherRoom_slide .bx-viewport {height: 220px !important;}
    .otherRoom .otherRoom_slide ul li,
    .otherRoom .otherRoom_slide img {height: 220px;}
    .otherRoom .outside .prev a,
    .otherRoom .outside .next a {background-size: 70%;}
    .otherRoom ul li span {top: 30%;}
    .otherRoom ul li span u {display: block; font-size: 30px; margin-bottom: 6%; line-height: 1;}
    .otherRoom ul li span em {display: none;}
    
    .outside_wrap {width: 100%; margin-top: -200px;}
    .outside {width: 100%; height: 40px; top: 30%;}
    .outside .prev a,
    .outside .next a {width: 40px; height: 40px; background-size: 100%;}
    
    .about_wrap {font-size: 16px;}
    .about_wrap .about_con ul li {float: none;}
    .about_wrap .about_con ul li.about_txt01 {width: 100%; padding-bottom: 30px;}
    .about_wrap .about_con ul li.about_txt02 {width: 100%;}
    .about_wrap .about_con ul li h3:after {bottom: -15px;}
    .about_wrap .sub-info.about_img {padding: 30px 0;}
    .about_wrap .about_img ul li {float: none; width: 100%; margin-bottom: 30px;}
    .about_wrap span.img {height: 300px;}
    
    
    /* location */
    
    .loc-area {margin: 50px 0 80px;}
    .loc-area ul li {float: none; width: 100%; font-size: 16px; margin-bottom: 40px;}
    .loc-area ul li dl {margin-top: 10px; font-size: 14px;}
    .loc-area ul li span:after {left: -15px;}
    .mapH {height: 600px;}
    
    /* footer */
    
    #footer {padding: 20px 5px;}
    #footer .footer_info {font-size: 12.5px; padding: 10px 0 20px;}
    #footer p.copyright {font-size: 13px;}
    #footer .company_info {font-size: 13px; padding: 20px 0 10px;}
    #footer .company_info ul li {margin: 0 10px 5px 0;}
    
    .gallery-thumbs-container {margin: 10px 0 0;}
    #gallery-thumbs .thumb-item {margin-right: 10px;}
}

@media screen and (max-width: 470px) {
	
	p.title {font-size: 45px;}
	.logo {background-size: 40%;}
	
	.main_visual {height: 580px !important;}
    .main_visual .bxslider li {min-height: inherit; height: 580px !important;}
	
	.main_section .main_banner {height: 450px;}
	.main_section .banner_btn ul a {height: 130px;}
    .main_section .banner_btn ul li {padding-top: 40px; border: 2px solid #fff; font-size: 16px;}
    .main_section .banner_btn ul li:hover {border: 2px solid #ead8a9;}
    .main_section .banner_btn ul li span {width: 60px; height: 7px;}
    .main_section .banner_info {padding: 100px 0 30px;}
    .main_section .banner_info p {font-size: 20px;}
    
    .nav {padding: 10px 40px; top: 80px; height: calc(100% - 80px);}
    .m_line .side_menu span {width: 45px; height: 45px;}
    .m_line .side_menu span.open_menu {background-size: 50%; top: -45px; right: -10px;}
    .m_line .side_menu span.close_menu {background-size: 50%; top: -30px; right: 0px;}
    
    .sub-info ul li.tit h2,
    .about_wrap .about_con ul li h3 {font-size: 21px;}
    
    .about_wrap span.img,
    .about_wrap .about_img ul li {height: 220px;}
    .sub-info ul li.con ul.room li {float: none; width: 100%;}
    
}

@media screen and (max-width: 340px) {
    .nav ul .menu {font-size: 19px; margin-bottom: 10px;}
    .nav ul .menu .nav2 {padding: 5px 0;}
    
    .m_line .side_menu span {width: 45px; height: 45px;}
    
    .main_visual.fac .main_visual_title p {font-size: 19px;}
    .main_visual.fac .main_visual_title.fac p.sub_title, .main_visual.loc .main_visual_title.fac p.sub_title {font-size: 30px !important;}
    .main_visual.fac .main_visual_title.fac .info, .main_visual.loc .main_visual_title.fac .info {font-size: 14px;}
    .fac_info {padding: 20px 0;}
}