/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2020/10/5, 上午 11:53:25
    Author     : 120160808
*/

@media (max-width: 576px) {
    
    .img-fluid-container img {
        max-width: 100%;
        height: auto;
        /*width: auto;*/
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .top-notify {
        text-align: justify;
    }
    
    .sticky-offset {
        top: 60px;
    }

    .list-group.sticky-top {
        height: auto;
;
    }
    
    #news_detail a {
        word-break: break-all;
    }
    
    #logo img {
        width: auto;
        height: 50px;
    }
    .dropdown-item {
        padding: .5rem 1.5rem;
    }
    
    #navbar_top .nav-item {
        border-top: 1px solid #e8ebed;
    }
    #navbar_top .nav-item .nav-link {
        padding: .5rem 1rem;
    }
    #navbar_top .dropdown-item {
        padding: .5rem 2rem;
    }
    #navbar_top .dropdown-toggle::after {
        position: absolute;
        top: 20px;
        right: 1rem;
        font-size: 20px;
        color: inherit;
    }
    .btco-hover-menu .show > .dropdown-toggle::after {
        transform: rotate(90deg);
    }

    #mobile-toolbar .nav-item .nav-link {
        padding: 1rem;
    }
    #mobile-toolbar .badge {
        top: 5px;
        right: 5px;
    }
    
    .btn-lg, .btn-group-lg > .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.9375rem;
        line-height: 1.5;
        border-radius: 0.25rem;
    }
    
    /**
     * 工具列
     */
    .toolbar {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background: #fff;
        border-top: 1px solid #46bbe8;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        z-index: 999;
    }
    .toolbar img {
        display: block;
        margin: 0px auto;
        margin-bottom: 2px;
    }

    .tab-link {
        background-color: #fff;
        text-decoration: none;
        padding: 4px 0 2px;
        width: 20%;
        display: block;
        float: left;
        text-align: center;
    }

    .toolbar-inner {
        margin: 0;
        padding: 0;
    }
    .tabbar-label {
        color: #46bbe8;
        font-size: 12px;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24px;
        width: 100%;
        text-align: center;
    }
    .tab-link > a {
        color: #46bbe8;
        text-decoration: none;
    }
    .tab-link:first-child {
        border-top-left-radius: 12px;
    }
    .tab-link:last-child {
        border-top-right-radius: 12px;
    }
    .tab-link .tabbar-menu {
        display: none;
    }
    .tab-link:hover,
    .tab-link:focus,
    .tab-link:active{
        background-color: #f5f5f5;
    }
    .tab-link:hover .tabbar-menu,
    .tab-link:focus .tabbar-menu,
    .tab-link:active .tabbar-menu {
        display: block;
    }
    .tabbar .tabbar-menu {
        position: absolute;
        bottom: 0px;
        background: #46bbe8;
        width: 100%;
        margin: 0;
        z-index: -1;
        padding: 15px 10px;
        left: 0;
        padding-bottom: 70px;
        box-sizing: border-box;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    ul.tabbar-menu li {
        color: #fff;
        width: 21%;
        float: left;
        list-style: none;
        font-size: 12px;
        line-height: 14px;
        padding: 0 2px;
        border: 1px solid;
        box-sizing: border-box;
        margin: 2%;
        height: 4em;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tabbar-menu a {
        color: #fff;
        text-decoration: none;
        display: block;
        width: 100%;
        /*height: 100%;*/
    }
    li.divider {
        height: 1px !important;
        margin: 2% 2% !important;
        overflow: hidden;
        background-color: #fff;
        display: block !important;
        width: 96% !important;
        border: none !important;
    }
    
    /*
     * 麵包屑
     */
    .guide { 
        display: none;
    }
    
    /*
     * 社群分享
     */
    .social-container {
        display: none;
        bottom: 0;
        top: 60px;
        width: 100%;
        height: 54px;
        margin-top: 0;
        text-align: center;
    }
    .social-container .fb-like {
        display: inline-block;
        vertical-align: top;
    }
    .social-container img {
        width: 40px;
        height: 40px;
        display: inline-block; 
        vertical-align: top;
    }
    
    /*
     * 進度條
     */
	.register_area{
		margin-top:30px;
		padding:0 20px;
	}
	.register_step{
        padding: 30px 0 40px 0;
        margin: 0;
        overflow: hidden;
	}
	.step_line{
		width:70%;
		border-top: 2px solid #ccc;
		position:relative;
		margin:auto;
	}
	.step_line.cart{
		width:80%;
		border-top: 2px solid #ccc;
		position:relative;
		margin:auto;
	}
	.step_item{
		width:20px;
		position:absolute;
		top:-12px;
	}
	.dot{
		width:20px;
		height:20px;
		border:1px solid #e3e3e3;
		background:#fff;
		border-radius:50%;
		display:block;
	}
	.dot.now{
		/*width:40px;*/
		/*height:40px;*/
		background: #46bbe8;
		border-radius:50%;
		display:block;
		/*border:none;*/
	}
	.step_text{
		width:200px;
		text-align:center;
		font-size:12px;
		position:absolute;
		left:50%;
		margin-left:-100px;
		/*letter-spacing:-1px;*/
	}
	.step_text span{
		display:none;
	}
	.step_text.now{
		color: #46bbe8;
	}
	.step1{
		left: -15px;
	}
	.step2{
		left: 15%;
	}
	.step3{
		left: 35%;
	}
	.step4{
		left: 55%;
	}
	.step5{
		left: 75%;
	}
	.step6{
		right: -15px;
	}
    
    /*
     * 購物車頁面
     */
    .border_box_1 {
        border: 0;
        padding: 0;
        margin-top: 0;
    }
    .badge {
        right: -6px;
    }
    
    /*
     * 首頁
     */
    .swiper-banner-title {
        font-size: 1.6rem;
    }
    .swiper-banner-description {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
    .swiper-play-cover {
        opacity: 1;
    }
    #swiper-banner {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    #swiper-banner .swiper-slide {
        padding-top: 75%;
    }
    #swiper-1 .swiper-slide {
        height: auto;
    }
    .swiper-pagination {
        display: none;
    }
    
    /*
     * 首頁-區塊
     */
    .section-container {
        padding: 2rem 0;
    }
    #section-2 .card {
        text-align: center;
    }
    #section-2 .card-title {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    #section-2 .col-6.card-group:nth-child(odd) {
        padding-right: 7.5px;
    }
    #section-2 .col-6.card-group:nth-child(even) {
        padding-left: 7.5px;
    }
    .section-title h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    .section-description {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

}