@charset "utf-8";
@import url("pc_reset.css");
@import url("HomeDemo.css");

/* CSS Document */

/*
Firefox : 以 -moz- 開頭
Google Chrome / Safari : 以 -webkit- 開頭
Opera : 以 -o- 開頭
IE 9/10 : 以 -ms- 開頭
*/

body {
	/*max-width:1350px;*/
	
    /*
    background-image: -ms-linear-gradient(bottom, #FAFFFD 0%, #000000 100%);

    background-image: -moz-linear-gradient(bottom, #FAFFFD 0%, #000000 100%);

    background-image: -o-linear-gradient(bottom, #FAFFFD 0%, #000000 100%);

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FAFFFD), color-stop(1, #000000));

    background-image: -webkit-linear-gradient(bottom, #FAFFFD 0%, #000000 100%);

    background-image: linear-gradient(to top, #FAFFFD 0%, #000000 100%);

    */
    background-color: #FFFFFF;
	font-family: 'Noto Sans',Arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;
}

.main {
    max-width:  100%;
    display: flex;
    
    justify-content: center;
    /*background-color: #bbb;*/
}


h2{
font-size : clamp(2rem, 10vw, 5rem);
}


iframe {
    margin:0;
    padding:0;
    border:none;
    overflow:hidden;
}

/* The navigation bar */
.navbar-white {
    overflow: hidden;
    /*導覽列底色*/
    background-color: rgba(255, 255, 255, 1.0);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 86%; /* Full width */
    height: 80px;
    z-index: 2000;
    padding-left: 7%;
    padding-right: 7%;
    display: flex;
    justify-content: flex-end
}

/* The navigation bar */
.navbar-alpha {
    overflow: hidden;
    /*導覽列底色*/
    background-color: rgba(46, 46, 46, 0.3);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    height: 80px;
    z-index: 2000;
}

/* The navigation bar */
.navbar {
    overflow: hidden;
    /*導覽列底色*/
    background-color: #FFFFFF;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    height: 80px;
    z-index: 2000;
}

#wrapper {
    width: 100%; /*網頁框架寬度*/
    margin: auto; /*左右置中*/

    background-color: #F7F7F7;
}

#wrapper_white {
    width: 100%; /*網頁框架寬度*/
    height: 100%;
    margin: auto; /*左右置中*/

    background-color: #ffffff;
}

#wrapper_white_half {
    width: 45%; /*網頁框架寬度*/
    height: 100%;
    overflow:hidden;
    margin: auto; /*左右置中*/
    z-index: 3000;
    background-color: #f5f5f5;
}

.menulist_item {
    /*將導覽列橫向顯示*/
    float: left;
    font-size: 17px;
    padding-left: 5px;
    padding-right: 10px;
}

.menulist_txt {
    /*將導覽列橫向顯示*/
    float: left;
    color: #000000;
}

.menulist_txt:hover {

    /*將導覽列橫向顯示*/
    height: 100%;
    float: left;
	font-size: 17px;
	top: 1px;
	left: 1px;
    color: #FF3030;
    background-image: linear-gradient(
            to top,
            #FF3030,
            #FF3030 15%,
            rgba(0,0,0,0) 15%,
            rgba(0,0,0,0) 85%,
            rgba(0,0,0,0) 85%
    );
}

.menulist_txt_selected {
    /*將導覽列橫向顯示*/
    height: 100%;
    float: left;
    color: #F07720;
    background-image: linear-gradient(
            to top,
            #F07720,
            #F07720 15%,
            rgba(0,0,0,0) 15%,
            rgba(0,0,0,0) 85%,
            rgba(0,0,0,0) 85%
    );
}

.side_menulist_txt {
    /*將導覽列橫向顯示*/
    float: left;
    margin-left: 24%;
    padding-left: 4%;
    font-size: 20px;
    line-height: 28px;
}

.side_menulist_txt2 {
    /*將導覽列橫向顯示*/
     float: left;
    margin-left: 24%;
    padding-left: 8%;
    font-size: 20px;
    line-height: 28px;
}

.side_menulist_txt3 {
    /*將導覽列橫向顯示*/
     float: left;
    margin-left: 24%;
    padding-left: 12%;
    font-size: 16px;
    line-height: 24px;
}

