@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');


/* ----------RESET---------- */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
}

body {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    font-family: '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    color: #333;
    padding-top: 92px;
}

ul,
li {
    list-style: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

html {
    font-size: 18px;
}

/* ----------BLOCK---------- */
body {
    font-size: 16px;
}

.w90 {
    width: 90%;
    margin: 0 auto;
}

.w1000,
.w1200,
.w1300,
.w1400,
.w1500 {
    width: 90%;
    position: relative;
    margin: 0 auto;
}

.w1000 {
    max-width: 1000px;
}

.w1200 {
    max-width: 1200px;
}

.w1300 {
    max-width: 1300px;
}

.w1400 {
    max-width: 1400px;
}

.w1500 {
    max-width: 1500px;
}

.row {
    width: 100%;
    position: relative;
}

.col100 {
    width: 100%;
}
.col90 {
    width: 90%;
}
.col85 {
    width: 85%;
}
.col80 {
    width: 80%;
}
.col75 {
    width: 75%;
}
.col70 {
    width: 70%;
}
.col66 {
    width: 66.6666%;
}
.col65 {
    width: 65%;
}
.col60 {
    width: 60%;
}
.col55 {
    width: 55%;
}
.col50 {
    width: 50%;
}
.col45 {
    width: 45%;
}
.col40 {
    width: 40%;
}
.col35 {
    width: 35%;
}
.col33 {
	width: 33.3333%;
}
.col30 {
    width: 30%;
}
.col25 {
    width: 25%;
}
.col20 {
    width: 20%;
}
.col166 {
    width: 16.6666667%;
}
.col15 {
    width: 15%;
}

@media screen and (max-width: 1023px) {
    .col100_1023 {
        width: 100%;
    }

    .col90_1023 {
        width: 90%;
    }

    .col85_1023 {
        width: 85%;
    }

    .col80_1023 {
        width: 80%;
    }

    .col75_1023 {
        width: 75%;
    }

    .col70_1023 {
        width: 70%;
    }

    .col66_1023 {
        width: 66.6666%;
    }

    .col65_1023 {
        width: 65%;
    }

    .col60_1023 {
        width: 60%;
    }

    .col55_1023 {
        width: 55%;
    }

    .col50_1023 {
        width: 50%;
    }

    .col45_1023 {
        width: 45%;
    }

    .col40_1023 {
        width: 40%;
    }

    .col35_1023 {
        width: 35%;
    }

    .col33_1023 {
        width: 33.3333%;
    }

    .col30_1023 {
        width: 30%;
    }

    .col25_1023 {
        width: 25%;
    }

    .col20_1023 {
        width: 20%;
    }

    .col166_1023 {
        width: 16.6666667%;
    }

    .col15_1023 {
        width: 15%;
    }
}

@media screen and (max-width: 768px) {
    .col100_768 {
        width: 100%;
    }

    .col90_768 {
        width: 90%;
    }

    .col85_768 {
        width: 85%;
    }

    .col80_768 {
        width: 80%;
    }

    .col75_768 {
        width: 75%;
    }

    .col70_768 {
        width: 70%;
    }

    .col66_768 {
        width: 66.6666%;
    }

    .col65_768 {
        width: 65%;
    }

    .col60_768 {
        width: 60%;
    }

    .col55_768 {
        width: 55%;
    }

    .col50_768 {
        width: 50%;
    }

    .col45_768 {
        width: 45%;
    }

    .col40_768 {
        width: 40%;
    }

    .col35_768 {
        width: 35%;
    }

    .col33_768 {
        width: 33.3333%;
    }

    .col30_768 {
        width: 30%;
    }

    .col25_768 {
        width: 25%;
    }

    .col20_768 {
        width: 20%;
    }

    .col166_768 {
        width: 16.6666667%;
    }

    .col15_768 {
        width: 15%;
    }
}

@media screen and (max-width: 480px) {
    .col100_480 {
        width: 100%;
    }

    .col90_480 {
        width: 90%;
    }

    .col85_480 {
        width: 85%;
    }

    .col80_480 {
        width: 80%;
    }

    .col75_480 {
        width: 75%;
    }

    .col70_480 {
        width: 70%;
    }

    .col66_480 {
        width: 66.6666%;
    }

    .col65_480 {
        width: 65%;
    }

    .col60_480 {
        width: 60%;
    }

    .col55_480 {
        width: 55%;
    }

    .col50_480 {
        width: 50%;
    }

    .col45_480 {
        width: 45%;
    }

    .col40_480 {
        width: 40%;
    }

    .col35_480 {
        width: 35%;
    }

    .col30_480 {
        width: 30%;
    }

    .col33_480 {
        width: 33.3333%;
    }

    .col25_480 {
        width: 25%;
    }

    .col20_480 {
        width: 20%;
    }

    .col16_480 {
        width: 16.6666667%;
    }

    .col15_480 {
        width: 15%;
    }
}



.inlineBlock {
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
}

.block {
    display: block;
    width: 100%;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-items-center {
    align-items: center;
}

.flex-container-center {
    justify-content: center;
}

.flex-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

.fleft {
    display: block;
    float: left;
    margin-left: 0;
}

.fright {
    display: block;
    float: right;
    margin-left: 0;
}

.cf:after {
    content: '';
    display: table;
    clear: both;
}

/* ----------TEXT----------- */
.txt_roboto_light {
    font-family: 'Roboto', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
    font-weight: 400;
    letter-spacing: .12em;
}

.txt_roboto_regular {
    font-family: 'Roboto', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
    letter-spacing: .12em;
    font-weight: 500;
}

.txt_roboto_medium {
    font-family: 'Roboto', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
    font-weight: 600;
    letter-spacing: .12em;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
b,
small {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
b,
td,
th {
    font-family: '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
    font-weight: 400;
    line-height: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: .12em;
    font-weight: 500;
}

h1 {
    font-size: 1.8rem;
    font-weight: 600;
}

h2 {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.3em;
}

h3 {
    font-size: 4.2rem;
    line-height: 1.4em;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.4rem;
}

h6 {
    font-size: 1.3rem;
}

p,
.p_clone,
li,
b,
td,
th,
label,
input,
article {
    font-size: 16px;
    line-height: 2em;
    letter-spacing: .12em;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
}

p,
.p_clone {
	margin-bottom: 0px;
}

small {
    font-size: 14px;
    line-height: 1.6em;
    letter-spacing: .12em;
}

b {
    font-weight: 600;
}

a,
a:active,
a:hover,
a:focus {
    outline: none;
}

a {
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 1rem;
    display: inline-block;
	text-decoration: none;
	word-break: break-all;
}

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.txt-bold {
    font-weight: 600;
}

.txt-regular {
    font-weight: 500;
}

.txt-light {
    font-weight: 400;
}

.break-all {
    word-break: break-all;
}


/*------- block edit -------*/
.BlockTextEdit *{
	font: inherit!important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	margin: inherit !important;
}
.BlockTextEdit img {
    min-width: 290px;
}

/*------- Swiper -------*/
/* .swiper-wrapper.disabled {
    transform: translate3d(0px, 0, 0) !important;
}
*/

.swiper-pagination.disabled {
    display: none;
} 





/* ----------FORM----------- */
input[type=text],
input[type=email],
input[type=password],
select {
    font: inherit;
    font-size: 1rem;
    width: 100%;
    margin: 5px 0 6px;
    border: 1px solid #cccccc;
    padding: 10px 12px;
    letter-spacing: 1px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
    border-color: #999;
}

select {
    border-radius: 0;
}

input[type=text].col50,
input[type=email].col50,
input[type=password].col50,
select.col50,
label.select.col50 {
    width: 50%;
    margin-left: -5px;
}

input[type=text].col25,
input[type=email].col25,
input[type=password].col25,
select.col25,
label.select.col25 {
    width: 25%;
    margin-left: -5px;
}

input,
textarea,
keygen,
select,
a,
a:active,
a:hover,
a:focus {
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/icon/arrow-select.png) no-repeat right center transparent;
	background-size: auto 40%;
	background-repeat: no-repeat;
}

label.select {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}

label.select:before {
    content: '';
    display: block;
    width: 50px;
    height: 27px;
    background: #ffffff;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
    margin: auto 0;
    pointer-events: none;
}

label.select:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: #003979 transparent transparent transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto 0;
    pointer-events: none;
}

label h4 {
    margin: 10px 0 11px;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #cccccc;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cccccc;
    opacity: 1;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cccccc;
    opacity: 1;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cccccc;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #cccccc;
}

/*radio&checkbox樣式覆蓋*/
input[type=radio]:not(old),
input[type=checkbox]:not(old) {
    width: 0;
    margin: 0;
    font-size: 0;
    opacity: 0;
    pointer-events: none;
    display: none;
}

input[type=radio]:not(old)+label,
input[type=checkbox]:not(old)+label {
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
    margin-right: 17px;
    font-size: 18px;
    cursor: pointer;
    letter-spacing: 0.05em;
}

input[type=radio]:not(old)+label>span,
input[type=checkbox]:not(old)+label>span {
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: -1px 8px 3px 5px;
    position: relative;
    border-radius: 0;
    background: rgba(255, 255, 255, .8);
    border: 2px solid #cccccc;
    vertical-align: middle;
    cursor: pointer;
}

input[type=radio]:not(old):checked+label>span:before {
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 0;
    background: #336194;
}

input[type=checkbox]:not(old):checked+label>span:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 0;
    background: #336194;
}

/* ----------BTN------------ */
.btn_box {
    text-align: center;
}

.btn {
    position: relative;
    background-color: #84644A;
    text-align: left;
    font-size: 1rem;
    color: #fff;
    padding: 5px 30px 5px 15px;
    min-width: 150px;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.btn:hover {
    background-color: #5f4735;
}

.btn:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(../img/icon/arrow-r-white.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.btn-disable {
    background-color: #ccc;
    pointer-events: none;
}

.btn-green {
    background-color: #CFD200;
}

/* ----------ICON----------- */
.icon-xxs {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
}

.icon-xs {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
}

.icon-s {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
}

.icon-m {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
}

.icon-l {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
}

.icon-description {
    display: inline-block;
    vertical-align: text-bottom;
    width: 18px;
    opacity: .7;
}

.icon-description:hover {
    opacity: 1;
}

/*---------- COLOR ----------*/
.color-primary {
    color: #CFD200;
}

.color-secondary {
    color: #84644A;
}

.color-secondary-dark {
    color: #5f4735;
}

.color-focus {
    color: #f27276;
}

.bg-primary {
    background-color: #CFD200;
    color: #fff;
}

.bg-secondary {
    background-color: #84644A;
    color: #fff;
}

.bg-secondary-dark {
    background-color: #5f4735;
    color: #fff;
}

.bg-focus {
    background-color: #f27276;
    color: #fff;
}

.color-white {
    color: #fff;
}

.color-black {
    color: #333;
}

/* ----------MAIN----------- */
img {
    max-width: 100%;
}

hr {
    border-top: 1px solid #ddd;
    border-bottom: 0;
}

li {
    font-size: 1rem;
}

.page_padding {
    padding: 100px 0 70px;
}

/* ----------SLIDER----------*/
.swiper_box {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}

.swiper-button {
    width: 40px;
    height: 40px;
    border: 1px solid #846449;
    top: 0;
    bottom: 0;
    z-index: 1;
    margin: auto 0;
    background-size: 40% auto;
    background-position: center;
    background-repeat: no-repeat;
    outline: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.swiper-button:hover {
    background-color: #846449;
}

.swiper-button.white {
    background-color: #fff;
    border: 1px solid #fff;
}

.swiper-button.white:hover {
    background-color: #846449;
    border: 1px solid #846449;
}

.swiper-button-next {
    background-image: url(../img/icon/arrow-r.png);
}

.swiper-button-prev {
    background-image: url(../img/icon/arrow-l.png);
}

.swiper-button-next:hover {
    background-image: url(../img/icon/arrow-r-white.png);
}

.swiper-button-prev:hover {
    background-image: url(../img/icon/arrow-l-white.png);
}

@media screen and (max-width: 768px) {
    .swiper-button {
        width: 35px;
        height: 35px;
    }
}

.swiper-pagination {
    width: 100%;
    position: relative;
    z-index: 1;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border: 1px solid #CFD200;
    background-color: #fff;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #CFD200;
}

/*-----------PAGINATION------*/
ul.pagination {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 15px;
}

ul.pagination li {
    display: inline-block;
    padding: 0 3px;
    vertical-align: top;
}

ul.pagination li a {
    color: #84644A;
    font-size: 19px;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 6px 4px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 5px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

ul.pagination li.prev {
    margin-right: 15px;
}

ul.pagination li.next {
    margin-left: 15px;
}

ul.pagination li.prev a,
ul.pagination li.next a {
    background-size: 30%;
    background-position: center;
    background-repeat: no-repeat;
}

ul.pagination li.prev a {
    background-image: url(../img/icon/arrow-l.png);
}

ul.pagination li.next a {
    background-image: url(../img/icon/arrow-r.png);
}

ul.pagination li.prev a:hover {
    background-image: url(../img/icon/arrow-l-white.png);
}

ul.pagination li.next a:hover {
    background-image: url(../img/icon/arrow-r-white.png);
}

ul.pagination li a.active,
ul.pagination li a:hover {
    color: #fff;
    background-color: #84644A;
}

/*-----------TITLE-----------*/
.title {
    margin-bottom: 40px;
}

.title h2 {
    display: inline-block;
    font-size: 2.3rem;
    border-left: 4px solid #CFD200;
    padding: 0 10px;
    line-height: 1.4em;
    padding-bottom: 2px;
}

.title h2 span {
    display: inline-block;
    color: #999;
    font-size: .7em;
    vertical-align: bottom;
    padding-left: 15px;
}

.title.title_big {
    margin-bottom: 50px;
}

.title.title_big h2 {
    font-size: 3.5rem;
    border-left: 6px solid #CFD200;
    padding: 0 25px;
}

.title.title_small {
    margin-bottom: 25px;
}

.title_small h2 {
    font-size: 1.6rem;
    border-left: 3px solid #CFD200;
}

/*-----------TAG-------------*/
.tag_list {
    /*margin-bottom: 30px;*/
}

.tag {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    border: 1px solid #84644A;
    color: #84644A;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px 30px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
	transition: all .25s ease;
	cursor: pointer;
}
.tag.nonehover:hover {
	background-color: #fff;
	color: #84644A;
	cursor: default;
}

.tag.tag_small {
    padding: 2px 10px;
    font-size: 12px;
    margin-right: 7px;
    margin-bottom: 7px;
}

.tag:hover,
.tag.active {
    background-color: #84644A;
    color: #fff;
}

/*------copy link-------*/
.copylink{
	position: relative;
	background-image:url(../img/icon/Square_link.svg);
	background-color: #9b9b9b;
}
.copylink.active{
	background-image:none;
}
.copylink.active::before{
	content: "";
	opacity: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image:url(../img/icon/Square_link_complete.svg);
}
.copylink::before{
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image:url(../img/icon/Square_link_complete.svg);
	transition:opacity 1s ease;
}



/*-----------boxTag----------*/
.boxTag {
    position: absolute;
    display: block;
    font-size: 12px;
    bottom: 0;
    right: 0;
    padding: 2px 10px;
    z-index: 2;
}

.boxTag:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    background-color: #f27276;
    left: -15px;
    top: 0;
    transform-origin: bottom;
    transform: skewX(-20deg);
    z-index: -1;
}

/*-----------listPageStyle---*/
/*events*/
.eventsBox {
    padding: 20px 12px;
}

.eventsBox a {
    position: relative;
    display: block;
    border: 1px solid #ddd;
    padding: 8px;
    padding-bottom: 60px;
    overflow: hidden;
    background-color: #fff;
}

.eventsBox a:hover {
    box-shadow: -5px -5px 10px rgba(0, 0, 0, .1);
}

.eventsBox figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 42%;
    background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}

.eventsBox figure .time {
    position: absolute;
    right: 0;
    bottom: -15px;
    padding: 6px 10px;
    margin-bottom: 0;
    font-size: 16px;
    letter-spacing: .05em;
}

.eventsBox figure .time:after {
    content: "";
    position: absolute;
    width: 80%;
    height: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    opacity: .6;
}

.eventsBox figure .time small {
    font-size: 12px;
}

.eventsBox h6 {
    font-weight: 600;
    margin: 20px 0;
    font-size: 20px;
	height: 2em;
	
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

.eventsBox .go {
    display: block;
    position: absolute;
    text-align: center;
    padding: 10px 5px;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 1px solid #ddd;
    color: #84644A;
}

.eventsBox a:hover .go {
    background-color: #84644A;
    color: #fff;
}

.eventsBox .go.disable,
.eventsBox a:hover .go.disable {
    background-color: #eee;
    color: #aaa;
}

.eventsBox .go,
.eventsBox a {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

/*gift*/
.giftBox a {
    position: relative;
    display: block;
    outline: 1px solid #ddd;
    box-sizing: border-box;
    padding: 15px;
    background-color: #fff;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}


.giftBox a:hover {
    box-shadow: -5px -5px 10px rgba(0, 0, 0, .1);
}

.giftBox a:before,
.giftBox a:after {
    content: "";
    position: absolute;
    height: 5px;
    bottom: 0;
}

.giftBox a:before {
    width: 0;
    background-color: #CFD200;
    left: 0;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

.giftBox a:hover:before {
    width: 30%;
}

.giftBox a:after {
    width: 0;
    background-color: #84644A;
    left: 30%;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.giftBox a:hover:after {
    width: 70%;
    transition-delay: .1s;
}

.giftBox figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 63%;
    background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}

.giftBox small {   
    font-size: 16px;
}
.giftBox h6 {
    font-weight: 600;
	margin: 10px 0;
	margin-bottom: 0;
	font-size: 20px;
	
    height: 3.4em;
    overflow: hidden;   
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.giftBox p {
	display: none;

	font-size: 16px;
    height: 6em;
	
	/* white-space: nowrap;*/
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.giftBox .date {
    display: block;
    margin-bottom: 15px;
    opacity: .8;
}

.giftBox.list a {
    display: flex;
    padding: 15px;
}

.giftBox.list p {
    display: none;
}

.giftBox.list figure {
    position: relative;
    width: 180px;
    min-width: 180px;
    height: 110px;
    padding-top: 0%;
    margin-right: 20px;
	background-size: 100%;
	background-repeat: no-repeat;
    background-position: top;
}

.giftBox.list .text {
    width: 80%;
}

/*store*/
.storeBox a {
    position: relative;
    display: block;
    border: 1px solid #ddd;
    padding: 10px 10px 30px 10px;
    background-color: #fff;
}

.storeBox a:hover {
    box-shadow: -5px -5px 10px rgba(0, 0, 0, .1);
}

.storeBox a:before,
.storeBox a:after {
    content: "";
    position: absolute;
    height: 5px;
    bottom: 0;
}

.storeBox a:before {
    width: 0;
    background-color: #CFD200;
    left: 0;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

.storeBox a:hover:before {
    width: 30%;
}

.storeBox a:after {
    width: 0;
    background-color: #84644A;
    left: 30%;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    transition-delay: .1s;
}

.storeBox a:hover:after {
    width: 70%;
}

.storeBox figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 57%;
    margin-bottom: 20px;
    background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}

.storeBox small { 
	font-size: 16px;
    height: 1.4em;
	
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow: hidden
}
.storeBox h6 {
    font-weight: 600;
    margin: 10px 0;
	font-size: 20px;
	
	height: 3.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.storeBox a p {
	color: rgb(150, 150, 150);
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
	font-size: 16px;

	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow: hidden
}

.storeBox .category {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.storeBox a {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

/*-----------Breadcrumb------*/
.breadcrumb {
    margin-bottom: 20px;
    margin-top: 30px;
}

.breadcrumb a {
    font-size: 14px;
}

/*-----------remark----------*/
.remarkBox {
    background-color: #F7F7F7;
    padding: 15px 20px 20px;
    margin: 20px 0;
}

.remarkBox ol,
.remarkBox ul {
    padding-left: 20px;
    margin-top: 15px;
}

.remarkBox ol li {
    list-style-type: decimal;
    font-size: .9rem;
}

.remarkBox ul li {
    list-style-type: square;
    font-size: .9rem;
}

/*-----------bookmark--------*/
.bookmark {
    position: relative;
    display: inline-block;
    border: 1px solid #84644A;
    padding: 6px 15px 6px 50px;
    color: #84644A;
    cursor: pointer;
}

.bookmark:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 20px;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(../img/icon/save-2.svg);
    background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.bookmark span {
    display: none;
}

.bookmark.active {
    background-color: #84644A;
    color: #fff;
}

.bookmark.active:before {
    background-image: url(../img/icon/save.svg);
}

.bookmark.active span {
    display: inline-block;
}

/*-----------storeBox--------*/
.storeInfoBox {
    border: 1px solid #ddd;
    padding: 12px 12px 5px 12px;
    background-color: #fff;
    display: block;
}

.storeInfoBox figure {
    width: 100%;
    height: 0;
    padding-top: 65%;
    background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}

.storeInfoBox b {
    display: block;
    margin: 10px 0 0;
    color: #84644A;
    font-weight: 500;
	height: 30px;
	font-size: 18px;
   
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow: hidden
}

.storeInfoBox .category {
    display: flex;
    align-items: center;
	color: #999;
}

.storeInfoBox .price {
    display: flex;
    align-items: center;
}

.storeInfoBox .price span {
    width: 10px;
    height: 18px;
    margin-right: 5px;
    background-image: url(../img/icon/price.svg);
    background-size: auto 75%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .3;
}

.storeInfoBox .price span.active {
    opacity: 1;
}

.storeInfoBox ul.detail {
    margin-top: 8px;
    padding-top: 0;
    border-top: 1px solid #eee;
}

.storeInfoBox ul.detail li {
    position: relative;
    padding-left: 24px;
    display: inline-block;
    margin: 5px 0;
    vertical-align: middle;
}

.storeInfoBox ul.detail li:before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    /*border: 1px solid #ddd;*/
    left: 5px;
	top: 50%;
	transform: translateY(-50%);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.storeInfoBox ul.detail li.location:before {
    background-image: url(../img/icon/location.svg);
}

.storeInfoBox ul.detail li.phone:before {
    background-image: url(../img/icon/phone.svg);
}

.storeInfoBox ul.detail li.time:before {
    background-image: url(../img/icon/time.svg);
}

.storeInfoBox ul.detail li.location a {
    margin-left: 5px;
    opacity: .6;
}

.storeInfoBox ul.detail li.location {
    margin-right: 10px;
}

.storeInfoBox ul.detail li p,
.storeInfoBox ul.detail li a {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6em;
    display: inline-block;
}

/*-----------listStyle-------*/
.decimal_list,
.disc_list {
    list-style-position: outside;
    padding-left: 20px;
}

.decimal_list li {
    list-style-type: decimal;
}

.disc_list li {
    list-style-type: disc;
}

/*-----------lighbBox--------*/
.lightBox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    overflow-y: scroll;
    display: none;
}

.lightBox .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.lightBox .box {
    position: relative;
    width: 90%;
    max-width: 700px;
    background-color: #ffffff;
    margin: 10vh auto;
    position: relative;
    cursor: default;
    min-height: 70vh;
    /*display: none;*/
    padding: 30px 30px;
}

.lightBox .box img.closeBox {
    position: absolute;
    width: 18px;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

/*-----------joy-table-------*/
.joy_table {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.joy_table .joy_col100 {
    width: 100%;
    padding-bottom: 1%;
}

.joy_table .joy_col50 {
    width: 48%;
    padding-bottom: 1%;
}

.joy_table .joy_col33 {
    width: 33.333%;
}

.joy_table .title {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 0;
    width: 100%;
    height: 50px;
    padding: 10px 20px;
}

.joy_table .title p {
    margin: 0;
}

.joy_table select,
.joy_table input[type='text'],
.joy_table textarea {
    display: inline-block;
    border: 1px solid #ccc;
    margin: 0;
    width: 100%;
}

.joy_table label {
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
    width: 100%;
}

.joy_table .joy_table--search {
    position: relative;
}

.joy_table .joy_table--search input[type='text'] {
    padding-left: 45px;
}

.joy_table .joy_table--search::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url('../img/icon/icon_search_gery.svg');
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1) translateY(-50%);
    background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.joy_table .joy_table--date {
    position: relative;
}

.joy_table .joy_table--date::after {
    content: " ";
    position: absolute;
    width: 18px;
    height: 18px;
    background-image: url('../img/icon/date.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}

.joy_table select:required:invalid {
    color: gray;
}

.joy_table option[value=""][disabled] {
    display: none;
}

.joy_table option {
    color: black;
}

.joy_table textarea {
    height: 200px;
    margin: 0;
    padding: 6px;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}

.joy_table input[type=submit] {
    -webkit-appearance: none;
    margin: 0px;
    padding: 10px 20px;
    background-color: #6D523D;
    color: white;
    cursor: pointer;
    width: 100%;
    border: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.joy_table input[type=submit]:hover {
    background-color: #5f4735;
}

/*joy-table-check*/
.joy_table .joy_table--checked {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    margin-top: 3px;
    margin-right: 5px;
}

.joy_table .joy_table--checked input[type=checkbox] {
    position: absolute;
    top: 0px;
    left: 0px;
    height: inherit;
    width: inherit;
    display: inline-block;
    opacity: 0;
    z-index: 1;
    pointer-events: all;
    cursor: pointer;
}

.joy_table .joy_table--checked input[type=checkbox]+span {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: inherit;
    box-sizing: border-box;
    border: 1px solid #D0D0D0;
}

.joy_table .joy_table--checked input[type=checkbox]+span::after {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 10px;
    width: 10px;
    content: " ";
    /*background: #CFD200;*/
}

.joy_table .joy_table--checked input[type=checkbox]:checked~span::after {
    content: " ";
    box-sizing: border-box;
    background: #CFD200;
    border: 1px solid #D0D0D0;
}

/*joy-table-radio*/
.joy_table .joy_table--radio {
    display: inline-block;
    position: relative;
    height: 40px;
    line-height: 40px;
    width: 125px;
    cursor: pointer;
}

.joy_table .joy_table--radio input[type=radio] {
    position: absolute;
    top: 0px;
    left: 0px;
    height: inherit;
    width: inherit;
    display: inline-block;
    opacity: 0;
    z-index: 1;
    pointer-events: all;
    cursor: pointer;
}

.joy_table .joy_table--radio input[type=radio]+p {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: inherit;
    display: block;
    background-color: #F6FAF9;
    text-align: center;
    line-height: inherit;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.joy_table .joy_table--radio input[type=radio]:hover~p {
    background: #ececab;
}

.joy_table .joy_table--radio input[type=radio]:checked~p {
    background: #CFD200;
}

/* --------- joytable_RWD -------- */
@media screen and (max-width: 480px) {
    .joy_table .joy_table--search::after {
        left: 8px;
        width: 18px;
        height: 18px;
    }

    .joy_table .joy_table--search input[type='text'] {
        padding-left: 35px;
    }

    .joy_table .joy_table--radio {
        width: 110px;
    }

    .joy_table .joy_table--date::after {
        display: none;
	}
	

	/*giftbox*/
	
	.giftBox.list a {
	    position: relative;
	    display: block;
	    outline: 1px solid #ddd;
	    box-sizing: border-box;
	    padding: 15px;
	    background-color: #fff;
	    -webkit-transition: all .25s ease;
	    -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	    -o-transition: all .25s ease;
	    transition: all .25s ease;
	}


	.giftBox.list figure {
	     position: relative;
	     width: 100%;
	     height: 0;
	     padding-top: 63%;
	     background-size: 100%;
	     background-position: top;
	     background-repeat: no-repeat;
	}

	.giftBox.list .text {
	    width: auto;
	}





}

/*-----------pageNav---------*/
.pageNav {
    border-bottom: 1px solid #eee;
}

.pageNav li {
    position: relative;
    padding: 20px 15px;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.pageNav li:hover {
    background-color: rgba(132, 100, 74, .1);
}

.pageNav li:before,
.pageNav li:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.pageNav li:before {
    background-color: rgba(255, 255, 255, .5);
    z-index: 2;
    height: 7px;
    opacity: 0;
}

.pageNav li.active:before {
    opacity: 1;
}

.pageNav li:after {
    background-color: #5f4735;
    ;
    height: 0;
}

.pageNav li.active:after {
    height: 120%;
}

.pageNav small,
.pageNav h6 {
    position: relative;
    display: inline-block;
    font-size: 1.15rem;
    z-index: 3;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.pageNav small {
    color: #999;
    margin-right: 6px;
}

.pageNav li.active small {
    color: rgba(255, 255, 255, .5);
}

.pageNav h6 {
    font-weight: 600;
}

.pageNav li.active h6 {
	color: #fff;
	letter-spacing: 0.2em;
}

.pageNav li.active small,
.pageNav li.active h6 {
    -moz-transform: translateY(-30%);
    -webkit-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
}

/*-----------basicTable------*/
table.basicTable {
    width: 100%;
    border-collapse: collapse;
}

table.basicTable tbody td {
    padding: 25px 20px;
    color: #555;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    text-align: left;
}

table.basicTable td:first-child {
    background-color: #f6faf9;
    font-weight: 600;
}

/*-----------sharing---------*/
.sharing {
    position: fixed;
    top: 160px;
    right: 5%;
    z-index: 3;
}


.sharing a {
    display: block;
    width: 50px;
    height: 50px;
    background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.sharing a:hover {
    opacity: .8;
}

/*-----------jqueryUi--------*/
.ui-tooltip {
    background-color: #222;
    color: #fff;
    box-shadow: none;
    font-size: .9rem;
    line-height: 1.6em;
    letter-spacing: .04em;
    padding: 5px 10px;
}

/*-----------bg--------------*/
.bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -3;
}

.bg .col25 {
    height: 100vh;
    border-right: 1px solid rgba(200, 200, 200, .2);
}

.bg .col25:first-child {
    border-left: 1px solid rgba(200, 200, 200, .2);
}

/* ----------NAVBAR--------- */
#navbar {
    position: fixed;
    width: 100%;
	top: 0;
	left: calc(50% - 700px);
    background-color: #fff;
    z-index: 5;
	box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, .1);
	max-width: 1400px;
}

.navLogo {
    position: absolute;
    height: 55%;
    top: 20%;
    left: 30px;
}

.navLogo img {
    height: 100%;
    width: auto;
}

#navbar .flex-wrap {
    justify-content: flex-end;
}

#navbar .mainMenu>li {
    display: inline-block;
    position: relative;
}

#navbar .mainMenu>li.navbtn {
    cursor: pointer;
}

#navbar .mainMenu>li>a,
#navbar .mainMenu>li>p {
    display: block;
    font-weight: 600;
}

#navbar .subMenu {
    display: none;
    position: absolute;
    width: 200px;
    text-align: center;
    left: -42px;
    border: 1px solid #eee;
}

#navbar .mainMenu>li:hover .subMenu {
    display: block;
    background-color: #fff;
}

#navbar .subMenu a {
    display: block;
    padding: 10px;
    font-weight: 500;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#navbar .subMenu a:hover {
    background-color: rgba(132, 100, 74, .1);
}

#navbar .search,
#navbar .logIn {
    width: 100px;
    background-size: auto 30%;
    background-position: center;
    background-repeat: no-repeat;
}

#navbar.flat .search,
#navbar.flat .logIn {
	background-size: auto 42%;
	background-repeat: no-repeat;
}

#navbar .search,
#navbar .logIn {
    background-image: url(../img/icon/icon_search.svg);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#navbar .search:hover {
    background-image: url(../img/icon/icon_search_txt.svg);
}

#navbar .logIn {
    background-image: url(../img/icon/icon_login.svg);
}

#navbar .logIn:hover {
    background-image: url(../img/icon/icon_login_txt.svg);
}

#navbar .mainMenu {
    width: calc(100% - 200px);
    text-align: right;
}

#navbar .mainMenu>li.time {
    padding-right: 5vw;
}

#navbar .mainMenu>li.time p {
    position: relative;
    margin-bottom: 0;
}

#navbar .mainMenu>li.time p:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: -22px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(../img/icon/icon_openhour.svg);
    background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

#navbar .mainMenu>li>a {
    position: relative;
	padding: 30px 1vw;
	padding-bottom: 35px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#navbar.flat .mainMenu>li>a {
    padding: 15px 1vw;
}

