@charset "utf-8";

/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58i-wi40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58a-wg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* *********************************** */
/* 沒有開購物車-預設 vs 有開購物車 */
/**/
.search_link a.with_shopping_mode {	display: inline-block;}
#menuTop ul:before { border-top:0 !important; }


/* *********************************** */
/*網站整體設定*/

#content {    min-height: calc(100vh - 200px);}


/* Header設定 */
#header {
    background: transparent;
    padding: 14px 0;
    position: fixed;
    height: 90px;
	transition: ease 0.5s;}
.work_page #header , .work_class_page #header ,.work_info_page #header , .services_page #header , .contact_page #header , .map_page #header {    box-shadow: 0 0 5px rgb(177 177 177);    background: rgb(255 255 255 / 0.9);}
/*sticky*/
#header.sticky {
    position: fixed;
    background:rgb(255 255 255 / 0.75);
    -webkit-transition: ease 1s;
    -moz-transition: ease 1s;
    -ms-transition: ease 1s;
    -o-transition: ease 1s;
    transition: ease 1s;
    box-shadow: 0 0 5px rgb(177 177 177);}



/*選單設定*/
#header .center {    max-width: 95%;}
#menuTop ul { margin-top: 0px; }
#menuTop li a {    color: #706f6f;line-height: 20px;padding: 10px 15px;}
#menuTop > ul li:hover > a {    color: #817200;}
#menuTop li ul {    border: none !important;    background-color: transparent;    left: 50%;    right: 50%;    width: 150px; margin-left:-75px; margin-right:-75px;}
#menuTop li li a { background: #f7f5f5;    transition: 0.2s;    padding: 8px 0 !important;    letter-spacing: 1.5px;}
#menuTop li li a:hover {    transition: 0.2s;    background-color: #706f6f;    color: #fff;text-align: center;}
#menuTop li a span {    font-family: 'Quicksand', sans-serif;    font-size: 13px;}



/*手機選單*/
#nav-toggle {    margin-left: 20px;    margin-top: 0px;}


/*LOGO設定*/
#header .logo img { width:240px ; margin-top:10px;}
.footer_logo img {    width: 240px;    margin-top: 12px;}

/* 頁面的麵包屑 首頁/頁面名稱/ */
.path { display:none;}

