@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*.container {*/
/*width: 1200px;*/
/*width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}*/

.main-header .container {
    align-items: center;
    padding: 20px;
}

.banner .container {
    height: 100%;
}


.main-title {
    margin: 50px 0;
    text-align: center;
}

    .main-title h1 {
        width: 100%;
        box-sizing: border-box;
        /*font-size: 70px;*/
        font-size: 4vmax;
        margin-bottom: .5em;
        display: flex;
        color: #666;
        justify-content: center;
    }

        .main-title h1::before,
        .main-title h1::after {
            content: '';
            display: block;
            width: 4em;
            height: 1px;
            flex-grow: 1;
            background-color: #aaa;
            margin: auto;
        }

        .main-title h1::before {
            margin-right: .5em;
        }

        .main-title h1::after {
            margin-left: .5em;
        }

    .main-title .txt {
        /*  width: 600px;*/
        width: 90%;
        padding: 10px;
        margin: auto;
        box-sizing: border-box;
    }

        .main-title .txt p {
            margin-bottom: 1em;
        }

            .main-title .txt p a {
                color: #fa0;
                text-decoration: none;
            }

.sec-title {
    margin-top: 2em;
}

    .sec-title h2 {
        text-align: center;
        width: 100%;
        font-size: 32px;
        color: #333;
    }

.studen-msg {
    display: flex;
    /*  width: 100%;*/
    justify-content: center;
    flex-wrap: wrap;
}

    .studen-msg .item {
        width: 500px;
        margin: 15px;
        display: flex;
        background-color: #fff;
        border: 1px solid #888;
        box-shadow: 0 10px 30px rgba(0,0,0,.3);
        font-family: 'Noto Sans TC', sans-serif;
        align-items: center;
    }

        .studen-msg .item .pic {
            width: 40%;
            padding: 10px;
        }

            .studen-msg .item .pic img {
                width: 100%;
                /* height: 100%;*/
                border-radius: 50% !important;
                object-fit: cover;
            }

        .studen-msg .item .txt {
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

            .studen-msg .item .txt h2 {
                font-weight: 500;
                margin-bottom: .4em;
            }

            .studen-msg .item .txt p {
                font-weight: 300;
            }

            .studen-msg .item .txt .btn {
                line-height: 1.5em;
                border: 1px solid #ccc;
                padding: 0 1em;
                align-self: flex-end;
                text-decoration: none;
                border-radius: 200px;
                margin-top: auto;
                color: #aaa;
            }

                .studen-msg .item .txt .btn:hover {
                    background-color: #ccc;
                    color: #fff;
                }

.main-footer {
    display: flex;
    padding: 30px 0 0 0;
    background: linear-gradient(-20deg,#ffaa00 30%,#08c7a5);
}

.footer-item {
    width: 0;
    flex-grow: 1;
    margin: 0 20px;
}

    .footer-item h4 {
        font-size: 24px;
        color: #fff;
        border-bottom: 1px dotted #fff;
        margin-bottom: .5em;
        padding-bottom: .5em;
    }

    .footer-item nav {
        display: flex;
        flex-direction: column;
    }

        .footer-item nav a {
            color: #fff;
            line-height: 1.4;
            text-decoration: none;
            padding: 5px 0;
        }

            .footer-item nav a:hover {
                color: #fa0;
            }

.footer-subs {
    display: flex;
    flex-direction: column;
}

    .footer-subs form {
        display: flex;
        width: 100%;
        margin: auto 0px;
    }

    .footer-subs input[type="text"],
    .footer-subs input[type="submit"] {
        border: none;
        padding: 5px 10px;
    }

    .footer-subs input[type="text"] {
        width: 0;
        flex-grow: 1;
    }

    .footer-subs input[type="submit"] {
        color: #70f6df;
        background-color: #3e5293;
    }


.section-group {
    padding: 15px 0 50px 0;
    margin-top: 5px;
    border-radius: 20px;
}

.main-title {
    /*   background-color: #eee;*/
}


/*成人警語*/
.adultWarning {
    padding: 15px;
    margin: 15px;
    display: flex;
    color: #515151;
    background-color: #fff;
   
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    font-family: 'Noto Sans TC', sans-serif;
    align-items: center;
}


.main-header {
    background-color: #000;
}

    .main-header .logo {
        width: 100px;
    }

        .main-header .logo img {
            width: 100%;
            vertical-align: middle;
        }

    .main-header .main-nav {
        margin: auto;
    }

        .main-header .main-nav a {
            text-decoration: none;
            color: #fff;
            padding: 5px 1em;
            position: relative;
            transform: translateY(10px);
            transition: .3s;
        }

            .main-header .main-nav a:hover {
                transform: translateY(-10px);
            }

    .main-header .header-search {
        display: flex;
    }

        .main-header .header-search button,
        .main-header .header-search input {
            border: none;
            background-color: #fff;
            padding: 5px 10px;
        }

            .main-header .header-search button:focus,
            .main-header .header-search input:focus {
                outline: none;
            }

        .main-header .header-search button {
            border-radius: 0 200px 200px 0;
        }

        .main-header .header-search input {
            border-radius: 200px 0 0 200px;
        }


.banner {
    width: 100%;
    height: 700px;
    background-color: #ccc;
    background: linear-gradient(115deg, #fa0 50%, transparent 50%) center center / 100% 100%, url("COVER-fish.jpg") right center / auto 100%;
    background-color: #000;
}

.banner-txt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
}

    .banner-txt h1 {
        font-size: 80px;
        border-bottom: 1px solid #333;
        font-weight: 900;
        padding-bottom: .3em;
        margin-bottom: .3em;
    }

        .banner-txt h1 small {
            display: block;
            font-size: 53px;
            font-weight: 700;
        }

    .banner-txt h2 {
        font-size: 50px;
        font-weight: 700;
    }

    .banner-txt p {
        font-size: 20px;
        font-weight: 300;
    }

.fish {
    display: flex;
    /*    width: 1200px;*/
    margin: 0px auto;
    /*  padding-top: 75px;*/
    flex-wrap: wrap;
    justify-content: center;
}

    .fish .item {
        width: 370px;
        margin: 50px 15px;
        text-align: center;
        border: 10px solid #f9cec2;
        background-color: #fff;
        border-radius: 20px;
    }

        .fish .item h3 {
            color: #f5afac;
        }

        .fish .item p {
            color: #959595;
        }

        .fish .item .icon {
            width: 150px;
            height: 150px;
            background-color: #fff;
            margin: -75px auto 0;
            font-size: 85px;
            line-height: 150px;
            border-radius: 50%;
            color: #f5afac;
            position: relative;
        }

            .fish .item .icon:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-top: 10px solid #f9cec2;
                border-right: 10px solid #f9cec2;
                border-bottom: 10px solid transparent;
                border-left: 10px solid transparent;
                left: -1px;
                top: -1px;
                border-radius: 50%;
                transform: rotate(-45deg);
            }

        .fish .item:hover .fa {
            animation: ss .2s linear infinite alternate;
        }

        .fish .item .txt {
            padding: 20px 20px 2em;
        }

@keyframes ss {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

.force {
    /* width: 1200px;*/
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
}

    .force .item {
        width: 368px;
        margin: 15px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ccc;
        transform: translateY(0px);
        transition: .5s;
    }

        .force .item img {
            width: 100%;
            vertical-align: middle;
        }

        .force .item h2 {
            border-bottom: 1px solid #888;
            padding-bottom: .3em;
            margin-bottom: .4em;
            font-weight: 600;
            transition: .25s;
        }

        .force .item p {
            line-height: 1.6;
            font-weight: 300;
            transition: .25s;
        }

        .force .item .txt {
            padding: 20px;
            position: relative;
        }

            .force .item .txt:before {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                left: 0;
                top: 0;
                border-top: 50px solid transparent;
                border-left: 184px solid #fff;
                border-right: 184px solid #fff;
                transform: translateY(-100%);
            }

        .force .item:hover {
            transform: translateY(-50px);
        }

            .force .item:hover .txt {
                background-image: linear-gradient(0deg,#FB8076, #FEB85D);
            }

                .force .item:hover .txt:before {
                    border-left: 184px solid #FEB85D;
                    border-right: 184px solid #FEB85D;
                }

            .force .item:hover h2 {
                color: #fff;
                border-bottom-color: #fff;
            }

            .force .item:hover p {
                color: #fff;
            }