@import url('/Other/www.cc-design/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Noto+Sans+SC&family=Playfair+Display:wght@500&family=Noto+Sans+TC:wght@100&family=Nanum+Myeongjo&display=swap');
@font-face {
font-family: 'Goldoni Regular';
font-style: normal;
font-weight: normal;
src: local('Goldoni Regular'), url('/Other/www.cc-design/css/05/Goldoni_DEMO.woff') format('woff');
}
* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin:0; }
body ::selection { background: #fff; text-shadow: none; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #d0d0d0; }
body::-webkit-scrollbar-thumb { background: #3c3c3c; }
body::-webkit-scrollbar-thumb:hover { background: #222222; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, strong, b, a, i{
	text-align: left;vertical-align: middle;margin: 0;padding: 0;font-weight: 300;line-height: 170%;border-width: 0;font-family: "sans-serif","Lucida Grande","Arial","Arial Narrow";font-size: 15px;word-wrap: break-word;word-break: break-all;
	}

:before , :after { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; }

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

/* a.photo */
a.photo , .bgBox { overflow: hidden; background: no-repeat 50% / cover; display: block; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * , .slick-track , .fa , .fas , .fa:before , .fas:before , .fa:after , .fas:after { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 {position: absolute;top: 0;z-index: -999;color: #fff;}
.webBox .wrapper { position: relative; background: #fff; z-index: 2; }

/* workframe */
.workframe {position: relative;margin: 0 auto;width: 1280px;}

/* Sitemap */
#Sitemap #jsonUL a { color: #6d6d6d; }


/* header */
.mobile-main-nav,.nav-func,.subnav,.sub2nav,.phoneWrap,.sub2Option,.sub3Option{display:none}
header{position:fixed;z-index:202;left: 0;top:0;width: 100%;transition:all linear .3s;padding: 8px 0;background: #ffffffe0;display: flex;flex-direction: row;align-items: center;justify-content: space-around;}
header.headerTop{
    box-shadow: 0 0 10px rgba(54, 53, 53, 0.1);
}
header #cis{
    position: relative;
    top: 0;
    display: flex;
    padding-left: 80px;
}
header #cis a{display:block;background-repeat:no-repeat;background-position:0 50%;background-size:contain}
header #cis a img{width: 211px;}
header #top-nav{border-top:5px solid #0583c9;border-bottom:1px solid #ededed;transition:all linear .2s}
header #menubar{
    /* width: calc(100% - 310px); */
    /* margin: 0 auto; */
    display: flex;
}
header .share{
    position: relative;
    display: flex;
}
header .share .btnBox{
	
display: flex;
	align-items: center;
}
header .share .btnBox a{
    display: flex;
    padding: 6px 6px;
    background-color: #917ab9;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
}
header .share .btnBox a svg{
    width: 25px;
    height: 25px;
    fill: white;
}
header .share a.IG svg{
    width: 22px;
    height: 22px;
    padding: 3px;
}
#openNav a span{position:absolute;width: 25px;height:2px;background: #4b415d;display:block;left: 0;transition:all linear .3s;}
#openNav a span:nth-child(1){top:10px}
#openNav a span:nth-child(2){top:18px;}
#openNav a span:nth-child(3){top:27px;}
#openNav a b{
    position: absolute;
    top: 7px;
    right: 0;
    color: #4b415d;
    font-size: 13px;
    line-height: 180%;
}
#openNav.open a span:nth-child(1){transform:rotate(45deg) translate(6px,7px)}
#openNav.open a span:nth-child(2){opacity:0}
#openNav.open a span:nth-child(3){transform:rotate(-45deg) translate(5px,-7px);}
.mobile-main-nav{position:fixed;left:0;top:0;width: 540px;background: #fff;height: 100vh;z-index:-1;transition:transform 1s cubic-bezier(0.23,1,0.32,1);display: flex;transform:scale(0,1);transform-origin:left center 0;flex-direction: column;align-items: center;justify-content: space-evenly;}
.mobile-main-nav.Xopen{z-index:99999999;transform:scale(1,1);transform-origin:left center 0;}
.mobile-main-nav-bg{position:absolute;top:0;left:-100%;width:100%;content:'';background: rgb(25 25 25 / 25%);height:100vh;z-index:-2;transform:scale(0,1);transform-origin:right center 0;transition:transform .5s cubic-bezier(0.23,1,0.32,1);}
.mobile-main-nav-bg.Bopen{z-index:6;left:0;transform:scale(1,1);transform-origin:left center 0;}
.nav-funcB{position:fixed;left: 40px;top: 25px;font-size:30px;color:#565656;display:block;width: 80px;height:40px;z-index:9999999999;}
.topBox{
    position: relative;
    top: 10px;
    left: 0px;
}
.topBox p{
    display: inline-block;
}
.topBox p a{
    color: #767676;
    padding: 10px 20px;
}
.topBox p a:hover{color: #3c3c3c;}
.topBox p:first-child a{
    background-color: #3a3a39;
    color: #fff;
}
.rightTab{text-align:center;font-size:12px;font-weight:700}
.rightTab >p,.rightTab .translate{display:inline-block;color:#a7a7a7;vertical-align:top;margin:0 5px}
.rightTab >p a{color:#939393}
.rightTab .translate form p{overflow:hidden;border-radius:25px;background:#fff}
.rightTab .translate form p a{color:#fff;float:right;display:block;width:30px;text-align:center;background:#640000;font-size:20px}
.rightTab .translate form input{border-top-left-radius:25px;border-bottom-left-radius:25px;padding:2px 10px;width:100px;vertical-align:initial}
#mobile-menu{overflow:auto;margin: 0px 40px 0;}
#mobile-menu h2{position: relative;font-size: 18px;letter-spacing: .15em;padding-bottom: 25px;margin-bottom: 25px;transition: all .8s;font-size: 20px;letter-spacing: 0;font-weight: 700;}
#mobile-menu h2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #886ab9;
    transition: all .8s;
}
#mobile-menu h2 span{
    font-size: 20px;
    letter-spacing: 0;
    font-weight: 700;
    margin-left: 5px;
}
#mobile-menu ul{
    overflow: hidden;
}
#mobile-menu ul li{
    float: left;
    width: calc(100%/3);
}
#mobile-menu >ul >li .menu_head,.subOption >li .sub2Title,.subOption >li .sub3Title{overflow:hidden;padding: 15px 0;position:relative;}
#mobile-menu >ul >li .menu_head.c0 b,.subOption >li .sub2Title.c0 b,{display:none}
#mobile-menu >ul >li .menu_head p,.subOption >li .sub2Title p,.subOption >li .sub3Title p{float:left;font-size:11pt;width:calc(100% - 20px);}
#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{color: #5c5c5c;font-size: 15px;line-height:110%;transition:all linear .3s;letter-spacing: .05em;font-weight: 500;position: relative;}
#mobile-menu >ul >li .menu_head a:after {
    content: '/';
    position: absolute;
    left: 105px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 13px;
    color: #dadada;
}
#mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b{color:#fff;cursor:pointer;position:absolute;right:0;top:0;width:50px;height:65px;text-align:center;line-height:65px;font-size:20px}
.subOption >li .sub2Title b,.subOption >li .sub3Title b{height:57px;line-height:57px}
#mobile-menu >ul >li .menu_body li p,.subOption >li .sub2Option li p{background:#640000;padding:5px 15px;font-size:14px;border-bottom:1px solid #000}
#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{color:#474747;display:block;padding:10px 35px;font-size:15pt;color:#fff;text-align:center}
#mobile-menu .subOption >li .sub2Title{background:#640000;padding:15px 15px 15px 30px;font-size:14px;border-bottom:1px solid #000}
#mobile-menu .subOption >li .sub2Title p{background:none;padding:0;border:0}
#mobile-menu .subOption >li .sub2Title p a{padding:0;border:none;color:#fff}
#mobile-menu .subOption >li .sub2Title.bo p a{display:inline-block;color:#fff}
#mobile-menu .subOption >li .sub3Title{background:#451616;padding:15px 15px 15px 45px;border-bottom:1px solid #000}
#mobile-menu .subOption >li .sub3Title p{background:none;width:calc(100% - 30px);padding:0;border:0}
#mobile-menu .subOption >li .sub3Title p a{padding:0;color:#fcfcfc}
#mobile-menu .subOption >li .sub3Option p{padding:15px 10px;background:#2d0e0e}
#mobile-menu .subOption >li .sub3Option p a{padding:0;color:#fff}
.bottomBox{position: relative;/* bottom: 40px; */left: 0;width: calc(100% - 80px);}
.bottomBox .social{
    text-align: end;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.bottomBox .social a{
    padding: 0 3px;
    height: 26px;
    display: inline-block;
}
.bottomBox .social a svg{
	width:30px;
	height:30px;
	fill:#563b83;
}
.bottomBox .social a:hover{opacity:.7;}
.bottomBox .social a img{
    width: 20px;
    height: 20px;
}
.bottomBox .company{}
.bottomBox .company p , .bottomBox .company p a{
    font-size: 14px;
    color: #323232;
}





@media screen and (min-width: 1281px) {
	header #cis{
    padding-left: 0;
}
	header #menubar{
    width: calc(76% - 310px);
    display: flex;
    justify-content: center;
}
#openNav{display: none;}
	
}
@media screen and (max-width: 1280px) {
	header #menubar{display:none}
	header #cis{
    width: 60%;
}
	.workframe { width: 90%; }
	
	header .share{right: 10px;}
	.nav-funcB{left: 15px;}
	a:hover{
    color: unset;
}
}
@media screen and (min-width: 1025px) {
header #main-menu >ul{text-align: center;overflow:visible;display: flex;justify-content: center;}
header #main-menu >ul >li{display: flex;vertical-align:top;position:relative;margin: 15px 5px;justify-content: center;}
header #main-menu >ul >li:hover b{
    /* display: flex; */
    opacity: 1;
    top: 0;
}
header #main-menu >ul >li:hover span{
    opacity: 0;
}
header #main-menu >ul >li:nth-child(4){
    /* margin-right: 185px; */
}
header #main-menu >ul >li:nth-child(5){
    /* margin-left: 180px; */
}
header #main-menu >ul >li >a{display: flex;padding: 0 10px;position:relative;font-weight:700;font-size:16px;flex-direction: column;align-items: center;}
header #main-menu >ul >li >a span{
    display: flex;
    font-size: 18px;
    order: 2;
    line-height: 20px;
    width: 100%;
    font-weight: 400;
}
header #main-menu >ul >li >a:hover{
    color: unset;
}
header #main-menu >ul >li >a b{
    display: flex;
    font-size: 14px;
    order: 1;
    opacity: 0;
    line-height: 20px;
    width: 100%;
    position: absolute;
    width: 100%;
    justify-content: center;
    top: -10px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
