* { 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; } .tcenter { text-align: center; } .overAuto { overflow: auto; } .disInlineBlock { display: inline-block; } .marAuto { margin: 0 auto; } .colorRed { color: #f00  !important; font-weight: bold; } .width100 { width: 100%; } .posAbs { position: absolute; } html, body { width: 100%; font-family: "Lato", "Helvetica", "Arial", sans-serif; } 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; } ul, li { list-style: none; } .tableBoxMain { width: 100%; max-width: 1920px; margin: 0 auto; } .tableBoxBanner { width: 100%; position: relative; } .tableBoxBanner img { width: 100%; height: auto; } .tableBoxBanner .tbmc_btn { border-radius: 5px; } .tableBoxBanner .tbmc_btn_red { margin-left: 30px; } .show-sp { display: none; } .bannerCon { position: absolute; top: 45%; transform: translateY(-50%); color: #fff; width: 80%; left: 10%; } .bannerCon h1 { font-size: 28px; line-height: 30px; margin-bottom: 12px; } .bannerCon p { font-size: 52px; line-height: 52px; } .bannerCon p.p_added { font-size: 14px; line-height: 16px; width: 45%; margin-top: 15px; } .bannerCon a { color: #fff; margin-top: 15px; font-weight: bold; text-decoration: underline; } .tableBoxNav { width: 100%; height: 46px; background: url(https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/lenovo-for-startups/line01.jpg) repeat-y; background-size: 100% 100%; margin: 10px 0; } .tbn_wrap { text-align: center; } .nav_ul { display: inline-block; cursor: pointer; } .nav_ul li { font-size: 20px; line-height: 46px; color: #fff; padding: 0 20px; } .nav_ul li:hover { background: #fff; color: #000; } .nav_ul li.nav_li_clicked { background: #fff; color: #000; } .tableBoxMainCon, .tbmc_section { width: 100%; } .tbmcs_middle { width: 1200px; margin: 0 auto; } .tbmcs_middle h2 { font-size: 28px; line-height: 30px; padding: 40px 0 10px 0; text-align: center; } .tbmcsm_01 { width: 1100px; margin: 30px auto; position: relative; } .tbmcsm_01 img.cn_banner01 { width: calc(50% - 40px); width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); height: auto; margin-right: 40px; } .tbmcsm_01_con { width: 50%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .tbmcsm_01_con p { font-size: 18px; line-height: 22px; color: #000; margin-bottom: 20px; } .tbmcsm_01_con p span { color: #b72630; } .moreBtn { text-decoration: none; color: #fff; font-size: 16px; height: 36px; line-height: 36px; padding: 0 20px; border-radius: 3px; background: #2f4a9e; text-align: center; display: inline-block; cursor: pointer; } .moreBtn img { width: 8px; margin-left: 5px; position: relative; top: 1px; } .tbmcs_middle h4 { font-weight: normal; font-size: 20px; line-height: 24px; color: #000; text-align: center; margin-top: 10px; } .tbmcsm_02 { width: 1150px; margin: 0 auto; padding: 20px 0; } .tbmcsm_02 li { width: calc((100% - 30px) / 4); width: -webkit-calc((100% - 30px) / 4); width: -moz-calc((100% - 30px) / 4); margin-right: 10px; margin-bottom: 10px; } .tbmcsm_02 li img { width: 100%; height: auto; } .tbmcsm_02 li:nth-of-type(4), .tbmcsm_02 li:nth-of-type(8) { margin-right: 0; } .tbmc_section.bg-lightgray { background: #f7f5f6; } #tbmc_s3 { padding-bottom: 40px; } .tbmcsm_03 { margin: 25px auto 0 auto; display: flex; flex-direction: row; } .tbmcsm_03 section { width: 25%; margin-right: 20px; background: #f6f8fa; box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, .1); border-radius: 8px; } .tbmcsm_03 section:nth-of-type(4) { margin-right: 0; } .tbmcsm_03 section div { position: relative; margin-bottom: 10px; } .tbmcsm_03 section div img { width: 100%; height: auto; } .tbmcsm_03 section div span { display: block; height: 36px; line-height: 40px; color: #fff; position: absolute; bottom: 0; font-size: 18px; width: 100%; text-align: center; } .tbmcsm_03 section ul li { font-size: 16px; line-height: 20px; color: #000; list-style: disc; } .tbmcsm_03 section ul { padding: 0 15px 15px 30px; } .tbmcsm_03 section ul .moreBtn { margin-top: 10px; } #tbmc_s4 .tbmcs_middle h4 { width: 60%; margin: 10px auto; } .tbmcsm_04 { width: 60%; margin: 0 auto; padding-bottom: 40px; } .tbmcsm_04 img.tbmcsm_04_banner { width: 100%; height: auto; margin: 10px auto; } .to_more_wrap { text-align: right; } .tbmcsm_05 { width: 60%; margin: 10px auto; padding-bottom: 40px; } .tbmcsm_05 li { width: calc(50% - 15px); width: -webkit-calc(50% - 15px); width: -moz-calc(50% - 15px); position: relative; } #tbmc_s5 { padding-bottom: 40px; } .tbmcsm_05 li:nth-of-type(1) { margin-right: 30px; } .tbmcsm_05 li img.twicebg { width: 100%; height: auto; } .tbmcsm_05 li.posRe_li { position: relative; } .tbmcsm_05_div { position: relative; margin: 15px auto; width: 420px; } .tbmcsm_05_div img.twicebg { width: 100%; height: auto; } .contact_div { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .icon_div { color: #fff; width: 178px; margin: 10px auto; } .tel_div { width: 100%; text-align: center; color: #fff; font-size: 16px; line-height: 22px; } .icon_div img { width: 50px; margin-right: 8px; } .icon_div span { font-size: 20px; line-height: 50px; width: calc(100% - 58px); width: -webkit-calc(100% - 58px); width: -moz-calc(100% - 58px); } .tbmc_skinny_banner div { width: 90%; margin: 0 auto; color: #fff; padding: 15px 0; } .tbmc_skinny_banner div p a { color: #fff; } .tbmc_skinny_banner.blueBackground { background-color: #002060; } .tbmc_skinny_banner.purpleBackground { background-color: #7a126b; } .tbmc_btn { height: 36px; line-height: 36px; font-size: 16px; padding: 0 20px; border: 2px #fff solid; } a.tbmc_btn { text-decoration: none; color: #fff; } .tbmc_btn_login { background-color: #294e95; width: 172px; text-align: center; } .tbmc_btn_black { background-color: #000; margin-left: 30px; } .tbmc_skinny_banner.blueBackground div.fl { width: calc(100% - 300px); width: -webkit-calc(100% - 300px); width: -moz-calc(100% - 300px); font-size: 16px; line-height: 20px; height: 40px; position: relative; padding: 0; } .tbmc_skinny_banner div.fl p { position: absolute; top: 50%; transform: translateY(-50%); } .skinny-banner-2 { position: static  !important; top: none  !important; transform: none  !important; color: black; font-size: 24px; line-height: 26px; text-align: center; } .tbmc_skinny_banner.purpleBackground div.fl { width: calc(100% - 500px); width: -webkit-calc(100% - 500px); width: -moz-calc(100% - 500px); font-size: 16px; line-height: 20px; height: 40px; position: relative; padding: 0; } .tbmcsm_flex li { background: #f6f8fa; box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, .1); width: 33%; margin-right: 10px; border-radius: 6px; } .tbmcsm_flex li a { text-decoration: none; color: #000; font-size: 16px; line-height: 18px; } .tbmcsm_flex li a p { width: 92%; margin: 0 auto; padding: 10px 0; } .tbmcsm_flex { display: flex; flex-direction: row; padding: 20px 0; } .tbmcsm_flex li a img { width: 100%; } .navbox { display: flex; justify-content: center; align-items: center; column-gap: 20px; width: 80%; margin: -60px auto 0; z-index: 1; position: relative; } .nav-card { width: 30%; max-width: 400px; } .nav-card img { border-top-right-radius: 20px; border-top-left-radius: 20px; margin-bottom: 0; padding: 0 0; display: block; width: 100%; } .nav-card a { text-decoration: none; } .nav-card-text { background-color: #11184f; color: white; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } .nav-card-text p { padding: 30px 0; text-align: center; font-size: 22px; line-height: 30px; font-weight: bold; color: white; } .software-text { text-align: center; margin: 5px auto 10px; font-size: 20px; line-height: 24px; } .pdp h3 { margin: 50px auto 20px; font-size: 30px; line-height: 34px; font-weight: bold; text-align: center; } .pdp-box { display: flex; column-gap: 50px; justify-content: center; margin-bottom: 20px; } .pdp-img { width: 50%; display: block; position: relative; } .pdp-img img { position: absolute; right: 0; } .pdp-info { width: 50%; margin: 40px auto 40px; } .tag { padding: 5px 8px; background-color: #b72630; color: white; font-size: 20px; line-height: 26px; font-weight: bold; width: fit-content; border-radius: 5px; } .summary { padding: 20px 0 10px; font-size: 50px; line-height: 54px; font-weight: bold; } .star-icon-box { position: relative; display: inline-block; } .star-icon-box .yellow-icon { background: url(//p4-ofp.static.pub/fes/cms/2022/09/15/9xyox3940nf6i0nwmkysidzmo49xqy647099.svg); background-size: cover; width: 25px; height: 25px; } .star-icon-box .gray-icon { background: url(//p4-ofp.static.pub/ShareResource/jp/startup-banner/half-star.png); background-size: cover; width: 30px; height: 30px; } .comment { display: inline-block; font-size: 26px; line-height: 28px; padding: 0 0 10px 5px; } .cart-icon { background-image: url(https://p1-ofp.static.pub/ShareResource/ww/opt/site_wide/a.7213bf4ee1b38e25.svg); display: inline-block; height: 20px; width: 24px; background-position: center; background-repeat: no-repeat; background-size: cover; } .cart-number { padding-top: 15px; font-size: 20px; line-height: 22px; color: #912593; } .price { font-size: 36px; line-height: 40px; font-weight: bold; padding: 60px 0 30px; } .price span { font-size: 16px; line-height: 20px; font-weight: normal; margin-left: 10px; } .pdp-info a { text-decoration: none; background-color: black; color: white; padding: 10px 20px; width: fit-content; border-radius: 5px; font-size: 20px; line-height: 24px; } .pdp-toptext { font-size: 22px; line-height: 24px; text-align: center; } .thinkpad-banner { width: 80%; max-width: 1400px; position: relative; margin: 0 auto; } .thinkpad-banner .bannerCon { width: 90%  !important; left: 5%  !important; transform: none; top: 10%  !important; } .banner-text { color: white; display: block; max-width: 80%; position: absolute; top: 10%; left: 5%; } .thinkpad-banner h3 { font-size: 52px; line-height: 62px; padding: 10px 0 8vw; } .thinkpad-banner-text { font-size: 22px; line-height: 24px; top: 60%; } .banner-btn { display: flex; position: absolute; bottom: 10%; left: 5%; column-gap: 10px; } .banner-btn a { border-radius: 7px; } .tbmc_btn_red { background-color: #b8252e; } .banner-btn .tbmc_btn_black { margin-left: 0; } .thinkpad-banner-text-add { text-decoration: underline; color: white; font-size: 22px; line-height: 24px; font-weight: bold; position: absolute; bottom: 4%; right: 5%; } .wpc-lenovo-pro-hub-benefits-blade-image { width: 100%; height: 100%; object-fit: cover; object-position: top; } .wpc-lenovo-pro-hub-benefits-blade-text, .wpc-lenovo-pro-hub-benefits-blade-text-right { background-color: #fff; position: absolute; border-radius: 12px; padding: 48px; left: 8%; width: 32%; top: 28%; } .wpc-lenovo-pro-hub-benefits-blade-text-title { color: #000; font-size: 32px; margin-top: 10px; font-weight: bold; } .wpc-lenovo-pro-hub-benefits-blade-text-copy { font-size: 24px; margin-top: 28px; } .bar-top-text { font-size: 22px; line-height: 24px; text-align: center; font-weight: bold; margin: 30px auto 15px; } .re-contact-bar-box { background-color: #7a126b; display: flex; padding: 20px 0; justify-content: center; align-items: center; } .re-contact-bar-box p { font-weight: bold; color: white; font-size: 22px; line-height: 28px; } .re-contact-bar-box span { font-weight: normal; text-decoration: underline; } .re-contact-bar-box a { border-radius: 7px; font-size: 22px; line-height: 24px; padding-top: 2px; margin: 10px 15px; } .br-rwd { display: block; } @media screen and (max-width: 1600px) { .wpc-lenovo-pro-hub-benefits-blade-text-title { font-size: 26px; } .wpc-lenovo-pro-hub-benefits-blade-text-copy { font-size: 20px; margin-top: 24px; } .wpc-lenovo-pro-hub-benefits-blade-text, .wpc-lenovo-pro-hub-benefits-blade-text-right { top: 15%; } .navbox { margin: -40px auto 0; } .thinkpad-banner h3 { font-size: 3.6vw; line-height: 3.6vw; padding: 10px 0 4vw; } } @media screen and (max-width: 1280px) { .wpc-lenovo-pro-hub-benefits-blade-text, .wpc-lenovo-pro-hub-benefits-blade-text-right { top: 35%; padding: 18px; width: 40%; } .nav-card-text p { padding: 20px 0; font-size: 18px; line-height: 26px; } .software-text { font-size: 16px; line-height: 22px; } .navbox { width: 95%; } .skinny-banner-2 { font-size: 20px; line-height: 22px; } .tag { font-size: 16px; line-height: 20px; } .summary { font-size: 2.3rem; line-height: 2.3rem; } .cart-number { font-size: 18px; line-height: 20px; } .comment { font-size: 18px; line-height: 20px; } .pdp h3 { font-size: 26px; line-height: 32px; width: 80%; } .pdp-toptext { font-size: 20px; line-height: 22px; } .cart-number { padding: 10px 0 20px; } .thinkpad-banner-text { font-size: 18px; line-height: 22px; } .thinkpad-banner-text-add { font-size: 18px; line-height: 20px; } .thinkpad-banner { width: 100%; max-width: 1200px; } } @media screen and (max-width: 760px) { .show-pc { display: none; } .show-sp { display: block; } .bannerCon { text-align: center; top: 45%; transform: initial; } .bannerCon h1 { font-size: 18px; line-height: 24px; margin-bottom: 3px; } .bannerCon p { font-weight: bold; font-size: 32px; line-height: 32px; } .nav-card-text p { font-size: .8rem; line-height: 1rem; } .tbmcs_middle { width: 98%; } .tbmcsm_01 { width: 94%; margin: 20px auto; float: initial; } .tbmcsm_01 img.cn_banner01 { width: 100%; margin-right: 0; margin-bottom: 10px; } .tbmcsm_01_con { width: 100%; float: initial; position: relative; right: initial; top: initial; transform: initial; } .tbmcsm_01_con p { margin-bottom: 10px; font-size: 16px; line-height: 20px; } .tbmcsm_02 { width: 94%; margin: 0 auto; } .tbmcsm_03 { width: 70%; margin: 0 auto; flex-direction: column; margin-top: 20px; } .tableBoxNav { height: 40px; } .nav_ul li { line-height: 40px; font-size: 16px; line-height: 40px; padding: 0 15px; } .tbmcs_middle h2 { font-size: 20px; line-height: 20px; padding: 30px 0 10px 0; } .moreBtn { text-decoration: none; color: #fff; font-size: 14px; height: 32px; line-height: 32px; padding: 0 15px; display: inline-block; } .tbmcs_middle h4 { font-size: 16px; line-height: 20px; } .tbmcsm_02 li { width: calc((100% - 15px) / 2); width: -webkit-calc((100% - 15px) / 2); width: -moz-calc((100% - 15px) / 2); margin-right: 15px; margin-bottom: 10px; } .tbmcsm_02 li:nth-of-type(2), .tbmcsm_02 li:nth-of-type(4), .tbmcsm_02 li:nth-of-type(6), .tbmcsm_02 li:nth-of-type(8) { margin-right: 0; } .tbmcsm_03 section { width: 100%; margin-right: 0; margin-bottom: 20px; } .tbmcsm_03 section div span { font-size: 16px; } .tbmcsm_03 section ul li { font-size: 14px; line-height: 18px; } #tbmc_s4 .tbmcs_middle h4 { width: 100%; } .tbmcsm_04 { width: 80%; } .to_more_wrap { text-align: center; } .tbmcsm_05 { width: 60%; } .tbmcsm_05 li { width: 100%; margin-bottom: 15px; } .tbmcsm_05 li:nth-of-type(1) { margin-right: 0; } .icon_div img { width: 30px; } .icon_div { width: 155px; margin: 5px auto; } .icon_div span { font-size: 16px; line-height: 30px; text-align: center; } .tel_div { font-size: 14px; line-height: 18px; } .tbmcsm_05_div { width: 300px; } .tbmc_skinny_banner div { width: 94%; padding: 10px 0; } .tbmc_skinny_banner.blueBackground div.fl { font-size: 14px; line-height: 18px; float: initial; width: 100%; margin: 0 auto; height: 80px; } .tbmc_btn { height: 32px; line-height: 32px; font-size: 14px; padding: 0; width: 180px; float: initial; margin: 5px auto 0 auto; text-align: center; } .tbmc_skinny_banner.purpleBackground div.fl { font-size: 14px; line-height: 18px; float: initial; width: 100%; margin: 0 auto; height: 60px; } .tbn_wrap { width: 100%; overflow-x: scroll; } .nav_ul { width: 582px; } #tbmc_s6 .tbmcsm_02 li a { font-size: 14px; line-height: 18px; } #tbmc_s6 .tbmcsm_02 li a p { min-height: 90px; } .tbmcsm_flex { flex-direction: column; width: 60%; margin: 0 auto; } .tbmcsm_flex li { width: 100%; margin-right: 0; margin-bottom: 20px; } .bannerCon p.p_added { display: none; } .bannerCon a { display: none; } .tbmc_skinny_banner.blueBackground { display: block  !important; } .wpc-lenovo-pro-hub-benefits-blade-text, .wpc-lenovo-pro-hub-benefits-blade-text-right { top: 30%; } .wpc-lenovo-pro-hub-benefits-blade-text-title { font-size: 22px; } .wpc-lenovo-pro-hub-benefits-blade-text-copy { font-size: 16px; margin-top: 20px; } .pdp-img { width: 40%; padding-top: 60px; } .pdp-img img { width: 100%; } .pdp-info { width: 60%; } .summary { font-size: 2rem; line-height: 2rem; padding: 10px 0 0px; } .comment { font-size: 18px; line-height: 20px; } .cart-number { font-size: 16px; } .price { font-size: 1.8rem; line-height: 1.8rem; padding: 20px 0 30px; } .pdp-info a { font-size: 18px; line-height: 20px; } .banner-text { max-width: 70%; } .banner-btn { bottom: 15%; } .tableBoxBanner .tbmc_btn_red { margin-left: 10px; } .bar-top-text { width: 90%; } .navbox { margin: -30px auto 0; } .wpc-lenovo-pro-hub-benefits-blade-text, .wpc-lenovo-pro-hub-benefits-blade-text-right { background-color: none; position: inherit; border-radius: 0px; padding: 10px; left: 0%; width: 80%; top: 0%; margin: 0 auto; } .br-rwd { display: block; } .thinkpad-banner-text { font-size: 2.3vw; line-height: 2.3vw; } } @media screen and (max-width: 540px) { .bannerCon { width: 100%; left: 00%; } .navbox { column-gap: 10px; } .navbox { margin: 10px auto 0; } .nav-card { width: 33%; } .pdp h3 { font-size: 22px; line-height: 26px; } .pdp-toptext { font-size: 16px; line-height: 20px; width: 90%; margin: 0 auto; } .thinkpad-banner-text-add { font-size: 14px; margin-right: 10px; } .banner-btn .tbmc_btn { width: 140px; } .tableBoxBanner .tbmc_btn_red { margin-left: 0px; } .re-contact-bar-box p { font-size: 16px; margin: 0 5px; } .re-contact-bar-box a { font-size: 16px; margin: 0px 0px; } .skinny-banner-2 { font-size: 18px; line-height: 22px; } .tag { font-size: 14px; line-height: 18px; } .summary { font-size: 1.3rem; line-height: 1.5rem; } .cart-number { font-size: 14px; width: 90%; padding: 0px 0 10px; } .price { font-size: 1.5rem; line-height: 1.5rem; } .price span { display: block; font-size: 14px; } .pdp-box { column-gap: 10px; } .star-icon-box .yellow-icon { width: 15px; height: 15px; } .star-icon-box .gray-icon { width: 17px; height: 17px; } } @media screen and (min-width: 761px) and (max-width: 1000px) { .bannerCon p.p_added { display: none; } .bannerCon a { display: none; } .tbmc_skinny_banner.blueBackground { display: block  !important; } .tbmcs_middle { width: 100%; margin: 0 auto; } .bannerCon { width: 90%; left: 5%; } .bannerCon h1 { font-size: 30px; line-height: 30px; margin-bottom: 5px; } .bannerCon p { font-size: 20px; line-height: 20px; } .tbmcs_middle { width: 98%; } .tbmcsm_01 { width: 92%; } .tbmcsm_01 img.cn_banner01 { width: calc(45% - 25px); width: -webkit-calc(45% - 25px); width: -moz-calc(45% - 25px); height: auto; margin-right: 25px; } .tbmcsm_01_con { width: 55%; } .tbmcsm_01_con p { font-size: 16px; line-height: 20px; color: #000; margin-bottom: 10px; } .tbmcsm_02 { width: 96%; } .tbmcs_middle h4 { font-size: 18px; line-height: 22px; } .tbmcsm_03 { width: 60%; flex-direction: column; } .tbmcsm_03 section { margin-right: 0; width: 100%; margin-bottom: 20px; } .tbmcsm_03 section div span { line-height: 30px; } .tbmcsm_03 section ul { width: 55%; margin: 0 auto; } .tbmcsm_03 section ul li { font-size: 14px; line-height: 18px; } .tbmcsm_03 section ul .moreBtn { display: block; width: 200px; margin: 20px auto 0 auto; } #tbmc_s4 .tbmcs_middle h4 { width: 100%; } .to_more_wrap { text-align: center; } .icon_div img { width: 30px; } .icon_div { width: 160px; margin: 5px auto; } .icon_div span { font-size: 16px; line-height: 30px; text-align: center; } .tbmcsm_05 { width: 65%; } .tel_div { font-size: 16px; line-height: 20px; } .tbmcsm_05_div { width: 360px; } .nav_ul li { font-size: 18px; } .tbmc_btn { height: 36px; line-height: 36px; font-size: 16px; padding: 0 15px; } .tbmc_btn_black { margin-left: 15px; } .tbmc_skinny_banner.purpleBackground div.fl { width: calc(100% - 380px); width: -webkit-calc(100% - 380px); width: -moz-calc(100% - 380px); height: 60px; } .tbmc_skinny_banner.blueBackground div.fl { width: calc(100% - 180px); width: -webkit-calc(100% - 180px); width: -moz-calc(100% - 180px); height: 60px; } #tbmc_s6 .tbmcsm_02 li a { font-size: 14px; line-height: 18px; } #tbmc_s6 .tbmcsm_02 li a p { min-height: 115px; } .navbox { margin: -20px auto 0; } } @media screen and (min-width: 1001px) and (max-width: 1300px) { .bannerCon { width: 86%; left: 7%; top: 40%; } .bannerCon h1 { font-size: 25px; line-height: 26px; margin-bottom: 8px; } .bannerCon p { font-size: 35px; line-height: 35px; } .tbmc_btn_black { margin-left: 15px; } .tbmcs_middle { width: 98%; } .tbmcsm_02 { width: 96%; } .tbmcsm_01 { width: 92%; } }