#navbar .mainMenu>li>a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #CFD200;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#navbar .mainMenu>li>a.active:after,
#navbar .mainMenu>li>a:hover:after {
    width: 100%;
}

.hamburger,
#navbar .mainMenu .nav_fb_mobile {
    display: none;
}

/* ----------FOOTER--------- */
footer {
    position: relative;
}

footer .top,
footer .bottom {
    position: relative;
    z-index: 2;
}

footer .top {
    padding: 40px 0;
    background-color: #3b2f25;
}

.foot_menu {
    text-align: right;
}

.foot_menu li {
    display: inline-block;
    vertical-align: top;
    margin-left: 4vw;
    text-align-last: left;
}

.foot_menu li a {
    display: block;
    font-size: 14px;
    margin: 5px 0;
    opacity: .7;
}

.foot_menu li a.category {
    position: relative;
    font-weight: 600;
    margin-bottom: 15px;
    opacity: 1;
}

.foot_menu li a.category:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 64%;
    background-color: #fff;
    left: -10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.foot_logo {
    position: absolute;
    top: 0;
    left: 0;
}

footer .bottom {
    background-color: #352b21;
    padding: 30px 0;
}

.foot_info li {
    display: inline-block;
    max-width: 300px;
    vertical-align: top;
    padding-right: 20px;
}

