@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500&display=swap');

body {
    line-height: 2em;
    /*background-image: url(../images/bg-bird.svg);
    background-repeat: no-repeat;
    background-position: -50px 15%;
    background-size: 450px;*/
    z-index: -1;
    color: var(--dark);
}

:root {
    --indigo: #313A9B;
    --blue: #10BEF6;
    --sky: #2D7CC5;
    --babyblue: #DBF5FE;
    --violet: #738acf;
    --purple: #A736A0;
    --yellow: #FFB500;
    --green: #80BC00;
    --lightgreen: #c5dd8b;
    --dark: #403a39;
    --org: #ff4b00;
}

.hunting.blue,
.page-title.blue,
.bt-round,
.opacity.blue {
    background: var(--blue);
}

.page-title.indigo,
.edm.indigo,
.opacity.indigo,
.page-title.indigo {
    background: var(--indigo);
}

.tablink.sky {
    background: var(--sky);
}

.block.org b {
    background: var(--org);
}

.violet {
    background: var(--violet);
}

.bt-round.white {
    background: white;
}

.page-title.yellow,
.title-round.yellow,
.block.yellow b,
.page-half.yellow .content::before,
.owl-tablink.yellow a.active::after,
.owl-tablink.yellow a:hover::after,
.bt-round.yellow {
    background: var(--yellow);
}

.page-title.green,
.opacity.green,
.title-round.green,
.block.green b {
    background: var(--green);
}

a.lightgreen,
.tablink.lightgreen {
    background: var(--lightgreen);
}

.block.purple b,
.owl-tablink.purple a.active::after,
.owl-tablink.purple a:hover::after,
.bt-round.purple,
.page-title2.purple {
    background: var(--purple);
}

a.babyblue {
    background: var(--babyblue);
}

.black,
a.babyblue,
a.download,
.album a,
.bt-round.white {
    color: var(--dark);
}

.text-blue {
    color: var(--blue);
}

.album a:hover,
.text-indigo {
    color: var(--indigo);
}

.opacity {
    opacity: .5;
}

.form-label,
.col-form-label {
    display: block;
    font-weight: bold;
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

.radio .form-check {
    display: inline-block;
    margin-right: 10px;
}

textarea.form-control {
    border-radius: 10px;
}

.form-label em {
    display: block;
    font-size: 90%;
    font-style: normal;
    color: gray;
    position: relative;
    top: -5px;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Noto Serif TC', serif;
    line-height: 1.3em;
}

.owl-main .title-round h3 {
    font-size: 1.8em;
}

.owl-main .title-round.yellow {
    background: rgba(255, 181, 0, .7);
}

.title-round h3 {
    font-size: 2em;
    text-align: center;
}

h5 {
    font-size: 1.2em;
    line-height: 1.4em !important;
}

h6 {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
}

a {
    text-decoration: none;
    color: var(--blue);
}

#forie {
    border: 2px solid #f5c2c7;
    background: #f8d7da;
    color: #842029;
    padding: 50px;
}

section {
    position: relative;
}

.chat {
    position: fixed;
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 50px;
    background: var(--green);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
    bottom: 90px;
    right: 30px;
}

.chat img {
    position: relative;
    top: -3px;
}

.gotop {
    position: fixed;
    width: 47px;
    height: 47px;
    padding: 10px;
    border-radius: 50px;
    background: var(--yellow);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
    bottom: 30px;
    right: 30px;
    transform: rotate(-90deg);
}

.gotop img {
    position: relative;
    top: -4px;
    left: 2px;
}

/*藍框*/
button:focus,
btn-close:focus,
.accordion-button:focus,
.form-control:focus,
.form-select:focus,
.btn-close:focus,
input:focus {
    background-color: white;
    border-color: inherit;
    outline: 0;
    box-shadow: none;
}

p,
.blog ol ul {
    margin-bottom: 1.4em;
}

.blog ol ul {
    margin-bottom: 1.4em;
    padding-left: 20px;
}

.blog li {
    margin-bottom: 10px;
}

.blog p,
.block .blog p {
    font-size: 1.05em;
    margin-bottom: 30px;
}

.blog h1,
.blog h2,
.blog h3,
.blog h4,
.blog h5,
.blog h6 {
    margin-bottom: 20px;
}

.blog h6 {
    font-size: 1.2em;
}

img {
    width: 100%;
    max-width: 100%;
}

.blog img {
    width: auto;
}

.member img {
    width: 85%;
}

.embed {
    position: relative;
    margin: 0;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.page-title {
    color: white;
    border-radius: 0 50em 50em 50em;
    font-family: 'Noto Serif TC', serif;
    padding: 30px 0;
    position: relative;
    margin-bottom: 50px;
    margin-top: 30px;
}

.page-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 105%;
    background: url(../images/dots.svg) no-repeat;
    background-size: contain;
    right: 10%;
    bottom: 10px;
    z-index: 1;
}

.page-title.xdot::before {
    display: none;
}

.page-title .align-middle {
    height: auto;
}

.single .page-title {
    width: 20%;
    text-align: center;
    position: absolute;
}

.single .page-title .align-middle {
    width: 100%;
}

.page-title .text {
    height: 100px;
}

.page-title h2 {
    position: relative;
    z-index: 2;
    margin-left: 15px;
    margin-right: 20px;
}

.page-title h4 {
    text-align: center;
    font-size: 1.6em;
    margin-left: 5px;
    width: 105%;
}

.page-title p {
    line-height: 1.6em;
    font-size: 18px;
    padding: 0 40px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.page-title .col-md-9 {
    position: relative;
}

.bottom100 {
    margin-bottom: 100px;
}

.align-middle {
    display: table;
    height: 100%;

}

.align-middle .text {
    display: table-cell;
    vertical-align: middle;
}

.notfound .align-middle {
    width: 100%;
}

.tablink,
.heading-pic img,
.page-half .content {
    width: 80%;
    right: 0;
}

.tablink {
    position: absolute;
    bottom: 0;
    height: 100%;
    border-radius: 0 50em 50em 0;
    font-family: Microsoft JhengHei;
    font-weight: bold;
    text-align: center;
    padding: 20px 40px 0 40px;
    right: 0;
    width: 75%;
}

.page-title.pic {
    margin-bottom: calc(400px - 160px);
}

.pic .tablink {
    bottom: auto;
    top: 0;
    height: 400px;
    border-radius: 0 0 5em 0;
}

.cjk {
    list-style-type: cjk-ideographic;
}


.owl-tablink a {
    color: var(--dark);
    display: block;
    padding-bottom: 10px;
}

.owl-tablink a::after {
    width: 0;

}

.owl-tablink a.active,
.owl-tablink a:hover {
    position: relative;
}

.owl-tablink a.active::after,
.owl-tablink a:hover::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    background-color: var(--blue);
    border-radius: 50em;
    bottom: 0;
    left: 0;
}

.heading-pic,
.news.heading-pic {
    position: relative;
    margin: 30px 0;
}

.heading-pic img {
    position: relative;
    width: 100%;
}

.page-half {
    position: relative;
    text-align: end;
    margin-top: 0;
}

.page-half .content,
.page-half.single.outside .content {
    position: relative;
    text-align: start;
    display: inline-block;
    padding: 70px 70px 100px 100px;
}

.page-half .content.news {
    padding-top: 100px;
}

.page-half .content.form {
    padding-top: 0;
}

.page-half.single .content {
    padding: 50px 0 100px 50px;
}

footer .page-half .content {
    padding: 80px;
}

