@media all and (min-width: 1921px) {
	html, body {
		height: 100%;
		width:100%;
		font-family:'Pretendard','Noto Sans KR',sans-serif;
		font-size:0.7em;
		
	}
	img{border:0px;}
	#menu {
		background: #fff;
	}
	/* hide open-button */
	a[href="#menu_bar"]
	{
		display: none !important;
	}
}
	
*{margin:0; padding:0; list-style:none;}

i, em, address, cite, optgroup {
  font-style: normal;
}



/*����*/
body, h1, h2, h3, h4, h5, div  {margin:0;padding:0; font-family:'Pretendard','Noto Sans KR',sans-serif;}
body {background-color:#fff !important; list-style:none;}
img {border:0;}

a {text-decoration:none; -webkit-tap-highlight-color:transparent;}

/* 모바일 탭 시 hover 가 남아 빨갛게(crimson) 변하던 현상 제거 — 링크 본래 색 유지 */
a:hover {color:inherit}

.clr {clear:both;}

.blank {padding:10px;}

.paging {text-align:center;padding:10px;}

.ft_left {float:left;}

.ft_right {float:right;}

.line {clear:both;margin:10px auto;border-top:1px solid #ddd;margin-bottom:20px;}

.pointer {cursor:pointer}

.bt {font:normal 15px 'Pretendard','Noto Sans KR',sans-serif;color:#aaa;}



.ex:hover div,  .hidden:hover, .hidden:active, hidden:link {display:block;}
                                              
/* hover */

.ex {font-family:'Pretendard','Noto Sans KR',sans-serif; font-weight:bold; font-size:13px; color:#fff; text-shadow:0 0 0;}
.hidden{font-family:'Pretendard','Noto Sans KR',sans-serif; font-weight:bold; font-size:13px; color:black; text-shadow:0 0 0; display:none; background:#00a6d0; margin:0; padding:0; padding-right:5px;}
.sub {font-family:'Pretendard','Noto Sans KR',sans-serif; font-weight:bold; font-size:13px; color:#454545; text-shadow:0 0 0; }

/* ���� ���޴� ����Ʈ ��Ÿ�� ���� */
.hidden ul li {margin-bottom:5px;  }
.hidden ul {text-align:left;  margin-left:0;  }


/*-------------------------------------------------------------*/



 /* SlidesJS Optional: If you'd like to use this design */
  
  

    #slides {
      display: none; width:100%; 
    }

    #slides .slidesjs-navigation {
      margin-top:0px;  
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(img/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:0px;
      height:0px;
      overflow:auto;
      text-indent: -9999px;
      float: left;
      margin-right:0;
      
	
	
	}

    a.slidesjs-next {
      margin-right:0px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:0px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:0px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 0px;
      height: 0;
      padding-top:0;
      background-image: url(img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
 
 /* End SlidesJS Optional */
 /* SlidesJS Required: These styles are required if you'd like a responsive slideshow */
  
    #slides {
      display: none; 
    }

    .container {
      margin: 0 auto; 
    }

    /* For tablets & smart phones */
    @media (max-width: 1000px) {
      body {
        padding-left: 0px;
        padding-right: 0px;
      }
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 720px) and (max-width: 979px) {
      .container {
        width: 1000px
      }
    }

    /* For larger displays */
    @media (min-width: 1000px) {
      .container {
        width: 1200px
      }
    }
 
  /* SlidesJS Required: */
  
#header{width:100%; height:80px; background:#fff;}
  
#header h1 a img{ width:200px; padding-top:15px;}

.cont{width:100%; clear:both;}

/* 하단 빠른버튼 바 — 버튼식(둘레 여백 + 둥근 버튼 2개 + 간격) */
.ban{ width:100%; box-sizing:border-box; }
/* 앱 하단 탭바처럼 위·아래 구분선 + 살짝 위로 뜨는 그림자 → 맨 밑에 붙어도 위/아래 콘텐츠와 분리 */
.ban, .quick_button{
	border-top:1px solid #dfe2e7;
	border-bottom:1px solid #dfe2e7;
	box-shadow:0 -2px 8px rgba(16,34,72,.06);
}
.ban, .quick_button > div{
	display:flex; gap:clamp(9px, 2.8cqw, 15px);
	padding:clamp(9px, 2.8cqw, 15px);
	box-sizing:border-box;
	background:#f4f4f4;   /* 사이트 회색 톤(‘PC 버전으로 보기’ 바와 통일) — 버튼 사이/둘레에 은은히 보임 */
}
.b1, .b2{ float:none; flex:1 1 0; width:auto; min-width:0; }

/* 하단 빠른버튼(오시는 길 / 문의전화 걸기) — 이미지 → CSS+글씨 반응형 */
.qbtn{
	display:flex; align-items:center; justify-content:center;   /* 아이콘+글씨 가운데 정렬 */
	width:100%; box-sizing:border-box;
	height:clamp(52px, 15cqw, 74px);                            /* 버튼식: 둘레 여백 생긴 만큼 살짝 낮춤 */
	padding:0 clamp(8px, 2.5cqw, 14px);
	color:#fff !important; text-decoration:none;
	font-size:clamp(16px, 5cqw, 24px); font-weight:bold; letter-spacing:-0.5px;
	white-space:nowrap;
	border-radius:clamp(11px, 3.2cqw, 17px);                    /* 둥근 버튼 */
	box-shadow:0 3px 9px rgba(0,0,0,.18);                       /* 떠 있는 버튼 느낌 */
	transition:transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
.qbtn:active{ transform:translateY(2px); box-shadow:0 1px 4px rgba(0,0,0,.22); filter:brightness(.95); } /* 누름 피드백 */
.qbtn--map{ background:#0a5aa6; }
.qbtn--tel{ background:#92c538; }
.qbtn-label{ display:inline-flex; align-items:center; gap:clamp(7px, 2.4cqw, 13px); }
.qbtn-label i{ font-size:clamp(20px, 6cqw, 29px); }             /* 아이콘도 큼직하게 */

.mbtn{width:100%;}
.mbtn ul li{float:left; display:inline; width:33.33333333333333%;}


.footer{width:100%; clear:both; background:#fff !important; overflow:hidden; }
/* 반응형: 화면 폭에 비례하되 최소/최대로 가독성 보장 */
.copy_txt{color:#454545; font-size:clamp(10px, 3cqw, 13px); float:left; line-height:1.6; padding:4.5% 2.5%;}


.s_cont{margin:3% 0 0 0; width:100%; clear:both;}
.tit{margin-top:5%; width:98%; margin:0 auto; padding-top:5px;}
/* m_sub 페이지 제목(.tit_txt) 왼쪽 간격 — .s_cont 안에서만(gb 게시판은 .s_cont 없어 영향 없음).
   공유버튼 페이지(.tit--share)는 자체 좌우 패딩이 있으므로 제외 */
.s_cont .tit:not(.tit--share){ padding-left:clamp(10px, 3cqw, 16px); box-sizing:border-box; }
/* 소제목: 누르면 전체 메뉴(모달) 열려 바로 이동 — 탭 가능 표시 */
.tit_txt{float:left; font-size:clamp(17px, 5cqw, 24px); font-weight:bold; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.tit_txt::after{ content:"\25BE"; margin-left:clamp(4px,1.5cqw,8px); font-size:0.78em; color:#5e80bf; vertical-align:middle; }
.tit_txt:active{ opacity:.6; }
/* 게시판(gb) 정적 제목 — sub 의 .tit_txt 와 동일한 clamp 크기로 전역 통일. 드롭다운 아니므로 ▾화살표·포인터 없음 */
.tit_txt--board{ float:none; cursor:default; font-size:clamp(17px, 5cqw, 24px); }
.tit_txt--board::after{ content:none !important; }

.sub{width:98%; margin:0 auto; clear:both; padding-top:3%; font-weight:100; font-size:clamp(12px, 3.5cqw, 15px); padding-bottom:clamp(40px, 13cqw, 60px); color:#777777;}
.sub h3{margin:clamp(20px,6cqw,32px) 0 10px 0; color:#454545;}

.down{width:40%; margin:30px auto;}

.down2{width:100%; margin:30px auto;}
.down2 ul li{float:left; width:40%;}

.gomun{width:30%; margin:30px auto;}

dl {  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

.pg_history dl {  overflow: hidden;}

dl dd {  margin-bottom: 15px;}

.pg_history dl dt {  float: left;  clear: left;  width: 20%;  font-size: 25px;  font-weight: 700;  color: #2e539d;  line-height: 30px;}

.pg_history dl dd {
  display: table;
  padding: 6px 0;
}
.pg_history dl ul li em {
  position: absolute;
  left: 0;
  top: 0;
  color: #2e539d;
}
.pg_history dl ul li {
  position: relative;
  padding-left: 30px;
}
.pg_history dl ul ul li {
  padding-left: 0;
  color: #8190af;
}

.ta04 {  width: 100%;  margin-top: 5%;}
.ta04 thead {  background-color: #6a91cc;  border: 1px solid #6a91cc;  height: 45px;  color: #fff;}
.ta04 thead th{ font-size:0.8em; padding:2% 0;}
.ta04  tr {  display: table-row;  vertical-align: inherit;  border-color: inherit;}
.ta04 tbody td {  border-bottom: 1px solid #6a91cc;  padding: 15px 0;  background-color: #f8f8f8;  text-align: center; font-size:0.5em;}
.ta04 tbody .left {  text-align: left;  padding-left:1%;}

.paging{margin-top:20px; clear:both; text-align:center;}
.paging a{text-decoration:none; display:inline-block; width:26px; height:28px; font-size:2em; font-weight:400; letter-spacing:-1px; word-spacing:-1px; line-height:25px; border: 1px solid #e6e6e6; text-align:center; vertical-align:middle; color:#444444; padding-top:5px; margin:0px 1px;}
.paging a:hover, .paging .active{border: 1px solid #3a67ab; color:#fff; background:none repeat scroll 0% 0% #3a67ab;}


.d_tab {  width: 100%;  margin:5% auto; background-color:#6a91cc;}
.d_tab .d_tabb {  overflow: hidden; width:100%;}

/* //MSDS ��ư 5��(20%)
.d_tab .d_tabb li {  float: left; width:20%;}
*/

/*MSDS ��ư 4��*/
.d_tab .d_tabb li {  float: left; width:25%;}
.d_tab .d_tabb li a img{ width:100%;}

.map{margin:0 auto;}




.bottom8{width:280px; position:relative; border:1px solid #c8c8c8; padding:20px; margin-bottom:50px;}
.bottom8:after{display:block; clear:both; content:'';}
.photo8{width:280px;}
.photo8 li{float:left; padding-left:45px;}
.photo8:first-child{display:inline-block; margin-bottom:30px;}
.photo8 li:first-child{padding-left:0 !important;} 

/* ── 텍스트 탭(회사소개/제품설명/가스뉴스 등) — 반응형 가로 탭 ──────────
   가스자료(.sub_tab--custom 드롭다운)는 :not()으로 제외. float→flex 균등 분배. */
.sub_tab{ width:100%; clear:both; box-sizing:border-box; }
.sub_tab:not(.sub_tab--custom){ float:none; padding:clamp(10px,4cqw,18px) clamp(8px,3cqw,14px) clamp(2px,1cqw,6px); }
.sub_tab:not(.sub_tab--custom) ul{
	display:flex; flex-wrap:wrap; align-items:stretch; gap:clamp(5px,1.7cqw,10px);
	width:100%; margin:0; padding:0; list-style:none; float:none;
}
.sub_tab:not(.sub_tab--custom) ul li{ flex:1 1 0; min-width:0; float:none; margin:0; padding:0; border:0; display:flex; }
.sub_tab:not(.sub_tab--custom) ul li a{
	display:flex; align-items:center; justify-content:center; text-align:center;
	width:100%; min-height:clamp(40px,11cqw,52px); padding:clamp(5px,1.6cqw,9px) clamp(4px,1.4cqw,9px);
	border:1px solid #cdd9ea; border-radius:clamp(5px,1.6cqw,9px);
	background:#f6f9fd; color:#43536b; box-sizing:border-box;
	font-size:clamp(12.5px,3.7cqw,16px); font-weight:600; letter-spacing:-0.4px; line-height:1.2;
	text-decoration:none; word-break:keep-all;
}
.sub_tab:not(.sub_tab--custom) .on{ background:transparent; }
.sub_tab:not(.sub_tab--custom) .on a{ background:#5e80bf; border-color:#5e80bf; color:#fff; }
.sub_tab:not(.sub_tab--custom) ul li a:active{ background:#e8eef8; }

/* sub 본문 이미지 — 폭 맞춤 + 비율 유지 (왜곡/오버플로 방지) */
.sub img{ max-width:100%; height:auto; }

/* ── 가스관련자료 탭(sub_51~59) 모바일 큼직한 커스텀 드롭다운 ──────────
   2-클래스 셀렉터(.sub_tab.sub_tab--custom)로 전역/인라인 규칙을 특이도로 덮어씀.
   다른 탭 그룹은 클래스가 없어 영향 없음. JS 토글(.open)로 열림. */
.sub_tab.sub_tab--custom{ width:100%; clear:both; float:none; padding:4cqw 3cqw 0; box-sizing:border-box; }
.sub_tab.sub_tab--custom ~ .sub{ padding-top:0; }   /* selectbox? ?? ?? ? ????? ?? ???? ?? */
.sub_tab.sub_tab--custom .csel{ position:relative; width:100%; }

/* 트리거 (큼직한 버튼) */
.sub_tab.sub_tab--custom .csel-trigger{
	display:flex; align-items:center; justify-content:space-between;
	width:100%; box-sizing:border-box;
	padding:clamp(11px,3.2cqw,17px) clamp(15px,4.5cqw,22px); margin:0;
	border:0; border-left:clamp(4px,1.3cqw,7px) solid var(--green-light); border-radius:clamp(9px,2.6cqw,14px);
	background:#fff; text-align:left; cursor:pointer; outline:none;
	box-shadow:0 clamp(2px,0.8cqw,5px) clamp(9px,2.6cqw,15px) rgba(108,156,63,.13), inset 0 0 0 1px rgba(108,156,63,.16);
	transition:border-radius .18s, box-shadow .18s;
}
.sub_tab.sub_tab--custom .csel.open .csel-trigger{ border-radius:clamp(9px,2.6cqw,14px) clamp(9px,2.6cqw,14px) 0 0; box-shadow:inset 0 0 0 1px rgba(108,156,63,.16); }
.sub_tab.sub_tab--custom .csel-current{ font-size:clamp(19px,6.4cqw,28px); font-weight:800; color:var(--green-light); letter-spacing:-0.2cqw; }
.sub_tab.sub_tab--custom .csel-arrow{
	flex:0 0 auto; width:clamp(7px,2.2cqw,11px); height:clamp(7px,2.2cqw,11px); margin-left:clamp(5px,1.6cqw,9px);
	border:0; border-right:clamp(2px,0.7cqw,3px) solid #93b56d; border-bottom:clamp(2px,0.7cqw,3px) solid #93b56d;
	transform:rotate(45deg); transition:transform .2s;
}
.sub_tab.sub_tab--custom .csel.open .csel-arrow{ transform:rotate(-135deg); }

/* 드롭다운 목록 (큼직한 항목) */
.sub_tab.sub_tab--custom .csel-list{
	position:absolute; left:0; right:0; top:100%; z-index:50;
	box-sizing:border-box; width:100%;  /* 트리거와 동일 너비 (보더 포함 100%) — 인라인 width:100% content-box 보정 */
	float:none; margin:0; padding:0; list-style:none;
	max-height:0; overflow:hidden; opacity:0;
	background:#fff; border:0 solid var(--green-light); border-top:0;
	border-radius:0 0 clamp(9px,2.6cqw,14px) clamp(9px,2.6cqw,14px);
	box-shadow:0 2cqw 5cqw rgba(47,64,96,.18);
	transition:max-height .24s ease, opacity .18s ease;
}
.sub_tab.sub_tab--custom .csel.open .csel-list{
	max-height:80vh; overflow-y:auto; opacity:1;
	border-width:0 clamp(2px,0.6cqw,3px) clamp(2px,0.6cqw,3px);
}
/* float:none/display:block/width:100% = 페이지 잔존 인라인(.sub_tab ul li{float:left})을 눌러 세로 목록 유지 */
.sub_tab.sub_tab--custom .csel-option{
	float:none; display:block; width:100%; box-sizing:border-box; margin:0;
	padding:clamp(10px,3.2cqw,14px) clamp(14px,4.5cqw,20px); font-size:clamp(13px,3.7cqw,16px); font-weight:600; color:#43536b;
	letter-spacing:-0.3px; border-top:1px solid #eef2f8; cursor:pointer; word-break:keep-all;
}
.sub_tab.sub_tab--custom .csel-option:first-child{ border-top:0; }
.sub_tab.sub_tab--custom .csel-option:active{ background:#eef3fb; }
.sub_tab.sub_tab--custom .csel-option.is-current{ color:#6f9c3f; font-weight:700; background:#f3f8ec; }


.pc{width:100%; clear:both; border-top:dotted 1px #878787;}
.pc a p{width:80%; margin:5% auto; border:solid 1px #c9c9c9; text-align:center; padding:2%; border-radius:10px; color:#454545; background-color:#f4f4f4;}

.sv_guest {line-height:20px;}