﻿@media only screen {
    .toggle {
    color:#fff;
    display:block;
    font-family:sans-serif;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    position:relative;
    width:200px;
}
.toggle label {
    display:block;
    padding:3px 0;
    position:relative;
    width:100%;
    z-index:3;
}
.toggle input {
    opacity:0;
    position:absolute;
    z-index:5;
}
.toggle input:focus ~ .toggle-button {
    outline:1px dotted #6B6B6B;
}
.switch {
    border:0;
    color:#fff;
    font-family:Helvetica, Arial, serif, sans-serif, cursive, fantasy, monospace;
    font-size:18px; /*  */
    font-weight:bold;
    padding:0;
    position:relative;
    width:800px; /*original:width:670px;*/
}
.switch legend {
    color:#6B6B6B;
    display:block;
    float:left;
    font-size:16px;
    line-height:10px;
    padding:12px 1% 3px 0;
    text-align:right;
    width:40%;
    font-style: italic;
    margin-left: 15px;
}
.switch input {
    opacity:0;
    position:absolute;
}
.switch legend:after {
    border-radius:3px;
    content:'';
    height:100%;
    left:50%;
    padding:2px;
    position:absolute;
    top:0;
    width:50%;
    z-index:0;
}
.switch label {
    color:#B0B0B0;
    cursor:pointer;
    float:left;
    margin-top:2px;
    padding:5px 0 3px 0;
    position:relative;
    text-align:center;
    width:25%;
    z-index:2;
}
.switch input:checked + label { /* 選取後之字幕 */
    color:#004A92;
    moz-transition:all 0.4s ease-in 0s;
    o-transition:all 0.4s ease-in 0s;
    transition:all 0.4s ease-in 0s;
    webkit-transition:all 0.4s ease-in 0s;
}
.switch input:focus + label { /* 選取後之背景 */
    background-color:#D0D0D0;
    moz-transition:all 0.4s ease-in 0s;
    o-transition:all 0.4s ease-in 0s;
    transition:all 0.4s ease-in 0s;
    webkit-transition:all 0.4s ease-in 0s;
}
.switch .switch-button {/* 選取後之底線 */
    border-bottom:solid 1px #004A92;
    clear:both;
    height:100%;
    left:41%;
    margin:2px;
    margin-left:18px;
    moz-transition:all 0.3s ease-out;
    o-transition:all 0.3s ease-out;
    position:absolute;
    top:0;
    transition:all 0.3s ease-out;
    webkit-transition:all 0.3s ease-out;
    z-index:1;
}
.switch input:last-of-type:checked ~ .switch-button {
    left:75%;
}
.switch.switch-two label {
    width:16.6%;
}
.switch.switch-two .switch-button {
    width:16%;
}
.switch.switch-two input:checked:nth-of-type(2) ~ .switch-button {
    left:66.6%;
}
.switch.switch-two input:checked:last-of-type ~ .switch-button {
    left:57.5%; /*original left:66.26%;*/
}

.switch.fcRed .switch-button {
    border-bottom:solid 1px red;
}
.switch.fcRed input:checked + label {
    color:red;
}
}

.spaceEmOut {
    margin-bottom:15px;
    position:relative;
    left:-160px;
    
}

.row.pad-btm-40 {
    margin-left:-20px;
}


  