@charset "utf-8";

/* content */
#sub_container_wrap {position:relative; background:#fff}
#sub_container_wrap:after {content:""; display:block; clear:both;} 

.sub_content_wrap {position:relative; width:1600px; margin:0 auto 100px; min-height:680px;} 
.sub_content_wrap:after {content:""; display:block; clear:both;} 

#sub_content{float:right;width: calc(100% - 350px);} 
.subCntBody{ position:relative; padding:30px 0 40px}

/* 왼쪽메뉴 */
#menu { position:relative; float:left; margin-right:50px; width:250px; padding-top:20px} 
#menu h1 { background:#fabd00; height:80px; line-height:78px; letter-spacing:-2px; text-align:center; color:#222; font-size:22px}
#menu .lnb { border:1px solid #d3d7dd; border-top:0 }
#menu .lnb > li{ position:relative; border-top:1px solid #d3d7dd }
#menu .lnb > li:first-child{ border-top:0 }
#menu .lnb > li > a {display:block; line-height:130%; padding:10px 20px 10px 16px; font-size:14.5px; color:#333;}
#menu .lnb > li > a:hover { text-decoration:underline}
#menu .lnb > li.on > a {color:#0b856c; font-weight:bold}
#menu .lnb > li.on > a:hover { text-decoration:none}
#menu .subLnb {display:none; border-top:1px solid #d3d7dd; background-color:#eeeff2; padding:8px 18px; }
#menu .subLnb li a {display:block; color:#333; padding:3px 10px 3px 10px; font-size:13px; background:url('/images/org/web/gnmatbom/sub/bgSideNaviSub.gif') no-repeat 0 10px}
#menu .subLnb li.on a {color:#0b856c; background-image:url('/images/org/web/gnmatbom/sub/bgSideNaviSub_on.png')}
#menu .subLnb li.on a:hover {text-decoration:none}
#menu .subLnb li a:hover{ text-decoration:underline}
/* 왼쪽메뉴 2차메뉴 아이콘 */  
#menu .lnb > li.row > a:after{display:block; position:absolute; content:'';}
#menu .lnb > li.row > a:after{background:url('/images/org/web/gnmatbom/sub/arrow_b.png') no-repeat; width:5px; height:8px; right:18px; top:16px;}
#menu .lnb > li.on > a:after{ background:url('/images/org/web/gnmatbom/sub/arrow_b_on.png') no-repeat; width:8px; height:5px; right:16px; top:18px}
/* 새창 아이콘 */
#menu .lnb a[target='_blank']:after  {content:""; background:url('/images/org/web/gnmatbom/common/icon_blank.png') no-repeat; display:inline-block; width:11px; height:11px; margin-left:10px;}

