@charset "utf-8";

header {position: fixed; top: 0;left: 0; right: 0; z-index: 50;}
#gnb {position: relative; top: 0; height: 90px; border-bottom: 1px solid #dddddd; background: #fff; transition: all 0.2s;}
#gnb.down {top: -90px; height: 0;}
#gnb.mainGnb {background: #04050a; border-color: transparent;}
#gnb.mainGnb nav {color: #fff;}
#gnb.mainGnb .topLogo {background-image: url('/img/common/logo_header_w.png');}
#gnb.mainGnb .btn-sitemap i span {background: #fff;}
#gnb.mainGnb .familyBtn {border: 1px solid #fff;}
#gnb.mainGnb .familyBtn:before {background-image: url('/img/common/gnb_arrow_w.png');}
#gnb.on {border-color: #dddddd; background: #fff;}
#gnb.on nav {color: #222;}
#gnb.on .topLogo {background-image: url('/img/common/logo_header.png');}
#gnb.on .btn-sitemap i span {background: #222;}
#gnb.on .familyBtn {border: 1px solid #b1afb1;}
#gnb.on .familyBtn:before {background-image: url('/img/common/gnb_arrow.png');}

#gnb .container {height: 100%;}
#gnb h1 {display: flex; align-items: center; position: absolute; top: 0; bottom: 0; left: 55px;}
.topLogo {display: inline-block; width: 235px; height: 100%; background-image: url('/img/common/logo_header.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-indent: -9999px;}
.familyBtn {display: inline-block; position: relative; width: 20px; height: 20px; margin-left: 10px; border: 1px solid #b1afb1; text-indent: -9999px; vertical-align: middle;}
.familyBtn:before {content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/img/common/gnb_arrow.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s;}
.familyBtn.on:before {transform: rotate(180deg);}
.familyList {display: none; position: absolute; top: 83px; right: 0; z-index: 40; padding: 10px; border: 1px solid #222; background: #fff; font-weight: 500;}
.familyList > li a {display: block; padding: 8px 0;}
.familyList > li a:before {content:''; display: inline-block; width: 30px; height: 30px; margin-right: 10px; background-image: url('/img/common/logo_family_game.png'); background-repeat: no-repeat; background-position: center; vertical-align: middle;}
.familyList > li:nth-child(2) a:before {background-image: url('/img/common/logo_family_wt.png');}
/* 울산,노원,안양 지점 로고 다르게 */
#gnb.mainGnb h1.type2 .topLogo {background-image: url('/img/common/logo_header_w_type2.png');}
#gnb h1.type2 .topLogo {background-image: url('/img/common/logo_header_type2.png');}
#gnb.on h1.type2 .topLogo {background-image: url('/img/common/logo_header_type2.png');}
/*  */
.down #gnb h1.type2 .topLogo {background-image: url('/img/common/logo_header_down_type2.png');}

nav {height: 100%; color: #222; transition: all 0.1s;}
.gnbDepth1 {display: flex; height: 100%; padding-left: 5%; margin: 0 -25px; font-size: 16px;}
.gnbDepth1 > li {display: flex; align-items: center; height: 100%; padding: 0 15px;}
.gnbDepth1 > li a, .gnbRightMenu > li a {position: relative; transition: all 0.2s;}
.gnbDepth1 > li:hover > a, .gnbRightMenu > li:hover > a {color: #00e46b;}
.icon-hot {position: absolute; top: -25px; right: -25px; padding: 2px 8px; border-radius: 10px; background: #00e46b; font-weight: 700; font-size: 12px; letter-spacing: -0.02em;}
.icon-hot {color: #fff; -webkit-animation: blink 1.2s infinite; animation: blink 1.2s infinite;}
.icon-hot:after {content:''; position: absolute; left: 11px; bottom: -5px; border-top: 5px solid #00e46b; border-right: 5px solid transparent;}

@-webkit-keyframes blink {
    0% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	99% {opacity:1;}
	100% {opacity:0;}
}
@keyframes blink {
    0% {opacity:0;}
	49% {opacity:0;}
	50% {opacity:1;}
	99% {opacity:1;}
	100% {opacity:0;}
}

.gnbDepth2-list {display: flex; padding-left: 10%; margin: 0 -9px;}
.gnbDepth2-list li {padding: 0 9px;}
.gnbDepth2-list li a {font-weight:600;color: #313131;font-size:16px;}
.gnbDepth2-list li:hover a {color: #222;}
.gnbDepth2 {display: none; position: absolute; top: 101%; left: 0; right: 0; z-index: 30; padding: 25px 0 60px; background: #fff; box-shadow: 0px 11px 10px 0px rgb(13 14 21 / 5%);
    -webkit-box-shadow: 0px 11px 10px 0px rgb(13 14 21 / 5%);
    -moz-box-shadow: 0px 11px 10px 0px rgba(13, 14, 21, 0.05);}
.gnbDepth1 > li:hover .gnbDepth2 {display: block;}

.gnbDepth3-list {padding-top:10px;}
.gnbDepth2-list .gnbDepth3-list li {padding: 0 9px 3px 0;}
.gnbDepth2-list .gnbDepth3-list li a {font-size: 14px;font-weight:400;color: #999999;}
.gnbDepth2-list .gnbDepth3-list li:hover a {color: #313131;}
.gnbDepth2-list.column {gap:60px;}

.gnbRight {display: flex; align-items: center; position: absolute; top: 0; bottom: 0; right: 35px; }
.gnbRightMenu {display: flex; margin: 0 -13px;}
.gnbRightMenu > li {padding: 0 13px;}
.btn-sitemap {position: relative; z-index: 999999; margin-left: 45px; text-indent: -9999px;}
.btn-sitemap i span {display: block; width: 24px; height: 2px; margin-top: 6px; background: #222; transition: all .3s ease-in-out;}
.btn-sitemap i span:first-child {margin-top: 0;}
.btn-sitemap.on i span {background: #fff;}
.btn-sitemap.on i span:nth-child(1) {margin-top:2px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.btn-sitemap.on i span:nth-child(2) {opacity:0;}
.btn-sitemap.on i span:nth-child(3) {margin-top: -10px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);}

main {padding-top: 90px;}

.gnbPlace {position: relative; padding-left: 20px;}
.gnbPlace > a i {display: inline-block; position: relative; width: 20px; height: 20px; margin-left: 10px; border: 1px solid #b1afb1; transition: all 0.3s; vertical-align: middle;}
.gnbPlace > a i:after{content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/img/common/gnb_arrow.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s;}
.gnbPlace.on > a i:after {transform: rotate(180deg);}
.gnb-place-box {display: none; position: absolute; top: 45px; right: 0; z-index: 40; width: 400px; padding: 30px; border: 1px solid; background: #fff; font-size: 12px; color: #555;}
.gnb-place-box h2 {margin-bottom: 8px; font-weight: 500; font-size: 20px; color: #222;}
.gnb-place-box p {font-weight: 200;}
.placeList {display: flex; flex-wrap: wrap; padding-top: 15px; font-weight: 200;}
.placeList > li {width: 25%; padding: 0 5px;}
.placeList > li:nth-child(n+5) {margin-top: 10px;}
.placeList > li a {display: block; width: 100%; padding: 6px 0; background: #efefef; text-align: center; transition: all 0.1s;}
.placeList > li.current a,
.placeList > li:hover a {background: #00e46b; color: #fff;}


/* 푸터 */
footer {padding: 45px 0 95px; background: #f8f9fa; color: #999999;}
.footer-menu {display: flex; margin: 0 -10px;}
.footer-menu > li {padding: 0 10px;}
.ftInfoWrap {display: flex; justify-content: space-between; padding-top: 45px;}
.ftInfoWrap p {font-size: 14px; line-height: 1.6;}

.btn-place {position: relative; width: 302px;}
.btn-place.on .btn-place-txt {background: #222222; color: #fff;}
.btn-place.on .btn-place-txt i:before, 
.btn-place.on .btn-place-txt i:after {background: #fff;}
.btn-place.on .btn-place-txt i:after {transform: rotate(0);}
.btn-place-txt {position: relative; padding: 12px 30px; border: 1px solid #efefef; border-radius: 12px; background: #fff; color: #555555; cursor: pointer; transition: all 0.3s;}
.btn-place-txt i {position: absolute; top: 23px; right: 30px; width: 16px; height: 2px;}
.btn-place-txt i:before, .btn-place-txt i:after {content:''; position: absolute; width: 100%; height: 100%; background: #000;}
.btn-place-txt i:after {transform: rotate(90deg); transition: all 0.3s;}

.btn-place-wrap {display: none; position: absolute; bottom: 100%; width: 100%; height: 270px; margin-bottom: 12px; padding: 10px 30px; border: 1px solid #efefef; border-radius: 10px; background: #fff;}
.btn-place-list {height: 100%; overflow-y: auto;}
.btn-place-list::-webkit-scrollbar {width: 10px;}
.btn-place-list::-webkit-scrollbar-thumb {background: #777;}
.btn-place-list > li {font-size: 14px;}
.btn-place-list > li a { color: #999999; transition: all 0.3s;}
.btn-place-list > li:hover a {color: #222;}
.btn-place-list > li a {display: block; padding: 3px 0;}
/* 개인정보취급방침 팝업 */
.dim {display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6);}
.pop-box {overflow: auto; position: fixed; top: 50%; left: 50%; z-index: 99999; transform: translate(-50%, -50%); width: 720px; padding: 40px; margin: 0 auto; border-radius: 12px; background: #fff}
.popClose {position: fixed; right: 0; top: 0; z-index: 999999; width: 40px; height: 40px; border-bottom-left-radius: 12px; background: #dddddd url('/img/common/icon_close_w.png') no-repeat center; text-indent: -9999px;}
.pop-box h2 {padding: 42px 0 13px; border-bottom: 2px solid #4c4c4c; background: url('/img/sub/logo_sub_gray.png') no-repeat center top; font-weight: 400; font-size: 25px; text-align: center;}
.agree-cont {padding-top: 25px; font-size: 14px; color: #777777; line-height: 1.6;}
.agree-cont strong {font-weight: 400; font-size: 16px; color: #222222;}
/* 로그인 팝업 */
.account-select-wrap {display: flex; justify-content: space-between; padding-top: 20px;}
.account-pop-cont h4 {font-weight: 400; font-size: 14px; color: #999;}
.accout-select {display: flex;}
.accout-select > li {padding-left: 28px;}
.pop-account-go {padding: 8px 0 33px; padding-left: 140px;}
.pop-account-go > li {display: flex; justify-content: space-between; font-size: 14px;}
.pop-account-go > li a {color: #999999;}

.pop-btm-wrap {text-align: center;}
.pop-btm-wrap .btn {min-width: 200px; font-weight: 400; font-size: 20px;}

.pop-account-btm {padding-top: 40px;}
.account-msg {padding: 57px 0 120px; font-size: 20px; color: #555555; text-align: center;}
.account-msg em {border-bottom: 1px solid; color: #00e46b;}

/* 우측 퀵메뉴 */
#rightQuick {position: fixed; right: 0; top: 0; bottom: 0; z-index: 20;}
.rqList {/* overflow: hidden; */ position: absolute; right: 30px; top: 15%; z-index: 1; width: 77px;border-radius: 6px; background: #fff; box-shadow: 6.6px 7.5px 24px 12px rgb(176 176 176 / 12%);}
.rqList > li {position: relative;}
.rqList .rqLogo {height: 60px; background: #00e46b url('/img/common/logo_quick_right.png') no-repeat center;}
.rqList > li:nth-child(n+3):before {content:''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: #eeeeee;}
.rqList > li a {display: block; width: 100%; height: 100%;}
.rqList > li a > span {display: block; padding-top: 60%; padding-bottom: 8px; background-repeat: no-repeat; background-position: center; font-size: 12px; color: #999999; text-align: center;}
/* 탑버튼 */
.btn-top {position: absolute; right: 44px; bottom: 30px; width: 48px; height: 48px; border: 1px solid #dedede; border-radius: 100%; background: #fff url('/img/common/btn_top.png') no-repeat center;}
.btn-top:hover {border-color: rgba(204,204,204,0.5); transition: border-color 0.2s ease-out; will-change: border-color;}

/* 사이트맵 */
.sitemap {display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 99999; transform: translateY(-100%); height: 100%; background: #0ec966; color: #fff;}
.sitemap-bg-wrap {flex: auto; overflow: hidden;}
.sitemap-bg {width: 130%; height: 130%; background: url('/img/common/bg_sitemap.jpg') no-repeat center; background-size: cover;}
.sitemap-cont {z-index: 1; width: clamp(500px, 60%, 960px); padding-top: 14vh; padding-left: 5%; background: url('/img/common/bg_sitemap_cont.jpg') no-repeat right bottom;}
.sitemap-top-list {display: flex; padding-bottom: 6vh; font-size: 14px;}
.sitemap-top-list > li:not(:first-child):before {content:'·'; margin: 0 10px;}
.sitemap-menu-list > li {font-size: 20px; transition: all 0.3s ease;}
.sitemap-menu-list > li:hover {color: #222;}
.sitemap-menu-list > li:not(:first-child) {margin-top: 30px;}
.sitemap-menu-list > li .en {position: relative; margin-right: 20px; font-size: 35px; line-height: 1; text-transform: uppercase;}
.sitemap-menu-list > li a {padding-bottom: 8px;}
.sitemap-menu-list > li .en:after {content:''; position: absolute; bottom: 0; left: 0; right: 0; width: 0; height: 3px; background: #222; transition: all 0.3s ease;}
.sitemap-menu-list > li:hover .en:after {width: 100%;}
.sitemap-search-wrap {padding-top: 16vh;}
.sitemap-search {display: inline-flex; align-items: center; width: 250px; padding: 5px 0; border-bottom: 1px solid #cff4e0;}
.sitemap-search input {width: 100%; min-width: auto; background: none; font-size: 14px; color: #fff;}

.sitemap-search input::-webkit-input-placeholder{color: #fff;}
.sitemap-search input:-ms-input-placeholder{color: #fff;}
.sitemap-search input:-moz-input-placeholder{color: #fff;}
.sitemap-search input::-moz-input-placeholder{color: #fff;}
.sitemap-search input::placeholder{color: #fff;}

.sitemap-search button {width: 19px; height: 19px; background: url('/img/common/icon_search_white.png') no-repeat center;}
.sitemap-search input:-webkit-autofill{-webkit-text-fill-color: none;}


/* 팝업 */
#popCsk {position:absolute; top:200px; right: 150px; z-index:99; width:500px; overflow:hidden; background: #fff; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
#popCsk.hide {display: none;}
#popCsk img {display:block; width:100%;}
#popCsk ul {border-top:solid 1px #dedede;}
#popCsk ul:after {content:""; display:table; clear:both;}
#popCsk ul li {float:left; width:50%;}
#popCsk ul li:first-child {border-right:solid 1px #dedede;}
#popCsk ul li a {display:block; text-align:center; height:54px; line-height:54px; color:#222; font-size:10pt; font-weight:400; background:#fff;}


@media all and (max-width: 1800px) {
	.gnbDepth1 {padding-left: 10%;}
}

@media all and (max-width: 1699px) {

	#gnb .topLogo {left: 18px;}
	#gnb .gnbRight {right: 18px;}
	.gnbDepth1 > li {padding: 0 10px;}

	.gnbDepth1 {padding-left: 23%;}

	nav .wtGnb {padding-left: 30%;}
	.gnbDepth2-list {padding-left: 0; margin: 0 auto;}
	.gnbTel {display: none;}
	#gnb .gnbRight {display: none;}
	
}

@media all and (max-width: 1390px) {
	#gnb h1 {left: 18px;}
	.gnbDepth1 {font-size:14px; }
	.gnbDepth2-list li a {font-size: 13px;}
	.gnbDepth2-list .gnbDepth3-list li a {font-size: 12px;}
}

@media all and (max-width: 1280px) {
	main {padding-top: 50px;}
	.main-page {padding-top: 0;}
	.main-wrap header {background: transparent;}
	.main-wrap header.down {background: #fff;}
	
	/* footer */
	.ftBtnWrap {margin: 0 -18px;}
	.footerLogo {display: none;}
	.ftBtnList {margin: 0 auto;}
	.ftBtnList .pc-show {display: none;}
	.ftInfoWrap .right-box {min-width: auto; width: 100%;}
	.ftBtnList li:before {content:'|'; display: inline-block;}
	.ftInfoWrap .left-box {display: none;}
	.gnbDepth1 {padding-left: 24%;}
	.gnbDepth1 {font-size:13px; }
	
}

@media all and (max-width: 768px) {
	footer {padding: 25px 0 72px;}
	.footer-menu {display: none;}
	.ftInfoWrap {flex-direction: column; align-items: start; padding-top: 0;}
	.btn-place {order: 1; width: 100%;}
	.ftInfoWrap p {font-size: 12px; color: #555555;}
	.ft-txt {order: 2; padding-top: 23px;}

	/* 팝업 - 모바일 */
	#popCsk {display: none; position: fixed; top: 50%; left: 15px; right: 15px; transform: translateY(-50%);}
}

