﻿@charset "utf-8";
/*------------------------------------------------------------------------------------------------
共用
------------------------------------------------------------------------------------------------*/
body { font-size: 12px; color: #777d84; font-family: Verdana; margin: 0px;}
a { color: #557193;text-decoration: none;}
a:hover { color: #06a4bb; text-decoration: underline; }
ul li { list-style-type: none; }
ol {margin-left:20px;}
ol li { list-style-type:decimal;}
.hideText { text-indent: -99999px; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.fL { float: left; display: block; }
.fR { float: right; display: block; }

/*font-color*/
.color_1 { color: #777D84 } /*灰色*/
.color_2 { color: #FD6509 } /*橙色*/
.color_3 { color: #A8110D } /*暗紅*/
.color_4 { color: #7381A6 } /*深藍*/
.color_5 { color: #555AA2 } /*紫藍*/
.color_6 { color: #378C9B } /*藍綠*/
.color_7 { color: #FFF } /*白色*/

.hide_text { display: block; text-indent: -9999px; }
.text_left { text-align: left; }
.text_center { text-align: left; }
.text_right { text-align: left; }

.tbstyle_1 { border: 3px solid #dedede; padding:1px; margin: 0px 0px 20px ; line-height: 18px; text-align: center; }
.tbstyle_1 table { border: 1px solid #ccc; border-width:1px 1px 0px 0px; }
.tbstyle_1 th,.tbstyle_1 td { padding: 8px 5px; border:1px solid #ccc; border-width: 0px 0px 1px 1px; }
.tbstyle_1 th { background: #7381A6; color: #D0EBFF; font-size: 15px; font-family:"微軟正黑體", Verdana; }
.tbstyle_1 td { background: #f3f3f3; }
.tbstyle_1 tr.odd td { background: #fff; }

#content .img img { background: #FFF; padding: 5px; border: 1px solid #ccc; }

/* 選取反差顏色 */
::selection { background: #099; color: #FFF; text-shadow: none; }
::-moz-selection{ background: #099; color: #FFF; text-shadow: none; }   /*  Firebox  */
/*-------------------------------------------------------------------------------------------------------------------------------------
layout
-------------------------------------------------------------------------------------------------------------------------------------*/
#wrapper { position: absolute; width: 100%; min-width: 1000px; padding-top: 45px; }
#wrap_top .bar { position: absolute; z-index: 50; left: 50%; margin-left: -475px; width: 950px; padding-top: 17px; }
#wrap_top a#logo { position: absolute; z-index: 50; left: 50%; margin-left: -128px; display: block; width: 240px; height: 173px; background: url('../images/menu/logo.png') 0 0 no-repeat;  }
#wrap_top a:hover#logo { background-position: 0 -175px; }

#wrap_main { position: absolute; z-index: 2; top: 614px; padding-top: 45px; width: 100%; background: url('../images/menu/top_bg_2.png') top center no-repeat; }
#wrap_zoom { margin: 0 auto; width: 950px; }
#wrap_zoom .margin_b { margin-bottom: 15px; }
#zoom_L, #zoom_R { float: left; width: 202px; height: auto; }
#zoom_C { float: left; margin: 0 24px; width: 498px; height: auto; }

/*-------------------------------------------------------------------------------------------------------------------------------------
menu
-------------------------------------------------------------------------------------------------------------------------------------*/
#menu_but {
	position: absolute;
	width: 100%;
	z-index: 5;
	height: 220px;
	background: url('/12sky2/static/images/bg/menu2.png') top center no-repeat;
	left: 0px;
	top: 439px;
}
#menu_but img{
	margin-top: -45px;
    margin-left: -25px;
}
#menu_but .user{
	position: absolute;
    margin-left: -760px;
    top: 65px;
    font-size: 20px;
    color: #fff;
}
#menu_but .login{
	position: absolute;
    margin-left: 110px;
    top: 65px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

#menu_but .fen{
	position: absolute;
    margin-left: 165px;
    top: 65px;
    font-size: 20px;
    color: #fff;
}

#menu_but .register{
	position: absolute;
    margin-left: 190px;
    top: 65px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

#menu_but .homepage{
	position: absolute;
    margin-left: -1020px;
    top: 125px;
    font-size: 24px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff; /* 四个方向的阴影模拟边框 */
}
#menu_but .information{
	position: absolute;
    margin-left: -760px;
    top: 125px;
    font-size: 24px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff; /* 四个方向的阴影模拟边框 */
}


#menu_but .hot{
	position: absolute;
    margin-left: 190px;
    top: 125px;
    font-size: 24px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff; /* 四个方向的阴影模拟边框 */
}
#menu_but .download{
	position: absolute;
    margin-left: 520px;
    top: 125px;
    font-size: 24px;
    color: #000;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff; /* 四个方向的阴影模拟边框 */
}
#menu_but .homepage:hover,#menu_but .information:hover,#menu_but .hot:hover,#menu_but .download:hover{
	color: #118f91;
}
#menu_but .on{
     color: #118f91;
}


#menu_bg {
	position: absolute;
	width: 100%;
	z-index: 4;
	height: 186px;
	/*background: url('/12sky2/static/images/bg/top_bg.png') top center no-repeat;*/
	left: 0%;
	top: 0px;
}
#menu {
	position: absolute;
	width: 100%;
	left: 50%;
	margin-left: -50%;
	top: -10px;
}
#menu #main {
	position: absolute;
	z-index: 5;
	width: 1100px;
	left: 50%;
	margin-left: -525px;
	top: 90px;
}
#menu #Mzoom { display: none; float: left; margin-left: 10px; width: 1000px; height: 82px; }

#menu #main li { float: left; width: 87px; height: 21px; }
#menu #main li a { display: block; width: 87px; height: 21px; background: url('../images/menu/menu.png') 0 0 no-repeat; cursor: default; }
#menu #main li.m4 { margin-right: 273px; }
#menu #main li.m1 a { background-position: 0 0; }
#menu #main li.m2 a { background-position: -87px 0; }
#menu #main li.m3 a { background-position: -174px 0; }
#menu #main li.m4 a { background-position: -261px 0; }
#menu #main li.m5 a { background-position: -348px 0; }
#menu #main li.m6 a { background-position: -435px 0; }
#menu #main li.m7 a { background-position: -522px 0; }
#menu #main li.m8 a { background-position: -609px 0; }
#menu #main li.m1 a:hover { background-position: 0 -21px; }
#menu #main li.m2 a:hover { background-position: -87px -21px; }
#menu #main li.m3 a:hover { background-position: -174px -21px; }
#menu #main li.m4 a:hover { background-position: -261px -21px; }
#menu #main li.m5 a:hover { background-position: -348px -21px; }
#menu #main li.m6 a:hover { background-position: -435px -21px; }
#menu #main li.m7 a:hover { background-position: -522px -21px; }
#menu #main li.m8 a:hover { background-position: -609px -21px; }

#menu #level { position: absolute; z-index: 3; display: none; width: 950px; left: 50%; margin: 125px 0 0 -475px; padding: 0 9px; height: 260px; background: url('../images/menu/menu_bg.jpg') 0 0 no-repeat; font-family: "Arial"; }
#menu #level ul { float: left; padding: 57px 0 0; }
#menu #level ul.level_1 { width: 80px; }
#menu #level ul.level_2 { width: 80px; }
#menu #level ul.level_3 { width: 100px; }
#menu #level ul.level_4 { width: 80px; margin-right: 180px; }
#menu #level ul.level_5 { width: 115px; margin-right: 0px; }
#menu #level ul.level_6 { width: 104px; margin-right: 0px; }
#menu #level ul.level_7 { width: 74px; margin-right: 0px; }
#menu #level ul.level_8 { width: 115px; }
#menu #level li { width: 100%; font-size: 12px; color: #5a5a5a; line-height: 24px; text-align: center; cursor: default;  }
#menu #level li a { display: block; padding: 0 5px; color: #888; text-decoration: none; text-indent: 0px; }
#menu #level li a:hover { color: #FFF; background: #282828; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  }

/*-------------------------------------------------------------------------------------------------------------------------------------
head_img
-------------------------------------------------------------------------------------------------------------------------------------*/
#head_img2 { position: absolute; z-index: 2; top: 170px; width: 100%; text-indent: -99999px; }
#head_img { position: absolute; z-index: 1; top: 0px; width: 100%; text-indent: -99999px; }
#head_img li {
	position: absolute;
	width: 100%;
	height: 450px;
	left: -8px;
	top: -52px;
}





#head_img li.img_7 {
  background: none !important; /* 移除原背景图 */
}

/* 视频背景样式 */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 545px;
  object-fit: cover; /* 关键：像背景图一样覆盖整个区域 */
  z-index: -1;      /* 确保视频在内容下层 */
}



/*-------------------------------------------------------------------------------------------------------------------------------------
head_banner
-------------------------------------------------------------------------------------------------------------------------------------*/
#head_banner { position: absolute; z-index: 3; top: 280px; left: 50%; margin-left: 75px; width:400px; height:200px; }
#head_banner .slider_box { width: 400px; height: 180px; overflow: hidden; }
#head_banner .slider_box a { float: left ;}

.pagination { text-align: right; padding: 5px 0px 0px; }
.pagination a {display: inline-block; margin-left: 5px; width:16px; height:16px; background: url('../images/layout/banner_menu.png') 0 0 no-repeat; }
.pagination a:hover { background-position: -16px 0; }
.pagination a.selected {background-position: -16px 0;}
.pagination a span { display: none; }

#menu_but .left-language{
	position: absolute;
    margin-left: 300px;
    top: 65px;
    font-size: 20px;
    color: #fff;
}

.select-option {
    position: absolute;
    background: #5c5c5c;
    color: #ffffff;
    height: 30px;
    line-height: 30px;
    width: 100px;
    text-align: center;
    bottom: -32px;
    left: 50%;
    margin-left: -55px;
    font-size: 16px;
    display: none;
}

.login-switch {
    width: 120px;
    height: 26px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.lang-icon {
    width: 20px;
    height: 10px;
    background: url(../images/lang-icon.png) no-repeat;
    background-size: contain;
    margin-left: 10px;
    margin-top: 3px;
}

.login-switch-active .select-option {
    display: block;
}



/* 基础样式 */
.toast_zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /*background-color: rgba(0, 0, 0, 0.5); !* 半透明黑色遮罩 *!*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 激活状态 */
.toast_zone.on {
  opacity: 1;
  visibility: visible;
}

/* 弹窗容器 */
.toast {
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.toast_zone.on .toast {
  transform: translateY(0);
}

/* 弹窗内容区域 */
.toast_body {
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  text-align: center;
}

/* 弹窗底部按钮区域 */
.toast_footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
}

/* 按钮样式 */
.btns {
      display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.btn_basic {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn_basic:hover {
  background-color: #40a9ff;
}

/* 关闭按钮 */
.ibtn_close {
  padding: 8px 16px;
  background-color: #8f8f8f;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ibtn_close:hover {
  background-color: #aaaaaa;
}