.side_menulist_txt:hover {
    /*將導覽列橫向顯示*/
    float: left;
	color: #F07720;
    margin-left: 25%;
    padding-left: 4%;
    font-size: 20px;
    line-height: 28px;
    background-image: linear-gradient(
            to right,
            #FF3030,
            #FF3030 5%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.side_menulist_txt2:hover {
    /*將導覽列橫向顯示*/
	float: left;
	color: #FF3F20;
    margin-left: 25%;
    padding-left: 8%;
    font-size: 20px;
    line-height: 28px;
    background-image: linear-gradient(
            to top,
            #FF3F20,
            #FFFFFF 10%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.side_menulist_txt3:hover {
    /*將導覽列橫向顯示*/
	float: left;
	color: #FF3F20;
    margin-left: 25%;
    padding-left: 12%;
    font-size: 16px;
    line-height: 24px;
    background-image: linear-gradient(
            to top,
            #FF3F20,
            #FFFFFF 10%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.side_menulist_txt_selected {
    /*將導覽列橫向顯示*/
    float: left;
    margin-left: 24%;
    padding-left: 4%;
    font-size: 20px;
    line-height: 28px;
    background-image: linear-gradient(
            to right,
            #F07720,
            #F07720 5%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.side_menulist_txt2_selected {
    /*將導覽列橫向顯示*/
    float: left;
    margin-left: 24%;
    padding-left: 8%;
    font-size: 20px;
    line-height: 28px;
    text-decoration:underline;
}

.side_menulist_txt3_selected {
    /*將導覽列橫向顯示*/
    float: left;
    margin-left: 24%;
    padding-left: 12%;
    font-size: 16px;
    line-height: 24px;
    text-decoration:underline;
}

.side_menulist_txt_dark_selected {
    /*將導覽列橫向顯示*/
    float: left;
    margin-left: 28%;
    padding-left: 5%;
    font-size: 20px;
    line-height: 28px;
    background-image: linear-gradient(
            to right,
            #F07720,
            #F07720 5%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}


ul, li {
    /*將ul,li的項目標籤去除*/
    list-style-type: none;
}


/*測試藍色系*/

#menulist1 {
    /*導覽列底色*/
    /*background-color:#2E2E2E;*/
    padding-left: 200px;
    height: 88px;

    /*陰影*/
    /*box-shadow:0px 3px 3px #BCBCBC;*/

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom, #FFFFFF 60%, #195EC8 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom, #FFFFFF 60%, #195EC8 100%);

    /* Opera */
    background-image: -o-linear-gradient(bottom, #FFFFFF 60%, #195EC8 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, #FFFFFF), color-stop(1, #195EC8));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 60%, #195EC8 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top, #FFFFFF 60%, #195EC8 100%);

    background-repeat: no-repeat;


}


#menulist1 ul li a {
    /*導覽列選項超連結*/
    font-family: Arial;
    font-weight: bold;
    display: block;
    height: 50px;
    /*color:#D5D5D5;*/
    color: #393939;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 35px;
    font-size: medium;

}


#menulist1 ul li a:hover {
    font-weight: bolder;
    color: #2E3192;
    height: 48px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #1B1464;
    -webkit-transition: all 0.25s linear 0.01s;
    -moz-transition: all 0.25s linear 0.01s;
    -ms-transition: all 0.25s linear 0.01s;
    -o-transition: all 0.25s linear 0.01s;
    transition: all 0.25s linear 0.01s;
}

#menulist1 li:hover {
    /*background-color:#1F1F1F;*/
    /*background-color:#303030;*/
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 60%, #195EC8 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 60%, #195EC8 100%);

    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 60%, #195EC8 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #FFFFFF), color-stop(1, #195EC8));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 60%, #195EC8 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 60%, #195EC8 100%);

}

/*測試藍色系end*/


/*測試藍色系*/

#menulist2 {
    /*導覽列底色*/
    /*background-color:#2E2E2E;*/
    padding-left: 200px;
    height: 88px;

    /*陰影*/
    /*box-shadow:0px 3px 3px #BCBCBC;*/

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Opera */
    background-image: -o-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, #FFFFFF), color-stop(1, #2B53A4));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top, #FFFFFF 60%, #2B53A4 100%);

    background-repeat: no-repeat;


}


#menulist2 ul li a {
    /*導覽列選項超連結*/
    font-family: Arial;
    font-weight: bold;
    display: block;
    height: 50px;
    /*color:#D5D5D5;*/
    color: #393939;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 35px;
    font-size: medium;

}


#menulist2 ul li a:hover {
    font-weight: bolder;
    color: #2E3192;
    height: 48px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #1B1464;
    -webkit-transition: all 0.25s linear 0.01s;
    -moz-transition: all 0.25s linear 0.01s;
    -ms-transition: all 0.25s linear 0.01s;
    -o-transition: all 0.25s linear 0.01s;
    transition: all 0.25s linear 0.01s;
}

