/*當螢幕寬度在 400px ~ 700px，有支援 Media Type 就套用 css 設定*/
@media only screen and (min-width: 400px) and (max-width: 700px){
}

@media (min-width: 768px){
	.nav-tabs{
		display:-webkit-flex;
		display:flex
	}
	.nav-justified li{
		flex:1
	}
	.nav-tabs.nav-justified>li {
	    display: table-cell;
	    width: 1%;
	}
	
}

@media (max-width: 480px){
	
	.article_list.small .item .item_header {
	    width: 100%;
	    height: auto;
	    margin: 0;
	}
	.article_list.small .item .item_header img {
	    max-width: 100%;
	    width: 100%;
	    height: auto;
	    margin-left: 0;
	}
	.article_list .item .item_content h2 {
	    font-size: 16px;
	    line-height: 26px;
	    margin: 0 0 5px;
	    font-weight: 600;
	}
	
}

@media (max-width:768px){

	.div_cell_fix{
		padding: 5% 0 0 5px;
	}

	.big_show{
		display:none;
	}
	
	#domainBar_Hamburger{
		display:inline-block;
		margin-bottom:35px;
		overflow:visible;
		cursor:default;
	}
	
	.menu-navbar .nav-link [class^=fa-],.menu-navbar .nav-link [class^=ti-]{
		font-size:2em
	}
	
	.menu-navbar .navbar-nav{
		flex-direction:row;
		-ms-flex-direction:row
	}
	
	.menu-navbar .navbar-right li{
		padding:0 .75rem
	}
	.copyright__inner{
		display:block;
		text-align:center;
	}
	.copyright{
		margin-bottom:7px;
	}
	.footer__menu{
		justify-content:center;
		display:flex;
		flex-wrap:wrap;
	}
	
	.footer__menu::after{
		content:'';
		width:100%;
	}
	.column-labels{
		display:none;
	}
	.product-cart:not(:last-of-type){
		margin-bottom:15px;
	}
	.product-cart{
		border:1px solid #eee;
		padding-left:15px;
		padding-right:15px;
	}
	.product-removal{
		float:right;
		width:inherit;
	}
	.product-image{
		width:auto;
		margin-right:10px;
	}
	.product-details{
		margin-bottom:10px;
	}
	.product-details,.product-price,.product-quantity{
		width:auto;
		float:none;
	}
	.product-line-price{
		float:right;
		font-size:1.2em;
		width:50%;
	}
	.product-cart .product-column{
		height:unset;
	}
	.checkout__back__btn,.checkout__next__btn a{
		width:100%;
		text-align:center;
	}
	.checkout__back__btn{
		padding-top:10px;
		font-size:.9em;
	}
	.coupon{
		margin-bottom:20px;
	}
	.coupon input.coupon_hashid{
		border:1px solid #ced4da;
	}
	.coupon-small{
		display:block;
		padding-bottom:20px;
	}
	.coupon-small input.coupon_hashid{
		border:1px solid #ced4da;
	}
	.checkout__next__btn a{
		width:100%;
		text-align:center;
	}
	.checkout__back__btn{
		padding-top:10px;
		font-size:.9em;
		flex-direction:row;
		justify-content:center;
	}
	
	.tab-pane{
	padding:0 5%;
	margin-bottom:30px
	}
	
	.nav-justified>li {
    display: table-cell;
    width: 50%;
	}
	
	.nav-tabs.nav-justified>li>a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    padding: 10px 19%;
	}
	
}