.page-half .content::before {
    position: absolute;
    content: "";
    width: 100%;
    top: 0;
    left: -100%;
    padding: 50px;
    height: 100%;
    background: var(--indigo);
    opacity: .15;
}

.page-half .content.none::before {
    display: none;
}

.page-half.green .content::before {
    background: var(--green);
}

.page-half.single .content::before {
    top: 180px;
}

.card {
    border-radius: 0;
    padding: 8px;
    margin-bottom: 20px;
}

.card p {
    margin: 0;
    padding-top: 10px;
    font-size: 14px;
}

ul.col4 li {
    width: 24%;
    margin: 10px 0;
}

table ul.col4 {
    padding: 0 10%;
}

table {
     border-collapse: separate;
    /* border-collapse: collapse; */
    width: 100% !important;
    line-height: 1.4em;
}

table ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

table ul li {
    display: inline-block;
}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--indigo);
    color: white;
}

.text-center table th {
    text-align: center;
}

table th,
table td {
    padding: 15px 30px;

}

table th.one:first-child,
table th.one:last-child {
    text-align: center;
}

table th.one:first-child::before {
    border: 1px solid var(--indigo);
    border-radius: 20px 20px 0 0;
}

table tr {
    border: 1px solid var(--indigo);
    border-left: 0;
    border-right: 0;
}

table tr:first-child,
table tr:last-child,
table tr:last-child td {
    border: none;
}

table td {
    border-bottom: 1px solid var(--indigo);
    position: relative;
}


table tr:last-child td.one:last-child::before {
    border-radius: 0 0 20px 20px;
    border-bottom: 0;
}

.normal td,
.normal tr:last-child td {
    border: 1px solid var(--indigo);
    border-left: 0;
}

.normal th {
    border: 1px solid white;
    border-top: 0;
    border-left: 0;
}

.normal th:last-child,
.normal td:last-child {
    border-right: 0;
}

.normal td {
    border-bottom: 0;
}

.normal th,
.normal td {
    padding: 10px 15px;
}

.normal table tr:last-child td {
    border: 1px solid var(--indigo);
    border-bottom: 0;
    border-left: 0;
}

.normal table tr:last-child td:last-child {
    border-right: 0;
}


.table {
    border: 1px solid var(--indigo);
    border-radius: 18px;
    overflow: hidden;
    margin: 20px 0;
}

.linetop {
    border-top: 8px solid white;
    padding-bottom: 40px;
}

.promote {
    width: 100%;
    color: white;
    text-align: center;
    position: relative;
    background: white;
}

.promote h4 {
    margin-bottom: 30px;
}

.promote p {
    max-width: 360px;
    margin: 0 auto;
}

.promote a {
    color: white;
    margin-top: 20px;
    display: inline-block;
}

.notfound {
    background: url(../images/bg-color.svg) center white;
    height: 60vh;
}

.notfound h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 7em;
    text-align: center;
}

.owl-nav .owl-next {
    right: -25px;
}

.friends {
    padding: 100px 0;
}

.owl-friends {
    margin: 0 30px;
}

.owl-friends .owl-nav {
    top: calc(50% - 20px);
}

.owl-friends .owl-nav .owl-next {
    right: -40px;
}

.owl-friends .owl-nav .owl-prev {
    left: -40px;
}

.owl-friends .item img {
    max-height: 60px;
    width: auto;
    margin:0 auto;
}

.hunting,
.edm {
    width: 52%;
    padding: 50px;
}

.hunting {
    border-radius: 0 0 50em 0;
    position: relative;
}

.edm {
    border-radius: 50em 0 0 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.edm input {
    display: block;
    border: none;
    width: 100%;
    max-width: 360px;
    margin: 10px auto;
    text-align: center;
}

.bt {
    display: inline-block;
    padding: 10px 20px 10px 50px;
    position: relative;
    font-family: Microsoft JhengHei;
    line-height: 18px;
    border: none;
    background: none;
    color: #333;
}

.bt::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: var(--yellow);
    border-radius: 50em;
    top: 0;
    left: 0;
}

.bt.next {
    padding: 5px 0 5px 40px;
    color: var(--dark);
    font-size: 15px;
}

.bt.next::before {
    background: url(../images/arrow.svg);
    background-size: contain;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 30px;
    height: 30px;
    top: 5px;
}

.bt-round {
    padding: 3px 20px;
    border-radius: 50em;
    color: white;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    min-width: 130px;
    cursor: pointer;
}

.bt-round.lightgreen {
    color: var(--dark);
}

.bt-round.green {
    background: var(--green);
}

.bt-round:hover,
.bt-round.blue {
    color: #fff;
}

.classification {
    position: relative;
    height: 80vh;
}

.classification::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*
    background: rgba(0, 0, 0, .3);
    */
}

.flex ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.flex ul li {
    flex: 1;
    position: relative;
    max-width: 30%;
}

.classification ul li {
    margin: 5px;
    padding: 20px 20px 50px 20px;
    border: 8px solid rgba(116, 186, 235, .5);
}

.classification ul li::before {
    position: absolute;
    content: "";
    background: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.classification ul li .info {
    position: relative;
    z-index: 2;
}

.classification .position {
    position: absolute;
    width: 100%;
    bottom: 15vh;
}

.classification img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    margin: 30px 0;
    display: block;
}

.classification ul li:first-child img {
    max-height: 60px;
    margin-top: 10px;
}

.classification ul li:nth-child(3) img {
    max-height: 50px;
    margin-top: 20px;
}

.classification ul li:nth-child(4) img {
    max-height: 50px;
    margin-top: 20px;
}

.classification .bt-round {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: auto;
}

input {
    border-radius: 50em;
    font-size: 1em;
    padding: 8px 15px;
    outline: 0;
}

::placeholder {
    color: var(--indigo);
}

.news-list {
    margin-top: 50px;
}

.news-list a {
    color: black;
}