#menulist2 li:hover {
    /*background-color:#1F1F1F;*/
    /*background-color:#303030;*/
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #FFFFFF), color-stop(1, #2B53A4));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 60%, #2B53A4 100%);

}

/*測試藍色系end*/


/*測試藍色系*/

#menulist3 {
    /*導覽列底色*/
    /*background-color:#2E2E2E;*/
    padding-left: 200px;
    height: 88px;

    /*陰影*/
    /*box-shadow:0px 3px 3px #BCBCBC;*/

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Opera */
    background-image: -o-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, #FFFFFF), color-stop(1, #2B53A4));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 60%, #2B53A4 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top, #FFFFFF 60%, #2B53A4 100%);

    background-repeat: no-repeat;


}


#menulist3 ul li a {
    /*導覽列選項超連結*/
    font-family: Arial;
    font-weight: bold;
    display: block;
    height: 50px;
    /*color:#D5D5D5;*/
    color: #393939;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 35px;
    font-size: medium;

}


#menulist3 ul li a:hover {
    font-weight: bolder;
    color: #2E3192;
    height: 48px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #1B1464;
    -webkit-transition: all 0.25s linear 0.01s;
    -moz-transition: all 0.25s linear 0.01s;
    -ms-transition: all 0.25s linear 0.01s;
    -o-transition: all 0.25s linear 0.01s;
    transition: all 0.25s linear 0.01s;
}

#menulist3 li:hover {
    /*background-color:#1F1F1F;*/
    /*background-color:#303030;*/
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #FFFFFF), color-stop(1, #2B53A4));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 60%, #2B53A4 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 60%, #2B53A4 100%);

}

/*測試藍色系end*/
#menulist {
    width: auto;
    padding-right: 7%;
    height: 80px;
    float: right;

    background-repeat: no-repeat;
}

#menulist li {
    /*導覽列框線*/
    /*	border-right:#D5D5D5 1px dotted;*/
}

#menulist_aboutopt {
    /*導覽列框線*/
    /*	border-left:#D5D5D5 1px dotted;*/
}

@font-face {
    /*font-family:myfont;*/
    /*src:url(../font/myfont.ttf);*/
}

#menulist ul li a {
    /*導覽列選項超連結*/
    font-family: Arial;
    font-weight: bold;
    display: block;
    height: 50px;
    /*color:#D5D5D5;*/
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 8px;
    padding-top: 35px;
    font-size: medium;
}


#menulist ul li a:hover {
    font-weight: bolder;
    color: #f93;
    height: 48px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #F00;
    -webkit-transition: all 0.25s linear 0.01s;
    -moz-transition: all 0.25s linear 0.01s;
    -ms-transition: all 0.25s linear 0.01s;
    -o-transition: all 0.25s linear 0.01s;
    transition: all 0.25s linear 0.01s;
}

#menu_he span:hover {
    color: #f08300;
}

#logo {
    /*以圖片代替網頁主標題optimax*/
    display: block;
    background-image: url(../image/logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 162px;
    height: 30px;
    z-index: 1000;
    position: absolute;
    text-indent: -141px;
    overflow: hidden;
    margin-top: 30px;
    margin-left: 7%;
}

#menu_icon {
    /*以圖片代替網頁主標題optimax*/
    display: block;
    background-image: url(../image/menu_n.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 45px;
    height: 45px;
    z-index: 1000;
    /*position: absolute;*/
    text-indent: -141px;
    overflow: hidden;
    margin-top: 23px;
    float: right;
    margin-right: 7%;
}

