@media (max-width: 360px) {
  html {
    font-size: 22px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  html {
    font-size: 25px;
  }
}
@media (min-width: 481px) {
  html {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
	.t-up-true {display:none !important; }
	.pc-true { display:none !important; }
	.t-true { display:none !important;  }
	.m-true { display:block !important; }
	.container { width:100%;  }

	.header {  position:relative;   height: 90px;    word-break: keep-all;		border-bottom:1px solid #ddd;   background:#fff;  }
	.header a {    color: #000;  }
	.header  h1  {position:relative;text-align:center;z-index:1;padding-top: 35px;}
	.header  h1  img {max-width: 65%;}
	.header  .header-site-link { background:#f2f2f2; padding: 10px 15px; }
	.header  .header-site-link  a {   color:#333;  }

	.menu-open {    position: absolute;    top: 35px;   left: 15px;    z-index:1;   }
	.menu-open img { width:30px;   }
	.header .search-btn {    z-index: 10;    position: absolute;   top: 35px;    right: 15px;    }
	.header .search-btn a.search-close  {display:none;  }

	.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: #009697;    letter-spacing: -1px;    text-align: left;   }
	.all-menu-close {    position: absolute;    top: 0.3rem;    right:15px;  }
	.all-menu-close a {    font-size:1.18181818rem;	color:#fff;   }
	.all-menu-sns{display: none;}

	.top-right-div{ padding-right:0.7rem; margin-bottom:0.7rem;  border-bottom:1px solid #77b1eb; padding-top:0.7rem;padding-bottom:0.63rem; }
	.top-sns { float:left; margin-right: 0.9rem;}
	.top-sns li { float:left; margin-right: 0.2rem; }
	/*.top-util { padding-right:0.7rem; margin-bottom:0.7rem;  border-bottom:1px solid #77b1eb; padding-top:0.7rem;padding-bottom:0.63rem;}*/
	.top-util li { float:left;  font-size: 0.650909091rem; margin-right:0.5rem; line-height:1.8;   }
	.top-util li a { color:#fff; vertical-align: middle;   }




	.gnb { }
	.gnb .menu { border-bottom:1px solid #ccc;   }

	#gnb .menu { margin-bottom:0.7rem;  }
	#gnb h3 { font-size: 0.750909091rem;  margin-bottom:0.5rem;  }
	#gnb h3 a { color:#fff; font-weight:bold;   }
	#gnb ul { background:url(../images/common/m_all_bg.jpg) repeat-y center top; padding-top:0.7rem; padding-bottom:5px;}
	#gnb ul.depth-menu {  display:block !important;  }
	#gnb ul:after { content:''; display:table; clear:both;  }
	#gnb ul > li { float:left; width:50%;  padding-bottom:0.4rem; padding-left:10px; padding-right:10px;  }
	#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.590909091rem;; color:#000; font-weight:bold; cursor: pointer;}
	#gnb ul li ul {display:none;  padding-top:0.3rem; background:none;   }
	#gnb ul li ul li { float:left; width:100%; padding-bottom:0.3rem; padding-left:0px; padding-right:0px;  }
	#gnb ul li ul li a { font-size:0.540909091rem;; color:#555; font-weight:normal;  }

/*	.gnb h3 { font-size: 18px;   }
	.gnb h3 a { color:#000; padding-left:5px; display:block; padding-top:0.9rem; padding-bottom:0.7rem;  width:100%; font-weight:bold; }
	.gnb h3 a:hover, .gnb h3 a.active , .gnb .menu.active h3 a { text-decoration:none; color:#e51e25;    }
	.gnb h3 a i { float:right; font-size:30px;   }
	.gnb .depth-menu { display:none;  padding-top:0.4rem; padding-bottom:0.4rem;  background:#fff; }
	.gnb .menu.active .depth-menu { display:block;  }
	.gnb ul:after { content:''; display:table; clear:both;  }
	.gnb ul > li { float:left; width:50%;  padding-bottom:0.6rem; padding-left:10px; padding-right:10px;  }
	.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:15px; color:#000;  }
*/
	.top-search-wrap { display:none;  padding-top:1rem; padding-bottom:1rem; padding-left:15px; padding-right:15px; z-index:100;   position:absolute; top: 90px; left:0px; width:100%; background:#fff;  }
	.top-search-wrap form {  background:#ebebeb; padding-left: 30px; border-radius:30px;  }
	.top-search-wrap input {    width: calc(100% - 60px);    height: 1.81818182rem;   background:#ebebeb;  border:0px;    vertical-align: top;	 float:left;  color:#222; border:0px; padding:4px 10px 0px; 	 font-size:0.6rem;   }
	.top-search-wrap form button { float:left;background:none; border:0px; height:auto;  height: 1.81818182rem;   }
	.top-search-wrap button  i { font-size:0.90909091rem; color:#000;  }

	.bottom-banner {float: left; width: 100%; border-top: 1px solid #ddd; height: 90px; display:none;  }
	.bottom-banner .container {position: relative;}
	.bottom-banner .main-bottom {float: left;width: 70%;padding-left: 15px;}
	.bottom-banner .bottom-banner-list li {float: left; padding-top: 30px; text-align: left;	}
	.bottom-banner .bottom-banner-list img {max-width: 62%;}
	.bottom-banner .bottom-banner-btn {float: left; position: absolute; top: 32px; right: 0;}
	.bottom-banner .bottom-banner-btn div {float: left;font-size: 0px;line-height: 20px;}
    .bottom-banner .bottom-banner-btn div a img {width: 12px;}
	.bottom-banner .bottom-banner-btn div.bb-btn-prev a {padding: 0 10px;border-right: 1px solid #ddd;}
	.bottom-banner .bottom-banner-btn div.bb-btn-next a {padding: 0 10px;}
	.bottom-banner .bottom-banner-btn div.bb-btn-play a {padding: 0 15px 0 10px;}

	.footer {clear: both;  width:100%;  background:#333;  padding:50px 15px;  }
	.footer .footer-logo {padding-bottom: 40px;}
	.footer .footer-link {float: left; width: 100%; margin-bottom: 20px;}
	.footer .footer-link a {color: #fff; float: left; padding: 0 15px; font-size: 0.58rem;  background:url(../images/main/util_line.png) no-repeat left 7px; }
	.footer .footer-link a:first-child {padding-left: 0; background: none;}
	.footer address {float: left; width: 100%; border-top: 1px solid #555; padding-top: 15px; color: #fff; font-weight: 300; font-size: 0.58rem; line-height: 170%;}

  .back {
    display: none;
    z-index: 10;
    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;

    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);
  }


	/*메인*/

	.main {    z-index: 1;    word-break: keep-all;    height: 100%;  }
	.section1 { position:relative;  }
	.main-rolling .main-roll-btn div.roll-btn {display:none;  }


	/*.section1 {float: left; width: 100%; padding: 0 15px; height: 380px; background: url(../images/main/main_img.jpg) no-repeat center top;}
	.main-roll {position: relative; padding-top: 30px;}
	.main-roll .main-roll-list {height: 250px;}
	.main-roll .main-roll-btn {}
	.main-roll .main-roll-btn div {position:absolute;}
	.main-roll .main-roll-btn div#slide-counter {color: #fff;font-size: 22px;bottom: 0px;right: 0;}
	.main-roll .main-roll-btn div#slide-counter span {font-size: 28px;color: #fff;}
	.main-roll .main-roll-btn div#slide-counter span.none {font-size: 22px;}
	.main-roll .main-roll-btn div.roll-btn {position: absolute; top: 140px; }
	.main-roll .main-roll-btn div.roll-btn-prev {left: 0px;}
	.main-roll .main-roll-btn div.roll-btn-next {right: 0px;}
	.main-roll .main-roll-btn div img {width: 26px;}
*/

	.section2 {float: left; width: 100%; background: #f7f7f7; padding: 40px 15px;}
	.icon-group {float: left; width: 100%;}
	.icon-group li {float: left; width: 33.3333%; text-align: center; padding-bottom: 20px;}
	.icon-group li a {color: #000; font-size: 18px;}
	.icon-group li a img {display: block; padding-bottom: 5px; margin: 0 auto;}
	.main-hot {float: left; width: 100%; position: relative; margin: 10px 0 40px; text-align: center;}
	.main-hot ul li img {max-width: 100%;}
	.main-hot-btn {position: absolute; bottom: -17px; right: 0; font-size: 0; width: 100%; text-align: center;}
	.main-hot-btn .hot-banner-bg {display: inline-block; background: rgba(0, 0, 0, 0.6); border-radius: 20px; height: 34px;}
	.main-hot-btn .banner-pager,
	.main-hot-btn .banner-btn-prev,
	.main-hot-btn .banner-btn-play,
	.main-hot-btn .banner-btn-next {float: left; color: #c5cecb; font-size: 16px;}
	.main-hot-btn i:before {color: #c5cecb; line-height: 34px;}
	.main-hot-btn .banner-pager {padding: 0 10px 0 20px; line-height: 34px; color: #fff; overflow: hidden;}
	.main-hot-btn .banner-btn-play {padding-right: 15px;}

	.main-board  {position: relative; float: left; width: 100%; height: 280px; padding-top: 20px; background: #fff; text-align: center;}
	.main-board .main-board-list {display: inline-block;}
	.main-board .main-board-list h3 {display: inline-block; padding-bottom: 12px; margin: 0 5px;}
	.main-board .main-board-list h3 a {display: inline-block; padding: 10px 15px; font-size: 20px; color: #555; font-weight: 500;}
	.main-board .main-board-list h3 a.active, .main-board h3 a:hover {background: #009697; color: #fff; border-radius: 30px; text-decoration: none;}
	.main-board .main-board-list ul {  display:none;  position:absolute; top:80px; right:0; width:100%; height: 200px; }
	.main-board .main-board-list ul li {float: left; width: 50%; font-size: 16px; border-left: 1px solid #ddd; height: 200px; position: relative;}
	.main-board .main-board-list ul li:first-child {border: none;}
	.main-board .main-board-list ul li:last-child {display: none;}
	.main-board .main-board-list ul li a {display: block; margin: 10px; word-break: break-all;}
	.main-board .main-board-list ul li a:hover {text-decoration: none;}
	.main-board .main-board-list ul li .tit {font-size: 16px; color: #000; font-weight: 500; display: block;  padding-bottom: 10px;}
	.main-board .main-board-list ul li .txt {font-size: 14px; color: #333; word-break:break-all; }
	.main-board .main-board-list ul li .date {color: #555; font-size: 12px;}
	.main-board .main-board-list .more-btn { display:none;  position:absolute; top:25px;  right:15px;   }
	.main-board .main-board-list .more-btn img { width:30px;  }


	.section3 {float: left; width: 100%; /*background: url(../images/main/bg_pattern.png) repeat left top #facd64;*/  background: url(../images/main/bg_img_01.jpg) no-repeat center top #facd64; background-size:cover;   height: 400px; padding: 40px 15px; position: relative;}
	.section4 {float: left; width: 100%; background: url(../images/main/bg_img_02.jpg) no-repeat center top #61c1be;  /*background: url(../images/main/bg_pattern.png) repeat left top #61c1be;*/ background-size:cover;  height: 400px; padding: 40px 15px; position: relative;}
	.main-request .container {position: relative;}
	.main-request h3 {text-align: center; font-size: 26px; color: #555; margin-bottom: 30px; font-weight: 300;}
	.main-request h3 strong {color: #000; font-size: 30px; font-weight: 600;}
	.main-request ul {float: left; width: 100%;}
	.main-request ul li {position: relative; float: left; width: 25%; height: 250px; padding: 30px; border-radius: 50%; background: #fff;  text-align: center; font-weight: 500;}
	.main-request ul li .label {display: inline-block; font-size: 18px; color: #009697; border-bottom: 2px solid #009697; margin-bottom: 15px; font-weight: 500;}
	.main-request ul li .tit {font-size: 16px; color: #000;}
	.main-request ul li .date {position: absolute; bottom: 50px; left: 0; font-size: 16px; color: #009697; width: 100%; text-align: center;}
	.main-request ul li .date span {color: #333;}
	.main-request ul li .mb-btngroup {display: none; width: 250px;  height: 250px; padding-top: 85px; border-radius: 50%; text-align: center; background: rgba(50, 58, 67, .88); position: absolute; top: 0; left: 0;}
	.main-request ul li .mb-btngroup a {display: inline-block; width: 160px; height: 40px; border-radius: 20px; padding-top: 7px; margin-bottom: 10px; color: #fff; text-align: center; font-size: 16px; border: 1px solid #fff;}
	.main-request ul li .mb-btngroup a:hover {background: #fff; text-decoration: none; color: #000;}
	.main-request ul li.end { display:none;  }
	.main-request ul li.end .label {color: #7c7f88; border-color: #7c7f88;}
	.main-request ul li.end .tit,
	.main-request ul li.end .date,
	.main-request ul li.end .date span {color: #7c7f88;}
	.main-request ul li.start:hover .mb-btngroup {display: block;}
	.main-request .business-btn div,
	.main-request .program-btn div {position: absolute; top: 170px;}
	.main-request .business-btn div.business-btn-prev,
	.main-request .program-btn div.program-btn-prev {left: 0px;}
	.main-request .business-btn div.business-btn-next,
	.main-request .program-btn div.program-btn-next {right: 0px;}
	.main-request .more-btn {position: absolute; top: 0; right: 0;}
.main-request .bx-clone { display:none !important;  }

	.section5 {float: left; width: 100%; height: 400px; background: #f0f4ff; padding: 40px 15px;}
	.reserve-txt {float: left;width: 100%;position: relative;margin-bottom: 20px;}
	.reserve-txt .small-txt {font-size: 14px; color: #9c9ea6; text-align: center; letter-spacing: 0.3px;}
	.reserve-txt h3 {font-size: 26px; font-weight: bold; color: #000; padding: 5px 0 25px; text-align: center;}
	.reserve-txt .txt {/* display: none; */font-size: 16px;color: #000;}
	.reserve-txt .more-btn {
    position: absolute;
    right: 0;
    top: 10px;
}
	.main-reserve {float: left; width: 100%; height: 200px; position: relative;}
	.main-reserve .reserve-list li {position: relative; width: 100%; height: 200px;}
	.main-reserve .reserve-list li img {min-width: 100%; min-height: 100%; }
	.main-reserve .reserve-list li .txt-box {position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px;}
	.main-reserve .reserve-list li .txt-box .tit {font-size: 28px; font-weight: bold; color: #fff;}
	.main-reserve .reserve-list li .txt-box .txt {font-size: 16px; color: #fff;}
	.main-reserve .reserve-list li .txt-box .btn {padding: 10px 0 0 0;}
	.main-reserve .reserve-list li .txt-box .btn a {display: inline-block; width: 120px; height: 40px; border-radius: 20px; margin-right: 10px; padding-top: 6px; border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px;}
	.main-reserve .reserve-list li .txt-box .btn a:hover {background: #fff; text-decoration: none; color: #000;}
	.main-reserve .reserve-btn div {position: absolute; top: 80px;}
	.main-reserve .reserve-btn div.reserve-btn-prev {left: 0px;}
	.main-reserve .reserve-btn div.reserve-btn-next {right: 0px;}


	.section6 {float: left; width: 100%; padding: 40px 15px;}
	.main-calendar {float: left; width: 100%; border-top: 2px solid #111; display:none; }
	.main-calendar .calendar-table {float: left; width: 100%; padding-top: 25px;}
	.main-calendar .calendar-table h3 {float: left; font-size: 32px; color: #000;}
	.main-calendar .calendar-table .calendar-btn {float: right; padding-top: 5px;}
	.main-calendar .calendar-table .calendar-btn a {border-left: 1px solid #bbb; padding: 0 15px;}
	.main-calendar .calendar-table .calendar-btn a:first-child {border: none;}
	.main-calendar .calendar-table table {float: left; width: 100%; padding-top: 25px;}
	.main-calendar .calendar-table table thead th {background: #eaeaea; padding: 10px 0; text-align: center; font-size: 18px; color: #000;}
	.main-calendar .calendar-table table tbody td {text-align: center; padding: 10px 0; font-size: 18px; color: #333;}
	.main-calendar .calendar-table table tbody td .today {display: inline-block; width: 44px; height: 44px; padding-top: 8px; color: #fff; background: #009697; border-radius: 50%;}
	.main-calendar .calendar-list {float: left; width: 100%; padding: 20px 0 0 0;}
	.main-calendar .calendar-list dl dt {font-size: 16px; color: #555; font-weight: normal; padding-left: 20px; background: url(../images/main/bullet_b.png) no-repeat left center;	}
	.main-calendar .calendar-list dl dd {margin-left: 3px; border-left: 1px solid #ccc; padding: 14px 0 40px 15px; font-size: 18px; color: #000;}
	.main-calendar .calendar-list .more-btn {float: left; width: 100%; margin-top: 20px;}
	.main-calendar .calendar-list .more-btn a {display: block; width: 100%; font-size: 18px; padding: 12px; color: #000; text-align: center; border: 1px solid #aaa; border-radius: 30px;}

	.main-photo {float: left; width: 100%; position: relative; margin-top: 40px;}
	.main-photo h3 {position: absolute; top: 0px; left: 0px; font-size: 40px; color: #333; z-index: 100;}
	.main-photo .photo-list {float: left; z-index: 99; position: relative;}
	.main-photo .photo-list li {border-radius: 50%; width: 250px; height: 250px; text-align: center;z-index: 1;}
.main-photo .photo-list li:after {position: absolute; top: 0; left: 0; width: 250px; height: 250px; content: ""; z-index: -1; border-radius: 50%; /*opacity: 0.7!important; filter: brightness(99%); filter: alpha(opacity=70); */}
	.main-photo .photo-list li a {color: #fff;font-size: 16px;padding: 160px 30px 0 30px;display: block;text-align: center;}
	.main-photo .photo-list li .date {text-align: center;color: #fff;display: block;padding-top: 10px;font-size: 0.55rem;  letter-spacing: 0;}
	.main-photo .photo-btn div {position: absolute; top: 140px;}
	.main-photo .photo-btn div.photo-btn-prev {left: 0px;}
	.main-photo .photo-btn div.photo-btn-next {right: 0px;}

}