/*-------------------- common --------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
/*
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face { font-family: 'BMJUA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-style: normal; }
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; }

img{vertical-align:top;}

li {
  list-style: none; }

/* remember to define focus styles! */
:focus {
  outline: 0; }

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/*---------- break point ----------*/
@media all and (max-width: 767px) {
  html { font-size: 62.5%; } 
}

body {
  font-family: 'Noto Sans KR', '맑은고딕', sans-serif;
  font-size: 15px;
  color: #333;
  overflow-x:hidden;
}

@media all and (max-width: 767px) {
    body {
        font-size: 1.4rem;
        line-height: 1.5; 
    }
}

/*---------- color ----------*/
a {
  color: #333;
  text-decoration: none;
  transition: color .3s;
  transition: background-color .3s; }

a:link {
  color: #333; }

a:visited {
  color: #333; }

a:hover {
  color: #ce0037; }

a:active {
  color: #ce0037; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }

/* 기존 상단 스타일 */
@media all and (max-width: 767px) {
  .spNone {
    display: none !important; } }
@media all and (min-width: 768px) {
  .pcNone {
    display: none !important; } }
/*-------------------- header --------------------*/
@media all and (min-width: 768px) {
  #header {
    position: relative;
    max-width: 1060px;
    padding: 0 30px;
    margin: 0 auto;
    height: 90px; } }
@media all and (max-width: 767px) {
  #header {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 60px; } }
@media all and (min-width: 768px) {
  #header .logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 195px; } }
@media all and (max-width: 767px) {
  #header .logo {
    position: absolute;
    top: 20px;
    left: 15px;
    width: 100px; } }
@media all and (min-width: 768px) {
  #header .btn_menu {
    position: absolute;
    top: 17px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 200; }
    #header .btn_menu .hamburger {
      position: relative;
      background-color: #ce0037; }
      #header .btn_menu .hamburger .open {
        color: #fff;
        text-align: center;
        font-size: 12px;
        position: absolute;
        top: 7px;
        left: 0;
        right: 0; }
      #header .btn_menu .hamburger .close {
        display: none;
        color: #333;
        text-align: center;
        font-size: 12px;
        position: absolute;
        top: 7px;
        left: 0;
        right: 0; }
      #header .btn_menu .hamburger .hamburger-box {
        margin-top: 28px; }
    #header .btn_menu .is-active {
      background-color: #f5f5f5; }
      #header .btn_menu .is-active .hamburger-inner,
      #header .btn_menu .is-active .hamburger-inner::before,
      #header .btn_menu .is-active .hamburger-inner::after {
        background-color: #8e7f5e; }
    #header .btn_menu .is-active .open {
      display: none !important; }
    #header .btn_menu .is-active .close {
      display: block !important; } }
@media all and (max-width: 767px) {
  #header .btn_menu {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 40px;
    height: 40px;
    z-index: 100; }
    #header .btn_menu .hamburger {
      position: relative;
      background-color: #ce0037;
      padding: 0 10px; }
      #header .btn_menu .hamburger .open {
        color: #fff;
        text-align: center;
        font-size: 1.0rem;
        position: absolute;
        top: 2px;
        left: 0;
        right: 0; }
      #header .btn_menu .hamburger .close {
        display: none;
        color: #333;
        text-align: center;
        font-size: 1.0rem;
        position: absolute;
        top: 2px;
        left: 0;
        right: 0; }
      #header .btn_menu .hamburger .hamburger-box {
        margin-top: 16px;
        width: 22px;
        height: 19px; }
    #header .btn_menu .is-active {
      background-color: #fff; }
      #header .btn_menu .is-active .hamburger-inner,
      #header .btn_menu .is-active .hamburger-inner::before,
      #header .btn_menu .is-active .hamburger-inner::after {
        background-color: #8e7f5e;
        width: 22px; }
    #header .btn_menu .is-active .open {
      display: none !important; }
    #header .btn_menu .is-active .close {
      display: block !important; } }

.navi_open {
  display: block !important; }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 5px 19px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 1; }

.hamburger-box {
  width: 22px;
  height: 16px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 22px;
    height: 2px;
    background-color: #fff;
    border-radius: 0;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -7px; }
  .hamburger-inner::after {
    bottom: -7px; }

/*
 * 3DX
 */
.hamburger--3dx .hamburger-box {
  perspective: 44px; }
.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateY(180deg); }
  .hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * 3DX Reverse
 */
.hamburger--3dx-r .hamburger-box {
  perspective: 44px; }
.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateY(-180deg); }
  .hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * 3DY
 */
.hamburger--3dy .hamburger-box {
  perspective: 44px; }
.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateX(-180deg); }
  .hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * 3DY Reverse
 */
.hamburger--3dy-r .hamburger-box {
  perspective: 44px; }
.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateX(180deg); }
  .hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * 3DXY
 */
.hamburger--3dxy .hamburger-box {
  perspective: 44px; }
.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateX(180deg) rotateY(180deg); }
  .hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * 3DXY Reverse
 */
.hamburger--3dxy-r .hamburger-box {
  perspective: 44px; }
.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
  .hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg); }

/*
 * Arrow
 */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); }