#menu_back {
    /*以圖片代替網頁主標題optimax*/
    display: block;
    background-image: url(../image/close_n.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 45px;
    height: 45px;
    z-index: 1000;
    position: absolute;
    text-indent: -141px;
    overflow: hidden;
    margin-top: 23px;
    margin-left: auto;
    margin-right: 32px;
}

/*右上首頁導覽列連結*/
#menulist_chinese {
    border-right: 1px #000000 solid;
    padding-right: 10px;
    float: left;
}

#menulist_english {
    float: left;
    margin-left: 10px;
}

#menu_he {
    float: right;
    margin-top: -75px;
    margin-right: 15px;

}

.menulist_he span {
    color: #000;

}

#news {
    /*position: absolute;*/
}

/*最新消息
#news
{	
    display:block;
	background-image:url(../image/news.png);
	background-repeat:no-repeat;
	width:355px;
	height:144px;
	z-index:1000;
	overflow:hidden;
	margin-left:10px;
	float:left;
	clear:both;
	text-align:left;
	padding-top:25px;
	color:#4B4B4B;
	line-height:22px;
}
*/
#newscontent {
    border: #000 1px solid;
    width: 355px;
    height: 144px;
}

/*圖片播放區*/
#photo {


    display: block;
    background-image: url(../image/image-1.gif);
    background-repeat: no-repeat;
    width: 501px;
    height: 136px;
    z-index: 1000;
    text-indent: -141px;
    overflow: hidden;
    margin-top: 30px;
    margin-left: 390px;


    /*position:absolute;*/


    /*border:#000 1px solid;
    width:501px;
    height:136px;
    display:block;
    background-image:url(../image/image-1.gif);
    background-repeat:no-repeat;
    z-index:1000;
    text-indent:-141px;
    overflow:hidden;
    float:left;
    margin-top:150px;
    margin-left:-380px;
    */
}


/*力特價值觀*/
#optivalue {

    display: block;
    background-image: url(../image/OPTIvalue.jpg);
    background-repeat: no-repeat;
    width: 901px;
    height: 100px;
    margin-top: 15px;
    text-indent: -141px;
    overflow: hidden;
    float: left;
    z-index: 1000;

    /*border:#000 1px solid;
    width:901px;
    height:100px;
    display:block;
    background-image:url(../image/OPTIvalue.jpg);
    background-repeat:no-repeat;
    float:left;
        position:relative;
        */

}


#optivalue1 {
    /*
    display:block;
    background-image:url(../image/OPTIvalue.jpg);
    background-repeat:no-repeat;
    width:901px;
    height:100px;
    margin-top:15px;
    text-indent:-141px;
    overflow:hidden;
    float:left;
    z-index:1000;
    */


    width: 291px;
    height: 253px;
    display: block;
    background-image: url(../image/OPTIvalue1.jpg);
    background-repeat: no-repeat;
    float: left;
    position: relative;
    margin-left: 107px;
    z-index: 1000;
    margin-top: 35px;
    text-indent: -800px;
}

#photo1 {

    /*
        display:block;
        background-image:url(../image/image-1.gif);
        background-repeat:no-repeat;
        width:501px;
        height:136px;
        z-index:1000;
        text-indent:-141px;
        overflow:hidden;
        margin-top:9px;
        margin-left:30px;
        float:left;
    */


    width: 501px;
    height: 136px;
    display: block;
    background-image: url(../image/image-1.gif);
    background-repeat: no-repeat;
    z-index: 1000;
    text-indent: -141px;
    overflow: hidden;
    float: left;
    margin-top: 150px;
    margin-left: -380px;

}


.sb-description {
    visibility: hidden;
}

footer {
    /*padding-top:60px;*/
    /*position: relative;*/
    /*background-image: url(../image/logo-2.jpg);*/
    /*background-repeat: no-repeat;*/
    /*background-position: left bottom;*/
    /*width: 1350px;*/
	width:100%;
    height: 30px;
    /*float: right;*/
    /*margin-top: 40px;*/
    font-size: smaller;
    /*text-align: center;*/
}

/*尾頁*/
#aboutoptfooter {
    /*padding-top:60px;*/
    position: absolute;
    background-image: url(../image/logo-2.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 900px;
    height: 40px;
    float: right;
    margin-top: 40px;
    font-size: smaller;
    text-align: center;
}

