@media screen and (min-width: 1280px) {

/*---------------交通指南 -----------*/

            .traffic{
                width: 80%;
                min-width: 1200px;
                max-width: 1600px;
                position: relative;
                margin: 0 auto;
                padding: 64px;
                box-sizing: border-box;
                background: #f5f5f5;
            }

/*---------------交通指南 標題-----------*/

            .traffic .title{
                width: 100%;
                margin-bottom:32px; 
            }

            .traffic .title h2{
                font-size: 34px;
                line-height: 50px;
                letter-spacing: 4px;
                color: #ad0117;
                transform: skew(-15deg);
            }

/*---------------交通指南 地圖-----------*/

            .traffic .item{
                width: 100%;
            }
            
            .traffic .item .map{
                width: 100%;
                padding:32px;
                box-sizing: border-box; 
                text-align: center;
                border: .5px solid #ccc;
                margin-bottom:48px; 
            }

            .traffic .item .map img{
                width: 60%;
            }

/*---------------交通指南 方式-----------*/

            .traffic .item .text{
                width: 100%;
                font-size: 0;
                margin-bottom:64px; 
            }

            .traffic .item .text .box{
                width: 31.3%;
                height: 1200px;
                display: inline-block;
                vertical-align: top;
                background: #fff;
                padding: 48px 32px;
                box-sizing: border-box;
            }

            .traffic .item .text .box +.box{
                margin-left:3%; 
            }

            .traffic .item .text .box .s_title{
                text-align: center;
                margin-bottom:32px; 
            }

            .traffic .item .text .box .s_title div{
                width: 100px;
                height: 50px;
                margin: 0 auto;
            }

            .traffic .item .text .box .s_title div::before{
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title div img{
                height: 32px;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title img.special{
                height: 40px;
            }

            .traffic .item .text .box .s_title h3{
                font-size: 22px;
                letter-spacing: 3px;
                line-height: 40px;
                color: #ab0318;
                transform: skew(-8deg);
            }

            .traffic .item .text .box .s_box{
                margin-bottom: 32px;
            }

            .traffic .item .text .box .s_box h5{
                font-size: 17px;
                letter-spacing: 1px;
                line-height: 27px;
                color: #333;
                margin-bottom:12px; 
            }

            .traffic .item .text .box .s_box p{
                font-size: 15px;
                letter-spacing: .5px;
                line-height: 25px;
                color: #333;
                margin-bottom:12px;
                word-break: break-all;
            }

            .traffic .item .text .box .s_box p img{
                width: 11px;
                margin-right:8px; 
            }

/*---------------交通指南 時刻表-----------*/

            .traffic .item .schedule{
                width: 100%;
            }

            .traffic .item .schedule h4{
                font-size: 20px;
                line-height: 48px;
                letter-spacing: 1px;
                color: #ad0117;
                transform: skew(-8deg);
                position: relative;
                padding-left:18px;
                border-bottom:1px solid #333;
                margin-bottom:32px; 
            }

            .traffic .item .schedule h4::before{
                content: '';
                width: 8px;
                height: 20px;
                background: #ad0117;
                transform: skew(-8deg);
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .traffic .item .schedule a{
                display: none;
            }

            .traffic .item .schedule .detail{
                width: 100%;
                font-size: 0;
            }

            .traffic .item .schedule .detail .box{
                width: 16%;
                display: inline-block;
                vertical-align: top;
            }

            .traffic .item .schedule .detail .box.short{
                width: 14%;
            }

            .traffic .item .schedule .detail .box.long{
                width: 20%;
            }

            .traffic .item .schedule .detail .box h6{
                font-size: 15px;
                letter-spacing: .5px;
                color: #333;
                margin-bottom:12px;
            }

            .traffic .item .schedule .detail .box p{
                font-size: 15px;
                font-weight: 600;
                letter-spacing: 1px;
                color: #af0318;
                padding:12px 0;
                border-top:.5px solid #ccc; 
            }

            .traffic .item .schedule .detail .box p span{
                display: none;
            }

            .traffic .item .schedule .detail .box p:last-child{
                border-bottom:.5px solid #ccc; 
            }
            


    }














     @media screen and (min-width: 1024px) and (max-width: 1279px) {


/*---------------交通指南 -----------*/

            .traffic{
                width: 90%;
                position: relative;
                margin: 0 auto;
                padding: 32px;
                box-sizing: border-box;
                background: #f5f5f5;
            }

/*---------------交通指南 標題-----------*/

            .traffic .title{
                width: 100%;
                margin-bottom:32px; 
            }

            .traffic .title h2{
                font-size: 34px;
                line-height: 50px;
                letter-spacing: 4px;
                color: #ad0117;
                transform: skew(-15deg);
            }

/*---------------交通指南 地圖-----------*/

            .traffic .item{
                width: 100%;
            }
            
            .traffic .item .map{
                width: 100%;
                padding:32px;
                box-sizing: border-box; 
                text-align: center;
                border: .5px solid #ccc;
                margin-bottom:48px; 
            }

            .traffic .item .map img{
                width: 60%;
            }

/*---------------交通指南 方式-----------*/

            .traffic .item .text{
                width: 100%;
                font-size: 0;
                margin-bottom:64px; 
            }

            .traffic .item .text .box{
                width: 31.3%;
                height: 800px;
                display: inline-block;
                vertical-align: top;
                background: #fff;
                padding: 48px 32px;
                box-sizing: border-box;
            }

            .traffic .item .text .box +.box{
                margin-left:3%; 
            }

            .traffic .item .text .box .s_title{
                text-align: center;
                margin-bottom:32px; 
            }

            .traffic .item .text .box .s_title div{
                width: 100px;
                height: 50px;
                margin: 0 auto;
            }

            .traffic .item .text .box .s_title div::before{
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title div img{
                height: 32px;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title img.special{
                height: 40px;
            }

            .traffic .item .text .box .s_title h3{
                font-size: 22px;
                letter-spacing: 3px;
                line-height: 40px;
                color: #ab0318;
                transform: skew(-8deg);
            }

            .traffic .item .text .box .s_box{
                margin-bottom: 32px;
            }

            .traffic .item .text .box .s_box h5{
                font-size: 17px;
                letter-spacing: 1px;
                line-height: 27px;
                color: #333;
                margin-bottom:12px; 
            }

            .traffic .item .text .box .s_box p{
                font-size: 14px;
                letter-spacing: .5px;
                line-height: 25px;
                color: #333;
                margin-bottom:12px; 
                word-break: break-all;
            }

            .traffic .item .text .box .s_box p img{
                width: 11px;
                margin-right:8px; 
            }

/*---------------交通指南 時刻表-----------*/

            .traffic .item .schedule{
                width: 100%;
            }

            .traffic .item .schedule h4{
                font-size: 20px;
                line-height: 48px;
                letter-spacing: 1px;
                color: #ad0117;
                transform: skew(-8deg);
                position: relative;
                padding-left:18px;
                border-bottom:1px solid #333;
                margin-bottom:32px; 
            }

            .traffic .item .schedule h4::before{
                content: '';
                width: 8px;
                height: 20px;
                background: #ad0117;
                transform: skew(-8deg);
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .traffic .item .schedule a{
                display: none;
            }

            .traffic .item .schedule .detail{
                width: 100%;
                font-size: 0;
            }

            .traffic .item .schedule .detail .box{
                width: 25%;
                display: inline-block;
                vertical-align: top;
            }

            .traffic .item .schedule .detail .box.m_hide{
                display: none;
            }

            .traffic .item .schedule .detail .box h6{
                font-size: 15px;
                letter-spacing: .5px;
                color: #333;
                margin-bottom:12px;
            }

            .traffic .item .schedule .detail .box p{
                font-size: 15px;
                font-weight: 600;
                letter-spacing: 1px;
                color: #af0318;
                padding:12px 0;
                border-top:.5px solid #ccc;
                word-break: break-all;
            }

            .traffic .item .schedule .detail .box p span{
                margin-left:36px; 
            }

            .traffic .item .schedule .detail .box p:last-child{
                border-bottom:.5px solid #ccc; 
            }
            

            
    }




















        @media screen and (min-width: 768px) and (max-width: 1023px) {


/*---------------交通指南 -----------*/

            .traffic{
                width: 90%;
                position: relative;
                margin: 0 auto;
                padding: 32px;
                box-sizing: border-box;
                background: #f5f5f5;
            }

/*---------------交通指南 標題-----------*/

            .traffic .title{
                width: 100%;
                margin-bottom:32px; 
            }

            .traffic .title h2{
                font-size: 34px;
                line-height: 50px;
                letter-spacing: 4px;
                color: #ad0117;
                transform: skew(-15deg);
            }

/*---------------交通指南 地圖-----------*/

            .traffic .item{
                width: 100%;
            }
            
            .traffic .item .map{
                width: 100%;
                padding:32px;
                box-sizing: border-box; 
                text-align: center;
                border: .5px solid #ccc;
                margin-bottom:48px; 
            }

            .traffic .item .map img{
                width: 60%;
            }

/*---------------交通指南 方式-----------*/

            .traffic .item .text{
                width: 100%;
                font-size: 0;
                margin-bottom:64px; 
            }

            .traffic .item .text .box{
                width: 100%;
                background: #fff;
                padding: 32px;
                box-sizing: border-box;
                margin-bottom:32px; 
            }

            .traffic .item .text .box .s_title{
                text-align: center;
                margin-bottom:32px;
            }

            .traffic .item .text .box .s_title div{
                width: 100px;
                height: 50px;
                margin: 0 auto;
            }

            .traffic .item .text .box .s_title div::before{
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title div img{
                height: 32px;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title img.special{
                height: 40px;
            }

            .traffic .item .text .box .s_title h3{
                font-size: 22px;
                letter-spacing: 3px;
                line-height: 40px;
                color: #ab0318;
                transform: skew(-8deg);
            }

            .traffic .item .text .box .s_box{
                display: inline-block;
                vertical-align: top;
                width: 48.5%;
                margin-bottom: 32px;
            }

            .traffic .item .text .box .s_box + .s_box{
                margin-left:3%; 
            }

            .traffic .item .text .box .s_box h5{
                font-size: 17px;
                letter-spacing: 1px;
                line-height: 27px;
                color: #333;
                margin-bottom:12px; 
            }

            .traffic .item .text .box .s_box p{
                font-size: 14px;
                letter-spacing: .5px;
                line-height: 25px;
                color: #333;
                margin-bottom:12px;
                word-break: break-all;
            }

            .traffic .item .text .box .s_box p img{
                width: 11px;
                margin-right:8px; 
            }

/*---------------交通指南 時刻表-----------*/

            .traffic .item .schedule{
                width: 100%;
            }

            .traffic .item .schedule h4{
                font-size: 20px;
                line-height: 48px;
                letter-spacing: 1px;
                color: #ad0117;
                transform: skew(-8deg);
                position: relative;
                padding-left:18px;
                border-bottom:1px solid #333;
                margin-bottom:32px; 
            }

            .traffic .item .schedule h4::before{
                content: '';
                width: 8px;
                height: 20px;
                background: #ad0117;
                transform: skew(-8deg);
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .traffic .item .schedule a{
                display: none;
            }

            .traffic .item .schedule .detail{
                width: 100%;
                font-size: 0;
                text-align: center;
            }

            .traffic .item .schedule .detail .box{
                width: 45%;
                display: inline-block;
                vertical-align: top;
                text-align: left;
                margin-bottom:32px; 
            }

            .traffic .item .schedule .detail .box.m_hide{
                display: none;
            }

            .traffic .item .schedule .detail .box h6{
                font-size: 16px;
                letter-spacing: 1px;
                color: #333;
                margin-bottom:12px;
            }

            .traffic .item .schedule .detail .box p{
                font-size: 15px;
                font-weight: 600;
                letter-spacing: 1px;
                color: #af0318;
                padding:12px 0;
                border-top:.5px solid #ccc; 
            }

            .traffic .item .schedule .detail .box p span{
                margin-left:36px; 
            }

            .traffic .item .schedule .detail .box p:last-child{
                border-bottom:.5px solid #ccc; 
            }
            

            
    }















         @media screen and (max-width: 767px) {

        
/*---------------交通指南 -----------*/

            .traffic{
                width: 90%;
                position: relative;
                margin: 0 auto;
                padding: 16px;
                box-sizing: border-box;
                background: #f5f5f5;
            }

/*---------------交通指南 標題-----------*/

            .traffic .title{
                width: 100%;
                margin-bottom:24px; 
            }

            .traffic .title h2{
                font-size: 34px;
                line-height: 50px;
                letter-spacing: 4px;
                color: #ad0117;
                transform: skew(-15deg);
            }

/*---------------交通指南 地圖-----------*/

            .traffic .item{
                width: 100%;
            }
            
            .traffic .item .map{
                width: 100%;
                padding:12px;
                box-sizing: border-box; 
                text-align: center;
                border: .5px solid #ccc;
                margin-bottom:24px; 
            }

            .traffic .item .map img{
                width: 100%;
            }

/*---------------交通指南 方式-----------*/

            .traffic .item .text{
                width: 100%;
                font-size: 0;
            }

            .traffic .item .text .box{
                width: 100%;
                background: #fff;
                padding: 24px;
                box-sizing: border-box;
                margin-bottom:32px; 
            }

            .traffic .item .text .box .s_title{
                text-align: center;
                margin-bottom:32px;
            }

            .traffic .item .text .box .s_title div{
                width: 100px;
                height: 50px;
                margin: 0 auto;
            }

            .traffic .item .text .box .s_title div::before{
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title div img{
                height: 32px;
                display: inline-block;
                vertical-align: middle;
            }

            .traffic .item .text .box .s_title img.special{
                height: 40px;
            }

            .traffic .item .text .box .s_title h3{
                font-size: 22px;
                letter-spacing: 3px;
                line-height: 40px;
                color: #ab0318;
                transform: skew(-8deg);
            }

            .traffic .item .text .box .s_box{
                width: 100%;
            }

            .traffic .item .text .box .s_box + .s_box{
                margin-top: 32px;
            }

            .traffic .item .text .box .s_box h5{
                font-size: 17px;
                letter-spacing: 1px;
                line-height: 27px;
                color: #333;
                margin-bottom:12px; 
            }

            .traffic .item .text .box .s_box p{
                font-size: 14px;
                letter-spacing: .5px;
                line-height: 25px;
                color: #333;
                margin-bottom:12px; 
            }

            .traffic .item .text .box .s_box p img{
                width: 11px;
                margin-right:8px; 
            }

/*---------------交通指南 時刻表-----------*/

            .traffic .item .schedule{
                width: 100%;
                position: relative;
            }

            .traffic .item .schedule h4{
                font-size: 20px;
                line-height: 48px;
                letter-spacing: 1px;
                color: #ad0117;
                transform: skew(-8deg);
                position: relative;
                padding-left:18px;
                border-bottom:1px solid #333;
                margin-bottom:32px; 
            }

            .traffic .item .schedule h4::before{
                content: '';
                width: 8px;
                height: 20px;
                background: #ad0117;
                transform: skew(-8deg);
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .traffic .item .schedule a{
                width: 30px;
                position: absolute;
                right: 0;
                top: 88px;
            }

            .traffic .item .schedule a img{
                width: 100%;
            }

            .traffic .item .schedule .m_right{
                right: 0;
                top: 88px;
            }

            .traffic .item .schedule .m_left{
                left: 0;
                top: 88px;
            }

            .traffic .item .schedule .detail{
                width: 77%;
                height: 672px;
                font-size: 0;
                text-align: center;
                position: relative;
                margin: 0 auto;
                overflow: hidden;
            }

            .traffic .item .schedule .detail .box{
                width: 100%;
                position: absolute;
                left: -100%;
                top: 0;
            }

            .traffic .item .schedule .detail .box.m_hide{
                display: none;
            }

            .traffic .item .schedule .detail .box h6{
                font-size: 16px;
                letter-spacing: 1px;
                color: #333;
                margin-bottom:12px;
            }

            .traffic .item .schedule .detail .box p{
                font-size: 15px;
                font-weight: 600;
                letter-spacing: 1px;
                color: #af0318;
                padding:12px 0;
                border-top:.5px solid #ccc; 
            }

            .traffic .item .schedule .detail .box p span{
                margin-left:72px; 
            }

            .traffic .item .schedule .detail .box p:last-child{
                border-bottom:.5px solid #ccc; 
            }
            

    }