/*top*/
a {
text-decoration: none;
}
.top_h{
height:70px;
margin-bottom:0px;
}
.header_box{
position: fixed;
top: 0px;
width: 100%;
z-index: 9;
background: white;
box-shadow: 0 2px 7px 0 rgb(153 153 153 / 25%);
}
.header{
height: 70px;
padding: 0px;
}
.header_row{
display: flex;
justify-content: flex-start;
height: 100%;
}
.logo{
width: 150px;
margin-left: 1.75rem;
margin-right: 50px;
padding: 5px 0px;
text-align: center;
}
.logo img{
max-width: 100%;
max-height: 100%;
}
.header_menu{
position: relative;
width: 100%;
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
.header_phone{
display: block;
float: left;
margin-right: 1em;
padding-right: 1em;
vertical-align: -2px;
border-right: 1px solid #D2D1D0;
}
.header_phone a{
font-size:30px;
color:#000;
margin-left: 10px;
}
.header_btn_box{
/*display: none;*/
position: relative;
width:130px;
margin: auto 0;
font-size: 25px;
font-weight: 900;
}
.header_btn{
display: flex;
color:#000;
}
.bar {
position: absolute;
right: 15px;
top: 10px;
display: block;
z-index: 3;
width: 28px;
height: 18px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.bar::before {
content: '';
background-color: #3f4f70;
position: absolute;
height: 2px;
width: 100%;
left: 0;
top: 0;
}
.bar div {
content: '';
background-color: #3f4f70;
position: absolute;
height: 2px;
width: 100%;
left: 0;
top: 48%;
}
.bar::after {
content: '';
background-color: #3f4f70;
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: 0;
}
.bar.active {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/*選單展開*/
.bar_close_box{
position: absolute;
right: 20px;
top: 75px;
}
.bar_close {
position: relative;
display: block;
z-index: 3;
width: 30px;
height: 30px;
border: 1px solid #ffffff;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.bar_close::before {
content: '';
background-color: #ffffff;
position: absolute;
height: 2px;
width: 100%;
top: 13px;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
.bar_close::after {
content: '';
background-color: #ffffff;
position: absolute;
height: 2px;
width: 100%;
top: 13px;
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
transform: rotate(130deg);
}
.header_down_menu_box{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000059;
z-index: 10;
}
.header_down_menu_box_row {
display: flex;
height: 100%;
justify-content: flex-end;
}
.header_down_menu_item {
position: relative;
width: 55%;
max-width: 400px;
min-width: 230px;
height: 100%;
background-color: #0287aa;
padding: 10px;
overflow-y: auto;
}
.header_down_menu_ul {
list-style-type: none;
padding: 90px 0px 30px 0px;
display: flex;
flex-wrap: wrap;
}
.header_down_menu_ul li {
width: calc(100% / 2 - 20px);
margin: 20px 10px;
text-align: center;
}
.header_down_menu_ul li a {
font-size: 20px;
display: block;
color: white;
}
.header_down_menu_ul li a img{
width: 100%;
padding: 0px 35px;
}
.header_down_menu_ul li a .icon{
display: block;
font-size: 45px;
}
@media only screen and (max-width: 760px) {
.header_phone{
display: none;
}
.logo{
margin-left: 15px;
margin-right: 15px;
padding: 5px 0px;
text-align: center;
}
.header_btn_box_text{
display: none;
}
}
/*右側按鈕固定*/
.fixed_right{
overflow: hidden;
position: fixed;
bottom: 40%;
right: 0px;
z-index: 10;
width: 50px;
height: auto;
text-align: center;
line-height: 40px;
color: #9ba47b;
cursor: pointer;
border: 0;
text-decoration: none;
transition: 0.2s ;
font-size: 25px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.2s ease-in;
}
.fixed_right_icon{
position: relative;
right: 0px;
width:100%;
padding: 5px;
transition: all 0.2s ease-in;
}
.fixed_right.boxoff .fixed_right_icon{
right: -50px;
}
.fixed_right_icon a{
color: white;
}
.fixed_right_on_off{
position: relative;
background-color: #bfbfbf;
right: -50px;
transition: all 0.2s ease-in;
}
.fixed_right_on_off a{
color: white;
}
.fixed_right:hover .fixed_right_on_off{
right: 0px;
}
.fixed_right_facebook{
background-color: #4267B2;
}
.fixed_right_line{
background-color: #00c300;
}
.fixed_right_mail{
background-color: #7d7d7d;
}
.fixed_right_instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
}
.fixed_right_twitter {
background-color: #1da1f2;
}
@media only screen and (max-width: 760px) {
.fixed_right {
font-size: 25px;
bottom: 30%;
width: 50px;
}
.fixed_right a{
padding: 2px;
}
}
/**/
.top_ph_member_llink{
font-size: 26px;
font-weight: 900;
}
@media only screen and (max-width: 760px){
}
.fixed_auction{
position: fixed;
right: 10px;
bottom: 24%;
text-align: center;
padding: 5px;
color: #0287aa;
z-index:10;
}
.fixed_auction_box{
position: relative;
}
.fixed_auction .icon{
position: absolute;
font-size: 20px;
top: 10px;
left: -10px;
background: #fdfdfd;
width: 30px;
height: 30px;
border-radius: 30px;
box-shadow: 0 2px 7px 0 rgb(153 153 153 / 25%);
}
.fixed_auction p{
position: relative;
margin-bottom: 0px;
font-size: 12px;
padding: 5px;
background: #0287aa;
color: white;
border-radius: 30px;
top: -10px;
}
.fixed_auction span{
position: relative;
font-weight: 900;
font-size: 50px;
background: #fffbfb;
padding: 5px;
border-radius: 50px;
box-shadow: 0 2px 7px 0 rgb(153 153 153 / 69%);
}
@media only screen and (max-width: 760px){
.fixed_auction {
position: fixed;
right: 10px;
bottom: 10%;
text-align: center;
padding: 5px;
color: #0287aa;
z-index: 10;
}
}
/**/
.header_top_menu_ul{
display: flex;
list-style: none;
margin-left: 0px;
padding-left: 0px;
margin-bottom: 0px;
align-items: center;
}
.header_top_menu_ul > li{
font-size: 16px;
padding: 0 0.875rem;
font-weight: 400;
color: #525252;
}
.header_top_menu_ul > li .icon{
display:none;
}
.header_menu .ph{
display:none;
}
@media only screen and (max-width: 1200px) {
.top_h{
height: 60px;
margin-bottom: 0px;
}
.header_top_menu_ul{
display:none;
}
.header_menu .ph{
display: flex;
}
.header{
height: 55px;
}
.header_phone{
display: none;
}
.header_menu{
position: relative;
width: 100%;
display: flex;
height: 100%;
justify-content: flex-end;
align-items: center;
padding-right: 20px;
}
.header_menu{
margin: 0;
}
.bar{
position: relative;
right: 0px;
top: 0px;
}
.header_btn_box_text{
display: none;
}
.header_btn_box{
display: block;
width: 60px;
}
}
.header_top_menu_ul > li.bg_li{
position: relative;
background: #e3bf00;
padding: 5px 0.875rem 5px 30px;
border-radius: 50px;
}
.bg_li a{
}
.bg_li:after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f515";
position: absolute;
top: 5px;
left: 7px;
transition: .3s;
}