@charset 'utf-8';
@import url('../_font/nanumsquare.css');

/* base */
html { font-size:10px; }
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="image"], input[type="tel"], textarea, button, select { -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; background:none; }
input:focus, textarea:focus { outline-style:none; } 
input { -webkit-appearance: none; -webkit-border-radius: 0; }
textarea::placeholder, input::placeholder { color:#000; opacity: 0.3; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
a { text-decoration:none; color:#000; }
i, em { font-style:normal; }
body, button, h1, h2, h3, h4, h5, input, select, table, textarea {font-family: 'NanumSquare', sans-serif; color:#1e2831; font-weight:normal; font-size:1rem; line-height:1.35; }

.motion { transition: all 0.7s ease;  }
.hide { display:none !important; }


/* wrap */
.wrap { min-width:320px; max-width:560px; margin:0 auto; padding:5.8rem 0 6.0rem 0; }

/* header */
#hd { position:fixed; left:0; top:0; right:0; background-color:#7650e1; border-radius:0 0 0.5rem 0.5rem; overflow:hidden; height: 5.8rem;  z-index:9; min-width:320px; }
#hd h1 { display:block; }
#hd h1 a { display:block; height:5.8rem; cursor:pointer; background-repeat:no-repeat; background-position:left center; background-image:url('../_img/common/logo_hd@x2.png'); background-size:auto 100% ; font-size:0; color:transparent; }
#hd .sub_title { position:absolute; left:14.5rem; top:50%; display:block; font-size:1.0rem; line-height:1.35; color:#fff; text-transform:uppercase; transform:translateY(-50%); letter-spacing:-0.5px; }
/* sub */
#hd .btn_historyback { position:absolute; left:0.75rem; top:0; bottom:0; display:block; width:4.0rem; height: 5.8rem;  background-repeat:no-repeat; background-position:center; background-image:url('../_img/common/ic_historyback.png'); background-size:1.35rem auto; color:transparent; font-size:0; }
#hd h2 { padding-left:5.0rem; font-size:1.65rem; color:#fff; font-weight:700; line-height: 5.8rem; }

#hd h1.bluebell { width:11.6rem; padding:1.7rem 0 0 2.1rem; }
#hd h1.bluebell a { display:block; height:2.2rem; cursor:pointer; background-repeat:no-repeat; background-position:left center; background-image:url('../_img/common/logo_bluebell.png'); background-size:100% auto; font-size:0; color:transparent; }
#hd .btn_close { position:absolute; right:0; top:0; bottom:0; display:block; width:5.8rem;  background-repeat:no-repeat; background-position:center; background-image:url('../_img/icons/ic_close.png'); background-size:1.5rem auto; color:transparent; font-size:0; }


/* quickmenu */
#quickmenu { position:fixed; left:0; right:0; bottom:0; overflow:hidden; box-sizing:border-box; min-width:320px; padding:0.45rem; background-color:#fff; z-index:9; }
#quickmenu ul { display:grid; grid-template-columns: repeat(4, 1fr); gap:3.0rem; background-color:#7650e1; padding:0 4.0rem; border-radius:0.5rem; box-sizing:border-box; }
#quickmenu ul li { text-align:center; }
#quickmenu ul li a { display:block; height:5.0rem; cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:auto 100%; color:transparent; font-size:0; }
#quickmenu ul li:nth-child(1) a { background-image:url('../_img/common/ic_menu01.png'); }
#quickmenu ul li:nth-child(2) a { background-image:url('../_img/common/ic_menu02.png'); }
#quickmenu ul li:nth-child(3) a { background-image:url('../_img/common/ic_menu03.png'); }
#quickmenu ul li:nth-child(4) a { background-image:url('../_img/common/ic_menu04.png'); }