@charset "utf-8";
@import url('../../common/css/font/GmarketSans.css');
@import url('../../common/css/font/NotoSansKR.css');

/* pc 메뉴 숨기고 mobile에서만 보이게 */
.pc_nav .depth1 > li:nth-last-child(-n+3) {display:none;} 

:root {
	--p_color : #aa238b;
	/* --gra : --sprite_l : url('/design2025/gbsports/img/layout_sprite.png') no-repeat; */
	--gmark : 'GmarketSans', sans-serif;
	--noto : 'NotoSansKR', sans-serif;
}
body {font-family:'NotoSansKR', sans-serif; font-weight:400; font-size:18rem; color:#222; letter-spacing:-0.8rem; overflow-y: hidden;}
input, button, textarea, select {font-family:'NotoSansKR', sans-serif; font-weight:300; font-size:17rem;  color:#333;}
button, input[type="submit"] {cursor:pointer; border:0; background:none;}
a {color:#222;}
b {font-weight:600;}

.wrap {max-width:1240px; width:100%; margin:0 auto; }

header.fixed {position:fixed; top:0; left:0; width:100%; background:#fff; z-index:100;}
header {height:80rem; margin-top:38rem; padding: 0 40rem; border-bottom: 1px solid #f7f7f7; box-shadow: 0 5px 5px rgba(0,0,0,0.1); position:relative;}
header h1 {float:left; display:flex; align-items:center; justify-content:center; width:260rem; height:100%; margin-top:-6rem;}
header h1 a img {display:block; width:100%;}

header .link {display:flex; align-items:center; justify-content:flex-start; position:absolute; top:0; background:#fff; width:100%; left:0; padding:0 40rem; top:-40rem; height:40rem;}
header .link a {padding:3rem 17rem 5rem; font-size:20rem; border-radius: 0 0 20rem 20rem; color:#fff; margin-right:3rem;}
header .link a:nth-child(1) {background: #9b3388;}
header .link a:nth-child(2) {background:#889543;}
header .link a:nth-child(3) {background:#2e3192;}

header .right{float: right; display: flex; align-items: center; height: 100%;}

.login_wrap{position: relative; margin-right: 0;}
.login_wrap button{text-indent: -9999px;position: relative;background: url('../img/layout/login_icon.png') no-repeat center; width: 30rem; height: 33rem; background-position-x: -1px; cursor: unset;}
.login_wrap > div{position: absolute; top: 47rem; left: 38%; transform: translateX(-50%); background: #fff; border: 1px solid #930a7a; border-radius: 50rem; padding: 3rem 12rem; /* display: none; */}
.login_wrap > div ul{display: flex; align-items: center;}
.login_wrap > div ul::before{position: absolute; content: ""; background: #fff; border-right: 1px solid #930a7a; border-top: 1px solid #930a7a; width: 9px; height: 9px; top: -1px; left: 50%; transform: translateY(-50%) rotate(314deg);}
.login_wrap > div ul li a{font-size: 13px; font-weight: 500; display: block;}
.login_wrap > div ul li:first-child a{ margin-right: 11px; position: relative;}
.login_wrap > div ul li:first-child a::before{position: absolute; content: "/"; right: -8rem; top: 50%; transform: translateY(-50%);}

.pc_nav{float: left; margin-left:50rem; z-index: 100;}
.pc_nav .depth1 > li > a {display:flex; align-items:center; font-size:19rem; font-weight:500; padding:25rem 15rem; position: relative;}
.pc_nav .depth1 > li > a::after {content: ""; border-right:2px solid #acacac; border-top:2px solid #acacac; margin-top:-2rem; margin-left:10rem; flex-shrink:0; flex-grow:0; width:6px; height: 6px; transform:rotate(133deg);}
.pc_nav .depth1 > li > a.non::after {display: none;}

.pc_nav .depth2_wrap {top:78rem; box-shadow:10px 10px 30px rgba(0,0,0,0.2); z-index: 200; background:#f7faea; border:2px solid #889543; border-radius:10rem;}
.pc_nav .depth2_wrap .wrap {padding:0; width:100%;}
.pc_nav .depth2 {width:200rem; border:0 !important;}
.pc_nav .depth2 > li > a {font-size:16rem; border-bottom:1px dashed #ced5af;}

.pc_nav .depth3 {left:200rem; width:200rem; background:#fdf7fc; border:2px solid var(--p_color);}
.pc_nav .depth3 > li > a {font-size:16rem !important;}

.pc_nav a[target="_blank"] span::after, .m_nav a[target="_blank"] span::after, .sub_nav a[target="_blank"] span::after{background-image: url('../img/layout/blank.png'); width: 14px; height: 14px; margin-top: 6px;}

.sitemap{width: 33rem; height: 33rem; background: url('../img/layout/login_icon.png') no-repeat center; background-position-x: -41px;}

#m_nav_open{display: none;}


@media all and (max-width:1540px){
	header {display:flex; align-items:center; justify-content:space-between; margin-top:36rem;}
	header h1 {width:230rem; margin-top:-8rem;}
	header .link a {font-size:15rem;}
	.pc_nav {margin-left: 0;}
	.pc_nav .depth1 > li > a {font-size:18rem; padding:25rem 10rem;}
}
@media all and (max-width:1340px){
	header h1 {width:200rem;}
	.pc_nav .depth1 > li > a {font-size:17rem;}
	.pc_nav .depth2 > li > a {font-size:15rem;}
	.pc_nav .depth3 > li > a {font-size:15rem  !important;}
}
@media all and (max-width:1023px){
	html {font-size:0.95px;}
}
@media all and (max-width:1440px){
	.wrap {width:calc(100% - 40rem);}
	header {padding:0 20rem}
	header .link {padding:0 20rem;}
}
@media all and (max-width:1240px) {
    .pc_nav,
	.login_wrap button,
	.login_wrap > div,
	header a.sitemap {display: none;}
	header h1 {width:230rem;}
    #m_nav_open {display:block;}
}
@media all and (max-width:768px){
	html {font-size:0.9px;}
	.wrap {width:calc(100% - 30rem);}
	header {padding: 0 15rem;}
}
@media all and (max-width:599px) {
	header {margin-top:0;}
	header .link {display:none;}
}

.m_nav.ver1 .depth1 > li > a[target="_blank"] span::after{background-image: url('../img/layout/blank_w.png'); background-position: 0;}
#m_nav_close{top: 2.5%;}

/*footer*/
footer {background: #ecebef;}
footer .wrap{ padding: 50rem 0;}
footer .wrap > div{ display: flex; justify-content: space-between;}

.f_top{padding-bottom: 20rem; margin-bottom: 35rem; border-bottom: 1px solid #d8d8d8; font-size: 17rem;}
.f_top .address{margin-bottom: 15rem;}

.f_logo{margin-bottom: 37rem;}

.f_info{display: flex; margin-bottom: 20rem;}
.f_info li{margin-right: 28rem;}
.f_info li span{font-weight: 600; display: inline-block; margin-right: 6rem;}


.site_area{margin-top: 12rem; position: relative;}
.site_area button{background: #fff; padding: 10rem 29rem; border: 1px solid #929292; border-radius: 50rem; width: 190rem; text-align: left; font-weight: 400; position: relative; cursor: pointer; display: block;}
.site_area button::before{position: absolute ;content: ""; border-right: 2px solid #595959; border-top: 2px solid #595959; width: 7px; height: 7px; right: 29px; top: 15px; transform: rotate(133deg);}
.site_area button.on{border-radius: 30rem 30rem 0 0; border-bottom: none;}
.site_area button.on::before{transform: rotate(315deg); top: 19px;}
.site_area .lst{position: absolute;background: #fff;width: 100%; z-index: 10;top: 44rem;overflow: hidden; border-top: 1px dashed #ddd; display: none;}
.site_area .lst > p{height: 48rem; line-height: 48rem; background: #929292;  color: #fff; padding: 0 18rem;}
.site_area .lst ul{max-height: 165rem; overflow: auto; padding: 7rem 0; border: 1px solid #929292; border-top: 0;}
.site_area .lst ul li a{display: block;font-size: 16rem;padding: 5rem 17rem 5rem 32rem;position: relative;}
.site_area .lst ul li a::before{position: absolute;content: "";background: #ddd;width: 5rem;height: 5rem;left: 18rem;top: 50%;transform: translateY(-50%);border-radius: 50rem;}

.f_sns{margin-top: 23rem; display: flex; justify-content: center;}
.f_sns li{margin: 0 7rem;}
.f_sns a{display: block; width: 45rem; height: 45rem; text-indent: -9999px; background: url('../img/layout/sns_fb.png') no-repeat center center; background-size: cover; position: relative;}
.f_sns a.kakao {background-image: url('../img/layout/sns_ka.png');}
.f_sns a.insta {background-image: url('../img/layout/sns_in.png');}
.f_sns a.youtube {background-image: url('../img/layout/sns_yt.png');}

.f_bottom .f_link{font-size: 16rem;}
.f_bottom .f_link a{margin-right: 26rem;}
.f_bottom .f_link .gaein{color: #aa238b; font-weight: 600;}
.f_bottom .copy{font-size: 14rem; font-weight: 300;}

@media all and (max-width:860px) {
    footer .wrap > div{flex-wrap: wrap;}
    footer .wrap > div > div{width: 100%;}
    footer .wrap .right{display: flex; align-items: center;}
    .site_area, .f_sns{margin-top: 0;}
    .f_bottom .copy{margin-top: 20rem;}
}
@media all and (max-width:540px) {
    .f_info{flex-wrap: wrap;}
    .f_bottom .f_link a{margin-right: 15rem;}
}
@media all and (max-width:520px) {
    footer .wrap{width: 92%;}
}
@media all and (max-width:360px) {
    footer .wrap .right{flex-wrap: wrap;}
    .f_sns{margin-top: 10px;}
}