* { margin: 0; padding: 0; } .clear:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clear { zoom: 1 } .fl { float: left; } .fr { float: right; } .disBlock { display: block; } .pc { display: block; } .sp { display: none; } img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } .tableBoxMain { width: 100%; max-width: 1920px; margin: 0 auto; } .tableBoxBanner { width: 100%; position: relative; } .tableBoxMainBanner { width: 100%; position: relative; max-width: 1600px; margin: 0 auto; } .tableBoxMainBanner img { width: 100%; height: auto; min-height: 270px; } .tbb_text { position: absolute; top: 50%; left: 5%; transform: translate(0, -50%); color: white; width: 80%; } .tbb_text .top { margin-bottom: 10px; } .tbb_h1 { font-size: 36px; line-height: 38px; margin: 10px 0 15px; font-weight: bold; } .tbb_h2 { font-size: 18px; font-weight: normal; } .tbb_date { font-size: 22px; font-weight: bold; line-height: 18px; color: #fff; text-align: center; display: inline-block; } .tableBoxAnchor, .tableBoxProduct { width: 80%; margin: 0px auto; } .tableBoxAnchor { width: 75%; margin: 20px auto; margin-top: 35px; } .tableBoxAnchor h2, .upgrade h2 { font-size: 30px; text-align: center; font-weight: 900; line-height: 1.5; margin-top: -8px; padding-left: 20px; padding-right: 20px; } .tableBoxAnchor h2 { padding-right: 15px; } .tableBoxAnchor p { font-size: 18px; font-weight: bold; text-align: center; margin-top: 8px; margin-bottom: 10px; } .tableBoxAnchorText { display: flex; justify-content: center; align-items: center; gap: 10px; } .tableBoxAnchorText-card { margin: 20px auto; width: calc((100% - 10px) / 3); height: 220px; padding: 8px 10px; } .tableBoxAnchorText-card { background-position: center 72%; } .add-card { background-color: #efe1ed; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 5px } .tableBoxAnchorText-card p { text-align: left; margin-bottom: 20px; margin-top: 0px; } .tableBoxAnchorText-card h2 { color: #71136b; text-align: left; margin-left: 10px; margin-bottom: 10px; } .tableBoxAnchorText-card h3 { font-size: 18px; text-align: left; padding: 10px 15px 0px 15px; } .tableBoxAnchorText-card h3 span { font-size: 28px; } .add-card-img { width: 100%; margin: 0px auto; padding: 5px 15px 5px 15px; } .add-card-img div { position: relative; } .add-card-img img { width: 100%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .add-card-img span { background-color: #000; font-size: 12px; padding: 5px; color: #fff; position: absolute; } .add-card-img .add-card-top { top: 0; left: 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-top-right-radius: unset; border-bottom-left-radius: unset; } .add-card-img .add-card-bottom { bottom: 4px; right: 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-top-right-radius: unset; border-bottom-left-radius: unset; } .tableBoxAnchorText-card a { background-color: #71136b; color: #fff; width: 100%; display: block; font-size: 16px; text-align: center; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-top-left-radius: unset; border-top-right-radius: unset; padding-top: 10px; padding-bottom: 10px; transition: all .6s; cursor: pointer; border-color: #71136b  !important; } .tableBoxAnchorText-card a:hover { opacity: .7; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; } .add-tableBox { display: flex; justify-content: center; align-items: flex-start; gap: 10px; } .add-tableBox img { width: 18px; height: 18px; } .add-tableBox .add-tableBox-second { margin-left: -5px; } .table-product { background-color: #f6f6f6; width: 100%; margin: 100px auto; margin-bottom: 0; padding-top: 30px; padding-bottom: 0px; margin-top: 30px; } .recommend-computer { width: 65%; max-width: 1600px; margin: 50px auto; } .recommend-area>button { background-color: #294e95; height: 40px; padding: 0 10px; border-radius: 3px; color: white; width: 20%; margin: 0 0 50px 40%; } .recommend-title { position: relative; margin: 50px 0; margin-bottom: 60px; } .recommend-title>h1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #f6f6f6; padding: 0 10px; font-size: 30px; } .recommend-block { width: 100%; overflow-x: hidden; margin-top: 30px; } .recommend-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .recommend-scroll::-webkit-scrollbar { display: none; } .recommend-scroll a { width: 31%; min-width: 280px; } .recommend-goods { width: 100%; height: 100%; background-color: white; display: flex; flex-direction: column; align-items: center; border-radius: 10px; padding: 10px 0; box-sizing: border-box; cursor: pointer; } .main-img { width: 90%; position: relative; } .main-img>img { width: 100%; max-width: 386px; } .main-img .img-icon { position: absolute; width: 8%; top: 0%; right: 8%; } .main-img .second-icon { right: 5%; } .recommend-sign { position: absolute; right: 0; top: 0; background-color: #389dff; color: white; border-radius: 5px; padding: 2px 5px; } .recommend-goods>h3 { text-align: left; width: 92%; min-height: 55px; font-size: 20px  !important; } .recommend-configuration { width: 90%; height: 40px; display: flex; justify-content: space-evenly; align-items: center; } .recommend-configuration>div { height: 100%; font-size: 12px; text-align: center; font-weight: 600; } .con-fir { width: 22% } .con-sec { width: 22% } .con-thr { width: 22% } .con-fourth { width: 22% } .con-sec>img { height: 70%; max-width: 44px; max-height: none; } .con-thr>img { height: 70%; max-width: 36px; max-height: none; } .con-fourth>img { width: 80%; max-height: none; max-width: 46px; } .recommend-configuration-sec { width: 90%; font-size: 14px; font-weight: 500; margin-top: 10px; } .recommend-configuration-sec>div { display: flex; align-items: center; margin: 10px 0; } .recommend-configuration-sec>div>img { width: 16px; margin: 0 10px; } .add-txt { text-align: center; font-size: 16px; margin-top: 20px; } .table-campaign .add-tableBox h2 { line-height: 1; margin-top: 0; font-size: 26px; } #side_banner { position: absolute; display: none; position: fixed; right: 5%; line-height: 1; z-index: 10; } .wrapperDiv { overflow: hidden; } .ImgList { overflow: hidden; margin: 40px auto; width: 96%; } .index_cont .list { display: none; text-align: center; } .selected { display: block  !important; } .ImgList .smallDiv { float: left; width: 23.65%; margin-right: 20px; background: #fff; margin-bottom: 20px; min-height: 235px; } .ImgList .smallDiv:nth-child(4), .ImgList .smallDiv:nth-child(8), .ImgList .smallDiv:nth-child(12), .ImgList .smallDiv:nth-child(16) { margin-right: 0; } .smallDiv { transition: all .6s; } .smallDiv:hover { transform: scale(1.06); } .ImgList .smallDiv h3 { font-size: 18px; font-weight: bold; text-align: center; line-height: 25px; margin-top: 10px; } .ImgList .smallDiv p { line-height: 20px; font-size: 12px; margin-bottom: 10px; padding: 0 5px; } .wrapperDiv { overflow: hidden; background-color: #f6f6f6; } .product-card-series-title-small { font-size: 27px  !important; } .upgrade { width: 80%; margin: 50px auto; margin-top: 200px; } .upgrade-content { background-color: #f1e1ed; margin-top: 20px; border-radius: 10px; text-align: center; font-weight: bold; } .upgrade-txt { padding: 20px 50px; padding-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .upgrade-info { width: 48%; } .upgrade-info h3, .upgrade-change { font-size: 20px; } .upgrade-info p { margin-top: 10px; margin-bottom: 10px; } .upgrade-info img { margin-top: 10px; margin-bottom: 10px; } .upgrade-change { width: 100%; background-color: #71136b; color: #fff; padding-top: 20px; padding-bottom: 20px; border-radius: 10px; border-top-left-radius: unset; border-top-right-radius: unset; } @media screen and (min-width: 750px) { #side_banner { top: 50%; transform: translateY(-50%); } } @media screen and (min-width: 751px) and (max-width: 1199px) { .ImgList .smallDiv { width: 31%; } .ImgList .smallDiv:nth-child(4), .ImgList .smallDiv:nth-child(8), .ImgList .smallDiv:nth-child(12), .ImgList .smallDiv:nth-child(16) { margin-right: 20px; } .ImgList .smallDiv:nth-child(3), .ImgList .smallDiv:nth-child(6), .ImgList .smallDiv:nth-child(9), .ImgList .smallDiv:nth-child(12), .ImgList .smallDiv:nth-child(15) { margin-right: 0; } } @media screen and (max-width: 750px) { #side_banner { bottom: 40%; } .ImgList .smallDiv { width: 47.1%; } .ImgList .smallDiv:nth-child(even) { margin-right: 0; } } #side_banner img { display: block; border-radius: 10px; } #side_banner img:hover { transition: .3s ease all; opacity: .7; } #side_banner img { height: auto; } @media screen and (min-width: 750px) { #side_banner img { width: 180px; } } @media screen and (max-width: 750px) { #side_banner img { width: 120px; } } #side_banner_bt_label { width: 30px; height: 30px; border-radius: 100%; background-color: #fff; position: absolute; display: flex; justify-content: center; align-items: center; line-height: 1; top: -10px; left: -10px; } #side_banner:hover, #side_banner_bt_label:hover { cursor: pointer  !important; } #side_banner_bt_label img { line-height: 1; width: 50%; height: auto; } #side_banner_bt:checked~#side_banner_bt_label_img, #side_banner_bt:checked~#side_banner_bt_label { display: none  !important; } @media screen and (max-width: 390px) { .recommend-goods>h3 { font-size: 16px; } .recommend-area>button { width: 50%; margin: 0 0 50px 25%; } .recommend-words { width: 90%; } .recommend-words>h1 { font-size: 18px; font-weight: 800; } .recommend-words>p { font-size: 14px; } .recommend-computer { width: 90%; margin-bottom: 20px; } .recommend-title>h1 { font-size: 18px; width: 58%; text-align: center; } .recommend-block { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .recommend-block:last-child { margin-right: 0; } .recommend-goods>h3 { font-size: 16px; } .recommend-configuration-sec { font-size: 10px; } } @media screen and (min-width: 391px) and (max-width: 460px) { .recommend-goods>h3 { font-size: 16px; } .recommend-area>button { width: 50%; margin: 0 0 50px 25%; } .recommend-words { width: 90%; } .recommend-words>h1 { font-size: 18px; font-weight: 800; } .recommend-words>p { font-size: 14px; } .recommend-computer { width: 90%; } .recommend-title>h1 { font-size: 18px; width: 58%; text-align: center; } .recommend-block { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .recommend-block:last-child { margin-right: 0; } .recommend-goods>h3 { font-size: 16px; } .recommend-configuration-sec { font-size: 10px; } } @media screen and (min-width: 461px) and (max-width: 768px) { .recommend-goods>h3 { font-size: 16px; } .contact-us { font-size: 20px; } .recommend-computer { width: 90%; } .recommend-words { width: 90%; } .recommend-words>h1 { font-size: 18px; font-weight: 800; } .recommend-words>p { font-size: 14px; } .recommend-title>h1 { text-align: center; font-size: 20px; width: 70%; padding: 0 10px; } .recommend-area>button { width: 40%; margin: 0 0 50px 30%; } } @media screen and (max-width: 768px) { .sp { display: block; } .pc { display: none; } .tableBoxMain { width: 100%; } .tbb_h2 { font-size: 16px; } .tbb_special_span { font-size: 12px; } .tbb_text { top: 77%; margin: 0 auto; text-align: center; } .tbb_date { font-size: 20px; } .tbb_h1 { font-size: 28px; } .tbb_text .top { margin-bottom: 3px; } #side_banner_bt_label { width: 25px; height: 25px; } .tableBoxAnchor h2 { font-size: 22px; } .tableBoxAnchor { width: 90%; margin-top: 30px; } .tableBoxAnchorText-card { width: 31%; min-width: 280px; height: auto; } .tableBoxAnchorText { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 0px; } .table-product { margin-top: 20px; padding-top: 10px; } .recommend-title>h1 { width: 70%; } .add-txt { text-align: right; font-size: 12px; } .recommend-title>h1 { text-align: center; font-size: 22px; width: 70%; padding: 0 10px; } .table-campaign .add-tableBox h2 { font-size: 22px; } .upgrade h2 { font-size: 22px; } .upgrade { width: 90%; margin-top: 30px; } .upgrade-txt { display: block; padding: 20px; } .upgrade-info { width: 100%; } .upgrade-info:nth-of-type(2) { margin-top: 30px; } .upgrade-change { font-size: 18px; } } @media screen and (min-width: 769px) and (max-width: 1000px) { .recommend-goods>h3 { font-size: 16px; } .recommend-computer { width: 90%; } .recommend-title>h1 { width: 66%; text-align: center; } } @media screen and (min-width: 769px) and (max-width: 1300px) { .tableBoxAnchor { width: 90%; } .product-card-series-title { font-size: 28px; } } @media screen and (min-width: 1001px) and (max-width: 1200px) { .guest-area, .question-area, .recommend-words, .recommend-computer { width: 90%; } .recommend-goods>h3 { font-size: 16px; } .recommend-title>h1 { width: 50%; text-align: center; } } @media screen and (min-width: 1201px) and (max-width: 1500px) { .guest-area, .question-area, .recommend-words, .recommend-computer { width: 80%; } .recommend-goods>h3 { font-size: 16px; } } @media screen and (min-width: 1921px) { .recommend-scroll { justify-content: center; } .recommend-words>p { font-size: 18px; } .recommend-words>h4 { font-size: 22px; } }