/*Footer*/
.footer {    border-top: none !important;    padding: 50px 0 0;    background: #f1f1f1;}
.footer_menu { border-bottom: none !important;}
.copy {    background: #7e7f80;    color: #fff;}
.copy a{    color: #fff;}
.footer_info li {    width: 48%;    margin-top: 5px;    display: inline-block;}


/*大圖*/
.swiper-pagination {    margin-left: -20px;}


/* *********************************** */



/*首頁+聯絡按鈕*/
.animated-arrow { background:#706f6f ;}



/*聯絡我們填字框*/
.noborder { /* border: 1px solid #999999; */}



/***購物車***************************************************************************/
/* 產品的看更多按鈕設定 */
.products-list .more {    border: 1px solid #706f6f !important;    color: #706f6f;}
.products-list a:hover .more {    background: #706f6f;    border-color: #706f6f;}


/*外層*/
.product-layer-two li a {    color: #706f6f;}
.product-layer-two li:hover > a { background: #706f6f;    color: #fff;}
.product-layer-two li.active > a {background: #706f6f;    color: #fff;	font-weight: normal;}
.product-layer-two li > ul {    max-height: 400px;    overflow-y: scroll;}
.product-layer-two li>ul::-webkit-scrollbar {    width: 8px;}
.product-layer-two li>ul::-webkit-scrollbar-thumb {    background: #8e8e8e;;    border-radius: 10px;}
.product-layer-two li>ul:hover::-webkit-scrollbar-thumb {    background: #656565;}
.product-layer-two li>ul::-webkit-scrollbar-track {    background: #dedede;    border-radius: 10px;}


/* 內頁 */
.lastPage { background:#706f6f ;}
.nextaction { background-color:#706f6f ;}
.lastaction { color:#fff ; background-color:#706f6f ;}


/* 購物車商品按鈕 */
.action-button { background: ;}
.action-button:hover { background: ;
}



/* 頁面上方廣告 */
.banner {    height: 250px;    box-shadow: none; background:#fff;}
.banner h5 {    font-weight: lighter;    color: #717070;    letter-spacing: 0.1em;margin-top: 55px;}

.banner h5:after {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: 35px;
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    color: #817200;
}
.work_page .banner h5:after , .work_class_page .banner h5:after , .work_info_page .banner h5:after{    content: "PROJECT";}
.services_page .banner h5:after{    content: "PROCESS";}
.contact_page .banner h5:after{    content: "CONTACT";}
.map_page .banner {    display: none;}







/***********************************/
/*相簿主層換圖*/
.work_page .item .show_pic:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
}
.work_page .item:nth-child(1) .show_pic:before {    background-image: url(https://pic03.eapple.com.tw/jichaudesign/album-01.png);}
.work_page .item:nth-child(2) .show_pic:before {    background-image: url(https://pic03.eapple.com.tw/jichaudesign/album-02.png);}
.work_page .item:nth-child(3) .show_pic:before {    background-image: url(https://pic03.eapple.com.tw/jichaudesign/album-03.png);}

/*相簿*/

.overlay {
    width: 92%;
    height: 92%;
    background: rgb(255 255 255 / 0.8);
    left: 4%;
    top: 4%;}
.show-list .show_name {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 300px;
    height: 50px;
    font-size: 18px;
    margin-left: -150px;
    margin-bottom: -35px;
    color: #000 !important;
    text-align: center;
    transition: all ease-in .3s;
    opacity: 0;
}
.work_page .show-list .item:hover .show_name {opacity:1;}

.work_page .main_part , .work_class_page .main_part , .work_info_page .main_part {    max-width: 1400px;	padding-top: 0;}
.pic-list .item {    width: 22.5%;}
.show-list .show_pic img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50%;
    margin-top: -37.5%;
    max-width: 100%;
    min-width: 100%;
    height: 100% !important;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
	opacity:0;
}
.pic-list .show_pic {    height: auto;    padding-bottom: 0;}
@media screen and (max-width: 1200px) {.pic-list .item {    width: 31%;}}
@media screen and (max-width: 840px) {.pic-list .item {    width: 47%;    margin: 10px 1%;}}

.other_album_choice li {    background: #706f6f;}
.other_subalbum li a div {    height: 250px;    overflow: hidden;}
.other_subalbum li a img {
    max-width: 100%;
    min-width: 100%;
    height: 100% !important;
    max-height: 300px;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
}
.other_subalbum li p {    margin-top: 7px;}
.subalbum-menu h2 {       display: none; color: #706f6f;}
.subalbum-menu .block {	 background: #706f6f;}
.work_info_page .lightboxOverlay {
    background-color: #f1f1f1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.5;
}

.pic-list .show_pic img {
    max-height: 250px;
    max-width: 100%;
    min-width: 100%;
    height: 100% !important;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
}
@media screen and (max-width: 480px) {
.pic-list .item {    width: 92%;    margin: 10px 4%;}
.pic-list .item a {    max-width: unset;}

}



@media screen and (max-width: 980px) {
.pageIndex #header {    position: relative;}
#header {    height: auto; position:relative;}
#header.sticky {    position: relative;}
#header .logo img {    margin-top: 20px;}
#header .logo {    clear: both;    text-align: center;    width: 100%;    margin: 0 auto;}
#menuTop ul li a {    padding: 3px 25px;}
.banner h5 {    margin-top: 100px;}
.banner {    height: 300px;}
#menuTop ul li {    margin-top: 15px;}



.footer_logo {    text-align: center;    margin-left: 0;    margin: auto;    width: 100%;    margin-bottom: 20px;}
.footer_info {    padding-left: 0;    padding-right: 0;    max-width: 90%;    margin: auto;}
.footer_info li {    max-width: 300px;    text-align: left;}
.footer_info ul {    text-align: center;}

}
/***************************************************/
/* 手機版設定 */
@media screen and (max-width: 768px) {
.pageIndex #header {    position: fixed;    box-shadow: none;}
.pageIndex #header.sticky {    box-shadow: 0 0 5px rgb(177 177 177);}
#header { height:70px; box-shadow: 0 0 5px rgb(177 177 177); position:fixed;}
#header.sticky {    background: rgb(255 255 255 / 0.95); position:fixed;}

#bottom_menu {display: block; }
.footer.with_shopping_mode { padding: 50px 0 70px; }

.footer_info li {    width: 100%; max-width:unset;}

/* *********************************** */
/*手機板LOGO調整*/
#header .logo {    clear: none;  width: auto;}
#header .logo img { margin-top:4px; width:220px ; }
.footer_logo img{ width:250px ; }
.footer_logo { margin-left: unset; margin: auto; text-align: center; }

.banner {    height: 200px;}
.banner h5 {    margin-top: 50px;}
.banner h5:after {    margin-top: 28px;    font-size: 20px;}

/* 預設手機版單張圖片 沒有開啟 */
/* 
.bannerindex { display:none;}
.mobile_wp { display:block;}
*/
}

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

.swiper-slide img { display:none; }
.bannerindex { height:75vh; padding:0;}
.swiper-slide:nth-child(1) { background-image: url(https://pic03.eapple.com.tw/jichaudesign/Banner-03.png); background-size: contain; background-position: center top; background-repeat: no-repeat;}
.swiper-slide:nth-child(2) { background-image: url(https://pic03.eapple.com.tw/jichaudesign/Banner-04.png); background-size: contain; background-position: center top; background-repeat: no-repeat;}

.show-list .item .overlay {    opacity: 0.9;    transform: scale(1);}
.show-list .show_name {    opacity: 1;}

}