/* common */
#wrap { position:relative; }
.inner { max-width:1400px; margin-left:auto; margin-right:auto; }

/* font style */
.color_blue { color:#0071cf; }
.color_pink { color:#d42872; }


/* top banner */
.top_banner { position:relative; height:40px; line-height:40px; cursor:pointer; }
.top_banner a.bnr_close { position:absolute; right:2%; top:0; display:inline-block; max-width:1800px; height:100%; z-index:9; }
.top_banner .material-symbols-outlined { padding-top:8rem; color:#fff; vertical-align:top; }
.top_banner p { text-align:center; }
.top_banner p a { display:inline-block; width:85%; height:100%; margin:0 auto; font-size:16rem; font-weight:600; color:#fff; }
.top_banner .swiper { height:100%; }
.top_banner .swiper .swiper-slide { height:100%; }
.top_banner .slide01 { background-color:#1a1a1a; }
.top_banner .slide01 strong { color:#ebdf91; }
.top_banner .slide02 { background-color:#005e9b; }
.top_banner .slide02 strong { color:#ffec71; }
.top_banner .slide03 { background-color:#ddd; font-weight:bold; }
.top_banner .slide03 p a { color:#222; }
.top_banner .slide03 strong { color:green; }


/* header */
#header { max-width:1800px; width:96%; height:88px; margin:0 auto; background-color:#fff; }
#header .header { position:relative; display:flex; height:100%; align-items:center; justify-content:space-between; }
#header h1 { display:inline-block; width:150px; height:100%; }
#header h1 a { display:block; width:100%; height:100%; background:url('../images/common/logo.png') left center no-repeat; background-size:contain; }
#header .head_btn { display:flex; align-items:center; }
#header .head_btn a[class^="btn_"] { display:inline-block; margin-left:20rem; }
#header .head_btn a.btn_login { margin-left:0; }
#header .head_btn a.btn_membership { width:100px; height:38px; line-height:38px; background-color:#0072bc; color:#fff; font-size:15rem; font-weight:500; text-align:center; border-radius:38px; }
#header .head_btn a.btn_kakao { width:160px; height:38px; line-height:38px; margin-left:6rem; background-color:#fee500; color:#fff; font-size:15rem; font-weight:500; color:#3c1e1e; text-align:center; border-radius:38px; }
#header .head_btn a.btn_kakao img { height:12px; margin-right:3px; vertical-align:-1px; }
#header .bubble { position:relative; z-index:10; }
#header .bubble ul { position:absolute; left:64%; top:160%; transform:translateX(-50%); width:80px; padding:8rem 0; border:2px solid #242424; border-radius:6rem; background-color:#fff;display:none; }
#header .bubble ul:after { position:absolute; left:50%; top:-9px; transform:translateX(-50%); display:block; width:12px; height:9px; background:url('../images/common/bubble_arrow.png') no-repeat; background-size:contain; content:''; }
#header .bubble li { padding:2rem 0; }
#header .bubble li a { display:block; font-size:14rem; text-align:center; line-height:1.3; }
#header .bubble li a:hover { text-decoration:underline; }




.nav-button { position:relative; width:18px; padding:41px 20px; box-sizing:content-box; transition:ease-out 0.2s; cursor:pointer; z-index:9; }
.nav-button .nav-button-line { position:relative; transition:0.2s ease; width:18px; height:2px; background-color:#222; }
.nav-button .nav-button-line:nth-of-type(2) { width:14px; margin:5px 0 5px 4px; }
.nav-button-line-1 { width:18px !important; transform: rotate(45deg); top:0; position:absolute; }
.nav-button-line-2 { display:none; }
.nav-button-line-3 { width:18px !important; transform: rotate(135deg); top:-2px; position:absolute; }

.tabmenu { position:absolute; right:0; top:0; height:100%; display:flex; align-items:center; display:none; }

.tablist { position:absolute; left:0; top:0; display:block; width:100%; height:0; background-color:#0a0a0a; opacity:0; transition:ease-out 0.2s; overflow-x:hidden; z-index:8; display:none; }
.tablist .inner { width:100% !important; }
.tablist .list > a { position:relative; display:block; padding:16rem 30rem; font-size:17rem; color:#fff; }
.tablist .list > a:after { position:absolute; right:21rem; top:50%; transform:translateY(-50%); display:block; font-family:'Material Icons'; font-size:20rem; opacity:0.7; content:'\e313'; }
.tablist .list > a.no_arrow:after { display:none; }
.tablist .list ul { display:none; padding:12rem 0; background-color:rgba(255,255,255,0.05); }
.tablist .list li > a { display:block; padding:8rem 44rem; margin:8px 0; font-size:16rem; font-weight:300; color:#fff; opacity:0.7; }
.tablist .tab_top { display:flex; align-items:flex-end; padding:29px 30rem; border-bottom:1px solid rgba(255,255,255,0.05); }
.tablist .tab_top a { padding-top:3px; margin-right:18rem; font-size:14rem; font-weight:300; color:#fff; }
.tablist .tab_top a .material-symbols-outlined { margin-right:3rem; font-size:22rem; color:#fff; vertical-align:middle; }
.tablist .tab_top a.btn_membership { width:90px; height:30px; line-height:30px; padding-top:0; background-color:#0072bc; color:#fff; font-size:14rem; font-weight:500; text-align:center; border-radius:30px; }
.tabmenu.menu-open + .tablist { display:block !important; left:0; height:100vh; padding-bottom:150rem; opacity:1; }
.nav-button-line-1 { top:7px; background-color:#fff !important; }
.nav-button-line-3 { top:5px; background-color:#fff !important; }
.tablist .sns_grp { padding:30rem; margin-top:10rem; }
.tablist .sns_grp a { width:24rem; height:24rem; }
.tablist .kakao_join { padding:0 30rem; }
.tablist .kakao_join a.btn_kakao { display:block; padding-top:14rem; padding-bottom:14rem; background-color:#fee500; font-size:16rem; font-weight:bold; color:#3c1e1e; text-align:center; border-radius:4px; }
.tablist .kakao_join a.btn_kakao img { height:10px; margin-right:3px; }

#header.fix .nav-button { padding-top:23px; padding-bottom:23px; transition:ease-out 0.2s; }
#header.fix .nav-button .nav-button-line { background-color:#222; }
#header.fix .head_btn .bubble_layer ul { top:24px; }

/* nav */
#gnb ul { display:flex; }
#gnb li { padding:0 30rem; }
#gnb li a { display:block; font-size:18rem; font-weight:600; }
#gnb li.on a,#gnb li a:hover { color:#0072bc; }

/* footer */
#footer { background-color:#fafafa; }
#footer .inner { position:relative; display:flex; justify-content: space-between; }
#footer .logo { width:150px; }
#footer .logo img { max-width:100%; }
#footer .foot_txt { margin-top:20rem; }
#footer .foot_txt p { font-size:16rem; color:#555; line-height:1.6; word-break:keep-all; }
#footer .foot_txt p + p { margin-top:10rem; font-size:15rem; }
#footer .foot_txt span.br { display:block; }
#footer .foot_txt span.emtpy { display:inline-block; width:14rem; }
#footer .sns_grp { display:flex; margin-top:30rem; }
#footer .sns_grp a { display:block; width:28rem; height:28rem; margin-right:24rem; transition:ease-out 0.2s; }
#footer .sns_grp a.sns_insta { background:url('../images/common/sns_insta_black.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_insta:hover { background:url('../images/common/sns_insta_on.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_youtube { background:url('../images/common/sns_youtube_black.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_youtube:hover { background:url('../images/common/sns_youtube_on.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_blog { width:30rem; background:url('../images/common/sns_blog_black.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_blog:hover { width:30rem; background:url('../images/common/sns_blog_on.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_kakao { width:30rem; background:url('../images/common/sns_kakao_black.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_kakao:hover { width:30rem; background:url('../images/common/sns_kakao_on.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_kakaoCh { width:26rem; background:url('../images/common/sns_kakaoch_black.png') no-repeat; background-size:contain; }
#footer .sns_grp a.sns_kakaoCh:hover { width:26rem; background:url('../images/common/sns_kakaoch_blackY.png') no-repeat; background-size:contain; }
#footer .sns_grp a:hover { transition:ease-out 0.2s; }
#footer .foot_btn { margin-top:60rem; }
#footer .foot_btn ul { display:flex; margin:0 -15rem; }
#footer .foot_btn li { position:relative; padding:0 13rem; }
#footer .foot_btn li a { font-size:16rem; }
#footer .foot_btn li:after { position:absolute; left:0; top:0; display:block; width:1px; height:15rem; background-color:#ddd; content:''; }
#footer .foot_btn li:first-child:after { display:none; }
#footer .foot_sitemap { display:flex; }
#footer .grp { margin-left:93rem; margin-top:16rem; }
#footer .grp h4 { padding-bottom:32rem; font-size:16rem; font-weight:bold; word-break:keep-all; }
#footer .grp li { padding-bottom:10rem; }
#footer .grp li a { line-height:1.3; font-size:15rem; color:#555; }
#footer .grp li a:hover { text-decoration:underline; }
#footer .grp:first-child { margin-left:0; }

/* top */
#top { display:none; position:fixed; right:3%; bottom:8%; z-index:7; }
#top a { display:block; width:60px; height:60px; padding-top:12rem; border-radius:50%; font-size:14rem; font-weight:bold; text-align:center; background-color:#fff; box-shadow:0 0 18px rgba(0,0,0,0.2); }
#top a .material-symbols-outlined { display:block; font-size:20rem; }

/* layer pop */
#layer_pop { position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:19; }
#layer_pop .layer_box { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:inline-block; width:440rem; padding:40rem; background-color:#fff; box-shadow:3rem 4rem 18rem rgba(0,0,0,0.6); border-radius:18rem; }
#layer_pop a.layer_close { position:absolute; right:10rem; top:10rem; display:block; padding:10rem; font-size:0; }
#layer_pop a.layer_close:after { display:block; font-family:'Material Icons'; font-size:26rem; content:'\e5cd'; }
#layer_pop p { font-size:24rem; font-weight:bold; text-align:center; line-height:1.3; }
#layer_pop p span { font-size:16rem; color:#333; }
#layer_pop p span.material-symbols-outlined { margin:20rem 0; font-size:32rem; }

.btn_grp { display:flex; margin-top:50rem; }
.btn_grp button { width:50%; height:44rem; line-height:44rem; margin:0 3rem; border-radius:6rem; font-size:16rem; }
.btn_grp button.btn_cancle { border:1px solid #111; }
.btn_grp button.btn_confirm { background-color:#111; color:#fff; }
.btn_grp button.btn_gift { background-color:#0071d0; color:#fff; }

.sns_grp { display:flex; margin-top:60rem; }
.sns_grp a { display:block; width:34rem; height:34rem; margin-right:30rem; transition:ease-out 0.2s; }
.sns_grp a.sns_insta { background:url('../images/common/sns_insta.png') no-repeat; background-size:contain; }
.sns_grp a.sns_insta:hover { background:url('../images/common/sns_insta_on.png') no-repeat; background-size:contain; }
.sns_grp a.sns_youtube { background:url('../images/common/sns_youtube.png') no-repeat; background-size:contain; }
.sns_grp a.sns_youtube:hover { background:url('../images/common/sns_youtube_on.png') no-repeat; background-size:contain; }
.sns_grp a.sns_blog { width:36rem; background:url('../images/common/sns_blog.png') no-repeat; background-size:contain; }
.sns_grp a.sns_blog:hover { width:36rem; background:url('../images/common/sns_blog_on.png') no-repeat; background-size:contain; }
.sns_grp a.sns_kakao { width:36rem; background:url('../images/common/sns_kakao.png') no-repeat; background-size:contain; }
.sns_grp a.sns_kakao:hover { width:36rem; background:url('../images/common/sns_kakao_on.png') no-repeat; background-size:contain; }
.sns_grp a.sns_kakaoch { width:32rem; background:url('../images/common/sns_kakaoch.png') no-repeat; background-size:contain; }
.sns_grp a.sns_kakaoch:hover { width:32rem; background:url('../images/common/sns_kakaoch_on.png') no-repeat; background-size:contain; }
.sns_grp a:hover { transition:ease-out 0.2s; }