@charset "utf-8";

/* skip */
#skip a{position:absolute;top:0px;left:-9999px; z-index:99999;}
#skip a:focus,#skip a:active{left:0px;width:100%;text-align:center;padding:5px 0;background:#000;color:#fff;font-weight:bold;}

/* header */
#header{position:relative;z-index:51;width:100%;height: 155rem;border-bottom:1rem solid #e5e5e5;box-sizing: border-box;background:#fff;text-align: center;}
#header h1{z-index:15;position:absolute;left: 30rem;top: 71rem;}
#header h1 a{display:block;}
#header h1 img{height: 50rem;vertical-align: middle;}

#header .btn_menu{display:none;}
#header .btn_menu{position: absolute;top: 0;right: 0;z-index:30;transition:all 0.3s ease 0s;border: none;width: 80px;height: 80px;background: #0080cc;border-radius: 30px 0;}
#header .btn_menu > i{display:block;position:absolute;left: 50%;margin-left: -12.5px;width: 25px;height: 3px;background: #ffffff;border-radius: 10px;}
#header .btn_menu > i:nth-of-type(1){top: 30px;}
#header .btn_menu > i:nth-of-type(2){top:50%;margin-top: 0; transition:background 0.3s ease 0s;}
#header .btn_menu > i:nth-of-type(3){top: 50px;}
#header .btn_menu > i:nth-of-type(1),
#header .btn_menu > i:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active > i:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn_menu.active > i:nth-of-type(2){background:transparent;}
#header .btn_menu.active > i:nth-of-type(3){top:10rem; transform:rotate(45deg);}
#header .btn_menu.active > i:nth-of-type(1),
#header .btn_menu.active > i:nth-of-type(3){transition-delay:0s, 0.3s;top: 40px;}
#header .btn_close{display: none;position: absolute;top: 41rem;right: 30rem;z-index: 30;width: 30rem;height: 25rem;background: transparent;border: none;}

#header .gnb_bg{z-index:10;position: fixed;overflow:hidden;top: 155rem;width: calc(100% - 17px);height:100%;background:#fff;border-top:1px solid #ececec;background: rgba(0,0,0,0.4);opacity:0;height: 0;}
#header.active .gnb_bg{transition: opacity 0.3s;opacity:1;height:100%;}

#header nav{float: left;margin-left: 320rem;}
#header nav .menu{display:inline-block;}
#header .menu ul.gnb:after{content:''; display:block; clear:both;}
#header .menu ul.gnb > li ul li:hover{border-color: #0080cc;}
#header .menu ul.gnb > li ul li:hover a{color: #0080cc;font-weight:500;}
#header .menu ul.gnb > li ul:before{ position:absolute;  left:0; top:0; z-index: 6; width:0%; height:2px; background:#02b9c7;}
#header .menu ul.gnb > li ul:hover:before{width:100%}
#header .menu ul.gnb > li{float:left;text-align:center;}
#header .menu ul.gnb > li > a{position:relative;display:block;line-height: 29rem;padding: 0 28rem;height: 110rem;margin-top: 2rem;font-size: 24rem;letter-spacing:-1px;color:#333;font-weight: 600;z-index: 11;display: flex;align-items: center;}
#header nav .gnb > li > a br{display: none;}
#header .menu ul.gnb > li.active > a{color: #0080cc;}
#header .menu ul.gnb > li > a:before{content: '';display: block;position: absolute;width: 10rem;height: 10rem;background: #0080cc;border-radius: 100%;top: 20rem;z-index: 100;left: 50%;margin-left: -5rem;transform:scale(0) translateY(-15px);transition:0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63)}
#header .menu ul.gnb > li.active > a:before{transform:scale(1) translateY(0)}