/* sub 타이틀 */
#sub_content .title_area{ position:relative; overflow:hidden; padding:47px 0 20px; border-bottom:1px solid #e5e5e5}
.title_area .location { position:absolute; top:18px; right:0; font-size:13px; line-height:18px;}
.title_area .location span, 
.title_area .location strong {display:inline-block; *display:inline; zoom:1; padding-left:16px; background:url('/images/org/web/gnmatbom/sub/icon_location_arrow.gif') no-repeat 5px 6px; color:#777}
.title_area .location strong { font-weight:normal}
.title_area .location a.home { color:#666;}
.title_area .pageTitle{ font-weight:bold; letter-spacing:-2px; font-size:30px; color:#222; line-height:36px}

/* sns */ 
.snsBox { position:absolute; top:59px; right:0;}
.snsBox:after { content:""; display:block; clear:both;}
.snsBox button { float:left; margin-left:7px; width:28px; height:28px; overflow:hidden; background:url("/images/org/web/gnmatbom/sub/btnSns.png") no-repeat 0 0}
.snsBox button > span {text-indent:-1140px; font-size:0; line-height:0}
.snsBox .btnPrint { background-position:0 0; }
.snsBox .btnFbook { background-position:-31px 0; }
.snsBox .btnTwt { background-position:-62px 0; }
.snsBox .btnKko { background-position:-93px 0; }
.snsBox .btnKkot { background-position:-124px 0; }
.snsBox .btnBand{ background-position:-155px 0; }
.snsBox .btnDaum{ background-position:-186px 0; }
.snsBox .btnShare{ background-position:-217px 0; }
.snsBox .snsClose{ background-position:-248px 0; margin-left:-133px;}
.snsBox .sns_more{display:none; position:absolute; right:-105px; top:0; text-align:left}
.snsBox.on{ right:105px}
.snsBox.on .sns_more{ display:block;}

/* 담당자 및 페이지 만족도 */
#charge-satisfy {width:100%; margin-top:30px}

/* 페이지별 담당자 */
.charge-wr {position:relative; border:1px solid #d2d2d2; margin:50px 0 15px; padding:22px 25px 22px 7px; overflow:hidden; font-size:13px;}
.charge-wr .manager-wr {overflow:hidden}
.charge-wr .manager-wr .manager-list {float:left; width:auto}
.charge-wr .manager-wr .manager-list dt, .charge-wr .manager-wr .manager-list dd {display:inline-block; vertical-align:top; width:auto;}
.charge-wr .manager-wr .manager-list dt {position:relative; margin-left:18px; font-weight:bold; color:#333; padding-left:14px;}
.charge-wr .manager-wr .manager-list dt:before {position:absolute; top:8px; left:0; content:""; display:block; width:6px; height:3px; background:#0b856c;}
.charge-wr .manager-wr .manager-list dt:after{content:":"; margin:0 4px 0 7px; font-weight:bold}
.charge-wr .manager-wr .manager-list dd { color:#666}
/* 페이지만족도 */
.satisfy-wr {border:1px solid #3b5032; margin:10px 0; background:#f5f9f5; padding:20px 27px}
.satisfy-wr p {color:#4c5563; font-size:14px; font-weight:bold; letter-spacing:-0.5px; float:left}
.satisfy-wr .satis-chk {position:relative; text-align:right}
.satisfy-wr .satis-chk li {display:inline-block; vertical-align:top;}
.satisfy-wr .satis-chk input {vertical-align:middle}
.satisfy-wr .satis-chk input.radio, .satisfy-wr .satis-chk input[type="radio"] {margin-left:18px;}
.satisfy-wr .satis-chk label {font-size:13px; color:#555; letter-spacing:-1px}
.satisfy-wr .satis-chk .pcomment {position:relative; background:#fff; height:38px; border:1px solid #d2d2d2; text-align:left; margin-top:15px;}
.satisfy-wr .satis-chk .pcomment input.text {background:#fff; padding:0 0 0 14px; font-size:13px; margin-right:3px; width:88%; height:36px; line-height:33px; border:1px solid #fff; color:#666;}
.satisfy-wr .satis-chk .pcomment input.text::-webkit-input-placeholder, .satisfy-wr .satis-chk .pcomment input.text::-webkit-input-placeholder {color:#666;}
.satisfy-wr .satis-chk .pcomment input.text:-moz-placeholder, .satisfy-wr .satis-chk .pcomment input.text:-moz-placeholder {color:#666;}
.member-form .tbl-form td input[type=text]::-moz-placeholder, .satisfy-wr .satis-chk .pcomment input.text::-moz-placeholder {color:#666;}
.member-form .tbl-form td input[type=text]:-ms-input-placeholder, .satisfy-wr .satis-chk .pcomment input.text:-ms-input-placeholder {color:#666;}
.satisfy-wr .satis-chk .pcomment .btn-pcmt {position:absolute; top:-1px; right:-1px; width:100px; height:38px; background:#0b856c; border:0;color:#fff;}

/* 인사말 */
.greet .img1 { position: relative; border-radius: 20px; overflow: hidden; text-align: center;}
.greet .img1 img { height: 100%; width: auto;}
.greet .img1 .txt { text-align: left; font-weight: 300; color: #fff; font-size: 16px; position: absolute; left: 75px; bottom: 65px;}
.greet .img1 .txt span {  letter-spacing: 4px;}
.greet .img1 .txt p { font-size: 25px; line-height: 40px; margin-top:12px}
.greet .img1 .txt p strong { font-weight: 600;}
.greet > p { color: #111; line-height: 1.6rem; font-weight: 500; margin-top: 25px; font-size: 16px;}

/* 예약포털사이트 링크 */
.booking{ position:relative; overflow:hidden}
.booking img{ display:block; float:left; width:27%; height:auto; margin:30px 40px 0 20px;}
.booking .txt{ margin-top:10px; letter-spacing:-1px;}
.fs_16 { font-size:16px;}
.btn_booking{ display:inline-block; width:180px; padding:12px 10px; margin:20px 0 15px; border-radius:10px; font-size:17px; font-weight:bold; text-align:center; background-color:#00adee; color:#fff; border-bottom:4px solid #1f6098;}

.quickMenu{position:fixed;}

/* 캐릭터 추가 240730*/
.bg_ch1 {position: relative;}
.bg_ch1::before {content: ""; position: absolute; top: 5%; right: 5%; width: 100px; height: 300px; background: url(/images/org/web/gnmatbom/sub/ch_01.png) no-repeat center; background-size: contain;}
.bg_ch2 {position: relative;}
.bg_ch2::before {content: ""; position: absolute; top: 40%; right: 5%; width: 100px; height: 100px; background: url(/images/org/web/gnmatbom/sub/ch_02.png) no-repeat center ; background-size: contain;}
.bg_ch3 {position: relative;}
.bg_ch3::before {content: ""; position: absolute; top: 15%; right: 5%; width: 100px; height: 100px; background: url(/images/org/web/gnmatbom/sub/ch_03.png) no-repeat center ; background-size: contain;}
.bg_ch4 {position: relative;}
.bg_ch4::before {content: ""; position: absolute; top: 40%; right: 5%; width: 300px; height: 200px; background: url(/images/org/web/gnmatbom/sub/ch_04.png) no-repeat center ; background-size: contain;}
.bg_ch5 {position: relative;}
.bg_ch5::before {content: ""; position: absolute;top: 5%; right: 0; width: 200px; height: 180px; background: url(/images/org/web/gnmatbom/sub/ch_05.png) no-repeat center; background-size: contain;}

@media screen and (max-width:1640px) { 
	.sub_content_wrap { width:100%; padding:0 20px;}
    #sub_content{float:right;width: calc(100% - 300px);} 
}
@media screen and (max-width:1240px) {

	.sub_content_wrap, #sub_content, .subCntBody, #menu h1 {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#sub_container_wrap { padding-top:120px;} /* 20251204 수정 */

	/* content */
	#sub_container_wrap, .sub_content_wrap {width:100%}	
	.sub_content_wrap {margin:0 auto; padding:0;}	
	#sub_content{margin:0; width:100%; padding:0 2.5% 20px}
	.subCntBody {width:100%}	

	/* 왼쪽메뉴 */
	#menu { width:100%; margin:0; padding:0}
	#menu h1 {width:100%; height:auto; line-height:150%; padding:6px 0 9px; cursor:pointer; font-size:20px; background:#fabd00 url("/images/org/web/gnmatbom/sub/bgLnbDepth.png") no-repeat 98% 50%;}
	#menu h1.on{background-image:url("/images/org/web/gnmatbom/sub/bgLnbDepthOn.png")}
    #menu nav{display:none}
    #menu nav{position:relative; border-bottom:1px solid #333}
    #menu .lnb{ border:0}
}
@media screen and (max-width:960px){
	 
	/* 예약포털사이트 링크 */
	.booking img{margin:30px 20px 0 10px;}
	
	/* 캐릭터 추가 */
	.bg_ch1::before {display: none;}
	.bg_ch2::before {display: none;}
	.bg_ch3::before {display: none;}
	.bg_ch4::before {display: none;}
	.bg_ch5::before {display: none;}
}
@media screen and (max-width:800px) {
	
	.subCntBody{padding:25px 0 40px}
	
	/* sub 타이틀 */
	#sub_content .title_area{ height:auto; overflow:visible; padding:0 0 0; border-bottom:0;}
	.title_area .location { position:relative; top:auto; right:auto; text-align:center; margin:20px 0 10px}
	.title_area .pageTitle{ border-bottom:1px solid #e5e5e5; padding-bottom:22px; text-align:center; line-height:130%;}
	
	/* sns */ 
	.snsBox { position:relative; float:right; top:auto; right:auto; z-index:1; margin-top:10px}	

    /* 페이지만족도 */
	.satisfy-wr p {float:none;padding-top:0;}
	.satisfy-wr .satis-chk {text-align:left; margin-top:5px;}
	.satisfy-wr .satis-chk input.radio, .satisfy-wr .satis-chk input[type="radio"] {margin-right:5px; margin-left:0;}
	.satisfy-wr .satis-chk label {margin-right:22px; margin-left:0;}
	.satisfy-wr .satis-chk .pcomment input.text {width:80%;}
	
     /* 인사말 */ 
     .greet .img1 .txt { left: 25px; bottom: auto; top: 50%; transform: translateY(-50%);} 
     .greet .img1 .txt p { font-size: 18px; line-height: 25px;padding-right: 25px; }
     .greet > p { font-size: 15px;}

     /* 예약포털사이트 링크 */
	.booking{ text-align:center}
	.booking img{float:none; margin:30px auto 20px; width:30%;}
	.booking .txt{ float:none;}

}
@media screen and (max-width:680px) {
    /* 페이지만족도 */
	.charge-wr .manager-wr .manager-list {float:none; margin-bottom:5px;}
}
@media screen and (max-width:580px) {
	
	#sub_container_wrap { padding-top:60px;}
	
	/* 왼쪽메뉴 */
	#menu h1 { text-align:left; padding:6px 16px 9px; background-position:97% 50%}
	
	/* sub 타이틀 */
	.title_area .location {margin:16px 0 8px}
	.title_area .pageTitle{ font-size:24px; letter-spacing:-1px; padding-bottom:18px;}
    
    /* 예약포털사이트 링크 */
    .booking img{margin:20px auto 20px; width:40%;}
}

@media screen and (max-width:480px) {
	
	/* 왼쪽메뉴 */
	#menu h1 {background-position:96% 50%}
	
	
}

@media (max-width :490px) {
	
	/* 페이지만족도 */
	.satisfy-wr .satis-chk .pcomment {height:100%;}
	.satisfy-wr .satis-chk .pcomment .btn-pcmt {position:relative; top:auto; right:auto; width:100%;}

    /* 예약포털사이트 링크 */
	.booking img{width:50%;}
		
}

@media (max-width: 380px){
	
	/* 페이지만족도 */
	.satisfy-wr {padding:15px 17px}

}