@charset "utf-8";
/*BANNER*/
.banner_box{ position:relative; background-color:#f5f5f5; max-width:1920px; margin:auto; }
.banner_box .slide .banner{ position:relative; width:100%; height:auto; padding-bottom:37.5%; background:no-repeat center; background-size:cover; z-index:1; }
.banner_box .slide .banner_pc,
.banner_box .slide .banner_mb{ position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center; background-size:cover; }
.banner_box .slide .banner_mb{display:none;}
.banner_box .banner_menu{ position:absolute; z-index:10; bottom:10px; left:0; right: 0; margin:auto; text-align:center; }
.banner_box .banner_menu .point{ width:18px; height:18px; background:#fff; border-radius:50px; margin:0 10px; border: 1px solid #ccc; display:inline-block; transition:.2s;}
.banner_box .banner_menu .point.focus{ background-color:#055faf; transition:.2s;}

.banner_box .bannerMask{ position:absolute; left:0; bottom:0; width:100%; padding-bottom:5%; background-image:url(../image/index/banner_mask.svg); background-repeat:no-repeat; background-position:top center; background-size:1920px; z-index:8; pointer-events: none; }


/*PRODUCTS*/
.products_box{ overflow:hidden; }
.products_box{ margin-bottom:130px; }
.products_box .content_box{ display:flex; max-width:1700px; }
.products_box .left_menu{ width:40%; padding:0 20px 0 40px;}

.products_box .left_menu .leftTitle{ margin-bottom:80px; }
.products_box .left_menu .leftTitle .ch{ font-size:66px; color:#666; font-weight:700; font-family: 'Noto Serif TC'; }
.products_box .left_menu .leftTitle .en{ font-size:28px; color:#666; font-weight:700; letter-spacing: 4px; }

.products_box .left_menu .options{ padding:7px 7px 7px 45px; display:flex; align-items:center; cursor:pointer; max-width:408px; width:100%; overflow:hidden; }
.products_box .left_menu .options .imgs{ width:170px; border-radius:40px; overflow: hidden; font-size: 0; }
.products_box .left_menu .options img{ width:100%; }
.products_box .left_menu .options .p{ font-size:14px; font-weight:300; color:#333; flex:1; padding:0 10px 0 0; display:block; }
.products_box .left_menu .options .p span{ font-size:28px; display:block; color:#777; font-weight:700; white-space: normal; }
.products_box .left_menu .options.focus{ background-color:#efefef; border-radius:40px; }
.products_box .left_menu .options.focus .p span{ font-weight:bold; color:#333; }
/*.products_box .left_menu .options.focus p{ color:#333;}
.products_box .left_menu .options.focus p span{ color:#333;}*/
.products_box .right_exhibit{ position:relative; padding:50px; flex:auto; width:60%; background:#efefef; border-radius: 40px 0 0 40px; }
.products_box .right_exhibit:after{ content:""; display:block; background:#efefef; position:absolute; top:0; bottom:0; right:-50%; z-index:1; width:100%; margin:auto; }
.products_box .right_exhibit .p_slide{ position:relative; z-index:2; }
.products_box .right_exhibit .present{ width:100%; height:100%; display:block; }
.products_box .right_exhibit .present .word{ flex:0.9; padding-right:30px;}
.products_box .right_exhibit .present .word p{ padding-bottom:10px; }
.products_box .right_exhibit .present .word p.p1{ font-size:22px; color:#777; padding-bottom:30px; }
.products_box .right_exhibit .present .word p.p2{ font-size:22px; color:#999; padding-bottom:50px; }
.products_box .right_exhibit .present .word h3{ font-family:'Noto Serif TC'; font-size:42px; font-weight:700; color:#0069ac; text-align:left; padding:0; }
.products_box .right_exhibit .present .image{ position:relative; max-width:376px; margin-bottom:40px; }
.products_box .right_exhibit .present .image .prod{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; display:flex; align-items:flex-start/*flex-end*/; justify-content:center; z-index:1;}
.products_box .right_exhibit .present .image .prod img{ border-radius:40px; z-index:1; position:relative; }
.products_box .right_exhibit .present .image .prod .chart01{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; width:100%; }
.products_box .right_exhibit .present .image .bg{ width:100%; padding-top:100%; background-color:#3a86ca; border-radius:50%; display:block;}

.products_box .right_exhibit .present .btnBuyBox{ text-align:right; }
.products_box .right_exhibit .present .btnBuy{ display:inline-flex; line-height:76px; background-color:#be8a43; align-items: center; padding:15px 25px; border-radius:50px; }
.products_box .right_exhibit .present .btnBuy .icon{ width:32px; height:32px; background-image:url(../image/page/icon_shopping.svg); background-position:center; background-repeat:no-repeat; background-size:cover; }
.products_box .right_exhibit .present .btnBuy .bTxt{ font-size:28px; color:#fff; padding:0 0 0 15px; }

.wrapper{ /*background:url(../image/index/prod_bg.png) no-repeat center bottom #f5f5f5; background-attachment:fixed;*/ min-height:auto; margin-top:208px; }

/* JS SCROLL */
@media screen and ( min-width: 768px) {
	.products_box .left_menu .left_box{ display:block; height:100%; overflow-x:hidden; }
	.products_box .left_menu .left_box .left_range{ height:100%; width:calc(100% + 20px); overflow-x:hidden; overflow-y:scroll; white-space:nowrap; }
}
@media screen and ( max-width: 767px) {
	.products_box .left_menu .left_box{ display:block; width:100%; overflow-y:hidden; }
	.products_box .left_menu .left_box .left_range{ width:100%; padding-bottom: 20px; margin-bottom:-20px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
}

/* Round Slide */
.rs-start, .rs-end { display: none; }
.rs-border { border: none; }
.rs-first .rs-move { margin: -6px 0px 0px 0px !important; height: 10px !important; width: 10px !important; }
.rs-second .rs-move { margin: -6px 0px 0px 0px !important; height: 10px !important; width: 10px !important; }
.data_box .data_display .dashboard .db_word { background: transparent; }
.rs-animation .rs-transition { transition: all 5s linear 0s !important; }

.p_slide .slick-slide>div{ display:flex; align-items:flex-end; }

/*NEWS*/
.news_box{ background:url(../image/index/news_bg.jpg) no-repeat center; background-size:cover; padding:80px 0; max-width:1920px; margin:auto; }
.news_box .word_box{ width:45%; min-height:600px; background-color:#fff; padding:50px 50px 80px 50px; position:relative;}
.news_box .word_box h3{ font-family:'Noto Serif TC'; font-size:35px; font-weight:700; border-bottom:1px solid #ccc; padding-bottom:30px; margin-bottom:30px;}
.news_box .word_box p{ line-height:1.8; padding-bottom:10px;}
.news_box .word_box a{ color:#005bac; }
.news_box .word_box a:hover{ text-decoration:underline; }
.news_box .word_box iframe{ max-width:100%;}
.news_box .word_box .word_title{ font-size:20px; font-weight:500; color:#333; margin-top:-2px; }
.news_box .word_box .word_sub{}
.news_box .word_box .word_sub span{ font-size:14px; line-height:36px; }
.news_box .word_box .word_sub span.word_level{ color:#fff; background-color:#055faf; margin-right:5px; padding:2.5px 5px; }
.news_box .word_box .word_sub span.word_date{  color:#055faf; }
.news_box .word_box .more_link{ font-size:18px; color:#055faf; display:block; font-weight:500; line-height:35px; height:35px; position:absolute; left:50px; right:50px; bottom:50px;}


/*Story*/
.story_box{ background-color:#0069ac; padding:80px 75px 0 75px;  }
.story_box .storyFlex{ width:100%; max-width:1920px; margin:auto; display:flex; }
.story_box .leftText{ width:32px; display:flex; flex-direction: column; align-items: center; grid-gap:20px 0; padding:20px 0; }
.story_box .leftText .radius{ width:10px; height:10px; border-radius:50%; background-color:#fff; }
.story_box .leftText .line{ background-color:#fff; width:1px; height:25%; }
.story_box .leftText .wText{ color:#fff; font-size:22px; font-weight:500; }
.story_box .rightBox{ flex:1; margin-left:60px; position:relative; }
.story_box .rightBox .wbg01{ background:#fff; border-radius:15px; width:94%; height:75%; position:absolute; z-index:2; }
.story_box .rightBox .wbg02{ background:#fff; border-radius:15px; width:94%; height:75%; position:absolute; right:0; top:11%; z-index:2; }
.story_box .rightBox .wbg03{ position:relative; z-index:3; display:flex; align-items: flex-start; max-width: 1300px; margin: auto; padding: 70px 10px 0 10px; }

.story_box .rightBox .maImg{ max-width:435px; width:33.46%; position:relative; z-index:2; }
.story_box .rightBox .maImg:after{ content:""; display:block; width:100%; padding-bottom:140.22%; background-image:url(../image/index/story_img.png); background-repeat:no-repeat; background-position:center; background-size:cover; }
.story_box .rightBox .wbg03 .leftContText{ flex:1; padding:0 0 120px 30px ; position: relative; }
.story_box .rightBox .wbg03 .leftContText .h1_title{ font-size:54px; font-weight:900; color:#0069ac; margin-bottom:20px; font-family: 'Noto Serif TC'; position:relative; z-index:2; }
.story_box .rightBox .wbg03 .leftContText .p_txt{ color:#0069ac; font-size:26px; line-height:2.6; font-weight:500; position:relative; z-index:2; }
.story_box .rightBox .wbg03 .leftContText .imgs{ width:42%; float: right; position:relative; z-index:2; }

.story_box .rightBox .bird{ width:10%; position:absolute; z-index:3; top:7%; right:0; }


/*HOVER*/
@media screen and ( min-width: 1100px) {

}


/*PAD*/
@media screen and ( max-width: 1099px) and ( min-width: 768px) {
.wrapper{ margin-top:65px; }
/*BANNER*/
.banner_box .slide .banner{ height:400px;}

/*PRODUCTS*/
.products_box .content_box{ display:block; }
.products_box .left_menu{ width:100%; padding:0; position:relative; padding-bottom:40px; }
.products_box .left_menu:after{ content:""; display:block; position:absolute; left:0; right:0; bottom:-10px; margin:auto; width:54px; height:6px; background:#b5b5b5; border-radius:30px; }
.products_box .left_menu .leftTitle{ margin-bottom:40px; }
.products_box .left_menu .options{ display:inline-flex; padding:15px; width:auto; flex-direction: column; }
.products_box .left_menu .options .p{ text-align:center; padding:15px 0 0 0; order:2; flex:none; display:block; width:100%; }
.products_box .left_menu .options .imgs{ margin:0; order:1; }
.products_box .left_menu .left_box .left_range{ padding:0; }

.products_box .right_exhibit{ width:100%; margin-top:50px; padding:30px; padding-right:0; }
.products_box .right_exhibit .present .word{ padding:0 0 30px 0;}
.products_box .right_exhibit .present{ display:block;}

/*NEWS*/
.news_box .word_box{ width:70%;}

/*Story*/
.story_box{ padding:80px 40px 0 40px; }
.story_box .rightBox{ margin-left:40px; }
.story_box .rightBox .wbg03{ padding: 40px 15px 0 15px; }
.story_box .rightBox .wbg03 .leftContText .p_txt{ font-size:24px; }

}


/*MOBILE*/
@media screen and ( max-width: 767px) {
.wrapper{ margin-top:65px; }	
/*BANNER*/
.banner_box .slide .banner{ padding-bottom:55.72%; height:0;}
.banner_box .slide .banner_pc{display:none;}
.banner_box .slide .banner_mb{display:block; background-size:cover;}

.banner_box .bannerMask{ background-size:100%; padding-bottom: 7%; }
.banner_box .banner_menu{ bottom: 0; }
.banner_box .banner_menu .point{ width:10px; height:10px; margin:0 5px; }

/*PRODUCTS*/
.products_box{ margin-bottom:30px; }
.products_box .content_box{ display:block; overflow:hidden; padding:0 15px; }
.products_box .left_menu{ width:100%; padding:10px 0 40px 0; border:0; white-space:nowrap; overflow-x:auto; background-color:#fff; border-radius:10px; position:relative; }
.products_box .left_menu:after{ content:""; display:block; position:absolute; left:0; right:0; bottom:20px; margin:auto; width:27px; height:3px; background:#b5b5b5; border-radius:30px; }
.products_box .left_menu .leftTitle{ margin-bottom:20px; }
.products_box .left_menu .leftTitle .ch{ font-size:22px; }
.products_box .left_menu .leftTitle .en{ font-size:14px; }
.products_box .left_menu .options{ display:inline-flex; flex-direction: column; width:auto; padding:10px; text-align:center;}
.products_box .left_menu .options .imgs{ order:1; width:68px; margin:auto; border-radius: 10px; }
.products_box .left_menu .options .p{ font-size:0; order:2; padding:0; }
.products_box .left_menu .options .p span{ font-size:14px;}
.products_box .left_menu .options.focus{ border-radius: 20px; }

.products_box .right_exhibit{ padding:15px; max-width:none; width:100%; border-radius: 20px 0 0 20px; }
.products_box .right_exhibit .present{ display:block !important; padding:0;}
.products_box .right_exhibit .present .word{ padding:0;}
.products_box .right_exhibit .present .word h3{ font-size:21px; }
.products_box .right_exhibit .present .word p.p1{ font-size:15px; padding-bottom:20px; }
.products_box .right_exhibit .present .word p.p2{ font-size:15px; padding-bottom:20px; }
.products_box .right_exhibit .present .image{ margin-bottom:20px; }
.products_box .right_exhibit .present .image .prod img{ border-radius: 20px; }
.products_box .right_exhibit .present .btnBuy{ padding:5px 10px; }
.products_box .right_exhibit .present .btnBuy .bTxt{ font-size:15px; padding: 0 0 0 8px; }
.products_box .right_exhibit .present .btnBuy .icon{ width:16px; height:16px; }


/*NEWS*/
.news_box{ padding:30px 0;}
.news_box .word_box{ width:100%; padding:20px; min-height:auto;}
.news_box .word_box h3{ padding-bottom:10px; margin-bottom:20px;}
.news_box .word_box .more_link{ position:static; margin-top:30px;}

/*Story*/
.story_box{ padding:30px 15px 0 15px; }
.story_box .leftText .radius{ width:6px; height:6px; }
.story_box .leftText .wText{ font-size:12px; }

.story_box .rightBox{ margin-left: 10px; }
.story_box .rightBox .wbg01{ height:89%; width: 92%; border-radius:5px; }
.story_box .rightBox .wbg02{ height:auto; width: 90%; bottom:20px; top: 5%; border-radius:5px; }
.story_box .rightBox .wbg03{ padding:20px 15px; flex-direction: column; }
.story_box .rightBox .wbg03 .leftContText{ order:1; padding:0; width:100%; flex:none; position:static; }
.story_box .rightBox .wbg03 .leftContText .h1_title{ font-size:16px; margin-bottom:10px; }
.story_box .rightBox .wbg03 .leftContText .p_txt{ font-size:12px; ine-height: 1.8; }
.story_box .rightBox .wbg03 .leftContText .p_txt .sp-br{ display:block; }
.story_box .rightBox .wbg03 .leftContText .imgs{ position:absolute; float:none; right: 10%; bottom: 17%; }
.story_box .rightBox .bird{ width:20%; top: 1%; right: 2%; }
.story_box .rightBox .maImg{ order:2; margin-left:10%; }
.story_box .rightBox .maImg:after{ padding-bottom:114%; background-size:100%; background-position:top center; }




}