@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&family=Titillium+Web:wght@300;400;700&family=Rubik:wght@400;700&display=swap');
/*引入自訂字型
並更換下面body, html (把新的字型名稱放入即可)
@font-face {
	font-family: "font-name";src: url(字型檔案位置);
}*/


/************
 main 
 ***********/
 body, html { padding: 0; margin: 0; font-family:Arial, 'Noto Sans TC', "Microsoft JhengHei", Helvetica,  sans-serif ; font-size: 1rem; min-height: 100vh; color:#333;background: url(../img/bg.jpg)repeat-y center center;background-size: cover; font-weight: 400;z-index: 0;position: relative;}
 /* body, html { padding: 0; margin: 0; font-family:'新的台達字型font-name','Noto Sans TC', "Microsoft JhengHei", Helvetica, Arial, sans-serif ; font-size: 1rem; height: 100%; color:#333;background: url(../img/bg.jpg)no-repeat center center;background-size: cover; font-weight: 400;z-index: 0;position: relative;} */
 a { transition: all ease-in-out .3s; color: #333; }
 a:hover { text-decoration: none; color: #333; }
 a.underline { text-decoration: underline; }
 ul,ol{list-style: none;padding: 0;margin: 0;z-index: 1500;}
 :focus { outline: none;}
 .btn.focus, .btn:focus{ outline: none; }
 button:focus{outline: none;}
 .form-control:focus{box-shadow: inset 2px 2px 5px #dde7f2, inset -3px -3px 7px #FFFFFF;background-color: #fff;border: none;}
 p{font-size: 1.125rem;}


/*text color*/
.txt-black{color: #000 !important;}
.txt-blue{color: #0087dc !important;}

/*bg*/
.bg-w {background: #fff !important;}

/* text size&bold */
.font-9r { font-size: .9rem !important; }
.font-1r { font-size: 1rem !important; }
.font-18 { font-size: 1.125rem !important; }
.font-15r { font-size: 1.5rem !important; }
.font-30 { font-size: 1.75rem !important; }
.font-2r { font-size: 2rem !important; }

.font-bold { font-weight: 700 !important; }
.font-normal { font-weight: 400 !important; }

/*text position*/
.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.al-center{align-items: center !important;}

/* padding & margin */
.pa-0{padding:0 !important;}
.ma-0{margin:0 !important;}

/* */
.pl-0 { padding-left: 0 !important; }
.pl-5 { padding-left: 5px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-50 { padding-left: 50px !important; }
.pl-100 { padding-left: 100px !important; }

/*  */
.pr-0 { padding-right: 0 !important; }
.pr-5 { padding-right: 5px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-50 { padding-right: 50px !important; }
.pr-100 { padding-right: 100px !important; }

/*  */
.pt-0 { padding-top: 0 !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-100 { padding-top: 100px !important; }

/*  */
.pb-0 { padding-bottom: 0 !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-100{ padding-bottom: 100px !important;}

/*  */
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-100 { margin-top: 100px !important; }

/*  */
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-100 { margin-bottom: 100px !important; }

/*  */
.ml-0 { margin-left: 0 !important; }
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-100 { margin-left: 100px !important; }

/*  */
.mr-0 { margin-right: 0 !important; }
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-50 { margin-right: 50px !important; }
.mr-100 { margin-right: 100px !important; }



/* header */
.block-frame{display: flex;align-items: center;}
.nav{width: 100%;margin-left: auto;}
.header-logo { display: inline-block; width: 150px;position: absolute;left: 40px;height: 90px;padding: 20px 0; z-index: 11;top:2px; }
.header-logo a { display: block; }
header { width: 100%; top: 0; left: 0; z-index: 1100; padding-top: 0px;transition: all ease-in-out 0.3s;background: #fff;position: relative;position: fixed;}
header .main-menu { display: flex; width: 100%; align-items: center; z-index: 10;justify-content: space-between}
header .main-menu .main-menu-frame{width: 100%;position: relative;padding-left: 230px;z-index: 0;}
header .main-menu .main-menu-frame:before{content: "";width: 100%;height: 5px;position: absolute;bottom: 0;right: 0;background: #0087dc;z-index: -1;}
header .main-menu .main-menu-frame:after{content: "";width: 260px;height: 5px;position: absolute;bottom: 0;right: 0;background: #64D7D7;}
header .main-menu .main-menu-frame ul { padding-left: 0; list-style: none; margin: 0; }
header .main-menu .main-menu-frame .menu-lv1 { display: flex;justify-content: space-between;margin-right: 135px;}
header .main-menu .main-menu-frame .menu-lv1>li {width: 20%;text-align: center;}
header .main-menu .main-menu-frame .menu-lv1>li .menulv1-title {font-size: 1.25rem;padding: 40px 20px 20px;;display: block; color: #555;transition: all ease-in-out 0.3s; }
header .main-menu .main-menu-frame .menu-lv1>li.open .menu-lv2 { display: block; }
header .main-menu .main-menu-frame .menu-lv1>li.open .menulv1-title,header .main-menu .main-menu-frame .menu-lv1>li.active .menulv1-title { background: #0087dc; color: #fff !important;}
header .main-menu .main-menu-frame .menu-lv2 { display: none; position: absolute; left: 0; right: 0; top: 100%; background-color: #fff; z-index: 10;padding: 0; box-shadow: 0 20px 30px rgba(0, 0, 0, .2);width: 100%;min-width: 100%;}
header .main-menu .main-menu-frame .menu-lv2>ul { display: flex;flex-wrap: nowrap;flex-direction: row;width: 100%;align-items: center;justify-content: space-between;overflow: auto;}
header .main-menu .main-menu-frame .menu-lv2>ul>li {padding: 0 10px;margin-top: 0;position: relative;flex: 1 1 auto;text-align: left; background: -moz-linear-gradient(-30deg, rgba(30,87,153,0) 0%, rgba(0,159,232,0.1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(-30deg, rgba(30,87,153,0) 0%,rgba(0,159,232,0.1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(150deg, rgba(30,87,153,0) 0%,rgba(0,159,232,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
header .main-menu .main-menu-frame .menu-lv2>ul>li a{display: block;padding: 30px;border-radius: 10px;font-size: 1.5rem;color: #0087dc;}
header .main-menu .menu-area-01{display: none;}
header .main-menu .menu-01{display: flex;width: 135px;position: absolute;right: 0;top: 0;}
header .main-menu .menu-01:before{content: "";width: 1px;height: 100%;position: absolute;left: 0;top: 0;background: #ddd;}
header .main-menu .menu-01:after{content: "";width: 135px;height: 5px;position: absolute;bottom: 0;right: 0;z-index: 1500;}
header .main-menu .menu-01 li{position: relative;width: 100%;}
header .main-menu .menu-01 li a{display: flex;align-items: center;justify-content: center; font-weight: 400;padding: 40px 40px 20px;color: #555;font-size: 1.25rem;}
header .main-menu .menu-01 li .icon{display: inline-block;margin-right: 5px;display: flex;align-items: center;}
header .main-menu .menu-01 li img{width: 24px;}
header .main-menu .menu-footer{display: none;}
header .xs-menu-toggle, .xs-menu-toggle-02 { display: none; }

header .main-menu .menu-01 li .lg-dropdown-box{display: none;position: absolute;width: 100%;left: 0;z-index: 1500;}
header .main-menu .menu-01 li .lg-dropdown-box ul>li a{color: #fff;padding: 10px 15px;text-align: center;z-index: 1500;}
header .main-menu .menu-01 li.lg-dropdown:hover .lg-dropdown-box{display: block;}

/*content*/
.show-xs{display: none;}
.main{width: 100%;padding-top: 90px;padding-bottom:75px;}
.download{color: #000;}
.download .main{max-height: 100vh;overflow: hidden;}
.download.download-page .main{overflow: auto;max-height: none;padding-bottom: 0;}
.download.download-page footer{position: static;}
iframe{border: none;}
.hide{display: none;}
section{padding: 70px 0;}
.container{padding-left: 20px;padding-right: 20px;}
.icon-hover{display: none;}
.itemthumb img{width: 100%;object-fit: cover;}


.btn{border-radius: 0;border: none;}
.btn.btn-blue{color: #fff;width: 270px;padding: 12px 20px;font-size: 1.125rem;letter-spacing: 2px;background: url(../img/bg-btn.jpg)no-repeat top center;background-size: cover;}
.title-type03{position: relative;padding-top: 25px;margin-bottom: 20px;letter-spacing: 1px;}
.title-type03:before{content: "";width: 90px;height: 5px;background: url(../img/title-frame.jpg)no-repeat center center;background-size: 100%;position: absolute;top: 0;left: 0;}
.title-type03.text-center:before{left: 50%;transform: translateX(-50%);}
.title-type03 h3{font-size: 2.25rem;color: #000000;margin-bottom: 10px;}
.title-type03 h4{font-weight: 500;letter-spacing: 2px;}

.title-type04 h4{font-weight: 500;letter-spacing: 2px;}

/*footer*/
footer{position: fixed;left: 0;bottom: 0;width: 100%;padding: 15px 40px;z-index: 10;height: 70px;z-index: 800;}
footer:before{content: "";width: 100%;height: 100px;position: absolute;bottom: 0;left: 0;z-index: -1;background: -moz-linear-gradient(top, rgba(119,119,119,0) 0%, rgba(119,119,119,0.1) 20%, rgba(119,119,119,0.5) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(119,119,119,0) 0%,rgba(119,119,119,0.1) 20%,rgba(119,119,119,0.5) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(119,119,119,0) 0%,rgba(119,119,119,0.1) 20%,rgba(119,119,119,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.footer-bottom{display: flex;justify-content: space-between;align-items: center;font-weight: 300;}
.footer-bottom .footer-left p{margin: 0;color: #fff;font-size: .9rem;}
.footer-social{display: flex;align-items: center;}
.footer-social span{font-size: .9rem;padding:0 5px;}
.footer-social ul{display: flex;align-items: center;}
.footer-social ul li{margin: 0 5px;}
.footer-social ul li a{border-radius: 50%;padding: 5px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}
.footer-social .left,.footer-social .right{display: flex;align-items: center;}

/*download*/
body.download{background: url(../img/bg-download.jpg)repeat-y center center;background-size: cover;}
.download-head{position: absolute;top: 0;left: 0;width: 280px;height: 150px;z-index: 10;}
.download-head:before{content: "";position: absolute;top: 0;left: 0;width: 280px;height: 150px;background: #0087dc;z-index: -1;}
.download-head:after{content: "";position: absolute;top: 0;left: 100%;width: 0;height: 0;border-style: solid;border-width: 150px 90px 0 0;border-color: #0087dc transparent transparent transparent;z-index: -1;}
.download-head .back{display: none;color: #fff;font-size: .9rem;padding: 0 40px 10px;flex-direction: row-reverse;align-items: center;justify-content: flex-end;}
.download-head .back .icon{padding-right: 10px;}
.menu-area-download{width: 100%;display: flex;justify-content: space-between;padding-left: 230px;position: relative;z-index: 0;}
/*.menu-area-download:before{content: "";width: 100%;height: 8px;position: absolute;bottom: 0;right: 0;background: #0087dc;z-index: -1;}
.menu-area-download:after{content: "";width: 40%;height: 8px;position: absolute;bottom: 0;right: 0;background: #64d7d7;}
.menu-area-download:after{content: "";width: 20%;height: 8px;position: absolute;bottom: 0;right: 0;background: #64D7D7;}*/
.download-mainTitle{padding:30px 40px;color: #fff;}
.download-mainTitle h2{font-size: 3rem;}
.download-mainTitle span{font-size: 1rem;opacity: .5;}

 /*Progress bar*/
header { width: 100%; top: 0; left: 0;padding-top: 0px;transition: all ease-in-out 0.3s;background: #fff;position: relative;position: fixed; border-bottom: #64D7D7 solid 7px;}
.progress-bar:before{content: "";width: 60%;height: 7px;position: absolute;bottom: -7px;left: 0;display: block ; background: #0087dc;z-index: 2;}
.progress-bar:after{content: "";width: 20%;height: 7px;position: absolute;bottom: -7px;right: 0;display: block ; background: #B9EB5F;z-index: 1;}


.download header .main-menu .menu-01{position: static;width: auto;align-items: center;margin-right: 435px;width: 100%;justify-content: flex-start;}
.download header .main-menu .menu-01:before{display: none;}
.download header .main-menu .menu-01 li{width: auto;}
.download header .main-menu .menu-01 li a{font-size: .9rem;padding: 40px 20px 20px;color: #000;word-break: keep-all;padding: 45px 20px 20px;height: 90px;}
.download header .main-menu .menu-01 li:before{content: "";width: 1px;height: 16px;background: #000;position: absolute;left: 100%;bottom: 25px;}
.download header .main-menu .menu-01 li:last-child:before{display: none;}
.download header .main-menu .menu-02{display: flex;position: absolute;right: 0;}
.download header .main-menu .menu-02>li{display: flex;align-items: center;position: relative;}
.download header .main-menu .menu-02>li .login-dropdown{font-size: 1.25rem;color: #000;padding: 40px 20px 20px ;}
.download header .main-menu .menu-02>li .login-dropdown .icon{padding-left: 5px;}
.download header .main-menu .menu-02>li.open .login-dropdown .icon .icon-basic{display: none;}
.download header .main-menu .menu-02>li.open .login-dropdown .icon .icon-hover{display: inline-block;}
.download header .main-menu .menu-02>li .login-dropdown-box{display: none; position: absolute;top: 90%;right: 0;width: 330px;background: #fff;padding: 20px 30px;box-shadow: 0 5px 10px 5px rgb(0,0,0,.15);z-index: 1500;}
.download header .main-menu .menu-02> li.open .login-dropdown-box{display: block;}
.download header .main-menu .menu-02>li .login-dropdown-box li{font-size: 1.125rem;display: flex;}
.download header .main-menu .menu-02>li .login-dropdown-box li a{position: relative;padding: 8px 0;}
.download header .main-menu .menu-02>li .login-dropdown-box li a:hover{color: #009fe8;}
.download header .main-menu .menu-02>li .login-dropdown-box li a:before{content: "";opacity: 0;background: url(../img/arrow-b.png)no-repeat center center;background-size: 100%;width: 40px;height: 20px;position: absolute;top: 50%;right: -60px;transform: translateY(-50%);transition: all ease-in-out .3s;}
header::before{color: red;}
.download header .main-menu .menu-02>li .login-dropdown-box li a:hover:before{opacity: 1;}

.download header .main-menu .menu-02 li:nth-child(1){display: none;}
.download header .main-menu .menu-02>li.language{display: flex;width: 135px;right: 0;top: 0;}
.download header .main-menu .menu-02>li.language:before{content: "";width: 1px;height: 100%;position: absolute;left: 0;top: 0;background: #ddd;}
.download header .main-menu .menu-02>li.language a{display: flex;align-items: center;justify-content: center;font-weight: 400;padding: 40px 40px 20px;color: #555;font-size: 1.25rem;width: 100%;}
.download header .main-menu .menu-02>li.language a .icon{margin-right: 5px;display: flex;align-items: center;}


.download footer:before{display: none;}
.download .footer-bottom{justify-content: flex-end;}
.download .footer-bottom p{margin-bottom: 0;font-size: .9rem;}
.download .footer-social{padding-left: 15px;}

.full-screen{display: block;}
.full-screen .left{width: calc(100% - 750px);min-width: 50%;position: relative;float: left;}
.full-screen .right{overflow: auto;position: relative;float: right;max-height: calc(100vh - 160px);width: 750px;max-width: 50%;}
.full-screen .left .imgbox {position: relative;overflow: hidden;}
.full-screen .left .imgbox:before{content: "";right: 0;bottom: 0;transform: translate(50%,50%);border-radius: 50%; position: absolute;width: 1800px;height: 1500px;background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.full-screen .left .itemthumb img{height: calc(100vh - 90px);}
.main-download{position: absolute;bottom: 70px;right: 50px;text-align: right;}
.main-download .title{margin-bottom: 30px;}
.main-download .title h4{font-weight: 700;letter-spacing: 5px;margin-bottom: 10px;font-size: 1.75rem;}
.main-download .title h3{font-size: 3.2rem;color: #0087dc;letter-spacing: 3px;}

.download-type{display: flex;padding: 3px;padding-bottom: 75px;overflow: hidden;}
.download-type .type-gp{display:flex;flex-direction: column;width: 250px;}
.download-type .type-gp:nth-child(2){margin-top: 60px;}
.download-type .type-gp:nth-child(3){margin-top: 120px;}
.type-item{padding: 3px;position: relative;}
.type-item:before{content: "";opacity: 0;background: url(../img/arrow-w.png)no-repeat center center;background-size: 100%;width: 60px;height: 30px;position: absolute;bottom:30px;left:25px;transition: all ease-in-out .3s;}
.type-item:hover:before{opacity: 1;}
.type-item .itemthumb img{height: 244px;}
.type-item .name{position: absolute;font-size: 1.5rem;color: #fff;top: 40px;left: 25px;}

.download-banner{position: relative;z-index: 0;}
.download-banner:before{content: "";width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;top: 0;left: 0;}
.download-banner .download-head{height: 200px;}
.download-banner .download-head:before{height: 200px;}
.download-banner .download-head:after{border-width: 200px 115px 0 0;}
.download-banner .download-head .back{display: flex;}
.download-banner .itemthumb img{height: 200px;}
.download-banner .download-type-name{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 2.25rem;text-align: center;color: #fff;width: 100%;letter-spacing: 5px;}
.download-list{display: flex;flex-wrap: wrap; margin: 0 -25px;justify-content: center}
.download-list .download-item{width: 20%;padding: 0 25px;margin: 20px 0 40px;}
.download-item .imgbox{position: relative;transition: all .3s ease-in-out;z-index: 0;}
.download-item .imgbox:before{content: "";width: 100%; height: 100%;background: rgba(0,160,233,.8);position: absolute;top: 0;left: 0;opacity: 0;}
.download-item .imgbox:after{content:"";width: 100%;height: 50px;background: url(../img/shadow.png)no-repeat center center;background-size: 100%;position: absolute;bottom: -20px;left: 0;z-index: -1;}
.download-item .imgbox img{box-shadow:0px 2px 10px 0px rgb(0,0,0,.2) ;width: 100%;}
.download-item .imgbox .text{opacity: 0;position: absolute;text-align: center;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;transition: all .3s ease-in-out;}
.download-item a:hover .imgbox{transform: scale(1.4);}
.download-item a:hover .imgbox:before{opacity: 1;}
.download-item a:hover .imgbox .text{opacity: 1;}
.download-item a:hover .imgbox .text span{font-size: .9rem;}
.download-item a:hover .imgbox .text .icon{padding-top: 10px;}
.download-item a:hover .imgbox .text .icon img{max-width: 28px;}
.download-item .imgbox .text .icon img{box-shadow: none;}
.download-item .name{text-align: center;color: #555;font-size: 1.125rem;margin-top: 10px;word-break: keep-all;}