html,
body {
    height: 100%
}

body {
    font-family: "Lato", "PingFang TC", "Helvetica Neue", Helvetica, "微軟正黑體", "新細明體", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333333
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    line-height: 1.5;
    font-weight: bold
}

h1 {
    font-size: 40px
}

h2 {
    font-size: 34px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

p,
a,
li,
div {
    font-size: 16px
}

a {
    color: #f47621;
    -webkit-transition: all 0.2s;
    transition: all 0.2s
}

a:focus,
a:hover {
    color: #eb660c;
    outline: none;
    text-decoration: none
}

button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer
}

.bg-scroll {
    overflow: hidden
}

.section {
    padding-top: 30px;
    padding-bottom: 30px
}

.btn,
.btn:focus {
    padding: 10px 40px;
    background-color: #1993AF;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    border: 0;
    margin: 10px;
}

.btn:hover,
.btn:active {
    color: #fff;
    background-color: #1ba0be;
}

.btn-main {
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear
}

.kv {
    position: relative;
    width: 100%;
    height: 80%;
    height: 750px;
    min-height: 750px;
    overflow: hidden;
    background-color: #dcede7
}

.kv--md {
    display: none
}

.kv--md,
.kv--xs {
    margin-top: 50px
}

.kv__title {
    position: absolute;
    left: 5%;
    top: 10%;
    z-index: 3
}

h2.kv-slogan {
    font-size: 30px;
    background-color: red;
    color: #fff;
    /*box-shadow: 10px 10px 2px #888888; */
    box-shadow: 4px 4px 5px #bbb;
    margin: 10px 0 0 10px;
    padding: 10px 0;
    max-width: 300px;
    border-radius: 5px;
}

.kv__cloud {
    position: absolute;
    top: 10%;
    width: 100%;
    height: 75%;
    background-image: url(../img/cloud.png);
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-animation: cloud 400s linear infinite;
    animation: cloud 400s linear infinite
}

.kv__freight {
    position: absolute;
    left: 29%;
    bottom: 10%;
    z-index: 2;
    width: 962px;
    height: 371px;
    background-image: url(../img/freight.png);
    background-repeat: no-repeat;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.kv__freight:after {
    position: absolute;
    left: -45px;
    bottom: -40px;
    content: "";
    display: block;
    width: 1000px;
    height: 71px;
    background-image: url(../img/freight-wave.png);
    background-repeat: no-repeat;
    -webkit-animation: wavy 2s alternate infinite ease-in-out;
    animation: wavy 2s alternate infinite ease-in-out
}

.kv__port {
    position: absolute;
    left: 65%;
    width: 850px;
    height: 681px;
    background-image: url(../img/cargo.png), url(../img/port.png);
    background-repeat: no-repeat;
    background-position: 200px 132px, right 0;
    -webkit-animation: cargo-move 20s infinite linear;
    animation: cargo-move 20s infinite linear
}

.kv__wave {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.kv__wave-dark {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 171px;
    background-image: url(../img/wave-dark.png);
    background-repeat: repeat-x
}

.kv__wave-light {
    position: absolute;
    left: -100%;
    bottom: -2%;
    z-index: 3;
    display: block;
    width: 300%;
    height: 54px;
    background-image: url(../img/wave-light.png);
    background-repeat: repeat-x;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: wavy 2s 0.5s alternate infinite ease-in-out;
    animation: wavy 2s 0.5s alternate infinite ease-in-out
}

.kv__freight-s {
    position: absolute;
    left: 10%;
    top: -38px;
    width: 192px;
    height: 68px;
    background-image: url(../img/freight-s.png);
    background-repeat: no-repeat;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.kv__freight-s:after {
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    display: block;
    width: 245px;
    height: 21px;
    background-image: url(../img/freight-s-wave.png);
    background-repeat: no-repeat;
    -webkit-animation: wave-dark 2s 1s alternate infinite ease-in-out;
    animation: wave-dark 2s 1s alternate infinite ease-in-out
}

.infobg img {
    margin: 0 auto;
}

.menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    height: 50px;
    background-color: rgba(1, 81, 60, 0.8);
    -webkit-transition: .2s ease;
    transition: .2s ease
}

.menu__container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.menu__burger {
    position: absolute;
    right: 15px;
    top: 9px;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    text-decoration: none;
    z-index: 9999
}

.menu__burger span {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 4px;
    color: #fff;
    background: #fff;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.menu__burger span::before,
.menu__burger span::after {
    content: '';
    width: 25px;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.menu__burger span:before {
    top: -8px
}

.menu__burger span:after {
    bottom: -8px
}

.menu__burger.active span {
    background: transparent
}

.menu__burger.active span:before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg)
}

.menu__burger.active span:after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg)
}

