/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);


body {
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 150%;
	font-family:'Noto Sans KR', 'Malgun Gothic', Dotum, AppleGothic, sans-serif;
	color:#111111;
}

form, p, blockquote, dl, dd, dt,h1,h2,h3{margin:0;padding: 0;}
ul, li, ol {list-style:none;margin:0px;padding:0px;}
fieldset{margin:0; padding:0; border:0}
img {vertical-align:middle; border: 0 none;}
caption{visibility:hidden;position:absolute;top:0;left:0;width:0px;height:0px;font-size:0;line-height:0}
/*LINK*/
a:link, a:visited {color: #666; text-decoration: none}
a:hover, a:active {text-decoration: none;}
a, area {outline:none; selector-dummy:expression(this.hideFocus=true);}
:focus {-moz-outline-style:none;}


/*????*/
#header{
	width: 100%;
	height: 120px;
	background: url(../images/main/gnbbar.gif);
}
#gnb{width: 1200px; margin:0 auto;}
#gnb .gnbTopWrap{width: 1153px; float:right; clear:both;}
#gnb .gnbTopWrap .gt_home, #gnb .gnbTopWrap .gt_admin{text-transform: uppercase;font-size:15px; width: 81px; height: 30px; float: right;color:#fff;text-align: center; display: block;line-height: 30px;}
#gnb .gnbTopWrap .gt_home{background: #909090;}
#gnb .gnbTopWrap .gt_admin{background:#c53c27; }


#gnbWrap{}
#gnbWrap .logo{margin: 15px 70px 0 25px;float:left;}
#gnbWrap #sidemenu{float:left;margin-top:38px;height:52px;}
#gnbWrap #sidemenu .gnbMenu{float:left;width: 138px;height: 45px;background: url(../images/main/grbar.gif) no-repeat center right;text-align: center;line-height: 45px;font-size:20px;}
#gnbWrap #sidemenu #menu_06{background: none;}
#gnbWrap #sidemenu .gnbMenu .smenu{display:none;z-index: 9999 !important;position: absolute;}
#gnbWrap #sidemenu .gnbMenu .somenu a{line-height: 30px;width:152px;display:block; height:30px; background: #fff; font-size:16px;padding:5px 0 5px 0 ;border:1px solid #eeeeee;border-bottom:0;}
#gnbWrap #sidemenu .gnbMenu .somenu a:hover{background:#eeeeee;}
#gnbWrap #sidemenu .gnbMenu .last_somenu a{line-height: 30px; width:152px; height:30px;display:block; background: #fff; font-size:16px;padding:5px 0 5px 0 ;border:1px solid #eeeeee;}
#gnbWrap #sidemenu .gnbMenu .last_somenu a:hover{background:#eeeeee;}





#mainImg{/* width: 100%; *//* height: 657px; */text-align: center;position: relative;margin: 0 auto 30px;z-index: 0;min-width: 1280px;}

#mainImg .img1{width:50%;float: left;}
#mainImg .img2{width:50%;float: left;}
#mainImg img {width:100%;min-height: 400px !important;/* min-width: 960px !important; */min-width: 400px !important;}