.foot_info li a {
    display: block;
    font-size: 13px;
    opacity: .7;
}

.copyRight {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
}

.copyRight p,
.copyRight a {
    font-size: 13px;
    opacity: .7;
    margin: 0;
}

.copyRight .fb {
    width: 22px;
}

/* ----------RWD------------ */
@media screen and (max-width: 1600px) {
    html {
        font-size: 16px;
    }

    .w1400 {
        max-width: 1100px;
    }

    .w1300 {
        max-width: 1000px;
    }

    /*pageNav*/
    .pageNav li {
        padding: 12px 15px;
    }

    /*title*/
    .title {
        margin-bottom: 30px;
    }

    /*listStyle*/
    .giftBox a {
        padding: 10px 10px 24px 10px;
    }

    .giftBox h6 {
		margin: 6px 0 0 0;
    }

    .giftBox .date {
        margin-bottom: 7px;
    }

    /*basicTable*/
    table.basicTable tbody td {
        padding: 18px 15px;
    }
}

@media screen and (max-width: 1440px) {
    body {
        padding-top: 50px;
    }

    .w1400 {
        max-width: 1000px;
    }

    .w1300 {
        max-width: 900px;
    }


    .page_padding {
        padding: 70px 0 50px;
    }

    /*title*/
    .title.title_big h2 {
        font-size: 3rem;
    }

    .title.title_big {
        margin-bottom: 40px;
    }

    /*pagination*/
    ul.pagination li a {
        font-size: 17px;
        padding: 5px 0;
        width: 45px;
        height: 45px;
    }

    ul.pagination {
        padding-top: 30px;
    }

    /*nav*/
    #navbar .mainMenu>li.time {
        padding-right: 2vw;
    }

    #navbar .mainMenu>li>a {
        position: relative;
        padding: 15px .5vw;
    }

    #navbar.flat .mainMenu>li>a {
        padding: 15px .5vw;
    }

    #navbar .search,
    #navbar .logIn {
        width: 60px;
    }

    /*footer*/
    /*listStyle*/
    .eventsBox {
        padding: 14px 6px;
    }

}

