@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
html {overflow: hidden; height: 100%;}
body {overflow: auto; height: 100%;}

/* ************************ 공용 ************************ */
a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important;}
a:link {text-decoration:none; color:#3d3833;}
a:visited {text-decoration:none; color:#3d3833;}
a:hover {text-decoration:none !important; color:#000;}
a:active {text-decoration:none; color:#3d3833;}
a,img {transition:all .1s linear;	-webkit-transition:all .1s linear; -moz-transition:all .1s linear;}

body {
	position:static; width:100%; min-width:320px;
	font-family:"NB",AppleSDGothicNeo-Light,DroidSans,HelveticaNeue,"돋움",sans-serif; font-size:16px; font-weight:300; line-height:1.6; color:#666;
}
body > section {position:relative; display:block; width:100%; margin:0 auto;}
#gotop {z-index:888; position:fixed; width:35px; height:35px; border-radius:7px; bottom:40px; right:60px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff; box-shadow:0 0 3px rgba(0,0,0,.3) !important; }

/* 컨텐츠 */
.contents img {max-width:100%; height:auto;}
.txt_ct {text-align:center;}


.tabWrap .tab_btn {display:grid; width:100%; margin:0 auto;}
.tabWrap .tab_btn.double {grid-template-columns:repeat(2,1fr);}
.tabWrap .tab_btn li a {display: inline-block; border: 1px solid #ddd; border-bottom:1px solid #ff4e73; padding:15px 10px; color: #999;  margin-top: 0px; transition: all 0.3s; width:100%; text-align:center; font-size:18px; font-weight:400; transform:rotate(0.03deg); background:#f9f9f9;}
.tabWrap .tab_btn li.on a {background:#fff; border:1px solid #ff4e73; color:#ff4e73; border-bottom:0;}
.tabItem {display:none;}
.tabItem.on {display:block;}

/* 스크롤러블 탭 */
.tab-wrapper {overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width: none; -ms-overflow-style: none; text-align:center;}
.tab-wrapper::-webkit-scrollbar {display:none;}
.tab-scroll {display:inline-flex; cursor:grab; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.tab-scroll, .tab-item, .tab-item > a {user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select: none;
  -webkit-user-drag: none;}
.tab-wrapper:active .tab-scroll {cursor:grabbing;}
.tab-wrapper.typeA .tab-scroll {border:1px solid #DDE1EB!important; border-radius:10px; overflow:hidden;}
.tab-wrapper.typeA .tab-item > a {display:block; color:#000; font-weight:600; padding:20px 40px; font-size:20px; white-space:nowrap; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; line-height:1.1; transition:none;}
.tab-wrapper.typeA .tab-item+.tab-item>a {border-left:1px solid #DDE1EB; }
.tab-wrapper.typeA .tab-item.on a {background:var(--blue); color:#fff;}

/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 1280px), print {

	html,body {}
	.mobile {display:none !important;}

	/*헤더*/
	header {z-index:999; position:absolute; width:100%; background:#fff;}
	header .head {position:relative; height:0px; margin:15px auto 0; max-width:1200px; }
	header .head h1 {position:relative; display:inline-block; z-index:1; padding-top:25px;}
	header .head h1 img {height:50px;}
	header .head .side {position:relative; float:right;}
	header .head .side a {float:left; padding-left:10px; display:block; color:#666; font-size:14px; }
	header .head .side a:hover {color:#ff4e73;}

	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {visibility:hidden; position:relative; float:left; width:100%; overflow:hidden; box-shadow: 0 3px 3px rgba(0, 0, 0, .05);}
	nav.pc:hover {box-shadow:5px 5px 7px rgba(0,0,0,.1) !important;}
	nav.pc .pc_wrap {margin:0 auto; max-width:1200px; text-align:right;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%; }
	nav.pc .navbg .dep1 {height:70px;}
	nav.pc .navbg .dep2 {height:100%; border-top:1px solid #ccc; background:#fff;}
	nav.pc .gnb {position:relative; display:inline-block; text-align:left !important;}
	nav.pc .gnb a.on {color:#ff4e73;}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#ff4e73;}
	nav.pc .gnb>ul {margin:0 !important; line-height:1.6; float:left;}
	nav.pc .gnb>ul>li {position:relative; float:left;}
	nav.pc .gnb>ul>li:last-child {padding-right:0 !important;}
	nav.pc .gnb>ul>li>a {display:block; width:100%; height:70px; line-height:70px; font-size:18px; color:#666;}
	nav.pc .gnb>ul>li.on>a {color:#ff4e73;}
	nav.pc .gnb>ul>li>ul {position:absolute; top:80px; left:0; width:100% !important; z-index:100;}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; padding:4px 0; color:#666; font-size:14px; line-height:2;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#ff4e73;}
	nav.pc .gnb>ul>li>ul>li.on a {color:#ff4e73;}
	nav.pc .main_right {position:relative; z-index:10; display:inline-block; margin-left:70px;}
	nav.pc .main_right>ul>li {float:left; height:70px; line-height:70px;}
	nav.pc .main_right>ul>li:first-child {margin-right:10px;}
	nav.pc .main_right>ul>li>a {padding:8px 15px; color:#fff; border-radius:5px;}
	nav.pc .main_right>ul>li:first-child>a {background:#ff4e73;}
	nav.pc .main_right>ul>li:first-child>a:hover {background:#cf183f;}
	nav.pc .main_right>ul>li:nth-child(2)>a {background:#444; margin-right:10px;}
	
	nav.pc .main_right>ul>li:nth-child(2)>a:hover {background:#000;}
	nav.pc .gnbBg {position:absolute; width:100%; height:230px; z-index:10; background:url(../images/common/bg_menuon.png) no-repeat center bottom;}
	nav.pc .main_right>ul>li:nth-child(3)>a {background:#00bcd4;}
	nav.pc .main_right>ul>li:nth-child(3)>a:hover {background:#01a0b4;}
	/*footer*/
	footer {position:relative; max-width:100%; color:#666; text-align:left !important; font-weight:400; background:url(../images/common/bg_footer.png) no-repeat;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto; padding:60px 0 40px; font-size:14px; font-weight:300;}
	footer address>div {display:inline-block;}
	footer address>img {display:inline-block; margin:-75px 0 0 100px; max-width:100%; position:absolute; right:0; bottom:21px;}
	footer address .logo {margin:0; padding:0;}
	footer address .footer_link {margin-bottom:20px;}
	footer address .footer_link a {color:#fff; padding-right:30px;}
	footer address .footer_link .admin{padding:8px 15px; background:#fdf07f; border-radius:10px; color:#603913; overflow:hidden;}
	footer address .address {color:#fff;}
	footer address .address span {padding-right:10px;}
	footer address .qrCode {float:right;}
	footer address .qrCode img {display:block; margin:0 auto 5px;}
	footer address .qrCode a {color:#fff;}

	/* 서브메뉴 :: snb */
	.subBg {margin-top:100px; background:#ff8699;}
	.subTitle {margin:0 auto; padding-top:80px; max-width:1200px; min-height:235px; vertical-align:middle; color:#fff; background: url(../images/common/bg_subtop.png) no-repeat bottom right;}
	.subTitle h2 {font-size:40px; font-weight:300; margin-bottom:15px;}
	.snb {width:80%; margin:0 auto 80px; text-align:center;}	
	.snb>.tableMode {display:table; clear:both; float:none; width:100%; max-width:100%; padding:0; margin:0;	border:1px solid #ddd; border-radius:10px; overflow:hidden; }
	.snb>.tableMode>* {display:table-cell; float:none; margin:0; border-right:1px solid #ddd; text-align:center; font-size:18px;}
	.snb>.tableMode>li:last-child {border-right:0;}
	.snb>.tableMode li a {display:block; padding:12px 0; font-size:14px;color:#333;}
	.snb>.tableMode li a:hover{color:#fff; background-color:#ff4e73;}
	.snb>.tableMode li.on a {color:#fff; background-color:#ff4e73;}
	.snb>.tableMode .middle {vertical-align:middle;}
	.grid2 li {width:50%;}
	.grid4 li {width:25%;}
	.grid5 li {width:20%;}
	
	/*컨텐츠*/
	.contents {max-width:1200px; margin:0 auto; padding:100px 0; overflow:hidden;}
}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (min-width: 991px) and (max-width:1279px) {

	html,body {}
	.mobile {display:none !important;}

	/*헤더*/
	header {z-index:999; position:absolute; width:100%; background:#fff;}
	header .head {position:relative; margin:15px auto 0; padding:0 15px 15px; border-bottom:1px solid #ddd;}
	header .head h1 {position:relative; display:inline-block; z-index:1;}
	header .head h1 img {height:33px;}
	header .head .side {position:absolute; right:15px; bottom:10px;}
	header .head .side a {float:left; padding-left:10px; display:block; color:#666; font-size:14px; }
	header .head .side a:hover {color:#ff4e73;}

	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {visibility:hidden; position:relative; display:block; width:100%; overflow:hidden;}
	nav.pc:hover {box-shadow:5px 5px 7px rgba(0,0,0,.1) !important;}
	nav.pc .pc_wrap {margin:0 auto; text-align:center;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%; }
	nav.pc .navbg .dep1 {height:70px;}
	nav.pc .navbg .dep2 {height:100%; border-top:1px solid #ccc; background:#fff;}
	nav.pc .gnb {position:relative; display:inline-block; text-align:left !important;}
	nav.pc .gnb a.on {color:#ff4e73;}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#ff4e73;}
	nav.pc .gnb>ul {margin:0 !important; line-height:1.6; float:left;}
	nav.pc .gnb>ul>li {position:relative; float:left;}
	nav.pc .gnb>ul>li:last-child {padding-right:0 !important;}
	nav.pc .gnb>ul>li>a {display:block; width:100%; height:70px; line-height:70px; font-size:18px; color:#666;}
	nav.pc .gnb>ul>li.on>a {color:#ff4e73;}
	nav.pc .gnb>ul>li>ul {position:absolute; top:80px; left:0; width:100% !important; z-index:100;}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; padding:4px 0; color:#666; font-size:14px; line-height:2;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#ff4e73;}
	nav.pc .gnb>ul>li>ul>li.on a {color:#ff4e73;}
	nav.pc .main_right {position:relative; z-index:10; display:inline-block; margin-left:50px;}
	nav.pc .main_right>ul>li {float:left; height:70px; line-height:70px;}
	nav.pc .main_right>ul>li:first-child {margin-right:10px;}
	nav.pc .main_right>ul>li>a {padding:8px 15px; color:#fff; border-radius:5px;}
	nav.pc .main_right>ul>li:first-child>a {background:#ff4e73;}
	nav.pc .main_right>ul>li:first-child>a:hover {background:#cf183f;}
	nav.pc .main_right>ul>li:nth-child(2)>a {background:#444; margin-right:10px;}
	nav.pc .main_right>ul>li:nth-child(2)>a:hover {background:#000;}
	nav.pc .main_right>ul>li:nth-child(3)>a {background:#00bcd4;}
	nav.pc .main_right>ul>li:nth-child(3)>a:hover {background:#01a0b4;}
	nav.pc .gnbBg {position:absolute; width:100%; height:230px; z-index:10; background:url(../images/common/bg_menuon.png) no-repeat center bottom;}

	/*footer*/
	footer {position:relative; max-width:100%; color:#666; text-align:left !important; padding:0 15px; background:url(../images/common/bg_footer.png) no-repeat;}
	footer .tel {display:none;}
	footer address {position:relative; display:block; margin:0 auto; padding:65px 0 40px; font-size:14px; font-weight:300;}
	footer address>div {display:inline-block;}
	footer address>img {display:none;}
	footer address .logo {margin:0; padding:0;}
	footer address .footer_link {margin-bottom:20px;}
	footer address .footer_link a {color:#fff; padding-right:30px;}
	footer address .footer_link .admin{padding:8px 15px; background:#fdf07f; border-radius:10px; color:#603913; overflow:hidden;}
	footer address .address {color:#fff;}
	footer address .address span {padding-right:10px;}
	footer address .qrCode {float:right;}
	footer address .qrCode img {display:block; margin:0 auto 5px;}

	/* 서브메뉴 :: snb */
	.subBg {margin-top:100px; background:#ff8699;}
	.subTitle {margin:0 auto; padding-top:80px; width:90%; min-height:235px; vertical-align:middle; color:#fff; background: url(../images/common/bg_subtop.png) no-repeat bottom right;}
	.subTitle h2 {font-size:40px; font-weight:300; margin-bottom:15px;}
	.snb {width:80%; margin:0 auto 80px; text-align:center;}	
	.snb>.tableMode {display:table; clear:both; float:none; width:100%; max-width:100%; padding:0; margin:0;	border:1px solid #ddd; border-radius:10px; overflow:hidden; }
	.snb>.tableMode>* {display:table-cell; float:none; margin:0; border-right:1px solid #ddd; text-align:center; font-size:18px;}
	.snb>.tableMode>li:last-child {border-right:0;}
	.snb>.tableMode li a {display:block; padding:12px 0; font-size:14px;color:#333;}
	.snb>.tableMode li a:hover{color:#fff; background-color:#ff4e73;}
	.snb>.tableMode li.on a {color:#fff; background-color:#ff4e73;}
	.snb>.tableMode .middle {vertical-align:middle;}
	.grid2 li {width:50%;}
	.grid5 li {width:20%;}
	
	/*컨텐츠*/
	.contents {max-width:1000px; margin:0 auto; padding:100px 0; overflow:hidden;}
}


/* ************************ 모바일 (0~768) ************************ */
@media screen and (max-width:991px) {

	/* nav.mobile {width:70%;} */
	html,body {font-weight:400; font-size:15px;}
	.pc {display:none !important;}
	nav.mobile {width:70%;}
	.contents {margin:0 auto; padding:50px 0; overflow:hidden;}
	#gotop {bottom:15px; right:15px;}

	/*헤더*/
	header {z-index:999; position:absolute; width:100%;}
	header .head {position:relative; margin:0 auto; padding:15px 0; border-bottom:1px solid #ccc; background:#fff; overflow:hidden;}
	header .head h1 {width:100%; display:block; text-align:center; margin:0 auto; padding:0 !important;  z-index:1;}
	header .head h1 img {height:33px;}
	header .head .side {position:absolute; top:0; right:0; z-index:10;}
	header .head .side a {display:block; width:30px; height:30px; font-size:0;}
	header .head .side a.btn1 {position:absolute; right:10px; top:20px; }
	header .head .side a.btn1.in {background:url(../images/common/icon_key.png) no-repeat; background-size:100%;}
	header .head .side a.btn1.out {background:url(../images/common/icon_key_out.png) no-repeat; background-size:100%;}
	header .head .gnbView {position:absolute; top:20px; left:10px; width:30px; height:30px; text-align:center; vertical-align:middle; z-index:10;}
	header .head .gnbView img {max-width:100%; }

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:80%; height:100%; overflow:hidden; box-shadow:-5px 0 5px rgba(0,0,0,.5) !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#ff8699; color:#fff;}
	nav.mobile .closeWrap .gnbClose {display:block; width:60px; height:60px; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat; background-size:30%; border-right:1px solid rgba(255,255,255,.2);}
	nav.mobile .closeWrap .home {position:absolute; display:block; top:0; right:0; padding:20px; color:#fff; font-size:12px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important; }
	nav.mobile .gnb * {width:100% !important; }
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:12px 20px; font-size:14px; font-weight:300; border-bottom:1px solid #e0e0e0; background:#fff; letter-spacing:-1px;}
	nav.mobile .gnb>ul>li:first-child>a {border-top:1px solid #e0e0e0;}
	nav.mobile .gnb>ul>li>a:hover {color:#ff8699;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#ff8699; border-bottom:1px solid #ff8699;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:8px 20px 8px 40px; font-size:15px; color:#888; letter-spacing:-.5px; border-bottom:1px solid #f5f5f5;
		background:url(../images/common/dot_m.png) no-repeat #fff 30px 22px; background-size:3px;
	}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#ff8699; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#ff8699;}
	nav.mobile .main_right {padding:10px 10px;}
	nav.mobile .main_right ul {display:flex; gap:5px;}
	nav.mobile .main_right li>a {padding:5px; color:#fff; border-radius:5px; font-weight:300;}
	nav.mobile .main_right li:nth-child(1)>a {background:#ff4e73;}
	nav.mobile .main_right li:nth-child(2)>a {background:#444;}
	nav.mobile .main_right li:nth-child(3)>a {background:#00bcd4;}
	/*footer*/
	footer {position:relative; max-width:100%; color:#666; text-align:left !important; padding:0 15px; background:url(../images/common/bg_footer.png) no-repeat;}
	footer address {position:relative; display:block; margin:0 auto; padding:40px 0 10px; font-size:14px; font-weight:300;}
	footer address>div {line-height:1.6; word-break:keep-all; padding-bottom:10px;}
	footer address>img {display:none;}
	footer address .logo {margin:0; padding:0;}
	footer address .footer_link {margin-bottom:10px;}
	footer address .footer_link a {color:#fff; padding-right:20px;}
	footer address .footer_link .admin{margin-top:10px; display:block; padding:8px 15px; background:#fdf07f; border-radius:10px; color:#603913; overflow:hidden;}
	footer address .address {color:#fff;}
	footer address .address span {padding-right:10px;}
	footer address .qrCode {float:none; margin:0 auto; text-align:center;}
	footer address .qrCode img {display:block; margin:10px auto 15px;}
	
	/* 서브메뉴 :: snb */
	.subBg {margin-top:64px; background:#ff8699;}
	.subTitle {margin:0 auto; padding-top:20px; width:90%; min-height:130px; vertical-align:middle; color:#fff; background: url(../images/common/bg_subtop.png) no-repeat bottom right; background-size:30%;}
	.subTitle h2 {font-size:24px; font-weight:300; margin-bottom:15px;}
	.snb {width:100%; margin:0 auto 30px; text-align:center;}	
	.snb>.tableMode {display:table; clear:both; float:none; width:100%; max-width:100%; padding:0; margin:0;	border:1px solid #ddd; border-radius:10px; overflow:hidden; }
	.snb>.tableMode>* {display:table-cell; float:none; margin:0; border-right:1px solid #ddd; text-align:center; font-size:18px; align-content: center;}
	.snb>.tableMode>li:last-child {border-right:0;}
	.snb>.tableMode li a {display:block; padding:12px 8px; font-size:14px;color:#333;}
	.snb>.tableMode li a:hover{color:#fff; background-color:#ff4e73;}
	.snb>.tableMode li.on {background-color:#ff4e73;}
	.snb>.tableMode li.on a {color:#fff;}
	.snb>.tableMode .middle {vertical-align:middle;}
	.grid2 li {width:50%;}
	.grid5 li {width:20%;}
	
	
	.tabWrap .tab_btn li a {padding:8px 10px; font-size:16px;}
}