#aboutoptfooter p {
    padding-top: 5px;
    padding-left: 70px;
    margin-bottom: 5px;
}

#pageend {
    margin-left: -270px;

}

#aboutoptfooter span#address {

}

#aboutoptfooter span#tel {

}

#aboutoptfooter span#fax {

}

footer p {
    padding-top: 5px;
    padding-left: 70px;
    margin-bottom: 5px;
}

footer span#address {
    margin-left: 55px;
    padding-bottom: 20px;
}

footer span#tel {
    margin-left: 50px;
}

footer span#fax {
    margin-left: 60px;
}


#productinfimg {
    width: 800px;
    height: 98px;
}


.productinf_txt {
    color: #000;
    font-size: larger;
    font-family: Arial;
    /*	border-bottom:#000 3px solid;*/
    padding-right: 800px;
    padding-bottom: 10px;
    margin-left: 10px;
}

.productinf_itemtxt {
    color: #000;
    font-size: 15px;
    border-width: 2px;
    /* border-bottom-style:solid;*/
    /*border-color:#EF8003;*/
    padding-right: 100px;

}

iframe {
    width: 1000px;
    height: 1000px;
    /*20140306*/
    margin-left: -80px;
}

#Dyetype_tab {
    display: none;
}

#Precisioncoating_tab {
    display: none;
}

#Iodinetype_tab {
    display: none;
}

.div_base {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
	/*width: 100%;
	max-width:1350px;*/
    background: #FFFFFF;
    /*padding-top: 46px;*/
}

.div_footer {
	width: 100%;
	max-width:1350px;
    background: #F7F7F7;
}

.left_tab_div_dark {
    width: 25%;
    float: left;
    background: #1F1E1E;
    color: white;
    text-align: center;
    padding-top: 64px;
}

.right_tab_div_dark {
    margin-left: 25%;
    background: #1F1E1E;
    color: white;
    padding-top: 64px;
    padding-right: 7%;
}

.left_tab_div_light {
    width: 25%;
    float: left;
    background: #F7F7F7;
    color: white;
    text-align: center;
    padding-top: 64px;
}

.right_tab_div_light {
    margin-left: 25%;
    background: #F7F7F7;
    color: white;
    padding-top: 64px;
    padding-right: 7%;
}

.div_light_1_of_4 {
    width: 25%;
    float: left;
    background: #F7F7F7;
    color: white;
}

.div_light_1_of_3 {
    width: 33%;
    float: left;
    background: #F7F7F7;
    color: white;
}

.div_light_2_of_3 {
    width: 66%;
    float: left;
    background: #F7F7F7;
    color: white;
}

.div_light_3_of_3 {
    width: 100%;
    float: left;
    background: #F7F7F7;
    color: white;
}

.div_light_1_of_2 {
    width: 50%;
    float: left;
    background: #F7F7F7;
    color: white;
    padding-right: 10px;
}

.div_light_1_of_1 {
    width: 100%;
    float: left;
    background: #F7F7F7;
    color: white;
}

.div_white_round_corner {
    /*width: 400px;
    height: 570px;*/
    float: left;
    background: #FFFFFF;
    color: #000000;
    border-radius: 12px;
    padding: 20px;
	width: 100%; 
	
}

.div_white_round_corner2 {
    /*width: 23%;*/
    height: 230px;
    float: left;
    background: #EFEFEF;
    color: #000000;
    border-radius: 12px;
    padding: 10px;
    /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
    transition: 0.3s;
    transform: translateY(0px);
    box-shadow: 7px 10px 10px rgba(0, 0, 0, 0.7);
}

.div_white_round_corner2:hover {
	/*text-shadow: 0 0 20px orange*/
    /*transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);*/
	box-shadow: 0 0 3px rgba(0, 0, 0, 1);
	transform: translateY(5px);
}


.div_white_round_corner_1_of_1 {
    width: 94%;
    height: 270px;
    float: left;
    background: #FFFFFF;
    color: #000000;
    border-radius: 12px;
    padding: 3%;
}

.productinf_content {
    /*float:left;*/
    /*clear:both;*/
    /*margin-top:30px;*/
    color: #141414;
    line-height: 20px;
    /*margin-bottom: 15px;*/
}