.menu__brand {
    float: left;
    line-height: 50px
}

.menu__brand-logo {
    font-size: 20px;
    font-weight: bold;
    color: #fff
}

.menu__brand-logo:hover,
.menu__brand-logo:focus {
    color: #f79e27
}

.menu__mask {
    display: none
}

.menu__nav {
    float: right;
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none
}

.menu__nav li {
    display: inline-block
}

.menu__link {
    display: block;
    margin: 12px 16px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px
}

.menu__link:focus,
.menu__link:hover {
    color: #f79e27
}

.menu__link::after {
    position: relative;
    top: 6px;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    border-top: 2px solid #fff;
    opacity: 0;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

.menu__link:focus::after,
.menu__link:hover::after {
    top: 3px;
    opacity: 1
}

.menu__link-bg {
    display: block;
    padding: 12px 16px;
    font-weight: bold;
    color: #2295a3;
    letter-spacing: 1px;
    background-color: #fff
}

.menu__link-bg:focus,
.menu__link-bg:hover {
    color: #fff;
    background-color: #e98600
}

.menu__link-fb {
    display: block;
    margin-left: 12px;
    padding: 12px 16px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    background-color: #3b5998
}

.menu__link-fb:focus,
.menu__link-fb:hover {
    color: #fff;
    background-color: #4466ae
}

.menu.menu--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20
}

.menu.menu--fixed .menu__brand-text {
    display: none
}

.menu__mask--active {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: block;
    background-color: rgba(0, 0, 0, 0.9);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    -webkit-animation: fade 0.2s linear;
    animation: fade 0.2s linear
}

.menu__mask--active .menu__overlay {
    display: table;
    width: 100%;
    height: 100%
}

.menu__mask--active .menu__nav {
    float: none;
    display: table-cell;
    vertical-align: middle
}

.menu__mask--active .menu__nav li {
    display: block;
    text-align: center
}

.menu__mask--active .menu__link,
.menu__mask--active .menu__link-bg,
.menu__mask--active .menu__link-fb {
    display: inline-block
}

.menu__mask--active .menu__link {
    margin-bottom: 24px;
    font-size: 22px
}

.menu__mask--active .menu__link-bg,
.menu__mask--active .menu__link-fb {
    width: 120px;
    font-size: 18px
}

.menu__mask--active .menu__link-fb {
    margin-left: 0;
    margin-top: 24px
}

.info__h2 {
    color: #3275c4;
    text-align: center
}

.info__h3 {
    color: #0d383e;
    text-align: center
}

.info__para {
    font-size: 18px;
    line-height: 1.8
}

.info__para:nth-of-type(1) {
    margin-top: 30px
}

.wanted {
    padding: 30px 0 60px;
    background-color: #dcede7
}

.wanted--form {
    padding: 100px 0 20px
}

.wanted__h3 {
    margin-bottom: 30px;
    color: #0d383e;
    text-align: center
}

.wanted__date {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #666
}

.wanted__btn {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: 300px;
    padding: 16px 10px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background-color: #f47621;
    border-radius: 5px;
    box-shadow: 0 10px 40px -20px #798581;
    border: none;
    overflow: hidden;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear
}

.wanted__btn:hover {
    color: #fff
}

.wanted__btn:focus,
.wanted__btn:active {
    color: #fff;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 5px 30px -15px #798581
}

