@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;
    background-color: #f4ebdc; */
}
.wrap-main{
	max-width: 750px;
	margin: 0 auto;
}
.wrap-main img{
    display: block;
    margin: 0 auto;
}
.wrap-main header{
    height: calc(110 / 750 * 100vw);
    text-align: center;
    background-color: #502314; 
}
.wrap-main header img{
    width: calc(74 / 750 * 100vw);
}
.wrap-main header h1{
    padding: calc(15 / 750 * 100vw) 0;
}
.wrap-y{
    background-color: #ffaa00;
    text-align: center;
}
.billboard{
    width: calc(620 / 750 * 100vw);
    padding: calc(66 / 750 * 100vw) 0 calc(93 / 750 * 100vw) 0;
}
.wrap-y a img{
    width: calc(530 / 750 * 100vw);
}
.energy-charge{
    width: calc(490 / 750 * 100vw);
    padding: calc(95 / 750 * 100vw) 0;
}
.what-is, .how-to{
    width: calc(620 / 750 * 100vw);
}
.how-to{
    padding: calc(45 / 750 * 100vw) 0 calc(55 / 750 * 100vw) 0;
}
.btn-space{
    padding-bottom: calc(55 / 750 * 100vw);
}
.copyright{
    width: calc(560 / 750 * 100vw);
    padding: calc(15 / 750 * 100vw) 0 calc(38 / 750 * 100vw) 0;
}
.disable{
    filter: opacity(40%) grayscale(100%);
    width: calc(530 / 750 * 100vw);
}


@media screen and (min-width: 750px) {  
    .wrap-main header{
        height: 110px;
    }
    .wrap-main header img{
        width: 74px;
    }
    .wrap-main header h1{
        padding: 15px 0;
    }
    .billboard{
        width: 620px;
        padding: 66px 0 93px 0;
    }
    .wrap-y a img{
        width: 530px;
    }
    .energy-charge{
        width: 490px;
        padding: 95px 0;
    }
    .what-is, .how-to{
        width: 620px;
    }
    .how-to{
        padding: 45px 0 55px 0;
    }
    .btn-space{
        padding-bottom: 55px;
    }
    .copyright{
        width: 560px;
        padding: 15px 0 38px 0;
    }
    .disable{
        width: 530px;
    }
}


/***** 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;}
  }