#header .menu ul.gnb > li.active .sub_menu{opacity:1; visibility:visible;}
#header .menu .sub_menu{visibility: hidden; opacity:0;position:absolute;top: 152rem;left:0;z-index: 10;width:100%;background: #fff;min-height: 200rem;height: auto;border-top: 1rem solid #e5e5e5;}
#header .menu .sub_menu ul{width: 1100rem;height: auto;overflow: hidden;margin-left: 530rem;padding: 48rem 0;}
#header .menu .sub_menu li{float: left;border: 1px solid #d0d0d0;border-radius: 5px;width: calc((100% - 60rem) / 4);margin: 8rem 15rem 8rem 0;box-sizing: border-box;line-height: 30rem;background: #fff;}
#header .menu .sub_menu li a{display:block;padding: 10rem 0;font-size:18rem;color:#555;transition:all 0.3s ease-out 0s;}
#header .menu .sub_menu li a:hover{transition:all 0.3s ease-out 0s;}
#header .menu .sub_menu .subMtle{position: absolute;background: #f0f8fc;left: 0;height: 100%;width: 455rem;border-radius: 0 0 100px 0;padding: 55rem 0 0 120rem;box-sizing: border-box;text-align: left;}
#header .menu .sub_menu .subMtle p{font-family: 'GmarketSans';font-weight: 600;font-size: 28rem;}
#header .menu .sub_menu .subMtle span{font-size: 17rem;color: #2b5063;margin-top: 14rem;display: block;}

#header .header_right{border-bottom: 1rem solid #e5e5e5;width: 100%;height: auto;overflow: hidden;}

#header .area_util{float: right;line-height: 38rem;padding-right: 50rem;}
#header .area_util ul > li{position:relative;display:inline-block;padding: 0 10rem;font-size: 17rem;}
#header .area_util ul > li:first-child:before{display:none;}
#header .area_util ul > li a{color: #626262;}
#header .area_util ul > li a:hover{font-weight: 500;}
#header .area_util ul > li a:before{content: '';width: 22rem;height: 20rem;background: url(/resources/gnr/images/common/util.png) no-repeat; background-size: 88rem;display: inline-block;vertical-align: -2rem;margin-right: 5rem;}
#header .area_util ul > li.util_mine a:before{background-position: -44rem;}
#header .area_util ul > li.util_login a:before{background-position: left;}
#header .area_util ul > li.util_logout a:before{background-position: -22rem;}
#header .area_util ul > li.util_home a:before{background-position: -66rem;}


/* footer */
#footer{width: 100%;height: auto;background: #21262f;}
#footer .footerIn{width:100%;max-width: 1700rem;margin: 0 auto;padding: 40rem 0 50rem;position: relative;}
#footer .ft_link li{display: inline-block;font-size: 17rem;}
#footer .ft_link li:after{content: '';width: 1px;height: 13rem;background: #878a92;display: inline-block;margin: 0 13rem 0 16rem;vertical-align: baseline;}
#footer .ft_link li:last-child:after{display:none;}
#footer .ft_link li a{color: #c2c9d7;}
#footer .ft_link li:first-child a{color: #00a3ff;font-weight: 500;}
#footer .familySiteWrap{position: absolute;right: 0;top: 30rem;}
#footer .familySite{float: left;position: relative;width: 218rem;margin-left: 15rem;}
#footer .familySite > a{line-height: 43rem;display: block;padding: 0 20px;color: #f1f7fd;background: #2c3039;border-radius: 10rem;}
#footer .familySite > a:after {content:'';width: 0;height: 0;border-style: solid;border-width: 0 4rem 6rem 4rem;border-color: transparent transparent #c2c9d7 transparent;position: absolute;right: 18rem;top: 18rem;}
#footer .familySite ul{width:100%;border: 1px solid #21262f;background: #2c3039;position:absolute;bottom: 50rem;right:0;box-sizing:border-box;z-index:10;border-radius: 10rem;display: none;}
#footer .familySite ul.on{display: block;}
#footer .familySite ul li a{border-bottom: 1px dashed rgba(255,255,255,0.2);width: 100%;display: block;padding: 10rem;box-sizing: border-box;color: #fff;font-size: 15rem;}
#footer .familySite ul li:last-child a{border-bottom: none;}
#footer .familySite ul li a:hover{background: #1e222a;font-weight: 500;}
#footer .ft_addresss{color: #a4a6ab;font-size: 16rem;line-height: 28rem;margin-top: 35rem;}
#footer .ft_addresss span:after{content: '';width: 1px;height: 13rem;background: #878a92;display: inline-block;margin: 0 13rem 0 16rem;vertical-align: baseline;}
#footer .ft_addresss span:last-child:after{display:none;}
#footer .footer_logo{position: absolute;right: 40rem;top: 110rem;}

