/* 縮小失敗。正在傳回未縮小的內容。
(1658,98): run-time error CSS1035: Expected colon, found '2'
(1692,148): run-time error CSS1034: Expected closing parenthesis, found ','
(1692,148): run-time error CSS1042: Expected function, found ','
(1692,175): run-time error CSS1034: Expected closing parenthesis, found ','
(1692,175): run-time error CSS1042: Expected function, found ','
(1692,177): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

    .animated.infinite {
        animation-iteration-count: infinite;
    }

    .animated.hinge {
        animation-duration: 2s;
    }

    .animated.flipOutX,
    .animated.flipOutY,
    .animated.bounceIn,
    .animated.bounceOut {
        animation-duration: .75s;
    }

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0,-4px,0);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation-name: pulse;
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    animation-name: rubberBand;
}

@keyframes shake {
    from, to {
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}

@keyframes headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake;
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing;
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes wobble {
    from {
        transform: none;
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        transform: none;
    }
}

.wobble {
    animation-name: wobble;
}

@keyframes jello {
    from, 11.1%, to {
        transform: none;
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

.jello {
    animation-name: jello;
    transform-origin: center;
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-name: bounceIn;
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}

.bounceInDown {
    animation-name: bounceInDown;
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInLeft {
    animation-name: bounceInLeft;
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: none;
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    animation-name: bounceInUp;
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
}

.bounceOut {
    animation-name: bounceOut;
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    animation-name: bounceOutUp;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInLeftBig {
    animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInRightBig {
    animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    animation-name: fadeOutUpBig;
}

@keyframes flip {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px);
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    animation-name: flip;
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInX;
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

@keyframes flipOutX {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@keyframes flipOutY {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}

@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in;
}

@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        transform-origin: center;
        transform: none;
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight;
}

@keyframes rotateOut {
    from {
        transform-origin: center;
        opacity: 1;
    }

    to {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
    from {
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
    from {
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
    from {
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
    from {
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    animation-name: rotateOutUpRight;
}

@keyframes hinge {
    0% {
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        transform: rotate3d(0, 0, 1, 80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        transform: rotate3d(0, 0, 1, 60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    animation-name: hinge;
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        transform: scale(0.1) rotate(30deg);
        transform-origin: center bottom;
    }

    50% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.jackInTheBox {
    animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rollIn {
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    animation-name: rollOut;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    animation-name: zoomInDown;
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInLeft {
    animation-name: zoomInLeft;
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    animation-name: zoomInRight;
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInUp {
    animation-name: zoomInUp;
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    animation-name: zoomOut;
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutDown {
    animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center;
    }
}

.zoomOutLeft {
    animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center;
    }
}

.zoomOutRight {
    animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomOutUp {
    animation-name: zoomOutUp;
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    animation-name: slideInDown;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    animation-name: slideInRight;
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    animation-name: slideOutDown;
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    animation-name: slideOutLeft;
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    animation-name: slideOutRight;
}

@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    animation-name: slideOutUp;
}

@charset "UTF-8";
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p,a, em, img, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}  
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
body {font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* subject */
/* ==========desktop========== */
.wrap-subject {display: flex;justify-content: center;flex-wrap: wrap;}
/*刊頭*/
.wrap-subject header {background: url(/images/ck/header.jpg) no-repeat;width: 100%;background-size: cover;padding: 10px 0;text-align: center;}
/*刊頭*/

