@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root { 
  --green : #009223; 
  --yellow : #ffce32;
  --gray1 : #666666; 
  --gray2 : #999999; 
}

body { font-family: "Noto Sans KR","맑은 고딕", sans-serif; color:#292929; }
#wrap { min-width: 1280px; } /* 1280보다 작아지지 않게함 */
h2 { font-family: "Ubuntu", sans-serif; font-weight: 700; letter-spacing: -1px; background: url('../img/bul_tit.png') no-repeat; line-height: 1.7; padding-left:25px; }

li.select a { color: var(--green); font-weight:600; }


header { position: relative; height: 165px; border-top: 5px solid var(--green);   border-bottom: 1px solid #ddd; }

.logo { position: absolute; left: calc(50% - 101px); top:35px; }
.logo a { display: block; width: 202px; height: 40px; background: url('../img/logo_w.png'); text-indent: -9999px; }

#gnb {  position: absolute; top:98px; width: 100%; text-align: center; }
#gnb > ul { display: inline-block; }
#gnb > ul > li { position: relative; float: left; width: 165px;}
#gnb a.dp1 { display: block; padding-top: 20px; font-size: 18px; letter-spacing: -0.25px; font-weight: 600; position: relative; z-index: 100; }
#gnb > ul > li:hover a.dp1 { color:var(--green)}

#gnb > ul > li:hover .dp2 { visibility: visible; opacity: 1;  top:-20px; z-index: 99; }

/* sub */
.dp2 { visibility: hidden; opacity: 0; position: absolute; left:0; width: 100%;   padding: 87px 0 20px; top:0; background: #fff; transition: .3s; }
.dp2 > ul > li a { display: block; font-size: 15px; padding: 8px 0; letter-spacing: -0.3px; color: var(--gray1);}
.dp2 > ul > li a:hover { color:var(--green); text-decoration: underline; }


/**************** main_visual ****************/
.main_visual_inner { position: relative; width: 100%; height: 440px; overflow: hidden; }
.main_visual_imgs { position: absolute; left:50%; margin-left: -960px; }

.quicklink { position: relative; top:-30px; height: 80px; width: 1170px; margin: auto;  }
.quicklink_wrap { display: table; width: 600px; height: 100%; float: right;}

.quicklink_wrap > div { display: table-cell; width: 50%; text-align: center; vertical-align: middle;}
.store { background: var(--yellow); border-radius: 30px 0 0; }
.fran { background: var(--green); border-radius: 0 0 30px; color: #fff; }

.quicklink_wrap > div a { font-size: 22px; font-weight: 700; }

.store span:before, .fran span:before { 
  display: inline-block; content: ""; width: 34px; height: 30px; vertical-align: middle; margin-right: 10px;
}
.store span:before { background: url('../img/icon_map.png') no-repeat center; }
.fran span:before { background: url('../img/icon_franchise.png') no-repeat; }

/* menu */
.menu { padding-top: 60px; height: 560px; }
.menu h2 { font-size: 42px; }
.menu_header { width: 1170px; margin: auto; position: relative;}
.tab { position: absolute; right: 0; top: 30px}
.tab ul { overflow: hidden; }
.tab li { float:left; margin-left: 40px; }
.tab a { font-weight: 500; }
.tab li + li:before { display: inline-block; content: ""; width: 1px; height: 15px;  background: #bdbdbd; transform: translate(-20px, 1px); }

.menu_wrap { width: 1200px; margin: auto; }
.classic { }
.menu_wrap ul { display: flex; gap:30px; }
.menu_wrap li { flex:1; text-align: center; position: relative;}
.menu_wrap li a { }
.menu_wrap li a > div { }
.menu_wrap li figure { }
.menu_wrap li figure img { width: 100%; }
.menu_wrap li strong { font-size: 18px; font-weight: 700;  }
.menu_wrap li p { margin-top: 10px; font-size: 13px; color: var(--gray2); line-height: 20px; }
.menu_wrap li:after { display: none; position: absolute; content: ""; width: 98px; height: 98px; background: url('../img/btn_more.png'); top:136px; left:125px }

.menu_wrap li:hover { flex:1.3; }
.menu_wrap li:hover strong { font-size: 25px; }
.menu_wrap li:hover p { display: none; }
.menu_wrap li:hover:after { display: block; }

/* subway */
.subway { padding: 80px 0; background: url('../img/bg_content.gif');}
.subway_inner { width: 1280px; margin: auto; 
  display: grid;
  grid-template-rows: repeat(2, 300px);
  grid-template-columns: 455px auto 326px;
  row-gap: 30px;
}

.util p, .history p { font-size: 28px; font-weight: 600; color: #fff; line-height: 40px; letter-spacing: -1px; }
.subway_inner .btn { display: inline-block; color: #fff; border: 2px solid #fff; padding: 8px 0 9px; border-radius: 9999px; font-size: 17px;
text-align: center; }

.util { margin-left: 55px; background: url('../img/bg_utilization.png'); padding: 40px; 
  display: flex; flex-direction: column; justify-content: space-between;}
.util .btn { width:92px; }

.history { grid-column:span 2; background: url('../img/img_subway_history.png'); padding: 40px 0 40px 410px; display: flex; flex-direction: column; justify-content: space-between;}
.history .btn { width: 128px; }

.whats_new { grid-column:span 2; padding:0 30px 0 55px; }
.whats_new_in { height: 100%; padding:75px 0 75px 60px; background: #fff; border-radius: 30px 0 30px 0; display: flex; gap: 150px; } 

.whats_new h2 {  font-size: 30px; line-height: 2.5;}
.whats_new p { padding-left: 20px ; text-align: center; line-height: 1.5; color: var(--gray1);}

.whats_new ul {}
.whats_new li { height: 35px; }
.whats_new li a { display: inline-block; position: relative; }
.whats_new li a:hover { color: var(--green); }
.whats_new li a:after { position: absolute; content: ""; width: 0; height: 3px;  background: var(--green); left:50%; bottom:-3px; transition: 0.3s; }

.whats_new li a:hover:after { width: 100%; left:0; }

.whats_new .more { display: inline-block; font-size: 14px; color: var(--gray2); margin-top: 25px; }


.banner { }
.banner figure { width: 270px; border-radius: 0 30px 0 30px; overflow: hidden;  }


.quick { padding: 40px 0; text-align: center; }
.quick ul { display: inline-block; overflow: hidden; }
.quick li { float: left; margin-left: 70px; }
.quick li:first-child { margin-left:0; }
.quick a {  position: relative;
  height: 70px; padding-left: 90px; text-align: left; 
  display: flex; flex-direction: column; justify-content: center; gap:7px 
}
.quick figure { width: 70px; height: 70px; background: url('../img/icon_quickmenu.png'); position: absolute; left: 0; }

.quick li:nth-child(1) figure { background-position: 0 0;}
.quick li:nth-child(2) figure { background-position: -70px 0; }
.quick li:nth-child(3) figure { background-position: -140px 0; }
.quick li:nth-child(4) figure { background-position: -210px 0; }

.quick strong { display: block;font-size: 18px; font-weight: 700; }
.quick span { font-size: 13px; color: var(--gray2); }


/* footer */
footer { background: #292929; color:rgba(255, 255, 255,0.5); padding: 20px 0; position: relative; }
.footer_in { width: 1170px; margin: auto; }

.footer_menu:after { position: absolute; content: ""; left:0; top:56px; width: 100%; height: 1px; background: var(--gray1);  }
.footer_menu ul { overflow: hidden; }
.footer_menu li { float: left; margin-right: 20px; }
.footer_menu a { font-size: 13px; }
.footer_menu strong { color:rgba(255, 255, 255,0.9); font-weight: 500;}

address { margin-top: 40px; font-size: 13px; line-height: 24px; }

.sns { float: right; margin-top: -50px; }
.sns a { display: inline-block; width: 50px; height: 50px; text-indent: -9999px; }
.sns a.inst { background: url('../img/icon_sns_instar.png');} 
.sns a.fb { background: url('../img/icon_sns_facebook.png');}
.sns a:hover { background-position: -50px 0; }