@charset "utf-8";

/*●●●●●●●●●●●●●●●●●●●●●●●●   隱藏內容   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.me_tp_features{display:none;}
.path p, .path p a{display:none;}
.footer_logo{/*display: none;*/}
.box_link{display:none;}

/*●●●●●●●●●●●●●●●●●●●●●●●●   浮動按鈕   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.info_fix_links{ display:block !important;}/*保持展開*/
.info_fix>span { display: none;}/*隱藏展開鈕*/
.linksBtn, .info_fix:hover>.linksBtn{ background: #de8c66;}

.info_fix_links a { opacity: 0.6; border: 1px solid #ffffff30;}
.info_fix_links a:hover { opacity: 1;  animation: move2 2s; animation-timing-function: ease-out;}

.info_fix_links a, .info_fix_links a:hover{background:var(--mainColor);}
.info_fix_links a:nth-of-type(even), .info_fix_links a:nth-of-type(even):hover { background:var(--mainColor2);}

@keyframes move2{	0%{transform: rotateY(0deg);}	100%{transform:  rotateY(360deg);}}


#to_top{box-shadow: none;border-radius: 0; width: 45px; height: 45px; border: 1px solid #00000033;
           background: #fff;  color: var(--pinkDD);   padding-top: 7px; font-size: 10px;}
#to_top i.top {height: 16px;}
#to_top i.top:before, #to_top i.top:after {background: var(--pinkD);}

@media screen and (max-width: 768px){
#to_top { bottom: 50px;}
}
/*●●●●●●●●●●●●●●●●●●●●●●●●   大範圍設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
*{letter-spacing: .1rem; font-family: 'Josefin Sans','Noto Sans TC', sans-serif;}
:root{
--mainColor: #000 /*黑色*/;
--mainColor2: #e1be5d /*金色*/;

--subColor: #bca558/*金色*/;
--subColor2: #e1e1e4/*淺灰色*/;
--subColor3: #d9d0c3/*暖灰色*/;
--subColor4: #be0017/*紅色*/;

--pinkL: #ffc2c2; /*粉*/
--pink: #CF9E9E; /*淺灰粉*/
--pinkD: #C48888;  /*深灰粉*/
--pinkDD:#995757;  /*深深灰粉*/
--grayL:#f2f2f2; /*淺灰*/
}

#content_main, #content { margin:0;background-image: repeating-conic-gradient(rgb(20 20 20) 0% 25%, rgb(27 27 27) 0% 50%); background-size: 50px 50px;}
#content {}
.lastPage, .animated-arrow {background:#837a72;font-size: 12px;margin: 40px auto 0; border-radius: 10px;border-radius: 5px;}
.lastPage:hover, .animated-arrow:hover {background: var(--mainColor);}

.animated-arrow{width: 150px;height: 45px;}


@media screen and (max-width: 768px){
}         
@media screen and (max-width: 600px) {
	.main_part {padding: 10px 20px;}
	.path p, .path p a{font-size: 12px;}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   HEADER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*主選單動畫*/
.stellarnav > ul > li {/*padding: 20px .5% 30px;*/animation: down 1s both;margin: 0 0 0 8px;}
.stellarnav > ul > li:nth-of-type(2){animation-delay: .05s;}
.stellarnav > ul > li:nth-of-type(3){animation-delay: .1s;}
.stellarnav > ul > li:nth-of-type(4){animation-delay: .15s;}
.stellarnav > ul > li:nth-of-type(5){animation-delay: .2s;}
.stellarnav > ul > li:nth-of-type(6){animation-delay: .25s;}
.stellarnav > ul > li:nth-of-type(7){animation-delay: .3s;}
.stellarnav > ul > li:nth-of-type(8){animation-delay: .35s;}
.stellarnav > ul > li:nth-of-type(9){animation-delay: .4s;}
@keyframes down {0%{transform: translateY(-100px);opacity: 0;} 100%{transform: translateY(0px);opacity: 1;}}



.main_header_area .container {max-width: 95%;}

.navigation {display: flex;align-items: center; flex-direction: row;padding: 0;}
.pageIndex .navigation {  padding: 15px 0 30px;}

.nav-brand img{display: block;}
	
	
.header_area, .header_area.sticky{background: var(--mainColor);opacity: .9;padding: 0;}
.header_area{opacity: 1;}

.pageIndex .header_area {position: fixed; transition: all .5s;background: transparent;padding: 0;}
.pageIndex .header_area.sticky{background: var(--mainColor);opacity: .9;}


/*LOGO*/
.nav-header { transition: all 1.5s; max-width: 150px;padding: 10px;background: black; border-radius: 100%;}

.pageIndex .nav-header {position: fixed;background:transparent; transition: all .5s;  top: 20%; left: 7%;max-width: 280px;} 
.pageIndex .sticky .nav-header { transition: all 1.5s; top: 0; left: 25px;max-width: 150px;padding: 10px;background: black; border-radius: 100%;}


/*第一層*/	
.stellarnav > ul {  margin-right: 4%;}
.stellarnav > ul > li > a { font-size: 16px;color: white;position: relative;overflow: inherit;}
.pageIndex .stellarnav > ul > li > a { display: none; }
.pageIndex .sticky .stellarnav > ul > li > a {display: block;}
.stellarnav.desktop li.has-sub a.dd-toggle {display:none;}
.stellarnav > ul > li > a b{ height: 20px; font-weight: 500;}

.stellarnav > ul > li > a:before{content: "";width: 80%; height: 3px;background: var(--mainColor2);
position: absolute;bottom: -6px;left: 50%;transform: translateX(-50%);opacity: 0;transition: all .3s;}
.stellarnav > ul > li > a:hover:before{bottom: -15px;opacity: 1;}

.stellarnav > ul > li > a:hover b{transform: translateY(-10px); -webkit-transform: translateY(-10px);}

.stellarnav > ul > li > a b:nth-of-type(2){font-size: 14px; letter-spacing: 0;  font-weight: 300;}

/*第二層*/
.stellarnav li li a{ transition: all 1s ease;padding: 10px 10px 8px;}
.stellarnav li li:hover a{background: var(--mainColor2); color: #ffffff;}
.stellarnav ul ul { left: -15px; width: 170px;}
.stellarnav ul li:nth-of-type(2) ul { width: 260px;}

.stellarnav li.has-sub > a:after {border-left: 5px solid transparent;border-right: 5px solid transparent;
    border-top: 5px solid #898989;display:none;}/*主選單箭頭*/
.stellarnav > ul > li.has-sub > a { padding-right: 0;}



@media screen and (max-width: 1200px) {
.pageIndex .nav-header { max-width: 240px;} 

}
@media screen and (max-width: 1024px) {
.stellarnav > ul { text-align: right; }

.main_header_area .container {    max-width: 99%;}
.nav-header {/* max-width: 150px;*/}

.pageIndex .nav-header { /*top: 20%;*//* left: 7%;*/max-width: 200px;} 
.pageIndex .sticky .nav-header { max-width: 120px;}

}

@media screen and (max-width: 900px) {
.nav-header {/* max-width: 150px;*/}

.pageIndex .nav-header { /*top: 20%;*//* left: 7%;*/max-width: 180px;} 
.pageIndex .sticky .nav-header { /* max-width: 150px;*/}

.stellarnav > ul > li > a { font-size: 14px;}


}

@media screen and (max-width: 768px) {
.header_area { /*padding: 20px 0 30px;  background: var(--mainColor);border-top: 10px solid var(--mainColor);*/}
.header_area.sticky {}

.pageIndex .header_area, .header_area { position: sticky; background: var(--mainColor);}

/*****/
.stellarnav ul li:nth-of-type(2) ul { width: 100%;}

/***LOGO***/
.navigation {  justify-content: center;padding: 0;}
.pageIndex .navigation{ padding: 20px 0 30px;}

.nav-header, .sticky .nav-header {    margin-right: 15px;    }
.pageIndex .nav-header, .nav-header, .pageIndex .sticky .nav-header, .sticky .nav-header { 
           top: 0; left: 38%;max-width: 130px;padding: 10px 8px;}


/****/



/*側邊欄位*/
/*meau*/
.stellarnav .menu-toggle span.bars span{background: var(--mainColor2);}
.stellarnav .menu-toggle:after { font-size: 9px; color: white; margin-top: 10px;}

/*clease*/
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent; color: white;}
.stellarnav .icon-close:before, .stellarnav .icon-close:after { border-bottom: solid 3px #ffffff;}
.stellarnav .icon-close { margin-right: 5px;}
	
/*底色*/
.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { background: #000000f7; max-width: 380px;backdrop-filter: saturate(93%) blur(5px);
border-right: 1px #ffffff40 solid;}

/*+ x*/
.stellarnav.mobile > ul > li > a.dd-toggle { padding: 13px;}
.stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 3px var(--mainColor2);}
	
/*第一層*/
.stellarnav > ul > li, .stellarnav.mobile li.open {padding: 15px;}

.stellarnav.mobile > ul > li { border-bottom: 1px #ffffff3d solid;margin: 20px; padding-bottom: 30px;}
.stellarnav.mobile li.open { background: transparent;padding-bottom: 40px;}

.stellarnav > ul > li > a:before{  display:none;}
.stellarnav.mobile > ul > li > a { border: none;padding: 0;}
.stellarnav.mobile > ul > li:hover > a { color: var(--mainColor2);}
.pageIndex .stellarnav > ul > li > a { display: block;}


/*第二層*/
.stellarnav.mobile ul ul {margin-top: 5px;}
.stellarnav li li{border: none;}
.stellarnav.mobile li li a { border-bottom: 1px solid rgb(156 156 156);}
.stellarnav ul ul { left: 0;}
.stellarnav li li:hover a {background: #454545;}
.stellarnav.mobile li li a.dd-toggle, .stellarnav.mobile li li.has-sub a, .stellarnav.mobile li.open li.open
 {  background: transparent;color: gray; border: none;}
.stellarnav.mobile ul ul ul {  background: #ececec;}
.stellarnav.mobile ul ul ul li{border-bottom: 1px solid #ffffff;}
.stellarnav.mobile ul ul>li.has-sub{border-bottom: 1px solid rgb(156 156 156);}
.stellarnav.mobile li.open li.open{padding: 0;}

}

@media screen and (max-width: 570px) {
.stellarnav .menu-toggle { padding: 10px;}

.pageIndex .nav-header, .nav-header, .pageIndex .sticky .nav-header, .sticky .nav-header {   max-width: 100px;}

}
@media screen and (max-width: 425px) {
.pageIndex .nav-header, .nav-header, .pageIndex .sticky .nav-header, .sticky .nav-header { left: 33%;}

}





/*●●●●●●●●●●●●●●●●●●●●●●●●   FOOTER區塊   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.footer { background: var(--mainColor);}
.footer .center { max-width: 100%;}


.footer_logo { max-width: 200px;}

.footer_info{grid-template-columns: 200px 1fr;padding-left: 70px;align-items: center;grid-gap: 10px 20px;}
.footer_info li { display: flex; flex-wrap: wrap; gap: 5px 25px;}


/*符號*/
.footer_info li p { display: flex;       color: #6d6d6d;}
.footer_info li p:after {  content: '➤'; color: var(--mainColor2); font-size: 10px; order: 1; margin-right: 5px;}
.footer_info li p:before { order: 2;}
.footer_info li p a { order: 3;           color: #fff;}


.footer_menu {gap: 5px; display: flex; flex-wrap: wrap;}
.footer_menu a { width: 120px; padding: 8px 10px 7px; text-align: center;  margin: 0;border: none;background: #0b0b0b;color: #4e4e4e;}	
.footer_menu a:hover { background: var(--mainColor2); color: #000000;}
	
	
.copy {padding: 6px 0 10px; margin-top: 20px;border-top: 1px #171717 solid;}
.copy, .copy a{color: #767676;letter-spacing: 0;font-size: 11px;}
.privacyLinks a+a { border-left: 1px solid #767676;}
	


@media screen and (max-width: 768px){
	.footer {padding: 25px 0 55px;}
    
	.footer_info { display: flex;  flex-direction: column;  align-items: center;}
	/*.footer_info li {  justify-content: center;}
	
	.footer_menu { justify-content: center;}	*/
		
	 #to_top { bottom: 65px; }	
	 
	 #bottom_menu{    background: #343434;}	
	 #bottom_menu li { border-right: 1px solid #000000;}	
	 #bottom_menu li a { color: var(--mainColor2);}
	 #bottom_menu li a em { color: #ffffff;}
	 
	 	
}

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

    .footer_info {    padding: 0 20px;    }
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   大圖部分設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*※※※※※【【  固定區塊不動↓↓↓  】】※※※※※*/
/*預設解除背景輪播*/

.bannerindex { position:relative; height:auto;}
.bannerindex .swiper-banner { position:static; margin:0; height:auto;} 
.bannerindex .swiper-slide img { height:auto;}


/*各別*/
.bannerindex .swiper-slide{position: relative;}
.bannerindex .swiper-slide:before, .swiper-slide:after {
    content: "";
    position: absolute;
    z-index: 999;
    pointer-events: none;
    transition-duration: 2s;
    transition-timing-function: linear;
}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(1):before, .bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after,
.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):before, .bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after {
    background-image: url(https://pic03.eapple.com.tw/twoil/BNA1.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	top: 0;
    background-size: contain;
    position: absolute;
    z-index: 101;
    animation: fade_in 3s ease;
	
}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after, .bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after{
    background-image: url(https://pic03.eapple.com.tw/twoil/BNA2.png);
    animation: up_pop 3s ease;
}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):before { background-image: url(https://pic03.eapple.com.tw/twoil/BNB1.png);}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after{   background-image: url(https://pic03.eapple.com.tw/twoil/BNB2.png);}

@keyframes up_pop {
 0% { transform: translateY(12%); opacity: 0;}
 70% { transform: translateY(0);opacity: 1;}
 85% { transform: translateY(2%);opacity: 1;}
 100% { transform: translateY(0);}
}
@keyframes fade_in {
 0% { opacity: 0;transform: scale(3);}
 80% { transform: scale(1);}
 100% { opacity: 1;}
}


/*內頁BANNER 設定*/
.banner {background: url(https://pic03.eapple.com.tw/twoil/ban.jpg) no-repeat;/* background: var(--mainColor2);*/
background-position: center top !important;background-size: cover !important;}
.banner h5 {font-weight: 400;color: #ffffff; letter-spacing: .3rem; font-size: 20px;}
.banner h5:before{content: "TWOIL"; display: block;font-weight: bold; letter-spacing: 0; font-size: 60px;margin-right: -5px;margin-bottom: -5px;}
	
.banner.banE h5:before { content: "CERTIFICATION";}
.banner.banblog h5:before {content: "NEWS";}

@media screen and (max-width: 1024px) {
.banner h5 { }
}
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
.banner { }	
.banner h5 { font-size: 16px;}
.banner h5:before{font-size: 40px;}
}
@media screen and (max-width: 450px){
.banner {}
.banner h5 {}
.banner h5:before {font-size: 30px;}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   首頁顯示   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*英文*/
.i_prod_tit h2, .i_video_tit h2, .module_i_news .title_i_box h6, .module_i_album .title_i_box h6, .news_part .title_i_box h6{
	font-size: 25px; color: var(--mainColor2);}
/*中文*/
.i_prod_tit span, .i_video_tit span, .module_i_news .title_i_box h4, .module_i_album .title_i_box h4, .news_part .title_i_box h4{
	font-weight: 500;font-size: 18px; color: #fff;}
/*版面*/
.prod_part section, .module_i_news section, .module_i_album section { max-width: 1000px; padding: 50px 20px;}
.module_i_news, .prod_part { padding: 0;    background: #000000d4;  border-bottom: 1px solid #ffffff;}
.module_i_news_list, .module_i_news_list.swiper{padding: 0;}


/*●●●●●●●●●●●●●●●●●●●●●●●●   文章   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*首頁顯示+文章首頁*/
.module_i_news ul, .blog_subbox { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}

.i_blog_ri, .blog_list_ri { padding: 15px 0;}
.i_blog_ri h5, .blog_list_ri h5 { color: #3e3e3e;}
.i_blog_ri em, .blog_list_ri em {  display: none;}
.i_blog_ri p {  margin-top: 5px;}

.module_i_news li a, .subbox_item a { grid-template-columns: 150px 1fr;grid-gap: 20px;}
.module_i_news li a:after, .subbox_item a:after { background: rgb(0 0 0 / 4%);}
.module_i_news li a:before, .subbox_item a:before { color: white; background: var(--mainColor); padding: 10px;    color: white;}
.module_i_news li, .subbox_item {    border: 1px solid var(--subColor2);background: #ffffff;}
	
	
/*左邊分類*/
h5.blog_le_t em {  color: white;}
h5.blog_le_t span { color: var(--mainColor2);}
.accordion li .link a{background: white;}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a{background: var(--mainColor2);}

/*文章內頁*/
h4.blog_category_title {
    color: #ffffff;margin-bottom: 0;
}
.blog_in_page .edit{color:white;}


.blog_shareData {
    border-bottom: 1px solid var(--grayL);
    padding-bottom: 15px;}
.blog_back a.article_btn_back {
    background: var(--subColor);
}
.news_related_list li figure { margin-bottom: 10px;}
.news_related {
    background: #121212;}
.news_related h6 span:before {
    font-size: 20px;
    color: #ffffff;
    font-weight: 100;
    letter-spacing: 5px;
}
.blog_in_page .articel_mainPic img {display:none;}
@media screen and (max-width: 768px) {
.module_i_news ul, .blog_subbox {
    grid-template-columns: 1fr;
}
}
@media screen and (max-width: 425px) {
.module_i_news li a, .subbox_item a { grid-template-columns: 1fr;}
.i_blog_ri, .blog_list_ri { padding: 0 10px 15px;}
}
/*●●●●●●●●●●●●●●●●●●●●●●●●   相簿   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.subalbum-menu h2 {  display: none;}
.show-list .show_pic { aspect-ratio: 2 / 3;}
.show-list .item { border: 5px solid var(--mainColor2) !important;}
.show-list .item .overlay {background: rgba(0, 0, 0, .5);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.show-list .item:hover .overlay {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.other_subalbum li a p {
	font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    margin-top: 10px;
    letter-spacing: 1px;
    text-align: center;
    z-index: 9;
    transition: .3s ease-in-out; 
}
.other_subalbum li a:hover p {
    opacity: 0;
    transition: .3s ease-in-out;
}