.news-list article {
    border-bottom: 1px solid #ccc;
    position: relative;
    min-height: 220px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.news-list article h3 {
    margin: 20px 0;
}

.news-list article h3 a {
    color: var(--dark);
}

.news-list article h3 a:hover {
    color: var(--indigo);
}

.news-list.blue article h3 a:hover {
    color: var(--blue);
}

.news-list article .pic {
    position: absolute;
    left: 0;
}

.news-list article img {
    box-shadow: 10px 10px 0 var(--indigo);
    max-width: 275px;
    max-height: 180px;
}

.news-list.yellow article img {
    box-shadow: 10px 10px 0 var(--yellow);
}

.news-list.blue article img {
    box-shadow: 10px 10px 0 var(--blue);
}

.news-list article .info {
    margin-left: 340px;
}

.news-list.inside article {
    display: flex;

}

.news-list.inside article .pic {
    position: relative;
    flex: 1;
    justify-content: flex-start;
    left: 0;
    text-align: left;
}

.news,
.contact,
.blog {
    margin-bottom: 100px;
}

.news .date {
    text-align: right;
    margin-bottom: 30px;
}

.title {
    position: relative;
}

.home-news a,
.home-event a {
    color: var(--dark);

}

.home-news h5,
.home-event h5 {
    margin-bottom: 15px;
}

.home-news .bt-round,
.home-news img,
.home-news .embed {
    margin-bottom: 15px;
    color: white;
}

.home-news ul li {
    padding-bottom: 25px;
}

.home-news .date {
    position: absolute;
    bottom: -20px;
}

.home-event {
    padding-top: 20px;
    padding-bottom: 60px;
}

.home-event ul li {
    background: white;
}

.home-event .date {
    text-align: center;
    background: var(--blue);
    text-transform: uppercase;
    font-size: 1.2em;
    padding: 10px;
    color: white;
}

.home-event .info {
    padding: 20px 30px;
}

.home-event .info p,
.home-news p {
    font-size: 15px;
    line-height: 1.6em;
}

.home-news .container,
.home-event .container {
    position: relative;
}

.home-news .bt.next {
    position: absolute;
    right: 40px;
    bottom: 0;
}

.home-event .bt.next {
    position: absolute;
    right: 40px;
    bottom: -20px;
}

.home-news .bt.next::before,
.home-event .bt.next::before {
    top: 0px;
}

footer {
    background: #ccc;
    border-bottom: 25px solid var(--indigo);
    line-height: 1.6em;
}

footer .page-half .content::before {
    background: white;
    opacity: 1;
}

footer .page-half .content {
    padding-bottom: 30px;
}

footer .content ul {
    display: inline-table;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 38%;
}

footer .content ul:first-child,
footer .content ul:nth-child(3) {
    width: 30%;
}

footer .content ul h4 {
    color: var(--indigo);
    border-top: 1px solid var(--indigo);
    border-bottom: 1px solid var(--indigo);
    padding: 15px;
    position: relative;
    width: 102%;
    margin-bottom: 20px;
}

footer .content ul li {
    padding: 2px 0 2px 15px;
}

footer .content ul li a {
    color: var(--dark);
}

footer .container {
    position: relative;
}

footer .copy {
    font-size: 13px;
    border-top: 1px solid var(--indigo);
    padding-top: 20px;
    padding-left: 15px;
    margin-top: 40px;
}

footer .info {
    width: 18%;
    position: absolute;
    z-index: 2;
    padding-top: 50px;
    font-size: 13px;
    height: 100%;
    left: 2%;
}

footer .logo {
    margin-bottom: 20px;
    max-width: 230px;
    width: 100%;
}

footer .icon {
    bottom: 40px;
    position: absolute;
}

.icon {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon li {
    display: inline-block;
    border-radius: 50em;
    margin: 10px 10px 0 0;
    background: var(--indigo);
    padding: 5px;
    width: 40px;
    height: 40px;
}

.icon li img {
    width: 30px;
}

.block .icon li {
    padding: 6px 5px;
}

.block .icon li img {
    position: relative;
    top: -3px;
}

.icon li:hover,
.block .icon li:nth-child(2):hover,
.block .icon li:nth-child(3):hover,
.bt-round:hover,
.bt:hover::before {
    background: var(--org);
}

.block {
    position: relative;
    margin-top: 70px;
    margin-left: 230px;
}

.block.ceo {
    margin: 50px 0 20px;
}

.block b {
    position: absolute;
    left: -230px;
    padding: 15px;
    color: white;
    border-radius: 50em;
    font-family: 'Noto Serif TC', serif;
    min-width: 160px;
    text-align: center;
    display: inline-block;
    font-weight: normal;
    background: var(--blue);
}

.block h4 {
    font-size: 1.3em;
}

.block h4 span {
    display: block;
    font-size: 15px;
}

.contact .block p {
    line-height: 1.4em;
}

.block .icon li:nth-child(2) {
    background: #01c944;
}

.block .icon li:nth-child(3) {
    background: #1e9af0;
}

.block .bt {
    display: block;
    margin: 10px 0;
}

.block button.bt {
    display: inline-block;
}

.inside .block b {
    position: relative;
    left: 0;
    margin-bottom: 20px;
}

.team p {
    padding-left: 70px;
    position: relative;
}

.team p b {
    position: absolute;
    left: 0;
}

.search-box {
    margin-bottom: 30px;
}

.search-box .bt-round {
    padding: 5px 20px;
}

button.bt-round {
    border: none;
}

.dropbtn {
    font-family: Microsoft JhengHei;
    border: 1px solid var(--dark);
    padding: 10px 60px 10px 30px;
    background: url(../images/arrow.svg) 96% center no-repeat white;
    background-size: 38px;
    border-radius: 50em;
    width: 100%;
    display: block;
}

.dropdown {
    position: relative;
    display: inline-block;
    min-width: 200px;
    text-align: center;
}

.dropdown-content {
    font-family: Microsoft JhengHei;
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px 16px;
    background: white;
    text-decoration: none;
    display: block;
}

.dropdown-content a:first-child {
    border-radius: 20px 20px 0 0;
}

.dropdown-content a:last-child {
    border-radius: 0 0 20px 20px;
}

.dropdown-content a:hover {
    background: var(--indigo);
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.pagination {
    float: right;
}

.pagination li:nth-child(1) {
    line-height: 3em;
}

.pagination li:nth-child(2) {
    margin: 0 15px;
    padding-top: 5px;
}

.pagination .prve,
.pagination .next {
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
    display: block;
    background: red;

}

.pagination .prve {
    background: url(../images/arrow.svg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    background-size: contain;
}

.pagination .next {
    background: url(../images/arrow.svg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background-size: contain;
}

.pagination .prve:hover,
.pagination .next:hover,
.bt.next:hover::before {
    background: url(../images/arrow-org.svg);
    background-size: contain;
}

.pagination input {
    border-radius: 0;
    border: 1px solid var(--dark);
    padding: 3px;
    width: 40px;
    text-align: center;
}

.mobile_menu {
    position: relative;
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    margin: 0;
    padding: 50px 0;
}

.sm_menu_outer .mobile_menu .submenu {
    padding: 50px 0;
}

.mobile_menu li {
    list-style: none;
}

.mobile_menu a {
    color: white;
    text-decoration: none;
}

.sm_menu_outer.active .mobile_menu {
    display: block;
}

.sm_menu_outer {
    height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -9;
    width: 100%;
    opacity: 0;
    background-color: var(--green);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.sm_menu_outer.active {
    opacity: 1;
    z-index: 999;
}

.sm_menu_outer .mobile_menu a,
.sm_menu_outer .mobile_menu li.back a {
    display: inline-block;
    padding: 3vh 15px;
    position: relative;
    font-size: 1.8em;
    letter-spacing: 2px;
}

.sm_menu_outer .mobile_menu .hasChild a {
    padding-right: 50px;
}

.sm_menu_outer .mobile_menu .hasChild a::after {
    position: absolute;
    content: "";
    right: 0;
    width: 30px;
    height: 30px;
    background: url(../images/arrow.svg) right no-repeat;
    background-size: contain;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sm_menu_outer .mobile_menu li.back a {
    padding-left: 50px;
    padding-bottom: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--yellow);
    min-width: 300px;
}

.sm_menu_outer .mobile_menu li.back a::before {
    position: absolute;
    content: "";
    left: 15px;
    width: 30px;
    height: 30px;
    background: url(../images/arrow.svg) right no-repeat;
    background-size: contain;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sm_menu_outer .mobile_menu .hasChild .submenu a::after {
    display: none;
}

/*Sub Menu anim */
.sm_menu_outer .mobile_menu .submenu {
    background-color: var(--green);
    height: 100%;
    position: absolute;
    right: -100%;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 999;
}

.sm_menu_outer .mobile_menu li.active>.submenu {
    right: 0;
}

.sm_menu_outer .mobile_menu .submenu a {
    padding: 8px;
    letter-spacing: normal;
    font-size: 1.2em;
}

.sm_menu_outer .mobile_menu .submenu li:last-child {
    padding-bottom: 50px;
}

/*Hamburger Animation */
#sm_menu_ham {
    cursor: pointer;
    float: right;
    height: 40px;
    position: fixed;
    right: 5px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    width: 48px;
    top: 45px;
    right: 20px;
    z-index: 9999;
}

#sm_menu_ham span {
    background-color: var(--dark);
    border-radius: 5px;
    display: block;
    height: 2px;
    left: 0;
    opacity: 1;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.25s ease-in-out 0s;
    -moz-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
    width: 40px;
}

#sm_menu_ham span:nth-child(1) {
    top: 0;
}

#sm_menu_ham span:nth-child(2),
#sm_menu_ham span:nth-child(3) {
    top: 15px;
}

#sm_menu_ham span:nth-child(4) {
    top: 30px;
}

#sm_menu_ham.open span:nth-child(1) {
    left: 50%;
    top: 18px;
    width: 0;
}

#sm_menu_ham.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

#sm_menu_ham.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#sm_menu_ham.open span:nth-child(4) {
    left: 50%;
    top: 18px;
    width: 0;
}

