/* 首頁影片 */ article #CMContent_T { margin: 0px 0px 25px; position: relative; overflow: hidden; width: 100%; } article #CMContent_T .ImageDiv { position: relative; width: 100%; } article #CMContent_T .ImageDiv #Image { position: relative; width: 100%; height: 710px; overflow: hidden; margin: 0 auto; -webkit-transform: translateZ(0); } article #CMContent_T .ImageDiv #Image .ImageMain { width: 2910px; height: 0px; overflow: hidden; } article #CMContent_T .ImageDiv #Image .ImageMain:after { display: block; clear: both; height: 0; content: ''; } article #CMContent_T .ImageDiv #Image .ImageMain .Item { position: relative; float: left; height: 100%; overflow: hidden; font-size: 0px; text-align: center; background: #EFEFEF; color: #666; } article #CMContent_T .ImageDiv #Image .ImageMain .Item.Video { width: 100%; height: 720px; overflow: hidden; } article #CMContent_T .ImageDiv #Image .ImageMain .Item img { width: 100%; } article #CMContent_T .ImageDiv #Image .BtnLeft { position: absolute; left: 10px; top: calc( 50% - 40px ); z-index: 100; width: 32px; height: 80px; background-image: url( '/_i/ImgBtnLeft.png' ); background-repeat: no-repeat; cursor: pointer; } article #CMContent_T .ImageDiv #Image .BtnRight { position: absolute; right: 10px; top: calc( 50% - 40px ); z-index: 100; width: 32px; height: 80px; background-image: url( '/_i/ImgBtnRight.png' ); background-repeat: no-repeat; cursor: pointer; } article #CMContent_T .ImageDiv #Image .ImageMain.Move { position: relative; } article #CMContent_T .ImageDiv #Image .ImageMain.Move .Item { float: none; clear: both; position: absolute; opacity: 0; } article #CMContent_T .ImageDiv #Image .ImageMain .Item .TextMain { position: absolute; z-index: 5; top: calc( 50% - 60px ); margin-top: 50px; width: 100%; opacity: 0; transition: 2.5s; } article #CMContent_T .ImageDiv #Image .ImageMain .Item .TextMain .Text { display: inline-block; margin: 0 auto; width: auto; padding: 20px; background-color: rgba( 0, 0, 0, 0.3 ); text-align: center; font-size: 60px; color: #FFF; font-weight: bold; text-shadow: 0px 3px 3px rgba( 0,0,0,0.4 ); border-radius: 10px; } article #CMContent_T .ImageDiv #Image .ImageMain .Item.Open .TextMain { opacity: 1; margin-top: 0px; } article #CMContent_T .ImageDiv #Image .ImageMain.Move .Item.Open { opacity: 1; } article #CMContent_T .ImageDiv #Image .ImageMain .Item video { width: 100%; height: auto; } article #CMContent_Advantage { margin: 100px 0px 50px; position: relative; overflow: hidden; width: 100%; } article #CMContent_Advantage .ImageDiv { position: relative; width: 100%; background-color: #e5e5e5; } article #CMContent_Advantage .ImageDiv #Image_Advantage { position: relative; width: 100%; max-width: 1240px; height: 400px; overflow: hidden; margin: 0 auto; -webkit-transform: translateZ(0); } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain { width: auto; height: 100%; margin: 30px 0px 0px; overflow: hidden; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain:after { display: block; clear: both; height: 0; content: ''; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item { display: flex; position: relative; float: left; height: 330px; padding: 0px 40px; overflow: hidden; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemL { position: relative; flex: none; margin-bottom: 20px; width: 350px; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center center; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemL:after { position: absolute; top: 10px; left: 10px; display: block; width: 100%; height: 100%; border: solid 3px #FFFFFF; content: ''; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR { flex: 1; padding-left: 50px; padding-right: 0px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .Title { font-size: 2.5rem; font-weight: bold; color: #333333; margin-bottom: 15px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .Contents { font-size: 1.6rem; line-height: 35px; margin-bottom: 15px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .MoreLink { } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .MoreLink a { } article #CMContent_Advantage .ImageDiv #Image_Advantage .MarqueeBtn { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 100; width: 32px; height: 80px; cursor: pointer; border-radius: 5px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .MarqueeBtn:hover { background-color: #d5d5d5; } article #CMContent_Advantage .ImageDiv #Image_Advantage .BtnLeft { left: 0px; top: calc( 50% - 40px ); } article #CMContent_Advantage .ImageDiv #Image_Advantage .BtnRight { right: 0px; top: calc( 50% - 40px ); } article #CMContent_Advantage .ImageDiv #Image_Advantage .MarqueeBtn .material-symbols-outlined { font-size: 4rem; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .MoreLink { display: flex; justify-content: flex-end; margin-top: 20px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .MoreLink a { flex: none; display: flex; justify-content: space-between; align-items: center; border: solid 1px #333333; width: 150px; padding: 5px 10px; color: #333333; text-decoration: none; font-size: 1.2rem; border-radius: 5px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .MoreLink a:hover { background-color: #d5d5d5ff; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .MoreLink a span.material-symbols-outlined { font-size: 1.5rem; color: #ff5b00; } article #CMContent_Advantage .ImageDiv #Image_Advantage .Pointer { margin: 10px auto 20px; text-align: center; } article #CMContent_Advantage .ImageDiv #Image_Advantage .Pointer span { display: inline-block; margin: 0px 5px; padding: 5px 13px; border-radius: 2px; background-color: #a0a0a0; } article #CMContent_Advantage .ImageDiv #Image_Advantage .Pointer span.Current { background-color: #ff4d00; } #CMContent_KW { margin: 50px auto 20px; padding: 0px 15px; text-align: center; font-size: 3rem; color: #333333; font-weight: bold; } #CMContent_KW span { color: #8c1515; } #CMContent_NEWS { width: 100%; } #CMContent_NEWS .MainContent { display: flex; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px; } #CMContent_NEWS .MainContent .Item { flex: 1; width: 100%; height: auto; margin: 0; padding: 20px; } #CMContent_NEWS .MainContent .Item a { display: block; width: 100%; height: 100%; padding: 15px; text-decoration: none; color: #000; border: solid 1px #DDD; } #CMContent_NEWS .MainContent .Item a:hover { background-color: #f0f0f0; } #CMContent_NEWS .MainContent .Item a .Image { width: 100%; height: 300px; background-size: cover; background-position: center center; margin-bottom: 10px; } #CMContent_NEWS .MainContent .Item a .Title { font-size: 2rem; font-weight: bold; color: #333333; margin-bottom: 10px; } #CMContent_NEWS .MainContent .Item a .Contents { font-size: 1.3rem; line-height: 25px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } #CMContent_NEWS .MoreLink { text-align: center; margin-top: 0px; } #CMContent_NEWS .MoreLink a { display: inline-block; padding: 15px 10px; color: #666666; text-decoration: none; font-size: 1.2rem; border-radius: 5px; } #CMContent_NEWS .MoreLink a:hover { color: #8c1515; background-color: #f0f0f0; } #CMContent_EVENTS { width: 100%; } #CMContent_EVENTS .MainContent { display: flex; align-items: flex-end; width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 20px 20px; } #CMContent_EVENTS .MainContent .Item { flex: 1; width: 100%; height: auto; margin: 0; padding: 20px; } #CMContent_EVENTS .MainContent .Item a { display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; padding: 15px; text-decoration: none; color: #000; } #CMContent_EVENTS .MainContent .Item a:hover { } #CMContent_EVENTS .MainContent .Item a .Contents { position: relative; flex: none; width: calc( 100% - 20px ); height: calc( 100% - 20px ); background-color: #b76161; } #CMContent_EVENTS .MainContent .Item a:hover .Contents { background-color: #8c1515; } #CMContent_EVENTS .MainContent .Item a .Contents img { margin: -40px 0px 0px -20px; width: 100%; border: solid 1px #757575; } #CMContent_EVENTS .MainContent .Item a .Contents .Title { color: #FFFFFF; font-size: 1.8rem; font-weight: bold; margin: 10px 0px; padding: 0px 10px; text-align: right; } #CMContent_EVENTS .MainContent .Item a .Contents .EventDate { color: #FFFFFF; font-size: 1.8rem; margin: 10px 0px; padding: 0px 10px; text-align: right; } #CMContent_EVENTS .MoreLink { text-align: center; margin-top: 0px; } #CMContent_EVENTS .MoreLink a { display: inline-block; padding: 15px 10px; color: #666666; text-decoration: none; font-size: 1.2rem; border-radius: 5px; } #CMContent_EVENTS .MoreLink a:hover { color: #8c1515; background-color: #f0f0f0; } #CMContent_COLLEGE { margin-top: 80px; width: 100%; background-color: #faf4dd; } #CMContent_COLLEGE .MainContent { display: flex; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 20px 20px; } #CMContent_COLLEGE .ItemL { flex: none; margin: -80px 0px; width: 450px; padding: 0px } #CMContent_COLLEGE .ItemL img { width: 100%; } #CMContent_COLLEGE .ItemR { flex: 1; margin-left: 50px; padding: 20px 20px; } #CMContent_COLLEGE .ItemR .Title { font-size: 2rem; font-weight: bold; color: #333333; margin-bottom: 15px; } #CMContent_COLLEGE .ItemR .Contents { font-size: 1.4rem; line-height: 30px; margin-bottom: 15px; } #CMContent_COLLEGE .ItemR .MoreLink { display: flex; justify-content: flex-end; margin-top: 20px; } #CMContent_COLLEGE .ItemR .MoreLink a { flex: none; display: flex; justify-content: space-between; align-items: center; border: solid 1px #333333; width: 150px; padding: 5px 10px; color: #333333; text-decoration: none; font-size: 1.2rem; border-radius: 5px; } #CMContent_COLLEGE .ItemR .MoreLink a:hover { background-color: #e4dab2; } #CMContent_COLLEGE .ItemR .MoreLink a span.material-symbols-outlined { font-size: 1.5rem; color: #ff5b00; } #CMContent_OtherIcon { width: 100%; } #CMContent_OtherIcon .MainContent { display: flex; align-items: center; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 20px 50px; } #CMContent_OtherIcon .MainContent .Item { flex: 1; width: 100%; height: 90px; margin: 0; padding: 10px; } #CMContent_OtherIcon .MainContent .Item a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 8px; text-decoration: none; color: #118bdd; border: solid 1px #DDD; } #CMContent_OtherIcon .MainContent .Item a img { width: 100%; } #CMContent_OtherIcon .MainContent .Item a span { font-size: 2rem; } @media screen and (max-width: 1280px) { article #CMContent_T .ImageDiv #Image { height: 570px; }; } @media screen and (max-width: 1024px) { article #CMContent_T .ImageDiv #Image { height: 400px; /*height: 560px;*/ } article #CMContent_T .ImageDiv #Image .ImageMain .Item .TextMain .Text { font-size: 40px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR { padding-left: 30px; } #CMContent_KW { font-size: 2.5rem; } #CMContent_NEWS .MainContent { padding: 10px; } #CMContent_NEWS .MainContent .Item { height: auto; padding: 10px; } #CMContent_EVENTS .MainContent { padding: 80px 10px 20px; } #CMContent_EVENTS .MainContent .Item { padding: 10px; } #CMContent_COLLEGE .MainContent { padding: 20px 10px 20px; } #CMContent_COLLEGE .ItemL { flex: none; margin: -50px 0px; width: 380px; padding: 0px } #CMContent_COLLEGE .ItemR { margin-left: 0px; padding: 20px 20px; } #CMContent_OtherIcon .MainContent .Item a span { font-size: 1.6rem; } } @media screen and (max-width: 900px) { article #CMContent_T { margin: 0px 0px 15px; } article #CMContent_T .ImageDiv #Image { width: 100%; } article #CMContent_T .ImageDiv #Image .ImageMain { background-color: rgb( 246, 246, 246 ); } article #CMContent_T .ImageDiv #Image .BtnLeft { top: calc( 50% - 40px ); } article #CMContent_T .ImageDiv #Image .BtnRight { top: calc( 50% - 40px ); } article #CMContent_Advantage .ImageDiv #Image_Advantage { height: 380px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item { height: 300px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemL { margin-bottom: 20px; width: 270px; height: 260px; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .Title { font-size: 2rem; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemR .Contents { font-size: 1.3rem ; line-height: 32px; } #CMContent_NEWS .MainContent { padding: 5px; } #CMContent_NEWS .MainContent .Item { height: auto; padding: 5px; } #CMContent_NEWS .MainContent .Item a { padding: 8px; } #CMContent_NEWS .MainContent .Item a .Image { height: 250px; } #CMContent_NEWS .MainContent .Item a .Title { font-size: 1.7rem; } #CMContent_EVENTS .MainContent { padding: 80px 5px 20px; } #CMContent_EVENTS .MainContent .Item { padding: 5px; } #CMContent_EVENTS .MainContent .Item a { padding: 8px; } #CMContent_COLLEGE .MainContent { padding: 10px 5px 10px; } #CMContent_COLLEGE .ItemL { flex: none; margin: -30px 0px; width: 330px; padding: 0px; } #CMContent_COLLEGE .ItemR { margin-left: 0px; padding: 10px 10px; } #CMContent_COLLEGE .ItemR .Title { font-size: 1.7rem; } #CMContent_OtherIcon .MainContent { flex-wrap: wrap; padding: 20px 5px 50px; } #CMContent_OtherIcon .MainContent .Item { flex: none; width: 50%; } #CMContent_OtherIcon .MainContent .Item a img { width: auto; height: 100%; } #CMContent_OtherIcon .MainContent .Item a span { font-size: 2rem; } } @media screen and (max-width: 768px) { article #CMContent_T .ImageDiv #Image .ImageMain .Item .TextMain .Text { width: calc( 100% - 100px ); padding: 10px; font-size: 20px; } article #CMContent_Advantage .ImageDiv #Image_Advantage { height: auto; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item { display: block; height: auto; } article #CMContent_Advantage .ImageDiv #Image_Advantage .ImageMain .Item .ItemL { margin: 0px auto 20px; } #CMContent_NEWS .MainContent { display: block; } #CMContent_NEWS .MainContent .Item { padding: 20px; } #CMContent_NEWS .MainContent .Item a { padding: 15px; } #CMContent_NEWS .MainContent .Item a .Image { height: 500px; } #CMContent_NEWS .MainContent .Item a .Title { font-size: 2rem; } #CMContent_EVENTS .MainContent { display: block; } #CMContent_EVENTS .MainContent .Item { margin-bottom: 80px; } #CMContent_EVENTS .MainContent .Item:last-child { margin-bottom: 0px; } #CMContent_COLLEGE .MainContent { display: block; } #CMContent_COLLEGE .ItemL { width: 100%; margin: 0px auto; width: 380px; padding: 0px; } #CMContent_COLLEGE .ItemR { width: 100%; margin-left: 0px; padding: 20px 20px; } #CMContent_OtherIcon .MainContent { display: block; } #CMContent_OtherIcon .MainContent .Item { width: 100%; } } @media screen and (max-width: 700px) { article #CMContent_T .ImageDiv #Image { height: 56vw; } } @media screen and (max-width: 500px) { article #CMContent_T .ImageDiv #Image { height: 200px; /*height: 420px;*/ } article #CMContent_T .ImageDiv #Image .BtnLeft { top: calc( 50% - 50px ); } article #CMContent_T .ImageDiv #Image .BtnRight { top: calc( 50% - 50px ); } article #CMContent_T .ImageDiv #Image .ImageMain .Item video { width: auto; height: 137%; } article #CMContent_T .ImageDiv #Image .ImageMain .Item .TextMain .Text { width: calc( 100% - 100px ); padding: 10px; font-size: 20px; } #CMContent_KW { margin: 30px auto 20px; padding: 0px 10px; font-size: 2rem; } #CMContent_NEWS .MainContent .Item { padding: 10px; } #CMContent_COLLEGE .ItemR { padding: 20px 10px; } } @media screen and (max-width: 320px) { }