@charset "utf-8";

* { margin: 0; padding: 0; } 
html, body {width: 100%; height: 100%; }
body {font-family: 'Noto Sans KR', 맑은 고딕, dotum, sans-serif; color:#555; font-weight: 400; font-style: normal; font-size: 18px; letter-spacing: -0.5px; line-height: 1.5; font-stretch: normal; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } 
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; }
ul, ol, li, dl {list-style: none; padding: 0; margin: 0; }


.no-scroll {height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; }

.layer-content::-webkit-scrollbar {
	width: 12px;  /* 스크롤바의 너비 */
}

.layer-content::-webkit-scrollbar-thumb {
	height: 30%; /* 스크롤바의 길이 */
	background: #ccc; /* 스크롤바의 색상 */
	border-radius: 12px;
	background-clip: padding-box;
	border: 2px solid transparent;
}

.layer-content::-webkit-scrollbar-track {
	border-radius: 12px;
	background: rgba(251, 251, 252, 0.4);  /*스크롤바 뒷 배경 색상*/
}




/* =======================================================
	wrapper
========================================================*/
#wrapper {display: table; table-layout: fixed; position: relative; overflow: hidden; width: 100%; height: 100%; border-collapse: collapse; padding-bottom: 50px;
padding-bottom: calc(env(safe-area-inset-bottom) + 50px);	padding-bottom: calc(constant(safe-area-inset-bottom) + 50px); box-sizing: border-box; }

.inner {position: relative; box-sizing: border-box; }
.inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.dim-layer {z-index: 9998; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: all .3s ease; }

.popup-dim-layer {display: none; z-index: 9998; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0.7; }





/* =======================================================
	header
========================================================*/
#header {display: table-row; position: relative; width: 100%; height: 1px; background-color: #fff;}
#header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}

#header_container {position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; }
#header_container:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}