@media screen and (max-width: 1440px) {
	#navbar {
	    left: 0%;
	}
    .sharing {
        top: 120px;
    }
}


@media screen and (max-width: 1280px) {

    /*footer*/
    .copyRight {
        position: relative;
        right: auto;
        text-align: left;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .sharing {
        right: 0;
    }
}

@media screen and (max-width: 1023px) {
    html {
        font-size: 14px;
    }


    .tag {
        margin-right: 10px;
        padding: 5px 20px;
    }

    /*remarkBox*/
    .remarkBox {
        padding: 10px 15px 15px;
    }

    .remarkBox ol,
    .remarkBox ul {
        margin-top: 8px;
    }

    /*title*/
    .title.title_big {
        margin-bottom: 30px;
    }

    /*pagination*/
    ul.pagination li a {
        font-size: 16px;
        width: 40px;
        height: 40px;
    }

    /*nav*/
    .hamburger {
        display: block;
        margin-left: auto;
        width: 60px;
        background-color: #84644A;
    }

	/*modify*/
	

    #navbar .main {
        position: fixed;
        width: 300px;
        height: 100%;
        bottom: 0;
        right: -300px;
        /*right: 0;*/
        background-color: #fff;
        display: block;
        background-color: #3b2f25;
        padding: 60px 0;
        /*overflow: scroll;*/
        text-align: center;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
		transition: all .25s ease;		
    }

    #navbar .main.active {
        right: 0;
    }

    #navbar .mainMenu {
        width: 100%;
        text-align: left;
        height: 100%;
        overflow-y: scroll;
        /*padding: 12px 30px;*/
    }

    #navbar .mainMenu li {
        display: block;
    }

    #navbar .search,
    #navbar .logIn {
        display: block;
        position: absolute;
        width: 100%;
        height: 40px;
		background-size: auto 40%;
		background-repeat: no-repeat;
    }

    #navbar .search {
        bottom: 40px;
        display: none;
    }

    #navbar .logIn {
        bottom: 0;
    }

    #navbar .mainMenu>li>a.active:after,
    #navbar .mainMenu>li>a:hover:after {
        width: 0;
    }

    #navbar .mainMenu>li.time p {
        display: inline-block;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        background-color: #fff;
        height: 2px;
        width: 28px;
    }

    .hamburger-box {
        width: 28px;
    }

    #navbar .subMenu {
        position: relative;
        width: 100%;
        left: 0;
        text-align: left;
        padding: 0;
        border: 0;
    }

    #navbar .mainMenu>li>a,
    #navbar.flat .mainMenu>li>a {
        position: relative;
        padding: 12px 30px;
        color: #fff;
        font-weight: 500;
        opacity: .8;
    }

    #navbar .mainMenu>li>a:before {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        right: 20px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background-image: url(../img/icon/arrow-r-white.png);
		background-size: 100%;
		background-repeat: no-repeat;
        background-position: center;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

    #navbar .mainMenu>li.nonearrow>a:before {
        display: none;
    }

    #navbar .mainMenu>li>a.arrow_active:before {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #navbar .mainMenu>li.time {
        padding-left: 50px;
        margin-bottom: 20px;
        display: none;
    }

    #navbar .subMenu a {
        padding: 8px 45px;
        color: #fff;
        opacity: .7;
    }

    #navbar .mainMenu>li:hover .subMenu {
        display: none;
        background-color: transparent;
    }

    #navbar .mainMenu .nav_fb_mobile {
        display: block;
        padding: 12px 30px;
    }

    #navbar .mainMenu .nav_fb_mobile img {
        opacity: .5;
        width: 25px;
    }

    #navbar .mainMenu .nav_fb_mobile p {
        color: #fff;
        opacity: .5;
        font-weight: 400;
        font-size: 16px;
    }

    #navbar .mainMenu .nav_fb_mobile a {
        padding: 0 !important;
    }

    #navbar .mainMenu .nav_fb_mobile a:before {
        display: none;
    }

    /*footer*/
    footer .top {
        padding: 25px 0;
	}
	
	.foot_menu li a{
		font-size: 14px;
	}

    /*listStyle*/
    .eventsBox .go {
        bottom: 0;
    }

    .sharing {
        display: none;
	}

}

