@charset "UTF-8"; .newInArea .itemNewList .item, .categoryBox a::before, .categoryBox .thirdMMain::before, .filterBox .filterMain::before, .sortBox .sortMain::before, .itemList .item, .itemList .newItem, .itemList .circleLink, .box720, .box720::before, .box720::after, .mainArea.printPage .specBox .specTable tr, .specTable2 tr, .tabContent .relationList li, .tabContent .relationList li .downloadLink .Img, .tabContent .relationList li .downloadLink p, .tabContent #spec .specTable tr, .relatedProductArea .relatedPorductList .item { transition: all .5s; } .classNote { padding-bottom: 10px; line-height: 1.8; font-size: 15px; color: #222; text-align: center; } .classNote img { max-width: 100%; backface-visibility: hidden; } .mainArea.index { padding-bottom: 0; } .topBox.index { position: relative; } .topBox.index .Img { width: 100%; height: 500px; } .topBox.index .Img img { display: block; width: 100%; height: 100%; object-fit: cover; } .topBox.index .Txt { width: 100%; max-width: 650px; position: absolute; top: 50%; left: calc(50% - 650px); transform: translateY(-50%); } .topBox.index .Txt .titleBox { margin-bottom: 15px; } @media (max-width: 1340px) { .topBox.index .Txt { max-width: 100%; padding: 0 20px; left: 0; } .topBox.index .Txt .exp { max-height: 150px; overflow-y: auto; } .topBox.index .Txt .exp::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); } .topBox.index .Txt .exp::-webkit-scrollbar { width: 2px; } .topBox.index .Txt .exp::-webkit-scrollbar-thumb { background-color: #ff0000; } } @media (max-width: 1180px) { .topBox.index .Img { height: 400px; } } @media (max-width: 640px) { .topBox.index .Txt .titleBox .title { font-size: 36px; line-height: 40px; } } @media (max-width: 340px) { .topBox.index .Txt .titleBox .title { font-size: 30px; line-height: 34px; } .topBox.index .Txt .exp { font-size: 14px; } } .m2Box { position: relative; padding-top: 110px; padding-bottom: 80px; } .m2Box::before { content: ""; width: 166px; height: 180px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; top: 0; right: 0; } .m2Box::after { content: ""; width: 375px; height: 332px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; bottom: 0; left: 0; } .m2Box .m2List { position: relative; z-index: 2; } .m2Box .m2List li:nth-child(even) .item { flex-direction: row-reverse; } .m2Box .m2List li:nth-child(even) .Txt { padding-left: 0; padding-right: 68px; } .m2Box .m2List .item { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 35px; } .m2Box .m2List .Img { width: 608px; height: 358px; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .m2Box .m2List .Img a { display: block; width: 100%; height: 100%; } .m2Box .m2List .Img img { display: block; width: 100%; height: 100%; object-fit: cover; } .m2Box .m2List .Txt { width: calc(100% - 608px); padding-left: 68px; } .m2Box .m2List .Txt .exp { min-height: 126px; } .m2Box .m2List .Txt .crossBtn { margin-top: 15px; } @media (max-width: 1180px) { .m2Box { padding-top: 80px; } .m2Box::before { background-size: 20%; } .m2Box::after { display: none; } .m2Box .m2List li:nth-child(even) .item { flex-direction: row; } .m2Box .m2List li:nth-child(even) .Txt { padding: 20px 0px 0; } .m2Box .m2List .Img { margin: 0 auto; width: 100%; max-width: 608px; height: auto; } .m2Box .m2List .Txt { width: 100%; max-width: 608px; margin: 0 auto; padding: 20px 0px 0; } } @media (max-width: 400px) { .m2Box { padding-top: 50px; padding-bottom: 50px; } .m2Box .m2List .Txt .exp { font-size: 14px; line-height: 18px; } } @media (max-width: 320px) { .m2Box .m2List .Txt .exp { font-size: 13px; } } .mainArea.listPage { padding: 0; } .mainArea.listPage > .contentBox { background-color: #eeeeee; padding-bottom: 110px; position: relative; } .mainArea.listPage > .contentBox::before { content: ""; width: 270px; height: 131px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; top: -67px; left: calc(50% - 650px - 120px); } .mainArea.listPage > .contentBox .wrap { display: flex; flex-wrap: wrap; } .mainArea.listPage > .contentBox .wrap > .leftBox { width: 210px; } .mainArea.listPage > .contentBox .wrap > .rightBox { width: calc(100% - 210px); padding-left: 36px; } @media (max-width: 1180px) { .mainArea.listPage > .contentBox::before { background-size: 10%; } .mainArea.listPage > .contentBox .wrap > .leftBox { width: 100%; } .mainArea.listPage > .contentBox .wrap > .leftBox > .titleBox .title { text-align: center; } .mainArea.listPage > .contentBox .wrap > .leftBox > .titleBox .title::before { left: calc(50% - 13px); } .mainArea.listPage > .contentBox .wrap > .leftBox > .titleBox .title::after { left: auto; right: calc(50% - 13px); } .mainArea.listPage > .contentBox .wrap > .rightBox { width: 100%; padding-left: 0px; } } @media (max-width: 640px) { .mainArea.listPage > .contentBox { padding-bottom: 64px; } } .topBox.listPage { width: 100%; height: 585px; background-color: #eeeeee; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .topBox.listPage .TxtBox { width: calc(100% - 925px); } .topBox.listPage .Txt { margin-left: auto; max-width: 675px; padding-right: 127px; } .topBox.listPage .Txt .topText { font-size: 15px; line-height: 20px; letter-spacing: 0; font-weight: 400; color: #ff0000; } .topBox.listPage .Txt .menuTitle { font-size: 24px; } .topBox.listPage .Txt .exp { font-size: 18px; } .topBox.listPage .ImgBox { width: 925px; position: relative; } .topBox.listPage .exploded { position: absolute; top: 0; right: 0; width: 1000px; height: 585px; } .topBox.listPage .exploded_album { width: 100%; height: 100%; margin-bottom: 0; } .topBox.listPage .exploded_album img { display: block; width: 1000px; height: 585px; object-fit: contain; } .topBox.listPage .slick-dots-bottom { bottom: 40px; } .topBox.listPage .iconList { padding-top: 40px; margin-left: -25px; padding-bottom: 30px; margin-bottom: 0; height: 206px; } .topBox.listPage .iconList > li { display: inline-block; } .topBox.listPage .iconList > li:nth-child(n+5) { opacity: 0; } .topBox.listPage .iconList .slick-list li { opacity: 1; } .topBox.listPage .iconList .item { padding: 5px 10px; } .topBox.listPage .iconList .slick-dots-bottom { bottom: 0px; } .topBox.listPage .iconList .slick-dots-bottom li { padding: 0; } .topBox.listPage .iconList .slick-dots-bottom li button::before { background-color: #fff; } .topBox.listPage .iconList .slick-dots-bottom li.slick-active button::before { background-color: #ff0000; } @media (max-width: 1640px) { .topBox.listPage .TxtBox { width: calc(100% - 850px); } .topBox.listPage .Txt { padding-left: 20px; padding-right: 50px; } .topBox.listPage .ImgBox { width: 850px; } .topBox.listPage .exploded { width: 900px; height: auto; display: block; top: 50%; transform: translateY(-50%); } .topBox.listPage .exploded_album { height: auto; } .topBox.listPage .exploded_album img { width: 100%; height: auto; max-height: 585px; } .topBox.listPage .iconList { margin-left: 0; } } @media (max-width: 1440px) { .topBox.listPage .TxtBox { width: calc(100% - 760px); } .topBox.listPage .Txt { padding-left: 20px; padding-right: 40px; } .topBox.listPage .ImgBox { width: 760px; } .topBox.listPage .exploded { width: 800px; } .topBox.listPage .exploded_album img { max-height: 500px; } .topBox.listPage .slick-dots-bottom { bottom: 0px; } } @media (max-width: 1280px) { .topBox.listPage .TxtBox { width: calc(100% - 640px); } .topBox.listPage .Txt { padding-left: 20px; padding-right: 40px; } .topBox.listPage .ImgBox { width: 640px; } .topBox.listPage .exploded { width: 680px; } .topBox.listPage .exploded_album img { max-height: 400px; } .topBox.listPage .slick-dots-bottom { bottom: -50px; } } @media (max-width: 1180px) { .topBox.listPage .TxtBox { width: calc(100% - 540px); } .topBox.listPage .Txt { padding-left: 20px; padding-right: 30px; } .topBox.listPage .ImgBox { width: 540px; } .topBox.listPage .exploded { width: 570px; } .topBox.listPage .exploded_album img { max-height: 360px; } .topBox.listPage .slick-dots-bottom { bottom: -80px; } } @media (max-width: 960px) { .topBox.listPage { height: auto; } .topBox.listPage .TxtBox { width: 100%; padding: 30px 20px; } .topBox.listPage .Txt { width: 100%; max-width: 100%; padding: 0; } .topBox.listPage .ImgBox { width: 100%; height: 480px; } .topBox.listPage .ImgBox .bg { width: 100%; height: 100%; padding: 0; } .topBox.listPage .ImgBox .bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .topBox.listPage .exploded { width: 100%; top: 0; transform: translateY(0); } .topBox.listPage .exploded_album img { max-height: 480px; } .topBox.listPage .slick-dots-bottom { bottom: 30px; } } @media (max-width: 768px) { .topBox.listPage .ImgBox { height: 400px; } .topBox.listPage .exploded_album img { max-height: 400px; } .topBox.listPage .slick-dots-bottom { bottom: 5px; } } @media (max-width: 640px) { .topBox.listPage .ImgBox { height: 350px; } .topBox.listPage .exploded_album { margin-bottom: 40px; } .topBox.listPage .exploded_album img { max-height: 310px; } .topBox.listPage .slick-dots-bottom { bottom: -35px; } } @media (max-width: 400px) { .topBox.listPage .ImgBox { height: 270px; } .topBox.listPage .exploded_album img { max-height: 230px; } } @media (max-width: 340px) { .topBox.listPage .ImgBox { height: 230px; } .topBox.listPage .exploded_album img { max-height: 190px; } } .newInArea { padding: 110px 0; position: relative; } .newInArea::before { content: ""; width: 140px; height: 310px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; top: -5px; right: 0; } .newInArea .itemNewList { margin-left: -27px; margin-right: -27px; } .newInArea .itemNewList.slick-dotted { padding-bottom: 35px; } .newInArea .itemNewList .item { max-width: 370px; margin: 20px auto; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); background-color: #fff; padding: 10px 30px 24px; } .newInArea .itemNewList .item:hover { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); } .newInArea .itemNewList .Img { width: 100%; max-width: 310px; margin: 0 auto; } .newInArea .itemNewList .Img img { display: block; width: 100%; } .newInArea .itemNewList .Txt .subtitle { height: 28px; } .newInArea .itemNewList .Txt .normalBtn { margin-top: 7px; } .newInArea .itemNewList .slick-dots-bottom { bottom: 0; } @media (max-width: 1300px) { .newInArea .itemNewList { margin: 0; } } @media (max-width: 1180px) { .newInArea::before { background-size: 50%; width: 60px; height: 120px; top: 0; } } @media (max-width: 840px) { .newInArea .titleBox { margin-bottom: 10px; } .newInArea .itemNewList { margin-right: -10px; margin-left: -10px; } .newInArea .itemNewList li { padding: 0 10px; } .newInArea .itemNewList .slick-dots-bottom li { padding: 0; } } @media (max-width: 640px) { .newInArea { padding: 50px 0; } .newInArea::before { top: -50px; } } @media (max-width: 400px) { .newInArea .itemNewList .Txt .title { font-size: 20px; } .newInArea .itemNewList .item { padding: 10px 15px 20px; } } .categoryBox { padding-bottom: 40px; } .categoryBox a { display: block; font-size: 18px; line-height: 24px; font-weight: 600; padding: 10px 0; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .categoryBox a::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background-color: #ff0000; display: block; position: absolute; top: 21px; left: 0; opacity: 0; } @media (min-width: 1181px) { .categoryBox a:hover, .categoryBox a.current { padding-left: 10px; } .categoryBox a:hover::before, .categoryBox a.current::before { opacity: 1; } } .categoryBox .thirdMMain { display: none; width: 100%; height: 100%; background-color: #fff; color: #333333; font-size: 15px; line-height: 50px; letter-spacing: 0.2px; font-weight: 600; padding-left: 23px; padding-right: 40px; position: relative; text-transform: uppercase; cursor: pointer; } .categoryBox .thirdMMain::before { content: ""; display: block; border-radius: 0; background-color: transparent; width: 8px; height: 8px; border-bottom: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); position: absolute; top: 20px; right: 17px; } .categoryBox .thirdMMain.open { background-color: #ff0000; color: #fff; } .categoryBox .thirdMMain.open::before { transform: rotate(-135deg); border-bottom: 1px solid #fff; border-right: 1px solid #fff; top: 23px; } @media (max-width: 1180px) { .categoryBox .thirdMMain { display: block; } } @media (max-width: 1180px) { .categoryBox { max-width: 440px; width: 100%; margin: 0 auto; } .categoryBox .thirdMMain { display: block; padding: 0 40px; text-align: center; } .categoryBox .categoryList { display: none; width: 100%; } .categoryBox .categoryList li { display: flex; align-items: center; justify-content: center; background-color: #fff; min-height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .categoryBox .categoryList li a { text-align: center; display: block; width: 100%; font-size: 15px; line-height: 20px; padding: 5px; text-transform: uppercase; border: none; } .categoryBox .categoryList li a.current { color: #ff0000; } } .filterBox .filterMain { display: none; margin: 0 auto; width: 440px; height: 50px; position: relative; background-color: #fff; color: #333333; font-size: 15px; line-height: 50px; letter-spacing: 0.2px; font-weight: 600; padding: 0 40px; text-transform: uppercase; text-align: center; } .filterBox .filterMain::before { content: ""; display: block; width: 8px; height: 8px; border-bottom: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); position: absolute; top: 20px; right: 17px; } .filterBox .filterMain.open { background-color: #ff0000; color: #fff; } .filterBox .filterMain.open::before { transform: rotate(-135deg); border-bottom: 1px solid #fff; border-right: 1px solid #fff; top: 23px; } @media (max-width: 1180px) { .filterBox .filterMain { display: block; } } .filterBox .filterItem { display: block; padding-bottom: 38px; } @media (max-width: 1180px) { .filterBox .filterItem { display: none; width: 100%; max-width: 440px; margin: 0 auto; background-color: #fff; padding: 20px 30px 20px; } } .filterBox .title { font-size: 20px; line-height: 23px; color: #000; font-weight: 700; letter-spacing: 0; padding-bottom: 16px; margin-bottom: 12px; position: relative; } .filterBox .title::before { content: ""; display: block; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: 0; left: 0; } .filterBox .title::after { content: ""; display: block; width: 36px; height: 1px; background-color: #ff0000; position: absolute; bottom: 0; left: 0; } .filterBox .filterList li { position: relative; cursor: pointer; } .filterBox .filterList li .plus { position: absolute; top: 7px; left: 0; width: 13px; height: 13px; } .filterBox .filterList li .plus.radioStyle .cross { opacity: 0; } .filterBox .filterList li .text { padding-left: 22px; font-size: 16px; font-weight: 600; line-height: 27px; letter-spacing: 0; color: #404040; } .filterBox .filterList li.currrent .plus { background-color: #ff0000; } .filterBox .filterList li.currrent .plus.radioStyle::after { background-color: #fff; } .filterBox .filterList li.currrent .plus.radioStyle .cross { opacity: 1; } .filterBox .filterList li:hover .plus { background-color: #ff0000; } .filterBox .filterList li:hover .plus::after { background-color: #ff0000; } @media (max-width: 1180px) { .filterBox { padding-bottom: 20px; } .filterBox .filterMain { width: 100%; max-width: 440px; } } .classm3NoteBox { padding-bottom: 40px; width: 100%; } @media (max-width: 1180px) { .classm3NoteBox { padding-bottom: 30px; text-align: center; } } @media (max-width: 640px) { .classm3NoteBox { padding-bottom: 20px; } } .sortBox { padding-bottom: 40px; z-index: 20; position: relative; width: 100%; } .sortBox .sortWrap { margin-left: auto; width: 213px; height: 50px; position: relative; } .sortBox .sortMain { width: 100%; height: 100%; display: block; background-color: #fff; color: #333333; font-size: 15px; line-height: 50px; letter-spacing: 0.2px; font-weight: 600; padding-left: 23px; padding-right: 40px; position: relative; text-transform: uppercase; text-align: center; } .sortBox .sortMain::before { content: ""; display: block; width: 8px; height: 8px; border-bottom: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); position: absolute; top: 20px; right: 17px; } .sortBox .sortMain.open { background-color: #ff0000; color: #fff; } .sortBox .sortMain.open::before { transform: rotate(-135deg); border-bottom: 1px solid #fff; border-right: 1px solid #fff; top: 23px; } .sortBox .sortList { display: none; width: 100%; position: absolute; top: 100%; left: 0; } .sortBox .sortList li { display: flex; align-items: center; justify-content: center; background-color: #fff; min-height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.2); } .sortBox .sortList a { text-align: center; display: block; width: 100%; font-size: 15px; line-height: 20px; padding: 5px; text-transform: uppercase; } @media (max-width: 1180px) { .sortBox .sortWrap { margin: 0 auto; width: 100%; max-width: 440px; } .sortBox .sortWrap .sortMain { text-align: center; padding: 0 40px; } } .itemList { display: flex; flex-wrap: wrap; margin-right: -7px; margin-left: -7px; position: relative; } .itemList::before { content: ""; width: 170px; height: 150px; display: block; background-image: url(../images/achivement_deco_dots.png); position: absolute; bottom: -75px; right: -90px; } .itemList > li { width: 33.33%; padding-bottom: 32px; } .itemList .item { max-width: 324px; margin: 0 auto; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); background-color: #fff; padding: 10px 27px 30px; position: relative; } .itemList .item:hover { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25); } .itemList .item:hover .newItem { width: 64px; height: 64px; border-radius: 0 0 64px 0; } .itemList .item:hover .newItem span { font-size: 14px; } .itemList .newItem { width: 58px; height: 58px; border-radius: 0 0 58px 0; background-color: #ff0000; position: absolute; top: 0; left: 0; } .itemList .newItem span { display: inline-block; font-size: 13px; line-height: 20px; letter-spacing: 0; color: #fff; font-weight: 600; position: absolute; top: 15px; left: 10px; transform: rotate(-45deg); } .itemList .Img { width: 100%; max-width: 310px; margin: 0 auto; } .itemList .Img img { display: block; width: 100%; } .itemList .Txt .listTitleLine { min-height: 67px; display: flex; flex-wrap: wrap; align-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .itemList .Txt .listTitleLine .subtitle { width: 100%; } .itemList .Txt .listTitleLine .title { width: 100%; } .itemList .Txt .textTagBox { border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; flex-wrap: wrap; margin-left: 0px; margin-right: 0px; padding: 8px 0; } .itemList .Txt .textTagBox .tagItem { margin: 3px 3px; width: calc(33.33% - 6px); height: 37px; background-color: #eeeeee; font-size: 15px; line-height: 37px; text-align: center; letter-spacing: 0; font-weight: 600; color: #606060; } .itemList .Txt .textTagBox .tagItem.ellipsis { max-height: 37px; } .itemList .Txt .specificationBox { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .itemList .Txt .specificationBox .specList { padding: 5px 0; } .itemList .Txt .specificationBox .specList li { display: flex; justify-content: space-between; font-size: 18px; line-height: 21px; letter-spacing: 0; color: #404040; padding: 3px 0; } .itemList .Txt .specificationBox .title { width: 50%; font-weight: 600; } .itemList .Txt .specificationBox .text { width: 50%; text-align: right; font-family: 'Open Sans', 'Microsoft JhengHei', sans-serif; font-weight: 400; font-size: 15px; } .itemList .Txt .exp { padding: 14px 0 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .itemList .Txt .exp.ellipsis { height: 100px; } .itemList .Txt .btnBox { padding-top: 10px; display: flex; position: relative; width: 100%; } .itemList .Txt .btnBox::before { content: ""; width: 1px; height: 34px; background-color: #b5b5b5; display: block; position: absolute; top: 10px; left: calc(50% - 0.5px); } .itemList .Txt .btnBox a { height: 34px; position: relative; width: 50%; display: inline-flex; align-items: center; justify-content: center; } .itemList .Txt .btnBox a:hover .plus { background-color: #ff0000; } .itemList .Txt .btnBox a:hover .plus::after { background-color: #ff0000; } .itemList .Txt .btnBox a:nth-child(2) { padding-left: 0px; } .itemList .Txt .btnBox a.added .plus { background-color: #ff0000; } .itemList .Txt .btnBox a.added .plus .cross::after { background-color: transparent; } .itemList .Txt .normalBtn { margin-top: 26px; } .itemList .circleLink { display: block; width: 42px; height: 42px; border-radius: 42px; background-color: #898989; position: absolute; z-index: 10; } .itemList .circleLink span { font-size: 13px; line-height: 42px; letter-spacing: 0.2px; color: #fff; font-weight: 600; padding-left: 20px; padding-right: 10px; margin-right: 30px; display: none; } .itemList .circleLink.quickView { top: 10px; right: 9px; } .itemList .circleLink.quickView img { width: 22px; height: 22px; display: block; filter: grayscale(1) brightness(20); position: absolute; top: calc(50% - 11px); right: 10px; } .itemList .circleLink.eshop { top: 60px; right: 9px; } .itemList .circleLink.eshop img { display: b22ck; width: 18px; height: 18px; filter: grayscale(1) brightness(20); position: absolute; top: calc(50% - 9px); right: 12px; } .itemList .circleLink:hover { width: auto; background-color: #000; } .itemList .circleLink:hover span { display: inline-block; } @media (max-width: 1300px) { .itemList > li { width: 50%; } } @media (max-width: 1180px) { .itemList { margin-right: 0; margin-left: 0; } .itemList::before { background-size: 20%; } } @media (max-width: 768px) { .itemList > li { width: 100%; } } @media (max-width: 400px) { .itemList .item { padding: 10px 15px 30px; } } #moduleView .moduleWrap { max-width: 1360px; width: 100%; } #moduleView .productIntro { width: 100%; padding: 10px 0; justify-content: space-between; } @media (max-width: 1480px) { #moduleView .moduleClose { top: 10px; right: 10px; } } @media (max-width: 768px) { #moduleView { padding: 0 10px; } #moduleView .moduleContent { padding: 0px; } } .iconStyle { display: inline-block; width: 100%; max-width: 136px; margin: 0 auto; } .iconStyle .Img { margin: 0 auto; width: 84px; height: 84px; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08); position: relative; } .iconStyle .Img::before { content: ""; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; display: block; border: 1px dotted #ff0000; position: absolute; top: 5px; left: 5px; } .iconStyle .Img img { display: block; width: 50px; height: 50px; object-fit: cover; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); } .iconStyle .title { padding-top: 10px; text-align: center; font-size: 15px; line-height: 16px; letter-spacing: 0; font-weight: 600; color: #373737; text-transform: uppercase; } @media (max-width: 960px) { .iconStyle .Img { width: 76px; height: 76px; } .iconStyle .Img::before { width: calc(100% - 8px); height: calc(100% - 8px); top: 4px; left: 4px; } } .mainArea.insPage { padding-bottom: 0; } .topBox.insPage { background-color: #eeeeee; position: relative; } .topBox.insPage::before { content: ""; width: calc(100% - 795px); height: 100%; background-color: rgba(255, 255, 255, 0.5); display: block; position: absolute; top: 0; right: 0; } .productIntro { display: flex; flex-wrap: wrap; position: relative; padding: 80px 0; } .productIntro::before { content: ""; width: 1px; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: block; position: absolute; top: 0; left: 144px; } .productIntro.noPic::before { display: none; } .productIntro.noPic .box720 { right: -83px; bottom: calc(50% - 41.5px); } .productIntro.noPic .albumBox { width: 0; } .productIntro.noPic .introBox { flex-grow: 1; padding-left: 90px; } @media (max-width: 1180px) { .productIntro::before { display: none; } } @media (max-width: 640px) { .productIntro { padding: 50px 0; } } .albumBox { width: calc(100% - 535px); padding: 0; display: flex; position: relative; align-items: center; max-height: 430px; overflow-y: hidden; } @media (max-width: 1180px) { .albumBox { width: 100%; order: 2; justify-content: center; padding-top: 20px; } } @media (max-width: 640px) { .albumBox { max-height: none; overflow-y: auto; overflow-x: hidden; flex-wrap: wrap; flex-direction: column-reverse; } } .leftAlbum { position: relative; } @media (max-width: 640px) { .leftAlbum { width: 100%; } } .rightAlbum { padding-left: 75px; } @media (max-width: 1280px) { .rightAlbum { padding-left: 40px; } } @media (max-width: 640px) { .rightAlbum { padding-left: 0; width: 100%; } } .side_album { width: 150px; padding-right: 30px; margin: 0; position: relative; height: 390px; } .side_album.slick-dotted.slick-slider { margin-bottom: 0; } .side_album li { width: 100%; padding: 5px 0; } .side_album .item { width: 120px; height: 120px; } .side_album .item a { display: block; width: 100%; height: 100%; box-shadow: none; } .side_album .item img { display: block; width: 100%; height: 100%; object-fit: cover; } .side_album .slick-dots-vertical { justify-content: center; z-index: 2; height: 390px; } .side_album .slick-dots-vertical li button::before { display: block; width: 11px; height: 11px; background-color: #d2d2d2; position: relative; top: -5px; right: -4px; } .side_album .slick-dots-vertical li.slick-active button::before { background-color: #ff0000; opacity: 1; } .side_album .slick-dots-vertical li.slick-active button::after { opacity: 1; } @media (max-width: 1180px) { .side_album { padding-right: 60px; width: 180px; } } @media (max-width: 640px) { .side_album { width: 100%; height: 150px; padding: 0; margin: 30px 0 40px; } .side_album.slick-dotted.slick-slider { margin-bottom: 40px; } .side_album .item { margin: 0 auto; } .side_album .slick-dots-bottom { bottom: -30px; } .side_album .slick-dots-bottom li { width: 10px; height: 10px; padding: 0; } } .side_album_big { width: 360px; } .side_album_big li { width: 100%; padding: 0; } .side_album_big .item { width: 360px; height: 360px; } .side_album_big .item a { display: block; width: 100%; height: 100%; box-shadow: none; } .side_album_big .item img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 640px) { .side_album_big { width: 100%; max-width: 360px; margin: 0 auto; } } @media (max-width: 400px) { .side_album_big { width: 100%; height: 260px; } .side_album_big .item { width: 100%; height: 100%; max-width: 260px; max-height: 260px; margin: 0 auto; } } .box720 { position: absolute; bottom: 10px; right: 95px; width: 83px; height: 83px; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08); z-index: 10; } .box720 a { display: block; width: 100%; height: 100%; position: relative; } .box720 img { position: absolute; top: calc(50% - 8.5px); left: calc(50% - 21.5px); display: block; width: 43px; height: 17px; pointer-events: none; } .box720::before { content: ""; width: 97px; height: 97px; border-radius: 50%; border: 1px dotted rgba(0, 0, 0, 0.3); position: absolute; top: calc(50% - 48.5px); left: calc(50% - 48.5px); pointer-events: none; } .box720::after { content: ""; width: 70px; height: 70px; border-radius: 50%; border: 1px dotted #ff0000; position: absolute; top: calc(50% - 35px); left: calc(50% - 35px); pointer-events: none; } .box720:hover { background-color: #c9c9c9; } .box720:hover img { filter: brightness(20); } .box720:hover::before { transform: scale(1.1); } .box720:hover::after { border: 1px dotted #fff; } @media (max-width: 640px) { .box720 { top: 40px; right: 0; } } .product720Area { width: 100%; max-width: 560px; padding: 0; left: 50%; transform: translateX(-50%); } .product720Area .moduleWrap { max-width: 100%; } .product720Area iframe { display: block; width: 100%; height: 500px; } @media (max-width: 1280px) { .product720Area .moduleClose { top: 10px; right: 10px; } } @media (max-width: 540px) { .product720Area iframe { height: calc(100vw - 40px); } } @media (max-width: 480px) { .product720Area .moduleWrap { padding-top: 50px; } } @media (max-width: 400px) { .product720Area .moduleContent { padding: 0 10px 20px; } .product720Area iframe { height: calc(100vw - 20px); } } /*鐢㈠搧浠嬬垂绺湒鏂囧瓧*/ .introBox { overflow: hidden; width: 535px; } .introBox .subtitle { font-size: 15px; line-height: 20px; letter-spacing: 0; font-weight: 400; color: #ff0000; padding-bottom: 10px; } .introBox .title { font-size: 26px; inherits: 26px; } .introBox .Txt { margin-bottom: 25px; height: 190px; padding-right: 10px; overflow-y: scroll; } .introBox .Txt::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); } .introBox .Txt::-webkit-scrollbar { width: 2px; } .introBox .Txt::-webkit-scrollbar-thumb { background-color: #ff0000; } .introBox .Txt .specBox { padding-bottom: 15px; } .introBox .Txt .exp ul { list-style: none; padding-left: 30px; } .introBox .Txt .exp ul li { position: relative; } .introBox .Txt .exp ul li::before { content: ""; width: 5px; height: 5px; display: block; background-color: #ff0000; border-radius: 50%; position: absolute; top: 8.5px; left: -18px; } .introBox .midBox { border-top: 1px solid rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; align-items: center; padding: 12px 0; } .introBox .midBox .printBtn a { display: inline-flex; align-items: center; } .introBox .midBox .printBtn a:hover span { color: #ff0000; } .introBox .midBox .printBtn a:hover img { filter: none; } .introBox .midBox .printBtn span { display: inline-block; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: #404040; padding-left: 10px; } .introBox .midBox .printBtn img { width: 20px; height: 20px; display: inline-block; filter: grayscale(1); } .introBox .midBox .share { text-align: right; } .introBox .midBox .share a { display: inline-block; width: 32px; height: 32px; border-radius: 50%; color: #fff; text-align: center; margin-left: 14px; } .introBox .midBox .share a.weibo { background-color: #eb192d; } .introBox .midBox .share a.fb { background-color: #395196; } .introBox .midBox .share a.twitter { background-color: #29b6eb; } .introBox .midBox .share a.linkedin { background-color: #1760ad; } .introBox .midBox .share a.linkedin i { font-size: 13px; } .introBox .midBox .share a i { color: #fff; line-height: 32px; font-size: 15px; } .introBox .midBox .share a:hover { transform: translate3d(-3px, -3px, 0); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); } .introBox .btnBox { border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 22px; display: flex; align-items: center; position: relative; } .introBox .btnBox::before { content: ""; width: 1px; height: 34px; display: block; background-color: rgba(0, 0, 0, 0.2); position: absolute; top: calc(50% - 17px + 11px); left: 114px; } .introBox .btnBox > a { height: 34px; width: 114px; position: relative; display: inline-flex; align-items: center; } .introBox .btnBox > a:nth-child(2) { padding-left: 26px; } .introBox .btnBox > a:hover .plus { background-color: #ff0000; } .introBox .btnBox > a:hover .plus::after { background-color: #ff0000; } .introBox .btnBox > a.added .plus { background-color: #ff0000; } .introBox .btnBox > a.added .plus .cross::after { background-color: transparent; } .introBox .btnBox .crossBtn { margin-left: auto; } @media (max-width: 1180px) { .introBox { width: 100%; order: 1; } } @media (max-width: 540px) { .introBox .btnBox { flex-wrap: wrap; } .introBox .btnBox::before { top: 22px; left: calc(50% - 1px); } .introBox .btnBox > a { width: 50%; justify-content: center; } .introBox .btnBox > a:nth-child(2) { padding-left: 0px; } .introBox .crossBtn { margin: 10px auto 0; width: 100%; } } .mainArea.printPage .logoBox { text-align: center; padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .mainArea.printPage .logoBox img { display: inline-block; width: 220px; } .mainArea.printPage .topBox.insPage { background-color: #fff; } .mainArea.printPage .topBox.insPage::before { display: none; } .mainArea.printPage .specBox .specTable { margin: 0 auto 80px; max-width: 600px; border: 1px solid rgba(0, 0, 0, 0.2); } .mainArea.printPage .specBox .specTable tr:nth-child(odd) { background-color: #ededed; } .mainArea.printPage .specBox .specTable tr:hover { background-color: #d0d0d0; } .mainArea.printPage .specBox .specTable td { padding: 10px; font-size: 15px; line-height: 20px; letter-spacing: 0; color: #404040; border: 1px solid rgba(0, 0, 0, 0.2); } .specTable2 { margin: 0 auto 80px; width: 100%; max-width: 1000px; font-size: 18px; line-height: 1.5; border: 1px solid rgba(0, 0, 0, 0.2); } .specTable2 tr:nth-child(odd) { background-color: #ededed; } .specTable2 tr:hover { background-color: #d0d0d0; } .specTable2 td { padding: 10px; font-size: 18px; line-height: 1.5; letter-spacing: 0; color: #404040; border: 1px solid rgba(0, 0, 0, 0.2); text-align: left; } .specTable2 td:first-child { width: 200px; } .specTable2 tr.blackBg { background-color: #000; color: #fff; } .specTable2 tr.blackBg td { color: #fff; } .productIntro.printPage { justify-content: center; padding: 30px 0; } .productIntro.printPage::before { display: none; } .productIntro.printPage .printImg { width: 310px; height: 240px; position: relative; margin-right: 20px; } .productIntro.printPage .printImg img { display: block; width: 100%; height: 100%; object-fit: contain; } .productIntro.printPage .introBox .Txt { height: auto; overflow-y: auto; } .featureArea { padding: 50px 0 20px; background-color: #dcdcdc; } .featureArea .wrap { display: flex; align-items: center; justify-content: space-between; } .featureArea .titleBox { padding-right: 40px; } .featureArea .iconBox { margin-left: auto; padding-left: 0px; width: 570px; max-height: 170px; overflow: hidden; } .featureArea .iconBox .iconList { margin: 0 0 30px auto; display: block; width: 100%; } .featureArea .iconBox .iconList .slick-track { margin: 0 0 0 auto; } .featureArea .iconBox .iconList li { text-align: center; display: inline-block; } .featureArea .iconBox .iconList > li:nth-child(1n+5) { opacity: 0; } .featureArea .iconBox .iconList .slick-list li { opacity: 1; } .featureArea .iconBox .iconList .item { padding: 5px 10px; margin: 0 auto; width: 136px; } .featureArea .iconBox .iconList .slick-dots-bottom { bottom: -30px; } .featureArea .iconBox .iconList .slick-dots-bottom li { padding: 0; } .featureArea .iconBox .iconList .slick-dots-bottom li button::before { background-color: #fff; } .featureArea .iconBox .iconList .slick-dots-bottom li.slick-active button::before { background-color: #ff0000; } @media (max-width: 1180px) { .featureArea .titleBox { width: 280px; padding-right: 0; } .featureArea .iconBox { width: calc(100% - 280px); max-width: 570px; } } @media (max-width: 768px) { .featureArea .wrap { flex-wrap: wrap; } .featureArea .titleBox { width: 100%; } .featureArea .titleBox .title { text-align: center; } .featureArea .titleBox .title::before { left: calc(50% - 13px); } .featureArea .titleBox .title::after { left: auto; right: calc(50% - 13px); } .featureArea .iconBox { width: 100%; max-width: 100%; padding-left: 0; } } .contentBox.insPage { padding-top: 0; } /*闋佺堡*/ .tab { display: flex; align-items: center; margin: 0 auto; padding: 0 calc(50% - 550px); background-color: #707070; } .tab a { display: block; flex-grow: 1; height: 70px; background-color: #707070; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .tab a span { display: inline-block; color: #fff; line-height: 24px; font-size: 20px; font-weight: 600; letter-spacing: 0; } .tab a.current { background-color: #000; } @media (max-width: 1100px) { .tab { padding: 0; } } @media (max-width: 640px) { .tab a { width: 100%; flex-grow: 1; } .tab a span { font-size: 16px; } } @media (max-width: 400px) { .tab a span { font-size: 14px; } } /*闋佺堡鍏у*/ .tabContent { margin-top: 0px; padding: 80px 0px; } .tabContent > div { display: none; } .tabContent .textEditor { margin: 0; } .tabContent .relationList { padding-top: 10px; } .tabContent .relationList li { width: 100%; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: flex-start; background-color: #fff; padding: 30px 46px; min-height: 103px; margin-bottom: 12px; } .tabContent .relationList li:nth-child(even) { background-color: #e5e5e5; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0); } .tabContent .relationList li:hover { box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2); transform: translateY(-5px); } .tabContent .relationList li .decoText { font-size: 15px; line-height: 20px; letter-spacing: 0; font-weight: 400; color: #888888; } .tabContent .relationList li .titleBox { width: 430px; margin-bottom: 0; } .tabContent .relationList li .titleBox .title a { display: inline-block; font-size: 22px; line-height: 24px; letter-spacing: 0; font-weight: 700; } .tabContent .relationList li .typeBox { width: 170px; } .tabContent .relationList li .typeBox p { padding-top: 4px; font-size: 18px; line-height: 20px; letter-spacing: 0; color: #000; font-weight: 400; } .tabContent .relationList li .dateBox { width: 100px; } .tabContent .relationList li .dateBox p { padding-top: 4px; font-size: 18px; line-height: 20px; letter-spacing: 0.2px; color: #000; font-weight: 400; } .tabContent .relationList li .downloadLink { flex-grow: 1; padding-top: 8px; padding-left: 15px; } .tabContent .relationList li .downloadLink > a { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; } .tabContent .relationList li .downloadLink > a:hover .Img { background-color: #ff0000; } .tabContent .relationList li .downloadLink > a:hover p { color: #ff0000; } .tabContent .relationList li .downloadLink .Img { width: 33px; height: 33px; border-radius: 50%; background-color: #898989; text-align: center; } .tabContent .relationList li .downloadLink .Img img { width: 17px; height: 33px; display: inline-block; } .tabContent .relationList li .downloadLink p { font-size: 14px; line-height: 24px; letter-spacing: 0; font-weight: 600; color: #404040; padding-left: 10px; } @media (max-width: 960px) { .tabContent .relationList li .titleBox { width: 300px; } } @media (max-width: 768px) { .tabContent .relationList li { padding: 30px; flex-wrap: wrap; } .tabContent .relationList li .titleBox { width: 100%; padding-bottom: 10px; } } @media (max-width: 540px) { .tabContent .relationList li { padding: 30px 20px; } .tabContent .relationList li .titleBox { order: 1; width: calc(100% - 40px); } .tabContent .relationList li .typeBox { flex-grow: 1; width: auto; padding-right: 10px; order: 3; } .tabContent .relationList li .dateBox { flex-grow: 1; width: auto; order: 4; text-align: right; } .tabContent .relationList li .downloadLink { order: 2; width: 40px; padding-left: 0; } .tabContent .relationList li .downloadLink p { display: none; } } .tabContent #spec .specTable { margin: 0 auto; max-width: 600px; max-width: 1000px; border: 1px solid rgba(0, 0, 0, 0.2); } .tabContent #spec .specTable tr:first-child td { background-color: #000; color: #fff; border-color: #ccc; } .tabContent #spec .specTable tr:nth-child(odd) { background-color: #ededed; } .tabContent #spec .specTable tr:hover { background-color: #d0d0d0; } .tabContent #spec .specTable td { padding: 10px; font-size: 18px; line-height: 1.5; letter-spacing: 0; color: #404040; border: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 640px) { .tabContent #spec { overflow-x: auto; } } .relatedProductArea { padding: 110px 0 80px; background-color: #dcdcdc; } .relatedProductArea .relatedPorductList { width: 100%; margin-left: -27px; margin-right: -27px; } .relatedProductArea .relatedPorductList.slick-dotted { padding-bottom: 35px; } .relatedProductArea .relatedPorductList .item { max-width: 370px; margin: 20px auto; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09); background-color: #fff; padding: 10px 30px 24px; } .relatedProductArea .relatedPorductList .item:hover { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); } .relatedProductArea .relatedPorductList .Img { width: 100%; max-width: 310px; margin: 0 auto; } .relatedProductArea .relatedPorductList .Img img { display: block; width: 100%; } .relatedProductArea .relatedPorductList .Txt .normalBtn { margin-top: 7px; } .relatedProductArea .relatedPorductList .slick-dots-bottom { bottom: 0; } @media (max-width: 1400px) { .relatedProductArea .relatedPorductList { margin: 0; } } @media (max-width: 1180px) { .relatedProductArea { padding: 80px 0; } } @media (max-width: 480px) { .relatedProductArea { padding: 50px 0; } .relatedProductArea .wrap { padding: 0 10px; } .relatedProductArea .relatedPorductList .item { padding: 10px 20px 20px; } }