.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-4.4px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
 * Arrow Right
 */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(4.4px, 0, 0) rotate(45deg) scale(0.7, 1); }
.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
 * Arrow Alt
 */
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-4.4px, -5.5px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-4.4px, 5.5px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
 * Arrow Alt Right
 */
.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(4.4px, -5.5px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(4.4px, 5.5px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
 * Arrow Turn
 */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg); }
  .hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
  .hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
 * Arrow Turn Right
 */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg); }
  .hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
  .hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
 * Boring
 */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg); }
  .hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

/*
 * Collapse
 */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse .hamburger-inner::after {
    top: -14px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -7px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Collapse Reverse
 */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse-r .hamburger-inner::after {
    top: -14px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -7px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Elastic
 */
.hamburger--elastic .hamburger-inner {
  top: 1px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 7px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 14px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 7px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-270deg);
    transition-delay: 0.075s; }

/*
 * Elastic Reverse
 */
.hamburger--elastic-r .hamburger-inner {
  top: 1px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic-r .hamburger-inner::before {
    top: 7px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic-r .hamburger-inner::after {
    top: 14px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 7px, 0) rotate(-135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(270deg);
    transition-delay: 0.075s; }

/*
 * Emphatic
 */
.hamburger--emphatic {
  overflow: hidden; }
  .hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::after {
      top: 7px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent; }
    .hamburger--emphatic.is-active .hamburger-inner::before {
      left: -44px;
      top: -44px;
      transform: translate3d(44px, 44px, 0) rotate(45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic.is-active .hamburger-inner::after {
      right: -44px;
      top: -44px;
      transform: translate3d(-44px, 44px, 0) rotate(-45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
 * Emphatic Reverse
 */
.hamburger--emphatic-r {
  overflow: hidden; }
  .hamburger--emphatic-r .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic-r .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic-r .hamburger-inner::after {
      top: 7px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent; }
    .hamburger--emphatic-r.is-active .hamburger-inner::before {
      left: -44px;
      top: 44px;
      transform: translate3d(44px, -44px, 0) rotate(-45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic-r.is-active .hamburger-inner::after {
      right: -44px;
      top: 44px;
      transform: translate3d(-44px, -44px, 0) rotate(45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
 * Minus
 */
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
.hamburger--minus.is-active .hamburger-inner::before {
  top: 0; }
.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0; }

/*
 * Slider
 */
.hamburger--slider .hamburger-inner {
  top: 1px; }
  .hamburger--slider .hamburger-inner::before {
    top: 7px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider .hamburger-inner::after {
    top: 14px; }
.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-3.1428571429px, -5px, 0);
    opacity: 0; }
  .hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg); }

/*
 * Slider Reverse
 */
.hamburger--slider-r .hamburger-inner {
  top: 1px; }
  .hamburger--slider-r .hamburger-inner::before {
    top: 7px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider-r .hamburger-inner::after {
    top: 14px; }
.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 7px, 0) rotate(-45deg); }
  .hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(3.1428571429px, -5px, 0);
    opacity: 0; }
  .hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(90deg); }

/*
 * Spin
 */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Spin Reverse
 */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Spring
 */
.hamburger--spring .hamburger-inner {
  top: 1px;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 7px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 14px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 7px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 7px, 0) rotate(-45deg); }

/*
 * Spring Reverse
 */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring-r .hamburger-inner::after {
    top: -14px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
  .hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -7px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
  .hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Stand
 */
.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
  .hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
  .hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Stand Reverse
 */
.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
  .hamburger--stand-r .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--stand-r .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
  .hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Squeeze
 */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
 * Vortex
 */
.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }
  .hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity; }
  .hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform; }
.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s; }
  .hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg); }

/*
 * Vortex Reverse
 */
.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }
  .hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity; }
  .hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform; }
.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s; }
  .hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

/*-------------------- navigation --------------------*/
@media all and (min-width: 768px) {
  #navigation {
    width: 38vw;
    height: 100%;
    transition: all 0.3s;
    position: fixed;
    top: 0;
    right: -105%;
    background-color: #f5f5f5;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    z-index: 100; }
    #navigation.navi_open {
      right:0;
      transform: translate(0);
      position: absolute; }
    #navigation .nav_box {
      margin: 80px auto 0;
      padding: 0 60px 65px; }
      #navigation .nav_box:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden; }
      #navigation .nav_box h2 img {
        width: auto; }
      #navigation .nav_box ul {
        margin-top: 30px; }
        #navigation .nav_box ul li a {
          background: url(/common/img/link_arrow.svg) 0 50% no-repeat;
          background-size: 7px;
          padding: 11px 0 11px 20px;
          display: block; } }
@media all and (min-width: 768px) {
  .navi_sp_close {
    display: none; } }
@media all and (max-width: 767px) {
  #navigation {
    width: 60%;
    height: 350px;
    transition: all 0.2s !important;
    transform: translateY(-510px);
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    z-index: 100;
    padding-bottom: 40px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
    z-index: 10; }
    #navigation.navi_open {
      transform: translate(0);
      position: absolute; }
    #navigation .nav_box {
      margin: 50px auto 0;
      padding: 0 30px; }
      #navigation .nav_box h2 img {
        width: 73px; }
      #navigation .nav_box ul {
        margin-top: 40px; }
        #navigation .nav_box ul li a {
          background: url(/common/img/link_arrow.svg) 0 50% no-repeat;
          background-size: 5px;
          display: block;
          padding: 11px 0 11px 20px;
          font-size: 1.2rem; } }







