@charset "UTF-8"; /* CSS Document */ @import url(public/css/reset.css); @import url(public/css/font-awesome-4.7.0/font-awesome.min.css); @import url(public/css/rwdgrid.css); @import url(public/css/textEditor.css); @import url(public/css/contentbuilder.css); .classRowBox > ul a, .mClassLink .main, .mClassLink > ul { box-sizing: border-box; } .nav .subHeaderArea .headerClass .m1LinkLi .m2LinkList, .menuTitle::before, .listTitleLine::before { transition: all .3s; } header .languageBox .currentLang, header .inquiryBox, #chat-application, .menu > li > a::before, .menu .subheaderCloseBtn, .subHeaderArea, .subHeaderArea .headerClass .m1LinkLi .m2LinkList, .nav .subHeaderArea, .m_menu .controlBox .languageBox .currentLang, #moduleEmail form select, footer .footerArea .downLogoArea .left .logoBox img, footer .footerArea .downLogoArea .left .snsBox .socialList li, footer .footerArea .downLogoArea .left .snsBox .socialList li a svg, .fixedArea, .fixedQuickLink .inquiryBox, .crossBtn .crossBox::after, .plus, .classRowBox, .classColumnBox, .pageBox a.prevBtn::before, .pageBox a.nextBtn::before, .pageBox.number a.firstBtn::before, .pageBox.number a.firstBtn::after, .pageBox.number a.lastBtn::before, .pageBox.number a.lastBtn::after, .pageBox.prevnext a span { transition: all .5s; } header .logo img { transition: all .75s; } body { background-color: #fff; font-family: 'Source Sans Pro','Open Sans', 'Microsoft JhengHei', sans-serif; font-size: 15px; } body.popwinOverflow, body.loadingOverflow { overflow: hidden; } address { font-style: normal; } a { color: #000; cursor: pointer; transition: all 0.4s ease; } a:hover { color: #ff0000; } div.titan { display: none; } [class*='col-'] { float: left; } .col-1 { width: 100%; } .col-2 { width: 50%; } .col-3 { width: 33.33%; } .col-4 { width: 25%; } .col-5 { width: 20%; } @media (max-width: 480px) { .col-1, .col-2, .col-3, .col-4, .col-5 { float: none; width: 100%; } } .btn_color1 { color: #fff; background-color: #ff0000; } .btn_color1:hover { background-color: #000; } .btn_color2 { color: #fff; background-color: #A0A0A0; } .btn_color2:hover { background-color: #999; } input[type="text"], input[type="password"], textarea, button { appearance: none; background-color: transparent; border: none; border-radius: 0; font-size: 16px; outline: none; padding: 0; margin: 0; } textarea { resize: vertical; } .outerWrap { position: relative; overflow-x: hidden; padding-top: 80px; } @media (max-width: 1180px) { .outerWrap { padding-top: 60px; padding-bottom: 72px; } } .wrap { width: 100%; max-width: 1250px; margin: 0 auto; } @media (max-width: 1340px) { .wrap { padding: 0 20px; } } /*module*/ .moduleBox { position: fixed; left: 0; top: 0; z-index: 1005; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-left: 20px; padding-right: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition-property: top, opacity, visibility; transition-duration: .5s; transition-timing-function: ease-in-out; } .moduleBox.show { opacity: 1; visibility: visible; } .moduleBox.show .moduleWrap { opacity: 1; transform: translateY(0); } .moduleBox#moduleCompare .moduleWrap { width: 100%; max-width: 500px; } .moduleBox .moduleWrap { position: relative; width: 100%; max-width: 90vw; margin: 0 auto; background-color: #fff; pointer-events: auto; padding-top: 30px; opacity: 0; transform: translateY(30px); transition: all .5s; } .moduleBox .moduleContent { width: 100%; max-height: calc(90vh - 50px); overflow-y: auto; padding-left: 30px; padding-right: 30px; padding-bottom: 30px; } .moduleBox .moduleContent .contentWrap { padding-top: 15px; padding-bottom: 15px; margin-bottom: 20px; border-top: 2px solid #ff0000; border-bottom: 2px solid #b4b4b4; } .moduleBox .moduleContent .moduleList { overflow-y: auto; max-height: 50vh; } .moduleBox .moduleContent .moduleList li { display: flex; align-items: center; justify-content: space-between; } .moduleBox .moduleContent .moduleList li:not(:first-child) { padding-top: 10px; margin-top: 10px; border-top: 1px solid #d5d5d5; } .moduleBox .moduleContent .moduleList .Img { width: 150px; height: auto; } .moduleBox .moduleContent .moduleList .Img a { display: block; width: 100%; height: 100%; } .moduleBox .moduleContent .moduleList .Img img { display: block; width: 100%; height: 100%; object-fit: contain; } .moduleBox .moduleContent .moduleList .Txt { position: relative; width: calc(100% - 150px); padding-left: 20px; padding-right: 50px; box-sizing: border-box; font-size: 16px; } .moduleBox .moduleContent .moduleList h3 { width: 100%; margin-bottom: 3px; } .moduleBox .moduleContent .moduleList h3 a { display: block; color: #000; font-size: 18px; line-height: 24px; font-weight: 600; } .moduleBox .moduleContent .moduleList .spec { color: #6a6a6a; margin-bottom: 3px; } .moduleBox .moduleContent .moduleList .del { position: absolute; right: 0; top: calc(50% - 18.5px); display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: none; background-color: #eee; border-radius: 50%; color: #5f5f5f; cursor: pointer; transition: all .5s; } .moduleBox .moduleContent .moduleList .del:hover { background-color: #ff0000; color: #fff; } .moduleBox .moduleContent .moduleList .del svg { width: 15px; height: 18px; } .moduleBox .moduleContent .countBox { margin-top: 10px; font-size: 13px; color: #333; text-align: center; display: flex; justify-content: center; } .moduleBox .moduleContent .countBox b { font-size: 18px; color: #ff0000; } .moduleBox .moduleContent .countBox b em { font-weight: 400; font-size: 12px; color: #ff0000; } .moduleBox .moduleContent .countBox a.btn_pay { display: inline-block; padding: 7px 15px; font-size: 13px; color: #fff; } .moduleBox .moduleContent .countBox .crossBtn { margin: 5px; } @media (max-width: 768px) { .moduleBox .moduleContent { padding-right: 20px; padding-left: 20px; } .moduleBox .moduleContent .moduleList { max-height: 60vh; } .moduleBox .moduleContent .moduleList li { flex-wrap: wrap; } .moduleBox .moduleContent .moduleList .Img { margin: 0 auto; } .moduleBox .moduleContent .moduleList .Txt { padding-top: 20px; padding-bottom: 20px; } .moduleBox#moduleCompare .moduleContent .moduleList .Txt { padding: 20px 10px; padding-left: 10px; padding-right: 40px; } } @media (max-width: 375px) { .moduleBox .moduleContent .moduleList .Img { width: 100px; } .moduleBox .moduleContent .moduleList .Txt { width: calc(100% - 100px); padding-left: 10px; } } .moduleBox .moduleClose { position: absolute; right: -46px; top: -46px; width: 46px; height: 46px; border-radius: 50%; background: none; background-color: #bfbfbf; border: none; cursor: pointer; } .moduleBox .moduleClose::before, .moduleBox .moduleClose::after { content: ''; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -0.5px; width: 30px; height: 1px; background-color: #fff; } .moduleBox .moduleClose::before { transform: rotate(45deg); } .moduleBox .moduleClose::after { transform: rotate(-45deg); } @media (max-width: 768px) { .moduleBox .moduleClose { right: 10px; top: 10px; z-index: 10; } } .moduleMask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1003; background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; pointer-events: none; transition: all .5s ease-in-out; } .moduleMask.show { opacity: 1; visibility: visible; pointer-events: auto; } /*璩肩墿杌?/ .cartArea .moduleWrap { max-width: 500px; } .cartArea .goto_pay_btn { margin-left: 15px; } .cartArea .cartNote { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 20px; } .cartArea .cartNote .en { font-size: 28px; letter-spacing: .01em; color: #1e1e1e; text-transform: uppercase; } .cartArea .cartNote .en span { color: #ff0000; } .cartArea .cartNote .text { font-size: 14px; letter-spacing: .05em; color: #373737; } .cartArea .cartNote .text b { padding-left: 4px; padding-right: 4px; font-weight: 400; font-size: 18px; color: #ff0000; } .cartArea .cart { padding-top: 15px; padding-bottom: 15px; margin-bottom: 20px; border-top: 2px solid #ff0000; border-bottom: 2px solid #b4b4b4; } .cartArea .buyList { max-height: 50vh; overflow-y: auto; } .cartArea .buyList li { display: flex; flex-wrap: wrap; } .cartArea .buyList li:not(:first-child) { padding-top: 12px; margin-top: 12px; border-top: 1px solid #d5d5d5; } .cartArea .buyList .Img { width: 100%; max-width: 150px; } .cartArea .buyList .Img img { display: block; width: 100%; } .cartArea .buyList .Txt { position: relative; width: calc(100% - 150px); padding-left: 20px; padding-right: 50px; box-sizing: border-box; font-size: 16px; display: flex; align-items: center; } .cartArea .buyList h3 { width: 100%; margin-bottom: 3px; } .cartArea .buyList h3 a { display: block; color: #000; font-size: 20px; line-height: 24px; font-weight: 600; } .cartArea .buyList .spec { color: #6a6a6a; margin-bottom: 3px; } .cartArea .buyList .del { position: absolute; right: 0; top: calc(50% - 18.5px); display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: none; background-color: #eee; border-radius: 50%; color: #5f5f5f; cursor: pointer; transition: all .5s; } .cartArea .buyList .del:hover { background-color: #ff0000; color: #fff; } .cartArea .buyList .del svg { width: 15px; height: 18px; } .cartArea .crossBtn { margin: 5px; } @media (max-width: 1080px) { .cartArea .moduleWrap { max-width: 600px; width: 100%; } } @media (max-width: 640px) { .cartArea .buyList { max-height: 60vh; } .cartArea .buyList li { flex-wrap: wrap; } .cartArea .buyList .Img { margin: 0 auto; } } @media (max-width: 375px) { .cartArea .buyList .Img { width: 100px; } .cartArea .buyList .Txt { width: calc(100% - 100px); padding-left: 10px; } } /*瑷傚柈鏌ヨ*/ .orderCheckArea .moduleWrap { max-width: 360px; } .orderCheckArea h4 { margin-bottom: 10px; font-weight: 400; font-size: 16px; font-family: 'Microsoft JhengHei', sans-serif; color: #222; text-align: left; } .orderCheckArea input[type="text"], .orderCheckArea input[type="password"] { width: 100%; height: 40px; margin-bottom: 10px; padding: 5px; border: 2px solid #ccc; } .orderCheckArea a.btn { display: inline-block; margin-top: 10px; padding: 10px 20px; border-radius: 4px; font-size: 13px; color: #fff; } /*鎼滃皨*/ .searchArea .moduleWrap { max-width: 480px; } .searchArea .searchBox { margin: 30px 0; position: relative; } .searchArea .searchBox input { width: 100%; display: block; border: 1px solid #e1e1e1; padding: 15px 55px 15px 15px; } .searchArea .searchBox a { position: absolute; top: 50%; right: 0; z-index: 1; transform: translateY(-50%); } #closeCart, #closePrice, #closeInquiry { font-size: 18px; position: absolute; top: 8px; right: 10px; } @media (max-width: 480px) { #closeCart, #closePrice, #closeInquiry { font-size: 25px; top: 5px; } } @keyframes loadLine { 0% { width: 0; } 20% { width: 30%; } 60% { width: 65%; } 100% { width: 100%; } } @keyframes loadLineMove { 0% { height: 8px; transform: translateY(0); } 100% { height: 100%; transform: translateY(101%); } } @keyframes loadLineMove02 { 0% { transform: translateY(0); } 100% { transform: translateY(101%); } } @keyframes logoFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /*loading*/ .loadingArea { position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100vh; opacity: 0; pointer-events: none; } .loadingArea::before { content: ''; width: 0; height: 8px; background-color: #ff0000; position: absolute; left: 0; top: 0; transform: translateY(0); } .loadingArea::after { content: ''; width: 100%; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; z-index: -1; } .loadingArea .loadLogo { width: 260px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .loadingArea .loadLogo img { display: block; width: 100%; backface-visibility: hidden; } .loadingArea.show { opacity: 1; pointer-events: auto; } .loadingArea.show::before { animation: loadLine 3s forwards, loadLineMove .8s 3s forwards; } .loadingArea.show::after { animation: loadLineMove02 .8s 3.4s forwards; } .loadingArea.show .loadLogo { animation: logoFadeOut .3s 3.12s forwards; } /*header*/ header { position: fixed; left: 0; top: 0; width: 100%; height: 80px; z-index: 50; background-color: #fff; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09); } @media (max-width: 1180px) { header { display: none; } } header .wrap { position: relative; display: flex; align-items: center; max-width: 100%; height: 100%; } @media (max-width: 1340px) { header .wrap { padding: 0; } } header .logo { width: 294px; height: 80px; } header .logo a { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 180px; height: 100%; margin: 0 auto; } header .logo a:hover img { transform: scale(1.05); } header .logo img { display: block; width: 160px; /* height: 34px; */ margin: 0 auto; } @media (max-width: 1580px) { header .logo { width: 200px; } } @media (max-width: 1280px) { header .logo { width: 140px; padding-left: 5px; } header .logo img { width: 100%; height: auto; } } header .rightBox { display: flex; justify-content: flex-end; align-items: center; width: calc(100% - 294px); } @media (max-width: 1580px) { header .rightBox { width: calc(100% - 200px); } } @media (max-width: 1280px) { header .rightBox { width: calc(100% - 140px); } } header .menuBox { padding-right: 20px; } @media (max-width: 1480px) { header .menuBox { padding-right: 10px; } } header .languageBox { display: block; position: relative; width: 80px; height: 80px; cursor: pointer; box-sizing: border-box; border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); } header .languageBox .currentLang { width: 100%; height: 100%; text-align: center; line-height: 80px; font-size: 16px; letter-spacing: 1px; font-weight: 600; } header .languageBox .currentLang:hover { color: #ff0000; } header .languageBox .downLangBox { display: none; position: absolute; top: 100%; left: calc(50% - 50px); width: 100px; z-index: 49; } header .languageBox .downLangBox .langBtn { display: block; width: 100%; font-size: 16px; font-weight: 600; line-height: 36px; letter-spacing: 1px; text-align: center; background-color: white; border-bottom: 1px solid rgba(0, 0, 0, 0.5); } header .languageBox .downLangBox .langBtn.current { color: #ff0000; } @media (max-width: 1400px) { header .languageBox { width: 60px; } } header .serchBoxWrap { width: 245px; padding: 0 33px; } header .serchBoxWrap .searchbox { position: relative; } header .serchBoxWrap input { display: block; width: 100%; height: 37px; background-color: rgba(0, 0, 0, 0.1); font-size: 15px; line-height: 37px; letter-spacing: 0; color: #6a6a6a; font-weight: 400; padding-left: 15px; padding-right: 37px; position: relative; } header .serchBoxWrap a { display: block; width: 37px; height: 37px; position: absolute; top: 0; right: 0; } header .serchBoxWrap a img { display: block; width: 14px; height: 14px; position: absolute; top: calc(50% - 7px); left: calc(50% - 7px); } @media (max-width: 1480px) { header .serchBoxWrap { width: 160px; padding: 0 10px; } } header .inquiryBox { padding: 0 25px 0 20px; height: 80px; background-color: #ff0000; } header .inquiryBox .inquiryToggle { width: 100%; height: 100%; display: flex; align-items: center; position: relative; } header .inquiryBox .inquiryToggle img { display: block; width: 24px; height: 22px; filter: grayscale(1) brightness(20); } header .inquiryBox .inquiryToggle .numBox { width: 16px; height: 16px; border-radius: 50%; background-color: #fff; color: #ff0000; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-align: center; position: absolute; top: calc(50% - 18px); left: 14px; } header .inquiryBox .inquiryToggle span { display: inline-block; padding-left: 10px; font-size: 16px; line-height: 26px; letter-spacing: 0; color: #fff; font-weight: 600; } header .inquiryBox:hover { background-color: #000; } #chat-application { bottom: 56px !important; } #chat-application.hide { opacity: 0; pointer-events: none; transform: scale(0.6); } @media (max-width: 1180px) { #chat-application { bottom: 75px !important; } } /*menu*/ .menu > li { display: inline-block; } .menu > li > a { position: relative; display: block; padding: 10px 15px; font-size: 18px; line-height: 28px; font-weight: 600; } .menu > li > a::before { content: ""; width: 0; height: 1px; background-color: #ff0000; position: absolute; bottom: -17px; left: calc(50% - 15px); } .menu > li > a:hover::before, .menu > li > a.current::before { width: 30px; } .menu > li > a.current { color: #ff0000; } .menu > li > a.current::before { z-index: 51; } .menu .subheaderCloseBtn { position: fixed; top: 100px; right: 30px; display: block; width: 40px; height: 40px; z-index: 49; transform: rotate(45deg); opacity: 0; pointer-events: none; } .menu .subheaderCloseBtn::before { content: ""; width: 20px; height: 2px; display: block; background-color: #000; position: absolute; top: calc(50% - 1px); left: calc(50% - 10px); } .menu .subheaderCloseBtn::after { content: ""; width: 2px; height: 20px; display: block; background-color: #000; position: absolute; top: calc(50% - 10px); left: calc(50% - 1px); } .menu .subheaderCloseBtn.show { opacity: 1; pointer-events: auto; } .menu .subheaderCloseBtn:hover::before, .menu .subheaderCloseBtn:hover::after { background-color: #ff0000; } @media (max-width: 1400px) { .menu > li > a { padding: 10px 10px; } } @media (max-width: 1240px) { .menu > li > a { font-size: 17px; } } .moduleMask_header { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 48; background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; pointer-events: none; transition: all .5s ease-in-out; } .moduleMask_header.show { opacity: 1; visibility: visible; pointer-events: auto; } .subHeaderArea { display: block; width: 100vw; max-height: calc(100vh - 80px); position: fixed; top: 80px; left: 0px; background-color: #fff; background: linear-gradient(to right, #fff calc(100% - 835px), #f3f3f3 calc(100% - 835px)); border-top: 1px solid rgba(0, 0, 0, 0.2); z-index: 49; padding: 56px 0 60px; overflow-y: auto; opacity: 0; pointer-events: none; } .subHeaderArea.show { top: 80px; left: 0; opacity: 1; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09); pointer-events: auto; } .subHeaderArea .wrap { max-width: 1500px; display: flex; align-items: flex-start; } .subHeaderArea .titleBox { margin-bottom: 0; min-width: 160px; } .subHeaderArea .headerClass { padding-left: 38px; border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); margin-right: 250px; position: relative; } .subHeaderArea .headerClass .m1LinkLi { display: block; width: 250px; padding-right: 45px; } .subHeaderArea .headerClass .m1LinkLi:first-child { margin-top: -18px; } @media (max-width: 1180px) { .subHeaderArea .headerClass .m1LinkLi:first-child { margin-top: 0px; } } .subHeaderArea .headerClass .m1LinkLi:last-child { margin-bottom: -18px; } @media (max-width: 1180px) { .subHeaderArea .headerClass .m1LinkLi:last-child { margin-bottom: 10px; } } .subHeaderArea .headerClass .m1LinkLi > a { border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: block; font-size: 17px; line-height: 20px; padding: 18px 12px 18px 0; font-weight: 700; letter-spacing: 0; position: relative; } .subHeaderArea .headerClass .m1LinkLi > a::before { content: ""; width: 7px; height: 7px; display: block; border-top: 1px solid #000; border-right: 1px solid #000; position: absolute; top: calc(50% - 3.5px); right: 0; transform: rotate(45deg); } .subHeaderArea .headerClass .m1LinkLi.nom2List > a { padding: 18px 0; } .subHeaderArea .headerClass .m1LinkLi.nom2List > a::before { opacity: 0; } .subHeaderArea .headerClass .m1LinkLi.current > a { color: #ff0000; } .subHeaderArea .headerClass .m1LinkLi.current > a::before { border-top: 1px solid #ff0000; border-right: 1px solid #ff0000; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList { width: 250px; height: initial; padding-left: 38px; position: absolute; top: 0; left: 100%; opacity: 0; display: none; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList.m2show { opacity: 1; display: block; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li:first-child { margin-top: -18px; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li:last-child { margin-bottom: -18px; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li:last-child > a { border-bottom: 1px solid transparent; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li > a { width: 100%; display: block; font-size: 17px; letter-spacing: 0; line-height: 16px; padding-bottom: 20px; padding: 18px 0; color: #404040; font-weight: 400; position: relative; } @media (min-width: 1181px) { .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li > a:hover { padding-left: 14px; color: #ff0000; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li > a:hover::before { content: ""; width: 3px; height: 3px; border-radius: 50%; display: block; background-color: #ff0000; position: absolute; top: 24.5px; left: 2px; } } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li.current > a { padding-left: 14px; color: #ff0000; } .subHeaderArea .headerClass .m1LinkLi .m2LinkList > li.current > a::before { content: ""; width: 3px; height: 3px; border-radius: 50%; display: block; background-color: #ff0000; position: absolute; top: 24.5px; left: 2px; } .subHeaderArea .rightClassNote.onlyOneAd li { display: block; } .subHeaderArea .rightClassNote li { display: none; } .subHeaderArea .rightClassNote li.rightNoteShow { display: block; } .subHeaderArea .rightClassNote li .item { display: flex; padding-left: 10px; align-items: flex-start; } .subHeaderArea .rightClassNote li .Img { width: 400px; height: 235px; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); } .subHeaderArea .rightClassNote li .Img img { display: block; width: 100%; height: 100%; object-fit: cover; } .subHeaderArea .rightClassNote li .Txt { width: 425px; padding-left: 20px; position: relative; height: 237px; top: -2px; } .subHeaderArea .rightClassNote li .Txt .toptext { font-size: 15px; line-height: 23px; letter-spacing: 0; font-weight: 400; color: #888888; } .subHeaderArea .rightClassNote li .Txt .menuTitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .subHeaderArea .rightClassNote li .Txt .exp.ellipsis { height: 96px; } .subHeaderArea .rightClassNote li .Txt .btnBox { padding-top: 15px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 1600px) { .subHeaderArea { background: linear-gradient(to right, #fff 50%, #f3f3f3 50%); } .subHeaderArea .wrap { padding: 0 20px; flex-wrap: wrap; justify-content: space-between; } .subHeaderArea .titleStyle.taleft { width: 100%; margin-bottom: 20px; } .subHeaderArea .headerClass { margin: 10px 250px 0 0; border-left: transparent; padding-left: 0; width: 250px; } .subHeaderArea .headerClass > li { max-width: 250px; } .subHeaderArea .rightClassNote { max-width: 830px; } .subHeaderArea .rightClassNote li .item { width: 830px; align-items: flex-start; } .subHeaderArea .rightClassNote li .Img { width: 400px; height: auto; } .subHeaderArea .rightClassNote li .Txt { width: 100%; max-width: 420px; padding-left: 20px; padding-top: 0px; position: relative; top: -2px; } .subHeaderArea .rightClassNote li .Txt .btnBox .crossBtn { max-width: 195px; } } @media (max-width: 1440px) { .subHeaderArea { padding: 20px 20px 40px; } .subHeaderArea .wrap { max-width: 1100px; overflow-y: auto; } .subHeaderArea .headerClass { padding-left: 0px; width: 250px; } .subHeaderArea .rightClassNote { max-width: 450px; padding: 0 50px 0 0; } .subHeaderArea .rightClassNote li .item { width: 100%; padding: 0; flex-wrap: wrap; } .subHeaderArea .rightClassNote li .item .Txt { max-width: 400px; padding: 15px 0 0; height: auto; top: 0; } .subHeaderArea .rightClassNote li .item .Txt .exp { min-height: auto; } } .nav { padding: 0 20px; } .nav > li { width: 100%; } .nav > li .titleBox { width: 100%; display: block; margin-bottom: 20px; padding-top: 20px; } .nav > li .titleBox .title { width: 100%; } .nav > li .titleBox a { display: block; width: 100%; position: relative; } .nav > li .titleBox .plus { position: absolute; top: 0; right: 0; } .nav > li.current .titleBox .plus { background-color: #ff0000; } .nav > li.current .titleBox .plus .cross::after { background-color: #ff0000; } .nav .subHeaderArea { position: relative; top: 0px; background-color: #f3f3f3; background: #f3f3f3; padding: 20px 0; border-top: none; opacity: 0; pointer-events: none; display: block; height: 0; padding: 0; width: 100%; overflow-y: hidden; } .nav .subHeaderArea.show { box-shadow: none; height: 100%; opacity: 1; pointer-events: auto; padding: 20px 0; display: block; } .nav .subHeaderArea .wrap { flex-wrap: wrap; align-items: initial; } .nav .subHeaderArea .titleBox { display: none; } .nav .subHeaderArea .headerClass { border: none; margin-right: 0; padding-left: 0; margin: 0; padding: 0; } .nav .subHeaderArea .headerClass .m1LinkLi { display: block; width: 100%; padding-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 15px; margin: 0; } .nav .subHeaderArea .headerClass .m1LinkLi:last-child { border-bottom: transparent; } .nav .subHeaderArea .headerClass .m1LinkLi > a { border-bottom: none; width: 100%; display: block; } .nav .subHeaderArea .headerClass .m1LinkLi .m2LinkList { position: relative; left: 0; top: 0; width: 100%; display: block; margin: 0; padding: 0; opacity: 0; pointer-events: none; height: 0; } .nav .subHeaderArea .headerClass .m1LinkLi .m2LinkList li a { padding: 10px 0; } .nav .subHeaderArea .headerClass .m1LinkLi .m2LinkList.m2show { padding: 20px 0; height: auto; opacity: 1; pointer-events: auto; } .nav .subHeaderArea .headerClass .m1LinkLi.current > a::before { transform: rotate(135deg); } .nav .subHeaderArea .rightClassNote { padding: 0px; width: 400px; } .nav .subHeaderArea .rightClassNote .Txt .btnBox .crossBtn { max-width: 195px; } @media (max-width: 1180px) { .nav .subHeaderArea .headerClass { width: 100%; } .nav .subHeaderArea .headerClass > li { max-width: 100%; width: 100%; } .nav .rightClassNote { display: none; } } /*鎵嬫menu*/ .m_menu { position: fixed; top: 0; left: 0; z-index: 999; display: block; width: 100%; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09); } @media (min-width: 1181px) { .m_menu { display: none; } } .m_menu .mask { position: fixed; top: 0; left: 0; z-index: 10; display: none; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; padding-bottom: 60px; } .m_menu .m_logo { margin-left: 20px; display: flex; align-items: center; } .m_menu .m_logo img { display: block; width: 140px; /* height: 32px; */ object-fit: contain; } .m_menu .controlBox { position: relative; z-index: 99; height: 60px; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; } .m_menu .controlBox .right { width: 120px; display: flex; } .m_menu .controlBox a.main { position: relative; top: 0; left: 0; display: block; width: 60px; height: 60px; } .m_menu .controlBox a.main span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); margin-top: -0.5px; width: 26px; height: 1px; background-color: #111; transition: all .5s; } .m_menu .controlBox a.main span:before, .m_menu .controlBox a.main span:after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: #111; transition: all .5s; } .m_menu .controlBox a.main span:before { top: -7px; } .m_menu .controlBox a.main span:after { bottom: -7px; } .m_menu .controlBox a.main.show span { background-color: transparent; } .m_menu .controlBox a.main.show span:before { top: 0; transform: rotate(45deg); } .m_menu .controlBox a.main.show span:after { bottom: 0; transform: rotate(-45deg); } .m_menu .controlBox .languageBox { display: block; position: relative; width: 60px; height: 60px; cursor: pointer; box-sizing: border-box; border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); } .m_menu .controlBox .languageBox .currentLang { width: 100%; height: 100%; text-align: center; line-height: 60px; font-size: 16px; letter-spacing: 1px; font-weight: 600; } .m_menu .controlBox .languageBox .currentLang:hover { color: #ff0000; } .m_menu .controlBox .languageBox .downLangBox { display: none; position: absolute; top: 100%; left: calc(50% - 50px); width: 100px; } .m_menu .controlBox .languageBox .downLangBox .langBtn { display: block; width: 100%; font-size: 16px; font-weight: 600; line-height: 36px; letter-spacing: 1px; text-align: center; background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .m_menu .controlBox .languageBox .downLangBox .langBtn.current { color: #ff0000; } /*鎵嬫menu鍏у*/ .hideBox { position: fixed; left: 0; top: 0; bottom: 0; z-index: 11; display: none; width: 100%; padding: 60px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #fff; } .hideBox .sp { display: none; padding: 10px; font-size: 13px; color: #fff; background-color: #c80303; } .searchBox_m { padding: 20px; text-align: center; position: relative; } .searchBox_m .inputWrap { position: relative; } .searchBox_m input { display: block; width: 100%; height: 37px; background-color: rgba(0, 0, 0, 0.1); font-size: 15px; line-height: 37px; letter-spacing: 0; color: #6a6a6a; font-weight: 400; padding-left: 15px; padding-right: 37px; position: relative; } .searchBox_m a { display: block; width: 37px; height: 37px; position: absolute; top: 0; right: 0; } .searchBox_m a img { display: block; width: 14px; height: 14px; position: absolute; top: calc(50% - 7px); left: calc(50% - 7px); } /*鎵嬫缈昏*/ .m_menu .m_trans { text-align: center; padding-top: 30px; } .m_menu .m_trans > a { display: inline-block; padding: 8px 15px; border: 1px solid #fff; color: #fff; } .m_menu .m_trans > a i { margin-left: 5px; } /*banner*/ .bannerArea { clear: both; overflow: hidden; position: relative; z-index: 1; } .bannerArea .wrap { width: 100%; max-width: 100%; padding: 0; } .bannerArea .bannerBox img { display: block; width: 100%; backface-visibility: hidden; } .bannerArea .bannerItem { position: relative; } .bannerArea .bannerLink { display: block; } .bannerArea .unitPage .item { position: relative; } .bannerArea .unitPage .Img { width: 100%; height: 500px; } .bannerArea .unitPage .Img a { display: block; width: 100%; height: 100%; } .bannerArea .unitPage .Img img { display: block; width: 100%; height: 100%; object-fit: cover; } .bannerArea .unitPage .Txt { width: 100%; max-width: 650px; position: absolute; top: 50%; left: calc(50% - 650px); transform: translateY(-50%); } @media (max-width: 1340px) { .bannerArea .unitPage .Img { height: 400px; } .bannerArea .unitPage .Txt { left: 40px; } } @media (max-width: 640px) { .bannerArea .unitPage .Img { height: 300px; } .bannerArea .unitPage .Txt { left: 40px; } .bannerArea .unitPage .Txt .titleBox .title { font-size: 30px; line-height: 40px; } } @media (max-width: 400px) { .bannerArea .unitPage .Img { height: 240px; } .bannerArea .unitPage .Txt { left: 20px; } } #moduleEmail form { width: 100%; position: relative; } #moduleEmail form .box { width: 100%; max-width: 300px; margin: 0 auto; padding-bottom: 10px; } #moduleEmail form .box .title { font-size: 16px; line-height: 24px; letter-spacing: 0; font-weight: 600; padding-bottom: 5px; } #moduleEmail form .box .title em { color: #f00; } #moduleEmail form select { width: 100%; height: 48px; font-size: 16px; line-height: 20px; letter-spacing: 0.2px; font-weight: 400; background-color: rgba(0, 0, 0, 0.1); border: none; padding-left: 30px; position: relative; /* Firefox */ /* Safari and Chrome */ appearance: none; background-image: url(../images/select_arrow.png); background-position: top -5px right; background-repeat: no-repeat; cursor: pointer; } #moduleEmail form input { display: inline-block; width: 100%; height: 48px; padding: 0 20px; margin-right: 5px; background-color: rgba(0, 0, 0, 0.1); color: #000; } #moduleEmail form input::placeholder { color: #8c8c8c; font-size: 15px; line-height: 48px; letter-spacing: 0.1px; font-weight: 400; } #moduleEmail form .crossBtn { position: relative; left: 50%; transform: translateX(-50%); margin: 20px auto 0; } #moduleEmail form .error { box-shadow: 0 0 10px #f00; } /*闋佸熬璩囪▕*/ footer .contactArea { background-color: #808080; } footer .contactArea .wrap { max-width: 1500px; height: 100px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: space-between; } footer .contactArea .rightBox { display: flex; } footer .contactArea .rightBox .item { padding: 0 15px; position: relative; } footer .contactArea .rightBox .item .company { display: flex; align-items: center; min-height: 44px; color: #FFF; } footer .contactArea .rightBox .item a:hover .iconBox .path { display: block; opacity: 1; } footer .contactArea .rightBox .item a:hover .iconBox circle { animation: progressCircleAnimation 4s infinite linear; } footer .contactArea .rightBox .item a:hover span { text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); } footer .contactArea .rightBox .item span + span { padding-left: 5px; } footer .contactArea .rightBox .item a{ margin-left:5px; line-height:1.5; color:#FFF; } footer .contactArea .rightBox .item a:hover{ text-decoration:underline; } footer .contactArea .rightBox .item .iconBox { display: inline-block; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; margin-right: 8px; } footer .contactArea .rightBox .item .iconBox .path { display: block; width: 44px; height: 44px; fill: none; transition: all .1s ease-in-out; stroke-dashoffset: 0; stroke-dasharray: 153.86; stroke: #fff; stroke-width: 1px; transform: rotate(-90deg); position: absolute; top: -1px; left: -1px; opacity: 0; } footer .contactArea .rightBox .item .iconBox img { display: block; width: 20px; height: 20px; filter: brightness(0) invert(1); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } footer .contactArea .rightBox .item span { display: inline-block; font-size: 18px; line-height: 23px; letter-spacing: 0; color: #fff; font-weight: 400; } @media (max-width: 1540px) { footer .contactArea .wrap { padding: 0 20px; } } @media (max-width: 1180px) { footer .contactArea .wrap { padding: 30px 0 15px; height: auto; } footer .contactArea .titleBox { width: 100%; text-align: center; } footer .contactArea .titleBox::before { width: 16px; left: calc(50% - 8px); } footer .contactArea .rightBox { width: 100%; justify-content: center; flex-wrap: wrap; } footer .contactArea .rightBox .item { padding: 15px; } footer .contactArea .rightBox .item .iconBox { margin-right: 5px; } } @media (max-width: 840px) { footer .contactArea .rightBox { width: 100%; } footer .contactArea .rightBox .item { padding: 10px; } footer .contactArea .rightBox .item a { min-height: 25px; } footer .contactArea .rightBox .item span { font-size: 16px; line-height: 23px; } } footer .footerArea { background-color: #1a1a1a; padding-top: 60px; } footer .footerArea .wrap { max-width: 1500px; } footer .footerArea .footerMenuBox { border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; padding-bottom: 20px; } footer .footerArea .footerMenuBox .menuItem { flex-grow: 1; max-width: 250px; min-height: 230px; } footer .footerArea .footerMenuBox .menuItem .title a { display: inline-block; font-size: 17px; line-height: 23px; letter-spacing: 0; font-weight: 600; color: #fff; padding-bottom: 6px; } footer .footerArea .footerMenuBox .menuItem .title a:hover { color: #ff0000; } footer .footerArea .footerMenuBox .menuItem .listLink a { display: block; font-size: 15px; line-height: 25px; color: #8c8c8c; font-weight: 400; letter-spacing: 0; } footer .footerArea .footerMenuBox .menuItem .listLink a:hover { color: #ff0000; } @media (max-width: 1180px) { footer .footerArea .footerMenuBox { flex-wrap: wrap; align-items: flex-start; border-bottom: none; } footer .footerArea .footerMenuBox .menuItem { min-height: auto; max-width: 100%; width: 100%; flex-grow: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } footer .footerArea .footerMenuBox .menuItem.dropDown { width: calc(20% - 10px); margin-bottom: 20px; margin-right: 10px; height: auto; padding-bottom: 0px; } footer .footerArea .footerMenuBox .menuItem.dropDown .title { height: 65px; } footer .footerArea .footerMenuBox .menuItem.dropDown .title a { padding: 0; display: block; line-height: 65px; width: 100%; height: 100%; position: relative; } footer .footerArea .footerMenuBox .menuItem.dropDown .title a::before { content: ""; width: 11px; height: 1px; background-color: #fff; display: block; position: absolute; top: 32px; right: 0; } footer .footerArea .footerMenuBox .menuItem.dropDown .title a::after { content: ""; width: 1px; height: 11px; background-color: #fff; display: block; position: absolute; top: 27px; right: 5px; } footer .footerArea .footerMenuBox .menuItem.dropDown .listLink { display: none; padding-bottom: 20px; } footer .footerArea .footerMenuBox .menuItem.dropDown.open .title a { color: #ff0000; } footer .footerArea .footerMenuBox .menuItem.dropDown.open .title a::before { background-color: #ff0000; } footer .footerArea .footerMenuBox .menuItem.dropDown.open .title a::after { opacity: 0; } } @media (max-width: 960px) { footer .footerArea .footerMenuBox .menuItem.dropDown { width: calc(33.33% - 10px); flex-wrap: 1; } } @media (max-width: 640px) { footer .footerArea .footerMenuBox .menuItem { margin-top: 20px; } footer .footerArea .footerMenuBox .menuItem.dropDown { width: 100%; margin: 0; } } footer .footerArea .downLogoArea { display: flex; align-content: center; align-items: center; width: 100%; height: 187px; } footer .footerArea .downLogoArea .left { display: flex; width: 545px; position: relative; } footer .footerArea .downLogoArea .left::before { content: ""; width: 1px; height: 65px; background-color: rgba(255, 255, 255, 0.2); position: absolute; top: calc(50% - 32.5px); right: 0; } footer .footerArea .downLogoArea .left .logoBox { width: 210px; } footer .footerArea .downLogoArea .left .logoBox img { filter: brightness(0) invert(1) opacity(0.8); width: 180px; display: block; } footer .footerArea .downLogoArea .left .logoBox:hover img { filter: brightness(0) invert(1) opacity(1); transform: scale(1.02); } footer .footerArea .downLogoArea .left .link { display: inline-block; font-size: 15px; line-height: 23px; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, 0.5); padding-right: 20px; padding-top: 10px; position: relative; } footer .footerArea .downLogoArea .left .link::before { content: ""; width: 1px; height: 10px; display: block; background-color: rgba(255, 255, 255, 0.2); position: absolute; top: 18px; right: 10px; } footer .footerArea .downLogoArea .left .link:last-child { padding-right: 0; } footer .footerArea .downLogoArea .left .link:last-child::before { display: none; } footer .footerArea .downLogoArea .left .link:hover { color: #ff0000; } footer .footerArea .downLogoArea .left .snsBox { padding-left: 60px; } footer .footerArea .downLogoArea .left .snsBox .text { font-size: 15px; line-height: 25px; color: #fff; font-weight: 400; letter-spacing: 0; padding-bottom: 14px; } footer .footerArea .downLogoArea .left .snsBox .socialList { display: flex; align-items: center; margin-left: -7.5px; } footer .footerArea .downLogoArea .left .snsBox .socialList li { margin: 0 7.5px; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(238, 238, 238, 0.2); } footer .footerArea .downLogoArea .left .snsBox .socialList li a { color: #fff; display: block; font-size: 18px; line-height: 32px; text-align: center; } footer .footerArea .downLogoArea .left .snsBox .socialList li a svg { width: 18px; height: 13px; display: inline-block; fill: #fff; } footer .footerArea .downLogoArea .left .snsBox .socialList li a i { display: inline-block; font-size: 16px; line-height: 28px; } footer .footerArea .downLogoArea .left .snsBox .socialList li a .fa-linkedin { display: block; font-size: 12px; line-height: 32px; } footer .footerArea .downLogoArea .left .snsBox .socialList li:hover:nth-child(1) { background-color: #395196; background-color: #ff0000; } footer .footerArea .downLogoArea .left .snsBox .socialList li:hover:nth-child(2) { background-color: #ca151d; background-color: #ff0000; } footer .footerArea .downLogoArea .left .snsBox .socialList li:hover:nth-child(3) { background-color: #29b6eb; background-color: #ff0000; } footer .footerArea .downLogoArea .left .snsBox .socialList li:hover:nth-child(4) { background-color: #1760ad; background-color: #ff0000; } footer .footerArea .downLogoArea .right { width: calc(100% - 545px); display: flex; justify-content: flex-end; align-items: center; align-content: center; } @media (min-width: 841px) { footer .footerArea .downLogoArea .right .Txt { padding-right: 10px; text-align: right; } } footer .footerArea .downLogoArea .right .Txt .title { font-size: 21px; letter-spacing: 0; color: #fff; font-weight: 700; } footer .footerArea .downLogoArea .right .Txt .subtitle { font-size: 13px; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, 0.5); } footer .footerArea .downLogoArea .right .mailBox input { display: inline-block; width: 406px; height: 48px; padding: 0 20px; margin-right: 5px; background-color: rgba(255, 255, 255, 0.1); color: #fff; } footer .footerArea .downLogoArea .right .mailBox input::placeholder { color: #8c8c8c; font-size: 15px; line-height: 48px; letter-spacing: 0.1px; font-weight: 400; } footer .footerArea .downLogoArea .right .mailBox .crossBtn { position: relative; top: -1px; } @media (max-width: 1480px) { footer .footerArea .downLogoArea .left { width: 400px; } footer .footerArea .downLogoArea .left .snsBox { padding-left: 20px; } footer .footerArea .downLogoArea .right { width: calc(100% - 400px); } footer .footerArea .downLogoArea .right .mailBox input { width: 300px; } } @media (max-width: 1180px) { footer .footerArea .downLogoArea { flex-wrap: wrap; height: auto; } footer .footerArea .downLogoArea .left { width: 100%; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } footer .footerArea .downLogoArea .left::before { display: none; } footer .footerArea .downLogoArea .left .snsBox { padding-left: 40px; } footer .footerArea .downLogoArea .right { width: 100%; justify-content: flex-start; padding: 30px 0 60px; } footer .footerArea .downLogoArea .right .mailBox { flex-grow: 1; } footer .footerArea .downLogoArea .right .mailBox input { width: calc(100% - 196px - 10px); } } @media (max-width: 840px) { footer .footerArea .downLogoArea .right { flex-wrap: wrap; } footer .footerArea .downLogoArea .right .Txt { width: 100%; padding-bottom: 20px; } footer .footerArea .downLogoArea .right .mailBox { flex-grow: 0; width: 100%; } footer .footerArea .downLogoArea .right .mailBox input { width: calc(100% - 196px - 10px); } } @media (max-width: 480px) { footer .footerArea .downLogoArea .left { flex-wrap: wrap; } footer .footerArea .downLogoArea .left .logoBox { width: 100%; } footer .footerArea .downLogoArea .left .snsBox { padding-top: 25px; padding-left: 0; width: 100%; display: flex; align-items: center; } footer .footerArea .downLogoArea .left .snsBox .text { padding-bottom: 0; padding-right: 20px; } footer .footerArea .downLogoArea .left .snsBox .socialList { margin-left: 0; } footer .footerArea .downLogoArea .right .mailBox { display: flex; justify-content: space-between; align-items: center; } footer .footerArea .downLogoArea .right .mailBox input { margin-right: 3px; } footer .footerArea .downLogoArea .right .mailBox .crossBtn { top: 0; } } @media (max-width: 440px) { footer .footerArea .downLogoArea .right { padding: 30px 0 55px; } footer .footerArea .downLogoArea .right .mailBox { flex-wrap: wrap; } footer .footerArea .downLogoArea .right .mailBox input { width: 100%; } footer .footerArea .downLogoArea .right .mailBox .crossBtn { margin-top: 10px; } } @media (max-width: 1540px) { footer .footerArea .wrap { padding: 0 20px; } } @media (max-width: 1180px) { footer .footerArea { padding-top: 30px; } } footer .copyrightArea { width: 100%; background-color: #0d0d0d; height: 48px; padding: 12.5px 0; } footer .copyrightArea .wrap { max-width: 1500px; display: flex; justify-content: space-between; } footer .copyrightArea .footerInfo { font-size: 15px; line-height: 23px; letter-spacing: 0; font-weight: 400; color: rgba(255, 255, 255, 0.2); } footer .copyrightArea .footerInfo a { color: rgba(255, 255, 255, 0.2); display: inline-block; } footer .copyrightArea .footerInfo a:hover { color: #fff; } footer .copyrightArea .goTop { font-size: 15px; line-height: 23px; letter-spacing: 0; color: rgba(255, 255, 255, 0.2); font-weight: 400; } footer .copyrightArea .goTop i { font-size: 22px; line-height: 23px; font-weight: 100; margin-left: 10px; vertical-align: bottom; } footer .copyrightArea .goTop:hover { color: #fff; } @media (max-width: 640px) { footer .copyrightArea { height: auto; } footer .copyrightArea .wrap { flex-wrap: wrap; } footer .copyrightArea .wrap .footerInfo { width: 100%; text-align: center; } footer .copyrightArea .wrap .goTop { width: 100%; text-align: center; padding-top: 5px; } } .fixedArea { position: fixed; bottom: 112px; right: 14px; z-index: 50; opacity: 0; pointer-events: none; transform: scale(0.6); } .fixedArea.show { opacity: 1; pointer-events: initial; transform: scale(1); } .fixedArea a { display: flex; justify-content: space-between; align-content: center; align-items: center; width: 148px; height: 53px; border-radius: 26.5px; background-color: #ff0000; padding-left: 13px; padding-right: 3px; margin-bottom: 16px; position: relative; } .fixedArea a:hover { transform: translate3d(-3px, -3px, 0px); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } .fixedArea .text { font-size: 15px; line-height: 53px; letter-spacing: 0; font-weight: 600; color: #fff; } .fixedArea .num { width: 18px; height: 18px; border-radius: 50%; background-color: #fff; font-size: 12px; line-height: 18px; letter-spacing: 0; font-weight: 600; color: #ff0000; text-align: center; } .fixedArea .iconBox { width: 47px; height: 47px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); position: relative; } .fixedArea img { display: block; width: 22px; height: 22px; filter: grayscale(1) brightness(20); position: absolute; top: calc(50% - 11px); left: calc(50% - 11px); } @media (max-width: 1180px) { .fixedArea { display: none; } } .privacyArea { width: 100%; background-color: rgba(0, 0, 0, 0.85); box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); padding: 40px 0 25px; position: fixed; bottom: 0; left: 0; z-index: 50; transition: all 0.6s 0.1s; } .privacyArea.check { opacity: 0; transform: translateY(100%); } .privacyArea .wrap { align-items: flex-start; display: flex; justify-content: center; } .privacyArea .text { color: #fff; line-height: 1.5; letter-spacing: 0.5px; } .privacyArea .text a { color: #ff0000; display: inline-block; margin-top: 8px; text-decoration: underline; } .privacyArea .text a:hover { color: #ff0000; } .privacyArea .btn { margin-left: 25px; padding-top: 0; } .privacyArea .btn a { color: #fff; display: inline-block; padding: 15px 35px; } @media (max-width: 768px) { .privacyArea .wrap { align-items: center; flex-direction: column; text-align: center; } .privacyArea .text { width: 100%; } .privacyArea .btn { margin-top: 25px; margin-left: 0; } } /*鎵嬫蹇嵎閬稿柈*/ .fixedQuickLink { position: fixed; left: 0; bottom: 0; z-index: 50; width: 100%; background-color: #000; padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 1181px) { .fixedQuickLink { display: none; } } .fixedQuickLink ul { display: flex; } .fixedQuickLink li { flex: 1; height: 72px; position: relative; display: flex; align-items: center; justify-content: center; } .fixedQuickLink li:not(:last-child)::before { content: ""; width: 1px; height: 40px; background-color: rgba(255, 255, 255, 0.5); display: block; position: absolute; top: 16px; right: 0; } .fixedQuickLink .inquiryBox { height: 42px; } .fixedQuickLink .inquiryBox .inquiryToggle { width: 100%; height: 100%; display: flex; align-items: center; position: relative; } .fixedQuickLink .inquiryBox .inquiryToggle img { display: block; width: 24px; height: 22px; filter: grayscale(1) brightness(20); } .fixedQuickLink .inquiryBox .inquiryToggle .numBox { width: 16px; height: 16px; border-radius: 50%; background-color: #ff0000; color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-align: center; position: absolute; top: calc(50% - 18px); left: 14px; } .fixedQuickLink .inquiryBox .inquiryToggle span { display: inline-block; padding-left: 10px; font-size: 16px; line-height: 26px; letter-spacing: 0; color: #fff; font-weight: 600; } .fixedQuickLink .inquiryBox:hover { background-color: #000; } .fixedQuickLink .selectBox a, .fixedQuickLink .compareBox a { display: flex; justify-content: center; align-content: center; align-items: center; position: relative; } .fixedQuickLink .selectBox .text, .fixedQuickLink .compareBox .text { font-size: 15px; line-height: 53px; letter-spacing: 0; font-weight: 600; color: #fff; } .fixedQuickLink .selectBox .num, .fixedQuickLink .compareBox .num { width: 18px; height: 18px; border-radius: 50%; background-color: #ff0000; font-size: 12px; line-height: 18px; letter-spacing: 0; font-weight: 600; color: #fff; text-align: center; position: absolute; top: calc(50% - 20px); left: 30px; } .fixedQuickLink .selectBox .iconBox, .fixedQuickLink .compareBox .iconBox { width: 40px; height: 40px; position: relative; text-align: center; } .fixedQuickLink .selectBox img, .fixedQuickLink .compareBox img { display: inline-block; width: 22px; height: 40px; filter: grayscale(1) brightness(20); } .fixedQuickLink .selectBox img { width: 20px; } .fixedQuickLink .compareBox .iconBox { width: 46px; } /* 鍏辩敤 */ .crossBtn { display: inline-block; width: 196px; height: 48px; } .crossBtn a { background-color: #ff0000; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding-left: 16px; padding-right: 14px; position: relative; } .crossBtn a:hover { background-color: #000; } .crossBtn a:hover .crossBox::after { background-color: #000; } .crossBtn.black a { background-color: #000; } .crossBtn.black a:hover { background-color: #ff0000; } .crossBtn.black a:hover .crossBox::after { background-color: #ff0000; } .crossBtn.black .crossBox::after { background-color: #000; } .crossBtn .text { display: inline-block; font-size: 13px; line-height: 20px; letter-spacing: 1px; color: #fff; overflow-anchor: 600; } .crossBtn .crossBox { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); position: relative; } .crossBtn .crossBox::after { content: ""; width: 3px; height: 3px; background-color: #ff0000; position: absolute; top: calc(50% - 1.5px); left: calc(50% - 1.5px); z-index: 2; } .crossBtn .crossBox .cross { width: 100%; height: 100%; position: relative; } .crossBtn .crossBox .cross::before { content: ""; width: 31px; height: 1px; display: block; background-color: #fff; position: absolute; top: calc(50% - 0.5px); left: calc(50% - 15.5px); } .crossBtn .crossBox .cross::after { content: ""; width: 1px; height: 31px; display: block; background-color: #fff; position: absolute; top: calc(50% - 15.5px); left: calc(50% - 0.5px); } .normalBtn { display: inline-block; width: 100%; max-width: 310px; height: 40px; font-size: 13px; line-height: 40px; letter-spacing: 1px; background-color: #ff0000; color: #fff; text-align: center; position: relative; } .normalBtn:hover { color: #fff; background-color: #000; } .titleStyle { margin-bottom: 35px; } .titleStyle .title { font-size: 45px; line-height: 53px; letter-spacing: 0; font-weight: 700; color: #ff0000; position: relative; padding-bottom: 15px; text-align: center; } .titleStyle .title.sSize { font-size: 24px; line-height: 28px; } .titleStyle .title.sSize a { display: inline-block; color: #ff0000; } .titleStyle .title::before { content: ""; width: 14px; height: 2px; display: block; background-color: #ff0000; position: absolute; bottom: 0; left: calc(50% - 13px); } .titleStyle .title::after { content: ""; width: 14px; height: 2px; display: block; background-color: #ff0000; position: absolute; bottom: 0; right: calc(50% - 13px); } .titleStyle.taleft .title { text-align: left; } .titleStyle.taleft .title::before { left: 0; } .titleStyle.taleft .title::after { left: 14px; right: 0; } .titleStyle.black_red.firstLetter::first-letter { color: #000; } .titleStyle.black_red.firstLetter a::first-letter { color: #000; } .titleStyle.black_red.firstLetter a:hover { color: #000; } .titleStyle.black_red .firstWord { color: #000; } .titleStyle.white_red.firstLetter::first-letter { color: #fff; } .titleStyle.white_red .firstWord { color: #fff; } .titleStyle.black .title { color: #000; } .titleStyle.redLine .title::before { width: 60px; left: calc(50% - 30px); } .titleStyle.redLine .title::after { display: none; } .titleStyle2 { font-size: 28px; line-height: 30px; letter-spacing: 0; color: #fff; font-weight: 700; position: relative; padding-bottom: 10px; } .titleStyle2::before { content: ""; width: 22px; height: 1px; display: block; background-color: #fff; position: absolute; bottom: 0; left: 0; } .titleStyle_redLine { font-size: 28PX; line-height: 30px; letter-spacing: 0; font-weight: 800; color: #ff0000; padding-bottom: 12px; margin-bottom: 12px; position: relative; } .titleStyle_redLine::before { content: ""; width: 22px; height: 1px; display: block; background-color: #ff0000; position: absolute; bottom: 0; left: 0; } .titleStyle_redLine.black { color: #000; } @media (max-width: 640px) { .titleStyle_redLine { font-size: 26px; line-height: 28px; } } .menuTitle { width: 100%; font-size: 20px; line-height: 23px; letter-spacing: 0; font-weight: 700; padding-bottom: 15px; margin-bottom: 15px; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .menuTitle::before { content: ""; width: 88px; height: 1px; display: block; background-color: #ff0000; position: absolute; bottom: -1px; left: 0; } .menuTitle.hasLink a { display: inline-block; } .menuTitle.hasLink:hover::before { width: 100%; } .menuTitle.hasLink:hover a { color: #ff0000; } .listTitleLine { width: 100%; padding-bottom: 15px; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.2); } .listTitleLine .subtitle { font-size: 15px; line-height: 20px; letter-spacing: 0; color: #888; font-weight: 400; padding-top: 5px; padding-bottom: 3px; } .listTitleLine .title { font-size: 24px; line-height: 26px; letter-spacing: 0; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .listTitleLine .title a { display: block; } .listTitleLine::before { content: ""; width: 88px; height: 1px; display: block; background-color: #ff0000; position: absolute; top: -1px; left: 0; } .listTitleLine:hover::before { width: 100%; } .listTitleLine:hover a { color: #ff0000; } .subtitleStyle { font-size: 18px; line-height: 22px; letter-spacing: 0; font-weight: 600; } .expStyle { font-size: 15px; font-weight: 400; line-height: 22px; letter-spacing: 0; color: #404040; font-family: 'Open Sans', 'Microsoft JhengHei', sans-serif; } .expStyle.white { color: #fff; } .expStyle .subtitle { font-size: 20px; font-weight: 600; line-height: 24px; color: #000; padding-bottom: 5px; font-family: 'Source Sans Pro', 'Microsoft JhengHei', sans-serif; } .slick-dots-bottom { width: 100%; margin: 0; position: absolute; bottom: 65px; left: 0; display: flex; flex-wrap: wrap; justify-content: center; } .slick-dots-bottom li { width: 10px; height: 10px; margin: 5px 15px; } .slick-dots-bottom li button { width: 100%; height: 100%; padding: 0; position: relative; color: transparent; cursor: pointer; } .slick-dots-bottom li button::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #e5e5e5; opacity: 1; } .slick-dots-bottom li button::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 0, 0, 0.2); position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); opacity: 0; } .slick-dots-bottom li.slick-active button::before { background-color: #ff0000; opacity: 1; } .slick-dots-bottom li.slick-active button::after { opacity: 1; } @media (max-width: 400px) { .slick-dots-bottom li { margin: 10px; } } .slick-dots-vertical { width: 20px; height: 100%; position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; } .slick-dots-vertical li { width: 10px; height: 10px; margin: 15px 5px; } .slick-dots-vertical li button { width: 100%; height: 100%; padding: 0; position: relative; color: transparent; cursor: pointer; } .slick-dots-vertical li button::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #e5e5e5; opacity: 1; } .slick-dots-vertical li button::after { content: ""; width: 20px; height: 20px; display: block; border-radius: 50%; border: 1px solid rgba(255, 0, 0, 0.2); position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); opacity: 0; } .slick-dots-vertical li.slick-active button::before { background-color: #ff0000; opacity: 1; } .slick-dots-vertical li.slick-active button::after { opacity: 1; } .decoBorder { position: absolute; top: 0px; left: 0px; width: 100%; height: 52px; box-sizing: border-box; display: block; pointer-events: none; } .decoBorder::before { content: ""; box-sizing: border-box; width: 52px; height: 52px; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid transparent; border-right: 1px solid transparent; position: absolute; top: 0px; left: 0px; } .decoBorder::after { content: ""; box-sizing: border-box; width: 52px; height: 52px; border-top: 1px solid #fff; border-left: 1px solid transparent; border-bottom: 1px solid transparent; border-right: 1px solid #fff; position: absolute; top: 0px; left: auto; right: 0px; } .decoBorder.bottom { top: auto; bottom: 0; } .decoBorder.bottom::before { border-top: 1px solid transparent; border-bottom: 1px solid #fff; } .decoBorder.bottom::after { border-top: 1px solid transparent; border-bottom: 1px solid #fff; } .decoBorder.red::before { border-top: 1px solid #ff0000; border-left: 1px solid #ff0000; } .decoBorder.red::after { border-top: 1px solid #ff0000; border-right: 1px solid #ff0000; } .decoBorder.red.bottom::before { border-top: 1px solid transparent; border-bottom: 1px solid #ff0000; } .decoBorder.red.bottom::after { border-top: 1px solid transparent; border-bottom: 1px solid #ff0000; } .plus { display: block; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background-color: #b5b5b5; position: relative; } .plus::after { content: ""; width: 1px; height: 1px; display: block; background-color: #b5b5b5; position: absolute; top: calc(50% - 0.5px); left: calc(50% - 0.5px); } .plus .cross { display: block; width: 11px; height: 11px; position: absolute; top: calc(50% - 5.5px); left: calc(50% - 5.5px); } .plus .cross::before { content: ""; width: 100%; height: 1px; background-color: #fff; display: block; position: absolute; top: calc(50% - 0.5px); left: 0; } .plus .cross::after { content: ""; width: 1px; height: 100%; background-color: #fff; display: block; position: absolute; top: 0; left: calc(50% - 0.5px); } .contentBox.grayBgStyle { padding-top: 100px; padding-bottom: 70px; background-color: #eeeeee; position: relative; } .contentBox.grayBgStyle::before { content: ""; width: 130px; height: 190px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; top: 125px; right: 0; pointer-events: none; } .contentBox.grayBgStyle::after { content: ""; width: 150px; height: 365px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; top: auto; bottom: 118px; left: 0; pointer-events: none; } @media (max-width: 1180px) { .contentBox.grayBgStyle::before, .contentBox.grayBgStyle::after { background-size: 20%; } } .videoBtn.deco { pointer-events: none; position: absolute; top: 50%; left: 50%; margin-left: -65px; margin-top: -65px; width: 130px; height: 130px; z-index: 2; } .videoBtn.deco:before { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -11px; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #ff0000; } .videoBtn.deco .videoCircle { position: absolute; top: 10px; left: 10px; display: inline-block; width: 110px; height: 110px; border: 1px solid #fff; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); box-sizing: border-box; transform: rotate(-90deg); } .videoBtn.deco .videoCircle:before { content: ""; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 1px dashed #fff; border-radius: 50%; box-sizing: border-box; animation: circleAnti3 1s linear infinite; } .videoBtn.deco .videoCircle svg { position: absolute; top: -2px; left: -2px; width: calc(100% + 6px); height: calc(100% + 6px); } .videoBtn.deco .videoCircle circle { stroke-width: 2; stroke: #f00; fill: none; stroke-dashoffset: 345.4; stroke-dasharray: 345.4; animation: circleAnti 5s linear infinite; } .videoBtn.deco .stroke { animation: circleAnti2 1s linear infinite; width: 100%; height: 100%; } .videoBtn.deco .stroke svg { width: 100%; height: 100%; } .videoBtn.deco .stroke circle { stroke-dasharray: 2, 4; stroke-width: 1; stroke: #fff; fill: none; transition: all 0s linear; } .mainArea.inquirySuccess { padding: 100px 0; } .mainArea.inquirySuccess .textBox { padding: 20px 0; text-align: center; } .mainArea.inquirySuccess .textBox p { font-size: 20px; line-height: 1.5; letter-spacing: 0; font-weight: 600; } .mainArea.inquirySuccess .goHomeBox { padding: 20px 0; text-align: center; } /* 鍏辩敤END */ /*share*/ .social { display: inline-block; vertical-align: middle; width: 50%; margin-right: -4px; } @media (max-width: 480px) { .social { width: 100%; } } .social a { display: inline-block; width: 30px; height: 30px; line-height: 30px; margin: 0 5px; font-size: 19px; color: #929292; text-align: center; } .social a:hover { opacity: 0.8; } .translateIbest { display: inline-block; vertical-align: middle; } .translateIbest .design { /*缍查爜瑷▓鈥ф剾璨濇柉*/ display: block; line-height: 22px; font-size: 9pt; color: #000; } .translateIbest .design a { /*缍查爜瑷▓鈥ф剾璨濇柉*/ color: #000; text-decoration: none; } .translateIbest .design a:hover { text-decoration: underline; } /*********鍏ч爜**********/ .mainArea { padding: 0px 0 80px; } .mainArea > .contentBox { padding-top: 105px; } @media (max-width: 1180px) { .mainArea { padding-bottom: 50px; } .mainArea > .contentBox { padding-top: 80px; } } @media (max-width: 640px) { .mainArea { padding-bottom: 40px; } .mainArea > .contentBox { padding-top: 60px; } } .bread .wrap { display: flex; flex-flow: wrap; align-items: center; align-content: center; justify-content: flex-end; height: 58px; } .bread a, .bread span { display: inline-block; font-size: 15px; line-height: 20px; color: #757575; font-weight: 400; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bread a:hover { color: #ff0000; } .bread .slash { padding: 0 5px; } @media (max-width: 1180px) { .bread a, .bread span { font-size: 14px; line-height: 18px; text-align: right; } } @media (max-width: 640px) { .bread { display: none; } } .mainArea .contentBox { clear: both; } /*鏂囩珷妯欓*/ .articleTitle { clear: both; margin-bottom: 25px; padding: 10px; border-bottom: 1px dashed #d6d6d6; font-weight: 400; font-size: 20px; color: #061540; } /*鍋撮倞妯欓瀛?/ .sectionTitle { margin-bottom: 20px; padding: 5px; border-bottom: 1px solid #d6d6d6; font-weight: 400; font-size: 15px; color: #061540; } .sectionTitle strong { display: block; position: relative; font-weight: 400; } .sectionTitle a { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.breakpoint > tbody > tr > td.expand { cursor: pointer; background: url("../images/plus.png") no-repeat 5px center; padding-left: 40px; } @keyframes aniSlideLeft { 0% { transform: translateX(10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /*椤炲垾*/ .classRowBox { position: relative; z-index: 3; margin-bottom: 30px; padding: 20px 0; } .classRowBox > ul { display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 1023px) { .classRowBox > ul { display: none; } } .classRowBox > ul li { margin: 5px 16px; } .classRowBox > ul li.longBtn a { min-width: 196px; } .classRowBox > ul a { display: block; padding: 10px 15px; font-size: 15px; line-height: 28px; color: #262626; font-weight: 600; background-color: #e1e1e1; letter-spacing: 0; text-align: center; text-transform: uppercase; } .classRowBox > ul a.current, .classRowBox > ul a:hover { color: #fff; background-color: #ff0000; } .classColumnBox { position: relative; z-index: 3; } @media (max-width: 1023px) { .classColumnBox > ul { display: none; } } .classColumnBox > ul > li > a { padding-top: 10px; padding-bottom: 10px; color: #010101; } .classColumnBox > ul ul { display: none; margin-bottom: 30px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .classColumnBox > ul ul li + li { border-top: 1px solid #ccc; } .classColumnBox > ul a { position: relative; display: block; padding-top: 5px; padding-bottom: 5px; font-size: 14px; color: #777; } .classColumnBox > ul a.current, .classColumnBox > ul a:hover { color: #ff0000; } .classColumnBox > ul .linkHasItems.open + ul { display: block; } .classColumnBox > ul .linkHasItems.open + ul > li { animation: .5s aniSlideLeft both ease-out .3s; } .mClassLink { position: relative; z-index: 3; } @media (min-width: 1024px) { .mClassLink { display: none; } } .mClassLink.open > ul { display: block; } .mClassLink .main { position: relative; display: block; font-size: 15px; line-height: 20px; padding: 14px 35px; color: #fff; font-weight: 600; letter-spacing: 1px; cursor: pointer; background-color: #ff0000; text-align: center; text-transform: uppercase; } .mClassLink .main::before { content: '\f107'; position: absolute; right: 15px; top: 50%; z-index: 1; margin-top: -6px; line-height: 1; font-size: 15px; color: #fff; font-family: FontAwesome; } .mClassLink > ul { position: absolute; left: 0; top: calc(100% - 1px); z-index: 1; display: none; width: 100%; background-color: #e1e1e1; padding: 0 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-transform: uppercase; } .mClassLink > ul > li + li { border-top: 1px solid rgba(0, 0, 0, 0.2); } .mClassLink > ul > li.current > a { color: #ff0000; } .mClassLink > ul a { text-align: center; position: relative; z-index: 1; display: block; padding: 24px 20px; color: #262626; font-size: 15px; line-height: 20px; font-weight: 600; } .mClassLink > ul a:hover { color: #ff0000; } .mClassLink ul { display: none; } .mClassLink .linkHasItems { position: relative; padding-right: 40px; } .mClassLink .linkHasItems::after { content: '\f107'; position: absolute; top: 50%; right: 17px; z-index: 1; line-height: 1; margin-top: -7px; font-family: FontAwesome; } .mClassLink .linkHasItems.open::after { transform: rotateX(180deg); } .mClassLink .linkHasItems.open + ul { display: block; } .mClassLink .linkHasItems + ul { background-color: #efefef; } .mClassLink .linkHasItems + ul a { padding: 10px 5px 10px 30px; background-color: #efefef; } .mClassLink .linkHasItems + ul a.current { color: #ff0000; } .pageBox { align-items: center; padding: 20px 0 0; display: flex; flex-wrap: wrap; position: relative; z-index: 2; } .pageBox a { border: 1px solid #c2c2c2; color: #666; display: block; font-size: 15px; } .pageBox a.prevBtn::before, .pageBox a.nextBtn::before { content: ''; width: 8px; height: 8px; border-left: 1px solid #404040; border-bottom: 1px solid #404040; display: block; position: absolute; } .pageBox a.prevBtn::before { transform: rotate(45deg); } .pageBox a.nextBtn::before { transform: rotate(-135deg); } .pageBox a:hover { background-color: #ff0000; color: #fff; } .pageBox a:hover.prevBtn::before, .pageBox a:hover.nextBtn::before { border-left: 1px solid #fff; border-bottom: 1px solid #fff; } .pageBox.number { justify-content: center; } .pageBox.number.oval a { width: 50px; color: #404040; background-color: #c9c9c9; display: block; font-size: 15px; width: 46px; height: 46px; border-radius: 50%; } .pageBox.number a { border: none; font-weight: 600; line-height: 46px; margin: 5px; position: relative; text-align: center; color: #404040; background-color: #c9c9c9; display: block; font-size: 15px; width: 46px; height: 46px; border-radius: 50%; } .pageBox.number a.prevBtn::before, .pageBox.number a.nextBtn::before { margin: auto; top: 0; bottom: 0; } .pageBox.number a.prevBtn::before { left: 5px; right: 0; } .pageBox.number a.nextBtn::before { left: 0; right: 5px; } .pageBox.number a.firstBtn::before, .pageBox.number a.firstBtn::after, .pageBox.number a.lastBtn::before, .pageBox.number a.lastBtn::after { content: ''; width: 10px; height: 10px; border-left: 1px solid #404040; border-bottom: 1px solid #404040; display: block; margin: auto; position: absolute; top: 0; bottom: 0; } .pageBox.number a.firstBtn::before, .pageBox.number a.firstBtn::after { transform: rotate(45deg); } .pageBox.number a.firstBtn::before { left: -2px; right: 0; } .pageBox.number a.firstBtn::after { left: 12px; right: 0; } .pageBox.number a.lastBtn::before, .pageBox.number a.lastBtn::after { transform: rotate(-135deg); } .pageBox.number a.lastBtn::before { left: 0; right: -2px; } .pageBox.number a.lastBtn::after { left: 0; right: 12px; } .pageBox.number a.current { background-color: #ff0000; color: #fff; } .pageBox.number a:hover { background-color: #ff0000; color: #fff; } .pageBox.number a:hover.firstBtn::before, .pageBox.number a:hover.firstBtn::after, .pageBox.number a:hover.lastBtn::before, .pageBox.number a:hover.lastBtn::after { border-left: 1px solid #fff; border-bottom: 1px solid #fff; } .pageBox.prevnext { justify-content: space-between; } .pageBox.prevnext a { height: 45px; font-weight: 300; line-height: 45px; padding: 0 20px; position: relative; border: none; background-color: transparent; } .pageBox.prevnext a span { padding: 0 10px; font-weight: 400; display: inline-block; font-size: 18px; line-height: 45px; } .pageBox.prevnext a.prevBtn::before, .pageBox.prevnext a.nextBtn::before { top: calc(50% - 5px); } .pageBox.prevnext a.prevBtn { text-align: right; margin-right: 120px; } .pageBox.prevnext a.prevBtn::before { left: 15px; } .pageBox.prevnext a.nextBtn { margin-left: auto; text-align: left; } .pageBox.prevnext a.nextBtn::before { right: 15px; } .pageBox.prevnext a:hover::before { border-left: 1px solid #ff0000; border-bottom: 1px solid #ff0000; } .pageBox.prevnext a:hover span { color: #ff0000; } .pageBox.prevnext.circle a { width: 45px; padding: 0; } .pageBox.prevnext.circle a span { display: none; } .pageBox.prevnext.circle a.prevBtn::before { left: calc(50% - 3px); } .pageBox.prevnext.circle a.nextBtn::before { right: calc(50% - 3px); } .pageBox.circle a { border-radius: 50%; overflow: hidden; } .pageBox.oval a { border-radius: 30px; overflow: hidden; } /*妯欑堡*/ .tagBox { padding: 20px 0; } .tagBox b { display: inline-block; margin-right: 10px; } .tagBox ul { display: inline-block; } .tagBox li { display: inline-block; margin-bottom: 5px; } .tagBox a { position: relative; display: block; margin: 0 3px; padding: 5px 10px; border: 1px solid #ff0000; font-size: 13px; color: #ff0000; } .tagBox a:hover { color: #fff; background-color: #ff0000; } .tagBox a.current { color: #fff; background-color: #ff0000; } .tagBox a.current:before { content: "\f00d"; margin-right: 5px; font-family: FontAwesome; font-size: 12px; } /*闋佺堡 (soltion 璺 product ins鐢ㄥ埌)*/ .tab { margin-top: 40px; } .tab a { display: block; float: left; padding: 12px 10px; font-size: 15px; color: #1c1c1c; } /*闋佺堡鍏у*/ .tabContent { margin-top: -1px; padding: 20px 0px; border-top: 1px solid #d6d6d6; } .tabContent > div { display: none; } .tabContent .textEditor { margin: 0; } .tabContent .sectionTitle { display: none; } /*鍋撮倞_menu*/ .side_menu { margin-bottom: 50px; } .side_menu li { position: relative; border-bottom: 1px solid #e1e1e1; } .side_menu li > a { display: block; padding: 10px 15px; font-size: 14px; } .side_menu li > a.current { color: #fff; background-color: #8c8c8c; } .side_menu li > a b { margin-left: 10px; font-weight: 400; font-size: 13px; color: #808080; } .side_menu dl { padding-left: 25px; } .side_menu dl a { display: block; padding: 10px 15px; font-size: 14px; } .side_menu dl a.current { color: #000; text-decoration: underline; } /*鍋撮倞_鐩哥翱*/ .side_album { margin-top: 30px; margin-bottom: 30px; margin-right: -10px; } .side_album li { float: left; width: 33.33%; padding: 0 10px 10px 0; } .side_album a { display: block; box-shadow: 2px 2px 5px #c3c3c3; } .side_album a img { display: block; width: 100%; backface-visibility: hidden; } /*鍋撮倞_绶氫笂瑷傛埧*/ .side_booking { margin-bottom: 30px; } .side_booking a { display: block; border-radius: 4px; box-shadow: 0 1px 1px #8d2121; font-weight: bold; font-size: 25px; color: #fff; background-color: #f05b8f; } .side_booking a i { display: inline-block; font-size: 28px; padding: 10px 15px; margin-right: 15px; border-right: 1px solid #d33434; box-shadow: 1px 0 #f38a8a; } .side_booking a:hover { box-shadow: inset 0 3px 3px #8d2121; } /*鍋撮倞_鑱怠璩囪▕*/ .side_contactInfo li { margin-bottom: 20px; } .side_contactInfo a { display: inline-flex; align-items: center; font-size: 16px; color: #414141; } .side_contactInfo i { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 35px; height: 35px; line-height: 35px; margin-right: 8px; border: 2px solid #a5a5a5; border-radius: 50%; font-size: 20px; color: #a5a5a5; text-align: center; } .side_contactInfo b { display: inline-block; vertical-align: middle; font-weight: 400; } /*鍋撮倞_鎴垮瀷*/ .side_room { margin-bottom: 50px; } .side_room .Img img { display: block; width: 100%; backface-visibility: hidden; } .side_room .Txt { margin-top: 5px; } .side_room .Txt p { max-height: 100px; font-size: 13px; color: #858383; line-height: 1.8; overflow: hidden; } .side_room h3 a { font-size: 16px; font-weight: 400; } /*鍋撮倞_鍒嗕韩*/ .side_share { display: none; margin-top: 30px; } @media (max-width: 767px) { .side_share { display: block; margin-bottom: 30px; } } .side_share a { display: block; width: 100%; margin-top: 5px; padding: 15px 10px; border-radius: 4px; font-weight: bold; font-size: 13px; line-height: 1; color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); text-align: center; } .side_share i { padding-right: 5px; font-size: 18px; } .side_share .line { box-shadow: 0 0 0 1px #22a00b; border-top: 1px solid #e1ffa9; background: #a7e732; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYTdlNzMyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMWZiNTBlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: linear-gradient(135deg, #a7e732 0%, #1fb50e 35%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7e732', endColorstr='#1fb50e', GradientType=1); } .side_share .fb { box-shadow: 0 0 0 1px #235c9b; border-top: 1px solid #8DCFF5; background: #5da0ea; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYTBlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDhjZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to bottom, #5da0ea 0%, #3d8ce6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5da0ea', endColorstr='#3d8ce6', GradientType=0); /* IE6-8 */ } /*鍋撮倞_鍏朵粬鐩搁棞瑷婃伅*/ .side_news { margin: 30px 0; } .side_news ul { margin-top: 20px; } .side_news li { margin-bottom: 25px; } .side_news .Img { float: left; width: 60px; margin-right: 12px; overflow: hidden; } .side_news .Img img { display: block; height: 60px; } .side_news .Txt { overflow: hidden; } .side_news .Txt a { display: block; font-size: 14px; line-height: 1.5; font-weight: bold; } .side_news .Txt a:hover { text-decoration: underline; } .side_news .Txt b { display: block; margin-top: 5px; font-weight: 400; font-size: 12px; color: #999; } /*title*/ .titleStyle1 { padding-bottom: 10px; font-weight: 400; font-size: 24px; color: #000; text-align: center; letter-spacing: .05em; } /*button*/ .btn1.center { text-align: center; } .btn1.full a { width: 100%; } .btn1 a { position: relative; z-index: 1; display: inline-block; min-width: 190px; text-align: center; padding: 13px 30px; font-size: 14px; letter-spacing: .01em; color: #fff; background-color: #0e0e0e; border: 1px solid #0e0e0e; } .btn1 a::after { content: ''; position: absolute; right: 0; top: 0; z-index: -1; width: 0; height: 100%; background-color: #ff0000; transition: all .4s ease-in-out; } .btn1 a:hover { border-color: #ff0000; } .btn1 a:hover::after { right: auto; left: 0; width: 100%; } .btn1 a.white { background-color: #fff; border: 1px solid #68a9b1; color: #68a9b1; } .btn1 a.white::after { background-color: #68a9b1; } .btn1 a.white:hover { color: #fff; } /*婊戝嫊瑙i帠*/ .captchaArea { position: relative; width: 200px; height: 50px; background-color: #ddd; } .captchaArea.unlocking .sliderBtn { transition: none; } .captchaArea .note { position: absolute; top: 17px; right: 30px; z-index: 1; font-size: 15px; text-align: center; font-family: 'Microsoft JhengHei', sans-serif; color: #777; letter-spacing: 1px; pointer-events: none; } .sliderBtn { position: absolute; top: 0; left: 0; z-index: 2; width: 50px; height: 50px; border: none; outline: none; background-color: RoyalBlue; cursor: pointer; transition: all .3s linear; } .sliderBtn::before { content: '\f105'; position: absolute; top: 13px; left: 23px; color: #fff; font-size: 24px; font-family: FontAwesome; pointer-events: none; } /*Hover鏁堟灉1: 鏀惧ぇ娣″嚭*/ .imh_opacity { background-color: #000; overflow: hidden; } .imh_opacity img { transition: all 0.3s linear; backface-visibility: hidden; } .imh_opacity:hover img { opacity: 0.8; transform: scale(1.05); } /*Hover鏁堟灉1: 鏀惧ぇ娣″嚭Detail*/ .imh_detail { background-color: #000; overflow: hidden; } .imh_detail img { transition: all 0.3s linear; backface-visibility: hidden; } .imh_detail a:before { content: "Details+"; position: absolute; left: 50%; top: 50%; z-index: 99; margin-left: -45px; margin-top: -80px; display: block; padding: 10px 20px; font-size: 13px; color: #fff; border: 2px solid #fff; opacity: 0; transition: all 0.3s ease; } .imh_detail:hover a:before { opacity: 1; margin-top: -20px; } .imh_detail:hover img { opacity: 0.3; transform: scale(1.05); } /*Hover鏁堟灉1: 鏀惧ぇ娣″嚭zoom*/ .imh_zoom { position: relative; background-color: #000; overflow: hidden; } .imh_zoom img { transition: all 0.3s linear; -webkit-backface-visibility: hidden; } .imh_zoom a:before { content: "\f002"; display: block; position: absolute; left: 50%; top: -30px; margin-top: -20px; margin-left: -20px; z-index: 99; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 18px; color: #fff; font-family: FontAwesome; text-align: center; background-color: #000; transition: all 0.4s ease; } .imh_zoom:hover a:before { top: 50%; } .imh_zoom:hover img { opacity: 0.3; transform: scale(1.05); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /*# sourceMappingURL=master.css.map */