.wanted__btn:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -170%;
    width: 150%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-transform: skewX(-40deg);
    -ms-transform: skewX(-40deg);
    transform: skewX(-40deg);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.wanted__btn:hover:after {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg)
}

.wanted__form {
    padding-top: 30px;
    padding-bottom: 30px
}

.wanted__form-remind {
    color: #ef5318
}

.wanted__form-btn {
    margin-top: 16px;
    padding: 12px 12px;
    color: #fff;
    background-color: #f47621;
    border-color: transparent;
    font-size: 18px
}

.wanted__form-btn:focus,
.wanted__form-btn.focus {
    color: #fff;
    background-color: #d75d0b;
    border-color: transparent;
    outline: none
}

.wanted__form-btn:hover {
    color: #fff;
    background-color: #f58539;
    border-color: #f58539
}

.wanted__form-btn:active,
.wanted__form-btn.active {
    color: #fff;
    background-color: #d75d0b;
    border-color: transparent;
    outline: none;
    box-shadow: none
}

.wanted__form-btn.disabled:hover,
.wanted__form-btn.disabled:focus,
.wanted__form-btn.disabled.focus,
.wanted__form-btn[disabled]:hover,
.wanted__form-btn[disabled]:focus,
.wanted__form-btn[disabled].focus,
fieldset[disabled] .wanted__form-btn:hover,
fieldset[disabled] .wanted__form-btn:focus,
fieldset[disabled] .wanted__form-btn.focus {
    background-color: #f9b282;
    border-color: #f9b282
}

.fadeee {
    display: block;
    -webkit-animation: fade 0.6s linear;
    animation: fade 0.6s linear
}


/*intro*/

#content {
    padding-top: 80px;
    padding-bottom: 50px;
}

.intro-box {
    padding: 20px 20px 20px 30px;
}

#content .intro-box h3 {
    /* color: #555; */
    font-size: 2.5em;
    color: #1993af;
    margin: 1% 0;
}

#content .intro-box p {
    font-size: 18px;
    color: #666;
    line-height: 1.8em;
    margin: 20px 0;
}

#content .btn-info {
    font-size: 30px;
    background-color: red;
    border: none;
}

#content .btn-info:hover,
#content .btn-info:focus,
#content .btn-info:active {
    font-size: 30px;
    background-color: #3ca2db;
}

#intro .spots {
    margin-top: 20px;
}

#intro p {
    color: #b9b9b9;
    display: inline-block;
    padding: 1em 1em;
    margin: 1em 0;
    background-color: #0c0c0c;
    color: #fff;
    text-align: left;
}

#intro p span {
    color: #f79f27;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 0;
    padding: .25em 0 .325em;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}


/* feature  */

#feature {
    clear: both
}

#feature h2 {
    text-align: center;
    font-size: 2.5em;
    margin: 75px auto 35px;
    width: 300px;
    border: 1px solid #1993AF;
    letter-spacing: 10px
}

#feature h4 {
    color: #f47621;
    font-size: 1.6em;
    margin-top: 30px
}


/* Animate Background Image */

@-webkit-keyframes aitf {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}


/*keynote*/

#keynote .keynote {
    margin-top: 10px;
    margin-bottom: 60px;
}

#keynote .keynote h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #656565;
    margin-bottom: 30px;
    margin-top: 8px;
}

#keynote .keynote-box {
    background-color: #F6F6F6;
    padding: 20px 0;
    transition: .3s ease-in;
    margin-bottom: 20px;
}

#keynote .keynote-box:hover {
    box-shadow: 3px 3px #ddd;
}

#keynote .keynote img {
    border: 5px solid transparent;
    padding: 5px;
    transition: .3s ease-in;
}

#keynote .keynote-box .img-circle {
    width: 210px;
    height: 210px;
}

#keynote .keynote-box:hover .img-circle {
    border: 5px solid #999;
}

#keynote .keynote .speaker {
    text-align: center;
    color: #1993af;
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
}