.mobile_menu .icon {
    position: relative;
    bottom: auto;
    top: 20px;
}

.mobile_menu .icon a {
    padding: 0;
}

.owl-carousel {
    position: relative;
    width: auto;
}

.owl-nav {
    position: absolute;
    top: 0;
    width: 100%;
    color: white;
}

.owl-carousel img {
    width: 100%;
}

.owl-carousel .owl-nav button.owl-prev img {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
}

.owl-tablink.owl-carousel .owl-nav button.owl-next,
.owl-tablink.owl-carousel .owl-nav button.owl-prev {
    width: 25px;
    height: 35px;
    border-radius: 50em;
}

.owl-main.owl-carousel .owl-nav button.owl-next,
.owl-main.owl-carousel .owl-nav button.owl-prev {
    width: 50px;
    height: 50px;
    border-radius: 50em;
    padding: 10px !important;
    /*background: rgba(116, 186, 235, .5);*/
}

.owl-main.owl-carousel .owl-nav button:hover {}

.owl-main .owl-nav {
    top: calc(50% - 25px);
    width: 96%;
    left: 2%;
}

.owl-main .owl-prev {
    left: 0;
}

.owl-main .owl-next {
    right: 0;
}

.owl-main .item {
    height: calc(100vh - 130px);
    position: relative;
}

.owl-main .item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*
    background: rgba(0, 0, 0, 0.2);
    */
}

.owl-main .text {
    text-align: right;
}

.owl-main .position {
    position: absolute;
    width: 100%;
    bottom: 5%;
}

.owl-main .bt-round {
    padding: 5px 20px;
}

.owl-tablink .owl-prev {
    left: -25px;
}

.owl-tablink .owl-next {
    right: -25px;
}

.owl-tablink .owl-nav img {
    height: 25px;
}

.owl-nav .disabled {
    display: none;
}

.mobile {
    display: none;
}

.title-round {
    border-radius: 0 50em 50em 50em;
    padding: 15px 25px 15px 50px;
}

.title-round.green {
    color: white;
}

h4.title {
    text-align: center;
    padding: 40px 0 30px;
}

h4.title .bt {
    position: absolute;
    right: 25px;
}

h4.title .bt.next::before {
    top: 0;
}

.home-news .title-round {
    position: relative;
    top: -20px;
    text-align: center;
}

.bg-gray {
    background: #f5f5f5;
}

.home-news.fund img {
    border-radius: 0 3em 3em 3em;
    margin-bottom: 20px;
}

.home-event ul li,
.home-news ul li {
    margin: 0 25px 30px;
}

.home-news.fund ul li {
    padding-bottom: 0;
}

.home-event ul li h5,
.home-news ul li h5,
.promote p,
.job-list h5 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.news-list p,
.more-info p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.home-news.fichet ul {
    margin-top: 30px;
}

.content .date {
    position: absolute;
    right: 70px;
    top: 40px;
}

.content .info .date {
    position: relative;
    top: 0;
    right: 0;
    margin: 0;
}

.blog ul li {
    list-style: disc;
}

ul li::marker {
    color: var(--blue);
}

.page-title .dropdown {
    position: absolute;
    z-index: 2;
    right: 50px;
    top: calc(50% - 25px);
    min-width: 120px;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
}

main.container {
    padding-top: 30px;
}

.act-list ul,
.job-list ul {
    margin: 0 8%;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.act-list h4 {
    margin-bottom: 15px;
}

.act-list li {
    background: var(--babyblue);
    padding: 20px;
    position: relative;
    flex: 0 0 38%;
    margin: 0 20px 20px 100px;
}

.act-list li:nth-child(2n),
.job-list li:nth-child(2n) {
    margin-right: 0;
}

.act-list li .date {
    background: var(--blue);
    color: white;
    position: absolute;
    width: 100px;
    height: 100%;
    left: -100px;
    top: 0;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.4em;
    border-radius: 0 0 0 30px;
}

.act-list p {
    line-height: 1.6em;
    margin: 0;
}

.act-list ul a,
.job-list ul a {
    color: var(--dark);
}

.job-list {
    position: relative;
}

.job-list .dropdown {
    min-width: 400px;
}

.job-list li {
    border: 1px solid #ccc;
    margin: 0;
    background: var(--babyblue);
}


.job-list li {
    position: relative;
    flex: 0 0 48%;
    margin: 0 10px 30px 10px;
    border-radius: 0 0 0 30px;
}

.job-list a.bt {
    color: var(--dark);
    right: 8%;
    transform: scale(.9);
    top: -20px;
}

.job-list li .pic {
    text-align: center;
    height: 80px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background: white;
}

.job-list li .pic img {
    max-height: 60px;
    width: auto;
}

.job-list li .info {
    padding: 20px;
    position: relative;
    margin: 0;
}

.job-list li .info.expired::before {
    position: absolute;
    content: "已過期";
    background: #999;
    color: white;
    font-size: 14px;
    padding: 10px;
    line-height: 1em;
    top: 0;
    right: 0;
}

.job-list p {
    line-height: 1.6em;
}

.page {
    margin: 50px 0;
}

.form-control,
.form-select {
    border-radius: 50em;
    color: var(--indigo);
    padding: 10px 20px;
}

.form-select {
    background: url(../images/arrow-blue2.svg) 98% center no-repeat white;
    background-size: 25px;
}

.form-select.yellow {
    background-image: url(../images/arrow.svg);
}

.form-check-input {
    padding: 8px;
    cursor: pointer;
}

.form-select.text-center {
    text-align-last: center;
}

.col-form-label.text-right {
    text-align: right;
}

/* Hide Calendar Icon In Chrome */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    background: url(../images/date.svg) 98% center no-repeat #fff;
    background-size: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.small {
    font-size: 80% !important;
    line-height: 1.4em;
}

.pagenation {
    margin: 50px 0 100px;
}

.pagenation.inside {
    margin: 50px calc(8% + 20px) 100px 8%;
}

.accordion-item {
    background-color: transparent;
    border: 0;
}

.accordion-button {
    background-color: var(--babyblue);
    border: 0;
    margin-bottom: 2px;
    font-size: 20px;
    padding: 30px 20px 30px 90px;
    line-height: 1.4em;
}

.accordion-button span {
    position: absolute;
    left: 20px;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    background: var(--purple);
    color: white;
    border-radius: 50em;
    font-family: 'Roboto', sans-serif;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
    color: var(--dark);
    ;
    background-color: var(--babyblue);
    box-shadow: none;
}

.accordion-body {
    background: rgba(152, 64, 155, .2);
    padding-left: 90px;
    padding-right: 60px;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background: url(../images/arrow-purple.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
}

.purple ul li::marker {
    color: var(--violet);
}

.mt-100 {
    margin-top: 100px;
}

.album li {
    padding: 20px 20px 50px;
    background: white;
    border-radius: 0 0 30px 30px;
}

.album li img,
.album li .embed {
    margin-bottom: 15px;
    width: 100%;
}

.album li p {
    position: absolute;
    bottom: 0;
}

.locate {
    padding-left: 20px;
    margin-left: 10px;
    background: url(../images/locate.svg) left center no-repeat;
    background-size: contain;
}

a.download {
    padding-right: 25px;
    background: url(../images/arrow.svg) right center no-repeat;
    background-size: contain;
    display: inline-block;
    min-width: 70px;
    position: relative;
}

a.download:hover {
    background-image: url(../images/arrow-org.svg);
}

.top100 {
    margin-top: 100px;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    transition: .3s;
    height: auto;
    background: #f1f1f1;
}

header .logo {
    /* cj@250326 */
    /*
    max-height: 50px;
    */
    position: relative;
    left: 40px;
    width: auto;
}

header.fixed .menu-container .manu ul li a {
    padding: 20px;
}

.menu-container {
    z-index: 100;
    margin-right: 200px;
}

.menu-container:after,
.menu-container:before {
    content: "";
    clear: both;
}

.menu-container:after {
    display: table;
}

.menu-container .manu {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto 0 auto;
}

.menu-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    float: right;
}

.have_mega ul {
    float: left;
}

.menu ul:before,
.menu ul:after {
    content: "";
    display: table;
}

.menu ul:after {
    clear: both;
}

.menu:before,
.menu:after {
    content: "";
    display: table;
}

.menu:after {
    clear: both;
}

.menu ul li ul:before,
.menu ul li ul:after {
    content: "";
    display: table;
}

.menu ul li ul:after {
    clear: both;
}

.menu-container .manu ul li {
    float: left;
    position: relative;

}

.menu-container .manu ul li::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    border-right: 1px solid #ccc;
    right: 0;
    top: calc(50% - 10px);
}