header #main-menu >ul >li:hover >a:after,header #main-menu .subnav >li:hover >a:after{width:100%}
header #main-menu >ul >li a p{color: #4b415d;font-weight: 500;}
header #main-menu >ul >li a:hover p{color: #bf6ea8;}
header #main-menu .subnav{position:absolute;width:150px;left:5px;top:100%;padding-top:15px;overflow:visible}
header #main-menu li:hover .subnav{display:block}
header #main-menu .subnav >li{text-align:left;margin-bottom:10px;position:relative}
header #main-menu .subnav >li >a{color:#fff;display:inline-block;line-height:130%;position:relative;padding-bottom:7px}
#mobile-menu >ul >li .menu_head a:hover,.subOption >li .sub2Title a:hover,.subOption >li .sub3Title a:hover{
    color: #bda16f;
}
header #main-menu .sub2nav{left:100%;top:-5px;position:absolute;width:150px;z-index:2}
header #main-menu .sub3nav{width:150px;background:#6e1010;z-index:3}
header #main-menu .subnav >li:hover .sub2nav,header #main-menu .sub2nav li:hover .sub3nav{display:block;overflow:visible}
header #main-menu .sub2nav li{position:relative}
header #main-menu .sub2nav li a,header #main-menu .sub3nav li a{color:#fff;line-height:130%;background:#2a2929;display:block;padding:10px}
header #main-menu .sub3nav li a{background:#171717;padding:10px 20px}
header #main-menu .sub2nav li a:hover,header #main-menu .sub3nav li a:hover{background:#590505}
@keyframes rush {
0%{transform:translateX(-100%);transform-origin:0 0}
to{transform:translateX(0);transform-origin:0 0}
}
@keyframes rush2 {
0%{transform:translateX(0);transform-origin:100% 0}
to{transform:translateX(100%);transform-origin:100% 0}
}

}
/* +footer電話
*----------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
.phoneWrap{display: none !important;}
footer #footerCompany .plus-information a:hover img{display:block}

}
@media screen and (max-width: 1024px) {
.phoneWrap{
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 5;
}
.phoneWrap ul{display: flex;}
.phoneWrap ul li{width: 50%;box-sizing: border-box;background-color: #8c746d;}
.phoneWrap ul li + li{border-left: 1px solid #fff;}
.phoneWrap ul li a{display: inline-block;width: 100%;color: #fff;text-align: center;padding: 5px 0px;}
}

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

header{display: flex;justify-content: flex-end;}
#mobile-menu{}
header .workframe{width:100%}
}
@media screen and (max-width: 980px) {
	
}
@media screen and (max-width: 640px) {
	
	header{    height: 75px;    padding: 0;}
	.nav-funcB{top: 20px;width: 50px;}
	header .share{top: 0;right: 3px;}
	#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{}
	#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{font-size:13pt}
	#mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b{height:56px;line-height:56px}
	header #cis{width: 100%;left: 0;justify-content: center;padding-left: 22px;}
	header #cis a {}
	#openNav a span{
}
	#openNav a b{
        display: none;
    }
	header #cis a img{
        width: 180px;
        display: flex;
    }
	
}
@media screen and (max-width: 540px) {
.mobile-main-nav{
    width: 100%;
}
#mobile-menu ul li{
    width: 50%;
}

}
@media screen and (max-width: 480px) {
    header{
    display: flex;
    justify-content: space-evenly;
}
    .nav-funcB{right:10px;top:18px}
}