@charset "utf-8";
/* CSS Document */
#content { padding: 149px 0 0 0;}
.ind_top { position: relative; display: flex; flex-flow: wrap; align-items: center; justify-content: center; color: #fff; padding: 0 20px; font-weight: 400; background: #292c37; width: 100%;}
.ind_top > div { display: flex; flex-flow: wrap; align-items: flex-end; justify-content: center; margin: auto auto auto 33.9%;}
.ind_top > div > div { margin-right: 20px; padding: 16px 0;}
.ind_top > div > div:last-child { margin-right: 0;}
.ind_top .mail { font-weight: 600; font-family: "Lato", sans-serif;}
.ind_top .mail img { width: 14px; margin-right: 7px;}
.ind_top .phone { font-family: "Noto Sans TC", sans-serif;}
.ind_top .phone span { font-weight: 600; font-size: 114.285%; color: #fff; font-family: "Lato", sans-serif;}
.ind_top .phone img { width: 14px; margin-right: 7px;}
.banner { position: relative; overflow: hidden; z-index: 1;}
.ind_A { position: relative; z-index: 2;}
.ind_A::before { content: ''; position: absolute; top: 32%; bottom: 0; left: 0; right: 0; background: #18204d; z-index: -1;}
.ind_A .ind_A_in { display: flex; flex-flow: wrap; margin-top: -10%;}
.ind_A .ind_A_in > div { position: relative; width: 33.33%; border-top: 6px solid #444; z-index: 1; transition: all 0.25s ease 0s;}
.ind_A .ind_A_in > div:nth-child(2) { border-color: #1e2965;}
.ind_A .ind_A_in > div:nth-child(3) { border-color: #d70c19;}
.ind_A .ind_A_in > div .ind_A_in_top { position: absolute; top: 30px; left: 0; padding: 0 35px 0 45px; width: 100%; display: flex; flex-flow: row; align-items: flex-end; z-index: 1;}
.ind_A .ind_A_in > div .pic_bg { position: relative; width: 100%; height: 0; padding-bottom: 88.4615%; transition: all 0.25s ease 0s;}
.ind_A .ind_A_in > div .ind_A_in_top .icon { min-width: 100px; margin-right: 30px; filter: brightness(0) invert(1); transition: all 0.25s ease 0s;}
.ind_A .ind_A_in > div .ind_A_in_top .tit { width: 100%; color: #fff; padding: 0 0 10px 0; border-bottom: 1px solid #fff; text-align: right; margin-bottom: 10px; transition: all 0.25s ease 0s;}
.ind_A .ind_A_in > div:hover { border-color: #fff;}
.ind_A .ind_A_in > div:hover .pic_bg { filter: grayscale(1) brightness(1.5);}
.ind_B { position: relative; padding: 5% 0; background: url("../images/ind_bg_01.jpg") no-repeat top right / cover; z-index: 1; transition: all 0.25s ease 0s;}
.ind_B .tit_a { color: #2b2b2b;}
.ind_B .tit_a::after { max-width: 20%;}
.ind_B .tit_b { color: #1e2965; max-width: 45%; margin: 25px 0;}
.ind_B .ind_B_in { display: flex; flex-flow: wrap;}
.ind_B .ind_B_in > div { position: relative; width: 31.33%; margin: 0 3% 30px 0; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.09); display: flex; flex-flow: column; align-items: center; justify-content: space-between; text-align: center; padding: 55px 10px 45px 10px; overflow: hidden; z-index: 1; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0d1a65; opacity: 0; z-index: -1;  transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div:nth-child(3n+3) { margin-right: 0;}
.ind_B .ind_B_in > div .num { position: absolute; top: 5%; right: 10%; pointer-events: none; font-weight: 700; font-size: 400%; color: #f4f4f4; line-height: 1; z-index: -1; font-family: 'Barlow Condensed', sans-serif; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div .icon { width: 100px; margin: auto; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div .tit { margin-top: 10px; line-height: 1.4; font-weight: 600; font-size: 131.25%; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div .more { position: relative; font-weight: 600; color: #c01120; font-size: 106.25%; margin-top: 40px; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div .more::after { content: ''; position: relative; left: 0; display: inline-block; background: url("../images/icon_next_02.svg") no-repeat center / contain; width: 15px; height: 10px; margin-left: 5px; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div .pic { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-flow: wrap; align-items: center; justify-content: center; z-index: -2; opacity: 0; transition: all 0.25s ease 0s;}
.ind_B .ind_B_in > div:hover::before { opacity: 0.85;}
.ind_B .ind_B_in > div:hover .num { top: 3%; right: 5%; opacity: 0.07; font-size: 675%;}
.ind_B .ind_B_in > div:hover .icon { filter: brightness(0) invert(1);}
.ind_B .ind_B_in > div:hover .tit { color: #fff;}
.ind_B .ind_B_in > div:hover .more { color: #fff;}
.ind_B .ind_B_in > div:hover .more::after { filter: brightness(0) invert(1); -webkit-animation: moving_LR5 1500ms infinite; animation: moving_LR5 1500ms infinite;}
.ind_B .ind_B_in > div:hover .pic { opacity: 1;}
.ind_C { position: relative; background: linear-gradient( 90deg, rgba(0,0,0,0), rgba(0,0,0,0)), url("../images/ind_bg_02.jpg") no-repeat top left / cover; padding: 6.15% 0; overflow: hidden; z-index: 1; transition: all 0.25s ease 0s;}
.ind_C .tit_a::after { max-width: 45%;}
.ind_C .big_font { position: absolute; top: 0; left: 0; width: 100%; max-width: 270px; display: flex; justify-content: center; align-items: center; background: #d70c19; height: 100%; z-index: -1;}
.ind_C .big_font > span { font-size: 6vw; font-weight: 900; line-height: 1; padding: 20px; text-transform: uppercase; white-space: nowrap; transform: rotate(-90deg); transform-origin: center; font-family: "Lato", sans-serif;}
.ind_C .ind_C_in { display: flex; flex-flow: wrap; justify-content: flex-end; width: 49%; margin-left: auto;}
.ind_C .ind_C_in > div { color: #fff; font-weight: 400; line-height: 1.6875; text-shadow: 1px 1px 2px rgb(0, 0, 0, .7);}
.ind_C .ind_C_in .tit_b { max-width: 75%;}
.ind_C .ind_C_in .txt { font-weight: 600; font-size: 112.5%; margin: 0 0 10px 0;}
.ind_C .ind_C_in > div p { text-align: justify;}
.ind_C .ind_C_in .btn_a { margin-top: 50px;}
.ind_D { background: #eeeeee; overflow: hidden;}
.ind_D > div { max-width: 1834px; margin: auto 0 auto auto; padding: 6% 0 6% 100px; display: flex; flex-flow: wrap;}
.ind_D .tit_a { color: #2b2b2b;}
.ind_D .tit_b { color: #1e2965;}
.ind_D .btn_a { margin-top: 100px;}
.ind_D .txt { font-weight: 700;}
.ind_D > div > div:nth-child(1) { width: 20%; padding-top: 50px;}
.ind_D > div > div:nth-child(2) { width: 74%; padding: 0 0 0 2%; margin: 0 0 0 6%}
.ind_D .swiper-slide a span { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); padding: 0 10px; color: #fff; font-weight: 500; font-size: 150%; z-index: 3;}
.ind_E { position: relative; background: url("../images/ind_bg_03.jpg") no-repeat top right / cover; padding: 6.15% 0 4% 0; overflow: hidden; z-index: 1; transition: all 0.25s ease 0s;}
.ind_E .tit_a::after { background: #fff;}
.ind_E .ind_E_in { display: flex; flex-flow: wrap; margin: 5% 0 0 0;}
.ind_E .ind_E_in > div { position: relative; width: 31.625%; margin: 0 2.5625% 0 0; background: #fff;}
.ind_E .ind_E_in > div:nth-child(3n+3) { margin-right: 0;}
.ind_E .ind_E_in > div .pic { position: relative; width: 100%; height: 0; padding-bottom: 79.4594%; overflow: hidden;}
.ind_E .ind_E_in > div .text { width: 100%; padding: 20px 30px;}
.ind_E .ind_E_in > div .text .date { display: flex; flex-flow: row; align-items: center; font-weight: 500; color: #717171; margin-bottom: 20px; font-family: "barlow", sans-serif;}
.ind_E .ind_E_in > div .text .date > div:nth-child(1) {min-width: 13px; margin-right: 8px;}
.ind_E .ind_E_in > div .text .tit { color: #151515; font-size: 125%; font-weight: 600; min-height: 68px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.ind_E .ind_E_in > div .text .more_btn { color: #151515; display: flex; flex-flow: row; align-items: center; margin-top: 10px;}
.ind_E .ind_E_in > div .text .more_btn .plus { color: #1f1f1f; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 175%; line-height: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 43px; height: 43px; border-radius: 25px; background: #fff; margin-right: 20px; padding-bottom: 3px; transition: all 0.25s ease 0s;}
.ind_E .ind_E_in > div .text .more_btn .more { position: relative; font-weight: 600; font-size: 106.25%; color: #959595; transition: all 0.25s ease 0s;}
.ind_E .ind_E_in > div .text .more_btn .more::after { content: ''; position: relative; left: 0; display: inline-block; background: url("../images/icon_next_02.svg") no-repeat center / contain; width: 15px; height: 10px; margin-left: 5px; filter: grayscale(100%) brightness(2); transition: all 0.25s ease 0s;}
.ind_E .ind_E_in > div:hover .text .more_btn .plus { background: #c01120; box-shadow: 0; color: #fff;}
.ind_E .ind_E_in > div:hover .text .more_btn .more { color: #c01120;}
.ind_E .ind_E_in > div:hover .text .more_btn .more::after { filter: grayscale(0) brightness(1); -webkit-animation: moving_LR5 1500ms infinite; animation: moving_LR5 1500ms infinite;}

.ind_E .ind_E_owl { margin: 5% 0 0 0;}
.ind_E .ind_E_news { position: relative; background: #fff;}
.ind_E .ind_E_news .pic { position: relative; width: 100%; height: 0; padding-bottom: 79.4594%; overflow: hidden;}
.ind_E .ind_E_news .text { width: 100%; padding: 20px 30px;}
.ind_E .ind_E_news .text .date { display: flex; flex-flow: row; align-items: center; font-weight: 500; color: #717171; margin-bottom: 20px; font-family: "barlow", sans-serif;}
.ind_E .ind_E_news .text .date > div:nth-child(1) {min-width: 13px; margin-right: 8px;}
.ind_E .ind_E_news .text .tit { color: #151515; font-size: 125%; font-weight: 600; min-height: 68px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.ind_E .ind_E_news .text .more_btn { color: #151515; display: flex; flex-flow: row; align-items: center; margin-top: 10px;}
.ind_E .ind_E_news .text .more_btn .plus { color: #1f1f1f; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 175%; line-height: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 43px; height: 43px; border-radius: 25px; background: #fff; margin-right: 20px; padding-bottom: 3px; transition: all 0.25s ease 0s;}
.ind_E .ind_E_news .text .more_btn .more { position: relative; font-weight: 600; font-size: 106.25%; color: #959595; transition: all 0.25s ease 0s;}
.ind_E .ind_E_news .text .more_btn .more::after { content: ''; position: relative; left: 0; display: inline-block; background: url("../images/icon_next_02.svg") no-repeat center / contain; width: 15px; height: 10px; margin-left: 5px; filter: grayscale(100%) brightness(2); transition: all 0.25s ease 0s;}
.ind_E .ind_E_news:hover .text .more_btn .plus { background: #c01120; box-shadow: 0; color: #fff;}
.ind_E .ind_E_news:hover .text .more_btn .more { color: #c01120;}
.ind_E .ind_E_news:hover .text .more_btn .more::after { filter: grayscale(0) brightness(1); -webkit-animation: moving_LR5 1500ms infinite; animation: moving_LR5 1500ms infinite;}


@media only screen and (max-width:1200px){
    #content { padding: 100px 0 0 0!important;}
}

@media only screen and (max-width:576px){
    #content { padding: 115px 0 0 0!important;}
}

@media only screen and (max-width:430px){
    #content { padding: 125px 0 0 0!important;}
}

@media only screen and (max-width:350px){
    #content { padding: 115px 0 0 0!important;}
}