@charset "utf-8";

body, * {box-sizing: border-box;margin: 0 auto;}

#header {width: 100%; padding: 0 10px;}
.hd_wrap {display: flex; justify-content: space-between;}
/* 로고 */
.logo a {display: block;width: 220px;height: 80px;font-size: 0;/* background: url('/images/common/main/logo.png') no-repeat 0; *//* background-size: 220px; */padding: 8px 0;}
.logo a img {width: 100%;}
/* gnb */
.gnb_wrap  {display: none;}
.gnb.on .gnb_wrap {display: block;}
.btn_gnb span {position: absolute; top: -10000px; left: -10000px;}
.btn_gnb {position: absolute;top: 19px;right: 0;width: 45px;height: 45px;background: url("/images/common/btn.png") no-repeat;background-position: 50% -86px;filter: invert(23%) sepia(6%) saturate(3611%) hue-rotate(197deg) brightness(94%) contrast(90%);}
.btn_gnb.gnb_close {z-index: 11;top: 7px;background-position: 50% -134px;}
.gnb .gnb_wrap{position: absolute; z-index: 10; top:0; right: 0; width: 100%; height: 100vh;}
.gnb .gnb_wrap>ul {position: relative; height: 100%; margin-top: 60px;overflow: auto; color: #1f1f1f; background: #d7d9e5;}
.menu>li>a:hover, .menu>li>a:focus, .menu>li>a:active {background: #fff;}
.sub {width: 100%; height: 100vh; padding: 30px 10px 0 20px;}
.menu>li>a {position: relative;display: flex;align-items: center;width: 125px;padding: 20px 0 20px 20px;background: #d7d9e5;font-family: 'TTWanjudaedunsanche','Pretendard';color: #393c5c;}
.menu>li>a>span, .sub>li>a>span {font-size:0;width: 28px;height: 28px;background: url("/images/common/btn.png") center -779px;background-size: 28px;filter: invert(2%) sepia(14%) saturate(399%) hue-rotate(314deg) brightness(20%) contrast(88%);}
.menu .new_win {display: inline-block;width: 26px;height: 20px;background: url("/images/common/new_win_03.png") no-repeat center;filter: none;background-size: 15px;font-size: 0;}
.sub_wrap {position: absolute; top: 0; right: 0; width: calc(100% - 125px); background: #fff;}
.select_menu {display: none;}
.sub>li>a {display: flex;align-items: center;width: 100%;height: 55px;}
.sub>li:hover, .sub>li:active, .sub>li:focus {background: #fff;}
.sub>li>div>p {display: none;}
.sub>li>div>ul>li>a {position: relative;display: block;padding: 10px 0 10px 10px;font-size: 18px;color: #5a5a5a;}
.sub>li>div>ul>li>a>span {position: absolute;left: -10000px;top: -10000px;}
.sub>li>div>ul>li>a:hover,
.sub>li>div>ul>li>a:active,
.sub>li>div>ul>li>a:focus {text-decoration: underline;}
.sub>li>div>ul>li>a::before {display: block;content: "";position: absolute;top: 49%;left: 3px;width: 3px;height: 3px;background: #5a5a5a;}
.menu>li>.sub_wrap {display: none;}
.menu>.on .sub_wrap {display: block;}
.menu>.on>a {background: #fff;}

/* utility */
.util {position: absolute;z-index: 10;top: 0;right: 0;padding: 0 85px 0 15px;width: 100%;height: 60px;font-size: 15px;background: #fff;}
.util::after {display: block;content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: #d7d9e5;}
.util>ul {display: flex; justify-content: space-between;}
.util>ul>li>a {display: block;width: 35px;height: 55px;line-height: 60px;text-align: center;background: url("/images/common/btn.png") no-repeat;background-position: 50% 0px;transition: none;}
.util>ul>li>a:hover,
.util>ul>li>a:active,
.util>ul>li>a:focus {text-decoration: underline; transform: scale(1.1);}
.util>ul>li>.btn_reserve {width: 90px;height: 30px;line-height: 30px;margin: 15px 0 0 0;background: #393c5c;color: #fff;border-radius: 5px;font-family: 'TTWanjudaedunsanche','Pretendard';font-size: 17px;}
.util>ul>li>.log {padding-left: 25px;background-position: 0 -30px;}
.util>ul>li>.u_login {background: url('/images/common/main/gnb_login.png') no-repeat center -101px;font-size: 0;}
.util>ul>li>.u_join {background: url('/images/common/main/gnb_login.png') no-repeat center -45px;font-size: 0;}
.util>ul>li>.my_page {background: url('/images/common/main/gnb_login.png') no-repeat center 11px;font-size: 0;}
.util>ul>li>.u_logout {background: url('/images/common/main/gnb_login.png') no-repeat center -157px;font-size: 0;}
.util>ul>li>.popup {background-position: 50% -226px;position: relative;}
.util>ul>li>.search {background-position: 50% -175px;font-size: 0;}
.util>ul>li>.sitemap {background-position: 50% -61px; background-size: 30px; margin: 0;}
.util>ul>li>a>em{position: absolute; top: -10000px; left: -10000px;}
.util>ul>li>.popup span {position: absolute;top: -2px;right: 5px;z-index: 10;}
.util>ul>li>.popup span strong {font-weight: 300; font-size: 12px; color: #fff;}
.util>ul>li>.popup span strong:after {content:''; background:#b64645; border-radius:50%; width:16px; height:16px; position:absolute; z-index: -1; left:50%; top:50%; transform:translate(-50%, -50%);}

/*  로그인박스 스타일 : 사업마무리 후 필요없다고 판단되면 삭제해도 됨 */
/* .util .log_box {display: none;}
.util .select .log_box{display: block;}
.util .select {position: relative;}
.util .select .log {filter: invert(100%);}
.util .select::after {display:block;content: "";position: absolute;top: 13px;left: 0;z-index: -1;width: 40px;height: 40px;background-color: #393c5c;border-radius: 2px;}
.log_box {position: absolute;top: 50px;z-index: 1;background: #fff;border: 2px solid #393c5c;width: 150px;padding: 10px;}
.log_box li {line-height: 2;margin: 10px 0;}
.log_box .my_page {padding-left: 27px;background: url("/images/common/btn.png") no-repeat -3px -825px;background-size: 27px;}
.log_box .u_login {padding-left: 27px;background: url("/images/common/btn.png") no-repeat -6px 5px;background-size: 31px;filter: invert(9%) sepia(13%) saturate(10%) hue-rotate(338deg) brightness(0%) contrast(93%);}
.log_box .u_join {padding-left: 25px; background: url("/images/common/btn.png") no-repeat -6px -32px; background-size: 28px;}
.log_box li a {display: block;}
.log_box li a:hover,.log_box li a:active,.log_box li a:focus {text-decoration: underline;}
.log_time span {font-weight: 600;}
.log_time em {font-style: normal; margin-left: 10px; padding: 3px 7px; border-radius: 5px; background-color: #393c5c; color: #fff;}
.log_time em:hover,.log_time em:active,.log_time em:focus {background-color: #bbbcce; color: #393c5c; font-weight: 600;}
.log_box .log_close {position: absolute;width: 30px;height: 30px;background: #fff url("/images/common/btn.png") no-repeat center -106px;background-size: 28px;font-size: 0;top: 0;right: 0;}
 */
/* 알림존 : 사용하지 않는다고 해서 주석처리함(나중에 다시 필요할 경우를 대비해 주석처리) */
.util .p_box {display: none;}
.util .on .p_box {display: block;}
.p_box {position: absolute;z-index: 15;top: 0;left: 0;width: 100%;height: 100vh;padding: 60px 0;background: rgba(0,0,0,0.65);color: #fff;text-align: center;}
.p_box>div {width: 100%;position: relative;}
.p_box h2 {font-size: 42px;margin-bottom: 10px;font-family: 'TTWanjudaedunsanche','Pretendard';font-weight: 400;}
.p_box p {font-size: 18px;margin-bottom: 15px;}
.p_box .controler {width: 160px;height: 36px;margin: 0 auto;padding: 4px 23px;background: rgba(0,0,0,0.8);border-radius: 50px;}
.controler button {width: 35px; height: 30px; background: url("/images/common/btn.png") no-repeat;}
.controler button span {position: absolute; top: -10000px; left: -10000px;}
.p_box .controler button {filter: invert(100%) sepia(0%) brightness(150%);}
/* .p_box .controler button:hover,
.p_box .controler button:active,
.p_box .controler button:focus {transform: scale(1.1);} */
.p_box .controler .prev {background-position: center -531px;}
.p_box .controler .stop {background-position: center -635px;}
.p_box .controler .play {background-position: 1px -684px;}
.p_box .controler .next {background-position: center -583px;}
.pbox_c {margin-top: 20px;}
.pbox_c button {position: relative;padding: 6px 30px 6px 15px;background: #fff;color: #393c5c;font-weight: 500;margin-left: 15px;border-radius: 3px;}
.pbox_c button:hover,
.pbox_c button:active,
.pbox_c button:focus {background-color: #d7d9e5;}
.pbox_c button::after {display: block; content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: url("/images/common/btn.png") no-repeat right -106px; background-size: 28px; filter: invert(19%) sepia(37%) saturate(783%) hue-rotate(197deg) brightness(89%) contrast(80%);}
.pimg_box {width: 90%;max-width: 1620px;overflow: hidden;margin: 30px auto;}
.pimg_box ul {width: 500%;}
.pimg_box li {float: left;margin: 0 5px;}
.pimg_box li a {display: block;border-radius: 15px;overflow: hidden;}
.pimg_box img {max-width: 100%;}


/* 검색박스 */
.util .on .search {border-radius: 5px 5px 0 0;filter: invert(53%) sepia(16%) saturate(1320%) hue-rotate(196deg) brightness(13%) contrast(97%);}
.sch_box {position: absolute;z-index: 15;top: 50px;left: 0;width: 100%;height: 260px;padding: 50px 30px;background: #393c5c;color: #fff;text-align: center;}
.sch_box label {font-size: 28px;}
.sch_input {margin-top: 30px;}
.sch_input input[type=text] {width: 100%; height: 50px; border: 2px solid #fff; background: transparent; color: #fff;padding: 10px;}
.sch_input input::placeholder {color: #dcdde8;}
.sch_input input[type=submit] {width: 100%; height: 50px; margin-top: 5px; color: #393c5c; background: #fff; font-weight: 600; font-size: 18px; cursor: pointer;}
.sch_input input[type=submit]:hover,
.sch_input input[type=submit]:active,
.sch_input input[type=submit]:focus {background-color: #d7d9e5;}
.sch_close {position: absolute;top: 20px;right: 20px;width: 35px;height: 35px;background: #fff url("/images/common/btn.png") no-repeat center -139px;font-size: 0;}
.sch_close:hover, .sch_close:active, .sch_close:focus {background-color: #d7d9e5;}
.util .sch_box {display: none;}
.util .on .sch_box {display: block;box-shadow: 0 0 10px #ffffff75;}

/* 푸터 */
#ft_con {position: static;}
.ft_wrap .logo {padding: 8% 0 4% 0;}
.ft_wrap .logo a {width: 280px;background-size: 280px;margin: 0 auto;}
/* 배너모음 */
.banner {padding: 25px 0;border: 1px solid #d7d9e5;border-left: none;border-right: none;}
.controler button {width: 35px; height: 30px; background: url("/images/common/btn.png") no-repeat;}
.controler button span {position: absolute; top: -10000px; left: -10000px;}
.banner .controler {float: left; margin: -7px 10px 0 0;}
.banner button {background-size: 28px;width: 28px;}
.banner .controler .prev {background-position: center -407px;}
.banner .controler .stop {background-position: center -489px;}
.banner .controler .play {background-position: 2px -527px;}
.banner .controler .next {background-position: center -448px;}
/* .banner button:hover,.banner button:active,.banner button:focus {transform: scale(1.2);} */
.banner .list {overflow: hidden;}
.banner .list ul {font-size: 18px;font-weight: 500;width: 500%;}
.banner .list ul li {white-space: nowrap;float: left;padding: 0 20px;}
.banner .list ul li a {display: block;color: #393c5c;}
.banner .list ul li a:hover,.banner .list ul li a:active, .banner .list ul li a:focus {text-decoration: underline;}
/* 푸터-바로가기 */
.foot_shc {clear: both;margin: 4% 0;}
.foot_shc li {background-color: #d7d9e5; margin-top: 1px;}
.foot_shc li a {display: block; padding: 20px 10px; color: #393c5c; font-size: 16px; font-weight: 500;}
.foot_shc li:hover a,.foot_shc li:active a,.foot_shc li:focus a {background-color: #393c5c; color: #fff;}
/* 푸터(.foot) */
.foot {position: relative;background-color: #393c5c;}
.foot .foot_w {padding: 182px 0 0 0;color: #fff;font-size: 14px;}
.ft_left {padding: 0 10px;font-weight: 400;}
.ft_left address, .ft_left p {padding: 5px 0;}
.ft_left address {font-style: normal;}
.ft_left address span {display: block;}
.ft_right {position: absolute; top: 20px; left: 0; width: 100%; padding: 0 10px;}
/* sns */
.sns {float: left;}
.sns ul {display: flex; gap: 15px;}
.sns li a {display: block; width: 38px; height: 38px; background: url("/images/common/sns_icon.png") no-repeat center 2px;}
.sns .insta a {background-position: center -64px;}
.sns li span {position: absolute; left: -10000px; top: -10000px;}
/* 관련사이트 */
.site {float: right; position: relative;}
.site button span {display: inline-block;width: 35px;height: 35px;font-size: 0;background: url("/images/common/btn.png") center -923px;}
.site_open {position: relative; width: 160px;height: 38px;padding-right: 35px;background: #434c9c;color: #fff;border-radius: 10px;}
.site_open span {position: absolute; top: 0; right: 20px;}
.site_list {display:none;position:absolute;bottom: 38px;width:100%;padding: 10px 0 18px 10px;background:#fff;border:1px solid #f4f5ff;border-radius: 10px;box-shadow:2px 2px 20px rgba(0,0,0,.2);}
.site_list.on{display:block;}
.site_list ul {overflow-y: auto;}
.site_list ul li {position:relative; margin:10px; padding-left:13px;}
.site_list ul li a {display:inline-block; font-size:15px;}
.site_list ul li::before{display:block; content:""; position:absolute; left:0px; top:3px; width:6px; height:6px; border:1px solid #4a4f6c; border-radius:100%;}
.site .site_close {position: absolute;bottom: 0;right: 0;background: transparent;}
.site .site_close span {background-position: center -140px;}
/* 방문자수 */
.view_count {clear: both;width: 180px;margin-top: 55px;}
.view_count p {display: flex; justify-content: space-between; padding: 13px 10px 5px 10px; border-bottom: 1px solid #ffffffbb; font-size: 16px;}
.view_count p span:first-child {font-size: 19px;}
.view_count p strong {font-weight: 500;}
/* top(맨위로 이동) */
.top {position: absolute;top: 115px;right: 10px;}
.top a {display: block;width: 45px;height: 45px;text-align: center;border-radius: 50%;background-color: #34a23f;color: #fff;font-size: 12px;}
.top a::after {display: block;content: "";position: absolute;top: 0;width: 45px;height: 35px;background: url("/images/common/btn.png") center -851px;}
.top a span {display: block;padding-top: 23px;}

/* tablet */
@media all and (min-width: 768px) {
.menu>li>a {width: 200px;padding-left: 40px;/* font-size: 20px; */}

.sub_wrap {width: calc(100% - 200px);}
.sch_input input[type=text] {width: calc(100% - 150px);}
.sch_input input[type=submit] {width: 100px; margin: 0 0 0 -5px;}

.util {padding: 0 155px 0 33px;}
.btn_gnb.gnb_close {right: 20px;}
 
.p_box {padding: 50px 30px;}
.p_box {text-align: left;}
.p_box h2, .p_box p {margin-bottom: 50px;float: left;}
.p_box p {margin: 17px 0 0 25px;}
.pbox_top>div {float: right;display: flex;gap: 30px;}
.pbox_top:after {display: block; content: ''; clear: both;}
.p_box .controler {margin: 10px 0 0 0;}
.pbox_c {margin-top: 15px;}
.pimg_box {margin: 30px 0;width: 100%;}

.ft_wrap .logo img {width: 434px;}

.foot_shc {margin: 10% 0;}
.foot_shc ul {display: flex;gap: 50px;justify-content: center;}
.foot_shc li {position: relative; background-color: transparent; border-radius: 50%;}
.foot_shc li a {display: block;width: 100px;height: 100px;padding: 0;border-radius: 50%;background: #393c5c url("/images/common/ft_icon.png") no-repeat center 21px;background-size: 70px;}
.foot_shc li a span {position: absolute;width: 130px;bottom: -40px;left: 50%;transform: translate(-50%);text-align: center;}
.foot_shc .ft_shc2 a {background-position: center -89px;}
.foot_shc .ft_shc3 a {background-position: center -295px;}
.foot_shc .ft_shc4 a {background-position: center -192px;}
.foot_shc .ft_shc5 a {background-position: center -393px;}
.foot_shc li:hover a,.foot_shc li:active a,.foot_shc li:focus a {transform: translateY(-20px); transition-delay: 100ms; color: #393c5c;}
.foot .foot_w {display: flex;justify-content: space-between;padding: 2% 10px;}
.ft_left {padding: 0;}
.ft_right {position: static;display: flex;gap: 10px;width: auto;padding: 20px 0;}
.sns, .site {float: none;margin: 40px 0 0 0;}
.view_count {margin: 0;}

.top {top: -60px;}
}

/* desktop*/
@media (min-width: 1200px) {
#header {width: 100%;background: #fff;padding: 0;position: fixed;z-index: 999;box-shadow: 0 0 10px #c5c5c596;}
.logo {padding: 13px 0;}
.logo a {width: 260px;/* background: url('/images/common/main/logo.png') no-repeat; *//* background-size: 250px; */height: 65px;padding: 0;}
.hd_wrap {width: 95%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.hd_wrap>div {width: calc(100% - 300px);}
.btn_gnb {display: none;}
.gnb .gnb_wrap {position: static; display: flex; justify-content: space-between; height: auto; background: transparent;}
.gnb .gnb_wrap>ul {position: static;display: flex;height: auto;margin: 0;background: transparent;}
.menu {width: 100%;}
.menu>li {width: 17%;}
.menu>li>a {width: auto;padding: 25px 0 15px 0;background: transparent;font-size: 23px;justify-content: space-evenly;color: #393c5c;}
.menu>li>a>span {display: none;}
.menu>li>a:after {content:''; background-color:#34a23f; width:0; height:3px; position:absolute; left:0; bottom:5px; z-index:1; transition:all .3s}
.menu>li>a:hover, .menu>li>a:active, .menu>li>a:focus {color: #34a23f; background: transparent;}
.menu>li>a:hover:after, .menu>li>a:active:after, .menu>li>a:focus:after {width: 100%;}
.menu>li.on>a {color: #34a23f;}
.menu>li.on>a:after {width: 100%;} 
.sub_wrap {position: absolute;z-index: 9;top: 90px;left: 0;width: 100%;height: auto;}
.sub_wrap>div {background: #fff;height: auto;padding: 0;}
.sub_wrap>div::before {display: block;content: "";position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: calc(100vh - 90px);background-color: #00000054;}
.sub_wrap>div>div {position: relative; height: 100%;}
.select_menu {display: block; position: absolute;top: 0;left: 280px;width: 74%;height: 50px; padding: 15px; margin: 40px;background-color: #d7d9e5;}
.sub {width: 280px;height: 100%;padding: 0;background: #d7d9e5;}
.sub>li {padding: 0 0 0 30px;}
.sub>li>a {height: 65px; font-weight: 500;}
.sub>.on {background: #fff;}
.sub>li>div {position: absolute; top: 0; left: 280px; width: calc(100% - 280px); height: 50%; padding: 20px 0 20px 50px; background: #fff;}
.sub>li>div p {display: block; margin: 0 0 20px 0; font-weight: 500; font-size: 26px;}
.sub>li>div p a {padding-right: 40px;background: url("/images/common/btn.png") no-repeat right -483px;background-size: 30px;filter: invert(2%) sepia(14%) saturate(399%) hue-rotate(314deg) brightness(20%) contrast(88%);}
.sub>li>div ul {display: flex;flex-wrap: wrap;gap: 20px;}
.sub>li>div ul li a {display: block; width: 260px; height: 55px; padding: 18px 15px;}
.util {position: static;width: auto;height: auto;background: transparent;padding: 4px 0 0 0;}
.util::after {display: none;}
.util>ul {gap: 10px;}

.p_box h2 {font-size: 52px;}
.p_box p {margin: 25px 0 50px 30px;}
.pimg_box li {margin: 0 20px;}

.sch_box {top: 90px;background: #393c5c url("/images/common/search_bg.png") no-repeat 100px 70px;}
.sch_box label {font-size: 35px;}
.sch_input input[type=text] {width: calc(40% - 150px);}
.sch_input input[type=submit] {font-size: 22px;}

#ft_con {height: 100vh;min-height: 720px;margin: 0;overflow: hidden;position: relative;}
.ft_wrap {width: 100%; height: 100%;}
.ft_wrap .logo {padding: 7% 0 3% 0;}
.ft_wrap .logo a {width: 343px;background: url('/images/common/main/logo.png') no-repeat;background-size: 343px;height: 99px;}

.banner {margin: 0;}
.banner .banner_w {width: 95%;margin: 0 auto;}
.banner .controler {margin: -7px 20px 0 -10px;}
.foot_shc {margin: 4% 0 8% 0;}
.foot_shc ul {gap: 100px;}
.foot_shc li a {width: 120px;height: 120px;background-size: 80px;font-size: 18px;}
.foot_shc .ft_shc1 a {background-position: center 26px;}
.foot_shc .ft_shc2 a {background-position: center -97px;}
.foot_shc .ft_shc3 a {background-position: center -330px;}
.foot_shc .ft_shc4 a {background-position: center -218px;}
.foot_shc .ft_shc5 a {background-position: center -444px;}

.foot {position: absolute;bottom: 0;left: 0;width: 100%;z-index: 99;}
.foot .foot_w {width: 95%;margin: 0 auto;padding: 28px 0;font-size: 18px;}
.ft_left {padding: 15px 0;}
.ft_left address, .ft_left .tel {display: inline-block; margin-right: 50px;}
.ft_left address span {display: inline-block;}
.ft_right {gap: 40px;padding: 0;}
.site_list {bottom: 55px;}

.top {top: -75px; right: 30px;}
}


/* 와이드 desktop*/
@media all and (min-width: 1620px) {
#header {width: 100%;}
.hd_wrap {gap: 40px;width: 1620px;}
.logo img {width: 260px;}
.gnb .gnb_wrap {gap: 50px;}
.menu>li {width: 20%;}
.menu>li>a  {font-size: 24px;}
.select_menu {left: 370px;}
.sub_wrap>div>div {width: 1620px; margin: 0 auto;}
.sub {width: 360px;}
.sub>li>div {left: 360px; width: calc(100% - 360px);}
.util>ul {gap: 5px;}
.util>ul>li>.login, .util>ul>li>.join {padding-left: 35px;}
.util>ul>li>.btn_reserve {font-size: 21px;font-family: 'TTWanjudaedunsanche','Pretendard';margin: 11px 10px 0 0;width: 105px;height: 38px;line-height: 38px;}
.util>ul>li>.u_login {width: 78px;font-size: 15px;background-position: left -101px;text-align: right;margin: 0 5px;}
.util>ul>li>.u_join {width: 88px;font-size: 15px;background-position: left -45px;text-align: right;margin: 0 5px;}
.util>ul>li>.my_page {width: 98px;font-size: 15px;background-position: left 10px;text-align: right;margin: 0 5px;}
.util>ul>li>.u_logout {width: 88px;font-size: 15px;background-position: left -157px;text-align: right;margin: 0 5px;}
.util>ul>li>.search {width: 88px;font-size: 15px;background-position: left -175px;text-align: right;margin: 0 5px;}
.p_box {padding: 0;}
.p_box .controler {position: absolute; bottom: 9%; left: 50%; transform: translate(-50%);}
.p_box>div {width: 1620px;min-height: 720px;margin: 0 auto;padding: 100px 0;}
.pimg_box {margin: 0 0 40px 0;}
    
#ft_con {background: url("/images/common/main/ft_bg.png") no-repeat left 65%;}
.banner .banner_w,
.foot .foot_w {width: 1620px;}
.top {top: -75px; right: 150px;}
}