#keynote .keynote .position {
    color: #f576a6;
    font-size: 20px;
    margin-bottom: 5px;
}

#keynote .keynote .profile {
    color: #444444;
    padding: 0 30px;
    text-align: left;
}


/*首頁講師*/

#speaker {
    background-color: #f6f6f6;
}

#speaker .index-speaker-title {
    text-align: center;
    letter-spacing: 2px;
    font-size: 24px;
    margin-bottom: 50px;
    margin-top: 30px;
}

#speaker .index-day1-speaker,
#speaker .index-day2-speaker {
    padding-bottom: 50px;
}

#speaker .speakerlist {
    margin-bottom: 20px;
    min-height: 530px;
}

#speaker .listbox {
    text-align: center;
    background-color: #fff;
    padding: 10px;
    height: 100%;
    transition: .2s;
}

.listbox img {
    border: 5px solid transparent;
    padding: 5px;
    transition: .3s ease-in;
    max-width: 209px;
    max-height: 209px;
}

#speaker .listbox .author {
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
}

#speaker .listbox .position {
    color: #656565;
    margin-bottom: 16px;
}

#speaker .listbox .profile {
    color: #656565;
    margin-top: 5px;
    font-weight: bold;
}

#speaker .listbox .brief {
    color: #1993af;
    margin-top: 5px;
    text-align: right;
}

#speaker .listbox .brief:hover {
    color: #f44336;
    margin-top: 5px;
    text-align: right;
}

#speaker .index-day1-speaker .topic {
    display: inline-block;
    background-color: #1993AF;
    padding: 4px 12px;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 5px;
}

#speaker .listbox:hover {
    box-shadow: 3px 3px #ddd;
}

.index-day1-speaker .listbox:hover .img-circle {
    border: 5px solid #1993af;
    border: 5px solid rgba(25, 147, 175, 0.7);
}

#mas-column .mas-speaker {
    display: inline-block;
    padding: 10px;
    margin: 0 5px;
    overflow: hidden;
    width: 280px;
}

.grid-item {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.grid-item2 {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}


/*index speaker*/

#speakerDay1 {
    background-color: #ECEFEE;
    padding-top: 20px;
    padding-bottom: 50px;
}

#speakerDay2 {
    background-color: #F7FAFA;
    padding-top: 50px;
    padding-bottom: 50px;
}

.speakerDayTitle h2 {
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
    margin-top: 0px;
    letter-spacing: 2px;
    line-height: 1.6;
}

.speakerBox .speaker-img img {
    margin: 0 auto;
    margin-bottom: 20px;
}

.speakerBox .agenda-info {
    margin-top: 20px;
}

.speakerBox {
    margin-bottom: 80px;
}

.speakerBox .position h4 {
    margin-top: 0px;
    color: #555555;
    line-height: 1.6;
    font-weight: 700;
}

.speakerBox .profile,
.speakerBox .agenda-intro {
    line-height: 1.6;
    text-align: justify;
    word-break: normal;
    word-wrap: break-word;
}

.speakerBox .agenda-topic h4 {
    border-bottom: 2px solid #1993af;
    padding-bottom: 5px;
    font-size: 18px;
    display: inline-block;
}

#speakerDay2 .agenda-topic h4 {
    border-bottom: 2px solid #f576a6;
}

.speakerBox .agenda-title h3 {
    margin-top: 5px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6;
}

.speakerBox .author>h3 {
    margin-top: 0px;
}