.menu-container .manu ul li a {
    display: block;
    padding: 35px 20px 40px;
    color: #666;
    transition: .2s;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
}

.menu-container .manu ul li .have_mega,
.menu-container .manu ul li .have_dropdown {
    background-color: var(--green);
    padding: 20px;
    display: none;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    top: 95px;
}

.fixed .menu-container .manu ul li .have_mega,
.fixed .menu-container .manu ul li .have_dropdown {
    top: 72px;
}

.menu-container .manu ul li .have_mega a,
.menu-container .manu ul li .have_dropdown a,
header.fixed .menu-container .manu ul li .have_mega a {
    font-size: 1em;
    padding: 10px 0;
    line-height: 1.2em;
    font-weight: normal;
    color: white;
}

.menu-container .manu ul li .have_mega a:hover,
.menu-container .manu ul li .have_dropdown a:hover {
    color: white;
    text-decoration: underline;
}

.menu-container .manu ul li .have_mega ul a,
header.fixed .menu-container .manu ul li .have_mega ul a {
    color: var(--dark);
    padding: 3px 0;
}

.menu-container .manu ul li .have_mega ul a:hover {
    color: var(--dark);
}

.menu-container .manu ul li .have_mega li ul li ul {
    float: none;
    padding-left: 10px;
    margin-left: 5px;
    margin-bottom: 10px;
    font-size: 80%;
    border-left: 1px solid rgba(255, 255, 255, .6);
}

.menu-container .manu ul li a span {
    transition: .3s all ease-out;
    line-height: 0px;
}

.menu-container .manu ul li a:hover {
    color: var(--dark);
    ;
}

.menu-container .manu ul li a:hover span {
    transform: rotate(180deg);
    padding-right: 5px;
}

span.drop_down_icon {
    color: #fff;
    padding-left: 5px;
    font-size: 18px;
    position: absolute;
    margin-top: 11px;
}

.menu-container .manu ul li .have_dropdown {
    position: absolute;
    display: none;
    z-index: 9;
}

.menu-container .manu ul li .have_dropdown li {
    width: 25%;
    float: none;
}

.menu-container .manu ul li .have_mega {
    position: fixed;
    left: 0;
    display: none;
    width: 100%;
    z-index: 9;
    text-align: center;
}

.menu-container .manu ul li .have_mega li {
    float: none;
    margin-right: 5%;
    display: inline-block;
    text-align: left;
}

.menu-container .manu ul li .have_mega li:last-child {
    margin-right: 0;
}

.have_mega li::after,
.have_dropdown li::after,
.menu-container .manu ul li:last-child:after {
    display: none;
}

.menu-container .manu ul li .have_dropdown li a,
.header.fixed .menu-container .manu ul li .have_dropdown li a {
    width: 150px;
    float: left;
    padding: 10px;
}

.menu-container .manu ul li .have_dropdown li ul {
    float: none;
    margin-left: 10px;
    font-size: 90%;
}

.menu-container .manu ul li .have_mega li ul li {
    height: auto;
    float: none;
    display: block;
    width: 100%;
}

.manu .m6 {
    position: relative;
}

.manu .m2::before,
.manu .m3::before,
.manu .m4::before,
.manu .m6::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50em;
    left: calc(50% - 40px);
    bottom: -45%;
    background: var(--green);
    display: none;
}

.fixed .manu .m2::before,
.fixed .manu .m3::before,
.fixed .manu .m4::before,
.fixed .manu .m6::before {
    bottom: -90%;
}

.manu .m2:hover::before,
.manu .m3:hover::before,
.manu .m4:hover::before,
.manu .m6:hover::before {
    display: block;
}

.menu_icon {
    display: none;
}

.tools {
    position: absolute;
    right: 20px;
    height: 100%;
}

.tools a {
    color: var(--dark);
    ;
}

.tools ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: calc(50% - 35px)
}

.tools ul li {
    position: absolute;
}

.tools ul li:first-child {
    right: 60px;
}

.tools ul li:last-child {
    top: 15px;
    right: 0;
    font-family: 'Noto Serif TC', serif;
}

.fixed .tools ul {
    top: calc(50% - 30px);
}

.search_bar button,
.search_bar {
    background: url(../images/zoom.svg) center no-repeat;
    background-size: 30px;
    width: 43px;
    height: 43px;
}

