@charset "utf-8"; .wrap { background: #f8f8f8; width: 1920px; margin: 0 auto; /* display: table; */ /* overflow: hidden; */ } .main_banner { width: 1920px; height: 980px; overflow: hidden; margin: 0 auto; background: #000; position: relative; } .main_banner video { position: absolute; left: 50%; margin-left: -960px; opacity: 0; width: 1920px; } .main_banner .content span { opacity: 0; transition: opacity 2s linear; } .main_banner .content.active span { opacity: 1; } .main_banner .content.active h1 span:nth-of-type(1) { transition-delay: 0s; } .main_banner .content.active h1 span:nth-of-type(2) { transition-delay: 1s; } .main_banner .content.active h1 span:nth-of-type(3) { transition-delay: 0.5s; } .main_banner .content.active p span:nth-of-type(1) { transition-delay: 1.2s; } .main_banner .content.active p span:nth-of-type(2) { transition-delay: 0.3s; } .main_banner .content.active p span:nth-of-type(3) { transition-delay: 1s; } #float_menu { position:fixed; z-index:9; right:0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 240px; } #float_menu2 { position:fixed; z-index:9; right:0; top: calc(50% + 282px); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: auto; } #float_menu3 { position:fixed; z-index:9; right:0; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: auto; } #float_menu2 .box { background: rgba(176, 15, 63, 1); position: relative; } #float_menu2 .close__btn , #float_menu3 .close__btn { color: #fff; float: right; font-size: 23px; font-weight: 400; cursor: pointer; z-index: 111; display: inline; position: absolute; right: 10px; top: 5px; } #float_menu2 .box a { padding: 30px 20px; box-sizing: border-box; width: 100%; display: block; } #float_menu3 .box a { padding: 0; } #float_menu2 .box a h2 , #float_menu3 .box a h2 { color: #fff; } #float_menu2 .box a div , #float_menu3 .box a div { margin-top: 20px; } #float_menu2 .box a div p , #float_menu3 .box a div p { margin-top: 5px; color: #fff; font-size: 13px; position: relative; padding-left: 20px; } #float_menu2 .box a div p::before , #float_menu3 .box a div p::before { content: 'ยท'; position: absolute; left: -3px; top: -8px; color: #fff; font-size: 29px; font-weight: bold; } #float_menu h2{ text-align:right; margin-top:0px; } #float_menu img{ width: 100%; } .main_banner .content { width: 1180px; text-align: center; z-index: 2; top: 250px; left: 50%; margin-left: -590px; position: absolute; transform-origin: center center; transform: scale(1.3); height: 106px; } .main_banner .content h1 span { color: #b71549; font-size: 45px; font-weight: bold; font-family: "Noto Sans Japanese", "arial"; font-style: italic; } .main_banner .content p { text-align: right; color: #fff; font-weight: 200; font-family: "Noto Sans Japanese", "arial"; font-size: 31px; margin-top: 15px; padding-right: 96px; box-sizing: border-box; } .main_banner .content p span { color: #fff; font-weight: 200; font-family: "Noto Sans Japanese", "arial"; font-size: 31px; } .content { width: 1280px; margin: 0 auto; } .content::after { display: block; content: ""; clear: both; } .content .box { float: left; width: 640px; } .about { padding: 150px 0 150px; box-sizing: border-box; } .about .box:first-child { padding-left: 50px; padding-right: 30px; box-sizing: border-box; padding-top: 105px; } .about .box:last-child { padding-right: 50px; box-sizing: border-box; padding-left: 30px; } .about .box.left { box-sizing: border-box; } .about .box.left p.title { font-size: 18px; font-weight: 600; color: #da074b; font-family: "Noto Sans Japanese", "Montserrat"; } .about .box.left h3 { font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 100; color: #000; font-size: 31px; line-height: 40px; margin-top: 35px; margin-bottom: 30px; } .about .box.left .txtwrap p.txt { font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 100; color: #000; font-size: 17px; line-height: 26px; } .about .box.left .txtwrap { width: 490px; border-left: 1px solid #c6c6c6; box-sizing: border-box; padding-left: 25px; } .about .box.left .txtwrap a.more_btn { color: #da074b; font-family: "Noto Sans Japanese", "Montserrat"; font-size: 13px; font-weight: 600; margin-top: 25px; display: block; letter-spacing: 0.3em; text-transform: uppercase; } /* .scroll_item_inner img{ cursor: pointer; opacity:0; transition:opacity .5s ease-out; } .scroll_item_inner:hover img{ opacity:1; } */ /* insight */ .content.insight { padding-top: 285px; background: #f8f8f8; width: 100%; } .content.insight .content { padding: 70px 50px; box-sizing: border-box; position: relative; } .content.insight .content::after { display: block; content: ""; clear: both; } .content.insight .content .box.board { width: 590px; float: left; z-index: 2; position: relative; } .content.insight .content .box.board .boardwrap { background: #fff; padding: 20px 35px; box-sizing: border-box; width: 100%; min-height: 440px; } .content.insight .content .box.board .boardwrap .insights a { display: block; padding: 30px 20px 30px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; } .content.insight .content .box.board .boardwrap .insights:last-child a { border-bottom: none; } .content.insight .content .box.board h3.title { font-size: 32px; font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 400; color: #000; margin-bottom: 18px; } .content.insight .content .box.board h3.title::after { position: absolute; display: block; content: ""; clear: both; width: 8px; height: 8px; border-radius: 50%; background: #bc2757; left: 0; top: 0; } .content.insight .content .box.board .boardwrap a::after { display: block; content: ""; clear: both; } .content.insight .content .box.board .boardwrap a span.date { display: block; float: left; width: 105px; font-size: 11px; font-family: "Noto Sans Japanese", "Montserrat"; text-transform: uppercase; color: #000; line-height: 32px; } .content.insight .content .box.board .boardwrap a .right_box { display: block; float: left; width: 375px; } .content.insight .content .box.board .boardwrap a .right_box span.insight_title { font-size: 20px; line-height: 32px; letter-spacing: -0.025em; font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 300; color: #000; display: block; } .content.insight .content .box.board .boardwrap a .right_box span.insight_txt { font-size: 15px; line-height: 24px; letter-spacing: -0.025em; font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 300; display: block; color: rgba(0, 0, 0, 0.8); overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; height: 48px; padding-top: 25px; } .content.insight .content .box.board .boardwrap .insights.active a span.date { color: #b71549; } .content.insight .content .box.board .boardwrap .insights.active a .right_box span.insight_title { color: #b71549; } .content.insight .content .box.board .boardwrap .insights.active a .right_box span.insight_txt { color: rgba(183, 21, 73, 0.8); } .content.insight .content .box.slide { width: 622px; margin-left: -70px; float: left; overflow: hidden; height: 409px; box-sizing: border-box; position: relative; z-index: 1; } .content.insight .content .box.slide ul { width: 1866px; height: 409px; overflow: hidden; position: absolute; transition: ease-out; } .content.insight .content .box.slide ul::after { display: block; content: ""; clear: both; } .content.insight .content .box.slide ul li { width: 622px; height: 409px; float: left; } .content.insight .content .box.slide ol { position: absolute; bottom: 30px; width: 38px; height: 10px; right: 30px; z-index: 5; } .content.insight .content .box.slide ol::after { display: block; content: ""; clear: both; } .content.insight .content .box.slide ol li { width: 6px; height: 6px; float: left; margin-right: 10px; background: #fff; border-radius: 50%; } .content.insight .content .box.slide ol li.active { background: rgba(255, 255, 255, 0.6); } .content.insight .content .box.slide ol li:last-child { margin-right: 0; } .content.insight .content .box.slide ol li a { display: block; width: 6px; height: 6px; } .content.progress { width: 100%; } .content.progress .left, .content.progress .right { float: left; width: 50%; } .content.progress .txt, .content.progress .left img, .content.progress .right img { margin-left: 10%; width: 80%; } .content.progress .content::after { clear: both; content: ""; display: block; } .content.progress .txt { font-size: 22px; letter-spacing: 0em; font-weight: 300; line-height: 30px; font-family: "Noto Sans Japanese", "Montserrat"; } .content.progress .network { text-align: center; padding-bottom: 200px; margin-top: 100px; background: url("../images/main/progress_worldmap.png") center center no-repeat; background-size: cover; } .content.progress .network h4 { margin-top: 100px; } .content.progress .network h4, .content.progress .network h4 b { display: inline-block; text-align: center; font-size: 40px; color: #fff; letter-spacing: 0em; font-weight: 200; line-height: 40px; font-family: "Noto Sans Japanese", "Montserrat"; } .content.progress .network .item { width: 196px; display: inline-block; font-size: 0px; height: 70px; opacity: 0.5; } .content.progress .network .item > div { width: 196px; height: 70px; background-image: url("../images/main/progress_partners.png"); background-repeat: no-repeat; } .content.progress .network .center { padding-top: 160px; text-align: center; display: inline-block; text-align: center; position: relative; margin: 0 auto; } .content.progress .network h4 b { font-weight: 400; } .global .content { position: relative; } .global .bg { overflow: hidden; position: absolute; width: 100%; height: 506px; background: #242424; bottom: 0px; left: 0; opacity: 0; transition: opacity 1s ease; } .global .bg.active { opacity: 1; transition: opacity 1s ease; } .global .bg img { opacity: 0; transform: rotate(0.01deg); transition: all 1s linear; } .global.active .bg img { transform: scale(1.02); opacity: 1; margin-top: -50px; } .content.global { background: #242424; width: 100%; margin: 0 auto; position: relative; } .content.global::after { content: ""; clear: both; display: block; } .content.global .content { width: 1180px; height: 510px; margin: 0 auto; } .content.global .content::after { content: ""; clear: both; display: block; } .content.global .content h1 { color: #dd2963; font-size: 48px; letter-spacing: 0.025em; font-weight: 100; font-family: "Noto Sans Japanese", "Montserrat"; line-height: 32px; width: 300px; float: left; padding-top: 64px; z-index: 3; position: relative; } .content.global .content h1 span { display: block; font-size: 26px; color: #fff; margin-top: 15px; font-weight: 300; letter-spacing: 0.025em; font-family: "Noto Sans Japanese", "Montserrat"; z-index: 3; position: relative; } .content.global::before { width: 592px; height: 1px; background: #dd2963; position: absolute; left: 0; top: 153px; display: block; clear: both; content: ""; z-index: 3; } .content.global::after { width: 285px; height: 1px; background: #dd2963; position: absolute; right: 0; top: 153px; display: block; clear: both; content: ""; } .content.global .office_wrap { width: 880px; float: right; z-index: 2; position: relative; } .content.global .office_wrap .boxwrap { width: 210px; float: left; margin-right: 13px; } .content.global .office_wrap .boxwrap:last-child { margin-right: 0; } .content.global .office_wrap .boxwrap::after { display: block; clear: both; content: ""; } .content.global .office_wrap .boxwrap .box { width: 210px; position: relative; } .content.global .office_wrap .boxwrap .box .text { position: absolute; top: 20px; left: 28px; font-size: 20px; line-height: 26px; color: #fff; font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 100; z-index: 3; font-weight: 300; } .content.global .office_wrap .boxwrap .box .text i { font-style: normal; font-weight: 100; display: block; font-family: "Noto Sans Japanese", "Montserrat"; color: rgba(255, 255, 255, 0.2); } .content.global .office_wrap .boxwrap .box .opacity_bg { display: block; width: 100%; height: 100%; background: #000; opacity: 0.7; transition: all 0.5s ease; } .content.global .office_wrap .boxwrap .box span.more { position: absolute; display: block; width: 63px; height: 63px; bottom: 28px; right: 17px; border: 1px solid #dddddd; background: #e1044b; opacity: 0; transition: all 0.5s ease; } .content.global .office_wrap .boxwrap .box span.more span.line { display: block; position: relative; width: 100%; height: 100%; } .content.global .office_wrap .boxwrap .box span.more span.line::after { display: block; width: 21px; height: 1px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -11px; clear: both; content: ""; } .content.global .office_wrap .boxwrap .box span.more span.line::before { display: block; width: 1px; height: 21px; background: #fff; clear: both; content: ""; position: absolute; left: 50%; top: 50%; margin-top: -11px; } .content.global .office_wrap .boxwrap .box:hover .opacity_bg { opacity: 0; transition: all 0.5s ease; } .content.global .office_wrap .boxwrap .box:hover .text i { color: #dd2963; } .content.global .office_wrap .boxwrap .box:hover span.more { opacity: 0.8; z-index: 4; transition: all 0.5s ease; } .content.global .office_wrap .boxwrap .box.japan { height: 357px; background: url("../images/main/office_img2.png") no-repeat left top; margin-top: 20px; background-size: cover; } .content.global .office_wrap .boxwrap .box.korea { height: 324px; background: url("../images/main/office_img1.png") no-repeat left top; margin-top: 115px; } .content.global .office_wrap .boxwrap .box.china { height: 275px; background: url("../images/main/office_img3.png") no-repeat left top; margin-top: -45px; } .content.global .office_wrap .boxwrap .box.sales { height: 295px; background: url("../images/main/office_img4.png") no-repeat left top; margin-top: 58px; } .content.global .office_wrap .boxwrap .box.malaysia { height: 244px; background: url("../images/main/office_img5.png") no-repeat left top; margin-top: 10px; } .content.global .office_wrap .boxwrap.hidden { display: none; } .wrap .content.product .content_title { font-size: 16px; color: #fff; font-family: "Noto Sans Japanese", "Montserrat"; text-transform: uppercase; letter-spacing: 0.05em; transform: rotate(90deg); position: absolute; left: -145px; padding-left: 139px; top: 190px; } .content .content_title::before { height: 1px; width: 118px; background: rgba(255, 255, 255, 0.3); display: block; content: ""; clear: both; position: absolute; top: 6px; left: 0; } .wrap .content.insight .content_title { font-size: 16px; color: #000; font-family: "Noto Sans Japanese", "Montserrat"; text-transform: uppercase; letter-spacing: 0.05em; transform: rotate(90deg); position: absolute; right: -70px; padding-left: 125px; top: 40px; } .wrap .content.insight .content_title::before { height: 1px; width: 118px; background: rgba(0, 0, 0, 0.3); display: block; content: ""; clear: both; position: absolute; top: 6px; left: 0; } .wrap .content.product .content_title b { transform: rotate(270deg); display: inline-block; position: relative; top: -1px; } /* modalpop */ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 333; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { position: absolute; background-color: #000; padding: 10px 0px; border: 0px solid #888; width: 1000px; height: 500px; display: inline-block; vertical-align: top; } /* The Close Button */ .close { margin-bottom: 10px; margin-right: 10px; color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } /* product_wrap */ .wrap .content.product { background: #9a0d3a; width: 100%; padding-top: 300px; height: 1100px; } .wrap .content.product.ver1 { height: 1100px; } .content.product .product_wrap { width: 1180px; position: relative; margin: 0 auto; } .content.product .product_wrap a { display: block; } .content.product .product_wrap .pr1 { width: 550px; position: absolute; top: -260px; left: 50%; margin-left: -57px; transition-delay: 0s; } .content.product.ver1 .product_wrap .pr1 { top: -230px; margin-left: -87px; } .content.product .product_wrap .box.pr1 .imgwrap { width: 100%; height: 430px; box-shadow: 20px -20px rgba(0, 0, 0, 0.3); margin-bottom: 25px; } .content.product .product_wrap .pr2 { position: absolute; width: 327px; top: -80px; left: 67px; transition-delay: 0.2s; } .content.product .product_wrap .pr2.show { top: -50px; left: 97px; } .content.product.ver1 .product_wrap .pr2.show { top: 110px; left: 97px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap { width: 100%; height: 276px; background: #51589f; box-shadow: -25px 25px rgba(0, 0, 0, 0.3); margin-bottom: 60px; } .content.product .product_wrap .box.pr2 .imgwrap { width: 100%; height: 434px; background: #51589f; box-shadow: -25px 25px rgba(0, 0, 0, 0.3); margin-bottom: 60px; } .content.product .product_wrap .box.pr2 .imgwrap img { margin-top: -50px; margin-left: 0px; box-sizing: border-box; } .content.product .product_wrap .box.pr2 .imgwrap img.ver1 { width: 450px; margin-top: -50px; margin-left: -58px; box-sizing: border-box; } .content.product .product_wrap .box.pr2 .txtwrap { padding: 0 0 0 30px; width: 120%; } .content.product.ver1 .product_wrap .box.pr2 .txtwrap { padding: 0 0 0 0px; width: 150%; } .content.product .product_wrap .pr3 { position: absolute; width: 436px; top: 820px; left: 28%; transition-delay: 0.6s; } .content.product .product_wrap .pr3.show { top: 680px; margin-left: -250px; } .content.product .product_wrap .box.pr3 .imgwrap { width: 100%; height: 250px; background: #e0b37f; margin-bottom: 25px; } .content.product .product_wrap .box.pr3 .imgwrap img { width: 480px; margin-top: -100px; margin-left: -14px; box-sizing: border-box; } .content.product.ver1 .product_wrap .box.pr3 .txtwrap, .content.product.ver1 .product_wrap .box.pr5 .txtwrap { padding: 0 0 0 0px; } .content.product .product_wrap .box.pr3 .txtwrap p.prd_nm { color: #ffffff; } .content.product .product_wrap .box.pr3 .txtwrap span { color: rgba(255, 255, 255, 0.7); } .content.product.ver1 .product_wrap .pr3.show { top: 770px; margin-left: -250px; } .content.product .product_wrap .box.pr3 .imgwrap img.ver1 { width: 300px; margin-top: -200px; margin-left: 80px; } .content.product .product_wrap .pr4 { position: absolute; width: 270px; top: 960px; left: 60%; margin-left: 73px; transition-delay: 0.4s; } .content.product .product_wrap .pr4.show { top: 910px; margin-left: 63px; } .content.product .product_wrap .box.pr4 .imgwrap { width: 100%; height: 259px; background: #1faac3; box-shadow: -25px 25px rgba(0,0,0,.3); margin-bottom: 50px; } .product.content .product_wrap .pr4.box .imgwrap img { margin-top: 0px; margin-left: -64px; box-sizing: border-box; width: 390px; } .content.product .product_wrap .box.pr4 .txtwrap { margin-left: -70px; padding: 0; } .content.product .product_wrap .box.pr4 .txtwrap p.prd_nm { color: #000000; } .content.product .product_wrap .box.pr4 .txtwrap span { color: rgba(0, 0, 0, 0.7); } .content.product .product_wrap .pr5 { position: absolute; width: 326px; top: 390px; left: 85%; margin-left: -320px; transition-delay: 0.6s; } .content.product .product_wrap .pr5.show { top: 450px; margin-left: -290px; } .content.product.ver1 .product_wrap .pr5.show { top: 520px; margin-left: -290px; } .content.product .product_wrap .box.pr5 .imgwrap img { margin-top: -100px; margin-left: 0px; box-sizing: border-box; height: 350px; } .content.product .product_wrap .box.pr5 .imgwrap { width: 100%; /*height: 330px;*/ background: #1faac3; box-shadow: -25px -25px rgba(0, 0, 0, 0.3); margin-bottom: 20px; } .content.product .product_wrap .box.pr5 .imgwrap img { margin-top: -100px; margin-left: 15px; box-sizing: border-box; height:420px; } .content.product.ver1 .product_wrap .box.pr5 .imgwrap img { margin-top: -100px; margin-left: 40px; box-sizing: border-box; height: 350px; } .content.product .product_wrap .box .imgwrap { position: relative; } .content.product .product_wrap .box .imgwrap span { position: absolute; width: 100%; height: 100%; z-index: 2; background: rgba(112, 112, 112, 1); -webkit-transition: all 0.5s; transition: all 0.5s; } .content.product .product_wrap .box .imgwrap:hover span { background: rgba(0, 0, 0, 0); -webkit-transition: all 0.5s; transition: all 0.5s; } .content.product .product_wrap .box .imgwrap img { z-index: 3; position: relative; } .content.product .product_wrap .box .txtwrap { padding: 0 0 0 60px; box-sizing: border-box; font-family: "Noto Sans Japanese", "Montserrat"; } .content.product .product_wrap .box .txtwrap p.prd_nm { font-size: 24px; color: #ffffff; font-family: "Noto Sans Japanese", "Montserrat"; font-weight: 300; padding-bottom: 20px; } .content.product .product_wrap .box .txtwrap span { font-size: 17px; font-family: "Noto Sans Japanese", "Montserrat"; color: rgba(255, 255, 255, 0.5); line-height: 24px; font-weight: 100; padding-bottom: 20px; word-break: break-all; display: block; } .content.product .box { opacity: 0; transition: all 1s ease-out; transition-delay: 0s; } .content.product .box.show { opacity: 1; } @media screen and (min-width: 1921px) { } @media screen and (max-width: 1920px) { .wrap { width: 100%; } .main_banner { width: 100%; } } @media screen and (max-width: 1680px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1300px) { .main_banner .content p { width: 100%; padding-right: 0; text-align: center; } .content.product .product_wrap { width: 900px; } .content.product.ver1 .product_wrap { width: 100%; } .wrap .content .content_title { display: none; } .content { width: 100%; padding: 0 27px; box-sizing: border-box; } .content.product .box { transition: all 0s ease-out; } .content.progress .network { padding-bottom: 100px; } .content { padding: 30px; } .content.progress { padding: 0px; } .progress.content .network h4, .progress.content .network h4 b { font-size: 30px; } .progress.content .txt { font-size: 18px; min-height: 72px; line-height: 24px; } .progress.content .network .center { padding-top: 150px; } .content .box { width: 50%; } .about .box:first-child { padding-left: 30px; padding-top: 123px; } .about .box:last-child { padding-right: 30px; } .about .box.left h3 { font-size: 21px; line-height: 25px; } .about .box.left .txtwrap p.txt { font-size: 14px; line-height: 22px; } .about .box:first-child video { width: 100%; margin-top: 100px; /* height: 300px; */ } .about { padding: 230px 30px 100px; width: 900px; box-sizing: border-box; } .about .box.left .txtwrap { width: 100%; } .content.product .product_wrap .box.pr2 .imgwrap { height: 400px !important; } .content.insight .content { width: 900px; padding: 60px 30px; } .content.insight .content .box.board { width: 430px; } .content.insight .content .box.slide { width: 450px; margin-left: -50px; } .content.insight .content .box.board .boardwrap a span.date { float: none; width: 100%; } .content.insight .content .box.board .boardwrap a .right_box { float: none; width: 100%; } .content.insight .content .box.board .boardwrap { padding: 20px; } .content.insight .content .box.board .boardwrap .insights a { padding: 20px 10px; } .content.insight .content .box.board .boardwrap a .right_box span.insight_txt { padding-top: 10px; font-size: 13px; } .content.insight .content .box.board .boardwrap a .right_box span.insight_title { font-size: 18px; } .main_banner .content { width: 900px; left: 50%; margin-left: -450px; text-align: center; } i.br2 { display: block; } .content.global .content { width: 900px; height: auto; } .content.global::before, .content.global::after { display: none; } .content.global .content h1 { width: 100%; font-size: 45px; float: none; padding-top: 0; } .content.global .content h1 span { font-size: 23px; } .content.global .office_wrap { width: 100%; float: none; height: 100%; margin-top: 30px; } .content.global .office_wrap .boxwrap { width: 161px; margin-right: 8px; } .content.global .office_wrap .boxwrap.show { width: 333px; margin-right: 8px; } .content.global .office_wrap .boxwrap .box { width: 100%; } .content.global .office_wrap .boxwrap .box.korea { height: 275px; margin-top: 0; } .content.global .office_wrap .boxwrap .box.japan { height: 275px; margin-top: 0; } .content.global .office_wrap .boxwrap:nth-of-type(3) { width: 322px; } .content.global .office_wrap .boxwrap .box.china { width: 161px; height: 275px; margin-top: 0; } .content.global .office_wrap .boxwrap .box.malaysia { width: 161px; height: 275px; margin-top: 0; float: left; } .content.global .office_wrap .boxwrap .box.sales { height: 275px; margin-top: 0; } .content.global .office_wrap .boxwrap:nth-of-type(3) { width: 332px; } .content.global .office_wrap .boxwrap .box.china { margin-right: 10px; } .content.product.ver1 .product_wrap .pr2.show { top: -90px; left: 0; height: 250px; } .content.product.ver1 .product_wrap { width: 100%; } .content.product.ver1 .product_wrap .pr3.show { top: 590px; left: 0px; margin-left: 0; } .content.product.ver1 .product_wrap .box .txtwrap { padding: 0 0 0 0; } .content.product.ver1 .product_wrap .pr5.show { top: 520px; left: inherit; right: 100px; margin-left: -30px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap { width: 100%; height: 300px !important; } } @media screen and (max-width: 960px) { .wrap { height: 100%; } .about :first-child.box video { margin-top: 70px; } .main_banner { height: 100%; background-size: cover; } .about { width: 644px; padding: 300px 10px 100px; } .about .box:first-child { padding-left: 0; padding-right: 15px; padding-top: 170px; } .about .box:last-child { padding-left: 15px; padding-right: 0; } .about .box.left h3 { font-size: 19px; margin-top: 20px; margin-bottom: 25px; } .wrap .content.product { height: 700px; padding-top: 130px; } .content.product .product_wrap { width: 700px; } .content.insight .content { width: 644px; padding: 40px 10px; box-sizing: border-box; } .progress.content .network h4 { margin-top: 50px; } .progress.content .content .item { width: 176px; overflow: hidden; } .progress.content .content .item > div { margin-left: -10px; } .content.progress .network .center { padding-top: 130px; } .main_banner .content { width: 580px; height: auto; margin-left: -275px; box-sizing: border-box; } .content.insight { padding-top: 320px; } .content.insight .content .box.board { width: 622px; float: none; margin: 0 auto; } .content.insight .content .box.slide { width: 622px; margin: 0 auto; float: none; } .content.global .content { width: 622px; } .global .bg { display: none; } .content.global .office_wrap .boxwrap:nth-child(1) { margin-bottom: 10px; } .content.global .office_wrap .boxwrap:nth-child(2) { margin-bottom: 10px; } .content.global .office_wrap .boxwrap.hidden { display: block; width: 161px; } .content.global .office_wrap .boxwrap.show { width: 161px; } .content.global .office_wrap .boxwrap.hidden { margin-right: 0; margin-bottom: 10px; } .content.global .office_wrap .boxwrap.hidden .china { margin-right: 0; } .content.global .office_wrap .boxwrap.show .china { display: none; } } @media screen and (max-width: 768px) { .content.product .product_wrap .box.pr4 .imgwrap img { width: 469px; margin-left: -65px; } .main_banner .content { width: 400px; margin-left: -200px; } .main_banner .content h1 span { font-size: 30px; } .main_banner .content p span { font-size: 24px; } .main_banner .content p { width: 100%; text-align: center; padding-right: 0; } .about { width: 400px; padding: 0px; padding-bottom: 100px; } .content .box { width: 100%; float: none; } .progress.content .network .item { width: 137px; height: 49px; } .progress.content .network .item > div { transform: scale(0.7); transform-origin: left top; margin: 0 auto; } .content.progress .network .center { margin-top: -50px; } .progress.content .network { height: auto; padding-bottom: 30px; } .progress.content .network h4 { font-size: 24px; width: 400px; margin-top: 100px; } .content.progress .left, .content.progress .right { float: none; margin: 0 auto; text-align: center; width: 400px; } .content.progress .right { margin-top: 50px; } .content.progress .txt, .content.progress .left img, .content.progress .right img { margin-left: 0%; width: 400px; text-align: center; margin: 0 auto; box-sizing: border-box; } .about .box:first-child video { height: auto; margin-bottom: 40px; } .about .box:first-child { padding: 0; } .about .box:last-child { padding: 0; } .wrap .content.product { width: 100%; height: auto; padding: 50px 30px; } .content.insight { padding: 50px 30px; } .content.insight .content { padding: 0; width: 400px; } .content.insight .content .box.board { width: 100%; } .content.insight .content .box.board .boardwrap { padding: 0 10px; min-height: auto; } .content.insight .content .box.board .boardwrap .insights a { padding: 10px 5px; } .content.insight .content .box.slide { width: 100%; overflow: hidden; } .content.global { padding: 50px 30px; } .content.global .content { width: 400px; padding: 0; } .content.global .content h1 { padding-top: 0; } .content.global .office_wrap .boxwrap:nth-child(1) { width: 196px; margin-right: 4px; } .content.global .office_wrap .boxwrap:nth-child(2) { width: 196px; margin-right: 0; margin-left: 4px; } .content.global .office_wrap .boxwrap:nth-of-type(3) { width: 196px; margin-right: 4px; margin-left: 0px; } .content.global .office_wrap .boxwrap:nth-of-type(4) { width: 196px; margin-right: 0; margin-bottom: 10px; margin-left: 4px; } .content.global .office_wrap .boxwrap:last-child { width: 196px; margin-right: 0; margin-bottom: 0px; } .content.global .office_wrap .boxwrap .box.china { width: 196px; float: left; margin-right: 4px; } .content.global .office_wrap .boxwrap .box.malaysia { width: 196px; float: left; } .content.global .office_wrap .boxwrap .box.sales { width: 196px; float: left; } .content.product .product_wrap .box .txtwrap { padding: 0; } .content.product .product_wrap .box.pr2 .txtwrap { padding: 0; } .modal-content { width: 90%; height: 250px; display: inline-block; vertical-align: top; } } @media screen and (max-width: 640px) { } @media screen and (max-width: 480px) { .main_banner { height: 440px; padding: 0px; margin: 0px; top: 0px; } .main_banner video { width: 960px; top: 0px; margin-left: -480px; height: 490px; } .main_banner .content { width: 340px; padding-top: 130px; margin-left: -170px; top: 10%; } .main_banner .content h1 span { font-size: 25px; } .main_banner .content p span { font-size: 14px; } .about { width: 340px; padding: 0px; padding-bottom: 100px; } .about .box.left p.title { font-size: 16px; } .about .box.left h3 { font-size: 17px; line-height: 23px; margin-bottom: 20px; } .about .box.left .txtwrap p.txt { font-size: 13px; line-height: 20px; } .about .box.left .txtwrap { padding-left: 20px; margin-bottom: 10px; } .about .box:first-child video { margin-bottom: 20px; } .about .box.left .txtwrap a.more_btn { font-size: 12px; letter-spacing: 0.2em; } .wrap .content.product { width: 100%; padding: 40px 0; } .progress.content, .progress.content .content { padding: 0px; overflow: hidden; } .progress.content .network .item { width: 100px; height: 49px; } .progress.content .network .item > div { transform: scale(0.51); transform-origin: left top; margin: 0 auto; } .content.progress .network .center { margin-top: -50px; width: 320px; } .progress.content .network { height: auto; padding-bottom: 30px; } .progress.content .network h4 { font-size: 24px; width: 320px; margin-top: 100px; } .content.progress .left, .content.progress .right { float: none; margin: 0 auto; text-align: center; width: 320px; } .content.progress .right { margin-top: 50px; } .content.progress .txt, .content.progress .left img, .content.progress .right img { width: 320px; text-align: center; margin: 0 auto; box-sizing: border-box; } .content.insight { padding: 40px 0; } .content.insight .content { width: 340px; } .content.insight .content .box.board h3.title { font-size: 25px; margin-bottom: 12px; } .content.insight .content .box.board .boardwrap a .right_box span.insight_title { font-size: 15px; line-height: 25px; } .content.insight .content .box.board .boardwrap a .right_box span.insight_txt { font-size: 12px; } .content.insight .content .box.slide { display: none; } .content.global { padding: 40px 0; } .content.global .content { width: 340px; } .content.global .office_wrap .boxwrap:nth-child(1) { width: 100%; margin-right: 0; float: none; } .content.global .office_wrap .boxwrap:nth-child(2) { width: 100%; margin-left: 0; margin-right: 0; float: none; } .content.global .office_wrap .boxwrap:nth-of-type(4) { width: 100%; margin-left: 0; margin-right: 0; float: none; } .content.global .office_wrap .boxwrap:nth-of-type(3) { width: 100%; margin-left: 0; margin-right: 0; float: none; } .content.global .content h1 { font-size: 25px; } .content.global .content h1 span { font-size: 18px; margin-top: 0; } .content.global .office_wrap { margin-top: 20px; } .content.global .office_wrap .boxwrap .box.japan, .content.global .office_wrap .boxwrap .box.korea, .content.global .office_wrap .boxwrap .box.china, .content.global .office_wrap .boxwrap .box.sales { width: 100%; height: 160px; background-size: 100%; background-position: center; } .content.global .office_wrap .boxwrap .box.china { margin-right: 0; } .content.global .office_wrap .boxwrap .box.malaysia { margin-left: 0; width: 100%; background-size: 100%; background-position: center; height: 160px; } .content.global .office_wrap .boxwrap:last-child { width: 100%; } .wrap .content.product { overflow: hidden; } .content.insight .content .box.board h3.title::after { width: 5px; height: 5px; } } @media screen and (max-width: 1300px) { .wrap .content.product { height: 1400px; padding-top: 250px; } .content.product .product_wrap .pr1 { top: -190px; margin-left: 85px; } .content.product .product_wrap .pr2 { top: -120px; left: -30px; } .content.product .product_wrap .pr3 { top: 580px; left: -30px; margin-left: 0; } .content.product .product_wrap .pr4 { top: 820px; margin-left: 0px; left:50%; } .content.product .product_wrap .pr5 { margin-left: -30px; top: 580px; } .content.product .product_wrap .pr1.show { margin-left: 55px; top: -160px; } .content.product .product_wrap .pr2.show { top: -90px; left: 0; } .content.product .product_wrap .pr3.show { top: 590px; left: 0px; margin-left: 0; } .content.product .product_wrap .pr4.show { top: 890px; margin-left: 360px; } .content.product .product_wrap .pr5.show { top: 430px; left:700px; margin-left: -30px; } .content.product .product_wrap .pr1 { width: 400px; } .content.product .product_wrap .pr3 { width: 350px; } .content.product .product_wrap .pr5 { width: 350px; } .content.product .product_wrap .box .imgwrap { height: auto !important; } .content.product .product_wrap .box .imgwrap img { width: 100%; } .content.product .product_wrap .box .txtwrap { padding: 0 0 0 35px; } .content.product .product_wrap .box .txtwrap p.prd_nm { font-size: 21px; } .content.product .product_wrap .box .txtwrap span { font-size: 15px; line-height: 22px; padding-bottom: 0; } .content.product .product_wrap .box.pr2 .imgwrap img { margin-top: -30px; margin-left: 30px; width: 390px; } .content.product .product_wrap .box.pr3 .imgwrap img { margin-left: 0px; } .content.product .product_wrap .box.pr4 .imgwrap { width: 100%; height: 180px; background: #1faac3; /*box-shadow: -25px 25px rgba(0,0,0,.3); */ margin-bottom: 25px; } .content.product .product_wrap .box.pr4 .imgwrap img { vertical-align: bottom; width: 390px; margin-left: -85px; } .content.product .product_wrap .box.pr5 .imgwrap img { vertical-align: bottom; width: 100%; margin-left: 10px; } .content.product .product_wrap .box.pr3 .txtwrap span { color: rgba(255, 255, 255, 0.5); } .content.product.ver1 .product_wrap { width: 100%; } .content.product.ver1 .product_wrap .box .txtwrap { padding: 0 0 0 0; } .content.product.ver1 .product_wrap .pr5.show { top: 520px; left: inherit; right: 100px; margin-left: -30px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap { width: 100%; height: 300px !important; background: #51589f; box-shadow: 25px 25px rgba(0, 0, 0, 0.3); margin-bottom: 35px; padding: 0px; } .content.product.ver1 .product_wrap .pr2.show { width: 350px; } .wrap .content.product.ver1 { height: 1400px; padding-top: 250px; } .content.product.ver1 .product_wrap .box.pr2 .txtwrap { padding: 0 0 0 0px; width: 100%; } } @media screen and (max-width: 960px) { .wrap .content.product { height: 1520px; padding-top: 250px; } .content.product .product_wrap { width: 700px; } .content.product .product_wrap .pr1 { width: 300px; } .content.product .product_wrap .pr2 { width: 300px; } .content.product .product_wrap .pr3 { width: 300px; } .content.product .product_wrap .pr3 { width: 300px; } .content.product .product_wrap .pr5{ width: 300px; } .content.product .product_wrap .box.pr1 .imgwrap { margin-bottom: 15px; box-shadow: none; } .content.product .product_wrap .box.pr2 .imgwrap { height: 200px !important; margin-bottom: 25px; box-shadow: none; } .content.product .product_wrap .box.pr3 .imgwrap { margin-bottom: 15px; } .content.product .product_wrap .box.pr4 .imgwrap { margin-bottom: 15px; box-shadow: none; width: 300px; } .content.product .product_wrap .box.pr5 .imgwrap { margin-bottom: 15px; box-shadow: none; } .content.product .product_wrap .box.pr2 .txtwrap { padding: 0 0 0 10px; width:100%; } .content.product .product_wrap .box .txtwrap { padding: 0 0 0 10px; } .content.product .product_wrap .box.pr2 .imgwrap img { margin-top: -20px; margin-left: 0px; width: 300px; } .content.product .product_wrap .box.pr3 .imgwrap img { width: 373px; margin-left: -30px; } .content.product .product_wrap .box.pr4 .imgwrap img { width: 250px; margin-left: 0px; } .content.product .product_wrap .box.pr5 .imgwrap img { width: 100%; height:100%; margin-left: 0px; } .content.product .product_wrap .box.pr4 .txtwrap { margin-left: 0; } .content.product .product_wrap .pr1.show { margin-left: 25px; top: -90px; } .content.product .product_wrap .pr2.show { left: 30px; top: -64px; } .content.product .product_wrap .pr3.show { left: 30px; top: 550px; } .content.product .product_wrap .pr4.show { top: 1040px; left: 50%; margin-left:30px; } .content.product .product_wrap .pr5.show { top: 520px; left: 50%; margin-left:30px; } .content.product.ver1 .product_wrap .pr5.show { top: 550px; left: 50%; margin-left: 30px; } .content.product.ver1 .product_wrap .box.pr3 .imgwrap img { width: 240px; margin-top: -200px; margin-left: 50px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap img { width: 330px; margin-top: -50px; margin-left: -8px; box-sizing: border-box; } .content.product.ver1 .product_wrap .pr5.show { top: 550px; left: 50%; margin-left: 30px; } .content.product.ver1 .product_wrap .pr2.show { width: 300px; height: 250px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap { height: 200px !important; box-shadow: none; } .content.product.ver1 .product_wrap .pr2.show { left: 30px; top: -64px; } .content.product.ver1 .product_wrap .pr3.show { left: 30px; top: 550px; } .content.product.ver1 .product_wrap .box.pr5 .imgwrap { margin-bottom: 15px; box-shadow: none; } .content.product.ver1 .product_wrap .box.pr5 .imgwrap img { width: 100%; height: 100%; margin-left: 0px; } } @media screen and (max-width: 768px) { .content.product .product_wrap .box.pr4 .imgwrap img { width: 469px; margin-left: -65px; } .wrap .content.product { width: 100%; height: auto; padding: 50px 30px; } .wrap .content.product.ver1 { width: 100%; height: 1815px; padding: 50px 30px; } .content.product .product_wrap { width: 350px; } .content.product .product_wrap .pr1, .content.product .product_wrap .pr2, .content.product .product_wrap .pr3, .content.product .product_wrap .pr4, .content.product .product_wrap .pr5 { position: relative; top: 0; left: 0; width: 100%; margin: 0 auto 70px; } .content.product .product_wrap .pr2 { padding-top: 30px; } .content.product .product_wrap .pr3 { margin-top: 130px; } .content.product .product_wrap .pr5 { margin-top: 80px; } .content.product .product_wrap .pr1.show{ top: 0; left:0; margin-left: 0; } .content.product .product_wrap .pr5.show { top: 150px; left:0; margin-left: 0; } .content.product .product_wrap .pr3.show{ top: 160px; left:0; margin-left: 0; } .content.product .product_wrap .pr2.show { left: 0; top: 0; } .content.product .product_wrap .pr4.show { left: 0px; top: 140px; margin-left:0px; } .content.product .product_wrap .box.pr2 .imgwrap img { margin-top: -70px; margin-left: 20px; width: 350px; } .content.product .product_wrap .box.pr3 .imgwrap img { margin-top: -70px; margin-left: 20px; width: 300px; } .content.product .product_wrap .box.pr4 .imgwrap{ width: 100%; } .content.product .product_wrap .box.pr4 .imgwrap img { margin-top: -70px; margin-left: 0px; width: 300px; } .content.product .product_wrap .pr4 { margin-bottom: 0; } .content.product .product_wrap .box.pr3 .txtwrap p.prd_nm, .content.product .product_wrap .box.pr4 .txtwrap p.prd_nm { color: #ffffff; } .content.product .product_wrap .box.pr3 .txtwrap span, .content.product .product_wrap .box.pr4 .txtwrap span { color: rgba(255, 255, 255, 0.7); } .content.product .product_wrap .box.pr5 .imgwrap img { margin-top: -20px; width: 100%; } .content.product .product_wrap .box .txtwrap { padding: 0; } .content.product .product_wrap .box.pr2 .txtwrap { padding: 0; } .content.product.ver1 .product_wrap { width: 350px; } .content.product.ver1 .product_wrap .pr5.show { top: 160px; left: 0; margin-left: 0; right: inherit; } .content.product.ver1 .product_wrap .pr2.show { left: 0; top: 0; width: 350px; height: 250px; } .content.product.ver1 .product_wrap .pr3.show { top: 160px; left: 0; margin-left: 0; } .content.product.ver1 .product_wrap .pr5.show { top: 250px; left: 0; margin-left: 0; right: inherit; } .wrap .content.product.ver1 { width: 100%; height: 1815px; padding: 50px 30px; } } @media screen and (max-width: 640px) { #float_menu{ /* width: 45vw; */ right:0px; } #float_menu h2{ /* height: 30px; */ text-align:right; margin-top:10px; } #float_menu h2 img{ /* width:100%; */ } #float_menu h3{ margin-top: 10px; } #float_menu2 { position: fixed; z-index: 9; top: inherit; right: 0; bottom: 0; } #float_menu3 { position: fixed; z-index: 9; top: inherit; right: 0; bottom: 140px; } } @media screen and (max-width: 480px) { .wrap .content.product { width: 100%; padding: 40px 0; } .content.product .product_wrap { width: 340px; } .content.product .product_wrap .box.pr2 .imgwrap img { width: 300px; } .content.product .product_wrap .box.pr3 .imgwrap img { width: 320px; margin-left: 10px; } .content.product .product_wrap .box.pr4 .imgwrap img { margin-left: 0px; width: 340px; } .content.product .product_wrap .box.pr5 .imgwrap img { margin-left: 50px; width: 70%; height: 70%; } .content.product .product_wrap .box.pr2 .imgwrap { height: 220px !important; } .content.product .product_wrap .pr1, .content.product .product_wrap .pr2, .content.product .product_wrap .pr3, .content.product .product_wrap .pr4 { margin: 0 auto 40px; } .content.product .product_wrap .pr3 { margin-top: 100px; margin-bottom: 50px; } .content.product .product_wrap .pr4 { margin-bottom: 0; } .content.product .product_wrap .box .txtwrap p.prd_nm { font-size: 17px; padding-bottom: 10px; } .content.product .product_wrap .box .txtwrap span { font-size: 13px; line-height: 18px; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap { height: auto !important; } .content.product.ver1 .product_wrap .box.pr2 .imgwrap img { width: 100%; margin-top: 0; margin-left: 0; box-sizing: border-box; } .content.product.ver1 .product_wrap .pr3.show { left: 0; top: 170px; margin-top: 100px; } .content.product.ver1 .product_wrap .box.pr3 .imgwrap img { width: 100%; margin-top: -70px; margin-left: 0; } .content.product.ver1 .product_wrap .pr5.show { left: 0; top: 170px; margin-top: 100px; } .content.product.ver1 .product_wrap .box.pr5 .imgwrap img { width: 100%; margin-top: -70px; margin-left: 0; } .wrap .content.product { width: 100%; height:2600px; padding: 40px 0; } .wrap .content.product.ver1 { width: 100%; height: 1700px; padding: 40px 0; box-sizing: border-box; } .content.product.ver1 .product_wrap { width: 100%; padding: 0 10px; box-sizing: border-box; } .content.product.ver1 .product_wrap .pr2.show { left: 0; top: 0; width: 100%; height: auto; } .content.product.ver1 .product_wrap .pr3.show { left: 0; top: 0; margin-top: 100px; } .content.product.ver1 .product_wrap .pr5.show { left: 0; top: 0; margin-top: 100px; } } @media screen and (max-width: 414px) { #float_menu{ /* width: 39vw; */ top: 53%; } #float_menu h2{margin-top: 10px;} }