@media (max-width: 768px) {
    .infobg {
        min-height: 400px;
        padding: 100px 40px;
        min-height: 250px;
    }
}


}
@media (min-width: 768px) {
    .navbar-brand {
        width: 100%;
    }
    
    .infobg {
        padding: 130px;
        min-height: 400px;
    }
    
    .infobg h2 {
        font-size: 16px;
    }
    
    .infobg h2 i {
        margin-right: 5px;
    }
    
    #info .description {
        margin-top: 30px;
    }
    
    .day-intro {
        margin-bottom: 30px;
    }
    
    .speakerBox .speaker-img img {
        margin-left: 20px;
        margin-bottom: 0px;
    }
    
    #agenda .line {
        border-bottom: 1px solid #e6e6e6;
        padding: 5px 0;
    }
    
    #agenda .line-top {
        border-top: 1px solid #e6e6e6;
    }
    
    #agenda .time {
        text-align: center;
        padding: 15px 0;
        font-size: 16px;
    }
    
    #agenda .content {
        padding: 15px 0;
        text-align: left;
    }
}
@media (min-width: 992px) {
    .infobg {
        padding: 150px 0;
        min-height: 500px;
    }
    
    .infobg h2 {
        font-size: 20px;
    }
    
    .infobg h2 i {
        margin-top: -7px;
    }
    
    .day-intro {
        margin-bottom: 0px;
    }
    
    .speakerBox .left-line {
        border-right: 1px solid #d1d3d3;
        margin-right: -1px;
    }
    
    .speakerBox .agenda-info {
        border-left: 1px solid #d1d3d3;
        padding-left: 25px;
    }
    
    .speakerBox .agenda-info-sp {
        padding-left: 25px;
    }
    
    .speakerBox .agenda-info {
        margin-top: 0px;
    }
    
    .speakerBox .speaker-img {
        text-align: right;
    }
    
    .keynote-box {
        margin-bottom: 0px;
    }
}
.topic {
    position: relative;
    margin-bottom: 10px;
}
.topic::before {
    content: '';
    width: 0px;
    height: 0px;
    border: 8px solid;
    border-color: transparent;
    border-style: solid dashed dashed dashed;
    position: absolute;
    left: 19px;
    bottom: -14px;
}
#speaker .index-day1-speaker .topic::before {
    border-top-color: #1993AF;
}
#speaker .index-day2-speaker .topic::before {
    border-top-color: #f576a6;
}

/* 議程 */
#agenda {
    background-color: #FCFCFC;
}
#agenda .index-agenda-title {
    text-align: center;
    letter-spacing: 2px;
    font-size: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
}
#agenda .index-day1-agenda,
#agenda .index-day2-agenda {
    margin-bottom: 60px;
}
#agenda p {
    margin-bottom: 0px;
}
#agenda h3 {
    margin: 0px;
    line-height: 1.6;
}
#agenda .line {
    border-bottom: 2px solid #e6e6e6;
}
#agenda .line-top {
    border-top: 2px solid #e6e6e6;
}
#agenda .time {
    text-align: center;
    padding-top: 15px;
    font-size: 20px;
    opacity: .87;
}
#agenda .content {
    padding: 15px 0;
    text-align: center;
}
.content p.opening {
    color: #f47621;
    font-size: 20px;
    font-weight: bold;
}
.content p.key-place {
    color: #1993AF;
}
#agenda .loadmore {
    cursor: pointer;
}
#agenda .text {
    display: none;
    color: #656565;
    text-align: left;
}
#agenda .fa {
    transition: .2s linear;
    font-size: 24px;
}
#agenda .rotate {
    transform: rotate(-180deg);
}
#agenda .d1speaker,
#agenda .d2speaker {
    color: #333333;
}
#agenda .d1speaker:hover {
    color: #848484;
}
#agenda .d2speaker:hover {
    color: #848484;
}
#agenda .rest {
    color: #848484;
}
.green {
    color: #007b5b;
}
.topic {
    position: relative;
    margin-bottom: 10px;
}
.topic a {
    font-size: 20px;
}
.topic::before {
    content: '';
    width: 0px;
    height: 0px;
    border: 8px solid;
    border-color: transparent;
    border-style: solid dashed dashed dashed;
    position: absolute;
    left: 19px;
    bottom: -14px;
}
.tracks {
    border-left: 2px solid #e6e6e6;
}
h3.place {
    padding-top: 10px;
}
hr.end-of-table {
    border: 2px solid #e6e6e6;
}
#notice li {
    font-size: 14px;
}
#notice {
    padding: 20px 0;
    background-color: #ecefef;
}