.search_bar {
    border-radius: 50px;
    background-color: white;
    position: relative;
    margin: 10px;
    transition: .3s;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search_bar input::placeholder {
    color: black;
}

.search_bar.show {
    width: 50vw;
    z-index: 9;
}

.search_bar button {
    border: none;
    font-size: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.search_bar input {
    display: none;
    border: none;
    padding: 5px 20px;
    width: 100%;
}

.search_bar.show input,
.search_bar.show button {
    display: block;
}

body {
    margin-top: 107px;
}


.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.mask.show {
    background: rgba(0, 0, 0, 0.2);
    z-index: 8;
}

li.m2:hover>a,
li.m3:hover>a,
li.m4:hover>a,
li.m6:hover>a {
    display: block;
    color: var(--dark);
}

li.m2:hover>ul.have_mega,
li.m4:hover>ul.have_mega,
li.m3:hover>ul.have_mega,
li.m6:hover>ul.have_mega {
    display: block;
}

.top50 {
    margin-top: 50px;
}


.member {
    position: relative;
    border-top: 1px solid #ccc;
    margin-top: 40px;
    padding-top: 50px;
}

.member .block {
    margin: 0;
}

.height.pic .tablink {
    height: 500px;
}

.page-title.height {
    margin-bottom: calc(500px - 160px);
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-100 {
    margin-bottom: 100px;
}

hr {
    margin: 50px 0;
}

.info hr {
    margin: 20px 0;
}

ul.blue-box {
    padding: 0;
}

ul.blue-box li {
    list-style: none;
    background: var(--babyblue);
    padding: 15px 20px 13px;
    border-radius: 0 0 20px;
    margin-bottom: 5px;
}

ul.blue-box h6 {
    line-height: 2em;
    margin: 0;
}

.blue-box .icon {
    width: 25px;
    position: relative;
    margin-right: 10px;
    top: -3px;
}

ul.blue-box .col-md-8 a {
    word-break: break-all;
}

.bt-go {
    background: var(--yellow);
    border-radius: 50px;
    font-weight: bold;
    color: white;
    font-size: 14px;
    width: 30px;
    height: 30px;
    display: block;
    padding: 5px 0;
    text-align: center;
}

.bt-go:hover {
    background: var(--org);
    color: white;
}

table .bt-go {
    margin: 0 auto;
}

.dropdown-group {
    position: absolute;
    top: -140px;
    right: 30px;
    width: auto;
    z-index: 2;
}

.dropdown-group .dropdown {
    margin: 0 10px;
}

.bt-group {
    position: absolute;
    right: 20px;
    top: 20px;
}

.bt-group .bt-round {
    background-image: url(../images/arrow-white2.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    margin: 0 5px;
}

.cooperate {
    margin: 50px 0;
}

.cooperate ul {
    margin: 0;
}

.cooperate li {
    padding: 0;
    background: white;
    border-radius: 0 0 30px 30px;
}

.cooperate .bt-round {
    color: white;
    margin-bottom: 10px;
}

.cooperate li .embed {
    margin: 0;
}

.cooperate li .flag img,
.flag img {
    height: 25px;
    width: auto;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin: 2px;
}

.cooperate li .flag {
    position: absolute;
    right: 20px;
    bottom: 65%;
    width: 50%;
    text-align: end;
}

.more-info {
    border: 1px solid #ccc;
    border-radius: 0 0 30px 0;
    margin: 0 10px 100px 10px;
}

.more-info .info {
    padding: 40px;
}

.exam {
    margin: 0;
}

.cooperate.exam .flag {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}

.sidebar {
    margin-bottom: 50px;
}

.sidebar p {
    margin: 0;
}

.sidebar a {
    word-break: break-all;
}

.sidebar hr {
    margin: 20px 0;
}

.img-style {
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    margin-bottom: 50px;
}

.page-title2 {
    border-radius: 50em;
    color: white;
    padding: 30px 40px;
    position: relative;
    margin: 50px 0;
}

.page-title2::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background: var(--yellow);
    border-radius: 50em;
    top: -40%;
    right: 3%;
}

.page-title2 h2 {
    margin: 0;
}

ul.row {
    list-style: none;
    padding: 0;
}

.mini ul {
    margin: 30px 0;
    justify-content: space-between;
}

.job-list.mini li {
    flex: 0 0 32%;
    padding: 10px;
    margin: 0 0 20px;
}

.job-list.mini h5 {
    font-family: Microsoft JhengHei;
    font-weight: bold;
    margin-left: 15px;
}

.caseform,
.caseform .block .info .col-md-6 {
    line-height: 1.8em;
}

.caseform img {
    max-width: 200px;
}

.caseform .block b {
    line-height: 1.4em;
}

.caseform .bt-round {
    padding: 10px 20px;
}

.closePreview {
    margin-right: 10px;
    margin-bottom: 10px;
}

.video,
.ifr {
    margin-bottom: 15px !important;
}

.max-hiegh {
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    padding: 15px;
    border-radius: 10px;
}

.fixed .manu .m2::before,
.fixed .manu .m3::before,
.fixed .manu .m4::before,
.fixed .manu .m6::before {
    display: none;
}

li.m4:hover>ul.have_mega {
    display: flex;
}

.manu .m4 .have_mega li,
.menu-container .manu ul li.m4 .have_mega li {
    flex: auto;
    margin-right: 0;

}

.option .info,
.block .info .col-md-6 {
    line-height: 1.4em;
}

.option .col-md-4,
.block .info .col-md-6 {
    margin-bottom: 15px;
}

.no-js .owl-carousel,
.owl-carousel.owl-loaded {
    margin: 0 30px;
}

.owl-tablink .owl-prev {
    left: -30px;
}

.owl-tablink .owl-next {
    right: -30px;
}

.owl-nav {
    top: -4px;
}

.title-round .align-middle {
    float: right;
}

.owl-carousel.owl-loaded.owl-main {
    margin: 0;
}

.job-list.col4 li {
    flex: 0 0 23%;
    padding: 20px;
}

.job-list.col4 {
    margin-bottom: 50px;
}

.select2-container {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
}

.modal-body body {
    margin-top: 0 !important;
}

@media (min-width: 1600px) {

    .hunting,
    .edm {
        width: 51.5%;
    }
}

@media (min-width: 2000px) {

    .hunting,
    .edm {
        width: 51%;
    }
}

@media (min-width:1000px) {

    li.m2:hover>ul.have_mega,
    li.m4:hover>ul.have_mega,
    li.m3:hover>ul.have_mega,
    li.m6:hover>ul.have_mega {
        max-height: calc(100vh - 107px);
        overflow-y: auto;
    }
}

@media (max-width: 1400px) {}

@media (max-width: 1200px) {

    footer .content ul h4 {
        font-size: 1.2em;
    }

    .act-list li {
        flex: 0 0 34%;
    }

    header .logo {
        position: absolute;
        left: 18px;
        top: calc(50% - 18px);
        /* cj@250326  max-height: 35px; */
        max-height: 50px;
    }

    .menu-container {
        margin-right: 130px;
    }

    .menu-container .manu ul li a,
    header.fixed .menu-container .manu ul li a {
        font-size: 1em;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 1024px) {
    .job-list.col4 li {
        flex: 0 0 30%;
    }

    .menu-container .manu ul li .have_mega,
    .menu-container .manu ul li .have_dropdown {
        top: 0;
    }

    .news-list article .info {
        margin-left: 240px;
    }

    .news-list article img {
        max-width: 200px;
    }

    .page-title {
        margin-bottom: 50px;
    }

    footer .content ul {
        font-size: 90%;
    }

    footer .page-half .content {
        width: 70%;
        padding-left: 30px;
        padding-right: 0;
    }

    footer .info {
        width: 28%;
        padding-right: 2%;
    }

    footer .logo {
        width: 90%;
    }

    .hunting,
    .edm {
        width: 53%;
    }

    .heading-pic img {
        padding-right: 0;
    }

    .page-half .content,
    .page-half.single.outside .content,
    .page-half .content.news {
        padding: 50px 0 50px 50px;
    }

    .menu-container .manu ul li a,
    header.fixed .menu-container .manu ul li a {
        padding-left: 5px;
        padding-right: 5px;
    }

    .block b {
        left: -190px;
    }

    .page-title p {
        font-size: 16px;
    }

    .block {
        margin-left: 190px;
    }

    table ul.col4 {
        padding: 0;
    }

}

@media (max-width: 1000px) {
    .pagination {
        line-height: 1.5em;
    }

    .pagination li:nth-child(1) {
        line-height: 2em;
    }

    .act-list ul,
    .job-list ul {
        margin: 0 2%;
    }

    .job-list li .info {
        padding-top: 30px;
    }

    header .icon {
        text-align: center;
        margin: 30px 0;
    }

    header .icon li {
        width: auto !important;
        height: 30px;
    }

    header .icon a {
        padding: 0 !important
    }

    header .icon li img {
        width: 20px;
        position: relative;
        top: -8px;
    }

    .menu-container .mobile {
        display: block;
    }

    .page-title2::before {
        width: 60px;
        height: 60px;
        top: -20%;
    }

    .page-title2 {
        margin-bottom: 30px;
        padding: 20px;
    }

    .bt-group {
        position: relative;
        right: auto;
        top: auto;
        text-align: center;
    }

    .dropdown-group {
        top: -110px;
    }

    .job-list a.bt {
        right: 30px;
        padding-right: 0;
    }

    .page-title h4 {
        font-size: 1.2em;
    }

    .job-list .dropdown {
        margin-bottom: 20px;
        min-width: 100%;
    }

    .job-list li {
        flex: 0 0 47%;
    }

    body {
        margin-top: 72px;
    }

    .tools {
        right: 60px;
    }

    .tools ul li:first-child {
        right: 0;
        top: 5px;
    }

    .search_bar {
        background-color: transparent;
        box-shadow: none;
        top: 0;
    }

    .fixed .search_bar {
        top: -5px;
    }

    .search_bar.show {
        width: 70vw;

    }

    header,
    header .align-middle {
        height: 72px;
    }

    .tools ul li:last-child {
        display: none;
    }

    .menu_icon {
        display: block;
        padding: 20px 30px;
        font-size: 0;
        border: 0;
        background: url(../images/menu.svg) center no-repeat #f1f1f1;
        background-size: 40px;
        border-left: 1px solid #ccc;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .menu_icon:focus {
        background-color: #f1f1f1;
    }

    .menu_icon.close {
        background: url(../images/close.svg) center no-repeat;
        background-size: 30px;
    }

    .menu-container {
        margin: 0;
        width: 100%;
        background: var(--green);
        position: absolute;
        left: 0;
        top: 72px;
        max-height: 75vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    }

    .menu-container .manu ul li a {
        color: white;
    }

    .menu-container .manu {
        display: none;
    }

    .menu-container .manu ul li .have_dropdown,
    .menu-container .manu ul li .have_mega {
        position: relative;
        background: white;
        padding: 5px 40px;
    }

    .menu-container .manu ul li::after {
        display: none;
    }

    .menu-container ul,
    .menu-container .manu ul li,
    .menu-container .manu ul li .have_dropdown li a,
    .menu-container .manu ul li .have_mega li,
    .menu-container .manu ul li .have_dropdown li {
        float: none;
        width: 100%;
    }

    .menu-container .manu ul li .have_mega a,
    .menu-container .manu ul li .have_dropdown a,
    .menu-container .manu ul li .have_mega a:hover,
    .menu-container .manu ul li .have_dropdown a:hover {
        color: var(--dark);
    }

    .have_mega ul {
        margin-left: 10px;
    }

    .menu-container .manu ul li a,
    header.fixed .menu-container .manu ul li a {
        padding: 10px 40px;
    }

    header.fixed .menu-container .manu ul li ul a,
    .menu-container .manu ul li ul a,
    .menu-container .manu ul li .have_mega a {
        padding: 10px;
        color: var(--dark);
         !important;
    }

    .menu-container .manu ul li .have_mega ul {
        margin-left: 26px;
    }

    li.m4:hover>ul.have_mega {
        display: block;
    }

    .manu .m4 .have_mega li {
        flex: none;
        margin-left: 0;
    }

    .act-list li {
        flex: 0 0 32%;
    }

    .content .date {
        position: relative;
        top: 0;
        right: auto;
        left: 0;
    }

    .flex ul li {
        max-width: none;
    }

    .classification ul li {
        flex: 0 0 48%;
    }

    .home-event ul li,
    .home-news ul li {
        margin: 0 10px 30px;
    }

    .dropdown {
        min-width: auto;
    }

    .hunting,
    .edm {
        width: 54%;
    }

    .news-list.inside article {
        display: block;
    }

    .news-list.inside article .pic {
        margin-bottom: 30px;
    }

    .news-list.inside article .info {
        margin-left: 0;
    }

    .news-list.inside article img {
        max-width: 100%;
    }

    .promote p {
        font-size: 14px;
    }

    .promote h4 {
        margin-bottom: 20px;
    }

    .promote .edm h4 {
        margin-bottom: 45px;
    }

    .edm {
        padding-left: 100px;
        padding-right: 30px;
    }

    .hunting {
        padding-right: 100px;
        padding-left: 30px;
    }

    footer .page-half .content {
        padding: 50px 20px;
    }

    .dropbtn {
        padding: 5px 45px 5px 20px;
        background-size: 30px;
        font-size: 13px;
    }

    .dropdown-content a {
        padding: 5px 0;
        font-size: 13px;
    }

    .pagination {
        padding-top: 3px;
    }

    .pagination .prve,
    .pagination .next {
        width: 30px;
        height: 30px;
    }

    .pagination li:nth-child(2) {
        margin: 0 5px;
        font-size: 13px;
        padding-top: 2px;
    }

    .pagination input {
        padding: 0;
    }

    .news-list article {
        min-height: 160px;
    }

    .block b {
        left: -200px;
    }

    .page-title .text {
        height: 50px;
    }
}



@media (min-width: 768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 1000px;
    }
}

@media (min-width: 1200px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 1360px;
    }

}

@media (max-width: 767px) {

    .home-news .bt.next,
    .home-event .bt.next {
        bottom: -40px;
    }

    .promote .edm h4 {
        margin-bottom: 20px;
    }

    .menu-container .manu ul li a {
        max-width: 85%;
    }

    .page-title h4 {
        padding: 0;
        width: 100%;
    }

    .news,
    .contact,
    .blog,
    .pagenation,
    .pagenation.inside {
        margin-bottom: 50px;
    }

    .member {
        padding-left: 0;
    }

    .page-title::before {
        display: none;
    }

    .pagination input {
        width: 30px;
    }

    .job-list a.bt {
        right: 0;
    }

    .search-box {
        margin: 20px 0 40px;
    }

    .news-list article .info {
        margin-left: 0px;
    }

    h4.title .bt {
        right: 10px;
        top: 0;
    }

    .member .block {
        position: relative;
    }

    .member img {
        margin: 0 auto 30px 25%;
        max-width: 50%;
    }

    .block.ceo {
        margin-top: 0;
    }

    .pagenation.inside {
        margin-left: 0;
        margin-right: 0;
    }

    .top100 {
        margin-top: 0;
    }

    .act-list ul,
    .job-list ul {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    .act-list li,
    .job-list li {
        margin-right: 0;
        margin-left: 0;
    }

    .act-list li {
        width: calc(100% - 100px);
        left: 100px;
    }

    .page-title .dropdown {
        right: 0;
        top: -40px;
    }

    .flex ul {
        display: block;
    }

    .title-round {
        border-radius: 0 3em 3em 3em;
        padding: 15px 30px;
        text-align: center;
    }

    .owl-main .text {
        text-align: center;
    }

    .classification .position {
        position: relative;
        bottom: 0;
    }

    .classification img {
        margin-bottom: 5px;
    }

    .classification {
        height: auto;
        padding: 10vh 0;
    }

    .mobile {
        display: block;
    }

    .pc {
        display: none;
    }

    .heading-pic img {
        width: 100%;
        right: 0;
    }

    .container.full {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .job-list p {
        font-size: 90%;
    }

    .job-list .bt-round {
        min-width: 100px;
    }

    .job-list li .info {
        padding: 20px 10px;
    }

    .job-list li h5 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }

    .page-title h4 {
        text-align: left;
        font-size: 1.4em;
    }

    .page-title,
    .single .page-title {
        padding: 15px 30px;
        border-radius: 0 0 0 30px;
        position: relative;
        right: 0;
        width: calc(100% + 20px);
        margin-top: 0;
    }

    .page-title .text,
    .single .page-title .text {
        height: auto;

    }

    .heading-pic {
        width: calc(100% + 40px);
        left: -20px;
        text-align: left;
        margin-top: 20px;
        overflow: hidden;
    }

    .heading-pic h4,
    .heading-pic h5,
    .heading-pic p {
        padding: 0 50px;
        margin-bottom: 1em;
    }

    h2.news-title {
        padding: 0 20px 20px 20px;
        color: var(--indigo);
        text-align: left;
    }

    .heading-pic p,
    .heading-pic h2 {
        padding: 0 20px;
    }

    .tablink {
        right: 0;
        border-radius: 0;
        height: 70px;
        bottom: -80px;
        left: -15px;
        width: calc(100% + 15px);
    }

    .page-half .content::before {
        left: -100%;
    }

    .content .date {
        margin-bottom: 20px;
    }

    .page-half .content,
    .page-half.single .content,
    .page-half.single.outside .content {
        width: 90%;
        right: 0;
        padding-left: 20px;

    }

    .page-half.single .content,
    .page-half.single.outside .content {
        padding-top: 0;

    }

    .page-half .content.news-list {
        width: 100%;
        padding: 30px;
    }

    .page-half .content.news-list.inside {
        padding: 30px 20px;
    }

    .page-half .content.news-list::before {
        display: none;
    }

    .page-half .content.none {
        padding: 25px 0;
        width: 100%;
    }

    main.container {
        padding-top: 30px;
    }

    .owl-carousel {
        width: auto;
    }

    .no-js .owl-carousel,
    .owl-carousel.owl-loaded {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .owl-nav {
        top: -3px;
    }


    .block {
        margin-top: 50px;
        margin-left: 0;
    }

    .block b {
        position: relative;
        left: 0;
        padding: 10px;
    }

    .block .info {
        margin-top: 20px;
    }

    .news .date {
        margin-bottom: 10px;
    }

    .news-list article {
        min-height: auto;
    }

    .news-list article .pic {
        width: 100%;
        position: relative;
        left: 0;
        margin-bottom: 30px;
    }

    .news-list article img {
        width: 100%;
        max-width: 100%;
        max-height: none;
    }

    .tablink.opacityblue {
        background: var(--babyblue);
    }

    .hunting,
    .edm {
        width: 100%;
        padding: 50px;
    }

    .hunting {
        border-radius: 0 0 10em 0;
        margin-bottom: 10px;
    }

    .edm {
        border-radius: 10em 0 0 0;
        height: auto;
        position: relative;
    }

    footer {
        background: white;
        border-bottom: none;
    }

    footer .page-half {
        display: none;
    }

    footer .info {
        width: 100%;
        height: auto;
        position: relative;
        padding: 30px 10px;
    }

    footer .info p {
        margin-bottom: 0;
    }

    footer .icon {
        display: none;
    }

    footer .logo {
        max-width: 80%;
    }

    footer .copy.mobile {
        border-top: none;
        margin-top: 0;
        padding-left: 0;
    }

    .table {
        width: 100%;
        overflow-x: auto;
    }

    table th,
    table td {
        padding: 10px;
    }

    .min table th {
        min-width: 150px;
    }

    .page-half .content,
    .page-half .content.news-list {
        padding-bottom: 50px;
    }

    body {
        background-image: none;
    }

    .accordion-body {
        padding: 20px;
    }

    .accordion-button span {
        transform: scale(.9);
    }

    .page-title.pic {
        margin-bottom: 220px;
    }

    .pic .tablink,
    .height.pic .tablink {
        left: -40px;
        top: 86px;
        height: 200px;
        border-radius: 0 0 30px 0;
    }

    .notfound {
        background-size: 200%;
    }

    button.bt-round {
        width: 100%;
    }

    .act-list li .date {
        display: inline-block;
    }

    .act-list li .date .text {
        text-align: center;
        display: block;
        position: relative;
        top: calc(50% - 30px);
    }

    .have_dropdown ul,
    .have_mega ul {
        display: none;
    }

    li.m2::before,
    li.m3::before,
    li.m4::before,
    li.m6::before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background: url(../images/arrow.svg);
        background-size: contain;
        top: 10px;
        right: 20px;
        transition: .3s;
    }

    li.s1::before,
    li.s2::before,
    li.s3::before,
    li.s4::before,
    li.s5::before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background: url(../images/arrow-org.svg);
        background-size: contain;
        top: 10px;
        right: -20px;
        transition: .3s;
    }

    li.m2:hover::before,
    li.m3:hover::before,
    li.m4:hover::before,
    li.m6:hover::before,
    li.s1:hover::before,
    li.s2:hover::before,
    li.s3:hover::before,
    li.s4:hover::before,
    li.s5:hover::before {
        transform: rotate(180deg);
    }

    .col-form-label.text-right {
        text-align: left;
    }

    .page-half.single .content.none {
        width: 100%;
        padding-left: 0;
    }

    .bottom100 {
        margin-bottom: 0;
    }

    .page-half.single .content::before {
        top: 0;
    }

    .faq,
    .act-list ul {
        margin-top: 0;
    }

    .friends {
        padding: 50px 0;
    }

    .owl-main .title-round h3,
    .title-round h3 {
        font-size: 1.4em;
    }

    .owl-main .item {
        height: 75vh;
    }

    .top50 {
        margin-top: 0;
    }

    ul.col4 li {
        width: 30%;
    }

    .menu-container .manu ul li .have_mega a,
    .menu-container .manu ul li .have_dropdown a,
    header.fixed .menu-container .manu ul li .have_mega a {
        color: #333;
    }

    .dropdown-group {
        position: relative;
        top: auto;
        right: 0;
        width: 100%;
    }

    .dropdown-group .dropdown {
        display: block;
        margin-bottom: 10px;
    }

    .more-info {
        margin: 0 0 50px 0;
    }

    .more-info .pic {
        height: 200px;
    }

    .mb-100 {
        margin-bottom: 50px;
    }

    .job-list.mini li:nth-child(2n) {
        margin-right: 0;
    }

    .rwd {
        border: none;
    }

    .rwd table thead {
        display: none;
    }

    .rwd table tr {
        display: block;
        border: 1px solid var(--indigo);
        border-radius: 15px;
        margin-bottom: 15px;
        padding: 0;
    }

    .rwd table tr td {
        border-right: 0 !important;
        display: block;
        position: relative;
        text-align: left;
        padding-left: 38%;
    }

    .rwd table tr td::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 35%;
        padding: 10px;
        border-bottom: 1px solid white;
        background: var(--indigo);
        color: white;
        content: attr(data-label);
    }

    .rwd table tr td:first-child::before {
        border-radius: 10px 0 0 0;
    }

    .rwd table tr td:last-child::before {
        border-radius: 0 0 0 10px;
    }

    .rwd table tr td:first-child {
        border-top: 0;
    }

    .rwd table td:last-child {
        border-bottom: 0;
        border-radius: 0 0 12px 12px;
    }
}