/* sub layout */
.wrap_in{max-width: 1700rem;margin: 0 auto;}
.sub{position: relative;}
.sub .subVisual{width: 100%;height: 175rem;overflow: hidden;background: #f0f8fc;display: flex;align-items: center;justify-content: center;position: relative;}
.sub .subVisual:before,
.sub .subVisual:after{content: '';display: block;position: absolute;z-index: 0;background-size: 100% !important;}
.sub .subVisual:before{width: 793rem;height: 421rem;background:url(/resources/gnr/images/main/bg1.png) no-repeat center;left: -200rem;top: -150rem;}
.sub .subVisual:after{width: 522rem;height: 260rem;background:url(/resources/gnr/images/main/bg2.png) no-repeat center;right: -100rem;top: 0;}
.sub .subVisual strong{font-family: 'GmarketSans';font-size: 36rem;margin-top: -10rem;position: relative;z-index: 1;}
/* sub navi */
.subNavi {max-width: 1700rem;height: 55rem;border: 1rem solid #e5e5e5;border-radius: 10rem;margin: -20rem auto 0;background: #fff;padding: 0 30rem;box-sizing: border-box;position: relative;}
.subNavi .subNavi_wrap {height: 100%;float: left;}
.subNavi .subNavi_wrap > li{display: inline-block;position: relative;line-height: 55rem;}
.subNavi .subNavi_wrap > li:after{display: inline-block;content: "";width: 7rem;height: 7rem;border: 1px solid #2b3c5b;border-top: 0;border-left: 0;transform: rotate(-45deg);margin: 0 10rem;vertical-align: 2rem;}
.subNavi .subNavi_wrap > li:last-child:after{display: none;}
.subNavi .subNavi_wrap > li.home a{width: 30rem;height: 16rem;background: url(/resources/gnr/images/common/home.svg) center;background-size: 15rem;background-repeat: no-repeat;box-sizing: border-box;vertical-align: -1rem;}
.subNavi .subNavi_wrap > li > a{display: inline-block;}
.subNavi .subNaviList ul{position: absolute;top: 53rem;left: -5rem;right: -1rem;z-index: 55;box-sizing: border-box;background: #fff;border: 1rem solid #e5e5e5;border-radius: 0 0 15rem 15rem;display: none;}
.subNavi .subNaviList > ul li{line-height: 24rem;}
.subNavi .subNaviList > ul li a{display: block;padding: 10rem 15rem;border-bottom: 1rem dashed #e5e5e5;color: #333;font-weight: 500;font-size: 15rem;word-break: keep-all;transition: all 0.3s ease 0s;}
.subNavi .subNaviList ul li:last-child a{border:
none;}
.subNavi .subNaviList > a.active + ul{display: block;}

.subNavi .rightBtn{float: right;margin-top: 8rem;}
.subNavi .rightBtn li{display: inline-block;margin-left: 5rem;position: relative;}
.subNavi .rightBtn li a{display: block;width: 40rem;height: 40rem;background-color: #ebebeb;border-radius: 100%;background-repeat: no-repeat;background-position: center;background-size: 24rem;}
.subNavi .rightBtn li.rBtn_zoom > a{background-image: url(/resources/gnr/images/common/rBtn_zoom.svg);}
.subNavi .rightBtn li.rBtn_share a{background-image: url(/resources/gnr/images/common/rBtn_share.svg);}
.subNavi .rightBtn li.rBtn_print a{background-image: url(/resources/gnr/images/common/rBtn_print.svg);}
.subNavi .rightBtn li.rBtn_zoom .rBtn_zoomList{position:absolute;right: 0;top: 0;white-space: nowrap; transition: opacity 0.3s;visibility: hidden;opacity: 0;}
.subNavi .rightBtn li.rBtn_zoom.on .rBtn_zoomList{visibility: visible;opacity: 1;}
.subNavi .rightBtn li.rBtn_zoom.on .rBtn_zoomList ul{display:inline-block;}
.subNavi .rightBtn li.rBtn_zoom.on .rBtn_zoomList ul li{margin-left: 0rem;}
.subNavi .rightBtn li.rBtn_zoom .rBtn_close{background-color:#2b3c5b;background-image: url(/resources/gnr/images/common/rBtn_close.svg);display: inline-block;}
.subNavi .rightBtn li.rBtn_share .rBtn_shareList{position:absolute;right: 0;top: 0;white-space: nowrap; transition: opacity 0.3s;visibility: hidden;opacity: 0;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList{visibility: visible;opacity: 1;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList ul{display:inline-block;background: #fff;position: absolute;right: 48rem;top: 0;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList ul li{margin-left: 0rem;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList ul li a{background: #fff;border: 1px solid #ebebeb;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList ul li.qrBtn .qrPopup{position: absolute; top: 55rem;right: 0;width: 259rem;min-height: 250rem;background: #fff;border: 1px solid #ddd;box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.1);border-radius: 10rem; padding: 20rem;box-sizing: border-box;z-index: 10;display: none;}
.subNavi .rightBtn li.rBtn_share.on .rBtn_shareList ul li.qrBtn .qrPopup.on{display: block;}
.subNavi .rightBtn li.rBtn_share .rBtn_close2{background-color:#2b3c5b;background-image: url(/resources/gnr/images/common/rBtn_close.svg);display: inline-block;}
.subNavi .rightBtn li.rBtn_zoom .rBtn_plus a{background-image: url(/resources/gnr/images/common/rBtn_plus.svg);}
.subNavi .rightBtn li.rBtn_zoom .rBtn_minus a{background-image: url(/resources/gnr/images/common/rBtn_minus.svg);}
/* lnb */
.container{max-width: 1700rem;min-height: 600rem;margin: 50rem  auto;display: flex;gap: 60rem;padding: 0 0 180rem 0;}
.lnb{width: 300rem;}
.lnb .lnbTle{width: 100%;height: 140rem;margin-bottom: 20rem;display: flex;justify-content: center;align-items: center;background: rgb(20,183,162);background: linear-gradient(270deg, rgba(20,183,162,1) 0%, rgba(0,128,204,1) 100%);border-radius: 20rem;box-shadow: 6rem 6rem 16rem rgba(11, 159, 180, 0.45);}
.lnb .lnbTle h2{color:#fff;font-family: 'GmarketSans';font-size: 26rem;font-weight: 400;}
.lnb .lnb_depth1{overflow:hidden;border: 1px solid #e0e0e0;line-height: 55rem;margin: 6rem 0;border-radius: 10px;position: relative;}
.lnb .lnb_depth1 a{display:block;padding-left: 30rem;}
.lnb .lnb_depth1 ul{display: none;}
.lnb .lnb_depth1.on ul{display: block;}
.lnb .lnb_depth1 ul li{line-height: 45rem;font-weight:300;border-bottom:1px dashed #e0e0e0;position: relative;}
.lnb .lnb_depth1 ul li a:before{content: '';display: inline-block;width: 4px;height: 4px;border-radius: 100%;background-color: #999999;vertical-align: 5px;margin-right: 7px;}
.lnb .lnb_depth1 ul li:last-child{border-bottom:0;}
.lnb .lnb_depth1.on {background:#f7f8fb;}
										   
.lnb .lnb_depth1.on > a{background: #2b3c5b;color: #fff;border-radius: 10rem;}
.lnb .lnb_depth1 ul li.on:after{display: block;content: "";position: absolute;top: 16rem;right: 20rem;width: 7rem;height: 7rem;border: 1px solid #2b3c5b;border-top: 0;border-left: 0;transform: rotate(-45deg);}
.lnb .lnb_depth1 ul li.on a{color:#2b3c5b;font-weight: 500;}

.lnb .lnb_depth1.liPlus:before,
.lnb .lnb_depth1.liPlus:after{content: '';content: '';background: #a5a5a5;border-radius: 7px;position: absolute;display: block;}
.lnb .lnb_depth1.liPlus:before{width: 12rem;height: 2rem;right: 18rem;top: 26rem;}
.lnb .lnb_depth1.liPlus:after{width: 2rem;height: 12rem;right: 23rem;top: 21rem;transition-duration: 0.1s}
.lnb .lnb_depth1.liPlus.on:before{background: #fff;}
.lnb .lnb_depth1.liPlus.on:after{opacity: 0}

.subContent{flex: 1;min-width: 0; position: relative;}


@media screen and (min-width:1024px){
	.subNavi .subNaviList ul{display: none !important;}
}
@media screen and (max-width:1700px){
	#header .menu ul.gnb > li > a{font-size: 22rem;padding: 0 40rem;}
	#header nav .gnb > li > a br{display: block;}
	#header .menu .sub_menu .subMtle{display: none;}
	#header .menu .sub_menu ul{margin: 0 auto;}
	#header .menu ul.gnb > li > a:before{top: 12rem;}
	.subNavi,.container,#footer .footerIn{width: calc(100% - 60rem);}
}
@media screen and (max-width:1024px){
	#header{height: 80px;border-radius: 0 0 30px 30px;}
	#header .gnb_bg{display: none;}
	#header h1{left: 30px;top: 50%;transform: translateY(-50%);font-size: 20px;}
	#header h1 img{height: 40px;}
	#header .btn_menu{display: flex;justify-content: center;flex-direction: column;gap: 8px;}
	#header .header_right{right: 65px;position: absolute;border-bottom: none;}
	#header .area_util{line-height: 80px;}
	#header .area_util ul > li{font-size: 17px;}
	#header .area_util ul > li a:before{background-size: 88px;width: 22px;height: 20px;vertical-align: -2px;margin-right: 5px;}
	#header .area_util ul > li.util_home{display:none;}
	#header .area_util ul > li.util_mine a:before{background-position: -44px;}
	#header .area_util ul > li.util_login a:before{background-position: left;}
	#header .area_util ul > li.util_logout a:before{background-position: -22px;}

	.active #header{position: fixed;}
	.active #header nav,
	#header nav.active{right:0px;box-shadow:-5px 0px 15px rgba(0,0,0,0.1);transition:all 0.5s ease-out 0s;}
	.active #header .btn_close{display: block;}
	
	#header nav{position:fixed;top:0px;right: -100%;z-index: 10;width: 100%;height:100vh;margin:0;background:#fff;}
	#header nav .gnb{position:absolute;top: 80px;right:0px;width:100%;overflow-y:auto;box-sizing: border-box;background: #fff;}
	#header nav .gnb > li{display:block; width:100%;}
	#header nav .gnb > li > a{display:block; padding:17px 0; font-size:18px; color:#111; transition:all 0.3s ease 0s;}
	#header nav .gnb > li > a:hover .sub_menu{display:none !important}
	#header .menu ul.gnb > li{padding:0; text-align:left;}
	#header .menu ul.gnb > li > a{line-height: 1.3;display:block;height:auto;padding: 18px 30px;font-size: 19px;border-bottom: 1px solid #ddd;}
	#header nav .gnb > li > a br{display: none;}
	#header .menu ul.gnb > li > a:after{display:block;content:"";position: absolute;right: 30px;top: 20px;width: 10px;height: 11px;border: 2px solid #000;border-top: 0;border-left: 0;transform: rotate(45deg);transition: 0.3s;}
	#header .menu ul.gnb > li.active > a:after{transform: rotate(-135deg);top: 26px;}
	#header .menu .sub_menu ul{width: 100%;margin-left: 0;padding: 0;}
	#header .menu .sub_menu{position:relative;top: auto;min-height: auto;border-top: none;display: none;opacity: 1;visibility: visible;}
	#header .menu .sub_menu ul{visibility: visible;opacity:1;top: 0;position:relative;background: #f8f8f8;box-sizing: border-box;overflow: hidden;border-top: none;}
													 
	#header .menu .sub_menu li{float:none;background: none;border: none;margin: 0;width: 100%;line-height: normal;}
	#header .menu .sub_menu li:first-child{padding-top: 10px;}
	#header .menu .sub_menu li:last-child{padding-bottom: 10px;}
	#header .menu .sub_menu li a{text-align:left;font-size: 17px;padding: 8px 40px;display: block;}
	#header .menu .sub_menu li a:before{content: '';display: inline-block;width: 4px;height: 4px;border-radius: 100%;background-color: #999999;vertical-align: 5px;margin-right: 7px;}
	#header .menu .sub_menu .subMtle{display: none;}
	#header .menu ul.gnb > li > a:before{display: none;}

	#footer .familySiteWrap{display: none;}
	
	.lnb{display: none;}
	.subNavi{padding:0 30rem 0 0;}
	.subNavi .subNavi_wrap > li{border-right: 1rem solid #e5e5e5;line-height: 53rem;}
	.subNavi .subNavi_wrap > li.home{width:50rem;text-align: center;}
	.subNavi .subNavi_wrap .subNaviList{min-width:120rem;}
	.subNavi .subNavi_wrap .subNaviList > a{padding: 0 35rem 0 10rem;display: block;}
	.subNavi .subNavi_wrap > li:after{display: block;position: absolute;right: 0;top: 20rem;transform: rotate(45deg);}
	.subNavi .subNavi_wrap > li:first-child:after{display: none;}
	.subNavi .subNavi_wrap > li:last-child:after{display: block;}
	.sub{margin-top: -30rem;}
	.sub .subVisual{padding-top: 30rem;}
}

@media screen and (max-width:860px){
	#footer .footerIn{padding: 30rem 0;}
	#footer .footer_logo{display: none;}
	#footer .ft_addresss{text-align: center;margin-top: 20rem;}
	#footer .ft_link{text-align: center;}
	#footer .ft_link li{margin: 5rem 0;}
	.subNavi .subNaviList > ul li a{word-break:break-all;}
	.subNavi .subNavi_wrap .subNaviList{max-width: 164rem;min-width: 110rem;}
	.subNavi .subNavi_wrap .subNaviList > a{text-overflow:ellipsis;white-space: nowrap;max-width: 100%;overflow: hidden;padding: 0 28rem 0 5rem;}
	.subNavi .subNavi_wrap > li.home{vertical-align:top;}
	
}

@media screen and (max-width:640px){
	#header h1{font-size: 47px;}
	#header h1 img{margin-top: -18px;}
	#header .header_right{display: none;}
	.active #header .header_right{display: block;z-index: 15;}
	#header .area_util{padding-right: 25px;}
	#header .area_util ul > li{padding: 0px 7px;}
	#header .area_util ul > li a:before{display: none;}
	#header .area_util ul > li.util_mine:after{content: '';width: 1px;height: 13px;background:#bbb;display: block;position: absolute;right: -3px;top: 50%;transform: translateY(-50%);}
	.subNavi .rightBtn{display: none;}
	.subNavi .subNavi_wrap .subNaviList{max-width: 145rem;min-width: 90rem;font-size: 14rem;}
	.sub .subVisual strong{font-size: 33rem;}
	.subNavi, .container, #footer .footerIn{width: calc(100% - 30rem);}
}

@media screen and (max-width:460px){
	#header{height: 80rem;}
	#header h1 img{height: 40rem;}
	#header .btn_menu{width: 80rem;height: 80rem;border-radius: 30rem 0;}
	#header .btn_menu > i{width: 25rem; height: 3rem;margin-left: -12.5rem;}
	#header .btn_menu > i:nth-of-type(1){top: 30rem;}
	#header .btn_menu > i:nth-of-type(3){top: 50rem;}
	#header .btn_menu.active > i:nth-of-type(1), #header .btn_menu.active > i:nth-of-type(3){top: 40rem;}
	#header .header_right{right: 65rem;}
	#header .area_util{line-height: 80rem;padding-right: 25rem;}
	#header .area_util ul > li{font-size: 17rem;}
	#header nav .gnb{top: 80rem;}
	#header .menu ul.gnb > li > a{font-size: 19rem;padding: 18rem 30rem;}
	#header .menu ul.gnb > li > a:after{right: 30rem;top: 20rem;width: 10rem;height: 11rem;}
	#header .menu .sub_menu li a{font-size: 17rem;padding: 8rem 40rem;}
	#header .menu .sub_menu li a:before{width: 4rem;height: 4rem;vertical-align: 5rem;margin-right: 7rem;}
}