br.mobile{display:none;}
img.mobile{display:none;}

/* 따라다니는 네비게이션 */
#quick_navi{display:none;}
#quick_navi ul{text-align:right;}
#quick_navi ul li{margin-top:10px;}
#quick_navi ul li a{display:inline-block; height:20px; line-height:20px; padding:0 10px; font-size:16px; font-weight:500; color:#66add5; text-align:left; background-color:#ff7c52; position:relative;}
#quick_navi ul li a br{display:none;}
#quick_navi ul li.active a{
    padding-right:30px;
    background-color:#ff8159;
    color:#fff;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -ms-transition:all 0.5s;
    transition:all 0.5s;
}

/* 비쥬얼 영역 */
#main_visual_wrap{background-color:#fe8e6a;}
#main_visual{width:1280px; height:690px; margin:0 auto;}
div.photo_frame{width:1094px; padding-top:53px; position:relative;}
div.photo_frame div.photo{
    border:8px solid #fff; 
    background-color:#fe8e6a;
    position:relative; 
    z-index:3;
    overflow:hidden;
}
div.photo_frame div.photo img{
    opacity:0;
    position:relative;
    transform:translateY(-20px);
    -webkit-transform:translateY(-20px);
    -moz-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    -o-transform:translateY(-20px);
    -webkit-transition:all 0.7s;
    -moz-transition:all 0.7s;
    -o-transition:all 0.7s;
    -ms-transition:all 0.7s;
    transition:all 0.7s;
}

div.photo_frame div.desc1{
    position:absolute; 
    bottom:77px; 
    left:62px;
    z-index:2;
    -webkit-transition:all 0.7s;
    -moz-transition:all 0.7s;
    -o-transition:all 0.7s;
    -ms-transition:all 0.7s;
    transition:all 0.7s;
}
div.photo_frame div.desc2{
    position:absolute; 
    top:53px; 
    right:71px;
    -webkit-transition:all 0.7s 0.2s;
    -moz-transition:all 0.7s 0.2s;
    -o-transition:all 0.7s 0.2s;
    -ms-transition:all 0.7s 0.2s;
    transition:all 0.7s 0.2s;
}
div.photo_frame div.subject{position:absolute; top:373px; right:-340px; z-index:5;}
div.photo_frame div.subject span.subject1{
    display:block; 
    padding-left:25px;
    opacity:0;
    transform:translateY(20px);
    -webkit-transform:translateY(20px);
    -moz-transform:translateY(20px);
    -ms-transform:translateY(20px);
    -o-transform:translateY(20px);
    -webkit-transition:all 0.5s 0.7s;
    -moz-transition:all 0.5s 0.7s;
    -o-transition:all 0.5s 0.7s;
    -ms-transition:all 0.5s 0.7s;
    transition:all 0.5s 0.7s;
}
div.photo_frame div.subject span.subject2{
    display:block; 
    padding-top:10px;
    opacity:0;
    transform:translateY(20px);
    -webkit-transform:translateY(20px);
    -moz-transform:translateY(20px);
    -ms-transform:translateY(20px);
    -o-transform:translateY(20px);
    -webkit-transition:all 0.5s 0.9s;
    -moz-transition:all 0.5s 0.9s;
    -o-transition:all 0.5s 0.9s;
    -ms-transition:all 0.5s 0.9s;
    transition:all 0.5s 0.9s;
}
div.photo_frame div.download.mobile{display:none;}
div.photo_frame div.download{position:absolute; top:70px; right:17px; z-index:9999;}
div.photo_frame div.download a{display:block; width:55px; height:55px; margin-bottom:8px; padding-top:7px; line-height:18px; border-radius:50%; font-size:16px; font-weight:500; color:#e1cbbc; text-align:center; background-color:#fff;}

div.photo_frame.active div.photo img{
    opacity:1;
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
}
div.photo_frame.active div.desc1{left:-38px;}
div.photo_frame.active div.desc2{right:-29px;}
div.photo_frame.active div.subject span.subject1{
    opacity:1;
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
}
div.photo_frame.active div.subject span.subject2{
    opacity:1;
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
}

/* 제품 영역 */
#main_product{width:1280px; padding:145px 0 110px 0; margin:0 auto; position:relative;}
#main_product:before{
    content:""; width:81px; height:136px; position:absolute; top:175px; left:220px; opacity:0; background:url(../img/bg_product_balloon_01.png) no-repeat 0 0;
    -webkit-transition:all 0.7s;
    -moz-transition:all 0.7s;
    -o-transition:all 0.7s;
    -ms-transition:all 0.7s;
    transition:all 0.7s;
}
#main_product:after{
    content:""; width:51px; height:121px; position:absolute; top:220px; left:310px; opacity:0; background:url(../img/bg_product_balloon_02.png) no-repeat 0 0;
    -webkit-transition:all 0.7s 0.3s;
    -moz-transition:all 0.7s 0.3s;
    -o-transition:all 0.7s 0.3s;
    -ms-transition:all 0.7s 0.3s;
    transition:all 0.7s 0.3s;
}

