@charset "utf-8"; #body_layout .inner{ width: 1248px;} .demo_wrap{ height: 560px; background: url(../../img/library/visual_bg.png) center center; position: relative;} .demo_wrap::before{ width: 1144px; height: 560px; background: url(../../img/library/visual_img.png) no-repeat center center; content: ""; position: absolute; top: 0; right: 0;} .demo_wrap .line{ width: 1px; height: 100%; background-color: #fff; opacity: 0.2; position: absolute; top: 0; left: 50%;} .demo_wrap .line::before{ width: 1px; height: 100%; background-color: #fff; content: ""; position: absolute; top: 0; left: -479px;} .demo_wrap .line::after{ width: 1px; height: 100%; background-color: #fff; content: ""; position: absolute; top: 0; left: 479px;} .demo_wrap .inner{ height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; position: relative; z-index: 1;} .demo_wrap h2{ font-family: 'Montserrat'; font-weight: 700; font-size: 40px; color: #fff; line-height: 52px;} .demo_wrap p{ width: 454px; font-weight: 700; font-size: 21px; color: #fff; line-height: 32px; margin: 8px 0 0 0;} .demo_wrap p + p{ font-weight: 400; font-size: 18px; color: rgba(255, 255, 255, 0.7); line-height: 25px; margin: 33px 0 0 0;} article{ position: relative;} article h2{ font-weight: 700; font-size: 34px; color: #1c1c1c; text-align: left; line-height: 49px; display: inline-block;} article .slide_wrap .btn{ padding: 0; margin: 0 0 0 505px; display: inline-block; border: 3px solid #ff5151; position: absolute; top: -120px; left: 50%;} article .slide_wrap .btn a{ width: 54px; height: 54px; background: no-repeat center center; text-indent: -9999px; display: inline-block; float: left; } article .slide_wrap .btn a + a{ margin-left: -2px;} article .slide_wrap .btn a.btn_prev{ background-image: url(../../img/library/slide_btn_prev.png);} article .slide_wrap .btn a.btn_next{ background-image: url(../../img/library/slide_btn_next.png);} article .slide_wrap .btn a.btn_prev.on{ background-image: url(../../img/library/slide_btn_prev_on.png);} article .slide_wrap .btn a.btn_next.on{ background-image: url(../../img/library/slide_btn_next_on.png);} article .slide_wrap .btn a.btn_prev.on:hover{ background-image: url(../../img/library/slide_btn_prev_on.png);} article .slide_wrap .btn a.btn_next.on:hover{ background-image: url(../../img/library/slide_btn_next_on.png);} .product_wrap{ height: auto; padding: 0; margin: 100px 0 0 0;} .product_wrap .slide_wrap{ width: 100%; padding: 0; margin: 56px 0 0 0; display: inline-block; position: relative;} .product_wrap .slide_wrap .list{ width: 100%; height: 471px; padding: 0; margin: 0; display: inline-block; overflow: hidden; position: relative;} .product_wrap .slide_wrap .list .wrap{ padding: 0; margin: 0 0 0 -623px; display: inline-block; position: absolute; top: 0; left: 50%;} .product_wrap .slide_wrap .list ul{ width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; position: relative; top: 0; left: 0;} .product_wrap .slide_wrap li{ width: 405px; height: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; float: left;} .product_wrap .slide_wrap li + li{ margin-left: 16px;} .product_wrap .slide_wrap li a{ width: 100%; display: flex; flex-direction: column;} .product_wrap .slide_wrap li a:hover .tit .btn{ background-color: #1c1f29;} .product_wrap .slide_wrap li .thumb{ width: 100%; height: 265px; background: no-repeat center center; background-size: cover; padding: 0; margin: 0; display: inline-block;} .product_wrap .slide_wrap li .tit{ margin: 18px 0 0 0; display: flex; justify-content: space-between;} .product_wrap .slide_wrap li .tit .txt{ font-size: 22px; color: #1c1c1c; line-height: 30px; flex: 1;} .product_wrap .slide_wrap li .tit .btn{ width: 44px; height: 44px; background: url(../../img/library/ico_btn_link.png) no-repeat center center #ff5151; text-indent: -9999px; margin: 0 0 0 10px; display: inline-block; border: 0; border-radius: 50%; position: static;} .product_wrap .slide_wrap li.n1 .thumb{ background-image: url(../../img/library/product_img_1.png);} .product_wrap .slide_wrap li.n2 .thumb{ background-image: url(../../img/library/product_img_2.png);} .product_wrap .slide_wrap li.n3 .thumb{ background-image: url(../../img/library/product_img_3.png);} .product_wrap .slide_wrap li.n4 .thumb{ background-image: url(../../img/library/product_img_4.png);} .product_wrap .slide_wrap li.n5 .thumb{ background-image: url(../../img/library/product_img_5.png);} .product_wrap .slide_wrap li.n6 .thumb{ background-image: url(../../img/library/product_img_6.png);} .product_wrap .slide_wrap li.n7 .thumb{ background-image: url(../../img/library/product_img_7.png);} .product_wrap .slide_wrap li.n8 .thumb{ background-image: url(../../img/library/product_img_8.png);} .product_wrap .slide_wrap li.n9 .thumb{ background-image: url(../../img/library/product_img_9.png);} .en .product_wrap .slide_wrap li.n7 .thumb{ background-image: url(../../img/library/product_enimg_7.png);} /* .en .product_wrap .slide_wrap li.n7{display:none;} */ .report_wrap{ margin: 130px 0 0 0;} .report_wrap ul{ margin: 56px 0 0 0; display: flex; justify-content: space-between;} .report_wrap li{ margin: 0 13px 0 0; flex: 1;} .report_wrap li + li{ margin: 0 0 0 13px;} .report_wrap li a{ width: 100%; height: 120px; background-color: #1c1f29; padding: 0 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;} .report_wrap li .tit{ font-size: 22px; color: #fff; line-height: 32px; flex: 1;} .report_wrap li .tit em{ font-size: 16px; color: #fff; line-height: 26px; margin: 2px 0 0 0; display: block;} .report_wrap li .link{ width: 140px; height: 40px; background-color: #3a3d49; font-size: 12px; color: #fff; line-height: 40px; padding: 0 0 0 18px; margin: 0 0 0 10px; border-radius: 20px;} .en .report_wrap li .link{ width: 150px;} .report_wrap li .link::after{ width: 40px; height: 40px; background: url(../../img/library/ico_btn_down.png) no-repeat center center #ff5151; content: ""; display: inline-block; vertical-align: top; float: right; border-radius: 50%;} .report_wrap li a:hover .link{background-color: #ff5151;} .bg_color{ background-color: #f8f8fa; padding: 94px 0 100px 0; margin: 100px 0 0 0;} .customer_wrap{ height: auto; padding: 0; margin: 0;} .customer_wrap .slide_wrap{ width: 100%; padding: 0; margin: 56px 0 0 0; display: inline-block; position: relative;} .customer_wrap .slide_wrap .list{ width: 100%; height: 471px; padding: 0; margin: 0; display: inline-block; overflow: hidden; position: relative;} .customer_wrap .slide_wrap .list .wrap{ padding: 0; margin: 0 0 0 -623px; display: inline-block; position: absolute; top: 0; left: 50%;} .customer_wrap .slide_wrap .list ul{ width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; position: relative; top: 0; left: 0;} .customer_wrap .slide_wrap li{ width: 405px; height: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; float: left;} .customer_wrap .slide_wrap li + li{ margin-left: 16px;} .customer_wrap .slide_wrap li a{ width: 100%; display: flex; flex-direction: column;} .customer_wrap .slide_wrap li a:hover .tit .btn{ background-color: #1c1f29;} .customer_wrap .slide_wrap li .thumb{ width: 100%; height: 195px; background: no-repeat center center; background-size: cover; padding: 0; margin: 0; display: inline-block;} .customer_wrap .slide_wrap li .tit{ margin: 18px 0 0 0; display: flex; justify-content: space-between;} .customer_wrap .slide_wrap li .tit .txt{ font-size: 16px; color: #1c1c1c; line-height: 22px; flex: 1;} .customer_wrap .slide_wrap li .tit .txt em{ font-weight: 700; font-size: 22px; display: block;} .customer_wrap .slide_wrap li .tit .btn{ width: 44px; height: 44px; background: url(../../img/library/ico_btn_link.png) no-repeat center center #ff5151; text-indent: -9999px; margin: 0 0 0 10px; display: inline-block; border: 0; border-radius: 50%; position: static;} .customer_wrap .slide_wrap li.n1 .thumb{ background-image: url(../../img/library/customer_img_1.png);} /*.customer_wrap .slide_wrap li.n2 .thumb{ background-image: url(../../img/library/customer_img_2.png);}*/ .customer_wrap .slide_wrap li.n3 .thumb{ background-image: url(../../img/library/customer_img_3.png);} .customer_wrap .slide_wrap li.n4 .thumb{ background-image: url(../../img/library/customer_img_4.png);} .customer_wrap .slide_wrap li.n5 .thumb{ background-image: url(../../img/library/customer_img_5.png);} .customer_wrap .slide_wrap li.n6 .thumb{ background-image: url(../../img/library/customer_img_6.png);} .customer_wrap .slide_wrap li.n7 .thumb{ background-image: url(../../img/library/customer_img_7.png);} .customer_wrap .slide_wrap li.n8 .thumb{ background-image: url(../../img/library/customer_img_8.png);} .customer_wrap .slide_wrap li.n9 .thumb{ background-image: url(../../img/library/customer_img_9.png);} .customer_wrap .slide_wrap li.n10 .thumb{ background-image: url(../../img/library/customer_img_10.png);} .customer_wrap .slide_wrap li.n11 .thumb{ background-image: url(../../img/library/customer_img_11.png);} .customer_wrap .slide_wrap li.n12 .thumb{ background-image: url(../../img/library/customer_img_12.png);} .customer_wrap .slide_wrap li.n13 .thumb{ background-image: url(../../img/library/customer_img_13.png);} .customer_wrap .slide_wrap li.n14 .thumb{ background-image: url(../../img/library/customer_img_14.png);} .customer_wrap .slide_wrap li.n15 .thumb{ background-image: url(../../img/library/customer_img_15.png);} .customer_wrap .slide_wrap li.n16 .thumb{ background-image: url(../../img/library/customer_img_16.png);} .solution_wrap{ margin: 128px 0 0 0;} .solution_wrap .video_wrap{ height: 488px; background-color: #1c1f29; margin: 51px 0 0 0; display: flex;} .solution_wrap .video_wrap .video{ background: no-repeat center center; background-size: cover; flex: 1; position: relative;} .solution_wrap .video_wrap .video span{ width: 100%; height: 100%; background: no-repeat center center; background-size: cover; position: absolute; top: 0; left: 0; z-index: 1;} .solution_wrap .video_wrap .tit{ width: 378px; color: #fff; display: flex; flex-wrap: wrap; align-items: center; padding: 0 50px; position: relative;} .solution_wrap .video_wrap .tit > p{ font-weight: 700; font-size: 23px; color: #fff; line-height: 36px;} .solution_wrap .video_wrap .tit > p span{ display: block;} .solution_wrap .video_wrap .page{ font-weight: 700; font-size: 20px; color: #fff; position: absolute; bottom: 32px; right: 36px;} .solution_wrap .video_wrap .page p{ display: inline-block;} .solution_wrap .slide_wrap{ width: 100%; padding: 0; margin: 12px 0 0 0; display: flex; flex-direction: column; position: relative;} .solution_wrap .slide_wrap .list{ width: 100%; height: 134px; padding: 0; margin: 0; display: inline-block; overflow: hidden; position: relative;} .solution_wrap .slide_wrap .list .wrap{ padding: 0; margin: 0 0 0 -623px; display: inline-block; position: absolute; top: 0; left: 50%;} .solution_wrap .slide_wrap .list ul{ width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; position: relative; top: 0; left: 0;} .solution_wrap .slide_wrap li{ width: 240px; height: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; float: left;} .solution_wrap .slide_wrap li + li{ margin-left: 12px;} .solution_wrap .slide_wrap li a{ width: 100%; height: 134px; background: no-repeat center center; background-size: cover; font-size: 0; text-indent: -9999px; display: inline-block;} .solution_wrap .slide_wrap li a.on{ border: 3px solid #ff5151;} .solution_wrap .slide_wrap .btn{ margin: 0; position: static; top: auto; left: auto;} .solution_wrap .control{ margin: 27px 0 0 0; display: flex; justify-content: space-between;} .solution_wrap .control .total{ display: flex; flex: 1; align-items: center;} .solution_wrap .control p{ font-weight: 700; font-size: 20px; color: #1c1c1c; line-height: 60px;} .solution_wrap .control .bar{ height: 6px; background-color: #e7e7e7; margin: 0 24px 0 12px; overflow: hidden; flex: 1; position: relative;} .solution_wrap .control .bar span{ width: 0; height: 6px; background-color: #ff5151; position: absolute; top: 0; left: 0;} .dataset_wrap{ margin: 129px 0 0 0;} .dataset_wrap .sub_txt{margin-top: 15px;} .dataset_wrap .sub_txt .sub_link{color: #248cfe;text-decoration: underline;} .dataset_wrap .sub_txt .sub_link:focus, .dataset_wrap .sub_txt .sub_link:hover{text-decoration: none;font-weight: 500;} .dataset_wrap ul{ margin: 25px 0 0 0; display: flex; justify-content: space-between;} .dataset_wrap ul.fc{ margin: 56px 0 0 0;} .dataset_wrap li{ height: 110px; background-color: #fff; padding: 0; margin: 0 15px 0 0; display: flex; flex: 1; align-items: center; justify-content: space-between;} .dataset_wrap li:last-child{ margin-right: 0;} .dataset_wrap li.dataset_none{background-color: transparent;} .dataset_wrap li a{ width: 100%; height: 110px; padding: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;} .dataset_wrap li .tit{ font-weight: 700; font-size: 22px; color: #1c1c1c; line-height: 32px; flex: 1;} .dataset_wrap li .link{ width: 105px; height: 40px; background-color: #f9f9f9; font-size: 12px; color: #7a7c8b; line-height: 40px; padding: 0 0 0 18px; margin: 0 0 0 10px; border-radius: 20px;} .dataset_wrap li .link::after{ width: 40px; height: 40px; background: url(../../img/library/ico_btn_link.png) no-repeat center center #ff5151; content: ""; display: inline-block; vertical-align: top; float: right; border-radius: 50%;} .dataset_wrap li a:hover .link{background-color: #ff5151; color: #fff;} #public{height: 110px;} .en .dataset_wrap.public, .en .dataset_wrap .sub_txt{display: none;} .dataset_wrap.public{margin-top: 0;} .event_wrap{ margin: 87px 0 196px 0;} .event_wrap .slide_wrap{ width: 100%; padding: 0 94px; margin: 49px 0 0 0; display: flex; flex-direction: column; position: relative;} .event_wrap .slide_wrap .list{ width: 100%; height: 160px; padding: 0; margin: 0; display: inline-block; overflow: hidden; position: relative;} .event_wrap .slide_wrap .list .wrap{ padding: 0; margin: 0; display: inline-block; position: absolute; top: 0; left: 0; right: 0;} .event_wrap .slide_wrap .list ul{ width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; position: relative; top: 0; left: 0;} .event_wrap .slide_wrap li{ width: 200px; height: 160px; background-color: #f8f8fa; margin: 0; float: left;} .event_wrap .slide_wrap li a{ width: 100%; height: 100%; padding: 8px 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative;} .event_wrap .slide_wrap li a::before{ width: 1px; height: 54px; background-color: #e2e1e1; content: ""; position: absolute; top: 48px; left: 75px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg);} .event_wrap .slide_wrap li + li{ margin-left: 15px;} .event_wrap .slide_wrap li .yyyymm{ font-family: 'Montserrat'; font-weight: 500; font-size: 20px; color: #1c1c1c; line-height: 30px; position: absolute; top: 8px; left: 16px;} .event_wrap .slide_wrap li .yyyymm span{ font-weight: 700; font-size: 30px; color: #ff5151; line-height: 30px; display: block;} .event_wrap .slide_wrap li .txt{ position: relative;min-height: 96px;background: no-repeat right top; background-size: auto 50px; font-weight: 500; font-size: 14px; color: #7a7c8b; text-align: right; line-height: 18px; padding: 55px 0 5px 0;} .event_wrap .slide_wrap li.n1 .txt{ background-image: url(../../img/library/event_logo_1.png);} .event_wrap .slide_wrap li.n2 .txt{ background-image: url(../../img/library/event_logo_2.png);} .event_wrap .slide_wrap li.n3 .txt{ background-image: url(../../img/library/event_logo_3.png);} .event_wrap .slide_wrap li.n4 .txt{ background-image: url(../../img/library/event_logo_4.png);} .event_wrap .slide_wrap li.n5 .txt{ background-image: url(../../img/library/event_logo_5.png);} .event_wrap .slide_wrap li.n6 .txt{ background-image: url(../../img/library/event_logo_6.png);} .event_wrap .slide_wrap li.n7 .txt{ background-image: url(../../img/library/event_logo_7.png); background-size: auto 40px; } .event_wrap .slide_wrap li.n8 .txt{ background-image: url(../../img/library/event_logo_8.png); background-size: auto 40px; } .event_wrap .slide_wrap li.n9 .txt{ background-image: url(../../img/library/event_logo_9.png);} .event_wrap .slide_wrap li.n10 .txt{ background-image: url(../../img/library/event_logo_10.png);} .event_wrap .slide_wrap li.n11 .txt{ background-image: url(../../img/library/event_logo_11.png);} .event_wrap .slide_wrap li.n12 .txt{ background-image: url(../../img/library/event_logo_12.png);} .event_wrap .slide_wrap li.n13 .txt{ background-image: url(../../img/library/event_logo_13.png);} .event_wrap .slide_wrap li.n14 .txt{ background-image: url(../../img/library/event_logo_14.png);} .event_wrap .slide_wrap li.n15 .txt{ background-image: url(../../img/library/event_logo_15.png);} .event_wrap .slide_wrap li.n16 .txt{ background-image: url(../../img/library/event_logo_16.png); background-size: auto 35px; } .event_wrap .slide_wrap li.n17 .txt{ background-image: url(../../img/library/event_logo_17.png);} .event_wrap .slide_wrap li.n18 .txt{ background-image: url(../../img/library/event_logo_18.png);} .event_wrap .slide_wrap li.n19 .txt{ background-image: url(../../img/library/event_logo_19.png);} .event_wrap .slide_wrap li.n20 .txt{ background-image: url(../../img/library/event_logo_20.png);} .event_wrap .slide_wrap li.n21 .txt{ background-image: url(../../img/library/event_logo_21.png);} .event_wrap .slide_wrap li.n22 .txt{ background-image: url(../../img/library/event_logo_22.png);} .event_wrap .slide_wrap li.n23 .txt{ background-image: url(../../img/library/event_logo_23.png); background-size: auto 30px; background-position-y: 15px; } .event_wrap .slide_wrap li.n24 .txt{ background-image: url(../../img/library/event_logo_24.png);} .event_wrap .slide_wrap li.n25 .txt{ background-image: url(../../img/library/event_logo_25.png); background-size: auto 20px; background-position-y: 20px; } .event_wrap .slide_wrap li.n26 .txt{ background-image: url(../../img/library/event_logo_26.png);} .event_wrap .slide_wrap li.n27 .txt{ background-image: url(../../img/library/event_logo_27.png);} .event_wrap .slide_wrap li.n28 .txt{ background-image: url(../../img/library/event_logo_28.png);} .event_wrap .slide_wrap li.n29 .txt{ background-image: url(../../img/library/event_logo_29.png);} .event_wrap .slide_wrap li.n30 .txt{ background-image: url(../../img/library/event_logo_30.png);} .event_wrap .slide_wrap li.n31 .txt{ background-image: url(../../img/library/event_logo_31.png);} .event_wrap .slide_wrap li.n32 .txt{ background-image: url(../../img/library/event_logo_32.png);} /* .event_wrap .slide_wrap li.n7 .txt::before, .event_wrap .slide_wrap li.n8 .txt::before{ position: absolute; display: block; content: 'IDEA HACKATHON'; right: 0;top: 23%; color: #333;font-size: 13px; font-weight: 600;} */ .event_wrap .slide_wrap .btn{ margin: 0; border: 0; position: static; top: auto; left: auto;} .event_wrap .slide_wrap .btn a{ width: 60px; height: 60px; margin: -30px 0 0 0; border: 3px solid #e7e7e7; position: absolute; top: 50%;} .event_wrap .slide_wrap .btn a.on{ border-color: #ff5151;} .event_wrap .slide_wrap .btn a.btn_prev{ left: 0;} .event_wrap .slide_wrap .btn a.btn_next{ right: 0;} .lpOn{ overflow: hidden;} .lpOn #lp_layout, .lpOn #lp_layout .lp_wrap.on{ display: inline-block;} #lp_layout{ width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; z-index: 99999;} #lp_layout::before{ width: 100%; height: 100%; background-color: #000; content: ""; opacity: 0.8; position: absolute; top: 0; left: 0; z-index: -1;} #lp_layout .lp_wrap{ width: 736px; background-color: #fff; display: none; overflow: hidden; border-radius: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);} #lp_layout .lp_wrap.type1, #lp_layout .lp_wrap.type2, #lp_layout .lp_wrap.type3, #lp_layout .lp_wrap.type4, #lp_layout .lp_wrap.type5, #lp_layout .lp_wrap.type6, #lp_layout .lp_wrap.type7, #lp_layout .lp_wrap.type8, #lp_layout .lp_wrap.type9{ width: 1175px;} #lp_layout .lp_wrap .top_wrap{ width: 100%; background-color: #f0f0f1; padding: 0; margin: 0; display: table;} #lp_layout .lp_wrap .top_wrap h2{ width: 100%; height: 95px; font-weight: 500; font-size: 32px; color: #1c1c1c; text-align: center; line-height: 29px; padding: 0 60px; display: table-cell; vertical-align: middle;} #lp_layout .lp_wrap .body_wrap{ width: 100%; padding: 35px; display: flex; justify-content: center;} #lp_layout .lp_wrap .flexBox1{ width: 510px; display: none;} #lp_layout .lp_wrap.type1 .flexBox1.type1, #lp_layout .lp_wrap.type2 .flexBox1.type2, #lp_layout .lp_wrap.type3 .flexBox1.type3, #lp_layout .lp_wrap.type4 .flexBox1.type4, #lp_layout .lp_wrap.type5 .flexBox1.type5, #lp_layout .lp_wrap.type6 .flexBox1.type6, #lp_layout .lp_wrap.type7 .flexBox1.type7, #lp_layout .lp_wrap.type8 .flexBox1.type8, #lp_layout .lp_wrap.type9 .flexBox1.type9{ display: flex; flex-direction: column; justify-content: flex-start;} #lp_layout .lp_wrap .flexBox1.type1 h3{ font-family: 'Montserrat'; font-weight: 700; font-size: 28px; color: #1c1c1c; line-height: 30px; letter-spacing: -1.5px;} #lp_layout .lp_wrap .flexBox1.type1 ul{ margin: 18px 0 0 0; display: flex; flex-direction: column; justify-content: space-between;} #lp_layout .lp_wrap .flexBox1.type1 li{ height: 260px; background: no-repeat center center; background-size: cover;} #lp_layout .lp_wrap .flexBox1.type1 li + li{ margin-top: 9px;} #lp_layout .lp_wrap .flexBox1.type1 li.img1{ background-image: url(../../img/library/lp_infoPop_type1_img1.png);} #lp_layout .lp_wrap .flexBox1.type1 li.img2{ background-image: url(../../img/library/lp_infoPop_type1_img2.png);} #lp_layout .lp_wrap .flexBox1.type2 h3{ font-family: 'Montserrat'; font-weight: 700; font-size: 28px; color: #1c1c1c; line-height: 30px; letter-spacing: -1.5px;} #lp_layout .lp_wrap .flexBox1.type2 p{ font-weight: 500; font-size: 20px; color: #1c1c1c; line-height: 29px; margin: 31px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type2 p strong{ font-weight: 500; font-size: 20px; color: #7083c8; line-height: 29px; margin: 22px 0 0 0; display: block;} #lp_layout .lp_wrap .flexBox1.type2 ul{ height: 343px; margin: 19px 0 0 0; position: relative;} #lp_layout .lp_wrap .flexBox1.type2 li{ width: 196px; height: 196px; background: no-repeat center 33px; font-weight: 500; font-size: 16px; color: #3b3e43; text-align: center; line-height: 22px; letter-spacing: -0.5px; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; border: 2px solid #b8c2e4; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);} #lp_layout .lp_wrap .flexBox1.type2 li.n1{ background-image: url(../../img/library/lp_infoPop_type2_ico1.png); padding: 0 0 59px 0; margin-top: -73px; z-index: 1;} #lp_layout .lp_wrap .flexBox1.type2 li.n2{ background-image: url(../../img/library/lp_infoPop_type2_ico2.png); background-position: center 25px; font-size: 14px; line-height: 18px; padding: 0 0 26px 0; margin-top: 72px; margin-left: 85px;} #lp_layout .lp_wrap .flexBox1.type2 li.n3{ background-image: url(../../img/library/lp_infoPop_type2_ico3.png); background-position: center 25px; font-size: 14px; line-height: 18px; padding: 0 0 26px 0; margin-top: 72px; margin-left: -85px;} #lp_layout .lp_wrap .flexBox1.type3 ul{ margin: 0 0 0 0; display: flex; flex-direction: column; justify-content: space-between;} #lp_layout .lp_wrap .flexBox1.type3 li{ height: 574px; background: no-repeat center center; background-size: cover;} #lp_layout .lp_wrap .flexBox1.type3 li.img1{ background-image: url(../../img/library/lp_infoPop_type3_img.png);} #lp_layout .lp_wrap.type4 .flexBox1.type4{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type4 h3{ font-weight: 500; font-size: 28px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type4 p{ font-weight: 500; font-size: 20px; color: #1c1c1c; line-height: 29px; margin: 16px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type4 ul{ margin: 49px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type4 li{ background: no-repeat left center; font-weight: 500; font-size: 20px; color: #1c1c1c; line-height: 71px; padding: 0 0 0 95px;} #lp_layout .lp_wrap .flexBox1.type4 li + li{ margin: 24px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type4 li span{ font-weight: 300; color: #5d626d;} #lp_layout .lp_wrap .flexBox1.type4 li.txt1{ background-image: url(../../img/library/lp_infoPop_type4_ico1.png);} #lp_layout .lp_wrap .flexBox1.type4 li.txt2{ background-image: url(../../img/library/lp_infoPop_type4_ico2.png);} #lp_layout .lp_wrap .flexBox1.type4 .img{ height: 330px; background: url(../../img/library/lp_infoPop_type4_img.png) no-repeat center center; background-size: cover; margin: 40px 0 0 0;} #lp_layout .lp_wrap.type5 .flexBox1.type5{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type5 p{ font-weight: 500; font-size: 28px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type5 ul{ margin: 20px 0 0 0; display: flex; justify-content: space-between;} #lp_layout .lp_wrap .flexBox1.type5 li{ background: no-repeat center top; background-size: 100% auto; font-size: 14px; color: #3b3e44; line-height: 24px; padding: 94px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type5 li.n1{ width: 248px; background-image: url(../../img/library/lp_infoPop_type5_img1.png);} #lp_layout .lp_wrap .flexBox1.type5 li.n2{ width: 248px; background-image: url(../../img/library/lp_infoPop_type5_img2.png);} #lp_layout .lp_wrap.type6 .flexBox1.type6{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type6 h3{ font-weight: 500; font-size: 28px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type6 p{ font-weight: 500; font-size: 24px;letter-spacing: 1.25px; color: #1c1c1c; line-height: 29px; margin: 16px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type6 .img{ height: 240px; background: url(../../img/library/lp_infoPop_type6_img.png) no-repeat center center; margin: 40px 0 0 0;} #lp_layout .lp_wrap.type7 .flexBox1.type7{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type7 h3{ font-weight: 500; font-size: 28px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type7 p{ font-weight: 500; font-size: 24px;letter-spacing: 1.25px; color: #1c1c1c; line-height: 29px; margin: 16px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type7 p.img_tit{text-align: center; font-size: 14px;line-height: 24px;margin: 5px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type7 img{max-width: 100%;} #lp_layout .lp_wrap.type8 .flexBox1.type8{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type8 h3{ font-weight: 500; font-size: 24px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type8 p{ font-weight: 500; font-size: 20px;letter-spacing: 1.25px; color: #1c1c1c; line-height: 29px; margin: 16px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type8 p.img_tit{text-align: center; font-size: 14px;line-height: 24px;margin: 5px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type8 img{max-width: 100%;} #lp_layout .lp_wrap.type9 .flexBox1.type9{ justify-content: center;} #lp_layout .lp_wrap .flexBox1.type9 h3{ font-weight: 500; font-size: 28px; color: #1c1c1c; line-height: 39px;} #lp_layout .lp_wrap .flexBox1.type9 p{ font-weight: 500; font-size: 24px;letter-spacing: 1.25px; color: #1c1c1c; line-height: 29px; margin: 16px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type9 p.img_tit{text-align: center; font-size: 14px;line-height: 24px;margin: 5px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type9 img{max-width: 100%;} /* #lp_layout .lp_wrap .flexBox1.type6 ul{ margin: 49px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type6 li{ background: no-repeat left center; font-weight: 500; font-size: 20px; color: #1c1c1c; line-height: 71px; padding: 0 0 0 95px;} #lp_layout .lp_wrap .flexBox1.type6 li + li{ margin: 24px 0 0 0;} #lp_layout .lp_wrap .flexBox1.type6 li span{ font-weight: 300; color: #5d626d;} #lp_layout .lp_wrap .flexBox1.type6 li.txt1{ background-image: url(../../img/library/lp_infoPop_type4_ico1.png);} #lp_layout .lp_wrap .flexBox1.type6 li.txt2{ background-image: url(../../img/library/lp_infoPop_type4_ico2.png);} */ #lp_layout .lp_wrap.type1 .flexBox2, #lp_layout .lp_wrap.type2 .flexBox2, #lp_layout .lp_wrap.type3 .flexBox2, #lp_layout .lp_wrap.type4 .flexBox2, #lp_layout .lp_wrap.type5 .flexBox2, #lp_layout .lp_wrap.type6 .flexBox2, #lp_layout .lp_wrap.type7 .flexBox2, #lp_layout .lp_wrap.type8 .flexBox2, #lp_layout .lp_wrap.type9 .flexBox2{ width: 560px; padding-left: 35px; margin-left: 35px; border-left: 2px solid #b8c2e4;} /*#lp_layout .lp_wrap .flexBox2{}*/ #lp_layout .lp_wrap .lp_close{ width: 27px; height: 27px; background: url(../../img/blackolive/lp_ico_close.png) no-repeat center center; text-indent: -9999px; display: inline-block; position: absolute; top: 34px; right: 20px;} #lp_layout .bo_wrap .agree_wrap{ width: 100%; padding: 0; margin: 18px 0 0 0; display: inline-block;} #lp_layout .bo_wrap .agree_wrap .agree_box{ display: inline-block; position: relative;} #lp_layout .bo_wrap .agree_wrap .agree_box input{ position: absolute; left: -999999px;} #lp_layout .bo_wrap .agree_wrap .agree_box label{ font-size: 13px; color: #3b3e43; line-height: 16px; letter-spacing: -0.5px; padding: 0 0 0 23px; margin: 0; display: inline-block; position: relative;} #lp_layout .bo_wrap .agree_wrap .agree_box label::before{ width: 16px; height: 16px; content: ""; box-sizing: border-box; border: 2px solid #7185c9; position: absolute; top: 0; left: 0;} #lp_layout .bo_wrap .agree_wrap .agree_box input:checked+label::before{ background: url(../../img/blackolive/lp_ico_ck.png) no-repeat center center; border: 0;} #lp_layout .bo_wrap .agree_wrap ul{ width: 100%; padding: 0 0 0 23px; margin: 0 0 7px 0; display: inline-block;} #lp_layout .bo_wrap .agree_wrap li{ width: 100%; font-size: 13px; color: #616771; line-height: 20px; letter-spacing: -0.5px; padding: 0 0 0 8px; margin: 0; display: inline-block; position: relative;} #lp_layout .bo_wrap .agree_wrap li::before{ line-height: 16px; content: "-"; display: inline-block; position: absolute; top: 0; left: 0;} #lp_layout .bo_wrap .agree_wrap li a{ color: #3b3e43; text-decoration: underline;} #lp_layout .bo_wrap .btn_wrap{ width: 100%; text-align: center; padding: 0; margin: 47px 0 0 0; display: inline-block;} #lp_layout .bo_wrap .btn_wrap a{ font-weight: 500; font-size: 20px; color: #fff; text-align: center; line-height: 68px; padding: 0 30px 0 90px; display: inline-block; box-sizing: border-box; border-radius: 3px;} #lp_layout .bo_wrap .input_wrap{ width: 100%; padding: 0; margin: 0; display: inline-block;} #lp_layout .bo_wrap .input_wrap li{ width: 100%; padding: 0; margin: 0; display: inline-block;} #lp_layout .bo_wrap .input_wrap li + li{ margin: 16px 0 0 0;} #lp_layout .bo_wrap .input_wrap input{ width: 100%; height: 56px; background-color: #fff; font-weight: 500; font-size: 16px; color: #3b3e43; line-height: 56px; padding: 0 22px; margin: 0; display: inline-block; border: 2px solid #b8c2e4;} #lp_layout .bo_wrap .input_wrap input::placeholder{ font-weight: 400;} #lp_layout .bo_wrap .btn_wrap a.type_more{ background: url(../../img/blackolive/lp_ico_link.png) no-repeat left center #f75555;} #lp_layout .bo_wrap .btn_wrap a.type_down{ background: url(../../img/blackolive/lp_ico_down.png) no-repeat left center #f75555;} #lp_layout .lp_event{ width: 1059px; padding: 50px 108px 47px 108px; overflow: visible;} #lp_layout .lp_event .event_slide{ display: flex; flex-direction: column; justify-content: space-between; position: relative;} #lp_layout .lp_event .event_slide p{ font-family: 'Montserrat'; font-weight: 700; font-size: 40px; text-align: center; color: #000; line-height: 30px;} #lp_layout .lp_event .event_slide p span{ color: #ff5151;} #lp_layout .lp_event .event_slide .slide_wrap{ margin: 30px 0 33px 0;} #lp_layout .lp_event .event_slide .slide_wrap ul{ display: flex; justify-content: space-between;} #lp_layout .lp_event .event_slide .slide_wrap li{ width: 420px; height: 280px; background: no-repeat center center; background-size: cover;} #lp_layout .lp_event .event_slide .tit{ height: 60px; display: flex; justify-content: center;} #lp_layout .lp_event .event_slide .tit img{ width: auto; height: 50px; display: inline-block;} #lp_layout .lp_event .event_slide .tit h2{ font-weight: 500; font-size: 24px; color: #1c1c1c; line-height: 29px; padding-left: 86px; position: relative;} /* #lp_layout .lp_event .event_slide[data-num='7'] .tit h2, #lp_layout .lp_event .event_slide[data-num='8'] .tit h2{ padding-left: 0px;} */ #lp_layout .lp_event .event_slide .tit h2::before{ width: 55px; height: 1px; background-color: #d1d1d3; content: ""; transform: rotate(-68deg); position: absolute; top: 50%; left: 10px;} /* #lp_layout .lp_event .event_slide[data-num='7'] .tit h2::before, #lp_layout .lp_event .event_slide[data-num='8'] .tit h2::before{ width: 0px; content: none;} */ #lp_layout .lp_event .event_slide .tit span{ font-weight: 500; font-size: 18px; color: #7a7c8b; line-height: 20px; margin-top: 1px; display: block; position: relative;} #lp_layout .lp_event .event_slide .tit h2 em{display: block;font-size: 18px;line-height: 20px;} #lp_layout .lp_event .event_slide .btn a{ width: 54px; height: 54px; background: no-repeat center center; text-indent: -9999px; display: inline-block; border: 3px solid #e7e7e7; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);} #lp_layout .lp_event .event_slide .btn a:hover{ border-color: #ff5151;} #lp_layout .lp_event .event_slide .btn a.btn_left{ background-image: url(../../img/library/slide_btn_prev.png); left: -200px;} #lp_layout .lp_event .event_slide .btn a.btn_next{ background-image: url(../../img/library/slide_btn_next.png); right: -200px;} #lp_layout .lp_event .event_slide .btn a.btn_left:hover{ background-image: url(../../img/library/slide_btn_prev_on.png);} #lp_layout .lp_event .event_slide .btn a.btn_next:hover{ background-image: url(../../img/library/slide_btn_next_on.png);} #lp_layout .lp_event .lp_close{ width: 29px; height: 29px; top: 35px; right: 31px;} .en #lp_layout .lp_wrap .flexBox1 p br{ display: none;} .en #lp_layout .lp_wrap .flexBox1.type2 li.n2, .en #lp_layout .lp_wrap .flexBox1.type2 li.n3{ font-size: 16px; line-height: 22px; padding-bottom: 26px;} #lp_layout .lpClose{ width: 30px; height: 30px; text-indent: -9999px; display: inline-block; overflow: hidden; position: absolute; top: 26px; right: 26px; z-index: 1;} #lp_layout .lpClose::before, #lp_layout .lpClose::after{ background-color: #bfbfbf; content: ''; position: absolute; transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);} #lp_layout .lpClose::before{ width: 40px; height: 1px; top: 15px; left: -4px;} #lp_layout .lpClose::after{ width: 1px; height: 40px; top: -6px; left: 15px;} #lp_layout .lp_inquire{ width: 736px; background-color: #fff; padding: 50px; display: none; flex-direction: column; border-radius: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);} #lp_layout .lp_inquire .body{ padding: 0 0 40px 0;} #lp_layout .lp_inquire .inputBox{ display: flex; flex-direction: column;} #lp_layout .lp_inquire .inputBox dl{ height: 68px; display: flex; border-bottom: 2px solid #b8c2e4;} #lp_layout .lp_inquire .inputBox dt{ width: 107px; height: 100%; font-size: 16px; color: #3b3e43; line-height: 24px; padding: 0 0 0 10px; display: flex; align-items: center;} #lp_layout .lp_inquire .inputBox dd{ flex: 1;} #lp_layout .lp_inquire .inputBox dd input{ width: 100%; height: 100%; font-size: 16px; color: #000; line-height: 68px; padding: 0; display: inline-block;} #lp_layout .lp_inquire .inputBox .content{ height: auto; margin-top: 29px; flex-direction: column; border: 0;} #lp_layout .lp_inquire .inputBox .content dt{ width: 100%; height: 44px;} #lp_layout .lp_inquire .inputBox .content dd{ height: 137px; border: 2px solid #b8c2e4; flex: none;} #lp_layout .lp_inquire .inputBox .content dd textarea{ width: 100%; height: 100%; padding: 12px 14px; resize: none;} #lp_layout .lp_inquire .inputBox .content dd .length {margin-top: 3px;text-align: right;font-size: 13px;color: #bbb;} #lp_layout .lp_inquire .agree_wrap{ width: 100%; padding: 0; margin: 30px 0 0 0; display: inline-block;} #lp_layout .lp_inquire .agree_wrap .agree_box{ display: inline-block; position: relative;} #lp_layout .lp_inquire .agree_wrap .agree_box input{ position: absolute; left: -999999px;} #lp_layout .lp_inquire .agree_wrap .agree_box label{ font-size: 13px; color: #3b3e43; line-height: 16px; letter-spacing: -0.5px; padding: 0 0 0 23px; margin: 0; display: inline-block; position: relative;} #lp_layout .lp_inquire .agree_wrap .agree_box label::before{ width: 16px; height: 16px; content: ""; box-sizing: border-box; border: 2px solid #7185c9; position: absolute; top: 0; left: 0;} #lp_layout .lp_inquire .agree_wrap .agree_box input:checked+label::before{ background: url(../../img/blackolive/lp_ico_ck.png) no-repeat center center; border: 0;} #lp_layout .lp_inquire .agree_wrap ul{ width: 100%; padding: 0 0 0 23px; margin: 0 0 7px 0; display: inline-block;} #lp_layout .lp_inquire .agree_wrap li{ width: 100%; font-size: 13px; color: #616771; line-height: 20px; letter-spacing: -0.5px; padding: 0 0 0 8px; margin: 0; display: inline-block; position: relative;} #lp_layout .lp_inquire .agree_wrap li::before{ line-height: 16px; content: "-"; display: inline-block; position: absolute; top: 0; left: 0;} #lp_layout .lp_inquire .agree_wrap li a{ color: #3b3e43; text-decoration: underline;} #lp_layout .lp_inquire .btn{ height: 68px; display: flex; justify-content: center;} #lp_layout .lp_inquire .btn a{ width: 270px; height: 68px; background-color: #5677f1; font-weight: 400; font-size: 20px; color: #fff; line-height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 3px;} @media (max-width: 1919px){ .demo_wrap::before{ margin: 0 0 0 -184px; left: 50%; right: auto;} } @media (max-width: 1704px){ #body_layout .inner{ padding: 0;} } @media (max-width: 1305px){ #body_layout .inner{ width: 100%; padding-left: 20px; padding-right: 20px;} article .slide_wrap .btn{ margin: 0; left: auto; right: 20px;} .demo_wrap::before{ margin: 0; left: 460px;} .product_wrap .slide_wrap .list .wrap, .customer_wrap .slide_wrap .list .wrap{ margin: 0; left: 20px;} .solution_wrap .slide_wrap .list .wrap{ margin: 0; left: 0;} .event_wrap .slide_wrap li::before{ top: 35px; left: 68px;} #lp_layout .lp_event{ width: auto; padding: 50px 60px 47px 60px; left: 114px; right: 114px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);} #lp_layout .lp_event .event_slide .slide_wrap li{ width: calc(50% - 5px); height: auto; padding-bottom: 35%;} #lp_layout .lp_event .event_slide .btn a.btn_left{ left: -134px;} #lp_layout .lp_event .event_slide .btn a.btn_next{ right: -134px;} } @media (max-width: 1234px){ #lp_layout .lp_wrap.type1, #lp_layout .lp_wrap.type2, #lp_layout .lp_wrap.type3, #lp_layout .lp_wrap.type4, #lp_layout .lp_wrap.type5, #lp_layout .lp_wrap.type6, #lp_layout .lp_wrap.type7, #lp_layout .lp_wrap.type8, #lp_layout .lp_wrap.type9{ width: auto; height: 754px; margin-top: -377px; flex-direction: column; top: 50%; left: 30px; right: 30px; transform: none;} #lp_layout .lp_wrap.type1.on, #lp_layout .lp_wrap.type2.on, #lp_layout .lp_wrap.type3.on, #lp_layout .lp_wrap.type4.on, #lp_layout .lp_wrap.type5.on, #lp_layout .lp_wrap.type6.on, #lp_layout .lp_wrap.type7.on, #lp_layout .lp_wrap.type8.on, #lp_layout .lp_wrap.type9.on{ display: flex;} #lp_layout .lp_wrap.type1 .body_wrap, #lp_layout .lp_wrap.type2 .body_wrap, #lp_layout .lp_wrap.type3 .body_wrap, #lp_layout .lp_wrap.type4 .body_wrap, #lp_layout .lp_wrap.type5 .body_wrap, #lp_layout .lp_wrap.type6 .body_wrap, #lp_layout .lp_wrap.type7 .body_wrap, #lp_layout .lp_wrap.type8 .body_wrap, #lp_layout .lp_wrap.type9 .body_wrap{ height: auto; position: absolute; top: 95px; left: 0; right: 0; bottom: 0;} #lp_layout .lp_wrap.type1 .flexBox2, #lp_layout .lp_wrap.type2 .flexBox2, #lp_layout .lp_wrap.type3 .flexBox2, #lp_layout .lp_wrap.type4 .flexBox2, #lp_layout .lp_wrap.type5 .flexBox2, #lp_layout .lp_wrap.type6 .flexBox2, #lp_layout .lp_wrap.type7 .flexBox2, #lp_layout .lp_wrap.type8 .flexBox2, #lp_layout .lp_wrap.type9 .flexBox2{ width: auto; height: 100%; flex: 1; overflow-y: auto;} } @media (max-width: 1023px){ article h2{ font-size: 20px; line-height: 29px;} article .slide_wrap > .btn, article .slide_wrap .control .btn{display: none;} .demo_wrap .line{ width: 50%; background-color: transparent; border-left: 1px solid #fff; border-right: 1px solid #fff; left: 25%;} .demo_wrap .line::before{ left: 50%;} .demo_wrap .line::after{ display: none;} .product_wrap{ margin-top: 60px;} .product_wrap .slide_wrap{ margin-top: 3.5px;} .product_wrap .slide_wrap .list{ overflow-x: auto;} .product_wrap .slide_wrap .list .wrap{ padding: 0 20px; position: static; left: 0; right: 0;} .product_wrap .slide_wrap li{ width: 247.5px;} .product_wrap .slide_wrap li .thumb{ height: 162px;} .product_wrap .slide_wrap li .tit{ margin-top: 10px; flex-direction: column;} .product_wrap .slide_wrap li .tit .txt{ font-size: 15px; line-height: 20px;} .product_wrap .slide_wrap li .tit .txt{ font-weight: 700; line-height: 26px;} .product_wrap .slide_wrap li .tit .btn{ width: 30px; height: 30px; background-size: 17.5px; margin: 12.5px 0 0 0;} .report_wrap{ margin-top: 60px;} .report_wrap ul{ margin-top: 17.5px;} .report_wrap li{ margin-right: 10px;} .report_wrap li+li{ margin-left: 10px;} .report_wrap li a{ height: 90px; padding: 0 14px;} .report_wrap li .tit{ font-size: 15px; line-height: 16px;} .report_wrap li .tit em{ font-size: 13px; line-height: 18px; margin-top: 10px;} .report_wrap li .link{ width: 120px; height: 30px; font-size: 10px; line-height: 30px;} .report_wrap li .link::after{ width: 30px; height: 30px; background-size: 18.5px 16.5px;} .bg_color{ padding: 50px 0; margin-top: 51px;} .customer_wrap .slide_wrap{ margin-top: 15px;} .customer_wrap .slide_wrap .list{ overflow-x: auto;} .customer_wrap .slide_wrap .list .wrap{ padding: 0 20px; position: static; left: 0; right: 0;} .customer_wrap .slide_wrap li{ width: 247px;} .customer_wrap .slide_wrap li .thumb{ height: 142px;} .customer_wrap .slide_wrap li .tit{ flex-direction: column;} .customer_wrap .slide_wrap li .tit .txt{ font-size: 13px; line-height: 16px;} .customer_wrap .slide_wrap li .tit .txt em{ font-size: 15px; line-height: 15px; margin-bottom: 9px;} .customer_wrap .slide_wrap li .tit .btn{ width: 30px; height: 30px; background-size: 17.5px; margin: 12.5px 0 0 0;} .solution_wrap{ margin-top: 60px;} .solution_wrap .video_wrap{ width: 100%; height: auto; padding: 0 300px 0 0; margin-top: 17.5px; display: inline-block; position: relative;} .solution_wrap .video_wrap .video{ width: 100%; padding: 0 0 56.5% 0; overflow: hidden;} .solution_wrap .video_wrap .video iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .solution_wrap .video_wrap .tit{ width: 300px; height: 100%; padding: 0 25px; position: absolute; top: 0; right: 0;} .solution_wrap .video_wrap .tit > p{ font-size: 13px; line-height: 18px;} .solution_wrap .slide_wrap li a{ height: auto; padding: 0 0 55% 0;} .solution_wrap .slide_wrap li a.on{ border: 0; position: relative;} .solution_wrap .slide_wrap li a.on::before{ width: 100%; height: 100%; content: ""; box-sizing: border-box; border: 3px solid #ff5151; position: absolute; top: 0; left: 0;} .solution_wrap .slide_wrap .list{ width: calc(100% + 40px); margin-left: -20px; overflow-x: auto;} .solution_wrap .slide_wrap .list .wrap{ padding: 0 20px; position: static; left: auto; right: auto;} .solution_wrap .control{ margin-top: 10px;} .solution_wrap .control p{ width: 100%; font-size: 10px; text-align: right; line-height: 15px;} .solution_wrap .control .bar, .solution_wrap .video_wrap .page{ display: none;} .dataset_wrap{ margin-top: 60px;} .dataset_wrap ul, .dataset_wrap ul.fc{ margin-top: 16px;} .dataset_wrap li{ height: 70px;} .dataset_wrap li a{ height: 100%;} .dataset_wrap li .tit{ font-size: 15px; line-height: 16px;} .dataset_wrap li .link{ width: 121px; height: 30px; font-size: 10px; line-height: 30px;} .dataset_wrap li .link::after{ width: 30px; height: 30px; background-size: 18.5px 16.5px;} .event_wrap{ margin: 50px 0;} .event_wrap .slide_wrap{ margin-top: 15px;} .event_wrap .slide_wrap .btn{ display: inline-block;} #lp_layout .lp_event .event_slide p{ font-size: 25px; line-height: 15px;} #lp_layout .lp_event .event_slide .slide_wrap{ margin: 15px 0 27px 0;} #lp_layout .lp_event .event_slide .tit{ height: auto; flex-direction: column; align-items: flex-start;} #lp_layout .lp_event .event_slide .tit img{ height: 36.5px; position: relative;} /* #lp_layout .lp_event .event_slide .tit img::before{ width: 55px; height: 1px; background-color: #d1d1d3; content: ""; transform: rotate(-68deg); position: absolute; bottom: 3px; right: -14px;} */ #lp_layout .lp_event .event_slide .tit h2{ font-size: 13px; line-height: 14.5px; padding-left: 0; padding-top: 7px;} #lp_layout .lp_event .event_slide .tit h2::before{ display: none;} #lp_layout .lp_event .event_slide .tit span{ font-size: 10px; line-height: 10px; margin-top: 7px;} #lp_layout .lp_event .event_slide .tit h2 em{font-size: 10px;line-height: 11px;} #lp_layout .lp_event .lp_close{ top: -42px; right: 0;} } @media (max-width: 955px){ #lp_layout .lp_wrap.type1 .body_wrap, #lp_layout .lp_wrap.type2 .body_wrap, #lp_layout .lp_wrap.type3 .body_wrap, #lp_layout .lp_wrap.type4 .body_wrap, #lp_layout .lp_wrap.type5 .body_wrap, #lp_layout .lp_wrap.type6 .body_wrap, #lp_layout .lp_wrap.type7 .body_wrap, #lp_layout .lp_wrap.type8 .body_wrap, #lp_layout .lp_wrap.type9 .body_wrap{ flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto;} #lp_layout .lp_wrap.type1 .flexBox2, #lp_layout .lp_wrap.type2 .flexBox2, #lp_layout .lp_wrap.type3 .flexBox2, #lp_layout .lp_wrap.type4 .flexBox2, #lp_layout .lp_wrap.type5 .flexBox2, #lp_layout .lp_wrap.type6 .flexBox2, #lp_layout .lp_wrap.type7 .flexBox2, #lp_layout .lp_wrap.type8 .flexBox2, #lp_layout .lp_wrap.type9 .flexBox2{ width: auto; height: auto; padding: 0; margin: 37px 0 0 0; border: 0; flex: 1; overflow-y: visible;} #lp_layout .lp_wrap .flexBox1.type6{width: 100%;} #lp_layout .lp_wrap .flexBox1.type6 .img{ height: 129px;} #lp_layout .lp_wrap .flexBox1.type7, #lp_layout .lp_wrap .flexBox1.type8, #lp_layout .lp_wrap .flexBox1.type9{width: 100%;} #lp_layout .lp_wrap .flexBox1.type6 .img{ height: 129px;} } @media (max-width: 813px){ #lp_layout .bo_wrap{ width: auto; height: auto; padding-top: 95px; top: 30px; right: 30px; bottom: 30px; left: 30px; transform: none; -webkit-transform: none; -ms-transform: none; -moz-transform: none;} #lp_layout .bo_wrap .top_wrap{ border-radius: 16px 16px 0 0; position: absolute; top: 0; left: 0;} #lp_layout .bo_wrap .body_wrap{ height: 100%; overflow-y: auto;} } @media (max-width: 800px){ #lp_layout .lp_inquire{ width: 80vw; max-height: 70vh; justify-content: center; } } @media (max-width: 750px){ #lp_layout .lp_inquire{ padding: 30px 13px;} #lp_layout .lp_inquire .body{ padding-bottom: 30px; flex: 1; overflow-y: auto;} #lp_layout .lp_inquire .btn{ height: 34px;} #lp_layout .lp_inquire .btn a{ width: 135px; height: 34px; font-size: 12px; line-height: 18px;} #lp_layout .lp_inquire .inputBox dl{ height: 34px;} #lp_layout .lp_inquire .inputBox dt{ width: 65px; font-size: 12px; line-height: 18px;} #lp_layout .lp_inquire .inputBox dd input{ font-size: 12px; height: 34px;} #lp_layout .lp_inquire .inputBox .content{ margin-top: 9px;} #lp_layout .lp_inquire .inputBox .content dt{ height: 24px;} #lp_layout .lp_inquire .inputBox .content dd{ height: 95px;} #lp_layout .lp_inquire .inputBox .content dd textarea{ font-size: 12px; line-height: 18px; padding: 7px 9px;} #lp_layout .lp_inquire .agree_wrap{ margin-top: 14px;} #lp_layout .lpClose{ width: 24px; height: 24px; top: 10px; right: 10px;} #lp_layout .lpClose::before{ top: 13px; left: -7px;} #lp_layout .lpClose::after{ left: 9px;} } @media (max-width: 749px){ .demo_wrap{ height: auto; background: url(../../img/library/visual_mo.png) no-repeat center top; background-size: cover; padding: 0 0 145% 0;} .demo_wrap::before{ display: none;} .demo_wrap .inner{ height: 100%; align-items:flex-start; position: absolute; top: 0; left: 0;} .demo_wrap .inner .tit_wrap{ padding: 37.8% 0 0 0;} .demo_wrap h2{ font-size: 31px;} .demo_wrap p{ font-size: 16px; margin-top: 4px;} .demo_wrap p + p{ width: 284px; font-size: 14px; line-height: 18px; margin-top: 37px;} .report_wrap ul{ flex-direction: column;} .report_wrap li{ width: 100%; margin: 0; flex: none;} .report_wrap li + li{ margin: 15px 0 0 0;} .customer_wrap .slide_wrap li{ width: 170px;} .customer_wrap .slide_wrap li .thumb{ height: 97.5px;} .solution_wrap .video_wrap{ padding: 0; display: flex; flex-direction: column;} .solution_wrap .video_wrap .tit{ width: 100%; height: auto; padding: 15px 20px; position: static; top: auto; right: auto;} .solution_wrap .slide_wrap li{ width: 161px;} .solution_wrap .slide_wrap li a{ height: 90px; padding: 0;} .dataset_wrap ul{ flex-direction: column;} .dataset_wrap li{ width: 100%; margin: 0; flex: none;} .dataset_wrap li + li{ margin-top: 15px;} .dataset_wrap li.dataset_none{display: none;} .event_wrap .slide_wrap{ padding: 0 0 65px 0;} .event_wrap .slide_wrap li{ height: 115px;} .event_wrap .slide_wrap li + li{ margin-left: 8px;} .event_wrap .slide_wrap li a{ padding: 8px;} .event_wrap .slide_wrap li a::before{ top: 15px; left: 55px;} .event_wrap .slide_wrap li .yyyymm{ font-size: 12px; line-height: 15px;} .event_wrap .slide_wrap li .yyyymm span{ font-size: 20px; line-height: 24px;} .event_wrap .slide_wrap li .txt{min-height: 65px; background-size: auto 25px; font-size: 13px; line-height: 15px; padding-top: 30px;} .event_wrap .slide_wrap .btn a{ width: 50px; height: 50px; margin: 0; bottom: 0; top: auto;} #lp_layout .lp_event{ padding: 40px 30px 37px 30px; left: 18.5px; right: 18.5px;} #lp_layout .lp_event .lp_close{ width: 17.5px; height: 17.5px;} #lp_layout .lp_event .event_slide .btn a{ width: 50px; height: 50px; top: auto; bottom: -139px;} #lp_layout .lp_event .event_slide .btn a.btn_left{ left: -30px;} #lp_layout .lp_event .event_slide .btn a.btn_next{ right: -30px;} } @media (max-width: 640px){ #lp_layout .bo_wrap{ padding-top: 68px; overflow: visible; border-radius: 8px; top: 60px;} #lp_layout .bo_wrap .top_wrap{ border-radius: 8px 8px 0 0;} #lp_layout .bo_wrap .top_wrap h2{ height: 68px; font-size: 18px; line-height: 22px; padding: 0 20px;} #lp_layout .bo_wrap .body_wrap{ padding: 20px 20px 40px 20px;} #lp_layout .bo_wrap .btn_wrap a.type_more{ width: auto; background-size: 35px auto; background-position: 10px center; font-size: 16px; line-height: 46px; padding: 0 20px 0 50px;} #lp_layout .bo_wrap .lp_close{ width: 26px; height: 26px; top: -40px; right: 0;} #lp_layout .infoPop .input_wrap input{ padding: 0 10px;} #lp_layout .lp_event{ padding: 26px 44px 29px 44px; top: 47%;} #lp_layout .lp_event .event_slide .slide_wrap ul{ padding: 0 20px; flex-direction: column;} #lp_layout .lp_event .event_slide .slide_wrap li{ width: 100%; padding-bottom: 67%;} #lp_layout .lp_event .event_slide .slide_wrap li + li{ margin-top: 2.5px;} #lp_layout .lp_event .event_slide .btn a.btn_left{ left: -43.5px;} #lp_layout .lp_event .event_slide .btn a.btn_next{ right: -43.5px;} #lp_layout .lp_event .event_slide .btn a{ bottom: -118px;} #lp_layout .lp_event .lp_close{ top: -30px;} .event_wrap .slide_wrap li.n7 .txt::before, .event_wrap .slide_wrap li.n8 .txt::before{ font-size: 10px; } #lp_layout .lp_wrap.type1 .body_wrap, #lp_layout .lp_wrap.type2 .body_wrap, #lp_layout .lp_wrap.type3 .body_wrap, #lp_layout .lp_wrap.type4 .body_wrap, #lp_layout .lp_wrap.type5 .body_wrap, #lp_layout .lp_wrap.type6 .body_wrap, #lp_layout .lp_wrap.type7 .body_wrap, #lp_layout .lp_wrap.type8 .body_wrap, #lp_layout .lp_wrap.type9 .body_wrap{ top: auto; bottom: auto; position: relative;} /* #lp_layout .lp_wrap.type7 .body_wrap{ top: auto; bottom: auto; position: relative;} */ #lp_layout .lp_wrap.type1, #lp_layout .lp_wrap.type2, #lp_layout .lp_wrap.type3, #lp_layout .lp_wrap.type4, #lp_layout .lp_wrap.type5, #lp_layout .lp_wrap.type6, #lp_layout .lp_wrap.type7, #lp_layout .lp_wrap.type8, #lp_layout .lp_wrap.type9{ height: auto; margin: 0; top: 60px; bottom: 30px;} #lp_layout .lp_wrap .flexBox1{ width: 100%; align-items: center;} #lp_layout .lp_wrap .flexBox1.type1 h3{ font-size: 14px; line-height: 15px;} #lp_layout .lp_wrap .flexBox1.type1 ul{ width: 254.5px; margin-top: 9px;} #lp_layout .lp_wrap .flexBox1.type1 li{ height: 130.5px;} #lp_layout .lp_wrap .flexBox1.type1 li + li{ margin-top: 4.5px;} #lp_layout .lp_wrap .flexBox1.type2 h3{ font-size: 14px; line-height: 15px;} #lp_layout .lp_wrap .flexBox1.type2 p{ font-size: 12px; line-height: 14.5px; margin-top: 13px;} #lp_layout .lp_wrap .flexBox1.type2 p strong{ font-size: 12px; line-height: 14.5px; margin-top: 10.5px;} #lp_layout .lp_wrap .flexBox1.type2 ul{ height: 250px; margin-top: 22.5px;} #lp_layout .lp_wrap .flexBox1.type2 li{ width: 140px; height: 140px; background-position: center 14px; font-size: 8px; line-height: 11px;} #lp_layout .lp_wrap .flexBox1.type2 li.n1{ padding-bottom: 40px; margin-top: -55px;} #lp_layout .lp_wrap .flexBox1.type2 li.n2{ background-position: center 20px; font-size: 7px; line-height: 10px; padding-bottom: 28px; margin-top: 50px; margin-left: 60px;} #lp_layout .lp_wrap .flexBox1.type2 li.n3{ background-position: center 20px; font-size: 7px; line-height: 10px; padding-bottom: 28px; margin-top: 50px; margin-left: -60px;} .en #lp_layout .lp_wrap .flexBox1.type2 li.n2, .en #lp_layout .lp_wrap .flexBox1.type2 li.n3{ font-size: 7px; line-height: 10px;} #lp_layout .lp_wrap .flexBox1.type3 ul{ width: 254.5px;} #lp_layout .lp_wrap .flexBox1.type3 li{ height: 287px;} #lp_layout .lp_wrap .flexBox1.type4 h3{ width: 290px; font-size: 14px; line-height: 19.5px;} #lp_layout .lp_wrap .flexBox1.type4 p{ width: 290px; font-size: 12px; line-height: 14.5px; margin-top: 13px;} #lp_layout .lp_wrap .flexBox1.type4 ul{ margin-top: 15px;} #lp_layout .lp_wrap .flexBox1.type4 li{ background-size: contain; font-size: 12px; line-height: 35px; padding-left: 47px;} #lp_layout .lp_wrap .flexBox1.type4 li + li{ margin-top: 12px;} #lp_layout .lp_wrap .flexBox1.type4 .img{ width: 290px; height: 224px;} #lp_layout .lp_wrap .flexBox1.type5 p{ font-size: 14px; line-height: 19.5px;} #lp_layout .lp_wrap .flexBox1.type5 ul{ flex-direction: column;} #lp_layout .lp_wrap .flexBox1.type5 li{ padding-top: 90px;} #lp_layout .lp_wrap .flexBox1.type5 li + li{ margin-top: 20px;} #lp_layout .lp_wrap .flexBox1.type6 h3{ font-size: 14px; line-height: 19.5px;} #lp_layout .lp_wrap .flexBox1.type6 p{ font-size: 12px; line-height: 14.5px; margin-top: 13px;} #lp_layout .lp_wrap .flexBox1.type6 ul{ margin-top: 15px;} #lp_layout .lp_wrap .flexBox1.type6 li{ background-size: contain; font-size: 12px; line-height: 35px; padding-left: 47px;} #lp_layout .lp_wrap .flexBox1.type6 li + li{ margin-top: 12px;} #lp_layout .lp_wrap .flexBox1.type6 .img{ width: 290px; height: 129px;background-size: contain;} #lp_layout .lp_wrap.type1 .flexBox2, #lp_layout .lp_wrap.type2 .flexBox2, #lp_layout .lp_wrap.type3 .flexBox2, #lp_layout .lp_wrap.type4 .flexBox2, #lp_layout .lp_wrap.type5 .flexBox2, #lp_layout .lp_wrap.type6 .flexBox2, #lp_layout .lp_wrap.type7 .flexBox2, #lp_layout .lp_wrap.type8 .flexBox2, #lp_layout .lp_wrap.type9 .flexBox2{ margin-top: 17.5px;} } @media (max-width: 480px){ .event_wrap .slide_wrap li.n7 .txt::before, .event_wrap .slide_wrap li.n8 .txt::before{ top: 13%; } .event_wrap .slide_wrap li.n7 .txt { background-size: auto 20px; } .event_wrap .slide_wrap li.n8 .txt { background-size: auto 20px; } }