.policy_content {
    /*float:left;*/
    /*clear:both;*/
    /*margin-top:30px;*/
    color: #141414;
    line-height: 20px;
    margin-bottom: 15px;
}

.investor_intro {
    margin-top: 130px;
    width: 283px;
    height: 420px;
    background-image: url(../image/investor.png);
    clear: both;
    position: absolute;
}

.investor_content {
    /*float:left;*/
    /*clear:both;*/
    /*margin-top:30px;*/
    color: #141414;
    line-height: 20px;
    margin-bottom: 15px;
}

.careers_content {
    /*float:left;*/
    /*clear:both;*/
    /*margin-top:30px;*/
    color: #141414;
    line-height: 20px;
    margin-bottom: 15px;
}

.Contact_content {
    /*float:left;*/
    /*clear:both;*/
    /*margin-top:30px;*/
    color: #141414;
    line-height: 20px;
    margin-bottom: 15px;
}

.pg_h {
    height: 300px;
}

/*法說會*/
.tb1 {

    width: 600px;
    margin-top: 21px;
}

.tb1 td, th {
    border: 1px solid rgb(211, 207, 207);
    padding: 5px;
}

.tb1 th {
    background-color: rgba(167, 166, 166, 0.911);
    color: #fff;
    font-weight: 800;
}

/*其他表格*/
.tb2 {
    width: 100%;
    margin-top: 21px;
}

.tb2 td, th {
    border: 1px solid rgb(211, 207, 207);
    padding: 5px;
}

.tb2 th {
    background-color: rgba(167, 166, 166, 0.911);
    color: #fff;
    font-weight: 800;
}

.opt_title {
    color: #F07720;
    font-size: 20px;
    line-height: 28px;
}

.opt_subtitle {
    color: #6E6C6C;
    font-size: 20px;
    line-height: 28px;
}

.opt_content_dark {
    color: #141414;
    font-size: 16px;
    line-height: 24px;
}

.opt_content_white {
    color: white;
    font-size: 16px;
    line-height: 24px;
}

.opt_link {
    color: #3750F0;
    font-size: 20px;
    line-height: 28px;
}

.menu_title {
    width: 100%;
    height: 55px;
    color: #000000;
    font-size: 16px;
    line-height: 20px;
    padding: 17px;
}

