
/* header */
header { background-color: #fff;}
header .gnb > ul > li > a{ color: #CFB699; }

/* tab */
#tab{ text-align: center;}

#section01{ padding: 0 0 120px;}
#section01 .tit{ padding: 40px 0 100px ; text-align: center;}
#section01 .tit p{ padding-bottom: 10px;}
#section01 .reserv-calendar { width: 100%;}
#section01 .reserv-mo { width: 100%; text-align: center; margin-top: 20px; }
#section01 .icon-cal {display: inline-block; width:68px; height: 68px; border-radius: 50%; background: #F15E43; color: #fff; font-size: 30px; line-height: 64px;}
#section01 .icon-cal i{ position: relative; top: 1px;}
#section01 .reserv-mo p {margin: 17px 0 30px; line-height: 18px; color: #333;}
#section01 .reserv-btn {display: inline-block; width: 100%; height: 45px; line-height: 45px; letter-spacing: 0.04em; color: #fff; text-align: center; background: #F15E43;}


/* charge */
#section01.charge .charge-tit{ width: 100%; padding-bottom: 20px; }
#section01.charge iframe{ padding-bottom: 100px;}
#section01.charge .flex-box{ display: flex; position: relative; text-align: left;}
#section01.charge .flex-box .line{ width: 200%; height: 1px; background-color: #ccc; position: absolute; top: 75px; left: -50%;}
#section01.charge .flex-box .charge-tit{ border: 0;}
#section01.charge .flex-box .content{ width: 100%; padding-bottom: 140px;}
#section01.charge .table-wrap{ text-align: left; position: relative;}
#section01.charge .table-wrap .charge-tit{ border: 0;}
#section01.charge .content{ line-height: 26px;}

#section01.charge #parallax{width: 100%; height: 800px; position: relative; overflow: hidden;}
#section01.charge #parallax h3{ display: block; width: 100%; position: absolute; top: calc(50% - 30px); text-align: center;}

#section01.charge .table-wrap{ padding-top: 40px;}
#section01.charge table {width: 100%;margin: 0 auto; text-align: center; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;}
#section01.charge table tr {line-height: 50px;  border-bottom: 1px solid #efefef;}
#section01.charge table th {font-size: 16px;color: #666666;font-weight: 500; width:calc(100%/11);  background-color: #F6F6F6;}
#section01.charge table td {font-size: 14px;color: #333; width:calc(100%/11); background-color: #fff;}
/* =================== 1540px =================== */
@media (max-width: 1540px) {
    #section01.charge #parallax{ height: 41.67vw;}
  }

/* comm */
#section01.comm{ padding: 140px 0 120px;}
#section01.comm .wrap1520{ display: flex; justify-content: space-between;}
#section01.comm .wrap1520 .tab-wrap{ border-right: 1px solid #ccc; width: 185px;}
#section01.comm .wrap1520 .tab-wrap li{ width: 112px; height: 44px; border-bottom: 1px solid #ccc;}
#section01.comm .wrap1520 .tab-wrap li:last-child{ border-bottom: 0;}
#section01.comm .wrap1520 .tab-wrap li a{ position: relative; display: block; width: 100%; height: 100%; text-align: center; line-height: 44px; transition: .3s;}
#section01.comm .wrap1520 .tab-wrap li a:after{ content: ''; position: absolute; width: 60px; height: 1px; background-color: #466E82; bottom: -1px; left: 0; right: 0; margin: 0 auto; transition: .3s; transform: scaleX(0); transform-origin: center;}
#section01.comm .wrap1520 .tab-wrap li a:hover{ color: #466E82; font-weight: 700;}
#section01.comm .wrap1520 .tab-wrap li a:hover:after{ transform: scaleX(1);}
#section01.comm .wrap1520 .tab-wrap li a.active{ color: #466E82; font-weight: 700;}
#section01.comm .wrap1520 .tab-wrap li a.active:after{ transform: scaleX(1);}
#section01.comm .wrap1520 .content-wrap{ width: calc(100% - 112px);}