#mbot_Wrap{width: 1200px;margin: 0px auto 25px;clear:both;overflow: hidden;padding-top: 30px;}
.mbot_1{width: 370px; height: 225px; border:1px solid #ececec; float:left;}
.mbot_1 .mbot_top{margin-bottom:15px; width: 330px; height: 20px; border-bottom: 1px solid #ececec; padding:20px;}
.mbot_1 .mbot_top .m_titp{font-size:22px; color:#3c3c3c; float:left;font-weight:bold; margin-right:10px; }
.mbot_1 .mbot_top .m_p{font-size:16px; float:left; color:#858585;}
.mbot_2{width: 418px; float:left; height: 225px; margin:0 18px 0 18px; background:url(../images/main/m_phone.png) no-repeat top center;}
#mapbox{background: url(../images/main/map.png) no-repeat bottom right;}
#mapbox .map_p{font-size:18px; margin:25px 0 15px 20px; line-height: 25px; color:#707070;}
.morebtn{margin-left:20px;font-size:15px; border:1px solid #ececec; padding:3px 5px; width: 100px; height: 25px; text-align: center; line-height: 25px; display: block;}



.subtitImg{width:100%;height: 180px; background:url(../images/sub/subtitle.png) no-repeat top center;overflow: hidden;margin-bottom: 32px;}
.subtitB, .subtitS{margin-left:83px;}
.subtitB{margin-top: 86px; font-size:29px;margin-bottom: 5px;}
.subtitS{font-size:17px;}
.subWrap{width: 1200px; margin:0 auto 30px; overflow: hidden;}
.submenu,.contents{float:left;}
.submenu{margin-left:28px; margin-right:55px;}
.submenu .redline{width: 32px; height: 2px; background: #e93500; margin-left:9px;}
.sbm{font-size:25px; color:#212121; margin:17px 0 17px 9px;}
.subUl{width: 220px;}
.subUl>li>a{background: url(../images/sub/submenubar_off.gif);width: 190px; height: 20px; border:1px solid #d7d7d7; border-bottom:0; padding:15px 0 15px 29px; display:block;line-height: 20px;}
.subUl>li>a.on{width: 192px;background: url(../images/sub/submenubar.gif); color:#fff;border:0;}
.subUl>li.subUl_last>a{width: 190px; height: 20px; border:1px solid #d7d7d7;padding:15px 0 15px 29px; display:block;line-height: 20px;background: url(../images/sub/submenubar_off.gif);}
.subUl>li.subUl_last>a.on{width: 192px;background: url(../images/sub/submenubar.gif); color:#fff;border:0;}

.subtop{width: 890px;height: 65px;background: url(../images/sub/subtopbar.gif) no-repeat bottom left;margin-bottom:38px;}
.subh3{font-size:40px; color:#2e2e2e;margin-top:20px; float:left;}
.sub_loc{float:right; margin-top: 35px;margin-right:10px;}

.subbox{width:890px;min-height: 500px; overflow:hidden;}
.titlebox{height:35px;line-height: 35px; padding-left:10px; font-size:23px;font-weight: bold; color:#3b3b3b; border-left:4px solid #e93500;margin-bottom:15px;clear:both;}




/*intro*/
.hos_logo{padding-left:10px;}
.subcon{padding-left:10px;clear:both;margin-bottom:35px;overflow: hidden;}
.intro1_pic{display:block; margin-top:4px; margin-right:10px;float:left;}
.intro1_r{position:relative;float:left;}
.intro1_r>.p25{margin-top:0px; font-size:20px;}
.p25{font-size: 23px; color:#323232;}
.subredL{width:40px; height:2px; background: #e93500;margin:15px 0 15px 0 ;}
.p16{font-size:15px; line-height: 22px; color:#727272;}
.lastpic{margin-bottom:40px;}
.map{width: 534px; float:left; margin-right:20px;}
.map_r{float:left;}
.redb{float:left;font-weight: bold; color:#d40000;margin-right:20px;}
.circle23{width:150px; height:25px;line-height: 25px; padding-left:20px; font-size:23px;font-weight: bold; color:#3b3b3b; margin-top: 30px; margin-bottom:5px; background: url(../images/sub/sub_cir.gif) no-repeat center left; clear:both;}
.circle60{width:150px; height:25px;line-height: 25px; padding-left:20px; font-size:23px;font-weight: bold; color:#3b3b3b; margin-top: 80px; margin-bottom:5px; background: url(../images/sub/sub_cir.gif) no-repeat center left; clear:both;}
/*treat*/
.tabs{width: 893px; height: 48px;margin-bottom:30px;}
.tabs>li{width: 220px; height: 48px; border:1px solid #9f9f9f; border-right:0; text-align:center; line-height: 48px; float:left;cursor: pointer;}
.tabs>li:last-child{border-right:1px solid #9f9f9f;}
.tabs>li.sel{width:220px; height:48px;background:#9f9f9f; color:#ffffff; }
.tab_container{width:890px; margin:0 auto;}
.tab_content{width: 860px; margin:0 auto;}
.pbox{width: 850px; overflow:hidden; margin:20px auto ;}
.pbox .bp17{padding-left:15px;}
.pbox .p16{margin-top:5px;margin-bottom: 10px; padding-left:15px;}
.bp20{font-size:20px; font-weight: bold;margin-bottom:15px;}
.bp17{font-size:17px;font-weight: 16px;}
.circle{width:350px; height:25px;line-height: 25px; padding-left:20px; font-size:20px;font-weight: bold; color:#3b3b3b; margin-top: 20px; margin-bottom:5px; background: url(../images/sub/sub_cir.gif) no-repeat center left; clear:both;}
#tab2>.p16{margin-bottom: 15px;}
.checkk{display:block; background: url(../images/sub/check.gif) no-repeat center left; padding-left:20px;margin-left:10px;}
#titlebox2{margin-top:50px;}
.treat3{width: 100%; overflow:hidden; background: url(../images/sub/treat2.png) no-repeat top left;padding-left:340px;margin-bottom: 40px;}
/*howto*/
#subbox3{margin-bottom: 50px;}
#subbox3>.hos_logo{margin-bottom: 30px;}
.howbox{width: 100%; height:285px; background: url(../images/sub/howto.png) no-repeat top left; margin-bottom:30px;padding-top:25px;}
.howbox>.p18{margin-bottom:20px;}
.howbox>.p18, .howbox>.titlebox{margin-left:480px;}
.redbox{background: #666;color:#ffffff; padding:5px; width:170px;font-size:18px; text-align: center;overflow:hidden;margin-top:15px;}
.pl{padding-left:10px;}
.pl2{padding-left:20px;margin-bottom:10px;}
.mt{margin-top: 10px;}
/*footer*/
#footer{
	width: 100%;
	height: 155px;
	background:#f4f4f4;
	clear: both;
	overflow:hidden;
} 
#footer #footerWrap{width: 1200px; margin:0 auto; padding-top:35px; position:relative;}
#footer #footerWrap .ft_logo{background:url(../images/main/ft_logo.png) no-repeat top center; width: 270px; height: 60px;float:left;}
#footer #footerWrap .address{float:left; margin-left: 40px;}

#footer #footerWrap .gain_btn {position:absolute; right:0; top:35px; }
#footer #footerWrap .gain_btn {display:inline-block; color:#999; font-size:12px;}

/* intro background */
.intro1_r > .introbg {
    position:absolute;
    z-index:-2;
    top:0;
    right:0;
}


/* ==========================================================
   메인페이지 추가 — style_alp.css 기존 추가분을 이걸로 교체

   ※ style_alp.css 에서 아래 한 줄도 함께 삭제 또는 주석처리:
      #mainImg img { width:100%; min-height: 400px !important; ... }
      (#mainImg 를 캐러셀로 교체했으므로 더 이상 불필요)
   ========================================================== */

/* ── 캐러셀 ─────────────────────────────────────────────── */
#mainCarousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0c3347;
  height: 480px;
  margin-bottom: 30px;
}
.car-track {
  display: flex;
  height: 100%;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.car-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
#mainCarousel .car-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}
.car-slide a.car-link-wrap {
  display: block; width: 100%; height: 100%;
}
.car-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    108deg,
    rgba(12,51,71,.80) 0%,
    rgba(12,51,71,.30) 50%,
    rgba(12,51,71,.03) 100%
  );
  pointer-events: none;
}
.car-content {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: calc(50% - 600px); /* mbot_Wrap 1200px 기준 */
  width: 480px;
  color: #fff;
  box-sizing: border-box;
}
.car-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 20px;
  padding: 4px 14px; margin-bottom: 18px;
}
.car-title {
  font-size: 36px; font-weight: 700; line-height: 1.32;
  margin: 0 0 14px; word-break: keep-all;
}
.car-desc {
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,.8);
  margin: 0 0 26px; word-break: keep-all;
}
.car-btn {
  display: inline-block; padding: 11px 26px;
  background: #fff; color: #1a5f8a;
  font-size: 13px; font-weight: 700;
  border-radius: 5px; text-decoration: none;
  transition: background .3s ease, transform .3s ease;
}
.car-btn:hover { background: #e8f3fb; transform: translateX(2px); }

.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.44);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease; line-height: 1;
}
.car-arrow:hover { background: rgba(255,255,255,.34); }
.car-arrow--prev { left: 22px; }
.car-arrow--next { right: 22px; }

.car-dots {
  position: absolute; bottom: 18px;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 20;
}
.car-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.38);
  transition: background .3s ease, transform .3s ease;
}
.car-dot.on { background: #fff; transform: scale(1.38); }

/* ── 갤러리 ─────────────────────────────────────────────── */
#mainGallery {
  width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* 왼쪽 텍스트 영역 */
.gal-left {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 32px 0 0;
}
.gal-head-ko {
  font-size: 22px; font-weight: bold;
  color: #3c3c3c; margin: 0 0 8px 0;
}
.gal-head-en { font-size: 16px; color: #858585; }

/* 오른쪽 갤러리 영역 */
.gal-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 메인 큰 이미지 — 16:9, max-height 으로 너무 커지지 않게 */
.gal-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  border-radius: 4px;
  overflow: hidden;
  background: #e8e8e8;
  cursor: pointer;
}
#mainGallery .gal-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
  transition: opacity .35s ease;
}
.gal-main-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.gal-main:hover .gal-main-info {
  opacity: 1;
  transform: translateY(0);
}

/* 썸네일 슬라이더 래퍼 */
.gal-thumb-wrap { width: 100%; }
.gal-thumb-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.gal-thumb-track {
  display: flex;
  gap: 6px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* 썸네일 아이템 — 16:9 */
#mainGallery .gal-thumb-item {
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .25s, opacity .25s;
  box-sizing: border-box;
  background: #e8e8e8;
}
#mainGallery .gal-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
  transition: transform .35s ease;
}
#mainGallery .gal-thumb-item:hover img { transform: scale(1.06); }
#mainGallery .gal-thumb-item.on { border-color: #1a5f8a; }
#mainGallery .gal-thumb-item:not(.on) { opacity: .72; }
#mainGallery .gal-thumb-item:not(.on):hover { opacity: 1; }

/* 더보기 칸 */
#mainGallery .gal-thumb-more {
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  gap: 4px;
  transition: background .25s, border-color .25s;
  box-sizing: border-box;
}
#mainGallery .gal-thumb-more:hover { background: #eef4f9; border-color: #1a5f8a; }
#mainGallery .gal-thumb-more span { font-size: 12px; color: #888; line-height: 1.2; }
#mainGallery .gal-thumb-more:hover span { color: #1a5f8a; }

/* 좌우 버튼 — 썸네일 슬라이더 안 오버레이 */
.gal-thumb-slider .gal-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: none;
  color: #444;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: background .2s, color .2s;
  padding: 0;
}
.gal-thumb-slider .gal-btn:hover { background: #1a5f8a; color: #fff; }
.gal-btn--prev { left: 4px; }
.gal-btn--next { right: 4px; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  #mainGallery { width: 100%; padding: 0 20px; box-sizing: border-box; }
  .car-content { left: 20px; }
}
@media (max-width: 1024px) {
  #mainCarousel { height: 380px; }
  .gal-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  #mainCarousel { height: 260px; }
  .car-tag, .car-desc { display: none; }
  .car-title { font-size: 22px; }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  #mainCarousel { height: 200px; }
  .car-arrow { display: none; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
}