/*
서귀포시 2017 레이아웃
*/

@import url(font.css);

/* 요소(element) 여백 초기화  */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
 	margin:0;
	padding:0;
	}

/* 제목요소 */
h1, h2, h3, h4, h5, h6 {  
	font-weight:normal; 
	font-size:1em; 
	} 

/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; } 

/* 목록 */
ol, ul { list-style:none; }

/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
	border-collapse: separate;
	border-spacing:0;
	border:0 none;
	}
caption, th, td {
	font-weight: normal;
}
caption, legend {position:absolute;  width:0; height:0; overflow:hidden; font-size:0;line-height:0px; }
/* 텍스트 관련 요소 초기화 */
address, caption, strong, em, cite {	font-weight:normal;	font-style:normal;	}
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }

/* 수평선*/
hr { display:none; }




body {font-family: 'Spoqa Han Sans', '맑은 고딕'; font-size:14px;  min-width: 320px; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: bold;}
p, dl, ol, ul {margin: 0;}


.clear { clear:both;  }
.clearfix:after { clear:both; display: table;  content: " ";}
.ellipsis {     text-overflow: ellipsis;  -o-text-overflow: ellipsis;  overflow: hidden;   white-space: nowrap;   word-wrap: normal !important;   display: block; }
img { max-width:100% !important;  }

.show { display:block !important;  }
.hide { display:none !important;  }
.text-center { text-align:center !important;  }
.text-left{ text-align:left !important;}
.text-right { text-align:right !important;}
.block { display:block !important;  }
.inline-block { display:inline-block !important;  }
.inline { display:inline !important;  }

i span { text-indent:-99999px;display:block;   font-size:0px; line-height:0px; }




