/* ------------------- mediaqueries ------------------- */
@media screen and (max-height: 880px) {
    
}

/* ---------- 20230703-須更新 ---------- */
@media screen and (max-width: 1500px) {
    /* ---------- 首頁 ---------- */
    .indexBlock.b3 i{margin-right:0; right:0;}
    .indexBlock.b3 ul{max-width:90%;}
    .indexBlock.b5 .w50{width:45%;}
    
    #block3{top:-300px;}
}
@media screen and (max-width: 1550px) {
    #block3{top:-275px;}
}
@media screen and (max-width: 1400px) {
    #block3 {top: -260px;}
    /* 首頁 */
    .s2 .indexBlock.b3 li:last-child,
    .s3 .indexBlock.b3 li:last-child,
    .s2 .indexBlock.b3 li:first-child,
    .s3 .indexBlock.b3 li:first-child,
    .s4 .indexBlock.b3 li:last-child,
    .s4 .indexBlock.b3 li:first-child,
    .s5 .indexBlock.b3 li:last-child,
    .s5 .indexBlock.b3 li:first-child{opacity:1; margin:0;}
    
}
@media screen and (max-width: 1350px) {
    #block3 {top:-255px;}
}
@media screen and (max-width: 1300px) {
    #block3 {top: -250px;}
}
@media screen and (max-width: 1250px) {
    #block3 {top: -245px;}
}
@media screen and (max-width: 1200px) {
    #block3{top:-240px;}
}
@media screen and (max-width: 1150px) {
    #block3{top:-235px;}
}
/* ---------- 20230703-須更新 END ---------- */
@media screen and (max-width: 1100px) {
    /* ---------- 20230703-須更新 ---------- */
    #block3{top:-230px;}
    /* ---------- 20230703-須更新 END ---------- */
    
    /* 表格 */
    .tableBox li{display:block;}
    
    /* ---------- 聯絡我們 ---------- */
    .contactBox b.w5 span {width:135px;}
    .contactBox b.w5 input {width: 100%;}
    .contactBox .item1 b.verify{max-width:100%;}
    .contactBox .item2 .i1,
    .contactBox .item2 .i2{width:100%;}
    
    /* ---------- ���� ---------- */
    .indexBlock.b5 select, .msg {
        font-size: var(--FSizeS) !important;
    }
    .indexBlock.b5 span{margin:0 2px;}
    .indexBlock.b5 .note {font-size: 16px;width: 100%;text-align: center;margin: 0 auto;color: #9E9E9E;font-style: normal;padding: 0;position: relative;left: 0;bottom: 0;margin: 0 auto;display: block;}
    .indexBlock.b5 .sell li{display:block;}
    .indexBlock.b5 b{margin:20px 0 50px 0; display:block;}
    .indexBlock.b5 .tableBox.show{display:table;}
    .indexBlock.b5 .tableBox ul{display:table-row;}
    .indexBlock.b5 .tableBox li{font-size:var(--FSizeS); display:table-cell;}
    
}
/* ---------- 20230703-須更新 ---------- */
@media screen and (max-width:1050px) {
    #block3{top:-225px;}
}
/* ---------- 20230703-須更新 END ---------- */
@media screen and (max-width:1000px) {
    /* ---------- 20230703-須更新 ---------- */
    .MobileMenuOn .pc{display:none;}
    .MobileMenuOn .m{display:block; max-width:300px; margin:0 auto;}
    #block3{top:-180px;}
    /* ---------- 20230703-須更新 END ---------- */
	/* width */
    a.mobilemenu{ display: inline-block;}
    header nav{ position: fixed; top: 0; left: 150%; z-index: 99; width: 100%; height: 100vh; display: flex; flex-direction: column;
    /* ---------- 20230717-更新 ---------- */
    justify-content: center; background-color: var(--pri01); transition: .5s; background-image: url(../Images/AbbVieLogo_Preferred_White.svg); background-repeat: no-repeat; background-position: center 95%; background-size: 200px auto;}
    /* ---------- 20230717-更新 END ---------- */
    .MobileMenuOn header nav{ left: 0; }
    .MobileMenuOn a.mobilemenu{ position: fixed;}
    header nav a{ color: #FFF; width: 100%; font-size:35px; padding: 10px; text-align: center;}
    header nav a:hover{ color: #FFF;}
    header nav a span{ color: var(--pri02);}
    header nav .down{ width: 80%; margin: 0 auto; padding-top: 30px; margin-top: 30px; margin-bottom: 90px;}
    
    h5{ letter-spacing: 5px; padding-left: 5px;}
    
    /* 遊戲頁 */
    .gameBox .word{min-width:calc(500px - 80px); padding:40px 40px; background-color:#eef3bb; margin-top:-8px;}
    .gameBox .whiteBox .word{background-color:rgba(255,255,255,0); padding:0;}
    
    .gameBox .show1 .block.b1, 
    .gameBox .show2 .block.b2, 
    .gameBox .show3 .block.b3, 
    .gameBox .show4 .block.b4, 
    .gameBox .show5 .block.b5, 
    .gameBox .show6 .block.b6, 
    .gameBox .show7 .block.b7{display:flex; flex-direction:column; align-items:center;}
    
    .gameBox .pic{margin-right:0; width:100%; text-align:center;}
    .gameBox .pic img{width:45%;}
    .gameBox .whiteBox .word{margin:-7px 0 20px 0; max-width:500px;}
    
    .gameBox .block.b1,
    .gameBox .block.b2,
    .cat .block,
    .gameBox .whiteBox{margin-bottom:50px;}
    
    /* 產品頁 */
    .goodsBox .pic.pc{display:none;}
    .goodsBox .pic.m{display:block;}
    .product .tagBox a {font-size:var(--FSizeP); line-height: var(--FSizeP);}
    .product .goodsBox{flex-direction:column;}
    .product .goodsWordBox{width:70%; margin-right:0;}
    .product h4{width: 80%; margin: 0 auto;}
    .product h4 b{font-size:var(--FSizeM);}
    .product h4 span{text-align:left;}
    
    /* 首頁 */
    .indexBlock{max-width:100%;}
    .indexBlock.b2{height:500px;}
    .indexBlock.b1 a, 
    .indexBlock.b2 a{font-size:var(--FSizeM);}
    .indexBlock.b1 a::after, 
    .indexBlock.b2 a::after{font-size:20px; padding:3px 8px;}
    .indexBlock.b2 dd{margin-top:-120px;}
    .indexBlock.b2 .top.mask{width:1000px; left:50%; margin:0 0 0 -500px; height:122px;}
    .indexBlock.b2 .bottom.mask{width:1000px; left:50%; margin:0 0 0 -500px; height:111px; background-position:center top;}
    
    .indexBlock.b3 ul{max-width:90%;}
    .indexBlock.b3 ul br{display:none;}
    .indexBlock.b3 li span{font-size:var(--FSizeP);}
    .indexBlock.b3 li a{font-size:var(--FSizeP);}
    .indexBlock.b3 i{right:-17px;}
    
    .indexBlock.b4 .detail{flex-direction:column;}
    .indexBlock.b4 .title li:first-child{text-align:center;}
    .indexBlock.b4 .title li:last-child{text-align:center;}
    .indexBlock.b4 .qaBox{width: 90%; margin: 20px auto 0 auto;}
    .indexBlock.b4 .title li:first-child{font-size:var(--FSizeM); line-height:30px;}
    .indexBlock.b4 dt{font-size:var(--FSizeP);}   
}
@media screen and (max-width: 900px) {
    
}
@media screen and (max-width: 750px) {
    /* 產品頁 */
    .product h4{width:100%;}
    .product h4.middle{text-align:center;}
    .goodsWordBox h6 br{display:none;}
    .product .tagBox {display:block; margin-top:50px; border:none;}
    .product.refresh .tagBox a,
    .product .tagBox a{background-color: #f7f7f7; padding: 10px 0; display: inline-block; width:calc(49% - 5px); min-height: 50px; margin:5px 2.5px 0 2.5px;}
    .product .tagBox a.focus, 
    .product .tagBox a:hover{color:#FFF; background-color:var(--pri02);}
    .product .tagBox a.m100{width:calc(99% - 5px);}
    .product .tagBox a.focus:after{display:none;}
    .product .tagBox a br{display:none;}
    .product .researchBox{justify-content:space-around; width:100%;}
    .product .researchBox ul{margin:20px 20px 0px 20px; width: calc(30% - 40px);}
    .product .researchBox img{width:100%;}
    .product .note {width:100%;}
    
    /* ---------- 20230621-經銷據點修改 ---------- */
    .indexBlock.b5 .tableBox li:nth-child(1){width:160px;}
    .indexBlock.b5 .tableBox li:nth-child(3){width:140px;}
    /* ---------- 20230621-經銷據點修改 END ---------- */
    
}
@media screen and (max-width: 700px) {
    /* 共用 */
    .pc{display:none;}
    .m{display:block;}
    
    /* 產品頁 */
    .product .researchBox ul {margin:20px 0px 0px 0px; width:33%;}
    .product .stepBox {flex-wrap: wrap;}
    .product .stepBox li {width: 33%;}
}
@media screen and (max-width: 640px) {
    
    /* ---------- 選單修改 20230617-須更新 ---------- */
    header nav a{text-align:center; display: flex; width: 100%; align-items: center; justify-content: center;}
    header nav a:hover,
    header nav a:active,
    header nav a:visited,
    header nav a:focus{font-size:36px;}
    header nav img{width:275px; margin: 0 auto;}
    /* ---------- 選單修改 20230617-須更新 END ---------- */
    
    /* ---------- 聯絡我們 ---------- */
    .contactBox b.w5 span {width: 130px;}
      
    
    /* 遊戲頁面 */
    .gameBox h6{max-width:250px;}
    .gameBox .word{min-width: 100%;}
    .gameBox .step{display:flex; margin:0px auto 0px auto; flex-direction:column;}
     Label span{font-size:25px;}
    .gameBox .pic img{width:100%; min-width:600px; margin-bottom:30px;}
    .mainContent.game .step img,
    .gameBox .s5 img{margin-bottom:0;}
    .gameBox .word dt {font-size: calc(var(--FSizeXXXL) + 10px);}
    .gameBox .word dd{font-size: var(--FSizeL);}
    .gameBox .btnBox a{font-size: var(--FSizeXXL); font-weight:400;}
    .mainContent.game.product .s3 img,
    .mainContent.game.product .s4 img{margin-bottom:50px;}
    .cat .pic img{width: 65%; margin-bottom:0;}
    .gameBox .tableQA{width: 100%; margin: 0 auto 20px auto;}
    
    .goodsBox .pic{width:100%;}
    .po5 .pic .h1{top:calc(var(--tagW) * 0.2);left: calc(var(--tagW) * 0.1);}
    .po4 .pic .h1{top:calc(var(--tagW) * 0.12);}
    .pic .icon{width:150px; bottom:calc(var(--tagW) * 0.7); right:calc(var(--tagW) * 0.16);}
    .po3 .pic .h1{top:calc(var(--tagW) * 0.12);}
    .po2 .pic .h1,
    .po1 .pic .h1{top:calc(var(--tagW) * 0.18);}
    
    .pr1 .pic .h1 {top:calc(var(--tagW) * 0.03);}
    .pr1 .pic .h2 {top:calc(var(--tagW) * 0.25); left: calc((var(--tagW) * 0.019) * -1);}
    .pr2 .pic .h2 {top:calc(var(--tagW) * 0.18);}
    .pr2 .pic .h1 {top:calc(var(--tagW) * 0.02); left: calc(var(--tagW) * 0.03);}
    .pr3 .pic .h1 {top:calc(var(--tagW) * 0.1); left: calc(var(--tagW) * 0.18);}
    .pr4 .pic .h2 {top:calc(var(--tagW) * 0.25);}
    .pr4 .pic .h1 { top: calc(var(--tagW) * 0.04); left: calc(var(--tagW) * 0.05);}
    
    /* 首頁 */
    .bodybox{padding-top:92px;}
    .indexBlock h1 span{font-size:var(--FSizeM);}    
    .indexBlock.b1 dt {width: 205px; margin:69px 0 0 -80px;}
    .indexBlock.b1 dd b {width:236px;}
    
    .indexBlock.b1 a, 
    .indexBlock.b2 a{font-size: var(--FSizeSS);}
    .indexBlock.b1 a::after, 
    .indexBlock.b2 a::after{font-size:16px; padding:0 4px;}
    .indexBlock.b2 dt{margin-top:84px;}
    .indexBlock.b2 dd{margin-top:-30px;}
    .indexBlock.b2 dd b {width: 250px;}
    .indexBlock.b2 span{margin-top:70px; margin-top:-10px;}
    .indexBlock.b2 .note{width:375px; position: absolute; top: 386px; left: 50%; margin-left: -255px;}
    
    .indexBlock.b2{height:550px;}
    .indexBlock.b2 dl {padding-top: calc(var(--maskh) - 20px);}
    
    .indexBlock.b3 li:first-child{display:block;}
    .indexBlock.b3 .text{height:300px; padding-top:30px;}
    .indexBlock.b3 ul {height: auto;}
    .indexBlock.b3 li a{line-height:20px; display:flex; align-items:center;}
    .indexBlock.b3 a {padding: 8px 20px;}
    .indexBlock.b3 a .p1, 
/*    .indexBlock.b3 a .p2 {width:calc(var(--ah) - 16px);}*/
    .indexBlock.b3 a .pic{width:calc(var(--ah) - 0px);}
    .indexBlock.b3 li .UI{width:20px;}
    .indexBlock.b3 li .UI::before{font-size:20px;}
    
    .indexBlock.b5{padding-top:220px;}
    .indexBlock.b5 .tableBox.show{width:95%;}
    .indexBlock.b5 h1{margin-top:-80px;}
    .indexBlock.b5 li{padding:5px; letter-spacing:-1px;}
    .indexBlock.b5 i {width:22%; margin:0 5px;}
    
    .indexBlock.b5 .shop{max-width:95%;}
    
    /* ----- index 動畫 ----- */
.indexBlock.b1,
.indexBlock.b2,
.indexBlock.b3,
.indexBlock.b4,
.indexBlock.b5{opacity:0; transition: .5s;}
.indexBlock.b1,
.indexBlock.b2,
.indexBlock.b3,
.indexBlock.b4,
.indexBlock.b5,
.indexBlock.b1 dt,/* 第二塊內ˊ  Vˋ~ */
.indexBlock.b1 b, .indexBlock.b2 b,
.indexBlock.b1 dt b,
.indexBlock.b2 dt,/* 下方區塊2 */
.indexBlock.b2 dd b{opacity:1;}

.s1 .indexBlock.b3 li:last-child, 
.s2 .indexBlock.b3 li:last-child, 
.s3 .indexBlock.b3 li:last-child, 
.s4 .indexBlock.b3 li:last-child, 
.s5 .indexBlock.b3 li:last-child, 
.s1 .indexBlock.b3 li:first-child,
.s2 .indexBlock.b3 li:first-child,
.s3 .indexBlock.b3 li:first-child,
.s4 .indexBlock.b3 li:first-child,
.s5 .indexBlock.b3 li:first-child{opacity:1; margin:0;}
    
    /* ----- 遊戲動畫 ----- */
    .gameBox .word p{font-size:var(--FSizeL);}
    
    
    /* ----- 產品 ----- */
    .s1 .icon + img{margin:0 0 0 75px;}
    .optive.p4 .pic .icon, 
    .optive.p5 .pic .icon {bottom: calc(var(--tagW) * 0.7); right: calc(var(--tagW) * 0.05);}
    .pic .icon {bottom:calc(var(--tagW) * 0.73); right: calc(var(--tagW) * 0.05);}
    .pr1 .pic .h1{top:calc(var(--tagW) * 0.15); left: calc((var(--tagW) * 0.019) * 3.3);}
    .pr1 .pic .h2{top:calc(var(--tagW) * 0.4); left:calc((var(--tagW) * 0.019) * 3.3);}
    .pr2 .pic .h1{top:calc(var(--tagW) * 0.13); left: calc(var(--tagW) * 0.1);}
    .pr2 .pic .h2{top:calc(var(--tagW) * 0.3); left: calc((var(--tagW) * 0.03) * 1.5);}
    .pr3 .pic .h1 {top:calc(var(--tagW) * 0.2);left: calc(var(--tagW) * 0.2);}
    .pr3 .pic .h2 {top:calc(var(--tagW) * 0.35);left: calc((var(--tagW) * 0.04) * 0.8);}
    .pr4 .pic .h1 {top:calc(var(--tagW) * 0.15);left: calc(var(--tagW) * 0.09);}
    .pr4 .pic .h2 {top:calc(var(--tagW) * 0.4);left: calc((var(--tagW) * 0.04) * 1);}
    .po2 .pic .h1, 
    .po1 .pic .h1 {top: calc(var(--tagW) * 0.3);}
    .po3 .pic .h1 {top: calc(var(--tagW) * 0.25);}
    .po4 .pic .h1 {top: calc(var(--tagW) * 0.25);}
    .po5 .pic .h1 {top: calc(var(--tagW) * 0.25);left: calc(var(--tagW) * 0.1);}
    
    /* ----- 關於我們 ----- */
    .aboutBox .floatL,
    .aboutBox .floatR{width:40%;}
    .aboutBox .container{padding:0 40px;}
    .aboutBox span{position:relative; display:block;}
    
    /* ---------- 20230617-須更新 ---------- */
    /*首頁*/
    .index .container {max-width:100%;}
    .indexBlock.b3 .title{width:58px; max-width:58px;}
    .kv,
    .kv ul,
    .kv ul li {height:350px; width:100%; max-width:640px;}
    #block1{top: 0;}
    #block2{top: 0;}
    #block3{top:-200px;}
    #block4{top:-100px;}
    #block5{top: 0;}
    
    .indexBlock.b1 dt {height:198px;}
    .indexBlock.b1 dd b{height:88px;}
    .indexBlock.b1 dl{padding-top:110px; height:166px;}
    .indexBlock.b1{height:280px;}
    
    .indexBlock.b2{margin-top:-114px;}
    .indexBlock.b2 dl{padding-top:99px;}
    .indexBlock.b2 dt{width:274px; height:286px;}
        
    /*產品動畫*/
    .s1 header .container{position:relative; z-index:-2; display:none;}
    .product .container{position:relative; z-index:2;}
    .pic .hit,
    .pic .icon,
    .pic img,
    .product .goodsWordBox,
    .pic .hit{opacity:1; animation:fadeInAnimation .5s ease-in;}
    .pic .hit, 
    .pic .icon, 
    .pic img{margin:0;}
    .icon + img{margin:0 0 0 75px;}
    
    .index header,
    .index header .container{z-index:9999; display:inline-block; opacity:1;}
    
    @keyframes fadeInAnimation {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
    }
    /* ---------- 20230617-須更新 END ---------- */
    
    /* ---------- 20230620-須更新 ---------- */
    .goodsWordBox .groupBox.style1 ul li{height:157px;}
    .goodsWordBox .groupBox.style1 ul li:last-child span{padding-left:20px;}
    .goodsWordBox .groupBox.style1 ul li:last-child br{display:none;}
    /* ---------- 20230620-須更新 END ---------- */
    

}