@charset "utf-8";
/* CSS Document */
/* MPLUSRounded1c */
@font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: normal;
    src: url("../font/MPLUSRounded1c-Medium.ttf") format("opentype");
  }
  @font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: bold;
    src: url("../font/MPLUSRounded1c-ExtraBold.ttf") format("opentype");
  }
  @font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: 900;
    src: url("../font/MPLUSRounded1c-Black.ttf") format("opentype");
  }

/*-----------------------------
 common
-------------------------------*/
body{
    font: normal 16px 'M PLUS Rounded 1c',Noto Sans,arial,verdana,sans-serif;
    color: #502314;
}
.wrap-main{
	margin: 0 auto;
    max-width: 750px;
}
.wrap-main img, .wrap-main video, .wrap-main p{
    display: block;
    margin: 0 auto;
}
.wrap-main video{
    padding: calc(70 / 750 * 100vw) calc(132 / 750 * 100vw) calc(50 / 750 * 100vw) calc(132 / 750 * 100vw);
}
.bg-b{
    background-color: #f5ebdc;
}
.bg-r{
    background-color: #d72300;
}
.overlaid{
	position: relative;
	z-index: 1;
}
.abs{
	position: absolute;
}
body.open-popup {
    overflow: hidden;
}
.bg-onetime-popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.open-popup .bg-onetime-popup {
    opacity: 1;
    visibility: visible;
}
.onetime-popup {
    position: absolute;
    top: calc(530 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: calc(700 / 750 * 100vw);
}
.onetime-popup-main {
    position: relative;
    margin: 0px;
}
.onetime-popup-main-close {
    position: absolute;
    top: -20%;
    right: calc(30 / 750 * 100vw);
    width: calc(50 / 750 * 100vw);
    height: calc(50 / 750 * 100vw);
    transform: translateY(-50%);
    cursor: pointer;
}
.onetime-popup-main-close::before,
.onetime-popup-main-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: 0.8;
    content: "";
}
.onetime-popup-main-close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime-popup-main-close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.header{
    margin: calc(20 / 750 * 100vw) calc(646 / 750 * 100vw) 0 calc(20 / 750 * 100vw);
}
.notes{
    color: #502314;
    padding: calc(20 / 750 * 100vw) calc(35 / 750 * 100vw);
    font-size: 1.17vw;
    font-weight: bold;
}
.search-btn{
    position: relative;
    padding: 0 calc(133 / 750 * 100vw) calc(30 / 750 * 100vw) calc(133 / 750 * 100vw);
}
.cp-wrap {
    font-size: 1vw;
    right: 0;
    position: absolute;
    padding-right: calc(45 / 750 * 100vw);
    padding-top: calc(2 / 750 * 100vw);
}
.hl-wrap{
    font-size: 1.4vw;
}
/***** footer *****/
/** Root Setting **/
:root {
    --font: "MPLUSRounded1c", "Pretendard", sans-serif;
    --bg-base: #F5EBDC;
    --bg-light: #FFFCF8;
    --normal: #502314;
    --normal-rgb: 80, 35, 20;
    --primary: #D62300;
    --sub: #6F6F6F;
    --light: #89665B;
    --border: rgba(80, 35, 20, 0.1);
  }
  
  /** Tag Default */
  footer {font-family: var(--font); color: var(--normal); background-color: var(--bg-base);}
  footer {font-weight: bold; color: var(--normal); word-break: break-all;}
  a {display: inline-flex; align-items: center; justify-content: center; margin: 0; color: var(--normal); text-decoration: none; outline: none; cursor: pointer;}
  button {margin: 0; padding: 0; font: normal 1em var(--font); font-weight: bold; color: var(--normal); vertical-align: middle; background: 0; border: none; overflow: visible; cursor: pointer;}
  button:disabled {color: var(--disabled); background-color: rgba(var(--normal-rgb), 0.15); border: none; opacity: 1;}
  button:active {outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
  
  .footer {padding: 0; font-weight: bold; font-size: 12px; color: rgba(137, 102, 91, 0.7); background: var(--bg-light);}
  .footer a {font-weight: bold; color: rgba(137, 102, 91, 0.7);}
  .footer a:hover {color: var(--normal);}
  .footer a.txt_line {color: rgba(var(--normal-rgb), 0.7); text-decoration: underline;}
  
  .footer_menu_list {padding: 20px 0; font-weight: bold; opacity: 0.7;}
  .footer_menu_list > ul > li {position: relative; border-bottom: 1px solid var(--bg-base);}
  .footer_menu_list button { text-align: left;}
  .footer_menu_list a {font-weight: bold;}
  .list_title {position: relative; display: flex; align-items: center; height: 53px; padding-left: 20px; color: #502314;}
  .list_title span {flex: 1; font-size: .75rem !important;}
  .list_title button {width: 50px; height: 100%; text-indent: -999rem;}
  .list_title button::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
  .btn_acc::after {content: ""; position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; margin-top: -6px; background: url("../images/ico_darrow01.svg") no-repeat center center; transition: all .3s linear;}
  .accordion_open .btn_acc::after {transform: rotate(180deg);}
  .btn_move01 {background: none;}
  
  .list_contents {height: 0; padding: 0; border-top: 1px solid var(--bg-base); opacity: 0; overflow: hidden; transition: all .3s linear;}
  .list_contents button {width: 100%; padding: 10px 40px; color: var(--light);}
  .accordion_open .list_contents {height: auto; padding: 10px 0; opacity: 1;}
  
  .footer .container {position: relative; max-width: 1620px; margin: 0 auto; padding: 20px;}
  .footer .terms_menu {margin-bottom: 40px; white-space: nowrap;}
  .footer .terms_menu a {position: relative; display: block; margin-bottom: 16px;}
  .footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}
  .footer .terms_menu .btn_recruit {display: none;}
  
  
  .footer .cont {position: relative;}
  .logo {display: inline-block;  width: 100%; height: 12px; margin-bottom: 16px; text-indent: -999em; background: url("../images/bg_logo_b.svg") no-repeat left center; background-size: contain !important;}
  .logo a {display: block;}
  .footer .info {flex: 1; line-height: 1.1;}
  .footer .info p:not(:last-child) {margin-bottom: 4px;}
  .footer .info a {margin-left: 10px;}
  
  .footer .link_area {display: flex; flex-direction: row; align-items: center; margin-top: 20px;}
  .footer .link_area button {width: 24px; height: 24px;}
  .footer .sns {display: flex; align-items: center;}
  .footer .sns > * {margin-left: 16px;}
  .footer .sns > *:first-child {margin-left: 0;}
  .btn_sns_insta {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_instagram.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_facebook {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_facebook.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_x {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_x.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_youtube {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_youtube.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_tictok {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_tictok.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  
  @media screen and (min-width: 640px) {
    .footer_menu_list .list_title {padding: 0 10px 0 30px;}
    .footer_menu_list .list_title .btn_acc::after {right: 30px;}
    .footer .container {padding: 20px 30px;}
    .footer .terms_menu {display: flex; margin-right: -20px; justify-content: flex-end;}
    .footer .terms_menu a {margin: 0; padding: 0 20px;}
    .footer .cont {position: relative; padding-right: 250px;}
    .footer h1 {margin-bottom: 10px;}
    .footer .logo {margin: 0;}
    .footer .link_area {position: absolute; right: 0; top: 50%; margin: -12px 0 0;}
    .footer .sns button {margin-left: 20px;}
  }
  
  @media screen and (min-width: 1024px) {
    .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap; align-items: center;}
    .footer .terms_menu a {position: relative; display: block; padding: 0 20px;}
    .footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}
  
  
    .footer_menu_list {display: none;}
    .footer .container {padding: 40px;}
    .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap;}
    .footer .terms_menu a {position: relative; display: flex; padding: 0 20px; align-items: center;}
    .footer .terms_menu a::before {display: none;}
    .footer .btn_recruit {display: flex; min-width: 95px; height: 34px; margin-left: auto; padding: 5px 38px 5px 12px; color: var(--normal); align-items: center; background: url("../images/ico_bt_link.svg") no-repeat right 12px center; background-color: rgba(var(--normal-rgb), 0.05); border-radius: 50px; opacity: 0.7;}
  
  
    .footer .cont {padding-right: 300px;}
    .footer h1 {margin-bottom: 20px;}
    .footer .logo {display: block; width: 200px; height: 24px;}
    .footer .info {line-height: 1.5;}
    .footer .info p:not(:last-child) {margin-bottom: 4px;}
    .footer .info a {margin-left: 10px;}
  
    .footer .link_area {top: auto; bottom: 0; margin: 0;}
    .footer .link_area button {width: 32px; height: 32px;}
    .footer .sns {display: flex; align-items: center;}
    .footer .sns button {margin-left: 30px;}
  }

@media screen and (min-width: 750px) {
    .wrap-main{
        margin: 0 auto;
        max-width: none;
    }
    .wrap-main img, .wrap-main video, .wrap-main p{
        display: block;
        margin: 0 auto;
        max-width: 750px;
    }
    .wrap-main video{
        padding: 70px 132px 50px 132px;
    }
    .onetime-popup {
        top: 530px;
        min-width: 700px;
    }
    .onetime-popup-main-close {
        right: 30px;
        width: 50px;
        height: 50px;
    }
    .header{
        margin: 20px 0 0 calc(50% - 355px);
    }
    .header img{
        width: 85px;
    }
    .notes{
        padding: 20px 35px;
        font-size: 8.6px;
    }
    .search-btn{
        padding: 0 133px 30px calc(50% - 245px);
    }
    .cp-wrap {
        font-size: 8px;
        padding-right: calc(50% - 337px);
        padding-top: 2px;
    }
    .hl-wrap{
        font-size: 10.5px;
    }
}