@media (min-width: 992px) {

	.pc-true { display:block; }
	.t-true { display:none;  }
	.t-up-true { display:block;  }
	.t-down-true { display:none;  }
	.m-true { display:none; }

	.header {z-index: 100; padding-top:50px;  position: relative;  height: 150px; word-break: keep-all;}
	.header .container {}
	.header h1 { padding-top:40px;float:left; position:relative; z-index:101;  }
	.header h1 a {font-size:30px; color:#00765a;  }
	.header h1 a:hover { text-decoration:none;  }
	.header h1 img { margin-right:15px;  }

	.top-util-wrap { position:absolute; top:0px; left:0px; width:100%; border-bottom:1px solid #e5e5e5; background:#f5f5f5; height:50px;   }
	.top-util-wrap .top-link { position:absolute; top:0px; left:50%; margin-left:-600px; padding-top:15px; }
	.top-util-wrap .top-link  dt { display:none;  }
	.top-util-wrap .top-link dd { display:block !important; }
	.top-util-wrap .top-link dd  a { color:#666;  display:block;   float:left; padding-left:15px; margin-left:15px; background:url(../images/common/bit_c.png) no-repeat left 7px; }
	.top-util-wrap .top-link dd a:first-child { padding-left:0px; background:none; margin-left:0px;  }
	.top-util-wrap .top-util { position:absolute; top:0px; right:50%; margin-right:-600px;  }
	.top-util-wrap ul { padding-top:15px;   }
	.top-util-wrap ul li { float:left; padding-left:15px; margin-left:15px; background:url(../images/common/bit_c.png) no-repeat left 7px; }
	.top-util-wrap ul li:first-child { padding-left:0px; background:none; margin-left:0px;  }
	.top-util-wrap ul li.member-open a { font-weight:bold; color:#00775a;    } 
	.top-util-wrap ul li a { color:#666;  }

	.gnb { position:absolute; top:100px; left:0px;z-index:100;  width:100%;  font-family: 'NanumSquare';}
	.gnb .container {   }
	.gnb .container .row { float:right;   padding-right:65px; }
	.gnb .menu {float:left; }
	.gnb .menu h3 {  font-family: 'NanumSquare'; margin-left:60px; }
	.gnb .menu h3 a { font-size:22px; color:#000; font-weight:normal;  display:block; height:50px;  }
	.gnb .menu h3 a:hover , .gnb .menu h3 a.active {text-decoration:none;  border-bottom:3px solid #00755a; color:#00755a;  } 
	.gnb .menu h3 i { display:none;  }
	.gnb .menu .sub-menu { display:none;   position:absolute; top:50px; left:0px;width:100%;background:url(../images/common/menu_bg.jpg) no-repeat center top; height:80px;  text-align:center;  }
	.gnb .menu ul {display:table-cell; width:2000px;  vertical-align:middle; height:80px;   text-align:center; }
	.gnb .menu ul li { display:inline-block; vertical-align:top;   padding-left:25px; padding-right:15px;  background:url(../images/common/menu_bit.png) no-repeat left 11px; font-size:20px;   }
	.gnb .menu ul li:first-child { background:none;  }
	.gnb .menu ul li a { color:#fff;  }

	.menu-back {display:none;  background:rgba(0,0,0,0.8); position:fixed; top:230px ;left:0px; width:100%; height:100%; }


	.all-menu-open { position:absolute; top:102px; right:50%; margin-right:-560px; display:none !important;  }
	.top-search-open { position:absolute; top:98px; z-index:100;  right:50%; margin-right:-600px;  }
	.all-menu-open  a { font-size:20px; color:#00765a;  }
	.top-search-open  a { font-size:20px; color:#00765a;  }


	.header-search {display:none; position: absolute; bottom:0px;  right: 50%; z-index:100;  margin-right:-600px;  width:430px; height:60px;   border-bottom:3px solid #00765a; background:#f7f7f7; font-size: 16px; }
	.header-search:after { clear:both; display:table; content:'';  }
	.header-search form  { float:left;  }
	.header-search input { float:left;border:0px;padding:0 10px;   width:360px; height: 60px; background:none; }
	.header-search button {width:30px; height:60px;background:none;  color: #00765a; border: 0; font-size: 22px;}
	.header-search .top-search-close {  font-size: 22px; position:absolute; top:11px; right:0px; }
	.header-search .top-search-close a  {  font-size: 25px;color:#00765a;  }


	.footer {  background:#fff; border-top:1px solid #d5d5d5;  }
	.footer .container { position:relative;  padding-top:20px; padding-bottom:50px; }
	.footer address {margin-bottom: 10px;}
	.footer-util {font-size: 0; margin:20px 0; }
	.footer-util li {display: inline-block; font-size: 16px;}
	.footer-util li a {color:#555;}
	.footer-util li a b {color: #007AC1; font-weight: normal;}
	.footer-util > li + li:before {content: "|"; padding: 0 15px; color: #BFBFBF;}
	.footer address {float: left;}
	.footer .foot-link { position:absolute; bottom:30px; right:0px;  }
	.footer .call {  text-align:right; margin-bottom:10px;    }
	.footer .sns-link { display:block;    }
	.footer .sns-link a { float:left; display:block;  margin-left:10px;  }


  #backtotop {
      position: fixed;
      bottom: 0;
      right: 0;
      z-index: 9999;
      width: 60px;
      height: 60px;
      text-align: center;
     padding-top:10px; 
      background: rgba(0,0,0,0.3);
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      text-decoration: none;
      /*transition: opacity 0.2s ease-out;*/
      opacity: 0;
  }
  #backtotop.show {
    opacity: 1;
  }
  #backtotop:hover.show {
    background: rgba(0,0,0,0.6);
  }



}




@media (min-width: 992px) and (max-width: 1199px) {

	.pc-true { display:none; }
	.t-true { display:block;  }
	.t-up-true { display:block;  }
	.t-down-true { display:block;  }
	.m-true { display:none; }

	.top-util-wrap .top-link { position:absolute; top:0px; left:50%; margin-left:-480px;  }
	.top-util-wrap .top-util { position:absolute; top:0px; right:50%; margin-right:-480px;  }
	.gnb .menu h3 {   margin-left:30px; }
	.all-menu-open { position:absolute; top:102px; right:50%; margin-right:-440px;  }
	.top-search-open { position:absolute; top:102px; right:50%; margin-right:-480px;  }
	.header-search {  margin-right:-480px;  }
	.footer-util > li + li:before {padding: 0 5px; }


}




@media  (max-width: 991px) {

	.pc-true { display:none; }
	.t-true { display:none;  }
	.t-up-true { display:none;  }
	.t-down-true { display:block;  }
	.m-true { display:block; }



 .header {
    height: 2.27272727rem;
    word-break: keep-all;
	text-align:center; 
	margin-left:15px; margin-right:15px; 

  }
  .header .container {
    position: relative;
  }
  .header a {   color: #00765a;;  }
	.header h1 {   display: inline-block;    margin-top: 0.69090909rem;  }
	.header h1 a {font-size:0.75rem; color:#00765a;  }
	.header h1 a:hover { text-decoration:none;  }
	.header h1 img { margin-right:0.2rem;   width: 6.04545455rem; }


  .header-search {
    display: none;
    z-index: 100;
    position: absolute;
    top: 3.18181818rem;
    left: 15px;
    right: 15px;
  }
  .header-search select {
    display: none;
  }
  .header-search input {
    width: calc(100% - 60px);
    height: 1.81818182rem;
    border: 1px solid #00765a;
    vertical-align: top;
  }
  .header-search button {
    width: 50px;
    height: 1.81818182rem;
    background-color: #00765a;
    color: #FFF;
    border: 0;
    font-size: 0.90909091rem;
  }

  .all-menu-open {
    position: absolute;
    top: 0.7rem;
    left: 0px;
    font-size: 0.80909091rem;

  }
  .top-search-open {
    z-index: 10;
    position: absolute;
    top: 0.7rem;
    right: 0px;
    font-size: 0.80909091rem;

  }
   .top-search-close {
    z-index: 10;
    position: absolute;
    top: -2.4rem;
    right: -15px;
    font-size: 0.80909091rem;

  }

   .top-search-close i {
		color:#fff; 
  }


.menu-back {display:none !important; }


 .m-menu { display:none;  padding-left:15px; padding-right:15px;   z-index: 1000; overflow-y:auto;    position: fixed;    top: 0;    left: 0;	width:100%;  height: 100%;    background: rgba(0,87,66,0.95);    letter-spacing: -1px;    text-align: left;   }
	.all-menu-close {    position: absolute;    top: -1.9rem;    right:0px;  }
	.all-menu-close a {    font-size: 0.90909091rem;	color:#fff;   }
	.top-link { height:2.87272727rem; float:left; position:relative;  padding-top:1rem;}
	.top-link  dt  { float:left;  font-size: 0.650909091rem; margin-right:0.5rem; font-weight:normal;     } 
	.top-link  dt a  { color:#fff;  } 
	.top-link  dd { display:none;  background:#fff;position:absolute; z-index:1000;  top:50px;  padding:10px; font-size: 0.650909091rem; margin-right:0.5rem;        background-color: #fff;    -webkit-background-clip: padding-box;    background-clip: padding-box;    border: 1px solid #ccc;    border: 1px solid rgba(0,0,0,.15);    border-radius: 0;    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);    box-shadow: 0 6px 12px rgba(0,0,0,.175);  }
	.top-link  dd a {    display: block;    padding: 3px 20px;    clear: both;       line-height: 1.42857143;    color: #333;    white-space: nowrap; }
	.top-util { height:2.87272727rem;  border-bottom:1px solid #1a9577; padding-top:1rem;}
	.top-util li { float:left;  font-size: 0.650909091rem; margin-right:0.5rem;   }
	.top-util-wrap ul li.member-open a { font-weight:bold;  }
	.top-util li a { color:#fff;    }

  
	#gnb .menu {  }
	#gnb h3 { font-size: 0.750909091rem;   }
	#gnb h3 a { color:#fff; padding-left:5px; display:block; padding-top:0.9rem; padding-bottom:0.7rem;  width:100%; font-weight:normal; border-bottom:1px solid #1a9577 ;   }
	#gnb h3 a:hover, #gnb h3 a.active { text-decoration:none;  }
	#gnb h3 a i { float:right; font-size:0.9rem;   }
	#gnb .sub-menu { display:none;  padding-top:0.7rem; padding-bottom:0.4rem;  background:#00795c; }

	#gnb ul:after { content:''; display:table; clear:both;  }
	#gnb ul > li { float:left; width:50%;  padding-bottom:0.6rem; padding-left:30px; padding-right:10px;  background:url(../images/common/m_menu_bit.png) no-repeat 15px 7px; }
	#gnb ul > li:nth-of-type(3), #gnb ul > li:nth-of-type(5), #gnb ul > li:nth-of-type(7) , #gnb ul > li:nth-of-type(9), #gnb ul > li:nth-of-type(11)  { clear:both;  }
	#gnb ul > li a { font-size:0.66rem; color:#fff; font-weight:normal;  }



	.footer {  background:#fff; border-top:1px solid #d5d5d5;  padding:0.8rem 15px 1rem;  }
	.footer address {margin-bottom: 0.4rem;}
	.footer-util {font-size: 0; margin:0 0 0.6rem; white-space:nowrap;overflow-x:auto;  }
	.footer-util li {display: inline-block; font-size: 0.58rem; }
	.footer-util li a {color:#555;}
	.footer-util li a b {color: #007AC1; font-weight: normal;}
	.footer-util > li + li:before {content: "|"; padding: 0 0.5rem; color: #BFBFBF;}
	.footer address {}
	.footer .call { margin-bottom:0.5rem;    }
.footer .foot-link { text-align:center;  }
.footer .foot-link a { margin:0 5px;  }

  .back {
    display: none;
    z-index: 80;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }
  #backtotop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    width: 1.81818182rem;
    height: 1.81818182rem;
    text-align: center;
    line-height: 1.81818182rem;
	padding-top:5px; 
    background: rgba(0, 0, 0, 0.3);
    font-size: 1.18181818rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    /*transition: opacity 0.2s ease-out;*/
    opacity: 0;
  }
  #backtotop.show {
    opacity: 1;
  }
  #backtotop:hover.show {
    background: rgba(0, 0, 0, 0.6);
  }


}





@media (min-width: 1200px) {

}
@media (min-width: 992px) {

}
@media (min-width: 768px) {

}