.wrap-subject nav {background: #00d514;width: 100%;}
.wrap-subject nav ul {width: 1024px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.wrap-subject nav ul li {width: 100%;text-align: center;}
.wrap-subject nav li:nth-child(odd) a {background: #00d514;}
.wrap-subject nav li:nth-child(even) a {background: #00c92f;}
.wrap-subject nav a {font-size: 20px;color: #fff;text-decoration: none;display: block;width: 100%;height: 100%;padding: 15px;font-weight: bold;box-sizing: border-box;}
.wrap-subject nav a:hover {background: #007A1D !important;}

.wrap-subject main {width: 1024px;padding: 20px 0 60px;margin: 0 auto;display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;}

.wrap-subject .ad-block {position: static;width: 30%;order: 1;}
.wrap-subject .ad-block .head {border: 1px solid #dcdcdc;box-sizing: border-box;padding: 15px 0;font-size: 21px;text-align: center;}
.wrap-subject .ad-block .ad {margin: 10px 0 20px 0;}
.wrap-subject .ad-block .ad a {display: block;text-decoration: none;color: #ff7926;font-size: 18px;margin-bottom: 5px;line-height: 1.2;}
.wrap-subject .ad-block .ad img {width: 100%;}
.wrap-subject .ad-block .link li {border-bottom: 1px dashed #d2d2d2;padding: 10px 0;}
.wrap-subject .ad-block .link span {color: #000;font-size: 1.5vw;}
.wrap-subject .ad-block .link a {text-decoration: none;color: #26c1d7;line-height: 1.5;display: flex;align-items: center;overflow: hidden;}
.wrap-subject .ad-position {position: absolute;bottom: 20px;right: 0;}
.wrap-subject .ad-fixed {position: fixed;bottom: 20px;right: 0;}

.wrap-subject .main {width: 65%;}
.wrap-subject .edit-Banner {background: url(/images/ck/subject.jpg) no-repeat;width: 100%;line-height: 2;box-sizing: border-box;padding: 40px 30px;}
.wrap-subject .edit-Banner i {color: #ff7800;}

.wrap-subject aside {margin-top: 10px;position: relative;}
.wrap-subject aside ul:first-child {display: flex;justify-content: space-between;align-items: center;position: static;}
.wrap-subject aside ul:first-child > li {width: 20%;border: 1px solid #e0e0e0;border-width: 1px 1px 1px 0;position: relative;}
.wrap-subject aside ul:first-child > li > a {text-decoration: none;color: #000;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;padding: 15px 0;font-size: 18px;font-weight: bold;background: #fff;}
.wrap-subject aside ul:first-child > li > a i {color: #ff7800;}
.wrap-subject aside ul:first-child > li ul {display: none;position: absolute;z-index: 10;top: 100%;left: 0;width: 100%;}
.wrap-subject aside ul:first-child > li ul li {width: 100%;border: 1px solid #fff;border-width: 0 1px 1px 1px;}
.wrap-subject aside ul:first-child > li ul a {display: block;width: 100%;text-align: center;text-decoration: none;background: #e0e0e0;color: #000000;font-size: 16px;padding: 15px 0;}
.wrap-subject aside ul:first-child > li .aside-open {display: block;}
.wrap-subject aside ul:first-child > li:first-child {border-left: 1px solid #e0e0e0;}

.wrap-subject .crumb {display: flex;justify-content: flex-start;margin: 20px 0;}
.wrap-subject .crumb i {color: #bababa;}
.wrap-subject .crumb a {text-decoration: none;color: #000000;position: relative;margin: 0 5px;}
.wrap-subject .crumb a::after {content: '';display: block;background: #000;position: absolute;width: 0%;height: 1px;bottom: -1px;left: 45%;transition: all .5s;}
.wrap-subject .crumb a:hover::after {width: 100%;left: 0;}

.wrap-subject .subjectList {width: 100%;display: flex;justify-content: flex-start;background: #00bcd4;border-radius: 10px;overflow: hidden;padding: 15px 10px;box-sizing: border-box;}
.wrap-subject .subjectList li {border-right: 1px solid #0395a8;}
.wrap-subject .subjectList li:last-Child {border: 0;}
.wrap-subject .subjectList a {color: #fff;display: block;text-decoration: none;padding: 0 10px;font-size: 18px;}
.wrap-subject .subjectList a i {display: none;}

.wrap-subject .edit-content {font-size: 17px;line-height: 1.6;}
/*.wrap-subject .edit-content h1 {font-weight: bold;font-size: 28px;line-height: 3;color: #00bcd4;}---原始-*/
.wrap-subject .edit-content h1 {font-weight: bold;font-size: 26px;line-height: 1.6;color: #00bcd4; margin-top:20px}
.headText{display:none!important;}
.wrap-subject .edit-content h2 {font-weight: bold;font-size: 22px;line-height: 1.6;margin-top:20px;margin-bottom:10px;color:#090;}
.wrap-subject .edit-content h3 {font-weight: bold;font-size: 18px;line-height: 1.6;}
.wrap-subject .edit-content h4 a{text-decoration:none;}
.wrap-subject .edit-content p {line-height: 1.6;margin:12px 0;}
.wrap-subject .edit-content .green {color: #00d514;font-weight: bold;}
.wrap-subject .edit-content .orange {color: #ff7800;font-weight: bold;}
.wrap-subject .edit-content ul {list-style-position: inside;list-style-type: disc;line-height: 2;}
.wrap-subject .edit-content ol {list-style-position: inside;list-style-type: decimal;line-height 2;}
.wrap-subject .edit-content .fs01 {font: 13px Arial, Helvetica, sans-serif;}
.wrap-subject .edit-content .fs02 {font: 15px/1.6 Arial, Helvetica, sans-serif;}
.wrap-subject .edit-content .fs03 {font: 16px Arial, Helvetica, sans-serif;}
.wrap-subject .edit-content .fs04 {font: 12px/1.6 Arial, Helvetica, sans-serif;}
.wrap-subject .edit-content .fs05 {font: bold 20px/1.6 Arial, Helvetica, sans-serif;}
.wrap-subject .edit-content .fs06 {text-decoration: underline;}
.wrap-subject .edit-content .fw-bold {font-weight: bold;}
.wrap-subject .edit-content .fc01 {color: #FFF;}
.wrap-subject .edit-content .fc02 {color: #555;}
.wrap-subject .edit-content .fc03 {color: #333;}
.wrap-subject .edit-content .fc04 {color: #DD6F00;}
.wrap-subject .edit-content .fc05 {color: #01479d;}
.wrap-subject .edit-content .fc06 {color: #9F4A00;}
.wrap-subject .edit-content .fc07 {color: #F00;}
.wrap-subject .edit-content .fc08 {color: #090;}
.wrap-subject .edit-content .fc09 {color: #007BC2;}
.wrap-subject .edit-content .box-sty01 {border: 1px solid #CCC;padding: 20px;margin: 20px 0;background: #FFC;}
.wrap-subject .edit-content .box-sty02 {text-align: right;margin: 15px 0 0;clear: both;}
.wrap-subject .edit-content .box-sty03 {border: 1px dashed #999;padding: 20px;margin: 15px 0 0;clear: both;background: #F5F5F5;}
.wrap-subject .edit-content .tb-sty01 {border-collapse: collapse;margin: 5px 0;}
.wrap-subject .edit-content .tb-sty01 td {border: 1px solid #aaa;border-collapse: collapse;padding: 2px 10px;}
.wrap-subject .edit-content .bg-color01 {background: #ffffff;}
.wrap-subject .edit-content .bg-color02 {background: #f2f2f2;}
.wrap-subject .edit-content td {line-height: 1.6;}
.wrap-subject .edit-content table {margin: 10px 0;}
.wrap-subject .edit-content .aHref {color: #0070c0;line-height: 1.6;}

/* ===== 編輯器專用 ===== */
/* 動畫按鈕開始 */
.img-holder{text-align:center;}
.holder-content{position: relative;display:inline-block;overflow: hidden;}
.holder-content:hover>div{opacity:1;transform:translateY(0);}
.holder-content img{display: block;width: 100%;height: 100%;}
.holder-content>div{position: absolute;bottom: 0;left: 0;width: 100%;height: 100%; background-image:-webkit-linear-gradient(90deg,rgb(160, 235, 245,0.7) 30%,rgb(160, 235, 200,1) 100%);opacity: 0;transition: all .5s;transform:translateY(50%);display: flex;flex-flow: column; justify-content: center;align-items: center;flex-wrap: wrap;}
.holder-content>div p{width:100%;}
.holder-content>div a{text-decoration: none;color: #F00 !important;font-size:30px;}
/* 動畫按鈕結束 */
/* 引言開始  */
.foreword{position: relative;box-sizing: border-box;padding:25px; }
.foreword::before{content:'';   background: url(https://www.pcsr.com.tw/topics/info/images/sprite1.png) no-repeat;display: block;width: 21px;height: 19px;position: absolute;top: 0;left: 0;}
.foreword::after{content:'';background: url(https://www.pcsr.com.tw/topics/info/images/sprite2.png) no-repeat;display: block;width: 21px;height: 19px;position: absolute;bottom: 0;right: 0;}
/* 引言結束 */
/* faq開始 */
h3.faq{ background-color:#F7FBFC; border:1px solid #D9E6E9; border-radius:10px 10px 0 0; margin-bottom:0!important; padding:5px 10px; color:#459DD5;}
p.faq{ border:1px solid #D9E6E9; border-top:none; border-radius:0 0 10px 10px; margin:0 0 15px 0!important; padding:5px 10px; line-height: 25px;}
/* faq結束 */
/* 段落下底線開始 */
.underLine_blue  {background:linear-gradient(transparent 59%,#7adaff 0);font-weight: 700;display: inline;}
/* 段落下底線結束 */

/* 手機圖片置換 */
.mobileimg{ display:none; }
.text-line{ box-shadow: 0 1px;padding-bottom:1px;}
/* 手機圖片置換 */  
/* 手機圖片置換-手機板 */
@media (max-width: 767px) {
  .desktopimg{ display:none; }
  .mobileimg{ display:block; }
}
/* 手機圖片置換-手機板 */
/* ===== 編輯器專用 ===== */

.wrap-subject .listWrap {box-sizing: border-box;padding: 20px 40px;border: 1px solid #666;}
.wrap-subject .listWrap .listHead {display: flex;justify-content: space-between;align-items: center;color: #6b6b6b;font-size: 26px;}
.wrap-subject .listWrap .listHead a {color: #444;background: linear-gradient(#fefefe, #e3e3e3);border: 2px solid #ebebeb;display: flex;justify-content: center;align-items: center;text-decoration: none;font-size: 16px;border-radius: 5px;box-sizing: border-box;padding: 5px;}
.wrap-subject .listWrap .listHead a:hover {background: linear-gradient(to left top, #e2e2e2, #eaeaea);border: 2px solid #8C8C8C;}
.wrap-subject .listWrap .listHead a:active {background: linear-gradient(to top, #e3e3e3, #cacaca);border: 2px solid #dadada;}
.wrap-subject .listWrap .listContent ul {margin-bottom: 0;}
.wrap-subject .listWrap .listContent a {color: #428bca;line-height: 2;}

.wrap-subject .contact {background: #fff8f2;width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 30px 10px;box-sizing: border-box;}
.wrap-subject .contact p {width: 100%;font-size: 19px;margin-bottom: 20px;}
.wrap-subject .contact p:first-child {color: #ff7800;font-size: 30px;}
.wrap-subject .contact input {padding: 10px 5px;box-sizing: border-box;border-radius: 5px;border: 1px solid #a0a0a0;margin-bottom: 10px;}
.wrap-subject .contact select {padding: 10px 5px;box-sizing: border-box;border-radius: 5px;border: 1px solid #a0a0a0;background: #fff;margin-bottom: 10px;color: #666;}
.wrap-subject .contact select option {color: #000;}
.wrap-subject .contact textarea {width: 100%;}
.wrap-subject .contact .name, .wrap-subject .contact .phone {width: 49%;}
.wrap-subject .contact .live {width: 50%;border-radius: 0;}
.wrap-subject .contact .email, .wrap-subject .contact .askClass {width: 100%;}
.wrap-subject .contact > div {width: 100%;}
.wrap-subject .contact > div a {color: #ff7800;}
.wrap-subject .contact .submit {display: block;margin: 10px auto;background: #ff7800;color: #fff;font-weight: bold;border-color: #ff7800;font-size: 22px;padding: 7px 40px;font-family: "微軟正黑體";}
.wrap-subject .mainAfter {order: 2;}

.wrap-subject .exp {width: 100%;}
.wrap-subject .exp .head {border-bottom: 1px solid #00d514;}
.wrap-subject .exp .head h2 {display: inline-block;color: #fff;background: #00d514;font-size: 21px;font-weight: bold;padding: 10px 20px;margin-top: 20px;border-top-right-radius: 10px;box-sizing: border-box;}
.wrap-subject .exp ul {display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 20px;}
.wrap-subject .exp ul li {width: 49%;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;font-size: 18px;margin-bottom: 20px;position: relative;overflow: hidden;}
.wrap-subject .exp ul a {position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-indent: -9999px;}
.wrap-subject .exp ul h3 {display: block;width: 100%;font-size: 18px;margin-bottom: 10px;color: #000;line-height: 1.3;}
.wrap-subject .exp ul img {width: 30%;border-radius: 10px;}
.wrap-subject .exp ul .content {width: 67%;color: #4c4948;line-height: 1.3;font-size: 16px;}
.wrap-subject .exp ul .content p:first-Child {font-size: 17px;color: #ff7800;}

/* 熱門考試精選 */
.wrap-subject .choice {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;margin: 50px auto;width: 1024px;border: 1px solid #e5e5e5;border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 15px 30px 15px;position: relative;text-align: center;}
.wrap-subject .choice h3 {text-align: center;font-size: 32px;padding: 20px 0;border-bottom: 1px dashed #e5e5e5;width: 100%;margin-bottom: 30px;}
.wrap-subject .choice h3 i {color: #00d514;}
.wrap-subject .choice a {width:23%;display: inline-block;}
.wrap-subject .choice img {width: 100%;height: auto;}
/* 熱門考試精選 */

/*頁尾*/
.wrap-subject footer {order: 5;background: #5c6268;width: 1024px;padding: 40px calc((100% - 1024px)/2);}
.wrap-subject footer .head {display: flex;justify-content: space-around;align-items: center;}
.wrap-subject footer .head a:nth-child(2) {background: #fff;color: #5c6268;text-decoration: none;width: 65%;display: flex;align-items: center;justify-content: flex-start;box-sizing: border-box;padding: 8px 15px;border-radius: 10px;font-size: 22px;font-weight: bold;position: relative;}
.wrap-subject footer .head a:nth-child(2) i {position: absolute;right: 10px;}
.wrap-subject footer .head a:nth-child(2):hover {box-shadow: 0 0 4px #e5e5e5;}
.wrap-subject footer .head a:nth-child(2):active {box-shadow: 0 0 15px gray inset;}
.wrap-subject footer ul {display: flex;justify-content: flex-start;flex-wrap: wrap;margin-top: 30px;}
.wrap-subject footer ul li {width: 25%;box-sizing: border-box;padding: 0 3%;border-right: 1px solid #818181;margin-bottom: 30px;color: #fff;font-size: 14px;line-height: 1.6;text-align: center;}
.wrap-subject footer ul li p:first-Child {font-size: 21px;margin-bottom: 8px;font-weight: bold;display: flex;align-items: center;justify-content: space-around;}
.wrap-subject footer ul li a {text-decoration: none;background: #00d514;color: #fff;border-radius: 5px;font-size: 14px;padding: 2px 8px;}
.wrap-subject .gotop {text-decoration: none;position: fixed;bottom: 5%;right: 5%;z-index:999;color: #fff;font-weight: bold;background: #00d514;width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;border-radius: 99em;}
/*頁尾*/

/* ==========other========== */
@media (max-width: 1150PX) {
  .wrap-subject nav ul {width: 95%;}
  .wrap-subject nav li {width: 100%;}
  .wrap-subject nav a {width: 100%;padding: 15px 0;text-align: center;}
  .wrap-subject main {width: 95%;padding: 20px 2% 40px 2%;margin: 0 auto;}
  .wrap-subject footer {width: 98%;padding: 40px 1%;}
  .wrap-subject footer .head a {width: 60%;}
  .wrap-subject .gotop {bottom: 2%;right: 2%;}
}

/* ==========ipad========== */
@media (max-width: 768px) {
  .wrap-subject {}
  .wrap-subject .ad-block {width: 32%;}
  .wrap-subject .ad-block .ad a {font-size: 15px;}
  .wrap-subject .ad-block .link {margin-left: 10px;}
  .wrap-subject .ad-block .link a {line-height: 1;padding: 5px 0;font-size: 13px;}
  .wrap-subject .ad-block .link a span {font-size: 2vw;margin-right: 3px;}
  .wrap-subject .subjectList a {font-size: 2vw;}
  .wrap-subject aside ul:first-child > li > a {font-size: 2.5vw;flex-wrap: wrap;padding: 0;position: relative;padding-bottom: 30px;}
  .wrap-subject aside ul:first-child > li > a p {text-align: center;width: 100%;display: block;line-height: 2;}
  .wrap-subject aside ul:first-child > li > a i {position: absolute;bottom: 10px;}
  .wrap-subject .contact p:first-child {font-size: 3.5vw;}
  .wrap-subject .contact p {font-size: 2vw;}
  .wrap-subject .exp ul h3 {font-size: 2vw;}
  .wrap-subject .exp ul .content {font-size: 2vw;}
  .wrap-subject .exp ul .content p:first-Child {font-size: 2.2vw;}
  .wrap-subject .choice {width: 95%;margin: 30px auto;}
  .wrap-subject footer ul li {width: 33%;padding: 0 3%;}
}

/* ==========phone========== */
@media (max-width: 767px) {
  .wrap-subject header {background:url(/images/ck/header-mobile.jpg) no-repeat;background-size: 100% 100%;}
  .wrap-subject header img {width: 75%;}
  .wrap-subject nav ul {width: 100%;}
  .wrap-subject nav span {display: none;}
  .wrap-subject nav a {font-size: 5vw;font-weight: 100;}
  .wrap-subject nav a:hover, .wrap-subject nav a:active {font-weight: 500;}
  .wrap-subject aside ul:first-child > li {position: static;}
  .wrap-subject aside ul:first-child > li a {font-weight: 100;flex-wrap: wrap;text-align: center;padding: 10px 0 40px 0;box-sizing: border-box;font-size: 6vw;}
  .wrap-subject aside ul:first-child > li a p {line-height: 1;}
  .wrap-subject aside ul:first-child > li a i {display: block;width: 100%;}
  .wrap-subject aside ul:first-child > li ul a {font-size: 6vw;}
  .wrap-subject main {width: 90%;padding: 10px 0 40px 0;margin: 0 auto;}
  .wrap-subject .ad-block {position: static;width: 100% !important;order: 1;}
  .wrap-subject .ad-block .head {border: 1px solid #dcdcdc;box-sizing: border-box;padding: 10px 0;font-size: 7vw;text-align: center;}
  .wrap-subject .ad-block .ad {margin: 10px 0 20px 0;}
  .wrap-subject .ad-block .ad a {display: block;text-decoration: none;color: #ff7926;font-size: 18px;margin-bottom: 5px;line-height: 1.2;}
  .wrap-subject .ad-block .ad img {width: 100%;}
  .wrap-subject .ad-block .link li {border-bottom: 1px dashed #d2d2d2;}
  .wrap-subject .ad-block .link a {text-decoration: none;color: #26c1d7;line-height: 1.5;display: flex;align-items: center;overflow: hidden;font-size: 5vw;}
  .wrap-subject .ad-block .link a span {color: #000;font-size: 5vw;}
  .wrap-subject .main {width: 100%;}
  .wrap-subject .edit-Banner {padding: 30px 20px 20px 20px;line-height: 1.6;font-size: 5vw;background-size: cover;}
  .wrap-subject .edit-Banner p {margin-bottom: 10px;}
  .wrap-subject .crumb {margin: 10px 0;}
  .wrap-subject .crumb a {margin: 0;}
  .wrap-subject .subjectList {flex-wrap: wrap;border-radius: 0;padding: 0;background: #fff;border: 1px solid #CCC;}
  .wrap-subject .subjectList li {width: 100%;border-right: 0;border-bottom: 1px solid #CCC;}
  .wrap-subject .subjectList a {font-size: 5vw;line-height: 2;color: #00bcd4;position: relative;}
  .wrap-subject .subjectList a i {position: absolute;right: 10px;top: 8px;display: inline-block;}
  .wrap-subject .edit-content {font-size: 5vw;}
  /*.wrap-subject .edit-content h1 {margin-top: 30px;line-height: 2;font-size: 8vw;}--原始的*/
  .wrap-subject .edit-content h1 {margin-top: 20px;line-height: 1.6;font-size: 8vw;}
  .wrap-subject .edit-content ul {text-indent: -25px;line-height: 1.3;margin-bottom: 30px;margin-left: 25px;}
  .wrap-subject .edit-content ul li{margin: 10px 0;}
  .wrap-subject .edit-content p {margin-bottom: 10px;line-height: 1.6;}
  .wrap-subject .contact {margin-bottom: 30px;}
  .wrap-subject .contact p:first-child {font-size: 7vw;font-weight: bold;line-height: 1;}
  .wrap-subject .contact p {font-size: 4.5vw;line-height: 1.6;}
  .wrap-subject .contact > div {margin-top: 10px;}
  .wrap-subject .contact .submit {font-size: 6vw;padding: 5px 20px;}
  .wrap-subject .exp ul li {width: 100%;display: block;}
  .wrap-subject .exp ul li img {order: 0;float: left;}
  .wrap-subject .exp ul li h3 {float: right;order: 1;width: 67%;font-size: 1.1rem;margin-bottom: 5px;line-height: 1.3;}
  .wrap-subject .exp ul li .content {float: right;order: 2;width: 67%;font-size: .9rem;}
  .wrap-subject .exp ul li .content p:first-Child {font-size: 1rem;}
  .wrap-subject .exp ul li::after {content: '';display: block;clear: both;}
  .wrap-subject .choice {width: 90%;margin: 50px auto;padding: 0px 15px;}
  .wrap-subject .choice h3 {font-size: 8vw;padding-bottom: 20px;}
  .wrap-subject .choice h3 i {margin-right: 4px;}
  .wrap-subject .choice a {width:calc(50% - 10px);margin-bottom:5px;}
  .wrap-subject footer .head {flex-wrap: wrap;}
  .wrap-subject footer .head a {display: block;margin: 0 auto;width: 80%;}
  .wrap-subject footer .head a img {width: 100%;}
  .wrap-subject footer .head a:nth-child(2) {margin: 20px auto 0 auto;width: 90%;font-size: 16px;}
  .wrap-subject footer ul li {width: 49%;padding: 0 5%;}
  .wrap-subject footer ul li p:first-child {flex-wrap: wrap;}
  .wrap-subject footer ul li a {width: 75%;display: block;margin: 0 auto;padding: 0;}
  .wrap-subject footer ul li:nth-child(even) {border: 0;}

  .wrap-subject .gotop{bottom: 10%;}
}
/* subject */
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}