/*如果螢幕寬度為 768px 以下，就套用 css 設定*/
@media only screen and (max-width:768px){
	.IconLink {left:0;right:auto;top:auto;bottom:0;width:100%;height:auto;}
	.IconLink .footerbox {height:auto;position:relative;}
	.IconLink ul {font-size:0;padding:3px 0;text-align:center;}
	.IconLink ul li {display:inline-block;width:auto;height:auto;border:2px solid transparent;padding:0px;min-width:50px;}
	.IconLink ul li a img, .IconLink ul li button img {
	    display: block;
	    width: auto;
	    height: 25px;
	    margin: 0 auto 5px auto;
	    opacity: 1;
	}
	
	.IconLink ul li.pagep{
	    display: inline-block;
	}

	.novalct {left:0;right:auto;bottom:82px;width:100%;text-align:center;}
	.novalct ul {display:inline-block;background-color:#ddd;border-radius:50px;box-shadow:0 3px 8px rgba(0,0,0,0.2);padding:3px;}
	.novalct ul li {display:inline-block;width:50px;height:50px;padding:0;box-sizing:Border-box;padding:3px;}
	.novalct ul li span {border-radius:50%;background-color:#fff;}
	.novalct ul li span:hover {background-color:#f5f5f5;}
	.novalct ul li span svg {fill:#333;padding:12px;}
	.novalct ul li span:hover svg {fill:var(--color-main)}
	
	.footerbox ul li a svg {display: block;
	    width: auto;
	    height: 25px;
	    margin: 0 auto 5px auto;
	    opacity: 1;
	   	fill:#fff;
	   	padding:1px;
	   	/*
	   	padding:5px 5px 0px 5px;
	   	background-color: rgba(0,0,0,0.25);
	   	*/
	    cursor: pointer;
	    border-radius: 0.5rem;
	}
	
	.single_post.black {opacity:1;}
	.single_post.black {background-color:#666;}
	.single_post.black ul li {opacity:0.3;}
	
	.single_post.black h1{color:#eee;}

	.menu-navbar .navbar-nav{
		display:-ms-flexbox;
		display:flex;
		-ms-flex-direction:column;
		flex-direction:column;
		padding-left:0;
		margin-bottom:0;
		list-style:none;
		width:100%
	}
	
	.menu-navbar .navbar-nav .nav-item,.menu-navbar .navbar-nav .nav-link{
		width:100%
	}
	
	.navbar-nav .nav-link{
		display:none;
	}
	
	.menu-navbar .navbar-nav li:not(:first-child){
		border-top:solid 1px #eee
	}
	
	.menu-navbar .navbar-nav .nav-link{
		color:#969696;
		padding:10px
	}
	
	.menu-navbar .dropdown .dropdown-menu{
		display:none;
		opacity:1;
		visibility:visible;
		border:none;
		background:0 0
	}
	
	.menu-navbar .dropdown .dropdown-menu.show{
		display:block;
		opacity:1;
		visibility:visible
	}
	
	.navbar-hover .collapse ul ul li a.nav-link,.navbar-hover .collapse ul ul li span.nav-link{
		padding-left:1.5em
	}
	
	.navbar-hover .collapse ul ul ul li a.nav-link,.navbar-hover .collapse ul ul ul li span.nav-link{
		padding-left:3em
	}
	
	.navbar-hover .collapse ul ul ul ul li a.nav-link,.navbar-hover .collapse ul ul ul ul li span.nav-link{
		padding-left:4.5em
	}
	
	.navbar-collapse{
		padding-top:10px
	}
	
	.dropdown .dropdown-toggle::after,.navbar-hover .collapse ul ul li.dropdown .dropdown-toggle::after{
		margin-top:.3em;
		border-top:.3em solid;
		border-right:.3em solid transparent;
		border-bottom:0;
		border-left:.3em solid transparent
	}
	
	.navbar-center>li{
		padding-left:0;
		padding-right:0
	}
	
	/*shipping car*/
	.shopping_cart{
		width:90%;
	}
	.remove__btn{
		padding-right:0;
		text-align:right;
		width:20px;
	}
}

/*如果螢幕寬度為 970px 以上，就套用 css 設定*/
@media screen and (min-width: 970px) {
  .header-main-box .wrap-l .header-fixed {
    position: relative;
  }
  
  .header-mobile-btn {
    display: none;
  }

  .logo img {
    width: 100px!important;
    top: -20px!important;
    left: 0!important;
  }
  
  .wrap-mobile-nav.show {
    display: none !important;
  }
}

/*如果螢幕寬度為 991px 以下，就套用 css 設定*/
@media only screen and (max-width:991px){
	.navbar-hover .show>.dropdown-toggle::after{
		transform:rotate(-90deg)
	}
}

/*如果螢幕寬度為 992px 以上，就套用 css 設定*/
@media only screen and (min-width:992px){
	.navbar-hover .collapse ul li{
		position:relative
	}
	.navbar-hover .collapse ul li:hover>ul{
		display:block
	}
	.navbar-hover .collapse ul ul{
		position:absolute;
		top:100%;
		left:0;
		display:none
	}
	.navbar-hover .collapse ul ul ul{
		position:absolute;
		top:0;
		left:100%;
		display:none
	}
	.navbar-hover .collapse ul ul ul ul{
		position:absolute;
		top:0;
		left:100%;
		display:none;
		z-index:1
	}
}

@media (min-width: 1200px){
	
	.article_list.small .item .item_header {
	    overflow: hidden;
	    width: 200px;
	    height: auto;
	    margin: 15px;
	    float: left;
	    background-color: #000;
	}
}