@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* ### 180823_추가 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 기본요소 */
/* ### 180824_수정 */
p,a,input,div,li {
	/* font-family: 'Roboto', sans-serif; */
	font-family: 'Noto Sans kr', sans-serif;
}
a{text-decoration: none;color:#000;}
input{
  border-style: none;
  -webkit-border-radius:0;
     -moz-border-radius:0;
         border-radius: 0;
  outline: none;
  background-color:rgba(255,255,255,0);
  -webkit-appearance: none;
}
*{margin:0;padding:0;}
html{font-size:100%;}
body{font-size:0.75rem;line-height: 1.125rem;}
p{
	font-size:14px;font-size:0.75rem;
}
ul,ol{list-style: none;}

/* flex布局 */

.flex_center{
    display:flex;
    align-items: center;
    justify-content: center;
}
.flex_row_center{
    display:flex;flex-direction: row;align-items: center;
}
.flex_between{
    display:flex;align-items: center;justify-content:space-between;
}

.flex_around{
	display:flex;align-items: center;justify-content:space-around;
}

.flex_column_center{
    display:flex;flex-direction: column;align-items: center;justify-content: center;
}

/* 공통클래스 */
body{
    background-color:#F7F7F7;
}
.container{
    width:100%;
}

.clearfix {*zoom:1;}
.clearfix:after{display: block;clear: both;content: '';}

.bg_cover{background-repeat: no-repeat;background-size: cover;background-position: center center;}

/* 공통부분 */

/* ### 180823_수정 */
header {
  position:fixed;top:0;left:0;
  z-index:20;
  width:100%;height:2.78rem;
  /* background-color:#333333; */
  background-color:#21D670;
}

.icon_back {
  position:absolute;top:0;left:0;
  display: block;
  width:2.78rem;height:2.78rem;
  background-image: url(../images/icon_back.png);
}

header p {
  font-size: 0.89rem;color:#fff;
}

    /* icon_q */
.icon_q>a {
  height:100%;
}
.icon_q>a>div {
  width:0.83rem;height:0.83rem;
  background-color: #707070;
  border-radius: 50%;
  margin-right:0.21rem;
}
.icon_q>a>div>p {
  font-weight: bold;
  padding-left:0.2rem;
  font-size: 0.61rem;
  color:#fff;
}

.icon_q>a>p {
  font-size:0.67rem;color:#333333;
}

    /* icon_link */
.icon_link {
  width:1.45rem;height:1.45rem;
  background-image: url(../images/icon_link.png);
}

.icon_link_2 {
  width:3.95rem;height:1.39rem;
  background-image: url(../images/icon_link_2.png);
}

    /* icon_add */
.icon_add {
  width:1.25rem;height:1.25rem;
  background-image: url(../images/icon_add.png);
}

    /* icon_shop */
.icon_shop {
  width:1.5rem;height:1.33rem;
  background-image: url(../images/icon_shop.png);
}

    /* icon_delete */
.icon_delete {
  display: block;
  width:2.335rem;height:2.335rem;
  background-image: url(../images/icon_delete.png);
}

    /* icon_close  swiper */
.icon_close {
  position:absolute;top:0.5rem;right:0.14rem;z-index: 20;
  width:48px;height:48px;
}
.icon_close>div {
  width:1.39rem;height:1.39rem;
  background-image: url(../images/icon_close.png);
}

.icon_close .icon_close_2 {
  background-image: url(../images/icon_close_2.png);
}

.icon_help {
  width:2.7rem;height:2.7rem;
  background-image: url(../images/icon_help.png);
}

.icon_past {
  width:1.67rem;height:1.67rem;
  background-image: url(../images/icon_past.png);
}

.icon_more {
  width:0.83rem;height:0.83rem;
  background-image: url(../images/icon_more.png);
}

.icon_check {
  width:0.83rem;height:0.83rem;
  background-image: url(../images/icon_check.png);
}

/* modal */
.modal {
  z-index: 30;
  display:none;
  position:fixed;top:0;left:0;
  width:100%;height:100%;
}
.bg_shadow {
  width:100%;height:100%;
  background-color:rgba(0,0,0,.5);
}

.modal_box {
  background-color:#fff;
}

/* alert */

.modal_alert {
  z-index: 200;
}
.modal_alert .modal_box {
  width:16.7rem;
}
.modal_alert .text {
  padding:1.64rem 0.83rem;
  text-align: center;
  font-size:0.78rem;
  color:#333333;
}
.modal_alert .btn_group {
  width:100%;
  position: static;
}

/* modal_swiper */
.modal_swiper {
  display: block;
  z-index:100;
}
.modal_swiper .swiper-container {
    height:100%;
}
.modal_swiper .swiper-container .swiper-slide {background-position: 50% 0;}
.modal_swiper .swiper-container .swiper-pagination {
      bottom:1.4rem;left:50%;
      margin-left:-1.53rem;
      width:3.06rem;height:1.112rem;
      background-color:rgba(0,0,0,.4);
      border-radius: 2em 2em 2em 2em;
}
.modal_swiper .swiper-container .swiper-pagination .swiper-pagination-bullet {
        width:0.5rem;height:0.5rem;
        border:0.1rem solid rgba(255,255,255,.5);
        box-sizing: border-box;
        background-color:rgba(0,0,0,0);
      }
.modal_swiper .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
        background-color:rgba(255,255,255,1);
        border-style: none;
}


