body {
        font-size: 1rem;
        color: #415479;
        font-family: Microsoft JhengHei;
    }
    ul li{
        font-size: 14px;
    }
    a,a:hover{
        text-decoration: none;
    }
    a:hover{opacity: 0.7;}
    .container{
        max-width: 100%;
        margin-top: 3rem;
    }
    .navbar-light .navbar-nav .nav-link {
        color: #415479;
        font-size: 1rem;
    }
    .navbar-light .navbar-toggler {
        color:#4a4a4a;
        border:none;
    }
    .bg {
        background-color: #ff6b6b;
        height: 132px;
        margin: 0 -15px !important;
    }
    .indexbg{
        height: 240px;
        background-color: #ff6b6b;
        margin: 0 -15px !important;
    }

    .title {
        font-size: 24px;
        color: #415479;
        margin-bottom: 24px;
        margin-top: 32px;
        text-align: center;
    }
/* Header */
#header {
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	background: rgb(255, 255, 255);
	box-shadow: 0 0 0.15rem 0 rgba(0, 0, 0, 0.1);
}
#header .menu-toggle {
    display: block;
    position: fixed;
    width: 20px;
    height: 20px;
    top: 8px;
    right: 12px;
    z-index: 999;
}
#header h1 {
    position: relative;
    left: 1rem;
    top: -0.8rem;
    cursor: default;
    margin-bottom:-0.1rem;
}
#header h1 a {
	font-size: 1.25rem;
}
#header .menu-toggle .one, #header .menu-toggle .two, #header .menu-toggle .three {
    width: 100%;
    height: 2px;
    background-color: #39454b;
    margin: 6px auto;
    backface-visibility: hidden;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#header .menu-toggle.on .one {
    -moz-transform: rotate(45deg) translate(3px, 8px);
    -ms-transform: rotate(45deg) translate(3px, 8px);
    -webkit-transform: rotate(45deg) translate(3px, 8px);
    transform: rotate(45deg) translate(3px, 8px);
}
#header .menu-toggle.on .two {
    opacity: 0;
}
#header .menu-toggle.on .three {
    -moz-transform: rotate(-45deg) translate(3px, -8px);
    -ms-transform: rotate(-45deg) translate(3px, -8px);
    -webkit-transform: rotate(-45deg) translate(3px, -8px);
    transform: rotate(-45deg) translate(3px, -8px);
}
#header nav {
    position: relative;
    display: none;
    right: 0;
    height: auto;
    background-color: #FFF;
}
#header nav.on {
    display: block;
}
#header nav ul{
    padding:0;
}
#header nav ul li {
    font-size: 1rem;
    display: block;
    margin: 0;
    text-align: center;
    padding: 1rem 0 ;
    border-top:1px solid #cccccc;
}
#header nav ul li a{
    color:#415479;
}
    .indexlogo {
        font-size: 40px;
        color: white;
        line-height: 42px;
        text-align: left;
        padding: 3rem 2rem;
    }

    .logo {
        font-size: 32px;
        color: white;
        line-height: 42px;
        text-align: center;
        padding: 2rem;
    }
    .coach{
        font-size: 18px;
        margin-bottom: 16px;
    }

    .underline {
        width: 160px;
        border-bottom: 2px solid white;
        margin-top: 9px;
    }

    .wrap {
        max-width: 720px;
        margin:1.25rem auto 2rem auto;
    }
    .wrap980{
        position: relative;
        max-width: 980px;
    }
    .wrap576{
        max-width: 576px;
    }
    .wrap_coach {
        max-width: 512px;
        margin: 1.25rem auto 3rem auto;
    }
    .btn576{
        width: 100%;
        height: 84px;
        border-radius: 4px;
        border: solid 1px #cccccc;
        background-color: #ffffff;
        margin:1rem 0;
        position: relative;
    }
    .line1{
        position: absolute;
        font-size: 18px;
        font-weight: 500;
        color:#415479;
        top:22px;
        left:92px;
    }
    .line2{
        position: absolute;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.33;
        color: #878787;
        top:46px;
        left:92px;
    }
    .arrow{
        right:24px;
        top:30px;
        position: absolute;
    }
    .bticon{
        margin: 12px 16px;
    }
    .btn_next{
        width: 288px;
        height: 50px;
        border-radius: 4px;
        background-color: #415479;
        margin: 24px 0 48px 0;
      }
      .btn_next>a,.btn_248>a{
          display: block;
          line-height: 50px;
          color: #fff;
      }
      .btn_next>a:hover,.btn_248>a:hover{
          color:white;
          text-decoration: none;
      }
      .btn_248{
        width: 248px;
        height: 50px;
        border-radius: 4px;
        background-color: #415479;
        margin: 24px 0;
      }
    .car{
        width: 160px;
        height: 160px;
        border-radius: 80px;

        display: inline-block;
        margin-top: 30px;
    }
    .car img{
        width:100%;
    }

    .cardtype {
        position: relative;
        width: 32.333%;
        display: inline-block;
        text-align: center;
    }
    .name{
        font-size: 24px;
        margin-top: 8px;
        margin-bottom: 8px;
        color: #415479;
    }

    .telfone {
        color: #333333;
        line-height: 48px;
    }

    .footer {
        height: 48px;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        width: 100%;
        /* margin: 0 30px 0 -15px; */

    }
    .icon{
        height: 32px;
        width: 32px;
        margin:8px 0 8px 8px;
    }
    .ft14{
        font-size: 14px;
        font-weight: 300;
    }
    .ft21{
        font-size: 21px;
        line-height: 29px;
    }
    .plus{
        color:#ffffff;
        font-weight: 500;

    }
    /* coaching page */
    .pic{
        max-width: 512px;
        margin:32px 0 24px 0;
        background-color: lightgray;
    }
    .right270{
        right:1rem;
        top:24px;
        width: 384px;
        height: 242px;
        position:absolute;
    }
    .prohibit{
        width:140px;
        height: 160px;
      display: inline-block;
       justify-content: between;
       margin: .8rem;
    }
    .bg_gray{
        
        width: 100%;
        background-color: #f6f6f6;
            
            height: 100%;
            border-radius: 4px;
    }
    .panel{
        border-bottom: #cccccc 1px solid;
        padding:1rem 0 0.5rem 0;
    }
    .panel-heading .pl-3{
        padding: .1rem .4rem!important;
    }
    .panel-heading>a{
        right: -.25rem;
        top: .05rem;
        position: absolute;
        background-color: #757575;
        font-size: .72rem;
        border-radius: 60px;
    }
    .panel-heading> a:hover{
        color:#FFF;
    }
    .panel-heading .accordion-toggle:before {
        /* 展開 */
        content: " - ";
        }
    .panel-heading .accordion-toggle.collapsed:before {
        /* 合 */
        content: " + ";
        }
        .div{
            width:93%;
        }
    .page{
        margin:2rem auto 0 auto;
    }
    .page a{
        color:#333333;
        margin:0 0.5rem;
    }
    .pagebg{
        border-radius: 50%;
        margin: 1px;
        text-decoration: underline;
    }
    .nav-tabs .nav-link.active{
        color: #415479;
        background-color: #fff;
        border-bottom: 2px solid #415479;
        border-top: #fff;
        border-left:#fff;
        border-right:#fff;
    }
    .return, .return:visited{
        font-size: 24px;
        color: #dee2e6;
    }
    .ft16{
        font-size: 16px;

    }
    .tb{
        background: #415479;
        color: white;
        font-size: 12px;
        font-weight: normal;
        width: 33%;
        text-align: center;
    }
    .tdbg{
        background-color: #f6f6f6;
        font-weight: 300;
        font-size: 12px;
    }
    .remark{
        color:  #e95153;
        font-size: 12px;
        font-weight: 400;
    }
    #navbarSupportedContent1 {
        z-index: 1000;
    }

    @media (min-width: 1200px) {
        .container {
            max-width: 1440px;
        }
    }

    @media (max-width: 720px) {
        .container {
            max-width: 1440px;
        }
        .right270{
            width: 247px;
            height: 156px;
            transition: .5s;
            top: 120px;
            right: 36px;
        }
        .bticon{
            margin: 12px 8px;
            transition: .5s;
        }
        .line1{

            top:14px;
            left:76px;
        }
        .line2{

            top:38px;
            left:76px;
            width: 177px;
            transition: .5s;
        }
        .arrow{
            right:8px;
            transition: .5s;
        }
        .car{
            width: 120px;
            height: 120px;
            border-radius: 60px;
            display: inline-block;
            transition: .5s;
        }
        .cardtype {
        position: relative;
        width: 48%;
        display: inline-block;
        text-align: center;
        }
        .indexlogo{
            font-size: 32px;
            transition: .5s;
        }
        .pic{
            width: 288px;
            background-color: lightgray;
            transition: .5s;
            margin:32px auto 24px auto;
        }
        .prohibit{
            width: 140px;
            height: 160px;
           margin: .5rem;
           display: block;
           margin-left: auto;
           margin-right: auto;
        }
        .btn_248{
            width: 288px;
            height: 50px;
            border-radius: 4px;
            background-color: #415479;
            margin: 24px 0;
          }
        .btn_separate{
            display: block !important;
        }

    
    }