@charset "utf-8";
div.loading            {position: fixed; width: 100%; height: 100%; left: 0px; top: 0px;}
div.main_loading       {position: fixed; width: 100%; height: 100%; min-height: 600px; left: 0px; top: 0px; display: none;}
div.loadingBg          {position: absolute; width: 200%; height: 200%; left: 0px; top: 0px; background: #191919;}
div#loadingPic         {position: absolute; width: 100px; height: 100px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
div#loadingPic img     {position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
html                   {width: 100%; height: 100%;}
body                   {width: 100%; height: 100%; font-size: 100%; -webkit-text-size-adjust: 100%; min-height: 600px; text-align: center;}
.pc                    {position: relative; min-width: 980px;}
body *                 {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.verticle_center       {position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; display: table;}
.verticle_center p     {display: table-cell; vertical-align: middle; text-align: center; word-break: break-all;}
.poz_center            {position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.full                  {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;}
.opacity_0             {opacity: 0; filter: alpha(opacity = 0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.clear_both            {clear: both;}
#main_nav            {position: relative; display: block; width: 100%; height: 0px; left: 0px; top: 0px; background: #191919; overflow: hidden;}
#main_nav_ul         {position: relative; width: 320px; height: auto; left: 0px; top: 0px; overflow: hidden; margin: 0px auto; padding: 150px 0px 0px 0px;}
.main_nav_li         {position: relative; display: block; width: 100%; height: 80px; left: 0px; top: 0px; cursor: pointer;}
.main_nav_li p       {font-family: avgr65w,'微軟正黑體'; font-size: 36px; color: #616161;
-webkit-transition: color 1s; 
   -moz-transition: color 1s; 
    -ms-transition: color 1s; 
        transition: color 1s;}
/*.m .main_nav_li      {height: 40px;}*/
/*.m .main_nav_li p    {font-size: 18px;}*/
.main_nav_li .verticle_center{position: relative;}
.main_nav_li_active p  {color: #fff;}
.pc .main_nav_li.can_hover:hover p{color: #fff;}
.load_done .section_loading{opacity: 0; filter: alpha(opacity = 0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.main_nav_li:last-child{margin: 0px 0px 100px 0px;}
#main_content          {position: absolute; width: 100%; height: 100%; min-height: 600px; left: 0px; top: 0px; overflow: hidden;}
.pc #main_content      {min-width: 980px;}
.main_section          {position: relative; width: 100%; left: 0px; top: 0px; overflow: hidden; background: #191919;}
.main_section img.inline_block{display: inline-block;}
.main_section_in       {opacity: 0; filter: alpha(opacity = 0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.main_section:last-child .main_section_in{background: #191919;}  
.dark.main_section     {background: #191919;}
.light.main_section    {background: #fff;}
.dark.main_section_in  {background: #191919;}
.light.main_section_in {background: #fff;}

#main_content.slick-slider{margin: 0px;}

#main_content .slick-dots{bottom: -25px;}
.slick-active.main_section .main_section_in{opacity: 1; filter: alpha(opacity = 100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: all 1s; 
   -moz-transition: all 1s; 
    -ms-transition: all 1s; 
        transition: all 1s;}
.slick-vertical .slick-slide{border: none;}
.section_loading       {width: 120px; height: 120px; /*background: url('../images/ajax-loader.gif');*/background: url('../images/ring.svg'); background-size: 100%; background-repeat: no-repeat;
-webkit-transition: all 1s; 
   -moz-transition: all 1s; 
    -ms-transition: all 1s; 
        transition: all 1s;}
.main_section_0 .section_loading{opacity: 0; filter: alpha(opacity = 0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.bg_outframe img       {position: absolute; display: block; left: 50%; top: 50%;}

/*@media screen and (min-width: 0px) and (max-width: 1200px) and (min-height: 0px) and (max-height: 600px){
.bg_outframe           {position: absolute; width: 200%; height: 100%; left: -50%; top: 0%;}
.bg_outframe img       {position: relative; display: block; width: auto; height: 100%; margin: 0px auto;}
}
@media screen and (min-width: 1201px) and (min-height: 0px) and (max-height: 600px){
.bg_outframe           {position: absolute; width: 100%; height: 200%; left: 0%; top: -50%;}
.bg_outframe img       {position: absolute; display: block; width: 100%; height: auto; top: 0px; bottom: 0px; margin: auto;}
}
@media screen and (min-width: 0px) and (max-width: 1200px) and (min-height: 601px){
.bg_outframe           {position: absolute; width: 3000px; height: 100%; left: 50%; top: 0%; margin: 0px 0px 0px -1500px;}
.bg_outframe img       {position: relative; display: block; width: auto; height: 100%; margin: 0px auto;}
}
@media screen and (min-width: 1201px) and (min-height: 601px){
.bg_outframe           {position: absolute; width: 3000px; height: 100%; left: 50%; top: 0%; margin: 0px 0px 0px -1500px;}
.bg_outframe img       {position: relative; display: block; width: auto; height: 100%; margin: 0px auto;}
}*/

#logo                  {position: absolute; width: 90px; height: 44px; left: 50px; top: 43px; background: url('../images/logo.png'); background-size: 90px 44px; background-repeat: no-repeat;}
.m #logo               {position: absolute; width: 125px; height: 62px; left: 44px; top: 34px; background: url('../images/logo.png'); background-size: 100%; background-repeat: no-repeat;}

#copyright             {position: absolute; width: 209px; height: 11px; left: 50px; bottom: 48px; background: url('../images/copyright.png'); background-size: 209px 11px; background-repeat: no-repeat;}
/*.m #copyright          {width: 104px; height: 5px; left: 20px; bottom: 20px; background: url('../images/copyright.png'); background-size: 104px; background-repeat: no-repeat;}*/
@font-face {
    font-family: avgr45w;
    src: url('../font/avgr45w.ttf');
}
@font-face {
    font-family: avgr65w;
    src: url('../font/avgr65w.ttf');
}
@font-face {
    font-family: AVGARDN;
    src: url('../font/AVGARDN.TTF');
}
@font-face {
    font-family: avgardd;
    src: url('../font/avgardd.ttf');
}
.info_box              {position: absolute; width: 600px; height: 300px; right: 157px; top: 50%; margin: -150px 0px 0px 0px;}
.m .info_box           {top: 142px; margin: 0px;}
.info_box p            {text-align: right;}
.m .info_box p         {vertical-align: top;}
.offiname              {font-family: avgardd,'微軟正黑體'; font-size: 36px; line-height: 1.111; letter-spacing: 2px;}
.engdescribe           {font-family: AVGARDN,'微軟正黑體'; font-size: 24px; line-height: 1.375; letter-spacing: 2px;}
.chtdescribe           {font-family: AVGARDN,'微軟正黑體'; font-size: 18px; line-height: 1.6; letter-spacing: 2px;}

/*.m .offiname           {font-size: 28px; letter-spacing: 1px;}
.m .engdescribe        {font-size: 15px; letter-spacing: 1px;}
.m .chtdescribe        {font-size: 12px; letter-spacing: 1px;}*/


.dark .offiname        {color: #fff;}
.dark .engdescribe     {color: #666;}
.dark .chtdescribe     {color: #666;}

.light .offiname       {color: #000;}
.light .engdescribe    {color: #666;}
.light .chtdescribe    {color: #666;}

.m .dark .offiname        {background-color: #000;}
.m .dark .engdescribe     {background-color: #000;}
.m .dark .chtdescribe     {background-color: #000;}

.m .light .offiname       {background-color: #fff;}
.m .light .engdescribe    {background-color: #fff;}
.m .light .chtdescribe    {background-color: #fff;}


#nav_sideline          {position: absolute; width: 1px; height: 100%; right: 117px; top: 0px; background: rgba(106,106,106,0.35); overflow: hidden;}
.m #nav_sideline       {right: 132px;}
#nav_signal            {position: absolute; width: 1px; height: 0px; background: #666666; left: 0px; top: 0px;
-webkit-transition: all 1s; 
   -moz-transition: all 1s; 
    -ms-transition: all 1s; 
        transition: all 1s;}
#menu_check            {display: none;}
#nav_label             {position: absolute; width: 28px; height: 28px; right: 45px; top: 32px; cursor: pointer;}
.m #nav_label          {width: 70px; height: 70px; right: 33px; top: 22px;}
.m #nav_label          {right: 25px; top: 20px;}
.menu_burger           {position: absolute; width: 20px; height: 2px; left: 4px; background: #666;}
.m .menu_burger        {width: 40px; height: 5px; left: 16px;}
.menu_burger_0         {top: 8px;}
.m .menu_burger_0      {top: 22px;}
.menu_burger_0{
-webkit-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
   -moz-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
    -ms-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
        transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s;}
.menu_burger_1         {top: 13px;}
.m .menu_burger_1      {top: 32px;}
.menu_burger_1{
-webkit-transition: transform 0.4s 0s,background 0.4s; 
   -moz-transition: transform 0.4s 0s,background 0.4s; 
    -ms-transition: transform 0.4s 0s,background 0.4s; 
        transition: transform 0.4s 0s,background 0.4s;}
.menu_burger_2         {top: 18px;}
.m .menu_burger_2      {top: 42px;}
.menu_burger_2{
-webkit-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
   -moz-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
    -ms-transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s; 
        transition: top 0.4s 0.4s,transform 0.4s 0s,background 0.4s;}
#menu_check:checked ~ #nav_label .menu_burger_0{top: 48%; box-shadow: 0px 0px 0px #000;
-webkit-transform: rotateZ(225deg);
   -moz-transform: rotateZ(225deg);
    -ms-transform: rotateZ(225deg);
        transform: rotateZ(225deg);}
#menu_check:checked ~ #nav_label .menu_burger_0{
-webkit-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
   -moz-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
    -ms-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
        transition: top 0.4s,transform 0.4s 0.4s,background 0.4s;}
#menu_check:checked ~ #nav_label .menu_burger_1{box-shadow: 0px 0px 0px #000;
-webkit-transform: rotateZ(225deg);
   -moz-transform: rotateZ(225deg);
    -ms-transform: rotateZ(225deg);
        transform: rotateZ(225deg);}
#menu_check:checked ~ #nav_label .menu_burger_1{
-webkit-transition: transform 0.4s 0.4s,background 0.4s; 
   -moz-transition: transform 0.4s 0.4s,background 0.4s; 
    -ms-transition: transform 0.4s 0.4s,background 0.4s; 
        transition: transform 0.4s 0.4s,background 0.4s;}
#menu_check:checked ~ #nav_label .menu_burger_2{top: 48%; box-shadow: 0px 0px 0px #000;
-webkit-transform: rotateZ(315deg);
   -moz-transform: rotateZ(315deg);
    -ms-transform: rotateZ(315deg);
        transform: rotateZ(315deg);}
#menu_check:checked ~ #nav_label .menu_burger_2{
-webkit-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
   -moz-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
    -ms-transition: top 0.4s,transform 0.4s 0.4s,background 0.4s; 
        transition: top 0.4s,transform 0.4s 0.4s,background 0.4s;}
#menu_check:checked ~ #main_nav .nav_content{display: block;}
#menu_check:checked ~ #main_nav             {height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;}
#menu_check:checked ~ #main_nav #nav_open_bg{display: block;}
#flaginfo           {position: absolute; width: 800px; height: 200px; left: 36.6%; top: 50%; margin: -100px 0px 0px -400px;}
.m #flaginfo        {left: 50%;}
.flaginfo_l         {position: relative; width: 400px; height: auto; float: left; left: 0px; top: 0px; text-align: right; text-indent: 20px; font-family: avgardd,'微軟正黑體'; font-size: 24px; line-height: 1.111; letter-spacing: 2px; color: #fff; font-weight: bold;}
/*.m .flaginfo_l      {font-size: 13px; line-height: 1.6; text-indent: 10px; letter-spacing: 1px;}*/
.flaginfo_l:first-child{font-size: 36px; height: 40px; line-height: 1.111;}
/*.m .flaginfo_l:first-child{font-size: 17px; height: 30px;}*/
.flaginfo_r         {position: relative; width: 400px; height: auto; float: left; left: 0px; top: 0px; text-align: left; text-indent: 20px; font-family: AVGARDN,'微軟正黑體'; font-size: 24px; line-height: 1.111; letter-spacing: 2px; color: #fff; opacity: 0.36; filter: alpha(opacity = 36); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=36)"; margin: 0px 0px 8px 0px;}
/*.m .flaginfo_r      {font-size: 13px; line-height: 1.6; text-indent: 10px; letter-spacing: 1px;}*/
.flaginfo_r:nth-child(2){font-size: 30px; height: 40px; vertical-align: text-bottom; margin: 7px 0px 11px 0px;}
/*.m .flaginfo_r:nth-child(2){font-size: 16px; height: 29px; margin: 1px 0px 0px 0px; line-height: 1.111;}*/
/*.m .info_flag       {display: none;}*/
.device_ipad        {position: relative; display: inline-block; width: 47px; height: 61px; cursor: pointer; margin: 5px 0px 0px 0px;
}
.open_demo,
.close_dem          {
-webkit-transition: all 0.5s; 
   -moz-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
        transition: all 0.5s;}
.pc .open_demo:hover{opacity: 0.5; filter: alpha(opacity = 50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}
.pc .close_demo:hover{opacity: 0.5; filter: alpha(opacity = 50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}
.device_iphone      {position: relative; display: inline-block; width: 33px; height: 61px; cursor: pointer; margin: 5px 0px 0px 0px;}
.dark .device_ipad  {background: url('../images/ipad_dark.png'); background-size: 100%; background-repeat: no-repeat;}
.dark .device_iphone{background: url('../images/iphone_dark.png'); background-size: 100%; background-repeat: no-repeat;}
.light .device_ipad {background: url('../images/ipad_light.png'); background-size: 100%; background-repeat: no-repeat;}
.light .device_iphone{background: url('../images/iphone_light.png'); background-size: 100%; background-repeat: no-repeat;}
.demo_lightbox      {display: none;}
.dark .demo_lightbox{background: #191919;}
.light .demo_lightbox{background: #fff;}
.show_demo .demo_lightbox{display: block;}
.close_demo         {position: relative; display: inline-block; width: 120px; height: 25px; cursor: pointer; display: none;}
.dark .close_demo   {background: url('../images/close_demo_dark.png'); background-size: 100%; background-repeat: no-repeat;}
.light .close_demo  {background: url('../images/close_demo_light.png'); background-size: 100%; background-repeat: no-repeat;}
.show_demo .open_demo{display: none;}
.show_demo .close_demo{display: inline-block;}
.ipad.portrait .demo_frame{position: absolute; width: 70%; max-width: 503px;/*903px*/ height: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.m .ipad.portrait .demo_frame{width: 51.63%;/*61.63*/ top: 342px;/*402*/ bottom: auto;}
.ipad.portrait .demo_frame_padding{position: relative; width: 100%; padding-bottom: 140.1993355%; margin: -70.09966775% 0% 0% 0%; background: url('../images/ipad_portrait.png'); background-size: 100%; background-repeat: no-repeat;}
.m .ipad.portrait .demo_frame_padding{margin: 0%;}
.ipad.landscape .demo_frame{position: absolute; width: 70%; max-width: 800px; height: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.m .ipad.landscape .demo_frame{width: 76.89%;/*86.89*/ top: 402px;/*462*/ bottom: auto;}
.ipad.landscape .demo_frame_padding{position: relative; width: 100%; padding-bottom: 72%; margin: -36% 0% 0% 0%; background: url('../images/ipad_landscape.png'); background-size: 100%; background-repeat: no-repeat;}
.m .ipad.landscape .demo_frame_padding{margin: 0%;}
.iphone.portrait .demo_frame{position: absolute; width: 70%; max-width: 370px; height: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.m .iphone.portrait .demo_frame{width: 32.37%;/*32.37*/ top: 382px;/*482*/ bottom: auto;}
.iphone.portrait .demo_frame_padding{position: relative; width: 100%; padding-bottom: 204.8648649%; margin: -102.4324125% 0% 0% 0%; background: url('../images/iphone_portrait.png'); background-size: 100%; background-repeat: no-repeat;}
.m .iphone.portrait .demo_frame_padding{margin: 0%;}
.iphone.landscape .demo_frame{position: absolute; width: 70%; max-width: 758px; height: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.m .iphone.landscape .demo_frame{width: 60%;/*70*/ top: 422px;/*482*/ bottom: auto;}
.iphone.landscape .demo_frame_padding{position: relative; width: 100%; padding-bottom: 48.8126649%; margin: -24.40633245% 0% 0% 0%; background: url('../images/iphone_landscape.png'); background-size: 100%; background-repeat: no-repeat;}
.m .iphone.landscape .demo_frame_padding{margin: 0%;}

/*.num_box            {position: absolute; width: 118px; height: 118px; right: 0px; top: 50%; margin: -59px 0px 0px 0px; font-family: avgardd,'微軟正黑體'; font-size: 24px; font-weight: bold;}*/
.offinum            {position: absolute; right: -123px; font-family: avgardd; font-size: 36px; line-height: 1.111; letter-spacing: 2px;}
/*.m .offinum         { font-size: 28px; letter-spacing: 1px; right: -67px;}*/
.dark .offinum      {color: #fff;}
.light .offinum     {color: #000;}

.ipad.portrait .demo_frame_in{position: absolute; width: 85.0498338%; height: 80.8846761%; left: 8.5271317%; top: 9.0047393%; margin: 0px 0px 0px 0px;}
.ipad.landscape .demo_frame_in{position: absolute; width: 81.92%; height: 85.333%; left: 8.96%; top: 6.333%; margin: 0px 0px 0px 0px;}
.iphone.portrait .demo_frame_in{position: absolute; width: 86.4864864%; height: 74.9340369%; left: 6.7567567%; top: 12.1372031%; margin: 0px 0px 0px 0px;}
.iphone.landscape .demo_frame_in{position: absolute; width: 74.9340369%; height: 86.4864864%; left: 12.1372031%; top: 6.7567567%; margin: 0px 0px 0px 0px;}
.demo_frame_in      {overflow: hidden;}
.demo_frame_list    {position: relative; left: 0px; top: 0px;
-webkit-transition: all 0.5s; 
   -moz-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
        transition: all 0.5s;}
.demo_frame_list img{position: relative; display: block; float: left;}
[run_index="0"] .demo_frame_list{left: 0%;
-webkit-transition: all 0s; 
   -moz-transition: all 0s; 
    -ms-transition: all 0s; 
        transition: all 0s;}
[run_index="1"] .demo_frame_list{left: -100%;}
[run_index="2"] .demo_frame_list{left: -200%;}
[run_index="3"] .demo_frame_list{left: -300%;}
[run_index="4"] .demo_frame_list{left: -400%;}
[run_index="5"] .demo_frame_list{left: -500%;}
[run_index="6"] .demo_frame_list{left: -600%;}
[run_index="7"] .demo_frame_list{left: -700%;}
[run_index="8"] .demo_frame_list{left: -800%;}
[run_index="9"] .demo_frame_list{left: -900%;}
[run_index="10"] .demo_frame_list{left: -1000%;}


[slider-pic-num="1"] .demo_frame_list img{width: 100%;}
[slider-pic-num="2"] .demo_frame_list img{width: 50%;}
[slider-pic-num="3"] .demo_frame_list img{width: 33.333333%;}
[slider-pic-num="4"] .demo_frame_list img{width: 25%;}
[slider-pic-num="5"] .demo_frame_list img{width: 20%;}
[slider-pic-num="6"] .demo_frame_list img{width: 16.66666667%;}
[slider-pic-num="7"] .demo_frame_list img{width: 14.28571429%;}
[slider-pic-num="8"] .demo_frame_list img{width: 12.5%;}
[slider-pic-num="9"] .demo_frame_list img{width: 11.111111%;}
[slider-pic-num="10"] .demo_frame_list img{width: 10%;}

img.qrcode           {position: relative; width: 66px; height: auto; display: inline-block; float: right; margin: -19px 0px 0px 16px;}
img.development      {position: relative; width: 47px; height: auto; display: inline-block; float: right; margin: -19px 0px 0px 16px;}
.qrcode_box          {position: absolute; width: 250px; height: 67px; right: 160px; bottom: 50px;}
.m .qrcode_box       {right: 27px; bottom: 27px;}
.qrcode_box p        {text-align: right; font-family: AVGARDN,'微軟正黑體'; font-size: 12px; line-height: 1.111; letter-spacing: 2px;}
.qrcode_box p span   {/*opacity: 0.33; filter: alpha(opacity = 33); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";*/}
.dark .qrcode_box p  {color: #fff;}
.light .qrcode_box p {color: #000;}