/*票*/
#ticket {
    padding-top: 30px;
    background-color: #ECEFEE;
}
#ticket .table {
    margin-top: 20px;
}
#ticket th {
    text-align: center;
    font-size: 18px;
}
#ticket td {
    font-size: 18px;
    color: #656565;
}
#ticket .table>thead>tr>th {
    border-bottom: 1px solid #1993AF;
    font-weight: normal;
}
#ticket .table > tbody > tr > td {
    vertical-align: middle;
    padding: 20px 0;
}
.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled].active,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover {
    background-color: #1993af;
    border: 0;
    color: #fff;
}

/*index traffic*/
#traffic {
    padding-top: 40px;
    padding-bottom: 40px;
}
.traffic {
    color: #fff;
    background-color: #3ca2db
}
.traffic h2 {
    margin-bottom: 20px
}
#Sponsor {
    padding-top: 40px;
    padding-bottom: 20px;
}

/*footer*/
.Logo {
    margin: 20px 0 30px;
}
#service {
    background-color: #444444;
    padding: 20px 10px;
}
#service p {
    color: #ffffff;
}
#service a {
    color: #ffffff;
}

/*******************
 *      sidebarReg
 *******************/
#sidebarReg {
    position: fixed;
    top: 70%;
    left: -5px;
}
#sidebarReg .register {
    line-height: 25px;
    padding: 15px 20px;
    background-color: #B39425;
}

/*******************
 *      goTop
 *******************/
#goTop {
    position: fixed;
    bottom: 50px;
    right: 50px;
    color: #fff;
}
#goTop .btn {
    font-size: 30px;
    padding: 5px 15px;
    height: 50px;
}
#goTop .btn-top {
    color: #fff;
    background-color: #997A42;
    border: none;
    transition: .2s linear;
}
#goTop .btn-top:hover,
#goTop .btn-top:focus,
#goTop .btn-top.focus,
#goTop .btn-top:active,
#goTop .btn-top.active {
    color: #fff;
    background-color: #E2A61E;
    border: none;
}

/*首頁左立即報名*/
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    
    48% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1
    }
    
    49% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0
    }
    
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
    
    52% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
@keyframes cloud {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    
    48% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1
    }
    
    49% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0
    }
    
    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
    
    52% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