/* form */
input[type="checkbox"] {
  width:1.4rem;height:1.4rem;
  border:0.1rem solid #AAAAAA;
  -webkit-appearance:checkbox;
}

.input_box {
  width:17.8rem;height:2.14rem;
  margin:0 auto;
  border-bottom:0.13rem solid #333333;
}

.input_box form {
  width:100%;height:100%;
}

.input_box form input {
  width:100%;height:100%;
  padding:0 0.5rem;
  font-size:0.83rem;
}

.input_box form .btn_form {
  width:3.34rem;height:1.67rem;
  border:0.056rem solid #666666;
  box-sizing: border-box;
  font-weight: bold;
  font-size:0.83rem;color:#333333;
}
.input_box form input::-webkit-input-placeholder {
  font-size:0.77rem;color:#666666;
}

/* button */
.btn_group {
  position:fixed;bottom:0;left:0;
  width:100%;height:2.78rem;
}
/* ### 180823_수정 */
.btn_group a {
  width:100%;height:100%;
  /* background-color:#FF7A70; */
  background-color:#434343;
  font-size: 0.78rem;font-weight: bold;
  color:#fff;
}
/* ### 180824_수정 */
.btn_group > div {
  width:100%;height:100%;
  /* background-color:#FF7A70; */
  background-color:#434343;
  font-size: 0.78rem;font-weight: bold;
  color:#fff;
}
/* ### 180823_수정 */
.btn_group .btn_left_1 {
  /* background-color:#FFE6DD; */
  background-color:#DDDDDD;
  /* color:#FF7A70; */
  color:#666666;
}
.btn_group .btn_left_2 {
  background-color:#DDDDDD;
  color:#666666;
}


/* 반응형 window-width */
@media only screen and (min-width: 320px){
    html {
      font-size: 100% !important;
    }
}
@media only screen and (min-width: 340px){
    html {
      font-size: 106.25% !important;
    }
}
@media only screen and (min-width: 360px){
    html {
      font-size: 112.5% !important;
    }
}
@media only screen and (min-width: 375px){
    html {
      font-size: 117.19% !important;
    }
}
@media only screen and (min-width: 400px){
    html {
      font-size: 125% !important;
    }
}
@media only screen and (min-width: 440px){
    html {
      font-size: 137.5% !important;
    }
}
@media only screen and (min-width: 480px){
    html {
      font-size: 150% !important;
    }
}
@media only screen and (min-width: 520px){
    html {
      font-size: 162.5% !important;
    }
}
@media only screen and (min-width: 560px){
    html {
      font-size: 175% !important;
    }
}
@media only screen and (min-width: 600px){
    html {
      font-size: 187.5% !important;
    }
}
@media only screen and (min-width: 640px){
    html {
      font-size: 200% !important;
    }
}
@media only screen and (min-width: 680px){
    html {
      font-size: 212.5% !important;
    }
}
@media only screen and (min-width: 720px){
    html {
      font-size: 225% !important;
    }
}
@media only screen and (min-width: 760px){
   html {
     font-size: 237.5% !important;
   }
}
@media only screen and (min-width: 800px){
   html {
     font-size: 250% !important;
   }
}
@media only screen and (min-width: 960px){
   html {
     font-size: 300% !important;
   }
}
@media only screen and (min-width: 1242px){
   html {
     font-size: 388.125% !important;
   }
}