#main_product.active:before{top:135px; left:190px; opacity:1;}
#main_product.active:after{top:200px; left:300px; opacity:1;}

#main_product p.desc{padding-bottom:10px; text-align:center;}
#main_product h2{text-align:center;}

#product_list_wrap{padding:127px 0 0 243px; margin-top:30px; position:relative;}
#product_info{width:670px; padding:30px 35px; position:absolute; top:0; left:442px; background-color:#fff9f2; z-index:2;}
#product_info span{display:block; font-size:15px; font-weight:500; color:#fe8d74; text-transform:uppercase;}
#product_info h3{padding:5px 0 5px 0; font-size:30px; font-weight:700; color:#695d5d; letter-spacing:-3.5px;}
#product_info p{font-size:22px; line-height:28px; color:#695d5d; letter-spacing:-2px;}
#product_info div.object{position:absolute; top:-10px; right:0;}
#product_info div.object span.object1{position:absolute; top:0; right:0; z-index:2;}
#product_info div.object span.object2{position:absolute; top:15px; right:-70px; z-index:1;}

#product_list{overflow:hidden; position:relative; z-index:1;}
#product_list div.sample_view{width:626px; height:535px; float:left; position:relative;}
#product_list div.sample_view img{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -ms-transition:all 0.5s;
    transition:all 0.5s;
}
#product_list div.sample_view img.active{opacity:1;}
#product_list div.color_list{width:220px; float:left;}
#product_list div.color_list ul{padding:98px 0 0 10px; overflow:hidden;}
#product_list div.color_list ul li{margin:8px 6px 0 0; float:left;}
#product_list div.color_list ul li:nth-child(even){margin-right:0;}
#product_list div.color_list ul li a{display:block; border:3px solid #fff;}
#product_list div.color_list ul li.active a{border:3px solid #fe8e6a;}
#product_list div.color_list ul li a span.bg{display:block; width:96px; height:73px; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
#product_list div.color_list ul li:nth-child(1) a span.bg{background-image:url(../img/product_eyeline_color_01.jpg);}
#product_list div.color_list ul li:nth-child(2) a span.bg{background-image:url(../img/product_eyeline_color_02.jpg);}
#product_list div.color_list ul li:nth-child(3) a span.bg{background-image:url(../img/product_eyeline_color_03.jpg);}
#product_list div.color_list ul li:nth-child(4) a span.bg{background-image:url(../img/product_eyeline_color_04.jpg);}
#product_list div.color_list ul li:nth-child(5) a span.bg{background-image:url(../img/product_eyeline_color_05.jpg);}
#product_list div.color_list ul li:nth-child(6) a span.bg{background-image:url(../img/product_eyeline_color_06.jpg);}
#product_list div.color_list ul li:nth-child(7) a span.bg{background-image:url(../img/product_eyeline_color_07.jpg);}
#product_list div.color_list ul li:nth-child(8) a span.bg{background-image:url(../img/product_eyeline_color_08.jpg);}
#product_list div.color_list ul li a span.text{display:block; height:23px; font-size:13px; font-weight:500; color:#fff; text-align:center; letter-spacing:-1px;}
#product_list div.color_list ul li:nth-child(1) a span.text{background-color:#c99313;}
#product_list div.color_list ul li:nth-child(2) a span.text{background-color:#824830;}
#product_list div.color_list ul li:nth-child(3) a span.text{background-color:#ca974d;}
#product_list div.color_list ul li:nth-child(4) a span.text{background-color:#8f6234;}
#product_list div.color_list ul li:nth-child(5) a span.text{background-color:#884e23;}
#product_list div.color_list ul li:nth-child(6) a span.text{background-color:#803820;}
#product_list div.color_list ul li:nth-child(7) a span.text{background-color:#d9ac66;}
#product_list div.color_list ul li:nth-child(8) a span.text{background-color:#7d685a;}

#main_last_wrap{background:url(../img/bg_last.png) no-repeat 50% 100%; position:relative;}
#main_last{width:1280px; height:1020px; padding:70px 0 110px 0; margin:0 auto; position:relative;}
#main_last p.desc{text-align:center;}
#main_last p.desc:after{content:""; display:block; width:354px; height:2px; margin:5px auto; background-color:#fe8e6a;}
#main_last h2{text-align:center;}
#main_last h2 span{display:block; margin-top:15px;}
#main_last p.name{width:300px; height:30px; line-height:28px; margin:13px auto 0 auto; text-align:center; font-size:24px; color:#fff; letter-spacing:-2px; background-color:#fe8e6a;}

