/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: */ section.main:before, section .row:before { content: ""; display: table; } section.main:after, section .row:after { content: ""; display: table; clear: both; zoom: 1; } @-webkit-keyframes scrolling { 0 { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes scrolling { 0 { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } html { font-size: 75%; } body { font-family: "Noto Sans TC", "Microsoft JhengHei", "Heiti TC"; font-size: 1.25rem; line-height: 1.5; -webkit-text-size-adjust: 100%; font-weight: 300; } /* AAA NNNNNNNN NNNNNNNNIIIIIIIIIIMMMMMMMM MMMMMMMM AAA TTTTTTTTTTTTTTTTTTTTTTTEEEEEEEEEEEEEEEEEEEEEE A:::A N:::::::N N::::::NI::::::::IM:::::::M M:::::::M A:::A T:::::::::::::::::::::TE::::::::::::::::::::E A:::::A N::::::::N N::::::NI::::::::IM::::::::M M::::::::M A:::::A T:::::::::::::::::::::TE::::::::::::::::::::E A:::::::A N:::::::::N N::::::NII::::::IIM:::::::::M M:::::::::M A:::::::A T:::::TT:::::::TT:::::TEE::::::EEEEEEEEE::::E A:::::::::A N::::::::::N N::::::N I::::I M::::::::::M M::::::::::M A:::::::::A TTTTTT T:::::T TTTTTT E:::::E EEEEEE A:::::A:::::A N:::::::::::N N::::::N I::::I M:::::::::::M M:::::::::::M A:::::A:::::A T:::::T E:::::E A:::::A A:::::A N:::::::N::::N N::::::N I::::I M:::::::M::::M M::::M:::::::M A:::::A A:::::A T:::::T E::::::EEEEEEEEEE A:::::A A:::::A N::::::N N::::N N::::::N I::::I M::::::M M::::M M::::M M::::::M A:::::A A:::::A T:::::T E:::::::::::::::E A:::::A A:::::A N::::::N N::::N:::::::N I::::I M::::::M M::::M::::M M::::::M A:::::A A:::::A T:::::T E:::::::::::::::E A:::::AAAAAAAAA:::::A N::::::N N:::::::::::N I::::I M::::::M M:::::::M M::::::M A:::::AAAAAAAAA:::::A T:::::T E::::::EEEEEEEEEE A:::::::::::::::::::::A N::::::N N::::::::::N I::::I M::::::M M:::::M M::::::M A:::::::::::::::::::::A T:::::T E:::::E A:::::AAAAAAAAAAAAA:::::A N::::::N N:::::::::N I::::I M::::::M MMMMM M::::::M A:::::AAAAAAAAAAAAA:::::A T:::::T E:::::E EEEEEE A:::::A A:::::A N::::::N N::::::::NII::::::IIM::::::M M::::::M A:::::A A:::::A TT:::::::TT EE::::::EEEEEEEE:::::E A:::::A A:::::A N::::::N N:::::::NI::::::::IM::::::M M::::::M A:::::A A:::::A T:::::::::T E::::::::::::::::::::E A:::::A A:::::A N::::::N N::::::NI::::::::IM::::::M M::::::M A:::::A A:::::A T:::::::::T E::::::::::::::::::::E AAAAAAA AAAAAAANNNNNNNN NNNNNNNIIIIIIIIIIMMMMMMMM MMMMMMMMAAAAAAA AAAAAAATTTTTTTTTTT EEEEEEEEEEEEEEEEEEEEEE */ .zoom-in { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; opacity: 0; } .zoom-in.active { -webkit-transform: perspective(1px) scale(1); transform: perspective(1px) scale(1); opacity: 1; } .top-in { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; } .top-in.active { -webkit-transform: perspective(1px) translateY(0); transform: perspective(1px) translateY(0); opacity: 1; } .bottom-in { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; } .bottom-in.active { -webkit-transform: perspective(1px) translateY(0); transform: perspective(1px) translateY(0); opacity: 1; } .left-in { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; } .left-in.active { -webkit-transform: perspective(1px) translateY(0); transform: perspective(1px) translateY(0); opacity: 1; } .right-in { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; } .right-in.active { -webkit-transform: perspective(1px) translateX(0); transform: perspective(1px) translateX(0); opacity: 1; } .fade-in { opacity: 0; -webkit-transition: opacity 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, -webkit-transform 0.7s; -o-transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s; } .fade-in.left { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } .fade-in.right { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } .fade-in.top { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .fade-in.bottom { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } .fade-in.active { opacity: 1; -webkit-transform: perspective(1px) translateX(0) translateY(0); transform: perspective(1px) translateX(0) translateY(0); } /* LLLLLLLLLLL AAA YYYYYYY YYYYYYY OOOOOOOOO UUUUUUUU UUUUUUUUTTTTTTTTTTTTTTTTTTTTTTT L:::::::::L A:::A Y:::::Y Y:::::Y OO:::::::::OO U::::::U U::::::UT:::::::::::::::::::::T L:::::::::L A:::::A Y:::::Y Y:::::Y OO:::::::::::::OO U::::::U U::::::UT:::::::::::::::::::::T LL:::::::LL A:::::::A Y::::::Y Y::::::YO:::::::OOO:::::::OUU:::::U U:::::UUT:::::TT:::::::TT:::::T L:::::L A:::::::::A YYY:::::Y Y:::::YYYO::::::O O::::::O U:::::U U:::::U TTTTTT T:::::T TTTTTT L:::::L A:::::A:::::A Y:::::Y Y:::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L A:::::A A:::::A Y:::::Y:::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L A:::::A A:::::A Y:::::::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L A:::::A A:::::A Y:::::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L A:::::AAAAAAAAA:::::A Y:::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L A:::::::::::::::::::::A Y:::::Y O:::::O O:::::O U:::::D D:::::U T:::::T L:::::L LLLLLL A:::::AAAAAAAAAAAAA:::::A Y:::::Y O::::::O O::::::O U::::::U U::::::U T:::::T LL:::::::LLLLLLLLL:::::L A:::::A A:::::A Y:::::Y O:::::::OOO:::::::O U:::::::UUU:::::::U TT:::::::TT L::::::::::::::::::::::L A:::::A A:::::A YYYY:::::YYYY OO:::::::::::::OO UU:::::::::::::UU T:::::::::T L::::::::::::::::::::::L A:::::A A:::::A Y:::::::::::Y OO:::::::::OO UU:::::::::UU T:::::::::T LLLLLLLLLLLLLLLLLLLLLLLLAAAAAAA AAAAAAAYYYYYYYYYYYYY OOOOOOOOO UUUUUUUUU TTTTTTTTTTT */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } .hide { visibility: hidden; } .wrapper { padding-top: 52.5px; overflow: hidden; } @media (min-width: 1200px) { .wrapper { padding-top: 120px; } } *:focus { outline: none; } section { position: relative; /* tttt ttt:::t t:::::t t:::::t ttttttt:::::ttttttt ooooooooooo ppppp ppppppppp t:::::::::::::::::t oo:::::::::::oo p::::ppp:::::::::p t:::::::::::::::::t o:::::::::::::::op:::::::::::::::::p tttttt:::::::tttttt o:::::ooooo:::::opp::::::ppppp::::::p t:::::t o::::o o::::o p:::::p p:::::p t:::::t o::::o o::::o p:::::p p:::::p t:::::t o::::o o::::o p:::::p p:::::p t:::::t tttttto::::o o::::o p:::::p p::::::p t::::::tttt:::::to:::::ooooo:::::o p:::::ppppp:::::::p tt::::::::::::::to:::::::::::::::o p::::::::::::::::p tt:::::::::::tt oo:::::::::::oo p::::::::::::::pp ttttttttttt ooooooooooo p::::::pppppppp p:::::p p:::::p p:::::::p p:::::::p p:::::::p ppppppppp &&&&&&&&&& &::::::::::& &::::&&&:::::& &::::& &::::& &::::& &::::& &::::&&&::::& &::::::::::& &:::::::&& &::::::::& &&&& &:::::&&::& &:::& &:::::& &::&&:::&& &:::::& &:::::& &:::::& &::::& &::::::&&&&::::::&& &&::::::::&&&::::& &&&&&&&& &&&&& iiii i::::i iiii mmmmmmm mmmmmmm aaaaaaaaaaaaa iiiiiiinnnn nnnnnnnn mm:::::::m m:::::::mm a::::::::::::a i:::::in:::nn::::::::nn m::::::::::mm::::::::::m aaaaaaaaa:::::a i::::in::::::::::::::nn m::::::::::::::::::::::m a::::a i::::inn:::::::::::::::n m:::::mmm::::::mmm:::::m aaaaaaa:::::a i::::i n:::::nnnn:::::n m::::m m::::m m::::m aa::::::::::::a i::::i n::::n n::::n m::::m m::::m m::::m a::::aaaa::::::a i::::i n::::n n::::n m::::m m::::m m::::ma::::a a:::::a i::::i n::::n n::::n m::::m m::::m m::::ma::::a a:::::a i::::::i n::::n n::::n m::::m m::::m m::::ma:::::aaaa::::::a i::::::i n::::n n::::n m::::m m::::m m::::m a::::::::::aa:::ai::::::i n::::n n::::n mmmmmm mmmmmm mmmmmm aaaaaaaaaa aaaaiiiiiiii nnnnnn nnnnnn */ /* rrrrr rrrrrrrrr ooooooooooo wwwwwww wwwww wwwwwww r::::rrr:::::::::r oo:::::::::::oow:::::w w:::::w w:::::w r:::::::::::::::::r o:::::::::::::::ow:::::w w:::::::w w:::::w rr::::::rrrrr::::::ro:::::ooooo:::::o w:::::w w:::::::::w w:::::w r:::::r r:::::ro::::o o::::o w:::::w w:::::w:::::w w:::::w r:::::r rrrrrrro::::o o::::o w:::::w w:::::w w:::::w w:::::w r:::::r o::::o o::::o w:::::w:::::w w:::::w:::::w r:::::r o::::o o::::o w:::::::::w w:::::::::w r:::::r o:::::ooooo:::::o w:::::::w w:::::::w r:::::r o:::::::::::::::o w:::::w w:::::w r:::::r oo:::::::::::oo w:::w w:::w rrrrrrr ooooooooooo www www */ /* tttt iiii tttt ttt:::t i::::i ttt:::t t:::::t iiii t:::::t t:::::t t:::::t ttttttt:::::ttttttt iiiiiiittttttt:::::ttttttt t:::::::::::::::::t i:::::it:::::::::::::::::t t:::::::::::::::::t i::::it:::::::::::::::::t tttttt:::::::tttttt i::::itttttt:::::::tttttt t:::::t i::::i t:::::t t:::::t i::::i t:::::t t:::::t i::::i t:::::t t:::::t tttttt i::::i t:::::t tttttt t::::::tttt:::::ti::::::i t::::::tttt:::::t tt::::::::::::::ti::::::i tt::::::::::::::t tt:::::::::::tti::::::i tt:::::::::::tt ttttttttttt iiiiiiii ttttttttttt */ /* iiii tttt i::::i ttt:::t iiii t:::::t t:::::t iiiiiiittttttt:::::ttttttt eeeeeeeeeeee mmmmmmm mmmmmmm i:::::it:::::::::::::::::t ee::::::::::::ee mm:::::::m m:::::::mm i::::it:::::::::::::::::t e::::::eeeee:::::eem::::::::::mm::::::::::m i::::itttttt:::::::tttttt e::::::e e:::::em::::::::::::::::::::::m i::::i t:::::t e:::::::eeeee::::::em:::::mmm::::::mmm:::::m i::::i t:::::t e:::::::::::::::::e m::::m m::::m m::::m i::::i t:::::t e::::::eeeeeeeeeee m::::m m::::m m::::m i::::i t:::::t tttttte:::::::e m::::m m::::m m::::m i::::::i t::::::tttt:::::te::::::::e m::::m m::::m m::::m i::::::i tt::::::::::::::t e::::::::eeeeeeee m::::m m::::m m::::m i::::::i tt:::::::::::tt ee:::::::::::::e m::::m m::::m m::::m iiiiiiii ttttttttttt eeeeeeeeeeeeee mmmmmm mmmmmm mmmmmm */ } section.top { background: #f2fef1; padding: 0; } section.top .kv { width: 100%; display: block; } section.main { background-image: -webkit-gradient(linear, left top, left bottom, from(#f2fdf1), color-stop(15%, #fff), color-stop(85%, #fff), to(#eef9fc)); background-image: -webkit-linear-gradient(#f2fdf1 0%, #fff 15%, #fff 85%, #eef9fc 100%); background-image: -o-linear-gradient(#f2fdf1 0%, #fff 15%, #fff 85%, #eef9fc 100%); background-image: linear-gradient(#f2fdf1 0%, #fff 15%, #fff 85%, #eef9fc 100%); } section .row { padding: 30px 0; } section .row.colorbg { background: url(../images/Bg_Center1.svg) 50% 50%/cover no-repeat; padding-top: 20px; } section .row .container { max-width: 1100px; margin-left: auto; margin-right: auto; max-width: 1200px; } section .row .container:after { content: " "; display: block; clear: both; } section .row .ft { text-align: center; padding-top: 15px; width: 100%; clear: both; } section .tit { position: relative; width: 100%; margin-bottom: 30px; text-align: center; } section .tit h2 { position: relative; font-size: 24px; display: inline-block; font-weight: 500; color: #4a4a4a; } section .tit h2 img { vertical-align: middle; -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); opacity: .6; width: 20px; } section .tit h2 img:first-child { margin-right: 10px; } section .tit h2 img:last-child { margin-left: 10px; } @media (min-width: 768px) { section .tit h2 { font-size: 32px; } section .tit h2:before { position: absolute; left: -440px; top: 50%; width: 425px; height: 1px; background: #d2d2d2; content: ""; } section .tit h2:after { position: absolute; right: -440px; top: 50%; width: 425px; height: 1px; background: #d2d2d2; content: ""; } } @media (min-width: 768px) { section .tit { margin-bottom: 40px; } section .tit h2 img { width: 40px; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); font-size: 22px; } section .tit h2 img:first-child { margin-right: 25px; } section .tit h2 img:last-child { margin-left: 25px; } } section .item { position: relative; width: 100%; float: left; margin-left: 0; margin-right: 0; padding: 0 58px; margin-bottom: 25px; /* &:hover { .inner { border-top:5px solid #226ba1; small { color:#226ba1; } } } */ } section .item .inner { position: relative; background: #fff; overflow: hidden; -webkit-transition: border .4s; -o-transition: border .4s; transition: border .4s; padding-bottom: 50px; border-radius: 15px; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } section .item .inner a { text-decoration: none; } section .item img { width: 100%; display: block; margin-bottom: 15px; border-bottom: dotted 2px #d8d8d8; margin-bottom: 15px; } section .item small { color: #f07856; display: block; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; font-weight: 400; padding: 0 20px; margin-bottom: 15px; font-size: 15px; } section .item p { text-align: justify; color: #000; padding: 0 20px; font-size: 13px; margin-bottom: 15px; } section .item .btn-more { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; font-size: 12px; height: auto; padding: 10px 0; line-height: 1; } @media (min-width: 667px) { section .item { width: 50%; float: left; margin-bottom: 30px; padding: 0 20px; } section .item .inner { height: 515px; overflow: hidden; } section .item img { margin-bottom: 46px; } section .item small { font-size: 21px; margin-bottom: 26px; } section .item p { font-size: 16px; margin-bottom: 0; } section .item .btn-more { position: absolute; left: auto; right: 20px; bottom: 20px; width: 90px; height: 32px; line-height: 32px; border-radius: 5px; font-size: 16px; padding: 0; } section .item .btn-more.mob { display: none; } } @media (min-width: 996px) { section .item { width: 33.33333%; float: left; } } @media (min-width: 768px) { section { padding: 80px 0 67px; } } /* ffffffffffffffff f::::::::::::::::f f::::::::::::::::::f f::::::fffffff:::::f f:::::f ffffffaaaaaaaaaaaaa nnnn nnnnnnnn ppppp ppppppppp aaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee f:::::f a::::::::::::a n:::nn::::::::nn p::::ppp:::::::::p a::::::::::::a g:::::::::ggg::::g ee::::::::::::ee f:::::::ffffff aaaaaaaaa:::::an::::::::::::::nn p:::::::::::::::::p aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::ee f::::::::::::f a::::ann:::::::::::::::npp::::::ppppp::::::p a::::ag::::::ggggg::::::gge::::::e e:::::e f::::::::::::f aaaaaaa:::::a n:::::nnnn:::::n p:::::p p:::::p aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e f:::::::ffffff aa::::::::::::a n::::n n::::n p:::::p p:::::p aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e f:::::f a::::aaaa::::::a n::::n n::::n p:::::p p:::::p a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee f:::::f a::::a a:::::a n::::n n::::n p:::::p p::::::pa::::a a:::::ag::::::g g:::::g e:::::::e f:::::::f a::::a a:::::a n::::n n::::n p:::::ppppp:::::::pa::::a a:::::ag:::::::ggggg:::::g e::::::::e f:::::::f a:::::aaaa::::::a n::::n n::::n p::::::::::::::::p a:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee f:::::::f a::::::::::aa:::a n::::n n::::n p::::::::::::::pp a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e fffffffff aaaaaaaaaa aaaa nnnnnn nnnnnn p::::::pppppppp aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee p:::::p g:::::g p:::::p gggggg g:::::g p:::::::p g:::::gg gg:::::g p:::::::p g::::::ggg:::::::g p:::::::p gg:::::::::::::g ppppppppp ggg::::::ggg gggggg */ .fanpage { position: fixed; left: -280px; top: 50%; width: 400px; height: 600px; margin-top: -300px; background: #fff; -webkit-transition: left .7s; -o-transition: left .7s; transition: left .7s; z-index: 10000; -webkit-transform: perspective(1px) scale(0.7); transform: perspective(1px) scale(0.7); -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } .fanpage .btn-open { position: absolute; right: -65px; top: 0; } .fanpage .btn-open img { display: block; } .fanpage.active { left: 0; } @media (min-width: 667px) { .fanpage { left: -400px; -webkit-transform: perspective(1px) scale(1); transform: perspective(1px) scale(1); } } /* UUUUUUUU UUUUUUUUIIIIIIIIII U::::::U U::::::UI::::::::I U::::::U U::::::UI::::::::I UU:::::U U:::::UUII::::::II U:::::U U:::::U I::::I U:::::D D:::::U I::::I U:::::D D:::::U I::::I U:::::D D:::::U I::::I U:::::D D:::::U I::::I U:::::D D:::::U I::::I U:::::D D:::::U I::::I U::::::U U::::::U I::::I U:::::::UUU:::::::U II::::::II UU:::::::::::::UU I::::::::I UU:::::::::UU I::::::::I UUUUUUUUU IIIIIIIIII */ .loading { background: rgba(0, 0, 0, 0.75); z-index: 9999; display: none; } .loading .pic { background-image: url("../images/loading.png"); background-image: url("../images/b80.png"); overflow: hidden; } .btn-top { position: fixed; right: 15px; bottom: 60px; opacity: 0; z-index: 999; -webkit-transform: perspective(1px) scale(0.3); transform: perspective(1px) scale(0.3); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; width: 174px; height: 174px; background: url(../images/btn_top.png) 0 0 no-repeat; -webkit-transition: bottom .4s, opacity .4s, visibility .4s; -o-transition: bottom .4s, opacity .4s, visibility .4s; transition: bottom .4s, opacity .4s, visibility .4s; } .btn-top:hover { background-position: 0 100%; } .btn-top.active { bottom: 80px; opacity: 1; visibility: visible; } @media (min-width: 768px) { .btn-top { -webkit-transform: perspective(1px) scale(0.5); transform: perspective(1px) scale(0.5); visibility: hidden; } .btn-top.active { bottom: 85px; opacity: 1; visibility: visible; } } .btn-more { width: 100px; height: 40px; line-height: 40px; color: #fff; line-height: 40px; background: #4a90e2; text-decoration: none; font-size: 16px; display: inline-block; border-radius: 5px; text-align: center; } .scroll { position: fixed; left: 50%; bottom: 35px; margin-left: -84px; z-index: 999; pointer-events: none; -webkit-transition: all .7s; -o-transition: all .7s; transition: all .7s; opacity: 1; display: none; } .scroll .inner { -webkit-animation: scrolling 1s infinite; animation: scrolling 1s infinite; } .scroll .inner img { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } .scroll.hide { opacity: 0; } @media (min-width: 768px) { .scroll { display: block; } .scroll .inner img { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } } .btn-prev { position: absolute; left: 14px; top: 50%; margin-top: -34px; width: 44px; height: 68px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; display: block; background: #f4ac98 url(../images/Mobile_left.png) 50% 50%/40% no-repeat; z-index: 1; } @media (min-width: 667px) { .btn-prev { display: none; } } .btn-next { position: absolute; right: 14px; top: 50%; margin-top: -34px; width: 44px; height: 68px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; display: block; background: #f4ac98 url(../images/Mobile_right.png) 50% 50%/40% no-repeat; z-index: 1; } @media (min-width: 667px) { .btn-next { display: none; } } /* HHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEE AAA DDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR H:::::::H H:::::::HE::::::::::::::::::::E A:::A D::::::::::::DDD E::::::::::::::::::::ER::::::::::::::::R H:::::::H H:::::::HE::::::::::::::::::::E A:::::A D:::::::::::::::DD E::::::::::::::::::::ER::::::RRRRRR:::::R HH::::::H H::::::HHEE::::::EEEEEEEEE::::E A:::::::A DDD:::::DDDDD:::::DEE::::::EEEEEEEEE::::ERR:::::R R:::::R H:::::H H:::::H E:::::E EEEEEE A:::::::::A D:::::D D:::::D E:::::E EEEEEE R::::R R:::::R H:::::H H:::::H E:::::E A:::::A:::::A D:::::D D:::::DE:::::E R::::R R:::::R H::::::HHHHH::::::H E::::::EEEEEEEEEE A:::::A A:::::A D:::::D D:::::DE::::::EEEEEEEEEE R::::RRRRRR:::::R H:::::::::::::::::H E:::::::::::::::E A:::::A A:::::A D:::::D D:::::DE:::::::::::::::E R:::::::::::::RR H:::::::::::::::::H E:::::::::::::::E A:::::A A:::::A D:::::D D:::::DE:::::::::::::::E R::::RRRRRR:::::R H::::::HHHHH::::::H E::::::EEEEEEEEEE A:::::AAAAAAAAA:::::A D:::::D D:::::DE::::::EEEEEEEEEE R::::R R:::::R H:::::H H:::::H E:::::E A:::::::::::::::::::::A D:::::D D:::::DE:::::E R::::R R:::::R H:::::H H:::::H E:::::E EEEEEE A:::::AAAAAAAAAAAAA:::::A D:::::D D:::::D E:::::E EEEEEE R::::R R:::::R HH::::::H H::::::HHEE::::::EEEEEEEE:::::E A:::::A A:::::A DDD:::::DDDDD:::::DEE::::::EEEEEEEE:::::ERR:::::R R:::::R H:::::::H H:::::::HE::::::::::::::::::::E A:::::A A:::::A D:::::::::::::::DD E::::::::::::::::::::ER::::::R R:::::R H:::::::H H:::::::HE::::::::::::::::::::E A:::::A A:::::A D::::::::::::DDD E::::::::::::::::::::ER::::::R R:::::R HHHHHHHHH HHHHHHHHHEEEEEEEEEEEEEEEEEEEEEEAAAAAAA AAAAAAADDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEERRRRRRRR RRRRRRR */ .site-header { position: fixed; left: 0; top: 0; width: 100%; height: 52.5px; border-bottom: 4px solid #ebebeb; background: #fff; z-index: 9999; /* bbbbbbbb hhhhhhh b::::::b h:::::h b::::::b h:::::h b::::::b h:::::h b:::::b ssssssssss eeeeeeeeeeee aaaaaaaaaaaaa rrrrr rrrrrrrrr cccccccccccccccch::::h hhhhh b:::::bbbbbbbbb aaaaaaaaaaaaa rrrrr rrrrrrrrr ss::::::::::s ee::::::::::::ee a::::::::::::a r::::rrr:::::::::r cc:::::::::::::::ch::::hh:::::hhh b::::::::::::::bb a::::::::::::a r::::rrr:::::::::r ss:::::::::::::s e::::::eeeee:::::eeaaaaaaaaa:::::ar:::::::::::::::::r c:::::::::::::::::ch::::::::::::::hh b::::::::::::::::b aaaaaaaaa:::::ar:::::::::::::::::r s::::::ssss:::::se::::::e e:::::e a::::arr::::::rrrrr::::::rc:::::::cccccc:::::ch:::::::hhh::::::h b:::::bbbbb:::::::b a::::arr::::::rrrrr::::::r s:::::s ssssss e:::::::eeeee::::::e aaaaaaa:::::a r:::::r r:::::rc::::::c ccccccch::::::h h::::::hb:::::b b::::::b aaaaaaa:::::a r:::::r r:::::r s::::::s e:::::::::::::::::e aa::::::::::::a r:::::r rrrrrrrc:::::c h:::::h h:::::hb:::::b b:::::b aa::::::::::::a r:::::r rrrrrrr s::::::s e::::::eeeeeeeeeee a::::aaaa::::::a r:::::r c:::::c h:::::h h:::::hb:::::b b:::::b a::::aaaa::::::a r:::::r ssssss s:::::s e:::::::e a::::a a:::::a r:::::r c::::::c ccccccch:::::h h:::::hb:::::b b:::::ba::::a a:::::a r:::::r s:::::ssss::::::se::::::::e a::::a a:::::a r:::::r c:::::::cccccc:::::ch:::::h h:::::hb:::::bbbbbb::::::ba::::a a:::::a r:::::r s::::::::::::::s e::::::::eeeeeeeea:::::aaaa::::::a r:::::r c:::::::::::::::::ch:::::h h:::::hb::::::::::::::::b a:::::aaaa::::::a r:::::r s:::::::::::ss ee:::::::::::::e a::::::::::aa:::ar:::::r cc:::::::::::::::ch:::::h h:::::hb:::::::::::::::b a::::::::::aa:::ar:::::r sssssssssss eeeeeeeeeeeeee aaaaaaaaaa aaaarrrrrrr cccccccccccccccchhhhhhh hhhhhhhbbbbbbbbbbbbbbbb aaaaaaaaaa aaaarrrrrrr */ } .site-header > .btn-search { position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: block; background: url(../images/Shape_blue.png) 50% 50%/50% no-repeat; } .site-header > .btn-search:after { position: absolute; right: 0; top: 10px; width: 1px; height: 30px; background: #d8d8d8; content: ""; } .site-header .hamburger { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 44px; } .site-header .hamburger:after { position: absolute; left: 0; top: 10px; width: 1px; height: 30px; background: #d8d8d8; content: ""; } .site-header .hamburger .hamburger-inner { background: #4a90e2; } .site-header .hamburger .hamburger-inner:after, .site-header .hamburger .hamburger-inner:before { background: #4a90e2; } .site-header .search-bar { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; text-align: center; padding-top: 7px; -webkit-transition: top .4s; -o-transition: top .4s; transition: top .4s; padding-left: 50px; } .site-header .search-bar .btn-x { position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: block; background: url(../images/Mobile_left_Blue.png) 50% 50%/30% no-repeat; } .site-header .search-bar .btn-x:after { position: absolute; right: 0; top: 10px; width: 1px; height: 30px; background: #d8d8d8; content: ""; } .site-header .search-bar.active { top: 0%; } .site-header .search-bar.active .hitarea { display: block; } .site-header .search-bar .inner { display: inline-block; width: 290px; height: 34px; border-radius: 7px; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .site-header .search-bar input { position: relative; width: 233px; height: 34px; border: none; padding: 0; padding: 0; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top: 2px solid #4a90e2; border-left: 2px solid #4a90e2; border-bottom: 2px solid #4a90e2; padding: 0 10px; vertical-align: top; z-index: 10; font-size: 14px; color: #a6a6a8; font-weight: normal; } .site-header .search-bar .btn-go { position: relative; width: 57px; height: 34px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; display: inline-block; background: #4a90e2 url(../images/Shape_white.png) 50% 50%/40% no-repeat; z-index: 10; } .site-header .search-bar .hitarea { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: none; } @media (min-width: 1200px) { .site-header { height: 120px; } .site-header .hamburger { display: none; } .site-header .site-logo { display: none; } .site-header > .btn-search { display: none; } } .site-logo { position: absolute; left: 50%; top: 50%; margin-left: -58.8px; width: 117.6px; height: 23.1px; background: url(../images/logo.png) 50% 50%/100% no-repeat; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .site-logo a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; } /* NNNNNNNN NNNNNNNN AAA VVVVVVVV VVVVVVVV N:::::::N N::::::N A:::A V::::::V V::::::V N::::::::N N::::::N A:::::A V::::::V V::::::V N:::::::::N N::::::N A:::::::AV::::::V V::::::V N::::::::::N N::::::N A:::::::::AV:::::V V:::::V N:::::::::::N N::::::N A:::::A:::::AV:::::V V:::::V N:::::::N::::N N::::::N A:::::A A:::::AV:::::V V:::::V N::::::N N::::N N::::::N A:::::A A:::::AV:::::V V:::::V N::::::N N::::N:::::::N A:::::A A:::::AV:::::V V:::::V N::::::N N:::::::::::N A:::::AAAAAAAAA:::::AV:::::V V:::::V N::::::N N::::::::::N A:::::::::::::::::::::AV:::::V:::::V N::::::N N:::::::::N A:::::AAAAAAAAAAAAA:::::AV:::::::::V N::::::N N::::::::N A:::::A A:::::AV:::::::V N::::::N N:::::::N A:::::A A:::::AV:::::V N::::::N N::::::N A:::::A A:::::AV:::V NNNNNNNN NNNNNNNAAAAAAA AAAAAAAVVV */ .site-nav { position: fixed; left: 0; top: 52.5px; width: 100%; height: calc(100% - 52.5px); background: #f6f6f6; overflow-y: scroll; display: none; } .site-nav > ul > li { border-bottom: 1px solid rgba(155, 155, 155, 0.5); -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; /* bbbbbbbb b::::::b b::::::b b::::::b b:::::b ssssssssss uuuuuu uuuuuu b:::::bbbbbbbbb nnnn nnnnnnnn aaaaaaaaaaaaavvvvvvv vvvvvvv ss::::::::::s u::::u u::::u b::::::::::::::bb n:::nn::::::::nn a::::::::::::av:::::v v:::::v ss:::::::::::::s u::::u u::::u b::::::::::::::::b n::::::::::::::nn aaaaaaaaa:::::av:::::v v:::::v s::::::ssss:::::su::::u u::::u b:::::bbbbb:::::::bnn:::::::::::::::n a::::a v:::::v v:::::v s:::::s ssssss u::::u u::::u b:::::b b::::::b n:::::nnnn:::::n aaaaaaa:::::a v:::::v v:::::v s::::::s u::::u u::::u b:::::b b:::::b n::::n n::::n aa::::::::::::a v:::::v v:::::v s::::::s u::::u u::::u b:::::b b:::::b n::::n n::::n a::::aaaa::::::a v:::::v:::::v ssssss s:::::s u:::::uuuu:::::u b:::::b b:::::b n::::n n::::na::::a a:::::a v:::::::::v s:::::ssss::::::su:::::::::::::::uub:::::bbbbbb::::::b n::::n n::::na::::a a:::::a v:::::::v s::::::::::::::s u:::::::::::::::ub::::::::::::::::b n::::n n::::na:::::aaaa::::::a v:::::v s:::::::::::ss uu::::::::uu:::ub:::::::::::::::b n::::n n::::n a::::::::::aa:::a v:::v sssssssssss uuuuuuuu uuuubbbbbbbbbbbbbbbb nnnnnn nnnnnn aaaaaaaaaa aaaa vvv */ } .site-nav > ul > li > a { width: 100%; padding: 16px 0; font-size: 20px; text-align: center; text-decoration: none; display: block; color: #3b5998; font-weight: 400; } .site-nav > ul > li > a img { vertical-align: middle; display: inline-block; } .site-nav > ul > li:first-child { display: none; } .site-nav > ul > li:nth-child(5) { display: none; } .site-nav > ul > li:last-child { border-bottom: none; } .site-nav > ul > li:last-child a { padding: 13.5px 0 0 0; } .site-nav > ul > li:last-child a img { width: 34px; } .site-nav > ul > li.active { background: #e3e2e2; } .site-nav > ul > li .subnav { width: 100%; overflow: hidden; display: none; } .site-nav > ul > li .subnav ul { padding: 0 15px; } .site-nav > ul > li .subnav ul li { border-bottom: 1px dashed #3b5998; } .site-nav > ul > li .subnav ul li a { padding: 13.5px 0; width: 100%; display: block; text-align: center; font-size: 16px; text-decoration: none; color: #3b5998; } .site-nav > ul > li .subnav ul li:last-child { border: none; } @media (min-width: 1200px) { .site-nav { position: relative; left: auto; top: auto; width: auto; height: auto; background: none; display: block; overflow: inherit; } .site-nav > ul { max-width: 1100px; margin-left: auto; margin-right: auto; max-width: 1200px; text-align: center; padding: 20px 0 0 0; } .site-nav > ul:after { content: " "; display: block; clear: both; } .site-nav > ul > li { position: relative; display: inline-block; border: none; height: 100px; margin-right: -4px; vertical-align: top; background: none !important; } .site-nav > ul > li > a { width: auto; font-size: 24px; color: #75757a; text-decoration: none; line-height: 80px; display: inline-block; vertical-align: top; border: none; border-left: 1px solid #d8d8d8; padding: 0 45px; } .site-nav > ul > li:hover .subnav { visibility: visible; } .site-nav > ul > li:hover .subnav .mask { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .site-nav > ul > li:first-child { display: inline-block; } .site-nav > ul > li:first-child a { border: none; padding: 0 30px 0 0; } .site-nav > ul > li:nth-child(5) { border-left: 1px solid #d8d8d8; padding: 26px 24px 0; display: inline-block; } .site-nav > ul > li:nth-child(5) .btn-search { padding: 0; border: none; line-height: 1; margin-right: 15px; } .site-nav > ul > li:nth-child(5) input { width: 248px; height: 34px; padding: 0; margin: 0; border: 2px solid #a0a0a2; border-radius: 17px; padding: 0 10px; vertical-align: middle; display: inline-block; font-size: 14px; color: #a6a6a8; font-weight: normal; } .site-nav > ul > li:last-child a { padding: 0 0 0 45px; } .site-nav > ul > li:last-child a img { width: 35px; } .site-nav > ul > li .subnav { position: absolute; left: 0; top: 100px; width: 100%; overflow: hidden; visibility: hidden; display: block; border: none; } .site-nav > ul > li .subnav .mask { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .7s; transition: -webkit-transform .7s; -o-transition: transform .7s; transition: transform .7s; transition: transform .7s, -webkit-transform .7s; } .site-nav > ul > li .subnav ul { padding: 0; border-right: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; } .site-nav > ul > li .subnav ul li { border-bottom: 1px solid #b5b5b5; } .site-nav > ul > li .subnav ul li a { width: 100%; display: block; line-height: 70px; text-indent: center; font-size: 21px; text-decoration: none; color: #298bd3; background: #fff; } .site-nav > ul > li .subnav ul li a:hover { font-weight: 400; } .site-nav > ul > li .subnav ul li:last-child { border-bottom: 1px solid #b5b5b5; } } /* FFFFFFFFFFFFFFFFFFFFFF OOOOOOOOO OOOOOOOOO TTTTTTTTTTTTTTTTTTTTTTTEEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR F::::::::::::::::::::F OO:::::::::OO OO:::::::::OO T:::::::::::::::::::::TE::::::::::::::::::::ER::::::::::::::::R F::::::::::::::::::::F OO:::::::::::::OO OO:::::::::::::OO T:::::::::::::::::::::TE::::::::::::::::::::ER::::::RRRRRR:::::R FF::::::FFFFFFFFF::::FO:::::::OOO:::::::OO:::::::OOO:::::::OT:::::TT:::::::TT:::::TEE::::::EEEEEEEEE::::ERR:::::R R:::::R F:::::F FFFFFFO::::::O O::::::OO::::::O O::::::OTTTTTT T:::::T TTTTTT E:::::E EEEEEE R::::R R:::::R F:::::F O:::::O O:::::OO:::::O O:::::O T:::::T E:::::E R::::R R:::::R F::::::FFFFFFFFFF O:::::O O:::::OO:::::O O:::::O T:::::T E::::::EEEEEEEEEE R::::RRRRRR:::::R F:::::::::::::::F O:::::O O:::::OO:::::O O:::::O T:::::T E:::::::::::::::E R:::::::::::::RR F:::::::::::::::F O:::::O O:::::OO:::::O O:::::O T:::::T E:::::::::::::::E R::::RRRRRR:::::R F::::::FFFFFFFFFF O:::::O O:::::OO:::::O O:::::O T:::::T E::::::EEEEEEEEEE R::::R R:::::R F:::::F O:::::O O:::::OO:::::O O:::::O T:::::T E:::::E R::::R R:::::R F:::::F O::::::O O::::::OO::::::O O::::::O T:::::T E:::::E EEEEEE R::::R R:::::R FF:::::::FF O:::::::OOO:::::::OO:::::::OOO:::::::O TT:::::::TT EE::::::EEEEEEEE:::::ERR:::::R R:::::R F::::::::FF OO:::::::::::::OO OO:::::::::::::OO T:::::::::T E::::::::::::::::::::ER::::::R R:::::R F::::::::FF OO:::::::::OO OO:::::::::OO T:::::::::T E::::::::::::::::::::ER::::::R R:::::R FFFFFFFFFFF OOOOOOOOO OOOOOOOOO TTTTTTTTTTT EEEEEEEEEEEEEEEEEEEEEERRRRRRRR RRRRRRR */ .site-footer { position: relative; width: 100%; padding: 20px 15px; background: #4a90e2; color: #fff; text-align: center; font-size: 12px; } .site-footer .container { position: relative; max-width: 1100px; margin-left: auto; margin-right: auto; } .site-footer .container:after { content: " "; display: block; clear: both; } @media (min-width: 768px) { .site-footer { padding: 15px; font-size: 16px; } } .crumbs { position: fixed; left: 0; top: 52px; width: 100%; height: 40px; z-index: 999; } .crumbs .container { max-width: 1100px; margin-left: auto; margin-right: auto; } .crumbs .container:after { content: " "; display: block; clear: both; } .crumbs .container ul { background: #effafd; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 2px solid #bfe9b8; overflow: hidden; } .crumbs .container ul li { font-size: 14px; color: #3b5998; line-height: 40px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; /* &:after { position: absolute; right:0; top:0; width:40px; height: 40px; background:#000; content:""; transform:rotate(45deg); } */ } .crumbs .container ul li a { position: relative; color: #3b5998; display: block; text-align: center; text-decoration: none; } .crumbs .container ul li a b { position: relative; } .crumbs .container ul li a i { position: absolute; right: 0; top: 0; width: 40px; height: 40px; -webkit-transform: scaleX(0.5); -ms-transform: scaleX(0.5); transform: scaleX(0.5); } .crumbs .container ul li a i:after { position: absolute; left: 30px; top: 0; width: 40px; height: 40px; background: red; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #4a90e2; border-right: 2px solid #4a90e2; background: #effafd; } .crumbs .container ul li:last-child { background: #4a90e2; } .crumbs .container ul li:last-child a { color: #fff; } .crumbs .container ul li:last-child a i { display: none; } @media (min-width: 768px) { .crumbs { position: relative; left: auto; top: auto; width: auto; height: auto; } .crumbs .container { padding: 0; max-width: 1200px; } .crumbs .container ul { background: none; border: none; } .crumbs .container ul li { background: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .crumbs .container ul li a { text-decoration: none; color: #75757a; font-weight: 300; } .crumbs .container ul li a:hover { text-decoration: underline; } .crumbs .container ul li a i { display: none; } .crumbs .container ul li:after { content: "\\"; padding: 0 5px 0 5px; color: #919495; } .crumbs .container ul li:last-child { background: none; } .crumbs .container ul li:last-child:after { display: none; } .crumbs .container ul li:last-child a { color: #3b5998; font-weight: bold; } } .article-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.5); visibility: hidden; } .article-box .outer { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 100px); } .article-box .box { position: absolute; left: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - 40px); background: #fff; -webkit-box-shadow: 0 6px 14px 0 rgba(178, 178, 178, 0.5); box-shadow: 0 6px 14px 0 rgba(178, 178, 178, 0.5); border-radius: 12px; overflow: hidden; } .article-box .header { position: relative; background: #4a90e2; color: #fff; font-size: 20px; height: 74px; padding-left: 30px; font-weight: 400; text-shadow: 1px 1px 3px #3b55a7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 2px solid #d8d8d8; } .article-box .header .btn-x { position: absolute; top: 50%; right: 10px; margin-top: -19px; } .article-box .header .btn-x img { width: 38px; display: block; } .article-box .inner { -webkit-overflow-scrolling: touch; } .article-box .inner ul { width: 100%; border-right: 2px solid #d8d8d8; } .article-box .inner ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 2px solid #d8d8d8; height: 77px; padding: 0 30px; } .article-box .inner ul li a { font-size: 16px; color: #75757a; text-decoration: none; overflow: hidden; text-align: justify; } @media (min-width: 768px) { .article-box .outer { height: calc(100% - 50px); } .article-box .box { max-width: 510px; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .article-box .inner ul li { height: 103px; } .article-box .inner ul li a { font-size: 22px; } } @media (min-width: 1200px) { .article-box .outer { height: calc(100% - 120px); } .article-box .header { font-size: 28px; height: 108px; } .article-box .header .btn-x { right: 30px; margin-top: -25px; } .article-box .header .btn-x img { width: auto; } } .article-box .mCSB_scrollTools { opacity: 1; margin-right: 6px; top: 6px; height: calc(100% - 12px); } .article-box .mCSB_draggerContainer { background: #eaeaea; width: 12px; border-radius: 6px; } .article-box .mCSB_draggerRail { background: none; } .article-box .mCSB_dragger { border-radius: 6px; width: 12px; background: #c0c0c0 url(../images/dragger_m.png) 50% 50% no-repeat; height: 68px; } .article-box .mCSB_dragger .mCSB_dragger_bar { background: none; visibility: hidden; } .article-box .mCSB_dragger:hover { background: #c0c0c0 url(../images/dragger_m.png) 50% 50% no-repeat; } .article-box .mCSB_dragger:hover .mCSB_dragger_bar { background: none; } @media (min-width: 768px) { .article-box .mCSB_scrollTools { margin-right: 8px; top: 8px; height: calc(100% - 16px); } .article-box .mCSB_draggerContainer { width: 18px; border-radius: 9px; } .article-box .mCSB_dragger { border-radius: 9px; width: 18px; background: #c0c0c0 url(../images/dragger.png) 50% 50% no-repeat; height: 100px; } .article-box .mCSB_dragger:hover { background: #c0c0c0 url(../images/dragger.png) 50% 50% no-repeat; } } .sub_category .subject { padding: 0 25px; margin-bottom: 16px; } .sub_category .subject h3 { display: inline-block; font-size: 20px; color: #4a4a4a; font-weight: 500; line-height: 30px; background-image: -webkit-gradient(linear, left top, right top, from(#f8f4cf), color-stop(#f9e892), to(#f7fdf8)); background-image: -webkit-linear-gradient(left, #f8f4cf, #f9e892, #f7fdf8); background-image: -o-linear-gradient(left, #f8f4cf, #f9e892, #f7fdf8); background-image: linear-gradient(to right, #f8f4cf, #f9e892, #f7fdf8); padding: 0 30px 0 10px; border-radius: 5px; margin-bottom: 15px; } .sub_category .subject p { display: block; font-size: 20px; color: #595959; line-height: 1.5; font-size: 15px; } @media (min-width: 768px) { .sub_category .subject h3 { display: inline-block; font-size: 28px; color: #4a4a4a; font-weight: 500; line-height: 45px; background-image: -webkit-gradient(linear, left top, right top, from(#f8f4cf), color-stop(#f9e892), to(#f7fdf8)); background-image: -webkit-linear-gradient(left, #f8f4cf, #f9e892, #f7fdf8); background-image: -o-linear-gradient(left, #f8f4cf, #f9e892, #f7fdf8); background-image: linear-gradient(to right, #f8f4cf, #f9e892, #f7fdf8); padding: 0 60px 0 18px; border-radius: 6px; } .sub_category .subject p { display: inline-block; font-size: 20px; color: #595959; line-height: 45px; margin-left: -20px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } } .logo section.main .item .inner { position: relative; overflow: hidden; border: none; padding: 0; } .logo section.main .item .inner img { margin-bottom: 20px; } .logo section.main .item .inner p { margin-bottom: 20px; font-size: 15px; } @media (min-width: 1024px) { .logo section.main .item .inner { height: 320px; } .logo section.main .item .inner:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: #4990e2; content: ""; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .logo section.main .item .inner:hover:after { background: #f07856; } } @media (min-width: 667px) { .logo section.main .item .inner p { height: 150px; } } @media (min-width: 1024px) { .logo section.main .item { width: 25%; float: left; } } .detail section.main { padding-top: 100px; } @media (min-width: 768px) { .detail section.main { padding-top: 30px; } } .detail section.main .crumbs { margin-bottom: 54px; } .detail section.main .tit { margin-bottom: 30px; overflow: inherit; } .detail section.main .tit h2 { position: relative; font-size: 30px; color: #000; padding: 0 35px; } .detail section.main .tit h2:before { position: absolute; left: 0; top: 0; width: 35px; height: 100%; background: url(../images/icon_coin1.png) 50% 50%/80% no-repeat; content: ""; } .detail section.main .tit h2:after { position: absolute; right: 0; top: 0; width: 35px; height: 100%; background: url(../images/icon_coin1.png) 50% 50%/80% no-repeat; content: ""; } .detail section.main .tit h2 img { opacity: 1; display: none; } @media (min-width: 768px) { .detail section.main .tit h2:before, .detail section.main .tit h2:after { display: none; } .detail section.main .tit h2 img { display: inline-block; } } @media (min-width: 768px) { .detail section.main .tit { margin-bottom: 100px; } } @media (min-width: 1024px) { .detail section.main .tit br { display: none; } } .detail section.main .row { font-size: 18.2px; margin-bottom: 30px; text-align: center; padding: 0 30px; } @media (min-width: 768px) { .detail section.main .row { font-size: 26px; margin-bottom: 60px; padding: 0; } } .detail section.main .row small { display: block; font-weight: 400; margin-bottom: 15px; line-height: 1; text-align: left; font-size: 22px; } .detail section.main .row p { text-align: justify; font-size: 18px; } .detail section.main .row img { max-width: 100%; display: inline-block; } .detail section.main .row strong { font-weight: 400; } .detail section.main .row em { font-style: italic; } .detail section.main .row ul li { list-style: decimal; margin-left: 20px; text-align: left; font-size: 18px; } .detail section.main .row ol li { list-style: disc; margin-left: 20px; text-align: left; font-size: 18px; } .detail section.main .row span.ql-size-small { font-size: 13px; } .detail section.main .row span.ql-size-large { font-size: 26px; } .detail section.main .row span.ql-size-huge { font-size: 52px; } .detail section.main .row .vdo { position: relative; width: 100%; display: block; } .detail section.main .row .vdo:after { padding-top: 59.2503%; display: block; content: ""; } .detail section.main .row .vdo .inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .detail section.main .row.img img { max-width: 100%; } .detail section.main .row.vdo .container { padding: 0 10%; } .detail section.main .row.vdo .container small { margin-left: -16%; } .detail section.main .row.img-txt { overflow: hidden; } .detail section.main .row.img-txt .col-left { text-align: center; margin-bottom: 15px; } @media (min-width: 768px) { .detail section.main .row.img-txt .col-left { padding-right: 7px; } .detail section.main .row.img-txt .col-left { width: 50%; float: left; } .detail section.main .row.img-txt .col-right { width: 50%; float: left; padding-left: 7px; } } .detail section.main .row.txt-img { overflow: hidden; } .detail section.main .row.txt-img .col-left { margin-bottom: 15px; } .detail section.main .row.txt-img .col-right { text-align: center; } @media (min-width: 768px) { .detail section.main .row.txt-img .col-right { padding-left: 15px; } .detail section.main .row.txt-img .col-left { width: 50%; float: left; } .detail section.main .row.txt-img .col-right { width: 50%; float: left; } } .detail section.main .row.img-img { overflow: hidden; } .detail section.main .row.img-img .col-left { width: 100%; float: left; margin-left: 0; margin-right: 0; } .detail section.main .row.img-img .col-right { width: 100%; float: left; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .detail section.main .row.img-img .col-left { width: 50%; float: left; padding: 0 5px; } .detail section.main .row.img-img .col-right { width: 50%; float: left; padding: 0 5px; } } .detail section.main .row.bottom { position: relative; overflow: hidden; } .detail section.main .row.bottom .btn-prev-article, .detail section.main .row.bottom .btn-next-article { width: 50%; float: left; font-size: 16px; font-weight: bold; color: #75757a; text-decoration: none; padding: 0 15px; text-align: center; } .detail section.main .row.bottom .btn-prev-article b, .detail section.main .row.bottom .btn-next-article b { font-size: 14px; font-weight: normal; } .detail section.main .row.bottom .btn-prev-article span, .detail section.main .row.bottom .btn-next-article span { display: block; width: 100%; height: 4px; border-radius: 2px; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .detail section.main .row.bottom .btn-next-article { color: #f07856; } .detail section.main .row.bottom .btn-next-article { float: right; } .detail section.main .row.bottom:before { position: absolute; left: 50%; bottom: 0; margin-left: -1px; width: 2px; background: #f07856; height: 999px; content: ""; } @media (min-width: 667px) { .detail section.main .row.bottom:before { display: none; } .detail section.main .row.bottom .btn-prev-article, .detail section.main .row.bottom .btn-next-article { position: relative; font-size: 14px; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; max-width: 160px; width: auto; float: none; font-weight: normal; border: none; } .detail section.main .row.bottom .btn-prev-article span, .detail section.main .row.bottom .btn-next-article span { background: #75757a; margin: 10px 0; } .detail section.main .row.bottom .btn-prev-article:before, .detail section.main .row.bottom .btn-next-article:before { position: absolute; top: 19px; width: 24px; height: 27px; background: url(../images/Triangle.png) 0 0/100% no-repeat; content: ""; opacity: 1; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .detail section.main .row.bottom .btn-prev-article:after, .detail section.main .row.bottom .btn-next-article:after { position: absolute; top: 19px; width: 24px; height: 27px; background: url(../images/Triangle_Hover.png) 0 0/100% no-repeat; content: ""; opacity: 0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .detail section.main .row.bottom .btn-prev-article:hover, .detail section.main .row.bottom .btn-next-article:hover { color: #f07856; } .detail section.main .row.bottom .btn-prev-article:hover span, .detail section.main .row.bottom .btn-next-article:hover span { background: #f07856; } .detail section.main .row.bottom .btn-prev-article:hover:before, .detail section.main .row.bottom .btn-next-article:hover:before { opacity: 0; } .detail section.main .row.bottom .btn-prev-article:hover:after, .detail section.main .row.bottom .btn-next-article:hover:after { opacity: 1; } .detail section.main .row.bottom .btn-next-article:before { background: url(../images/Triangle_Hover.png) 0 0/100% no-repeat; } .detail section.main .row.bottom .btn-next-article:after { background: url(../images/Triangle_Hover_blue.png) 0 0/100% no-repeat; } .detail section.main .row.bottom .btn-next-article:hover { color: #4A90E2; } .detail section.main .row.bottom .btn-next-article:hover span { background: #4A90E2; } .detail section.main .row.bottom .btn-prev-article { float: left; text-align: right; margin-left: 29px; } .detail section.main .row.bottom .btn-prev-article:before { left: -29px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .detail section.main .row.bottom .btn-prev-article:after { left: -29px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .detail section.main .row.bottom .btn-prev-article:hover:before { left: -34px; } .detail section.main .row.bottom .btn-prev-article:hover:after { left: -34px; } .detail section.main .row.bottom .btn-next-article { float: right; text-align: left; margin-right: 29px; } .detail section.main .row.bottom .btn-next-article:before { right: -29px; } .detail section.main .row.bottom .btn-next-article:after { right: -29px; } .detail section.main .row.bottom .btn-next-article:hover:before { right: -34px; } .detail section.main .row.bottom .btn-next-article:hover:after { right: -34px; } .detail section.main .row.bottom .btn-next-article span { background: #f07856; } } .result section.top, .result section.main { background: none; }