.menu_title_selected {
    width: 100%;
    height: 55px;
    color: #000000;
    font-size: 16px;
    line-height: 20px;
    padding: 17px;
    background-image: linear-gradient(
            to right,
            #F07720,
            #F07720 5%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.menu_subtitle {
    width: 100%;
    height: 55px;
    color: #6E6C6C;
    font-size: 14px;
    line-height: 20px;
    padding-left: 40px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.menu_subtitle_selected {
    width: 100%;
    height: 55px;
    color: #6E6C6C;
    font-size: 14px;
    line-height: 20px;
    padding-left: 40px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    background-image: linear-gradient(
            to right,
            #F07720,
            #F07720 5%,
            rgba(0,0,0,0) 5%,
            rgba(0,0,0,0) 95%,
            rgba(0,0,0,0) 95%
    );
}

.top_tab_div_dark {
    width: 86%;
    float: left;
    background: #1F1E1E;
    color: white;
    text-align: center;
    padding-left: 7%;
    padding-top: 24px;
    padding-right: 7%;
    padding-bottom: 24px;
    overflow: scroll;
}

.bottom_tab_div_dark {
    width: 86%;
    margin-top: 32px;
    background: #1F1E1E;
    color: white;
    padding-left: 7%;
    padding-top: 64px;
    padding-right: 7%;
    padding-bottom: 16px;
}

.top_tab_div_light {
    width: 100%;
    float: left;
    background: #FFFFFF;
    color: white;
    text-align: center;
    padding-left: 4%;
    padding-top: 18px;
    padding-right: 4%;
    padding-bottom: 18px;
    overflow: scroll;
    overflow-y: hidden; /* Hide vertical scrollbar *//
}

.top_tab_div_light-inner {
	font-weight: bold;
    /*width: 400px;
    float: left*/
}

.bottom_tab_div_light {
    width: 100%;
    margin-top: 12px;
    background: #F7F7F7;
    color: white;
    padding-left: 7%;
    padding-top: 54px;
    padding-right: 7%;
    padding-bottom: 64px;
}

.bottom_tab_div_light2 {
    width: 100%;
    margin-top: 4px;
    background: #F7F7F7;
    
}

.top_menulist_txt {
    /*將導覽列橫向顯示*/
    float: left;
    padding-right: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #2E2D2D;
}

.top_menulist_txt_light {
    /*將導覽列橫向顯示*/
    float: left;
    padding-right: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

.top_menulist_txt_selected {
    /*將導覽列橫向顯示*/
    float: left;
    padding-right: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #F07720;
}

.center-cropped {
    /*width: 100%;
    height: 300px;
    object-fit: cover;*/
    /*object-fit: none; !* Do not scale the image *!*/
    /*object-position: center; !* Center the image within the element *!*/
}

.center-cropped-mobile {
    width: 100%;
    height: 250px;
    object-fit: cover;
    /*object-fit: none; !* Do not scale the image *!*/
    /*object-position: center; !* Center the image within the element *!*/
}

.center-cropped-mobile0 {
    width: 100%;
    height: 220px;
    object-fit: cover;
    /*object-fit: none; !* Do not scale the image *!*/
    /*object-position: center; !* Center the image within the element *!*/
}
 @media (min-width: 768px) and (max-width: 1200px) {
      .center-cropped-mobile0 {
    width: 100%;
    height: 250px;
    object-fit: cover;
      }
    }
    @media (min-width: 1200px) {
      .center-cropped-mobile0 {
    width: 100%;
    height: auto;
    /*object-fit: cover;*/
      }
    }


#transmissivetype
{

    width:304px;
    height:161px;
    /*float:right;*/
    /*margin-left:440px;*/
    margin-top:55px;
    background-repeat:no-repeat;
}
#transflectivetype
{

    width:302px;
    height:200px;
    /*float:right;*/
    /*margin-left:440px;*/
    margin-top:55px;
    background-repeat:no-repeat;

}
#reflectivetype
{

    width:304px;
    height:200px;
    /*float:right;*/
    /*margin-left:440px;*/
    margin-top:55px;
    background-repeat:no-repeat;
}


#pva
{

    width:295px;
    height:123px;
    /*float:right;*/
    /*margin-right:150px;*/
    /*margin-top:-300px;*/
    background-repeat:no-repeat;
}
#tac
{

    width:301px;
    height:186px;
    /*margin-left:470px;*/
    /*clear:both;*/
    margin-top:55px;
    background-repeat:no-repeat;
}

.scrollable{
    width: 100%;
    height: 280px;
    overflow-y:auto;
    float:left;
    display:inline-block;
}

.category_img{
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.category_title{
    width: 100%;
    /*height: 80px;*/
    color: white;
    /*height: 80px;*/
    background-color: #F5A02B;
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 44px;
    /* identical to box height */
    /*display: flex;*/
    align-items: center;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.btn {
    position: relative;
    color: #111111;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 14px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	line-height: 34px;
}
.btn:before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #FACEAE;
    width: 86px;
    height: 34px;
    transition: all 0.2s ease;
}
.btn span {
    position: relative;
    z-index: 1;
}
.btn svg {
    position: relative;
    top: 0;
    margin-left: 13px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111111;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}
.btn:hover:before {
    width: 100%;
    background: #FACEAE;
}
.btn:hover svg {
    transform: translateX(0);
}
.btn:hover,
.btn:focus {
    color: #111111;
}
.btn:active {
    color: #111111;
    transform: scale(0.96);
}

#news_div {
    width: 100%;
    background-image: linear-gradient(
            to right,
            #e1e1e1,
            #e1e1e1 2px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 99%,
            rgba(0,0,0,0) 99%
    );
}

html{
      font-size: 16px;
    }
    .rwdtxt {
      font-size: 1.8rem;
      /*color:green;*/
    }
    @media (min-width: 768px) and (max-width: 1200px) {
       .rwdtxt {
		font-size: 2rem;
        /*
		font-size: 1.5rem;
		font-size: calc(1.5rem + (1.3-1.2) * ((100vw - 768px) / (1200 - 768)));
        color:blue;*/
      }
    }
    @media (min-width: 1200px) {
      .rwdtxt {
        font-size: 2.2rem;
        /*color:red;*/
      }
    }