#main_last div.object div.object1{
    width:108px; height:180px; position:absolute; top:395px; left:362px; background:url(../img/bg_last_balloon_01.png) no-repeat 0 0; opacity:0;
    -webkit-transition:all 0.7s;
    -moz-transition:all 0.7s;
    -o-transition:all 0.7s;
    -ms-transition:all 0.7s;
    transition:all 0.7s;
}
#main_last div.object div.object2{
    width:111px; height:256px; position:absolute; top:290px; right:362px; background:url(../img/bg_last_balloon_02.png) no-repeat 0 0; opacity:0;
    -webkit-transition:all 0.7s 0.3s;
    -moz-transition:all 0.7s 0.3s;
    -o-transition:all 0.7s 0.3s;
    -ms-transition:all 0.7s 0.3s;
    transition:all 0.7s 0.3s;
}
#main_last div.object div.object3{
    width:72px; height:180px; position:absolute; top:175px; right:270px; background:url(../img/bg_last_balloon_03.png) no-repeat 0 0; opacity:0;
    -webkit-transition:all 0.7s 0.6s;
    -moz-transition:all 0.7s 0.6s;
    -o-transition:all 0.7s 0.6s;
    -ms-transition:all 0.7s 0.6s;
    transition:all 0.7s 0.6s;
}

#main_last div.object.active div.object1{top:295px; left:262px; opacity:1;}
#main_last div.object.active div.object2{top:190px; right:262px; opacity:1;}
#main_last div.object.active div.object3{top:75px; right:170px; opacity:1;}

#ferris_wrap{width:399px; height:499px; margin:154px auto 0 auto; position:relative;}
#ferris_wrap div.ferris_leg{margin-left:-103px; position:absolute; bottom:0; left:50%; z-index:0;}
#ferris_wrap div.ferris_circle{
    position:relative;
    z-index:1;
    -webkit-animation:ferris_circle_animation 20s linear infinite;
    animation:ferris_circle_animation 20s linear infinite;

}
#ferris_wrap div.ferris_product{
    z-index:1;
    width:100%;
    padding-bottom:100%;
    height:0;
    top:0;
    left:0;
    position:absolute;
    -webkit-animation:ferris_circle_animation 20s linear infinite;
    animation:ferris_circle_animation 20s linear infinite;

}
#ferris_wrap div.ferris_product div.product{
    width:98px;
    height:157px;
    position:absolute;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}
#ferris_wrap div.ferris_product div.product.type1{top:-5%; left:50%;}
#ferris_wrap div.ferris_product div.product.type2{top:10%; right:-10%;}
#ferris_wrap div.ferris_product div.product.type3{top:45%; right:-27%;}
#ferris_wrap div.ferris_product div.product.type4{top:88%; right:-12%;}
#ferris_wrap div.ferris_product div.product.type5{top:105%; left:50%;}
#ferris_wrap div.ferris_product div.product.type6{top:88%; left:12%;}
#ferris_wrap div.ferris_product div.product.type7{top:45%; left:-2%;}
#ferris_wrap div.ferris_product div.product.type8{top:9%; left:14%;}
#ferris_wrap div.ferris_product div.product img{
    width:98px;
    -webkit-animation:ferris_product_animation 20s linear infinite;
    animation:ferris_product_animation 20s linear infinite;
}

@-webkit-keyframes ferris_product_animation{
    from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}

@keyframes ferris_product_animation{
    from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}

@-webkit-keyframes ferris_circle_animation{
    from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes ferris_circle_animation{
    from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}

#more_view{width:120px; height:120px; margin:0 0 0 -60px; position:absolute; top:170px; left:50%; text-align:center; font-size:18px; font-weight:700; color:#fff; letter-spacing:-1px; z-index:7;}

#cloud{
    width:220%; height:384px; position:absolute; top:137px; background:url(../img/bg_cloud.png) repeat-x;
    -webkit-animation:cloudAnimate 100s linear infinite;
    animation:cloudAnimate 100s linear infinite;
}

@-webkit-keyframes cloudAnimate{
    from{background-position-x:0}
    to{background-position-x:100%}
}
@keyframes cloudAnimate{
    from{background-position-x:0}
    to{background-position-x:100%}
}

/* SNS 링크 영역 */
#main_sns{width:100%; position:absolute; bottom:27px; left:0;}
#main_sns ul{text-align:center; font-size:0;}
#main_sns ul li{display:inline-block; margin:0 20px;}
#main_sns ul li a{display:block; width:85px; height:85px; background-color:#ffad86; border-radius:100%; position:relative;}
#main_sns ul li a span{display:block; width:52px; height:52px; background-image:url(../img/bg_sns_icon.png); background-repeat:no-repeat; position:absolute; top:50%; left:50%; margin:-26px 0 0 -26px;}
#main_sns ul li a:hover, #main_sns ul li a:focus{background-color:#f97649;}
#main_sns ul li:nth-child(1) a span{background-position:0 0;}
#main_sns ul li:nth-child(2) a span{background-position:-52px 0;}
#main_sns ul li:nth-child(3) a span{background-position:-104px 0;}