@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .page_padding {
        padding: 50px 0;
    }

    .tag {
        margin-right: 6px;
        margin-bottom: 10px;
    }

    /*title*/
    .title {
        margin-bottom: 20px;
    }

    .title.title_big h2 {
        padding: 0 15px;
    }

    .title.title_small {
        margin-bottom: 15px;
    }

    /*footer*/
    .foot_logo {
        position: relative;
        width: 150px;
    }

    .foot_menu {
        text-align: left;
        margin-top: 20px;
    }

    .foot_menu li {
        margin: 0 12px;
    }

    .foot_info li {
        display: block;
        max-width: none;
        margin: 15px 0;
        padding-right: 0;
    }

    footer .bottom {
        padding: 12px 0 30px;
    }

    /*listStyle*/
	.eventsBox a{
		padding-bottom: 30px;
	}
    .eventsBox .go {
        /* background-color: #fff;
        border-top: 1px solid #ddd;
		color: #84644A; */
        display: none;
    }

    /*basicTable*/
    table.basicTable tbody td {
        padding: 15px 10px;
    }

    /*lightBox*/
    .lightBox .box {
        margin: 5vh auto;
	}
	

	.breadcrumb {
		margin: 50px 0;
	}
	.breadcrumb * {
		display: none;
	}
}