.gnb-top {border-bottom: 1px solid #ddd; box-sizing: border-box; }
.gnb-top .inner {height: 100px;  }
.header-logo {width: 270px; margin: 0 auto; padding: 20px 0; }
.header-logo a {display: block; }
.header-logo img {max-width: 100%; }

.btn-category {display: none; }




/* gnb 
------------------------------------------------*/
.gnb-bottom { }
#gnb {display: block; max-width: 1160px; line-height: 80px; margin: 0 auto; }
#gnb:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
#gnb ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack:justify; -webkit-justify-content: space-between; justify-content: space-between; height: 100%; }
#gnb > ul > li {position: relative; width: 100%; height: 60px; line-height: 60px; text-align: center; }

#gnb > ul > li:before {content: ""; position: absolute; bottom: 0; left: 50%; display: block; width: 0; height: 5px; background-color: #36863d; transition: .3s; -webkit-transition: .3s; }
#gnb > ul > li:active:before,
#gnb > ul > li.active:before,
#gnb > ul > li:hover:before {left: 0; width: 100%; }
#gnb > ul > li > a {display: block; font-weight: 500; font-size: 18px; color: #303030; }

.header-left {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: left; padding-top: 13px; }
.header-left a {display: inline-block; }
.header-left img {max-width: 100%; height: 76px; }

.header-right {position: relative; }

/* util link */
.header-sns {display: inline-block; z-index: 1000; }
.header-sns > a + a {margin-left: 4px; }
.header-sns .btn-insta {display: inline-block; width: 38px; height: 40px; background: url("../images/icon/instagram.png") no-repeat bottom center / 31px; }
.header-sns .btn-youtube {display: inline-block; width: 38px; height: 38px; background: url("../images/icon/youtube.png") no-repeat center center; }
.header-sns .btn-100 {display: inline-block; width: 105px; height: 38px; background: url("../images/icon/100.png") no-repeat bottom -3px center; }


/* family site */
.header-family {display: inline-block; z-index: 998; position: absolute; top: -70px; right: 0; background-color: #fff; min-width: 160px; padding: 10px 22px; border: 1px solid #555; border-radius: 20px; box-sizing: border-box; cursor: pointer;}
.family-select {display: inline-block; width: 100%; line-height: 0; }
.btn-family {position: relative; font-size: 16px; }
.btn-family:after {content: ""; display: inline-block; position: absolute; background: url("../images/common/btn_family_open.png") no-repeat right center; width: 20px; height: 20px; margin-left: 5px; transition: all ease 0.2s;  }
.family-select li.active .btn-family:after { -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);}
.family-select .select-item {display: none; padding-top: 18px; }
.family-select .select-item.active {display: block; }
.select-option {line-height: 1.4; }
.select-option a {font-size: 14px; }
.select-option a:hover {text-decoration: underline; }


/* 다국어 */
.header-lang {display: inline-block; z-index: 1000; position: absolute; top: -70px; right: 172px; min-width: 100px; }
.header-lang.active {background-color: #fff; box-shadow: 0 3px 5px 4px rgba(0, 0, 0, 0.05); box-sizing: border-box;}
.header-lang .btn-lang {display: inline-block; padding: 10px 30px 10px 16px; background: url("../images/common/arrow_lang_open.png") no-repeat right center; color: #333; }
.header-lang.active .btn-lang {background-image: url("../images/common/arrow_lang_close.png");}
.lang-list {display: none; }
.header-lang.active .lang-list {display: block; }
.icon-lang {display: inline-block; padding-left: 40px; padding-bottom: 3px; background-position: left center; background-repeat: no-repeat; font-size: 16px; font-weight: 300; color: #000; }
.lang-list > li {padding: 5px 15px; cursor: pointer; text-align: left; }
.lang-list > li:first-child {padding-top: 5px; }
.lang-list > li:last-child {padding-bottom: 7px; }
.lang-list > li:hover {background-color: #f3f3f3; }
.lang-ko {background-image: url("../images/common/lang_kor.png"); }
.lang-en {background-image: url("../images/common/lang_eng.png"); }
.lang-cn {background-image: url("../images/common/lang_chn.png"); }
.lang-jp {background-image: url("../images/common/lang_jpn.png"); }




/* depth-menu
------------------------------------------------*/
.depth-container {display: none; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); z-index: 999; margin: 0 auto; background-color: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing: border-box; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.05);}
.depth-menu {width: 1160px; margin: 0 auto; }

.depth-menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.depth-menu > ul {width: 15%; padding: 26px 0; vertical-align: top; flex-grow: 1; text-align: center; }
.depth-menu > ul > li + li {margin-top: 25px; }
.depth-menu > ul > li a {display: block; line-height: 1.3; font-size: 16px; }
.depth-menu > ul > li:hover a {color: #00a43a; }





/* =======================================================
	container
========================================================*/
#container {display: table-row; position: relative; width: 100%; height: 100%; box-sizing: border-box; }
/* #container.main {background: linear-gradient(#f2f2f2, #eaeaea); } */
#container.sub {background-color: #fff; }
#container.sub:after {display: none; }

.container-inner {position: relative; min-height: 1000px; }

section:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}




/* =======================================================
	footer
========================================================*/
#footer {display: table-row; position: relative; width: 100%; height: 1px; }
#footer:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
#wrapper.main #footer {padding-top: 20px; border-top: 0; }
#footer .inner {padding: 25px 0; }

.sticky-top {display: none; }
.footer-gototop {position: absolute; top: 0; right: 0; }
.footer-gototop .btn-top {width: 40px; height: 40px; background:#242424 url("../images/icon/icon_arrow_up.png") no-repeat center center/11px auto; color: #fff; font-size: 16px; } 

/* 제휴업체 */
.footer-partner {border-bottom: 1px solid #e2e2e2; }
.partner-list {padding: 20px 35px; }
.partner-list .slick-slide {padding-right: 40px; }
.partner-list .slick-slide img {max-width: 100%; height: 34px; }

.footer-logo {float: left; position: relative; margin-right: 138px; padding-top: 50px; }
.footer-logo img {width: 260px; }

.footer-link-list {display: block; margin-bottom: 30px; }
.footer-link-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.footer-link-list li {display: inline-block; position: relative; margin: 0 10px 0; }
.footer-link-list li:before {content: ""; display: block; position: absolute; top: 5px; left: -9px; width: 1px; height: 16px; background-color: #777; }
.footer-link-list li:first-child {margin: 0 10px 0 0; }
.footer-link-list li:first-child::before {display: none;}
.footer-link-list li a {font-size: 14px; color: #777; }


.footer-info {float: left; position: relative; padding: 10px 0; line-height: 1.6; }
.footer-info:before {content: ""; display: inline-block; position: absolute; top: 0; left: -68px; width: 1px; height: 100%; background-color: #dedede; }
.footer-info p {font-size: 14px; }
.footer-info .cs-number {display: inline-block; margin-right: 50px; font-size: 18px; color: #333; font-weight: 500; }
.footer-info .cs-number.small {font-size: 14px; }

.footer-info .footer-address {}
.footer-info .footer-address span {display: inline-block; margin: 0 10px; position: relative; color: #888; }
.footer-info .footer-address span:after {content: ""; display: block; position: absolute; top: 5px; right: -13px; width: 2px; height: 13px; background-color: #888; }
.footer-info .footer-address span:first-child {margin: 0 10px 0 0; }
.footer-info .footer-address span:last-child::after {display: none; }
#footer .copyright {margin-top: 3px; font-size: 10px; color: #888; }





/* =======================================================
	popup
========================================================*/
#popup_main_mobile {display: none; }
.layer-popup {width: 320px; z-index: 9999; background-color: #fff; box-sizing: border-box; box-shadow: 0px 2px 7px 4px rgba(0, 0, 0, 0.2); }
.layer-header {width: 100%; padding: 18px 40px; box-sizing: border-box; color: #333; }

.layer-content {position: relative; width: 100%; height: 320px; max-height: 320px; overflow-y: auto; }

.popup-list li {}
.popup-list li > div {display: block; width: 100%; max-width: 100%; height: 100%; }
.popup-list li img {display: block; max-width: 100%; }

.layer-popup .slick-arrow {display: inline-block; position: absolute; bottom: -49px; left: 50%; z-index: 1000; transform: translateX(-50%); width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px;}
.layer-popup .slick-prev {position: absolute; margin-left: -30px; background-image: url("../images/common/btn_pop_prev.png");  }
.layer-popup .slick-next {position: absolute; margin-left: 30px; background-image: url("../images/common/btn_pop_next.png");  }

.slide-control {width: 20px; height: 20px; background: url("../images/common/btn_pause.png") no-repeat center center; text-indent: -9999px; }
.slide-control.play {background-image: url("../images/common/btn_play.png"); }

.layer-footer {position: relative; width: 100%; padding: 7px 10px 7px; background-color: #3e3e3e; box-sizing: border-box; text-align: center; }
.layer-footer .popup-close-wrapper {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.layer-footer .popup-close-wrapper button {width: 50%; text-align: center; color: #fff; font-size: 15px; }

.btn-popupclose {display: inline-block; position: absolute; top: 10px; right: 10px; z-index: 1; width: 25px; height: 25px; background: url("../images/main/btn_close.png") no-repeat center center; text-indent: -9999px;}


.layer-cctv {display: none; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); z-index: 1000; width: 900px; height: 675px; border-radius: 16px; box-shadow: 4px 3px 5px 3px rgba(0, 0, 0, 0.2);}
.layer-cctv .layer-content {position: relative; overflow: hidden; width: 900px; height: 675px; max-height: 675px; aspect-ratio: 0; background-color: #fff; border-radius: 16px;}
.layer-cctv iframe {position: absolute; top: -34px; left: -7px; width: 824px; }
.layer-cctv .close-x {display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: url("../images/main/btn_x.png") no-repeat center / 14px; background-color: rgba(0, 0, 0, 0.3);text-indent: -9999px;}
#video-viewport {width: 900px; height: 600px; }