/* Tablet */
@media all and (min-width: 768px) and (max-width: 1279px) {
    html{overflow-x:hidden;}
    body{
        overflow-x:hidden;
        -webkit-text-size-adjust:none; 
        -moz-text-size-adjust:none; 
        -ms-text-size-adjust:none;
    }
    #header .logo{position:absolute; top:20px; left:15px; width:100px;}
    #header .logo img{width:100%;}
    #quick_navi{display:block; width:100%; position:static;}
    #quick_navi ul{display:table; table-layout:fixed; width:100%; text-align:center;}
    #quick_navi ul li{display:table-cell; border-left:1px solid #ffd6c3; vertical-align:middle; margin-top:0;}
    #quick_navi ul li:first-child{border-left:none;}
    #quick_navi ul li a{
        width:100%; 
        height:70px; 
        line-height:70px;
        padding:0; 
        font-size:16px; 
        color:#fff6f2; 
        text-align:center; 
        border-radius:0; 
        border:none; 
        background-color:#ff7c52;
        -webkit-transition:none;
        -moz-transition:none;
        -o-transition:none;
        -ms-transition:none;
        transition:none;
    }
    #quick_navi ul li:last-child a{padding-top:0;}
    #quick_navi ul li a:before{display:none;}
    #quick_navi ul li.active a{width:100%; padding-right:0; background-color:#ffccb4; color:#ff8159;}

    /* 비쥬얼 영역 */
    #main_visual{width:100%; height:auto; margin:0 auto;}
    div.photo_frame{width:80%; margin:0 auto; padding:50px 0 150px 0;}
    div.photo_frame div.photo{border:6px solid #fff;}
    div.photo_frame div.photo img{width:100%;}
    div.photo_frame div.desc1{bottom:152px;}
    div.photo_frame div.desc2{top:53px;}
    div.photo_frame div.subject{top:inherit; bottom:50px; right:0;}
    div.photo_frame div.subject span.subject1{padding-left:22px;}
    div.photo_frame div.subject span.subject2{padding-top:10px;}
    div.photo_frame div.subject span.subject1 img{height:70px;}
    div.photo_frame div.subject span.subject2 img{height:70px;}
    div.photo_frame div.download a{width:50px; height:50px; margin-bottom:7px; font-size:15px;}

    /* 제품 영역 */
    #main_product{width:100%; padding:80px 0;}
    #main_product:before{width:81px; height:136px; top:155px; left:70px;}
    #main_product:after{width:51px; height:121px; top:290px; left:160px;}
    #main_product.active:before{top:115px; left:40px;}
    #main_product.active:after{top:180px; left:135px;}
    #main_product p.desc{padding-bottom:15px;}
    #product_list_wrap{padding:100px 40px 0 40px;}
    #product_info{display:block; width:auto; padding:25px; left:inherit; right:15px;}
    #product_info span{font-size:14px;}
    #product_info h3{font-size:26px; letter-spacing:-3px;}
    #product_info p{font-size:20px; line-height:26px; letter-spacing:-1.5px;}
    #product_info div.object{display:none;}
    #product_list div.sample_view{width:100%; height:auto; float:none;}
    #product_list div.sample_view img{width:100%;}
    #product_list div.sample_view img.active{position:static;}
    #product_list div.color_list{width:100%; float:none;}
    #product_list div.color_list ul{width:100%; display:table; table-layout:fixed; padding:10px 0 0 0;}
    #product_list div.color_list ul li{display:table-cell; float:none;}
    #product_list div.color_list ul li:nth-child(even){margin-right:0;}
    #product_list div.color_list ul li:nth-child(4n+4){margin-right:0;}
    #product_list div.color_list ul li a{border:2px solid #fff;}
    #product_list div.color_list ul li.active a{border:2px solid #fe8e6a;}
    #product_list div.color_list ul li a span.bg{width:100%; height:auto; padding-bottom:90%;}
    #product_list div.color_list ul li a span.text{height:20px; line-height:20px; font-size:9px;}

    #main_last_wrap{background:#faefe1 url(../img/bg_last.png) no-repeat 50% 100%; background-size:100% auto;}
    #main_last{width:100%; height:auto; padding:93px 0 110px 0; margin:0 auto; position:relative;}
    #main_last p.desc{text-align:center;}
    #main_last p.desc:after{content:""; display:block; width:354px; height:2px; margin:5px auto; background-color:#fe8e6a;}
    #main_last h2{text-align:center;}
    #main_last h2 span{display:block; margin-top:15px;}
    #main_last p.name{width:300px; height:30px; line-height:28px; margin:13px auto 0 auto; text-align:center; font-size:24px; color:#fff; letter-spacing:-2px; background-color:#fe8e6a;}

    #main_last div.object div.object1{
        width:108px; height:180px; position:absolute; top:395px; left:362px; background:url(../img/bg_last_balloon_01.png) no-repeat 0 0; opacity:0;
        -webkit-transition:all 0.7s;
        -moz-transition:all 0.7s;
        -o-transition:all 0.7s;
        -ms-transition:all 0.7s;
        transition:all 0.7s;
    }
    #main_last div.object div.object2{
        width:111px; height:256px; position:absolute; top:290px; right:362px; background:url(../img/bg_last_balloon_02.png) no-repeat 0 0; opacity:0;
        -webkit-transition:all 0.7s 0.3s;
        -moz-transition:all 0.7s 0.3s;
        -o-transition:all 0.7s 0.3s;
        -ms-transition:all 0.7s 0.3s;
        transition:all 0.7s 0.3s;
    }
    #main_last div.object div.object3{
        width:72px; height:180px; position:absolute; top:175px; right:270px; background:url(../img/bg_last_balloon_03.png) no-repeat 0 0; opacity:0;
        -webkit-transition:all 0.7s 0.6s;
        -moz-transition:all 0.7s 0.6s;
        -o-transition:all 0.7s 0.6s;
        -ms-transition:all 0.7s 0.6s;
        transition:all 0.7s 0.6s;
    }

    #main_last div.object.active div.object1{top:295px; left:262px; opacity:1;}
    #main_last div.object.active div.object2{top:190px; right:262px; opacity:1;}
    #main_last div.object.active div.object3{top:75px; right:170px; opacity:1;}

    #ferris_wrap{width:399px; height:499px; margin:154px auto 0 auto; position:relative;}
    #ferris_wrap div.ferris_leg{margin-left:-103px; position:absolute; bottom:0; left:50%; z-index:0;}
    #ferris_wrap div.ferris_circle{
        position:relative;
        z-index:1;
        -webkit-animation:ferris_circle_animation 20s linear infinite;
        animation:ferris_circle_animation 20s linear infinite;

    }
    #ferris_wrap div.ferris_product{
        z-index:1;
        width:100%;
        padding-bottom:100%;
        height:0;
        top:0;
        left:0;
        position:absolute;
        -webkit-animation:ferris_circle_animation 20s linear infinite;
        animation:ferris_circle_animation 20s linear infinite;

    }
    #ferris_wrap div.ferris_product div.product{
        width:98px;
        height:157px;
        position:absolute;
        -webkit-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
    }
    #ferris_wrap div.ferris_product div.product.type1{top:-5%; left:50%;}
    #ferris_wrap div.ferris_product div.product.type2{top:10%; right:-10%;}
    #ferris_wrap div.ferris_product div.product.type3{top:45%; right:-27%;}
    #ferris_wrap div.ferris_product div.product.type4{top:88%; right:-12%;}
    #ferris_wrap div.ferris_product div.product.type5{top:105%; left:50%;}
    #ferris_wrap div.ferris_product div.product.type6{top:88%; left:12%;}
    #ferris_wrap div.ferris_product div.product.type7{top:45%; left:-2%;}
    #ferris_wrap div.ferris_product div.product.type8{top:9%; left:14%;}
    #ferris_wrap div.ferris_product div.product img{
        width:98px;
        -webkit-animation:ferris_product_animation 20s linear infinite;
        animation:ferris_product_animation 20s linear infinite;
    }

    #main_sns{width:100%;}
    #main_sns ul li{margin:0 15px;}
    #main_sns ul li a{width:60px; height:60px;}
    #main_sns ul li a span{width:34px; height:34px; margin:-17px 0 0 -17px; background-size:102px 34px;}
    #main_sns ul li:nth-child(2) a span{background-position:-34px 0;}
    #main_sns ul li:nth-child(3) a span{background-position:-68px 0;}

    /* Body Scroll Class Init */
    body.scroll #quick_navi{position:fixed; top:0 !important; left:0; z-index:9999999;}
}

