/* CSS Document */
.menu { position: absolute; top: 20px; left: 31.5%; right: 20%; font-weight: 500; z-index: 77; transition: all 0.25s ease 0s;}
@media only screen and (min-width:1201px){
    .sjj_nav ul, .sjj_nav li{ position: relative; list-style:none; margin:0px; padding: 0;}
    .sjj_nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; z-index: 104;}
    .sjj_nav_ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; transition: all 0.25s ease 0s;}
    .sjj_nav_ul > li:hover { color: #153555; text-decoration: none;}
    .sjj_nav_ul > li:hover > a { position: relative; z-index: 2;}
    .sjj_nav_ul > li:hover > ul { opacity: 1; visibility: visible; margin: 0; /*top: 46px;*/ display: block!important;}
    .sjj_nav_ul > li > .sjj_nav_ul > li a:hover { color: #d70c19!important;}
    .sjj_nav_ul > li > ul { position: absolute; top: 50px; left: 50%; transform:translateX(-50%); width: 150px; text-align:left; line-height:20px; padding: 15px 0 5px 0; border-top: 5px solid rgba(184, 28, 37, 0.95); background-color: #fff; opacity: 0; visibility: hidden; z-index: 1; transition: all 0.25s ease 0s;}
    .sjj_nav_ul > li > ul > li { position: relative; width: 100%;}
    .sjj_nav_ul > li > ul a { display: block; margin: 0; padding: 5px 0!important; width: 100%; color:#343434 !important; text-align: center; line-height: 30px; font-size: 94.117%; font-weight: 400;}
    .sjj_nav_ul > li > ul a { position: relative; z-index: 1;}
    .sjj_nav_ul > li > ul a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #343434;}
    .sjj_nav_ul > li > ul li:last-child a::before { display: none;}
    .sjj_nav_ul > li > .sjj_nav_ul > li { padding: 0 10px;}
    .sjj_nav_ul > li > ul li ul li:hover a { background-color:#222222; text-decoration: none;}
    .sjj_nav_ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > ul { display: block!important; opacity: 1; visibility: visible; margin: 0;}
    .sjj_nav_ul > li > ul > li ul { position: absolute; top: 20px; left: 100%; width: 130%; background-color:#3f3f41; box-shadow: 2px 3px 5px rgba(255, 255, 255, 0.5); text-align:left; line-height:20px; opacity: 0; visibility: hidden;  z-index: 1; transition: all 0.25s ease 0s;}
    .sjj_nav_ul > li > ul > li ul > li > ul, .sjj_nav_ul > li > ul > li ul > li > ul > li > ul > li > ul { left:auto; right: 100%; background-color: rgba(0, 0, 0, 1);}
    .sjj_nav_ul > li > ul > li ul > li > ul li:hover a {background-color:rgba(255, 255, 255, .2);}
    .sjj_nav_ul > li > ul > li ul > li > ul li ul li:hover a {background-color:rgba(255, 255, 255, .4);}
    .sjj_nav_ul > li > ul > li ul > li > ul li ul li ul li:hover a {background-color:rgba(255, 255, 255, .6);}
    .sjj_nav_ul > li > ul > li ul > li > ul > li > ul {left: 100%;}
    
    /*第一層start*/
    .sjj_nav > .sjj_nav_ul > li { position: relative; margin-right: 20px; display: flex; flex-wrap: wrap; align-items: center; transition: all 0.25s ease 0s; font-weight: 400;}
    .sjj_nav > .sjj_nav_ul > li:last-child { margin-right: 0;}
    .sjj_nav > .sjj_nav_ul > li::before { content: ''; position: absolute; bottom: -30px; left: 0; width: 100%; height: 50px;}
    .sjj_nav > .sjj_nav_ul > li > a { position: relative; font-size: 105.882%; line-height: 50px; display: flex; flex-flow: wrap; align-items: center; justify-content: center; color: #fff; font-weight: 400; z-index: 1; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > li > a::before { content: ''; position: absolute; bottom: -30px; left: calc(50% - 20px); width: 0; height: 0; border-style: solid; border-width: 0 20px 22px 20px; border-color: transparent transparent #fff transparent; opacity: 0; z-index: -2; transition: all 0.45s ease 0s;}
    .sjj_nav > .sjj_nav_ul > li:hover > a::before { opacity: 1;}
    .sjj_nav > .sjj_nav_ul .current > a::before { opacity: 1;}
    /*第一層end*/
    
    /*有下拉選單時顯示符號 start*/
    .sp_nav_xjb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 0 0 4px;}
    /*.sp_nav_xjb::before { content: ''; height: 0; width: 0; border-color: #b1b1b1 transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px;}*/
    .sp_nav_xjb::before { content: '+'; font-size: 158.823%; color: #fff;font-weight: 500;font-style: normal;line-height: 1;}
    .sjj_nav_ul > li > ul > li .sp_nav_xjb { position: absolute; right: 0px; top: 2px; width: 8px; height: 6px; margin: 15px 0 0 7px;}
    /*.sjj_nav_ul li:hover .sp_nav_xjb::before { content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px;}*/
    .sjj_nav_ul li:hover > ul > li .sp_nav_xjb::before { content: ''; height: 0; width: 0; border-color: transparent transparent transparent #b1b1b1; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
    .sjj_nav_ul > li > ul > li:hover > .sp_nav_xjb, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb { position: absolute; right: 0px; top: 2px; width: 8px; height: 6px; margin: 15px 0 0 7px;}
    .sjj_nav_ul > li > ul > li > ul > li:hover > .sp_nav_xjb, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb {width: 8px; height: 6px; margin: 15px 0 0 0px; position: absolute; left: -4px; right: auto; top: 2px;}
    .sjj_nav_ul > li > ul > li:hover > .sp_nav_xjb::before, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: transparent transparent transparent #fff; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
    .sjj_nav_ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: transparent #fff transparent transparent; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
    /*有下拉選單時顯示符號 end*/
    
    /*額外下拉樣式1 start*/    
    .sjj_nav > .sjj_nav_ul > .menu_full > a::after {content: ''; position: absolute; bottom: -34px; left: -2000px; right: -2000px; height: 4px; background: #fff; opacity: 0; visibility: hidden; z-index: -2; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full:hover > a::before { opacity: 1; visibility: visible;}
    .sjj_nav > .sjj_nav_ul > .menu_full:hover > a::after { opacity: 1; visibility: visible;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul { position: fixed; top: 154px; left: 50%; transform: translateX(-50%); width: 100%; display: flex !important; flex-flow: wrap; margin: auto; padding: 30px 20px 30px 20px; max-width: 1440px; border: none; background: transparent;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul::before { content: ''; background: #292c37; position: absolute; top: 0; left: -100%; right: -100%; height: 100%; border-bottom: 1px solid #fff; z-index: -1;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li { width: 17.143%; margin: 30px 3.57125% 0 0; padding: 0;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li::before { content: ''; position: absolute; top: 0; bottom: 5%; right: -11%;  width: 2px;   background: rgb(255, 255, 255,.3);}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li:nth-child(5n+5) { margin-right: 0;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li:nth-child(5n+5)::before { display: none;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a { display: flex; flex-flow: column; color: #fff!important; padding: 0 !important;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a::before { display: none;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic { position: relative; width: 100%; height: 0; padding-bottom: 50%; text-align: center; overflow: hidden; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic img { filter: brightness(0) invert(1); transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .roun_cor img { filter: brightness(1) invert(0) !important; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .roun_cor { border-top: 3px solid #fff; border-radius: 25px 0 0 0; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .txt { text-align: center; font-size: 112.5%; margin: 15px 0 0 0; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a:hover .roun_cor { border-color: #d70c19;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a:hover .pic img { filter: brightness(1) invert(0);}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a:hover .txt { color: #ec2d2d !important;}
    /*下拉樣式1 end*/
}

@media only screen and (min-width:1401px){
    .sjj_nav > .sjj_nav_ul > li { margin-right: 4%;}
}
@media only screen and (min-width:1701px){
    .sjj_nav > .sjj_nav_ul > li { margin-right: 7%;}
}


@media only screen and (max-width:1800px){
    .menu { left: 28%; right: 17%;}
}
@media only screen and (max-width:1600px){
    .menu { left: 30.5%; right: 19%;}
}
@media only screen and (max-width:1400px){
    .menu { left: 25%; right: 20%;}
}
@media only screen and (max-width:1200px){
    *{ box-sizing:border-box;}
    .sjj_nav img{ /*display:block;max-width:100%;border:0*/}
    .sjj_nav ul, .sjj_nav li{ list-style:none; margin:0px; padding: 0; display: block;}
    .sjj_nav a{ text-decoration:none;/*display:block;*/-webkit-tap-highlight-color:rgba(255, 255, 255, 0);-webkit-user-select:none;-moz-user-focus:none;-moz-user-select:none;}
    .nav_show { /*display:none;*/}
    .sp_header{ position:fixed; right:20px; top:22px; height:20px;/*overflow:hidden;background:#fff;*/width:25px; z-index:9999; transition: all 0.35s ease 0s;}
    .sp_logo{ padding:10px; float:left; height:50px}
    .sp_logo img{ margin:auto; max-height:30px;}
    .sp_nav{ position:relative; width:25px; float:right; cursor:pointer; height:20px;}
    .sp_nav span{ position:absolute; left:0; display:block; background: #fff; width:25px; height:3px; transition: all 0.35s ease 0s;}
    .sp_nav span:nth-of-type(1){ top:0px}
    .sp_nav span:nth-of-type(2){ top:7px}
    .sp_nav span:nth-of-type(3){ top:14px}
    .sp_nav_se span:nth-of-type(1){ top:5px; transform:rotate(45deg); height:3px;}
    .sp_nav_se span:nth-of-type(2){ width:0}
    .sp_nav_se span:nth-of-type(3){ top:5px; transform:rotate(-45deg); height:3px;}
    .sjj_nav{ position:fixed; width:100%; height:calc(100% - 50px); background-color: rgb(30, 41, 101, .63); font-size:14px; line-height:40px;top:60px;right:-100%; overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling: touch; z-index:9966; transition: all 0.35s ease 0s;}
    .nav_show{ right:0px; top: 60px;}
    .sjj_nav>ul>li:first-child{ /*overflow:hidden;*/border-top:0}
    .sjj_nav>ul>li:first-child>a{ /*float:left;width:calc(100% - 70px)*/}
    .sjj_nav>ul>li:first-child .language{ float:right;width:70px;overflow:hidden;line-height:30px;margin-top:5px}
    .sjj_nav>ul>li:first-child .language a{ width:35px;float:left;border-left:1px #ddd solid;text-align:center;color:#999;}
    .sjj_nav ul li i{ position:absolute; top:14px; right:0px; border-left:1px solid rgba(255, 255, 255, 0.5); width: 12px; height:24px; padding:0px 15px; cursor:pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
    .sjj_nav ul li i svg{ transform:rotate(-90deg); transition: all 0.35s ease 0s;}
    .sjj_nav ul li .sjj_nav_i_se svg{ transform:rotate(0deg)}
    .sjj_nav ul li { position:relative;line-height:120%;font-size:16px; /*padding: 0 10%;*/}
    .sjj_nav ul li:last-child { border-bottom: 0px solid rgba(0, 0, 0, 0.23);}
    .sjj_nav>ul >li:last-child{ /*border-bottom:1px #ddd solid;*/}
    .sjj_nav ul li ul{ display:none; margin-top: 0px; font-weight:normal !important;background-color:rgba(0, 0, 0, 0.1);}
    .sjj_nav ul li ul li i{ position:absolute; top:8px; right:0; border-left:0px solid rgba(0, 0, 0, 0.23); width: 12px; height:24px; padding:0px 15px; cursor:pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
    .sjj_nav ul li ul li { position:relative;line-height:120%;font-size:16px; /*padding: 0 0 0 10%;*/}
    .sjj_nav_ul > li > ul { position:relative; top:inherit; left: 0; width: 100%; text-align:center; line-height:20px; margin-left: 0px!important; opacity: 1;visibility:visible; z-index: 1; transition: all 0s ease 0s;}
    .sjj_nav ul li a{ color:#fff;/*width:100%;*/ margin:0; display:block; padding: 13px 0; font-weight: normal;}
/*
	.sjj_nav ul li a span:nth-child(1) { display: block; visibility: visible; opacity: 1;}
	.sjj_nav ul li a span:nth-child(2) { display: none; visibility: hidden; opacity: 0;}
*/
    .sjj_nav ul li ul li a{ /*color:#ade6ff;*/display:block;text-align:left; text-decoration:none;}
    .sjj_nav ul li i svg{ width:20px;height:20px;fill:#fff;}
    .sjj_nav ul li .sjj_nav_i_se svg{ fill:#fff}
    .sjj_nav ul li ul li>ul{ /*padding-left:30px;*/}
    .sp_nav_xjb { display:block;}
    .sjj_nav_ul > li > ul > li { width:auto;}
    .sjj_nav_ul > li > ul a { width:auto; padding: 10px !important;}
    .sjj_nav_ul > li > ul li a::after { content:none; display: block; height: 2px; background-color: #fff; width: 100%; margin-top: 10px; transition: all 0.25s ease 0s;}
    /*.sjj_nav_li_w {display: none!important;}*/
    .sjj_nav .search-bar {float:none;margin:auto;max-width:50%;margin-bottom:50px;}
    .sjj_nav .search-btn {top:3px;}
    .sjj_nav_ul { position:absolute; top:0; right:0; width:100%; overflow:auto; background-color:#18204d; padding: 0 20px!important; /*height:100%; background-image: linear-gradient(90deg, rgba(42, 62, 133, 1) 0%, rgba(80, 125, 195, 1) 100%);*/}
    .sp_nav_se { position: absolute; top: 0px; right: 0px; z-index: 9999;}
    .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 9px 6px; transition: all 0.25s ease 0s;}
    .sjj_nav_i_se::before {content: ''; height: 0; width: 0; border-color: transparent #fff transparent transparent; border-style: solid solid solid solid; border-width: 6px 9px; transition: all 0.25s ease 0s;}
    
    .sjj_nav > .sjj_nav_ul .current::before { content: ''; position: absolute; top: 18px; left: -15px; width: 8px; height: 13px; clip-path: polygon(0 0, 0% 100%, 100% 50%); background: #d70c19;}
    
    /*額外下拉樣式1 start*/    
    .nav_show .sjj_nav > .sjj_nav_ul > .menu_full:hover > a::before { opacity: 1; visibility: visible;}
    .sjj_nav > .sjj_nav_ul > .menu_full:hover > a::after { opacity: 1; visibility: visible;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul { position: relative; height: auto; top: 0 !important;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul::before { content: ''; background: #292c37; position: absolute; top: 0; left: 0; right: 0; height: 100%;  z-index: -1;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a { display: flex; flex-flow: row; align-items: center; padding: 10px 0!important;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic { max-width: 50px; overflow: hidden; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .roun_cor { max-width: 100px; border-top: 2px solid #fff; border-radius: 10px 0 0 0; overflow: hidden; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic .imgCenter { position: relative; width: auto; height: auto;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic img { width: auto !important; position: relative; top: 0; left: 0; transform: translate(0,0); height: auto !important; filter: brightness(0) invert(1); transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .roun_cor img { filter: brightness(1) invert(0) !important; transition: all 0.25s ease 0s;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .txt { text-align: center; font-size: 112.5%; margin: 0 0 0 15px; transition: all 0.25s ease 0s;}
    /*下拉樣式1 end*/
}
@media only screen and (max-width:576px){
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .pic { max-width: 35px;}
    .sjj_nav > .sjj_nav_ul > .menu_full > .sjj_nav_ul > li > a .roun_cor { max-width: 70px;}
}
