/*-----------------------------------------------------------------------------------*/ /* for mobile layout /*-----------------------------------------------------------------------------------*/ @media screen and (max-width : 979px) { /*---top메뉴---*/ #headerWrap #topMenu .Mauto {width:100%;margin:0;} /* header */ #headerWrap {margin-top:0;height:85px;} #header #btnGnb { display:block; } #header { width:100%;height:85px; } #header h1{ float:none; display:block; margin:0 0 0 15px; padding-top:10px; } #header h1 img{width:auto;height:60px; margin-top:0; } #gnb { display:none; } #mGnb { float:none; display:block; position:fixed; top:0; right:-100%; z-index:5000; width:320px; padding:0 0 5px 0; height:100%; overflow-y:scroll; background-color:#32394a; border-left:1px solid #3e4559; } #mGnb ul li { float:none; padding:0; margin:0; } #mGnb ul li a { display:block; overflow:hidden; color:#fff; padding:15px 0 15px 15px; font-size:1.1em; } #mGnb ul li a.topDepth { color:#ddd; text-shadow: 0 -1px 2px #222;background:#222;font-weight:bold; } #mGnb ul li a.topDepth:hover, #mGnb ul li a.topDepth:focus, #mGnb ul li a.topDepth:active, #mGnb ul li a.topDepth.on { background:#292f3d; color:#fff; border:0;border-bottom:1px solid #161922;} #mGnb ul li ul { margin:0; background:#32394a; } #mGnb ul li ul.gnbSub { display:none; padding:0; background:#32394a; } #mGnb ul li ul li {display:inline-block;width:145px;padding:0; border-bottom:1px solid #3e4559;font-size:0.85em; } #mGnb ul li ul li.first{width:100%;border-right:none;} #mGnb ul li ul li ul { padding:0; } #mGnb ul li ul li ul li { padding:0; border:0; border-bottom:1px solid #3e4559; } #mGnb ul li ul li ul li:last-child { border:0; } #closeGnb { display:none; position:fixed; top:0; right:320px; z-index:6000; width:50px; height:65px; background:url('./images/closeBtn.png') center center no-repeat #000; font-size:0; text-indent:-1000px; opacity:0.6 } #btnGnb.fix { position:fixed !important; opacity:0.6; } #btnGnb.fix:hover { opacity:1; } /* submenu */ #subMenuWrap { display:block; width:100%; margin-top:10px; } #subMenu ul { padding:0 5px 10px 5px; } /* content */ #contentWrap { padding:0;font-size:1em; font-weight:400;} #subwrap {width:100%;margin:0;padding:0;} #subContentBox .titleArea h2{padding:30px 0 0 100px} #subContentBox .titleArea p {position: static;padding:10px 0 0 105px;} #MobileHeader {display:block;} #mobilePadding {width:100%;padding:25px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;} /* footer */ #footerWrap_mo {display:block;} #footerWrap_pc {display:none;} } @media screen and (max-width : 699px) { /*---top메뉴---*/ #headerWrap #topMenu {display:none;} #headerWrap {margin-top:0;height:85px;} #header { width:100%;height:50px; } #header h1{ float:none; display:block; margin:0 0 0 15px; padding-top:10px; } #header h1 img{width:auto;height:60px; margin-top:0; } /* submenu */ #subMenuWrap { display:none; height:auto; margin-top:5px;} #subMenu ul { padding-bottom:10px; } #subMenu ul li { float:none; margin:0 1px 1px 0; } #subMenu ul li a { display:block; padding:10px; background-color:#222; color:#ddd; border-radius:2px; } #subMenu ul li a:hover, #subMenu ul li a:focus, #subMenu ul li :active { background:#d28a23; color:#fff; } #subMenu ul li ul { position:static; display:block !important; margin:3px 10px 2px 10px; padding:0; } #subMenu ul li ul li { margin:0 0 1px 0; } #subMenu ul li ul li a { padding:10px; background:#ddd; color:#222; border-left:10px solid #222; } /* content */ #contentWrap { padding:0;font-size:1em; font-weight:400;} #subwrap {width:100%;margin:0;padding:0;} #subContentBox .row img{max-width:100%;}/*나중에 지우기*/ #subContentBox .titleArea h2{padding:30px 0 0 100px} #subContentBox .titleArea p {position: static;padding:10px 0 0 105px;} #MobileHeader {display:block;} #mobilePadding {width:100%;padding:25px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;} /* footer */ #footerWrap_mo {display:block;} #footerWrap_pc {display:none;} } /* ****************** ie ***************** */ .ie6 caption { display:none; } .ie6 #header #gnb { width:660px; } .ie6 #footer #footCopyright { padding-top:5px; } #subMenuWrap { display:none !important; } #loading { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; display: block; opacity: 0.7; background-color: #fff; z-index: 99; text-align: center; } #loading-image { position: absolute; top: 50%; left: 50%; z-index: 100; } /*-----------------------------------------------------------------------------------*/ /* 일반 모바일 /*-----------------------------------------------------------------------------------*/ @media screen and (min-width:320px) and (max-width:960px) { #bannerArea {position:static;} /* === content === */ #subContentBox img.introM {width:100%;max-width:100%;} #subContentBox img.introImg {margin:0 0 30px 0 !important;} /* 일반게시판 리스트 */ #subContentBox ul.boardList li {padding:30px 10px;background:#fff url(../images/content/grayBg.gif) no-repeat right top;} #subContentBox ul.boardList li h5 .number{display:inline-block;font-size:1em;width:30px;font-weight:bold;} #subContentBox ul.boardList li h5 a{font-size:1em;font-weight:normal;} #subContentBox ul.boardList li .name {position:absolute;top:8px;right:10px;} #subContentBox ul.boardList li .regdate_cal{position:absolute;top:30px;right:10px;} #subContentBox ul.boardList li .view{position:absolute;top:50px;right:10px;} /*클럽소개*/ #subContentBox .centerBox {width:90%;margin:0 auto;height:auto;clear:left;margin-bottom: 20px;padding-bottom:10% 10% 12%;} /*시설소개*/ #subContentBox .linkHospital {width:90%;margin:0 auto;height:auto;clear:left;margin-bottom: 20px;padding-bottom:10% 10% 12%;} /* 마필소개 */ #subContentBox .fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;} #subContentBox .fancyboxLi li{display:inline-block;margin: 0 0 15px 2%;width:45%;} #subContentBox .fancyboxLi li img{width:100%;} #subContentBox .fancyboxLi li h5{width:100%;} /* 예약안내 */ #stepDL dl {margin:0;} #stepDL dl dt{float:none;width:150px;margin-bottom:15px;} #stepDL dl dd{float:none;width:100%;margin:0 0 30px 15px;} /*승마의 특징과 효과*/ #subContentBox .info img {position:static;width:230px;height:200px;} #subContentBox .info .text {padding:15px 0 0 0;} /* 말의 종류 */ .stepLi_first img{position:static;width:100%;} .stepLi_first .stepC{margin-left:0;padding:10px;} /* 원형 박스 */ .oneBox ul li{width:100%;height:auto;} /*사이트맵*/ #sitemap {height:1200px;} #sitemap div {width:49%;box-sizing:border-box;float:left;height:250px;} #sitemap div ul {border-right:1px solid #ddd;border-bottom:1px solid #ddd;height:230px;padding-top:20px;} #sitemap .color_03 ul, #sitemap .color_07 ul{border-left: 1px solid #ddd;} } @media only screen and (min-width: 768px) and (max-width: 940px) { } @media only screen and (max-width: 768px) { } /*-----------------------------------------------------------------------------------*/ /* 일반 테블릿 /*-----------------------------------------------------------------------------------*/ @media only screen and (min-width: 940px) and (max-width: 1100px) { #bannerArea {position:static;} #subContentBox img.introM {width:100%;max-width:100%;} #subContentBox img.introImg {margin:0 0 30px 0 !important;} /* 일반게시판 리스트 */ #subContentBox ul.boardList li {padding:30px 10px;background:#fff url(../images/content/grayBg.gif) no-repeat right top;} #subContentBox ul.boardList li h5 .number{display:inline-block;font-size:1em;width:30px;font-weight:bold;} #subContentBox ul.boardList li h5 a{font-size:1em;font-weight:normal;} #subContentBox ul.boardList li .name {position:absolute;top:8px;right:10px;} #subContentBox ul.boardList li .regdate_cal{position:absolute;top:30px;right:10px;} #subContentBox ul.boardList li .view{position:absolute;top:50px;right:10px;} /*클럽소개*/ #subContentBox .centerBox {width:90%;margin:0 auto;height:auto;clear:left;margin-bottom: 20px;padding-bottom:10% 10% 12%;} /*시설소개*/ #subContentBox .linkHospital {width:90%;margin:0 auto;height:auto;clear:left;margin-bottom: 20px;padding-bottom:10% 10% 12%;} /* 예약안내 */ #stepDL dl {margin:0;} #stepDL dl dt{float:none;width:150px;margin-bottom:15px;} #stepDL dl dd{float:none;width:100%;margin:0 0 30px 15px;} /*사이트맵*/ #sitemap {height:1200px;} #sitemap div {width:49%;box-sizing:border-box;float:left;height:250px;} #sitemap div ul {border-right:1px solid #ddd;border-bottom:1px solid #ddd;height:230px;padding-top:20px;} #sitemap .color_03 ul, #sitemap .color_07 ul{border-left: 1px solid #ddd;} } /*-----------------------------------------------------------------------------------*/ /* 작은 모바일 /*-----------------------------------------------------------------------------------*/ @media only screen and (min-width: 320px) and (max-width: 480px) { #bannerArea {position:static;} /* === content === */ #subContentBox img.introM {width:100%;max-width:100%;} #subContentBox img.introImg {margin:0 0 30px 0 !important;} /* 일반게시판 리스트 */ #subContentBox ul.boardList li {padding:25px 10px;background:#fff url(../images/content/grayBg.gif) no-repeat right top;background-size:100px 100%;} #subContentBox ul.boardList li h5 a.number{display:inline-block;vertical-align:top;} #subContentBox ul.boardList li h5 .reply{display:inline-block;vertical-align:top;} #subContentBox ul.boardList li h5 .screat{display:none;vertical-align:top;} #subContentBox ul.boardList li h5 a.file{display:none;vertical-align:top;} #subContentBox ul.boardList li h5 a.title{display:inline-block;width:60%;vertical-align:top; white-space:nowrap; text-overflow:ellipsis; /* IE, Safari */ -o-text-overflow:ellipsis; /* Opera under 10.7 */ overflow:hidden; } #subContentBox ul.boardList li h5 .number{display:inline-block;font-size:0.9em;width:20px;font-weight:bold;} #subContentBox ul.boardList li h5 a{font-size:1em;font-weight:normal;font-size:0.9em;} #subContentBox ul.boardList li .name {position:absolute;top:7px;right:10px;font-size:0.8em;} #subContentBox ul.boardList li .regdate_cal{position:absolute;top:25px;right:10px;font-size:0.8em;} #subContentBox ul.boardList li .view{position:absolute;top:43px;right:10px;font-size:0.8em;} /* 예약안내 */ #stepDL dl {margin:0;} #stepDL dl dt{float:none;width:150px;margin-bottom:15px;} #stepDL dl dd{float:none;width:100%;margin:0 0 30px 15px;} /* 원형 단계 */ .oneStep ul li {width:45%;height:65px;margin-bottom:20px;} .oneStep ul li.one, .oneStep ul li.fou {line-height:45px;} /* 포토게시판 리스트 */ #subContentBox ul.ImgboardList {} #subContentBox ul.ImgboardList li {float:none;width:100%;margin-top:30px;height:auto;margin-left:2%;border:1px solid #ddd;box-sizing:border-box;} #subContentBox ul.ImgboardList li .photo img{width:100%;height:200px;margin:0;padding:0;} #subContentBox ul.ImgboardList li .text h5{font-size:1em;} }