/* Mobile */
@media all and (max-width: 767px) {
    img.pc{display:none;}
    img.mobile{display:inline;}
    br.mobile{display:block;}

    html{overflow-x:hidden;}
    body{
        overflow-x:hidden;
        -webkit-text-size-adjust:none; 
        -moz-text-size-adjust:none; 
        -ms-text-size-adjust:none;
    }
    #header .logo{position:absolute; top:20px; left:15px; width:100px;}
    #header .logo img{width:100%;}
    #quick_navi{display:block; width:100%; position:static;}
    #quick_navi ul{display:table; table-layout:fixed; width:100%; text-align:center;}
    #quick_navi ul li{display:table-cell; border-left:1px solid #ffd6c3; vertical-align:middle; margin-top:0;}
    #quick_navi ul li:first-child{border-left:none;}
    #quick_navi ul li a{
        width:100%; 
        height:70px; 
        padding:26px 0 0 0; 
        font-size:16px; 
        line-height:18px; 
        color:#fff6f2; 
        text-align:center; 
        border-radius:0; 
        border:none; 
        background-color:#ff7c52;
        -webkit-transition:none;
        -moz-transition:none;
        -o-transition:none;
        -ms-transition:none;
        transition:none;
    }
    #quick_navi ul li:first-child a{padding-top:16px;}
    #quick_navi ul li a br{display:block;}
    #quick_navi ul li a:before{display:none;}
    #quick_navi ul li.active a{width:100%; padding-right:0; background-color:#ffccb4; color:#ff8159;}

    /* 비쥬얼 영역 */
    #main_visual{
        width:100%; 
        height:auto;
        padding:120px 35px 0 35px;
        transform:translateY(25px);
        -webkit-transform:translateY(25px);
        -moz-transform:translateY(25px);
        -ms-transform:translateY(25px);
        -o-transform:translateY(25px);
    }
    div.photo_frame{width:100%; padding-top:0;}
    div.photo_frame div.photo{border:5px solid #fff;}
    div.photo_frame div.photo img{max-width:100%;}
    div.photo_frame div.desc1{bottom:35px;}
    div.photo_frame div.desc2{top:0;}
    div.photo_frame div.desc1 img{width:12px;}
    div.photo_frame div.desc2 img{width:14px;}
    div.photo_frame div.subject{width:100%; top:-80px; right:inherit; left:-20px;}
    div.photo_frame div.subject span.subject1{padding-left:15px;}
    div.photo_frame div.subject span.subject2{padding-top:6px;}
    div.photo_frame div.subject span.subject1 img{height:41px;}
    div.photo_frame div.subject span.subject2 img{height:50px;}
    div.photo_frame div.download.web{display:none;}
    div.photo_frame div.download.mobile{display:block;}
    div.photo_frame div.download{top:inherit; bottom:12px; right:12px;}
    div.photo_frame div.download a{width:40px; height:40px; margin-bottom:5px; padding-top:5px; line-height:14px; font-size:12px;}
    div.photo_frame.active div.desc1{left:-16px;}
    div.photo_frame.active div.desc2{right:-18px;}

    /* 제품 영역 */
    #main_product{width:100%; padding:65px 0 45px 0;}
    #main_product:before{width:50px; height:82px; top:175px; left:inherit; right:15px; background:url(../img/mobile_bg_product_balloon_01.png) no-repeat 0 0/50px 82px;}
    #main_product:after{width:30px; height:73px; top:200px; left:inherit; right:60px; background:url(../img/mobile_bg_product_balloon_02.png) no-repeat 0 0/30px 73px;}
    #main_product.active:before{top:135px; left:inherit;}
    #main_product.active:after{top:170px; left:inherit;}

    #main_product p.desc{padding-bottom:5px;}
    #main_product p.desc img{height:16px;}
    #main_product h2 img{height:38px;}

    #product_list_wrap{padding:100px 45px 0 45px; margin-top:20px;}
    #product_info{width:auto; padding:15px; left:25px;}
    #product_info span{font-size:11px;}
    #product_info h3{font-size:16px; line-height:20px; letter-spacing:-1.5px;}
    #product_info p{font-size:12px; line-height:16px; letter-spacing:-1px;}
    #product_info div.object{display:none;}

    #product_list{overflow:hidden; position:relative; z-index:1;}
    #product_list div.sample_view{width:100%; height:inherit; float:none;}
    #product_list div.sample_view img{width:100%;}
    #product_list div.sample_view img.active{position:static;}
    #product_list div.color_list{width:100%; float:none;}
    #product_list div.color_list ul{padding:0;}
    #product_list div.color_list ul li{width:calc(100% / 4 - 3px); margin:6px 4px 0 0; float:left;}
    #product_list div.color_list ul li:nth-child(even){margin-right:4px;}
    #product_list div.color_list ul li:nth-child(4n+4){margin-right:0;}
    #product_list div.color_list ul li a{border:2px solid #fff;}
    #product_list div.color_list ul li.active a{border:2px solid #fe8e6a;}
    #product_list div.color_list ul li a span.bg{width:100%; height:auto; padding-bottom:90%;}
    #product_list div.color_list ul li a span.text{height:20px; line-height:20px; font-size:9px;}

    #main_last_wrap{background:#faefe1 url(../img/mobile_bg_last.png) no-repeat 50% 100%; background-size:100% auto;}
    #main_last{width:100%; height:auto; text-align:center; padding:50px 0 0 0;}
    #main_last p.desc{display:inline-block;}
    #main_last p.desc:after{width:100%; height:1px; margin-top:1px; margin-bottom:0;}
    #main_last p.desc img{height:15px;}
    #main_last h2 span{margin-top:8px;}
    #main_last h2 span img{height:38px;}
    #main_last p.name{display:inline-block; width:auto; height:24px; line-height:24px; padding:0 5px; margin:10px auto 0 auto; font-size:18px; letter-spacing:-1px;}
    #main_last div.object div.object1{display:none;}
    #main_last div.object div.object2{display:none;}
    #main_last div.object div.object3{display:none;}

    #ferris_wrap{width:260px; height:357px; margin:80px auto 0 auto;}
    #ferris_wrap div.ferris_leg{margin-left:-77px; bottom:10px;}
    #ferris_wrap div.ferris_leg img{width:154px;}
    #ferris_wrap div.ferris_circle img{width:260px;}
    #ferris_wrap div.ferris_product div.product{width:75px; height:120px;}
    #ferris_wrap div.ferris_product div.product img{width:75px;}
    
    #more_view{width:80px; height:80px; padding-top:20px; margin:0 0 0 -40px; top:90px; font-size:13px;}
    #cloud{
        height:300px; top:30px; background:url(../img/mobile_bg_cloud.png) repeat-x; background-size:auto 300px;
        -webkit-animation:cloudAnimate 20s linear infinite;
        animation:cloudAnimate 20s linear infinite;
    }

    /* SNS 링크 영역 */
    #main_sns{width:100%; padding:9px 0; position:static;}
    #main_sns ul li{margin:0 15px;}
    #main_sns ul li a{width:60px; height:60px;}
    #main_sns ul li a span{width:34px; height:34px; margin:-17px 0 0 -17px; background-size:102px 34px;}
    #main_sns ul li:nth-child(2) a span{background-position:-34px 0;}
    #main_sns ul li:nth-child(3) a span{background-position:-68px 0;}

    /* Body Scroll Class Init */
    body.scroll #quick_navi{position:fixed; top:0 !important; left:0; z-index:9999999;}
}