@-webkit-keyframes wave {
    0% {
        -webkit-transform: rotateZ(0.02deg) translate3d(0, 8%, 0) rotateZ(0.02deg);
        transform: rotateZ(0.02deg) translate3d(0, 8%, 0) rotateZ(0.02deg)
    }
    
    100% {
        -webkit-transform: rotateZ(360.02deg) translate3d(0, 8%, 0) rotateZ(-360.02deg);
        transform: rotateZ(360.02deg) translate3d(0, 8%, 0) rotateZ(-360.02deg)
    }
}
@keyframes wave {
    0% {
        -webkit-transform: rotateZ(0.02deg) translate3d(0, 8%, 0) rotateZ(0.02deg);
        transform: rotateZ(0.02deg) translate3d(0, 8%, 0) rotateZ(0.02deg)
    }
    
    100% {
        -webkit-transform: rotateZ(360.02deg) translate3d(0, 8%, 0) rotateZ(-360.02deg);
        transform: rotateZ(360.02deg) translate3d(0, 8%, 0) rotateZ(-360.02deg)
    }
}
@-webkit-keyframes wave-dark {
    0% {
        -webkit-transform: translate(0, 0) rotate(0.02deg);
        transform: translate(0, 0) rotate(0.02deg)
    }
    
    100% {
        -webkit-transform: translate(2px, 4px) rotate(0.02deg);
        transform: translate(2px, 4px) rotate(0.02deg)
    }
}
@keyframes wave-dark {
    0% {
        -webkit-transform: translate(0, 0) rotate(0.02deg);
        transform: translate(0, 0) rotate(0.02deg)
    }
    
    100% {
        -webkit-transform: translate(2px, 4px) rotate(0.02deg);
        transform: translate(2px, 4px) rotate(0.02deg)
    }
}
@-webkit-keyframes wavy {
    0% {
        -webkit-transform: translate(0, 0) rotate(0.02deg);
        transform: translate(0, 0) rotate(0.02deg)
    }
    
    100% {
        -webkit-transform: translate(6px, 6px) rotate(0.02deg);
        transform: translate(6px, 6px) rotate(0.02deg)
    }
}
@keyframes wavy {
    0% {
        -webkit-transform: translate(0, 0) rotate(0.02deg);
        transform: translate(0, 0) rotate(0.02deg)
    }
    
    100% {
        -webkit-transform: translate(6px, 6px) rotate(0.02deg);
        transform: translate(6px, 6px) rotate(0.02deg)
    }
}
@-webkit-keyframes cargo-move {
    0% {
        background-position: 200px 132px, right 0
    }
    
    20% {
        background-position: 20px 132px, right 0
    }
    
    60% {
        background-position: 20px 132px, right 0
    }
    
    80% {
        background-position: 200px 132px, right 0
    }
    
    100% {
        background-position: 200px 132px, right 0
    }
}
@keyframes cargo-move {
    0% {
        background-position: 200px 132px, right 0
    }
    
    20% {
        background-position: 20px 132px, right 0
    }
    
    60% {
        background-position: 20px 132px, right 0
    }
    
    80% {
        background-position: 200px 132px, right 0
    }
    
    100% {
        background-position: 200px 132px, right 0
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0
    }
    
    100% {
        opacity: 1
    }
}
@keyframes fade {
    0% {
        opacity: 0
    }
    
    100% {
        opacity: 1
    }
}
@media screen and (min-width: 481px) {
    .kv--xs {
        display: none
    }
    
    .kv--md {
        display: block
    }
}
@media screen and (min-width: 768px) {
    .menu__container {
        width: 98%
    }
    
    .section {
        padding-top: 60px;
        padding-bottom: 60px
    }
    
    .ticket-table__btn {
        padding: 8px 22px
    }
}
@media screen and (min-width: 992px) {
    .kv__title {
        top: 15%
    }
    
    .kv__title img {
        width: 80%
    }
    
    .kv__freight {
        left: 10%
    }
    
    .menu {
        position: absolute;
        top: inherit;
        height: 70px
    }
    
    .menu__container {
        width: 98%
    }
    
    .menu__burger {
        display: none
    }
    
    .menu__mask {
        display: block
    }
    
    .menu__brand {
        line-height: 70px;
        /*padding-top: 15px;*/
    }
    
    .menu__brand-logo {
        font-size: 26px;
    }
    
    .info {
        margin-top: 55px
    }
}
@media screen and (min-width: 1200px) {
    .kv__title {
        top: 10%
    }
    
    .kv__title img {
        width: 100%
    }
    
    .kv__freight {
        left: 29%
    }
    
    .menu__container {
        width: 88%
    }
}
@media screen and (min-width: 1921px) {
    .kv__max-screen .kv__title {
        left: 18%
    }
    
    .kv__max-screen .kv__port {
        left: 55%
    }
}

/*fix anchor navbar offset */
.jumptarget::before {
    content: "";
    display: block;
    height: 80px;
    /* fixed header height*/
    
    margin: -80px 0 0;
    /* negative fixed header height */
}
.intro-bg {}
.intro {
    padding: 80px 0;
    margin-top: 20px;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-position: center center;
}
.intro h3 {
    font-size: 32px;
    color: #007b5b;
}
.intro p {
    font-size: 19px;
    line-height: 1.85;
}
.intro p:first-of-type {
    margin-bottom: 22px;
}
.intro-first:first-letter {
    font-size: 28px;
}
@media screen and (max-width: 480px) {
    #ticket .btn {
        padding: 6px 10px;
    }
    
    .intro {
        padding: 40px 0;
    }
    
    .intro p {
        font-size: 17px;
    }
    
    .intro p:first-of-type {
        margin-bottom: 19px;
    }
}