@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css);
@font-face {
    font-family:'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html, body {margin:0;padding:0;height:100%;}
body {color:#666;font-size:13px;line-height:1.6;font-family:'NanumBarunGothic';padding-bottom:40px;overflow-x:hidden;background:#fff url(../images/bg_header.png);min-width:320px;}
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;}
ul, ol {margin:0;padding:0;list-style:none;}
p {padding:0;margin:0;}
a {color:#777;text-decoration:none;-webkit-transition:all .2s ease 0s;transition:all .2s ease 0s;}
a:focus {outline:none;text-decoration:none;}
a:hover {text-decoration:none; cursor:pointer; color:#000;}
.ns { font-family:'NanumSquare' !important;}
#header {text-align:center;letter-spacing:-.05em;padding:30px 10px 15px;}
#header h1 {line-height:1.4;color:#382c2e;font-size:24px;padding-top:15px;margin-bottom:30px;letter-spacing:-.05em;font-weight:800;}
#header .sub_txt {display:block;font-size:80%;}
#header .button {min-width:280px;padding:12px 30px;font-weight:800;font-size:15px;border-radius:25px;}
#contents {min-height:300px;padding:0 10px 65px;overflow:hidden;max-width:480px;margin:0 auto;}

.button {display:inline-block;overflow:hidden;padding:4px 18px;line-height:1.6;font-size:14px;border-radius:5px;border-width:0 0 2px 1px;text-shadow:-1px -1px 0 rgba(0, 0, 0, .1);-webkit-transition:opacity .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, background .3s ease;transition:opacity .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, background .3s ease;}
.button.brown {color:#fff;background-color:#87653f;}
.button.kakao {color:#381e1f;background-color:#fad700;}
.button.green:hover, .button.green:active {background-color:#85BB59;border-left-color:#89cd52;border-bottom-color:#89cd52;box-shadow:0 3px #529b17;}
.list_area {margin:0 auto 20px;}
.lnk_list {overflow:hidden;}
.lnk_list li {float:left;width:23.4%;padding-bottom:23.4%;margin:0.8%;text-align:center;position:relative;border:2px dotted #e1e1e1;border-radius:8px;line-height:1;background-color:#fff;}
.lnk_list a {display:block;position:absolute;width:100%;height:100%;}
.lnk_list .frame {display:table;width:100%;height:100%;}
.lnk_list .frame .txt {display:table-cell;vertical-align:middle;}
.lnk_list a span {display:block;font-family:'yg-jalnan';font-size:20px;margin-bottom:17%;}
.lnk_list strong {display:block;font-weight:700;font-size:15px;color:#413638;}
@media (max-width:360px) {
    .lnk_list a span {font-size:17px;margin-bottom:15%;}
    .lnk_list strong {font-size:13px;}
}
.logo_area {text-align:center;padding-top:30px;}
.logo_area img {width:106px;height:auto;}
#footer {position:fixed;bottom:0;left:0;width:100%;}
#footer a {background-color:#87653f;display:block;color:#fff;text-align:center;height:50px;line-height:51px;font-size:16px;font-weight:700;letter-spacing:-.05em;overflow:hidden;}
/*색상 */
.color_set1 .en {color:#78a94e;}
.color_set2 .en {color:#59c3b9;}
.color_set3 .en {color:#f3949c;}
.color_set4 .en {color:#6cbb8e;}
.color_set5 .en {color:#8784bb;}
.color_set6 .en {color:#ec8a1d;}
.color_set7 .en {color:#b8b23a;}
.color_set8 .en {color:#be90b7;}
.color_set9 .en {color:#74a7d2;}
.color_set10 .en {color:#24b770;}
.color_set11 .en {color:#f5af1c;}
.color_set12 .en {color:#f0835c;}
.color_set13 .en {color:#6b9040;}
.color_set14 .en {color:#3590bc;}
.color_set15 .en {color:#87653f;}
.color_set16 .en {color:#e791b4;}

.color_set1 .box_tail {background-color:#78a94e;}
.color_set2 .box_tail {background-color:#59c3b9;}
.color_set3 .box_tail {background-color:#f3949c;}
.color_set4 .box_tail {background-color:#6cbb8e;}
.color_set5 .box_tail {background-color:#8784bb;}
.color_set6 .box_tail {background-color:#ec8a1d;}
.color_set7 .box_tail {background-color:#b8b23a;}
.color_set8 .box_tail {background-color:#be90b7;}
.color_set9 .box_tail {background-color:#74a7d2;}
.color_set10 .box_tail {background-color:#24b770;}
.color_set11 .box_tail {background-color:#f5af1c;}
.color_set12 .box_tail {background-color:#f0835c;}
.color_set13 .box_tail {background-color:#6b9040;}
.color_set14 .box_tail {background-color:#3590bc;}
.color_set15 .box_tail {background-color:#87653f;}
.color_set16 .box_tail {background-color:#e791b4;}
/* 음료추천 */
#card {margin-bottom:20px;}
.item_set .box_info {padding:8px 8px 8px 0;}
.item_set {margin:0;padding:0;}
.title {text-align:center;}
.card_wrap {position: relative;}
.card .front, .card .back {position:absolute;left:0;top:0;width:100%;border-radius:8px;}
.card .front {background-color:#fff;border:2px dotted #e1e1e1;text-align:center;padding:40px 0;line-height:1;}
.card .back {background-color:#fff;border:1px solid #d3d3d3;overflow:hidden;}
.card .front h2, .card .back h2 {font-family:'yg-jalnan';font-size:40px;}
.card .front .tit {font-size:20px;margin:15px 0 0;font-weight:800;color:#000;}
.card .back .subject {text-align:center;padding:15px 15px 0;}
.card .back .subject p {font-size:18px;letter-spacing:-.05em;font-weight:800;color:#333333;word-break:keep-all;}
.card .back .box_img {text-align:center;}
.card .back .box_img img {max-width:100%;width:250px;margin:0 auto;}
.card .back .box_info {text-align:center;padding:0 15px 15px;}
.card .back .box_info h3 {font-family:'yg-jalnan';font-size:30px;color:#000;margin-bottom:8px;}
.card .back .box_info p {font-size:16px;letter-spacing:-.05em;word-break:keep-all;}
.card .back .box_tail {color:#fff;font-size:17px;letter-spacing:-.05em;padding:15px;text-align:center;word-break:keep-all;font-weight:700;}
.card .back .box_tail .tit {font-size:115%;margin-bottom:7px;line-height:1.3}
.bottom_box {clear:both;}
.bottom_box .sns {text-align:center;}
.bottom_box .button {padding:12px 30px;font-weight:800;font-size:16px;border-radius:25px;min-width:280px;}
.bottom_box .logo_area {padding-top:15px;}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}