@media screen and (max-width: 620px) {}

@media screen and (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .sharing a {
        width: 40px;
        height: 40px;
    }

    /*pagination*/
    ul.pagination li.prev {
        margin-right: 3px;
    }

    ul.pagination li.next {
        margin-left: 3px;
    }

    ul.pagination li a {
        font-size: 14px;
        width: 35px;
        height: 35px;
        padding: 4px 0;
    }

    ul.pagination li {
        padding: 0;
    }

    ul.pagination {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    /*title*/
    .title.title_big h2 {
        font-size: 2.6rem;
        padding: 0 10px;
    }

    .title.title_big {
        margin-bottom: 25px;
    }

    /*nav*/
    #navbar .main {
        width: 100%;
        bottom: 0;
        right: -100%;
        padding: 50px 0;
        text-align: center;
    }

    #navbar .main.active {
        right: 0;
    }

    #navbar .mainMenu>li.time {
        text-align: center;
    }

    #navbar .mainMenu a,
    #navbar .mainMenu p {
        font-size: 1.1rem;
    }

    /*footer*/
    .foot_menu {
        padding-left: 20px;
    }

    .foot_menu li {
        display: block;
        margin: 10px 0;
    }

    .foot_menu li a {
        display: inline-block;
        margin-right: 5px;
    }

    .foot_menu li a.category {
        display: block;
        margin-bottom: 0;
    }

    /*listStyle*/
    .eventsBox {
        padding: 10px 1px;
    }
}

@media screen and (max-width: 375px) {
    .page_padding {
        padding: 40px 0;
    }

    .sharing a {
        width: 35px;
        height: 35px;
    }

    /*title*/
    .title {
        margin-bottom: 12px;
    }

    /*footer*/
    .foot_menu li a {
        margin: 2px 3px 2px 0;
    }

    .foot_menu li a,
    .foot_info li a,
    .copyRight p,
    .copyRight a {
        font-size: 12px;
    }

    /*basicTable*/
    table.basicTable tbody td {
        padding: 12px 10px;
    }

    /*lightBox*/
    .lightBox .box {
        padding: 20px;
    }
}