@charset "utf-8"; /* Generated by tools/build_home_css.ps1. Edit the source CSS files, then rebuild. */ /* source: content.css */ /*인사말*/ .greeting{position:relative; max-width:1200px} .greeting .img{position:relative; height:324px; margin-top:110px; background:url(../img/bg_greeting.jpg) no-repeat 50%; background-size:cover;} .greeting .img:before{content:''; display:block; position:absolute; bottom:0; left:135px; width:400px; height:400px; background:url(../img/bg_chairman.png) no-repeat;} .greeting .tit{position:absolute; top:370px; right:100px; width:514px; height:314px; background:#4168ad} .greeting .tit h3{position:relative; margin:0; padding:140px 20px 0 50px; color:#fff; font-size:22px; font-weight:100; line-height:1.6; word-break:keep-all; box-sizing:border-box; text-align:left; letter-spacing:-1px} .greeting .tit h3:before{content:''; display:block; position:absolute; top:-23px; left:50px; width:1px; height:144px; margin:0; background:#fff;} .greeting .tit h3 span{display:block; font-weight:600;} .greeting .colum { padding:50px 20px 70px 20px; max-width:1100px; margin:0 auto} .greeting .colum:after{clear:both; content:""; display:block;} .greeting .colum .left{float:left; width:48%; text-align:justify; } .greeting .colum .right{float:right; width:48%; text-align:justify; } .greeting .sign {text-align:right; font-size:1.125em; font-weight:bold; color:#222; margin-top:60px; padding-right:20px; background-repeat:no-repeat; background-position:right center; line-height:50px;} .greeting .sign .name { font-size:24px} @media (max-width: 980px){ .greeting .tit{position:relative; width:100%; height:auto; padding:0 50px 50px 0px; top:0; right:0;} .greeting .tit h3{font-size:22px; line-height:1.6em;} .greeting .tit h3 br{display:none;} .greeting .img { height:253px} .greeting .img:before{left:50%; width:300px; height:310px; margin-left:-150px; background-size:cover;} .greeting .colum .left { width:100%; clear:both} .greeting .colum .right { width:100%; padding-top:20px; clear:both} } /*인사말*/ /*그룹소개*/ .company_info { width:100%; height:auto; } .company_info .img_page { width:100%; height:550px; background-image:url(../img/company_info_bg_company.jpg); background-position:center; background-repeat:no-repeat;} .company_info .txt_page { max-width:1200px; margin:0 auto; padding:20px} .company_info .txt_page h2 { font-size: 42px; line-height: 1; font-weight: 600; margin-bottom: 44px; padding-top:100px; display: block; } .company_info .Ideology { width:100%; padding-bottom:100px;} .company_info .Ideology .inner { max-width:1240px; margin:auto; clear:both;} .company_info .Ideology .inner h2 {font-size: 36px;font-weight: bold;color: #000; letter-spacing:5px; text-align:center; padding:95px 0 50px 0} .company_info .Ideology .inner .point{color: #06F;} .company_info .Ideology .inner h2:after { content: " ";display: block; margin:20px auto; width:40px; height: 2px; background-color:#000; clear: both;} .company_info .Ideology dl { float:left; width:33.3333%; padding:20px; border-right:1px solid #ddd} .company_info .Ideology dl:last-child { border:0} .company_info .Ideology dl .web_icon { padding:0 0 20px 0; text-align:center; color:#ff4200} .company_info .Ideology dl dt { font-size:20px; height:60px; font-weight:bold; letter-spacing:5px; text-align:center} .company_info .Ideology dd { line-height:2.2; text-align:center; font-size:16px; font-weight:400; letter-spacing:-0.02em; color:#555} .tl_title_box_wrap {width:100%; height:auto; padding:150px 20px; clear:both; background-image:url(../img/work_page_bg.jpg); background-position:center; background-repeat:no-repeat; background-size:cover} .tl_title_box_wrap li {position:relative; width:23.5%; min-height:400px; background-color:#fff; margin-left:2%; float:left; cursor:pointer; -webkit-transition: all 0.4s; transition: all 0.4s; background-position:center; background-size:cover; background-repeat:no-repeat} .tl_title_box_wrap li .bg { background-color:#2c3856; color:#fff; opacity:0; position:absolute; width:100%; height:100%; top:0;left:0; z-index:1} .tl_title_box_wrap li:hover .bg {opacity: 1; -webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; } .tl_title_box_wrap li:hover {-webkit-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-ms-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-webkit-transform:translateY(-25px);transform:translateY(-25px)} .tl_title_box_wrap li .txt_wrap{width:100%;height:100%; position:absolute; top:0; left:0; box-sizing:border-box;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; opacity:1; display:table; z-index:2;} .tl_title_box_wrap li:hover .txt_wrap { opacity:1; color:#fff} .tl_title_box_wrap li:hover .txt_wrap .cell I { color:#FFF} .tl_title_box_wrap li:hover .txt_wrap .cell h2 { color:#FFF} .tl_title_box_wrap li:hover .txt_wrap .cell p { color:#fff} .tl_title_box_wrap li .txt_wrap .cell { text-align:center;width:100%;display: table-cell; vertical-align: middle;} .tl_title_box_wrap li .txt_wrap .cell i { font-size:35px; padding-bottom:20px; color:#1a1a1a} .tl_title_box_wrap li .txt_wrap .cell h2 { font-size:24px; color:#1a1a1a; margin:0; font-weight:bold;} .tl_title_box_wrap li .txt_wrap .cell p { padding-top:50px;} .tl_title_box_wrap li:nth-child(4n+1) { margin-left:0} @media (max-width: 960px){ .company_info .work_page ul li { width:47%; margin-bottom:20px; margin-right: 0; margin-left: 2%;} .company_info .work_page ul li:last-child { margin-right:0} .company_info .work_page ul li:nth-child(2n+2) {margin-right:0;} .company_info .Ideology dl { width:100%; padding-bottom:30px; clear:both} } @media (max-width: 640px){ .company_info .img_page { background-size:cover; height:300px} .company_info .tl_title_box_wrap li { width:100%; margin-left:0; margin-bottom:3%;} } /*그룹소개*/ /*연혁*/ .history_area {position: relative;width: 100%;padding-top: 37px;} .history_area .history_point {position: absolute;left: 50%;top: 0;margin-left: -5px;bottom: 20px;width:8px;background-color: #f6f6f6;overflow: hidden;} /*.history_area .history_point span {position: absolute;display: block;top: 0;width: 100%;height: 200px; background-color:#039}*/ .history_area dl {width: 50%;padding-right: 94px;padding-left: 20px;box-sizing:border-box;} .history_area div:nth-child(odd) dl {padding-right: 20px;padding-left: 94px;} .history_area dt {margin-bottom: 20px;font-size: 46px;line-height:1.3;color: #555;font-weight: bold;} .history_area dd strong {display: block;padding-bottom: 12px;font-size: 20px;line-height: 1.6;color: #1a1a1a;font-weight: bold;} .history_area dd p {display: block;} .history_area dd .img_box {display: block;margin-top: 39px;} .right {text-align: right;} .left {text-align: left;} .fr {float: right;} .img_box img { max-width: 100%} @media (max-width: 960px){ .history_area .history_point {left: 10px;margin-left: 0;} .history_area dl {float: none !important;width: 100%;padding-right: 0;padding-left: 50px;text-align: left;} .history_area div:nth-child(odd) dl {/* padding-right: 0; */padding-left: 50px;} .history_area div + div {margin-top: 40px;} .history_area div:nth-child(2) {margin-top: 0;} .history_area dt {margin-bottom: 20px;font-size:30px;} .history_area dd p br {display: none;} .history_area dd .img_box {margin-top: 20px;} } /*연혁*/ /*오시는 길*/ .location_area .contact_address {width:100%;height:auto; line-height:1.7;} .location_area .contact_address ul {padding:0 20px 20px 0px;border-bottom:1px solid #ddd;} .location_area ul li {color: #555; line-height:2.1;} .contact_traffic .bus {width:100%;padding:0;} .contact_traffic .subway {width:100%; padding-bottom:20px;} .contact_traffic h3 { font-size:20px; font-weight:400; letter-spacing:-1px; color:#1a1a1a; padding-bottom:10px; margin-top:25px; text-align:left}/* 푸터팝업*/ .map_info{width:283px;height:214px;background:#19cd61;position:absolute;right:0;top:0px;padding: 30px 28px;font-size:15px;color:#f8969a;letter-spacing:0;} .map_info span{display:block;font-size:20px;color:#fff; font-weight:bold; letter-spacing:-.25px;} .map_info p { padding-top:20px; color:#f2f2f2; line-height:1.4;} .map_btn{position:absolute;left:30px;bottom:30px;} .map_btn a{display:inline-block; padding:7px 10px; height:41px;border:1px solid #f2f2f2;text-align:center; color:#FFF; letter-spacing:-0.5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .map_btn a:hover{color:#000;background:#fff;border-color:#fff; text-decoration:none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .map_btn a:first-child{margin-right:5px;} /*오시는 길*/ /* content01 */ .content01 .box { position: relative; padding-bottom:80px; display:block;} .content01 .box .img_right { float:right} .content01 .box .txt_wrap { position: absolute; right: 0; top:45px; background: #fff; padding:50px; width: 60%;} .content01 .box .txt_wrap .half-round-tit { display:inline-block;margin-bottom:20px} .content01 .box .txt_wrap .half-round-tit strong {color:#1a1a1a; font-size:22px; font-weight:500; vertical-align: middle; line-height:1.6; letter-spacing:0; float:left} .content01 .box .txt_wrap .half-round-tit span { display: inline-block; width:35px; height:35px; line-height:35px; text-align: center; border-radius: 50%; vertical-align: middle; color: #fff; font-size:16px} .content01 .box .txt_wrap .half-round-tit span {background:#8abd00; margin-right:10px; float:left} .content01 .box .txt_wrap p {text-align: justify;} .content01 .box .txt_wrap02 { position: absolute; left: 0; top:45px; background: #fff; width: 60%;} @media screen and (max-width: 960px) { .content01 .box .img { text-align:center; display:block; float:none; clear:both} .content01 .box .img img { width:100%} .content01 .box .txt_wrap { width:100%; padding:20px; display:block; position:relative; clear:both} } /* content01 */ /* content02 */ .content02 ul li { width:50%; float:left} .content02 ul li .profile { float:left; padding-bottom:50px; width:48%} .content02 ul li .profile img { width:100%} .content02 ul li dl { float:left; padding:0 40px; width:52% } .content02 ul li dl dt { font-size:22px; font-weight:bold; text-align:left; padding-bottom:20px; color:#1a1a1a; letter-spacing:0} .content02 ul li dl dd { font-size:16px; color:#555; line-height:1.75; letter-spacing:-0.02em; text-align:left; display:block; clear:both; } @media screen and (max-width: 1210px) { .content02 ul li { width:49%; margin-left:2%; margin-bottom:6%} .content02 ul li:nth-child(2n+1) { margin-left:0} .content02 ul li .profile { width:100%} .content02 ul li dl { width:100%; padding:0 20px} } @media screen and (max-width: 640px) { .content02 ul li { width:100%; margin-left:0} } /* content02 */ /* content03 */ .content03 .icon li {width:31.3333%; margin-right:3%; min-height:300px; float:left; text-align:justify;} .content03 .icon li:nth-child(3n+3){margin-right:0} .content03 .icon li .web_icon { width:100px; height:100px; margin-bottom:20px; background-color:#c7c7c7; color:#fff; display:table; margin:0 auto} .content03 .icon li .web_icon i { text-align:center; font-size:40px; display:table-cell; vertical-align:middle; margin-bottom:20px} .content03 .icon li h2 {font-size:22px;color:#000;display:block;clear:both;padding-bottom:10px; margin-top:30px; letter-spacing:0; text-align:center} .content03 .icon li p { text-align:center; word-break:keep-all} .content03 .icon li .icon_img {text-align:center;padding-top:20px;display:block;} @media screen and (max-width: 960px) { .content03 .icon li { width:50%; margin-right:0} .content03 .icon li p { max-width:300px; margin:0 auto} } @media screen and (max-width: 640px) { .content03 .icon li { width:100%; margin-right:0} .content03 .icon li p { max-width:300px; margin:0 auto} } /* content03 */ /* content_area04 */ .content04 .point { padding:0 20px 0 0} .content04 .point p { font-size:22px; font-weight:bold; padding-left:30px; color:#1a1a1a; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center;} .content04 .point h2 { font-size:28px; font-weight:100; color:#f66120; text-align:left; padding:10px 0 0;} .content04 .colum { max-width:1400px; margin:0 auto; padding: 30px 0 } .content04 .colum .left { width:50%; float:left; border-right:1px solid #ddd; padding-right:50px} .content04 .colum .left h2 { font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .content04 .colum .right { width:50%; float:left; padding-left:50px; line-height:1.8; text-align:left} .content04 .colum .right h2 { font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .content04 .content_txt_box { width:100%; padding-top:50px; clear:both} .content04 .title_text{float:left; display: block; line-height:1.8; width:25%; color:#1a1a1a; font-size:22px; letter-spacing:0; text-align:left; font-weight:bold; margin:0; padding:0 0 0 30px; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center; box-sizing:border-box} .content04 .sub_txt {float:right; width:75%;} .content04 .sub_txt .h2 { font-size:20px; } .content04 .content_sub_title .img { float:left; text-align:right; width:450px } @media screen and (max-width: 960px) { .content04 .colum .left { width:100%; border:0; float:none; padding:0; clear:both} .content04 .colum .right { width:100%; padding:20px 0 0 } .content04 .title_text { width:100%; margin-bottom:20px; clear:both} .content04 .sub_txt { float:left; width:100%} } @media screen and (max-width: 640px) { } /* content_area04 */ /* content_area05 */ .content05 .photo_box { margin-bottom:50px; background-color:#f9f9f9; clear:both} .content05 .photo_box .img { max-width:50%; float:left;display:block} .content05 .photo_box .img img { width:100%} .content05 .photo_box .txt { max-width:50%; float:left; padding:50px; background-color:#f9f9f9; display:block} .content05 .photo_box .txt h2 { font-size:24px; padding-top:50px; letter-spacing:0; font-weight:bold; text-align:left} .content05 .photo_box .txt p { padding-top:20px; word-break:keep-all} @media screen and (max-width: 960px) { .content05 .photo_box .img { max-width:100%; display:block} .content05 .photo_box .txt { max-width:100%;} .content05 .photo_box .txt h2 { font-size:24px; padding-top:0; font-weight:bold} } /* content_area05 */ /* content_area06 */ .content06 .thumb_box {width:31.3333%; margin-right:3%; display:block; float:left; } @media screen and (min-width: 961px) { .content06 .thumb_box:nth-child(3n+3) { margin-right:0} } .content06 .thumb_box .img { width:100%; min-height:300px; background-image:url(../img/rnd03_thumb01.jpg); background-repeat:no-repeat; background-size:cover; clear:both; overflow:hidden; position:relative} .content06 .thumb_box .txt { width:100%; padding:20px; text-align:left; clear:both} .content06 .thumb_box .txt h2 { font-size:24px; text-align:center; letter-spacing:0; font-weight:bold} .content06 .thumb_box .txt p { padding:20px 0px; text-align:center; } @media screen and (max-width: 960px) { .content06 .thumb_box { width:49%; margin-right:2% } .content06 .thumb_box:nth-child(2n+2) { margin-right:0} } @media screen and (max-width: 640px) { .content06 .thumb_box { width:100%; margin:0; clear:both; float:none} } /* content_area06 */ /* source: layout.css */ .lead { font-size:16px; line-height:1.75; letter-spacing:-0.02em; color:#555; word-break:keep-all} @media screen and (max-width: 640px) { input { -webkit-appearance: none; -webkit-border-radius: 0; } } /*헤드메뉴*/ #header {position:absolute;left:0;top:40px; max-width: 1400px; width:100%; left: 50%; transform:translateX(-50%) ;z-index:6;height:80px;-webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;background-color: #fff;} #header .header-inner {width:100%; height:100% } #header .gnb { list-style:none; height:100%; position:absolute; right:0px} #header .gnb > li { float:left; position:relative; display:inline-block; width:100px; vertical-align:middle; text-align:center;} #header .gnb > li > a {display:inline-block; line-height:1em; width:100%; color:#333;font-size:15px; letter-spacing:-0.5px; font-weight:600; text-decoration:none;} #header .gnb > li > a:hover {color: #2253b8} #header .gnb > li.active {background-color: #b0905e} #header .gnb > li.active > a {color: #fff} #header .gnb .login { background-color:#2253b8; font-size:15px; color:#fff} #header .gnb .join { background-color:#343434; font-size:15px; color:#fff; margin-left:20px} #header .gnb .login a { color:#ddd; font-size:14px} #header .gnb .login a:hover { color:#fff} #header .gnb .join a { color:#ddd; font-size:14px} #header .gnb .join a:hover { color:#fff} #header .header-inner .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:29px; left:50%;width:25px;height:20px; background-image:url(../img/cate_more.gif); margin-left:200px; border:0; display:none} #header .header-inner .menu.on {background-image: url(../img/cate_close.gif)} #header .gnb > li, #header #right-side-open {height:80px;line-height:80px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;} #header #right-side-open { position:absolute; right:0; width:100px; cursor:pointer; border-left:1px solid rgba(255,255,255,0.3); text-align:center; display: inline-block; } #header #right-side-open span{display:inline-block;width:20px; height:20px;font-size:20px;line-height:1em;margin-top:-10px; margin-left:-10px; position:absolute; top:50%;left:50%; color:#fff;} #header .gnb .snb {list-style:none; display:none;} #header #logo { margin-left:25px; padding:0} #header #logo a { display:block; width:100px; height:80px; line-height:80px} #header #logo img { width:100%} #header .gnb .snb,.device-md #header .gnb .snb{display: none;position: absolute;right: -82px;width: 200px; top:80px; border-top: 0;background-color: #000; z-index:2} #header .gnb .snb li { font-size:14px; line-height:3.1; text-align:left; border-top:1px solid #414141;} #header .gnb .snb li a { color:#FFF; display:block; padding-left:20px} #header .gnb .snb li a:hover {color:#fff; display:block; background-color:#2253b8; text-decoration:none; line-height:3.1} #header .gnb .snb li:first-child { border-top:0} @media screen and (max-width: 960px) { #header { display:block; background-color:transparent; top:0; border-bottom:1px solid rgba(255,255,255,0.4); position:fixed} #header #logo { width:120px; display:block} #header .gnb { display:none} } /*헤드메뉴*/ /*오른쪽 퀵메뉴*/ .right_quick { position: absolute; right: 0; top: -60px; z-index: 2} .right_quick.fixed {position: fixed; right: 0; top: 50% !important; margin-bottom:50px; z-index: 100; top: 189px} .right_quick.fixed .material-icons { color:#fff; float:right} .right_quick ul.quick_info { position: relative; height: 240px} .right_quick ul.quick_info li { position: absolute; height: 60px; right:0} .right_quick ul.quick_info li:nth-child(1) {top: 0} .right_quick ul.quick_info li:nth-child(2) {top: 60px} .right_quick ul.quick_info li:nth-child(3) {top: 120px} .right_quick ul.quick_info li:nth-child(4) {top: 180px} .right_quick ul.quick_info li:nth-child(5) {top: 240px} .right_quick ul.quick_info li a{width:60px; height:60px; text-align:center; background:#343434; overflow:hidden; display:block} .right_quick ul.quick_info li i { color:#fff; font-size:24px;} .right_quick ul.quick_info li i.ico{position:absolute;right:20px;top:15px; z-index:2} .right_quick ul.quick_info li:nth-child(1) i {right: 17px} .right_quick ul.quick_info li:nth-child(2) i {right: 17px} .right_quick ul.quick_info li:nth-child(3) i {right: 17px} .right_quick ul.quick_info li:nth-child(4) i {right: 17px} .right_quick ul.quick_info li:nth-child(5) i {right: 17px} .right_quick ul.quick_info li a span{height:60px; line-height:60px; color:#fff; position:absolute; text-align:left; opacity:0; left:30px; font-size:14px; font-weight:500; z-index:2} .right_quick ul.quick_info li a.kakao span { color:#000} @media screen and (max-width: 640px) { .right_quick.fixed { display:none} } /*오른쪽 퀵메뉴*/ /*모바일 오른쪽 메뉴*/ #right-side {background-color:#333;position:fixed; z-index:10; top:0;right:-400px;max-width:400px; width:100%; height:100%; color:#FFF; padding:30px;-webkit-transition: right .3s ease;-moz-transition: right .3s ease;-ms-transition: right .3s ease;-o-transition: right .3s ease;transition: right .3s ease; box-sizing:border-box; overflow:auto;} #right-side .side_gnb .call a {text-align:center; display:block;position:relative;background:#6cc043; color:#fff; font-weight:bold; height:5.0em; line-height:5em; border-radius:3px; margin-top:10px; padding:2px 0 4px 0;} #right-side #btn-close-right-side {position:absolute;top:20px;right:0;color:#fff;width:60px;text-align:center;line-height:40px; font-size:16px; cursor:pointer} #right-side #btn-close-right-side .fa.fa-times { font-size:18px; padding-top:20px} .right-side-on #right-side {right:0;} .right-side-on #wrapper { left:-300px; } .right-side-on #header { left:-300px; } .right-side-on #rs-overlay {display:block;} .quick_menu {width:100%; margin:auto; padding-top:20px} .quick_menu ul { text-align:center} .quick_menu li{display:inline-block; margin-left:-3px; width:80px; border-right:1px solid #555;} .quick_menu li:last-child { border:0} .quick_menu li a{display:block; box-sizing:border-box; color:#f5f5f5; letter-spacing:-0.8px; text-align:center; position:relative; font-size:12px} .quick_menu li a:hover{color:#fff;backface-visibility:hidden} .quick_menu li a.on{color:#fff;border-bottom-color:#FF3300;border-bottom-width:2px;border-bottom-style:solid} .quick_kakao{text-align:center; height:35px; background-color:#ffd800; display:inline-block; clear:both} .quick_kakao a{display:block;position:relative;background:#ffd800} .quick_kakao a img{display:block;margin:0 auto} .side_gnb{position:relative;width:100%;float:left;padding-top:20px;} .side_gnb p{color:#fff; text-align:center; padding:20px } .side_gnb .menu-list{display:block;position:relative;border-bottom:1px solid #555; margin-top:60px} .side_gnb .menu-list>li>a{display:block;position:relative;color:#fff;font-size:15px;line-height:3.8em;padding:0 1.0em;border-top:1px solid #555; text-decoration:none} .side_gnb .menu-list>li>a i{display:block;position:absolute;top:50%;transform:translateY(-75%) rotate(135deg);-webkit-transform:translateY(-75%) rotate(135deg);right:1.5em;width:5.31%;max-width:32px;border:1px solid #ddd;border-left-width:0;border-bottom-width:0;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease;-ms-transition:transform .3s ease} .side_gnb .menu-list>li.on>a i{-webkit-transform:translateY(-25%) rotate(315deg);transform:translateY(-25%) rotate(315deg)} .side_gnb .menu-list>li>a i:before{content:"";display:block;position:relative;padding-top:100%} .side_gnb .depth-2{display:none;} .side_gnb .depth-2>li { background-color:#ddd} .side_gnb .depth-2>li>a{display:block;color:#ddd;font-size:1.2em;line-height:3.0em;padding:0 1.5em 0 2.2em;border-bottom:1px solid #fff; color:#000} @media screen and (max-width: 640px) { .side_gnb .depth-2>li>a { font-size:16px} } /*모바일 오른쪽 메뉴*/ /*메인배너*/ .main-carousel{padding:0; display:block} .main-carousel .li{height:900px; background-size:cover; background-position:center; position:relative} .main-carousel .li .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/main_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:300px;opacity:.6;z-index:1} .main-carousel .jarallax { min-height: 900px;} .main-carousel .img01 { background-image:url(../img/main_banner_img01.jpg);} .main-carousel .img02 { background-image:url(../img/main_banner_img02.jpg);} .main-carousel .img03 { background-image:url(../img/main_banner_img03.jpg);} .main-carousel .li .copy_area{width:100%;text-align:center;color:#fff;position:absolute;top:50%;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2} .main-carousel .li .copy_area h1{font-size:14px;font-weight:300; line-height:1.3; letter-spacing:0.5px; padding-bottom:20px; color:#fff; text-align:center} .main-carousel .li .copy_area h2{font-size:62px;font-weight:100; line-height:1.3; letter-spacing:-5px; color:#fff; text-align:center} .main-carousel .li .copy_area h3{font-size:18px;font-weight:500;text-align:center;margin:10px 0 0; padding:0 20px; word-break:keep-all; color:#fff; opacity:0.8; letter-spacing:-1px} .main-carousel .owl-dots{position:absolute;width:100%; text-align:center; margin:0 auto; bottom:135px;} .main-carousel .owl-dots .owl-dot{background:rgba(255, 255, 255, 0.5);width:30px;height:5px;display:inline-block;margin-left:10px} .main-carousel .owl-dots .owl-dot.active{background:rgba(255, 255, 255, 1)} .main-carousel .owl-nav{position:absolute;width:100%;bottom:50%} .main-carousel .owl-nav .owl-prev{width:40px;height:30px;position:absolute;left:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} .main-carousel .owl-nav .owl-next{width:40px;height:30px;position:absolute;right:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} @media screen and (max-width: 640px) { .main-carousel .li { height:100vh} .main-carousel .jarallax { min-height: 100vh;} .main-carousel .img01 { } .main-carousel .img02 { } .main-carousel .img03 { } .main-carousel .li .copy_area h2 {font-size: 36px; letter-spacing:-3px} .main-carousel .li .copy_area h3 { max-width:300px; margin:10px auto 0 auto; font-size: 15px; letter-spacing:-0.5px} .main-carousel .owl-nav { display:none} } /*메인배너*/ /*사업영역*/ .tl_company_box_wrap{ width:100%; padding:150px 0px;} .tl_company_box_wrap h2 {text-align:center; font-size:30px; color:#333} .tl_company_box_wrap h2:before{ display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px auto; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_company_box_wrap h2 span{ display:block; padding:20px 0; color:#555; font-size:16px; font-weight:400} .tl_company_box_wrap ul {margin-top:30px; overflow:hidden} .tl_company_box_wrap ul li{ width:25%; text-align:center; float:left; display:block} .tl_company_box_wrap ul li .icon { display:inline-block; padding:30px} .tl_company_box_wrap ul li .icon i { color:#666} .tl_company_box_wrap ul li img {vertical-align:middle; transition:transform 500ms} .tl_company_box_wrap ul li:hover i{transform:rotateY(180deg); transition:transform 500ms} .tl_company_box_wrap ul li .box {border-right:1px #eaeaea solid; padding:0 10px; display:block} .tl_company_box_wrap ul li:last-child .box {border-right:0px} .tl_company_box_wrap ul li dl dt {font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:20px} .tl_company_box_wrap ul li a {display:inline-block; margin-top:20px; border:1px #ddd solid; padding:0 20px; line-height:30px; color:#666; transition: all .2s} .tl_company_box_wrap ul li:hover a {background:#2253b8; color:#fff; transition: all .3s} @media screen and (max-width: 1024px) { .tl_company_box_wrap ul li { width:50%} } @media screen and (max-width: 960px) { .tl_company_box_wrap ul li { width:100%} .tl_company_box_wrap ul li .box { border-right:0; border-bottom:1px solid #ddd; padding-bottom:30px} } /*사업영역*/ /*뉴스갤러리*/ .tl_main_gallery_wrap { width:100%; padding:100px 0; background:url(../img/tl_main_gallery_bg.jpg) center no-repeat; background-size:cover;} .tl_main_gallery_wrap .inner {max-width:1200px; margin:0 auto; overflow:hidden} .tl_main_gallery_wrap h2 {text-align:center; font-size:30px; color:#fff} .tl_main_gallery_wrap h2:before{ display:block; content:""; width:30px; height:6px; background:#fff; margin:0 auto 20px auto; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_main_gallery_wrap h2 span{ display:block; padding:20px 0; color:#fff; opacity:0.8; font-size:16px; font-weight:400} .tl_main_gallery_wrap a:hover {color:#2253b8} .tl_main_gallery_wrap ul {margin-top:30px} .tl_main_gallery_wrap li {position:relative; float:left; width:48%; margin:1%; overflow:hidden; background-color:#fff; display:block} .tl_main_gallery_wrap .one_box {display:block; min-height:155px; background:#fff} .tl_main_gallery_wrap .photo {position:absolute; left:0; top:0; width:100%; max-width:160px; min-height: 155px; height:100%; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center center; -webkit-transform: scale(1);transform: scale(1);transition:all 1s ease;-webkit-transition:all 1s ease} .tl_main_gallery_wrap dl {margin-left:190px; padding-right:10px} .tl_main_gallery_wrap dt {color:#333; font-size:18px; font-weight:bold; margin-top:30px; letter-spacing:-1px} .tl_main_gallery_wrap dd {color:#555; font-size:16px; letter-spacing:-0.02em; line-height:1.75; word-break:keep-all; padding:10px 0; } .tl_main_gallery_wrap li:hover .one_box {background-color:#095ead;cursor: pointer} .tl_main_gallery_wrap li:hover dt {color:#fff} .tl_main_gallery_wrap li:hover dd {color:#fff} .tl_main_gallery_wrap li:hover .more_btn {color:#eee} .tl_main_gallery_wrap a:hover .photo {-webkit-transform: scale(1.1);transform: scale(1.1)} @media screen and (max-width: 1024px) { .tl_main_gallery_wrap li { width:100%; margin:0 0 4% 0} } /*뉴스갤러리*/ /*제품소개*/ .tl_business_now_box_warp { width:100%; padding:100px 0; text-align:center; background-color:#eff1f6; clear:both;} .tl_business_now_box_warp h2 { font-size:30px; color:#000; line-height:1.6; font-weight:600} .tl_business_now_box_warp h2:before{ display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px auto; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_business_now_box_warp span{ padding:10px 10px 50px 10px; font-size:16px; display:block; color:#555; font-weight:400} /*제품소개*/ /*TLOG PRODUCTS*/ .tl_product_box_wrap { padding:150px 0; max-width:1200px; margin:0 auto; overflow:hidden} .tl_product_box_wrap h2 { font-size:30px; text-align:center; color:#000; line-height:1.6; font-weight:600} .tl_product_box_wrap span{ padding:10px 10px 50px 10px; font-size:16px; text-align:center; display:block; color:#555; letter-spacing:-0.02em; font-weight:400} /*TLOG PRODUCTS*/ /*메인 공지 최신글*/ .tl_latest_box_warp { width:100%; max-width:1200px; margin:0 auto; padding:0px 20px 100px 20px; border-top:1px solid #ddd; clear:both; overflow:hidden} .tl_latest_box_warp .notice_latest { width:48%; float:left} .tl_latest_box_warp .counsel_latest {width:48%; float:right} @media screen and (max-width: 960px) { .tl_latest_box_warp .notice_latest { width:100%} .tl_latest_box_warp .counsel_latest { width:100%} } /*메인 공지 최신글*/ /*하단 상담신청*/ .tl_contact_box_wrap { width:100%; min-height:550px; padding:100px 0; background:url(../img/main_contact_bg.jpg) center top no-repeat; background-size:cover} .tl_contact_box_wrap .inner { max-width:600px; margin:0 auto; padding:0 20px 0} .tl_contact_box_wrap h2 {text-align:center;font-size:30px; color:#fff; line-height:1.6; font-weight:600} .tl_contact_box_wrap h2 span {padding:10px 0 50px 10px; display:block; font-size:16px; color:#fff; opacity:0.8; font-weight:400; letter-spacing:-0.02em} .tl_contact_box_wrap .input_page #co_name { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:left; border:0} .tl_contact_box_wrap .input_page #co_email { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:right; border:0} .tl_contact_box_wrap .txtarea_page #co_message { margin-top:20px; width:100%; height:120px; font-size:15px; color:#6e6e6e; padding:10px 0 0 10px; border:0} .tl_contact_box_wrap .send_page { text-align:center;} .tl_contact_box_wrap .send_page .send {margin:50px 0 0; max-width:142px; height:41px; line-height:41px; padding:0px 40px;background-color: #3949a3; font-size:15px; font-weight:bold; color:#fff; border:0; border-radius:20px} .tl_contact_box_wrap #x_message{position:absolute;width:300px;border-radius:10px;height:50px;text-align:center;line-height:50px;top:50px;left:50%;margin-left:-150px;background-color:#FDD;border:2px solid #C00;font-weight:700;color:#666;z-index:1000} .tl_contact_box_wrap #x_loading{position:absolute;display:none;width:200px;height:200px;top:50px;left:50%;margin-left:-100px;z-index:1;font-size:100px;line-height:200px} .tl_contact_box_wrap #x_message.x-msg1 {background-color: #FDD;} .tl_contact_box_wrap #x_message.x-msg2 {background-color: #9C6;border:2px solid #096} /*하단 상담신청*/ /*서브상단*/ .sub_visual{position:relative;max-width:2560px;margin:0 auto;height:472px;overflow:hidden;background-repeat:no-repeat;background-position:center top} .sub_visual.visual01 .bg{background-image:url(../img/sub_visual01.jpg)} .sub_visual.visual02 .bg{background-image:url(../img/sub_visual02.jpg)} .sub_visual.visual03 .bg{background-image:url(../img/sub_visual03.jpg)} .sub_visual.visual04 .bg{background-image:url(../img/sub_visual04.jpg)} .sub_visual.visual05 .bg{background-image:url(../img/sub_visual05.jpg)} .sub_visual:hover .bg{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)} .sub_visual .title_warp { max-width:1240px; margin:0 auto; display:table; z-index:5} .sub_visual .title_warp .table-cell { display:table-cell; vertical-align:middle; height:472px;} .sub_visual h3{position:relative;z-index:5;font-size:45px;font-weight:bold; text-align:center; letter-spacing:-1px; color:#fff} .sub_visual .sub_title{ position:relative; padding-bottom:10px; font-size:14px; font-weight:500; color:#fff; text-align:center; opacity:.8; z-index:5} .sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:1200px;opacity:.5;z-index:1} .sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease} @media screen and (max-width: 640px) { .sub_visual .title_warp { max-width:100%;} .sub_visual h3 { font-size:35px} .sub_visual .sub_title { font-size:13px} } /*서브상단*/ .content_wrap { width:100%;} .content_wrap .txtCon { max-width:1300px; margin:0 auto; padding:60px 20px 50px 20px; font-weight:400; position:relative; clear:both} .content_wrap .txtCon .sub_title{ margin-bottom:100px} .content_wrap .txtCon .sub_title h1 {font-size:38px; color:#000; text-align:center} .content_wrap .txtCon .sub_title h1:before {content:""; display:block; height:40px; width:1px; margin:20px auto; background-color:#b0b0b0} .content_wrap .txtCon .sub_title .sub_title {font-size: 16px; color:#555; font-weight:400; text-align:center; padding-top:20px; word-break:keep-all;} .content_wrap .txtboard { max-width:1200px; font-size:12px;} @media screen and (max-width: 640px) { .content_wrap .txtCon .sub_title h1 { font-size:32px} } /*서브 하단 네비*/ .category-wrap {width:100%; height:70px; background-color:#fff; border-bottom:1px solid #ddd; clear:both; background-attachment:scroll; position:relative; z-index:3} .sub_navI_warp { background-color:#fff; max-width:1300px; z-index:3; position:relative; margin: -70px auto;} .all-wrap{max-width:1300px; height:69px; margin:0 auto; transition:all .3s ease;} .all-wrap .loca-wrap{width:100%;margin:0 auto;height:69px} .all-wrap .loca-wrap .loca-area i{float:left;display:inline-block;width:60px;height:71px; line-height:65px; color:#555; border-right:1px solid #ddd; padding:0; margin-top:0; text-align:center} .all-wrap .loca-wrap .loca-area{height:69px;float:left;} .all-wrap .loca-wrap .loca-area > a {display:inline-block;width:54px;height:100%; float:left; line-height:100%; text-align:center;} .all-wrap .loca-wrap .loca-area > a img {margin-top:17px;} .all-wrap .loca-wrap .loca-area>ul {float: left;margin:0; padding:0;} .all-wrap .loca-wrap .loca-area>ul>li{float:left;width:220px;height:70px;position:relative; margin-left:-1px} .all-wrap .loca-wrap .loca-area>ul>li button{height:69px;width:220px;position:relative;text-align:left; background-image:url(../img/loca_arrow_off.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease; border:0; background-color: inherit; box-sizing: border-box; border-left: 1px solid #ddd; border-right: 1px solid #ddd;} .all-wrap .loca-wrap .loca-area>ul>li button.active{background-image:url(../img/loca_arrow_on.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;} .all-wrap .loca-wrap .loca-area>ul>li button span {padding-left: 19px;background-color: transparent; color:#333; font-size:15px} .all-wrap .loca-wrap .loca-area>ul>li div{overflow:hidden;height:0;position:relative} .all-wrap .loca-wrap .loca-area>ul>li div ul{display:block;position:absolute;width:100%;left:0;border:1px solid #ddd; background-color:#fff; padding:0} .all-wrap .loca-wrap .loca-area>ul>li div ul li a{ border-bottom:1px solid #ddd; background:#fff;height:46px;color:#555;line-height:46px;display:block;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;padding-left:19px; font-size:15px; box-sizing:border-box} .all-wrap .loca-wrap .loca-area>ul>li div ul li a:hover { color:#000; font-weight:bold} .all-wrap .loca-wrap .share-area {float: right; display:block; padding-top:16px;box-sizing: border-box;} .all-wrap .loca-wrap .share-area .hide-wrap{width:151px;height:34px;overflow:hidden;float:left} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area{width:151px;height:34px;position:relative;left:200px} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul {overflow: hidden; padding:0; margin:0} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li {float: left;margin-left: 13px; border-bottom: 1px solid #ddd; cursor:pointer} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li:first-child {margin-left: 0;} .all-wrap .loca-wrap .share-area .share-btn{width:34px;height:34px;background-image:url(../img/share_open_bt.png);float:right;text-indent:-9999px;padding-left:18px;box-sizing:unset;background-repeat:no-repeat;background-position-x:right;transition:all .5s ease; background-color: inherit; border:0; margin-right:20px} .all-wrap .loca-wrap .share-area .share-btn.active {background-image: url(../img/share_close_bt.png);border-left: 1px solid #fff;} @media screen and (max-width: 640px) { .all-wrap .loca-wrap .loca-area {100%; float:none;} .all-wrap .loca-wrap .loca-area > a {width:10%;} .all-wrap .loca-wrap .share-area { display:none} .all-wrap .loca-wrap .loca-area > ul {width:100%;} .all-wrap .loca-wrap .loca-area > ul > li { width:50%} .all-wrap .loca-wrap .loca-area > ul > li:first-child { border:0} .all-wrap .loca-wrap .loca-area > ul > li button {width:100%; border-right:0} .all-wrap .loca-wrap .loca-area i { display:none} } /*서브 하단 네비*/ /*푸터*/ #footer { padding: 30px 0px; width: 100%; max-width:2560px; position:relative; z-index:10; background-color:#0d0d0d; clear:both } #footer .footer_in { position:relative; z-index:10; max-width:1200px; height:224px; padding:0 10px 0 10px; margin:0 auto; } #footer .gotop { position:fixed; left:0; bottom:20px; width:100%; min-width:1080px; height:1px; text-align:center; } #footer .gotop a { position:absolute; right:7px; bottom:0; } #footer .menu { display:block; padding:7px 0 0; } #footer .menu a { display:inline-block; margin-right:28px; font-size:14px; font-weight:bold; color:#bbb; } #footer .menu a:active { font-size:14px;} #footer .menu a strong { color:#f36910; } #footer address { position:relative; margin:35px 0 0; padding-top:37px; border-top:1px solid #414141; font-size:14px; color:#a9a9a9; } /* font-weight:bold; */ #footer .adr { display:block; margin:0 0 6px; vertical-align:middle; font-style:normal; } #footer .adr:before { content:""; display:inline-block; width:3px; height:3px; margin:0 8px 0 0; border-radius:3px; background-color:#fff; vertical-align:middle; } #footer .copyright { display:block; margin:22px 0 0; font-size:17px;font-style:normal; } #footer a.wa { position:absolute; right:0; top:37px; } /*푸터*/ /* 푸터팝업*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#00a19a;font-weight:normal;} .f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } /* 푸터팝업*/ @media screen and (max-width: 960px) { .scrolled #header {background-color:#fff; border-bottom:1px solid #ddd;} .scrolled #open-button .nl1 { background-color:#333} .scrolled #open-button .nl2 { background-color:#333} .scrolled #open-button .nl3 { background-color:#333} .scrolled #open-button .navicon-line { background-color:#333} .scrolled #open-button.on .navicon-line { background-color:#fff} /*버튼*/ #open-button{position:fixed;z-index:12;right:15px;padding-top:18px;width:75px; height:80px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:block; } #open-button .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background:#fff;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out} #open-button .nl1 {top: 11px;right: 10px; width:30px;} #open-button .nl2 {top: 19px;right: 10px; width:24px;} #open-button .nl3 {top: 27px;right: 10px; width:30px;} #open-button.on>div>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#fff;} #open-button.on>div>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)} #open-button.scrolled .navicon-line {background-color: #fff;} #open-button.on.scrolled >div>div{background-color:#333;} /*버튼*/ } /* source: order-hero.css */ .visual_slider { display: none; } .order-hero, .order-hero * { box-sizing: border-box; } .order-hero { position: relative; min-height: 850px; overflow: hidden; color: #15233d; background-image: url("/img/sec_1_bg.png"); background-repeat: no-repeat; background-position: center right; background-size: cover; isolation: isolate; } .order-hero::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250, 247, 240, .92) 0%, rgba(250, 247, 240, .78) 30%, rgba(250, 247, 240, .42) 50%, rgba(250, 247, 240, .06) 74%, rgba(250, 247, 240, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .28)); content: ""; pointer-events: none; } .order-hero::after { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%); content: ""; pointer-events: none; } .order-hero__inner { position: relative; display: flex; align-items: center; width: min(1460px, calc(100% - 72px)); min-height: 850px; margin: 0 auto; padding: 178px 0 94px; } .order-hero__content { width: min(610px, 100%); min-width: 0; } .order-hero__content h1 { margin: 0; color: #122243; font-size: clamp(52px, 5.4vw, 84px); font-weight: 900; line-height: 1.04; letter-spacing: -4.8px; word-break: keep-all; } .order-hero__content h1 strong { display: block; margin-top: 8px; color: #0f59df; font-weight: 950; } .order-hero__content #order-hero-title_sub { font-size: clamp(44px, 4.2vw, 60px) !important; line-height: 1.08; letter-spacing: -3.4px; } .order-hero__content #order-hero-title { margin-top: 2px; font-size: clamp(76px, 7vw, 116px); line-height: .92; letter-spacing: -6px; } .order-hero__content #order-hero-title strong { margin-top: 0; } .order-hero__description { max-width: 580px; margin: 30px 0 0; color: #3f4c62; font-size: 21px; font-weight: 650; line-height: 1.72; letter-spacing: -.7px; word-break: keep-all; } .order-hero__points { display: grid; gap: 13px; max-width: 560px; margin: 30px 0 0; padding: 0; list-style: none; } .order-hero__points li { position: relative; min-height: 26px; padding-left: 36px; color: #1f304f; font-size: 18px; font-weight: 800; line-height: 1.45; letter-spacing: -.45px; word-break: keep-all; } .order-hero__points li::before { position: absolute; top: 1px; left: 0; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0f66f0, #17c6bd); box-shadow: 0 9px 18px rgba(15, 102, 240, .18); content: "✓"; font-size: 14px; font-weight: 900; } .order-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 38px; } .order-hero__cta, .order-hero__secondary { display: inline-flex; height: 58px; align-items: center; justify-content: center; border-radius: 16px; font-size: 16px; font-weight: 850; letter-spacing: -.45px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .order-hero__cta { gap: 14px; min-width: 190px; padding: 0 26px; color: #fff; background: linear-gradient(135deg, #1764e8, #1045c5); box-shadow: 0 18px 38px rgba(18, 77, 201, .28); } .order-hero__cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .order-hero__secondary { min-width: 154px; padding: 0 24px; color: #162746; border: 1px solid rgba(22, 39, 70, .18); background: rgba(255, 255, 255, .72); box-shadow: 0 12px 26px rgba(18, 33, 62, .08); backdrop-filter: blur(12px); } .order-hero__cta:hover, .order-hero__cta:focus-visible, .order-hero__secondary:hover, .order-hero__secondary:focus-visible { text-decoration: none; transform: translateY(-2px); } .order-hero__cta:hover, .order-hero__cta:focus-visible { color: #fff; background: linear-gradient(135deg, #2378ff, #1454dc); box-shadow: 0 22px 44px rgba(18, 77, 201, .34); } .order-hero__secondary:hover, .order-hero__secondary:focus-visible { color: #0f59df; border-color: rgba(15, 89, 223, .32); background: rgba(255, 255, 255, .88); } .order-hero__flow { width: min(570px, 100%); margin-top: 42px; padding: 20px; border: 1px solid rgba(255, 255, 255, .76); border-radius: 26px; background: rgba(255, 255, 255, .72); box-shadow: 0 24px 60px rgba(32, 42, 58, .12); backdrop-filter: blur(18px); } .order-hero__flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 2px 4px 16px; border-bottom: 1px solid rgba(31, 48, 79, .1); } .order-hero__flow-head span { color: #65738a; font-size: 14px; font-weight: 850; letter-spacing: -.2px; } .order-hero__flow-head strong { color: #122243; font-size: 18px; font-weight: 900; letter-spacing: -.55px; } .order-hero__flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; } .order-hero__flow li { padding: 17px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(231, 235, 243, .84); } .order-hero__flow li span { display: block; color: #0f59df; font-size: 12px; font-weight: 900; line-height: 1; } .order-hero__flow li b { display: block; margin-top: 10px; color: #15233d; font-size: 19px; font-weight: 900; letter-spacing: -.5px; } .order-hero__flow li em { display: block; margin-top: 5px; color: #748197; font-size: 13px; font-style: normal; font-weight: 750; letter-spacing: -.3px; } @media (max-width: 1280px) { .order-hero { background-position: 58% center; } .order-hero__inner { width: min(1180px, calc(100% - 48px)); } .order-hero__content { width: min(560px, 100%); } .order-hero__description { font-size: 19px; } } @media (max-width: 1024px) { .order-hero { min-height: auto; background-position: 64% center; } .order-hero::before { background: linear-gradient(90deg, rgba(250, 247, 240, .92) 0%, rgba(250, 247, 240, .72) 48%, rgba(250, 247, 240, .24) 100%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .36)); } .order-hero__inner { width: min(760px, calc(100% - 40px)); min-height: auto; padding: 142px 0 78px; } .order-hero__content { width: min(610px, 100%); } } @media (max-width: 640px) { .order-hero { background-position: 72% center; } .order-hero::before { background: linear-gradient(90deg, rgba(250, 247, 240, .9) 0%, rgba(250, 247, 240, .62) 52%, rgba(250, 247, 240, .22) 100%), linear-gradient(180deg, rgba(250, 247, 240, .88) 0%, rgba(250, 247, 240, .66) 54%, rgba(250, 247, 240, .46) 100%); } .order-hero__inner { width: calc(100% - 28px); padding: 112px 0 56px; } .order-hero__content h1 { font-size: 42px; line-height: 1.08; letter-spacing: -2.8px; } .order-hero__content #order-hero-title_sub { font-size: 34px !important; letter-spacing: -2.1px; } .order-hero__content #order-hero-title { margin-top: 4px; font-size: 55px; letter-spacing: -3.4px; } .order-hero__description { margin-top: 22px; font-size: 16px; line-height: 1.68; } .order-hero__points { gap: 10px; margin-top: 22px; } .order-hero__points li { padding-left: 31px; font-size: 15px; } .order-hero__points li::before { width: 22px; height: 22px; font-size: 12px; } .order-hero__actions { margin-top: 28px; } .order-hero__cta, .order-hero__secondary { width: 100%; height: 52px; } .order-hero__flow { margin-top: 28px; padding: 16px; border-radius: 22px; } .order-hero__flow-head { display: block; } .order-hero__flow-head strong { display: block; margin-top: 7px; font-size: 17px; } .order-hero__flow ol { grid-template-columns: 1fr; } .order-hero__flow li { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 14px; } .order-hero__flow li b, .order-hero__flow li em { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .order-hero__cta, .order-hero__secondary { transition: none; } } /* 2026-07-06: Sabangnet/Baljuora-inspired first-view slider */ .order-hero { min-height: 720px; overflow: hidden; color: #111827; background: #f8fafc; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-hero::before, .order-hero::after { display: none; content: none; } .order-hero__slider { position: relative; min-height: 0; } .order-hero__slide { position: relative; overflow: visible; opacity: 1; visibility: visible; } .order-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; } .order-hero__slide--reservation { background: radial-gradient(circle at 84% 20%, rgba(37, 99, 235, .14), transparent 34%), radial-gradient(circle at 76% 70%, rgba(20, 184, 166, .16), transparent 32%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .order-hero__slide--management { background: linear-gradient(90deg, rgba(248, 250, 252, .97) 0%, rgba(248, 250, 252, .88) 42%, rgba(248, 250, 252, .36) 68%, rgba(248, 250, 252, .12) 100%), url("/img/sec_1_bg.png") center right / cover no-repeat; } .order-hero__inner { display: grid; grid-template-columns: minmax(0, .86fr) minmax(420px, .9fr); gap: 70px; width: min(1280px, calc(100% - 72px)); min-height: 720px; align-items: center; padding: 118px 0 82px; } .order-hero__content { width: 100%; } .order-hero__label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #dbeafe; border-radius: 999px; color: #2563eb; background: #eff6ff; font-size: 14px; font-weight: 800; letter-spacing: -.25px; } .order-hero__content h1, .order-hero__content #order-hero-title { margin: 22px 0 0; color: #111827; font-size: clamp(46px, 5vw, 78px); font-weight: 850; line-height: 1.08; letter-spacing: -4.4px; word-break: keep-all; } .order-hero__description { max-width: 620px; margin: 28px 0 0; color: #374151; font-size: 22px; font-weight: 600; line-height: 1.62; letter-spacing: -.8px; } .order-hero__points { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 18px; max-width: none; margin-top: 30px; } .order-hero__points li { min-height: 0; padding-left: 22px; color: #1f2937; font-size: 16px; font-weight: 750; line-height: 1.45; } .order-hero__points li::before { top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; box-shadow: none; content: ""; } .order-hero__actions { gap: 10px; margin-top: 36px; } .order-hero__cta, .order-hero__secondary { height: 54px; border-radius: 10px; font-size: 15px; font-weight: 800; } .order-hero__cta { min-width: 172px; color: #fff; background: #2563eb; box-shadow: 0 14px 30px rgba(37, 99, 235, .24); } .order-hero__cta:hover, .order-hero__cta:focus-visible { background: #1d4ed8; } .order-hero__secondary { min-width: 154px; color: #111827; border-color: #d1d5db; background: #fff; box-shadow: none; } .order-hero__visual { position: relative; min-height: 430px; } .order-hero__qr-card, .order-hero__phone-card, .order-hero__report-card { border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 28px 70px rgba(17, 24, 39, .14); } .order-hero__qr-card { position: absolute; left: 26px; bottom: 18px; width: 210px; padding: 24px 22px; border-radius: 26px; transform: rotate(-5deg); } .order-hero__qr-card span, .order-hero__phone-card span, .order-hero__report-card span { color: #2563eb; font-size: 13px; font-weight: 900; } .order-hero__qr-card strong { display: block; margin-top: 15px; color: #111827; font-size: 26px; font-weight: 900; line-height: 1.12; letter-spacing: -1.4px; } .order-hero__qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 118px; height: 118px; margin-top: 22px; padding: 11px; border-radius: 18px; background: #f3f6fb; } .order-hero__qr-grid i { border-radius: 5px; background: #111827; } .order-hero__qr-grid i:nth-child(2), .order-hero__qr-grid i:nth-child(4), .order-hero__qr-grid i:nth-child(8) { background: #14b8a6; } .order-hero__qr-card em { display: block; margin-top: 13px; color: #6b7280; font-size: 12px; font-style: normal; font-weight: 700; } .order-hero__phone-card { position: absolute; top: 26px; right: 22px; width: 330px; padding: 30px; border-radius: 34px; } .order-hero__phone-card strong { display: block; margin-top: 18px; color: #111827; font-size: 31px; font-weight: 900; line-height: 1.2; letter-spacing: -1.7px; } .order-hero__phone-card p { margin: 18px 0 0; color: #64748b; font-size: 15px; font-weight: 700; } .order-hero__phone-card b { display: grid; height: 48px; margin-top: 26px; place-items: center; border-radius: 13px; color: #fff; background: #111827; font-size: 14px; font-weight: 850; } .order-hero__report-card { width: min(440px, 100%); margin: 40px 0 0 auto; padding: 32px; border-radius: 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); } .order-hero__report-card strong { display: block; margin-top: 16px; color: #111827; font-size: 30px; font-weight: 900; line-height: 1.25; letter-spacing: -1.6px; } .order-hero__report-card ol { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .order-hero__report-card li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; background: #f8fafc; } .order-hero__report-card li b { color: #2563eb; font-size: 13px; font-weight: 900; } .order-hero__report-card li em { color: #111827; font-size: 16px; font-style: normal; font-weight: 800; } .order-hero__controls { position: absolute; z-index: 4; left: 50%; bottom: 34px; display: flex; gap: 8px; transform: translateX(-50%); } .order-hero__controls button { width: 34px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(17, 24, 39, .18); cursor: pointer; } .order-hero__controls button.is-active { width: 54px; background: #2563eb; } @media (max-width: 1024px) { .order-hero, .order-hero__slider { min-height: 780px; } .order-hero__inner { grid-template-columns: 1fr; gap: 28px; width: min(760px, calc(100% - 40px)); min-height: 780px; padding: 116px 0 74px; } .order-hero__visual { min-height: 300px; } .order-hero__qr-card { left: 12px; bottom: 0; } .order-hero__phone-card { top: 0; right: 10px; } .order-hero__report-card { margin: 0 auto; } } @media (max-width: 640px) { .order-hero, .order-hero__slider { min-height: 760px; } .order-hero__inner { width: calc(100% - 32px); min-height: 760px; padding: 112px 0 66px; } .order-hero__label { min-height: 30px; font-size: 12px; } .order-hero__content h1, .order-hero__content #order-hero-title { margin-top: 17px; font-size: 38px; line-height: 1.16; letter-spacing: -2.5px; } .order-hero__description { margin-top: 18px; font-size: 17px; line-height: 1.58; } .order-hero__points { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; } .order-hero__actions { margin-top: 26px; } .order-hero__cta, .order-hero__secondary { width: 100%; height: 50px; } .order-hero__visual { min-height: 260px; } .order-hero__qr-card { width: 148px; padding: 16px; border-radius: 20px; } .order-hero__qr-card strong { font-size: 19px; } .order-hero__qr-grid { width: 82px; height: 82px; gap: 5px; padding: 8px; border-radius: 14px; } .order-hero__phone-card { width: 210px; padding: 20px; border-radius: 24px; } .order-hero__phone-card strong { font-size: 21px; } .order-hero__report-card { padding: 22px; border-radius: 22px; } .order-hero__report-card strong { font-size: 23px; } } /* 2026-07-06: final hero composition guard */ @media (min-width: 1025px) { .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(0, 600px) minmax(0, 540px); gap: 48px; justify-content: space-between; } .order-hero__slide--reservation .order-hero__content { position: relative; z-index: 3; max-width: 600px; } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { max-width: 600px; font-size: clamp(48px, 4.45vw, 68px); letter-spacing: -3.8px; } .order-hero__slide--reservation .order-hero__description { max-width: 560px; font-size: 20px; } .order-hero__slide--reservation .order-hero__visual { z-index: 1; justify-self: end; width: min(540px, 100%); max-width: 540px; min-width: 0; } .order-hero__slide--reservation .order-hero__visual img, .order-hero__slide--reservation .order-hero__visual picture { display: block; max-width: 100%; height: auto; margin-left: auto; } .order-hero__slide--reservation .order-hero__phone-card { right: 0; width: min(320px, 62%); } .order-hero__slide--reservation .order-hero__qr-card { left: 0; width: min(200px, 38%); } } @media (min-width: 1025px) and (max-width: 1180px) { .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(0, 540px) minmax(0, 440px); gap: 36px; } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { font-size: clamp(44px, 4.4vw, 58px); letter-spacing: -3.2px; } .order-hero__slide--reservation .order-hero__description { font-size: 18px; } .order-hero__slide--reservation .order-hero__visual { max-width: 440px; } } /* 2026-07-14: reservation-mall hero, based on the approved visual direction. */ .order-hero__slide--reservation { background: radial-gradient(circle at 86% 18%, rgba(92, 170, 255, .19), transparent 29%), radial-gradient(circle at 77% 78%, rgba(58, 221, 196, .10), transparent 27%), linear-gradient(115deg, #fff 0%, #fbfdff 50%, #f1f7ff 100%); } .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(540px, .9fr) minmax(0, 1.1fr); gap: 18px; width: min(1680px, calc(100% - 80px)); padding-top: 108px; } .order-hero__slide--reservation .order-hero__content { z-index: 3; max-width: 760px; } .order-hero__slide--reservation .order-hero__label { min-height: 38px; padding: 0 18px; border-color: #b9d3ff; color: #2563eb; background: rgba(255, 255, 255, .7); box-shadow: 0 8px 24px rgba(37, 99, 235, .06); font-size: 14px; } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { max-width: 760px; margin-top: 26px; color: #111827; font-size: clamp(48px, 3.85vw, 72px); font-weight: 900; line-height: 1.12; letter-spacing: -4.4px; } .order-hero__slide--reservation .order-hero__content h1 strong { display: inline; margin: 0; color: #2563eb; background: linear-gradient(90deg, #2563eb 0%, #18b9c0 56%, #16b981 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .order-hero__slide--reservation .order-hero__description { max-width: 750px; margin-top: 30px; color: #526176; font-size: 17px; font-weight: 600; line-height: 1.72; letter-spacing: -.5px; } .order-hero__slide--reservation .order-hero__points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(750px, 100%); margin-top: 30px; } .order-hero__slide--reservation .order-hero__points li { display: flex; min-width: 0; min-height: 76px; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(224, 232, 242, .94); border-radius: 17px; color: #162033; background: rgba(255, 255, 255, .86); box-shadow: 0 14px 34px rgba(31, 52, 82, .075); backdrop-filter: blur(12px); } .order-hero__slide--reservation .order-hero__points li::before { display: none; content: none; } .order-hero__point-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border-radius: 14px; } .order-hero__point-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .order-hero__point-icon--qr { color: #15b7d2; background: #e9fbff; } .order-hero__point-icon--check { color: #e8ad1c; background: #fff8df; } .order-hero__point-icon--message { color: #12b99c; background: #e7fbf7; } .order-hero__point-icon--box { color: #2563eb; background: #edf3ff; } .order-hero__slide--reservation .order-hero__points li > span:last-child, .order-hero__slide--reservation .order-hero__points small, .order-hero__slide--reservation .order-hero__points strong { display: block; min-width: 0; } .order-hero__slide--reservation .order-hero__points small { color: #66748a; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: -.25px; } .order-hero__slide--reservation .order-hero__points strong { margin-top: 4px; color: #172033; font-size: 15px; font-weight: 850; line-height: 1.2; letter-spacing: -.55px; white-space: nowrap; } .order-hero__slide--reservation .order-hero__actions { margin-top: 34px; } .order-hero__slide--reservation .order-hero__cta, .order-hero__slide--reservation .order-hero__secondary { height: 58px; border-radius: 12px; font-size: 16px; } .order-hero__slide--reservation .order-hero__cta { min-width: 206px; background: linear-gradient(135deg, #2f7bff, #225fe8); box-shadow: 0 18px 36px rgba(37, 99, 235, .25); } .order-hero__slide--reservation .order-hero__secondary { min-width: 176px; } .order-hero__slide--reservation .order-hero__visual { z-index: 1; width: 100%; max-width: none; min-height: 560px; justify-self: stretch; overflow: visible; } .order-hero__reservation-scene { position: absolute; inset: 0; overflow: visible; } .order-hero__reservation-scene::before { position: absolute; top: 50%; left: 53%; width: min(520px, 82%); aspect-ratio: 1; z-index: 1; border-radius: 50%; border: 1px dashed rgba(52, 183, 232, .38); background: radial-gradient(circle, rgba(66, 150, 255, .13), rgba(66, 150, 255, 0) 67%); content: ""; pointer-events: none; transform: translate(-50%, -50%); } .order-hero__reservation-scene::after { position: absolute; top: 50%; right: 15%; z-index: 1; width: 36%; height: 34%; border-right: 2px dotted rgba(30, 184, 224, .55); border-bottom: 2px dotted rgba(30, 184, 224, .55); border-radius: 0 0 32px 0; content: ""; pointer-events: none; } .order-hero__reservation-glow { position: absolute; top: 50%; left: 53%; width: 72%; height: 88%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(133, 195, 255, .24) 0%, rgba(133, 195, 255, .08) 45%, transparent 72%); filter: blur(10px); transform: translate(-50%, -50%); } .order-hero__reservation-phone { position: absolute; z-index: 2; top: 50%; left: 53%; width: auto; max-width: none !important; height: 552px !important; margin: 0 !important; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 28px 38px rgba(29, 54, 91, .20)); } .order-hero__reservation-qr-card { position: absolute; top: 47%; left: 1%; z-index: 4; width: 178px; padding: 15px 15px 17px; border: 1px solid rgba(224, 232, 242, .96); border-radius: 23px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 50px rgba(31, 52, 82, .14); text-align: center; transform: translateY(-22%) rotate(-4deg); backdrop-filter: blur(12px); } .order-hero__reservation-qr-card > strong { display: block; color: #2473e8; font-size: 13px; font-weight: 850; letter-spacing: -.4px; } .order-hero__reservation-qr-card .order-hero__reservation-qr { display: block; width: 130px; max-width: 100% !important; height: auto !important; margin: 9px auto 2px !important; filter: none; } .order-hero__reservation-qr-card p { margin: 0; color: #5d6b7e; font-size: 11px; font-weight: 750; line-height: 1.45; letter-spacing: -.25px; } .order-hero__reservation-status { position: absolute; right: 0; z-index: 4; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; width: 224px; padding: 18px; border: 1px solid rgba(224, 232, 242, .96); border-radius: 21px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 50px rgba(31, 52, 82, .13); backdrop-filter: blur(12px); } .order-hero__reservation-status--payment { top: 13%; } .order-hero__reservation-status--product { bottom: 9%; } .order-hero__reservation-status-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #13b995; background: #e8fbf6; } .order-hero__reservation-status--product .order-hero__reservation-status-icon { color: #2563eb; background: #edf3ff; } .order-hero__reservation-status-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .order-hero__reservation-status strong, .order-hero__reservation-status p, .order-hero__reservation-status em { display: block; } .order-hero__reservation-status strong { color: #172033; font-size: 13px; font-weight: 850; line-height: 1.35; letter-spacing: -.45px; } .order-hero__reservation-status p { margin: 4px 0 0; color: #78869a; font-size: 10px; font-weight: 650; line-height: 1.45; letter-spacing: -.15px; } .order-hero__reservation-status em { grid-column: 1 / -1; display: flex; min-height: 34px; align-items: center; justify-content: space-between; margin-top: 6px; padding: 0 11px; border-radius: 10px; color: #0eac8a; background: #e9fbf7; font-size: 10px; font-style: normal; font-weight: 800; } .order-hero__reservation-status--product em { color: #2563eb; background: #eff4ff; } .order-hero__reservation-status em b { font-size: 15px; } @media (max-width: 1599px) and (min-width: 1025px) { .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(520px, .9fr) minmax(0, 1.1fr); width: min(1380px, calc(100% - 64px)); } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { font-size: clamp(46px, 4.25vw, 62px); letter-spacing: -3.7px; } .order-hero__slide--reservation .order-hero__description { font-size: 16px; } .order-hero__slide--reservation .order-hero__visual { min-height: 470px; } .order-hero__reservation-phone { height: 468px !important; } .order-hero__reservation-qr-card { left: 0; width: 156px; } .order-hero__reservation-qr-card .order-hero__reservation-qr { width: 108px; } .order-hero__reservation-status { width: 194px; padding: 15px; } } @media (max-width: 1240px) and (min-width: 1025px) { .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(500px, .92fr) minmax(0, 1.08fr); gap: 10px; width: calc(100% - 48px); } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { font-size: 48px; letter-spacing: -3px; } .order-hero__slide--reservation .order-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 490px; } .order-hero__slide--reservation .order-hero__points li { min-height: 66px; } .order-hero__slide--reservation .order-hero__visual { min-height: 410px; } .order-hero__reservation-phone { height: 410px !important; } .order-hero__reservation-qr-card { width: 140px; padding: 12px; } .order-hero__reservation-qr-card .order-hero__reservation-qr { width: 94px; } .order-hero__reservation-status { right: -8px; width: 172px; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 12px; } .order-hero__reservation-status-icon { width: 32px; height: 32px; } .order-hero__reservation-status strong { font-size: 11px; } } @media (max-width: 1024px) and (min-width: 701px) { .order-hero, .order-hero__slider, .order-hero__slide--reservation .order-hero__inner { min-height: 780px; } .order-hero__slide--reservation .order-hero__inner { grid-template-columns: minmax(410px, 1.05fr) minmax(280px, .75fr); gap: 8px; width: min(960px, calc(100% - 40px)); padding: 112px 0 70px; } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { font-size: clamp(40px, 5.5vw, 52px); letter-spacing: -3px; } .order-hero__slide--reservation .order-hero__description br { display: none; } .order-hero__slide--reservation .order-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-hero__slide--reservation .order-hero__visual { min-height: 410px; } .order-hero__reservation-phone { left: 58%; height: 390px !important; } .order-hero__reservation-qr-card { top: 52%; left: -2%; width: 130px; padding: 11px; } .order-hero__reservation-qr-card .order-hero__reservation-qr { width: 88px; } .order-hero__reservation-status { display: none; } } @media (max-width: 700px) { .order-hero, .order-hero__slider, .order-hero__slide--reservation .order-hero__inner { height: 1000px; min-height: 1000px; } .order-hero__slide--reservation .order-hero__inner { grid-template-columns: 1fr; gap: 20px; width: calc(100% - 32px); align-content: start; padding: 106px 0 82px; } .order-hero__slide--management .order-hero__inner { height: 1000px; min-height: 1000px; } .order-hero__slide--reservation .order-hero__content h1, .order-hero__slide--reservation .order-hero__content #order-hero-title { margin-top: 19px; font-size: clamp(37px, 10.2vw, 46px); line-height: 1.16; letter-spacing: -2.7px; } .order-hero__slide--reservation .order-hero__description { margin-top: 20px; font-size: 15px; line-height: 1.68; } .order-hero__slide--reservation .order-hero__description br { display: none; } .order-hero__slide--reservation .order-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 22px; } .order-hero__slide--reservation .order-hero__points li { min-height: 66px; gap: 9px; padding: 10px; border-radius: 14px; } .order-hero__point-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; } .order-hero__point-icon svg { width: 21px; height: 21px; } .order-hero__slide--reservation .order-hero__points strong { font-size: 14px; } .order-hero__slide--reservation .order-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; } .order-hero__slide--reservation .order-hero__cta, .order-hero__slide--reservation .order-hero__secondary { min-width: 0; width: 100%; height: 52px; padding: 0 14px; font-size: 14px; } .order-hero__slide--reservation .order-hero__visual { display: block; width: 100%; min-height: 360px; margin-top: 0; overflow: visible; } .order-hero__reservation-scene::before { left: 62%; width: 310px; } .order-hero__reservation-scene::after { display: none; } .order-hero__reservation-glow { left: 62%; width: 90%; height: 100%; } .order-hero__reservation-phone { top: 50%; left: 65%; height: 344px !important; filter: drop-shadow(0 20px 28px rgba(29, 54, 91, .18)); } .order-hero__reservation-qr-card { top: 49%; left: 1%; width: 122px; padding: 10px 9px 12px; border-radius: 17px; transform: translateY(-18%) rotate(-4deg); } .order-hero__reservation-qr-card > strong { font-size: 10px; } .order-hero__reservation-qr-card .order-hero__reservation-qr { width: 82px; margin-top: 7px !important; } .order-hero__reservation-qr-card p { font-size: 9px; line-height: 1.35; } .order-hero__reservation-status { display: none; } .order-hero__controls { bottom: 24px; } } @media (max-width: 390px) { .order-hero, .order-hero__slider, .order-hero__slide--reservation .order-hero__inner, .order-hero__slide--management .order-hero__inner { height: 1000px; min-height: 1000px; } .order-hero__slide--reservation .order-hero__points li { min-height: 64px; } .order-hero__slide--reservation .order-hero__points strong { font-size: 13px; } .order-hero__reservation-phone { left: 66%; height: 326px !important; } .order-hero__reservation-qr-card { width: 112px; } } @media (prefers-reduced-motion: no-preference) { .order-hero__slide--reservation.is-active .order-hero__reservation-phone { animation: orderReservationPhoneIn .8s cubic-bezier(.22, .8, .3, 1) both; } .order-hero__slide--reservation.is-active .order-hero__reservation-qr-card, .order-hero__slide--reservation.is-active .order-hero__reservation-status { animation: orderReservationCardIn .72s .14s cubic-bezier(.22, .8, .3, 1) both; } } @keyframes orderReservationPhoneIn { from { opacity: 0; transform: translate(calc(-50% + 24px), -50%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes orderReservationCardIn { from { opacity: 0; margin-top: 18px; } to { opacity: 1; margin-top: 0; } } /* 2026-07-14: management hero aligned with the reservation slide. */ .order-hero__slide--management { background: linear-gradient(90deg, rgba(248, 250, 252, .98) 0%, rgba(248, 250, 252, .93) 36%, rgba(248, 250, 252, .38) 61%, rgba(248, 250, 252, .08) 100%), url("/img/sec_1_bg.png") center right / cover no-repeat; } .order-hero__slide--management .order-hero__inner { grid-template-columns: minmax(440px, .9fr) minmax(0, 1.1fr); gap: 18px; width: min(1280px, calc(100% - 64px)); padding-top: 108px; } .order-hero__slide--management .order-hero__content { position: relative; z-index: 3; max-width: 760px; align-self: start; } .order-hero__slide--management .order-hero__label { min-height: 38px; padding: 0 18px; border-color: #b9d3ff; color: #2563eb; background: rgba(255, 255, 255, .76); box-shadow: 0 8px 24px rgba(37, 99, 235, .06); font-size: 14px; } .order-hero__slide--management .order-hero__content h1 { max-width: 760px; margin-top: 26px; color: #111827; font-size: clamp(48px, 3.85vw, 72px); font-weight: 900; line-height: 1.12; letter-spacing: -4.4px; } .order-hero__slide--management .order-hero__tagline { max-width: 640px; margin: 16px 0 0; color: #2563eb; font-size: 21px; font-weight: 850; line-height: 1.5; letter-spacing: -.6px; word-break: keep-all; } .order-hero__slide--management .order-hero__description { max-width: 670px; margin-top: 18px; color: #39475a; font-size: 17px; font-weight: 650; line-height: 1.72; letter-spacing: -.5px; } .order-hero__management-points { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 10px 28px; margin: 24px 0 0; padding: 0; list-style: none; } .order-hero__management-points li { position: relative; padding-left: 24px; color: #263449; font-size: 15px; font-weight: 800; line-height: 1.5; letter-spacing: -.45px; } .order-hero__management-points li::before { position: absolute; top: 8px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; content: ""; } .order-hero__slide--management .order-hero__actions { margin-top: 32px; } .order-hero__slide--management .order-hero__cta, .order-hero__slide--management .order-hero__secondary { height: 58px; border-radius: 12px; font-size: 16px; } .order-hero__slide--management .order-hero__cta { min-width: 206px; background: linear-gradient(135deg, #2f7bff, #225fe8); box-shadow: 0 18px 36px rgba(37, 99, 235, .25); } .order-hero__slide--management .order-hero__secondary { min-width: 176px; } .order-hero__slide--management .order-hero__visual--report { z-index: 2; display: flex; min-height: 520px; align-items: center; justify-content: flex-end; } .order-hero__slide--management .order-hero__report-card { width: min(548px, 94%); margin: 0; padding: 30px; border: 1px solid rgba(226, 232, 240, .92); border-radius: 30px; background: rgba(255, 255, 255, .93); box-shadow: 0 30px 72px rgba(31, 47, 72, .17); backdrop-filter: blur(15px); } .order-hero__slide--management .order-hero__report-card > strong { display: block; margin: 0; color: #172033; font-size: 25px; font-weight: 900; line-height: 1.35; letter-spacing: -1.25px; } .order-hero__slide--management .order-hero__report-card ol { display: grid; gap: 14px; margin: 25px 0 0; padding: 0; list-style: none; } .order-hero__slide--management .order-hero__report-card li { display: grid; grid-template-columns: 42px minmax(128px, 1fr) auto 54px; min-height: 74px; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid rgba(235, 239, 245, .82); border-radius: 17px; background: rgba(249, 251, 254, .94); box-shadow: 0 10px 22px rgba(31, 47, 72, .045); } .order-hero__slide--management .order-hero__report-card li b { color: #2469eb; font-size: 15px; font-weight: 900; } .order-hero__slide--management .order-hero__report-card li > span { color: #253044; font-size: 14px; font-weight: 850; letter-spacing: -.35px; } .order-hero__slide--management .order-hero__report-value { display: inline-flex; min-width: 72px; min-height: 28px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; } .order-hero__slide--management .order-hero__report-value--up, .order-hero__slide--management .order-hero__report-value--new { color: #18ad91; background: #eafaf6; } .order-hero__slide--management .order-hero__report-value--warning { color: #ed981d; background: #fff7e8; } .order-hero__slide--management .order-hero__report-card li img { display: block; width: 46px; max-width: 100%; height: 38px; object-fit: contain; } .order-hero__slide--management .order-hero__report-card li:nth-child(1) img { width: 54px; height: 30px; } .order-hero__slide--management .order-hero__report-card li:nth-child(2) img, .order-hero__slide--management .order-hero__report-card li:nth-child(3) img { width: 38px; height: 38px; justify-self: center; } @media (max-width: 1599px) and (min-width: 1025px) { .order-hero__slide--management .order-hero__inner { grid-template-columns: minmax(520px, .9fr) minmax(0, 1.1fr); width: min(1380px, calc(100% - 64px)); } .order-hero__slide--management .order-hero__content h1 { font-size: clamp(46px, 4.25vw, 62px); letter-spacing: -3.7px; } .order-hero__slide--management .order-hero__description { font-size: 16px; } .order-hero__slide--management .order-hero__report-card { width: min(500px, 96%); padding: 25px; } } @media (max-width: 1240px) and (min-width: 1025px) { .order-hero__slide--management .order-hero__inner { grid-template-columns: minmax(500px, .92fr) minmax(0, 1.08fr); gap: 10px; width: calc(100% - 48px); } .order-hero__slide--management .order-hero__content h1 { font-size: 48px; letter-spacing: -3px; } .order-hero__slide--management .order-hero__report-card { width: min(450px, 98%); padding: 20px; } .order-hero__slide--management .order-hero__report-card li { grid-template-columns: 34px minmax(112px, 1fr) auto 42px; gap: 8px; padding: 10px 12px; } } @media (max-width: 1024px) and (min-width: 701px) { .order-hero__slide--management .order-hero__inner { grid-template-columns: minmax(410px, 1.05fr) minmax(280px, .75fr); gap: 20px; width: min(960px, calc(100% - 40px)); min-height: 780px; padding: 112px 0 70px; } .order-hero__slide--management .order-hero__content h1 { font-size: clamp(40px, 5.5vw, 52px); letter-spacing: -3px; } .order-hero__slide--management .order-hero__description br { display: none; } .order-hero__slide--management .order-hero__visual--report { min-height: 420px; } .order-hero__slide--management .order-hero__report-card { width: 100%; padding: 17px; } .order-hero__slide--management .order-hero__report-card > strong { font-size: 20px; } .order-hero__slide--management .order-hero__report-card li { grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 7px; } .order-hero__slide--management .order-hero__report-value { display: none; } } @media (max-width: 700px) { .order-hero__slide--management { height: 1000px; background: linear-gradient(180deg, rgba(248, 250, 252, 0.45) 0%, rgba(248, 250, 252, .72) 52%, rgba(248, 250, 252, .26) 70%), url("/img/sec_1_bg.png") 69% 122% / auto 118% no-repeat; } .order-hero__slide--management .order-hero__inner { grid-template-columns: 1fr; gap: 24px; width: calc(100% - 32px); height: 1000px; min-height: 1000px; align-content: start; padding: 106px 0 58px; } .order-hero__slide--management .order-hero__content h1 { margin-top: 19px; font-size: clamp(37px, 10.2vw, 46px); line-height: 1.16; letter-spacing: -2.7px; } .order-hero__slide--management .order-hero__tagline { margin-top: 12px; font-size: 17px; } .order-hero__slide--management .order-hero__description { margin-top: 14px; font-size: 15px; line-height: 1.68; } .order-hero__slide--management .order-hero__description br { display: none; } .order-hero__management-points { gap: 8px 16px; margin-top: 20px; } .order-hero__management-points li { padding-left: 18px; font-size: 13px; } .order-hero__management-points li::before { top: 7px; width: 6px; height: 6px; } .order-hero__slide--management .order-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; } .order-hero__slide--management .order-hero__cta, .order-hero__slide--management .order-hero__secondary { min-width: 0; width: 100%; height: 52px; padding: 0 14px; font-size: 14px; } .order-hero__slide--management .order-hero__visual--report { min-height: 290px; align-items: flex-start; } .order-hero__slide--management .order-hero__report-card { width: 100%; padding: 17px; border-radius: 22px; } .order-hero__slide--management .order-hero__report-card > strong { font-size: 19px; letter-spacing: -.8px; } .order-hero__slide--management .order-hero__report-card ol { gap: 9px; margin-top: 17px; } .order-hero__slide--management .order-hero__report-card li { grid-template-columns: 28px minmax(0, 1fr) auto 34px; min-height: 60px; gap: 7px; padding: 8px 10px; border-radius: 13px; } .order-hero__slide--management .order-hero__report-card li b, .order-hero__slide--management .order-hero__report-card li > span { font-size: 12px; } .order-hero__slide--management .order-hero__report-value { min-width: 54px; min-height: 24px; padding: 0 7px; font-size: 9px; } .order-hero__slide--management .order-hero__report-card li img, .order-hero__slide--management .order-hero__report-card li:nth-child(1) img, .order-hero__slide--management .order-hero__report-card li:nth-child(2) img, .order-hero__slide--management .order-hero__report-card li:nth-child(3) img { width: 29px; height: 29px; } } @media (max-width: 390px) { .order-hero__slide--management .order-hero__inner { height: 1000px; min-height: 1000px; } } @media (prefers-reduced-motion: no-preference) { .order-hero__slide--management.is-active .order-hero__report-card { animation: orderManagementReportIn .76s cubic-bezier(.22, .8, .3, 1) both; } } @keyframes orderManagementReportIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } /* source: order-audience-router.css */ .order-audience-router { --router-ink: #101a35; --router-muted: #5c6780; --router-line: #e6e9f2; --router-blue: #2563eb; --router-blue-soft: #eff6ff; position: relative; padding: 88px 0 96px; background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%); } .order-audience-router, .order-audience-router * { box-sizing: border-box; } .order-audience-router__inner { width: min(1280px, calc(100% - 64px)); margin: 0 auto; } .order-audience-router__heading { margin-bottom: 44px; text-align: center; } .order-audience-router__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 16px; border: 1px solid rgba(37, 99, 235, .18); border-radius: 999px; color: #1d4ed8; background: #fff; box-shadow: 0 10px 24px rgba(37, 99, 235, .08); font-size: 14px; font-weight: 850; letter-spacing: -.3px; } .order-audience-router__label::before { width: 7px; height: 7px; border-radius: 50%; background: var(--router-blue); content: ""; } .order-audience-router__heading h2 { margin: 0; color: var(--router-ink); font-size: clamp(28px, 3.2vw, 40px); font-weight: 850; line-height: 1.32; letter-spacing: -1.4px; word-break: keep-all; } .order-audience-router__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .order-audience-router__card { position: relative; display: flex; min-height: 380px; flex-direction: column; padding: 32px 28px 28px; border: 1px solid var(--router-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(20, 30, 60, .05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .order-audience-router__card:hover { transform: translateY(-4px); border-color: #cdd8f5; box-shadow: 0 20px 44px rgba(20, 30, 60, .09); } .order-audience-router__icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 14px; background: var(--router-blue-soft); } .order-audience-router__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--router-blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .order-audience-router__icon svg .accent { stroke: #6ea2ff; } .order-audience-router__card--franchise .order-audience-router__icon { background: #eefdf5; } .order-audience-router__card--franchise .order-audience-router__icon svg { stroke: #0f9d58; } .order-audience-router__card--franchise .order-audience-router__icon svg .accent { stroke: #6bd6a3; } .order-audience-router__card--b2b .order-audience-router__icon { background: #fdf3ff; } .order-audience-router__card--b2b .order-audience-router__icon svg { stroke: #9333ea; } .order-audience-router__card--b2b .order-audience-router__icon svg .accent { stroke: #cd8bf5; } .order-audience-router__card--seller .order-audience-router__icon { background: #fff4e6; } .order-audience-router__card--seller .order-audience-router__icon svg { stroke: #c96808; } .order-audience-router__card--seller .order-audience-router__icon svg .accent { stroke: #f1a143; } .order-audience-router__tag { display: inline-flex; width: fit-content; align-items: center; margin-top: 18px; padding: 4px 11px; border-radius: 8px; color: #1d4ed8; background: var(--router-blue-soft); font-size: 12.5px; font-weight: 850; letter-spacing: -.2px; } .order-audience-router__card--franchise .order-audience-router__tag { color: #0f7a44; background: #eefdf5; } .order-audience-router__card--b2b .order-audience-router__tag { color: #7c22c9; background: #fdf3ff; } .order-audience-router__card--seller .order-audience-router__tag { color: #a84f05; background: #fff4e6; } .order-audience-router__card h3 { margin: 14px 0 0; color: var(--router-ink); font-size: 23px; font-weight: 850; line-height: 1.35; letter-spacing: -.8px; word-break: keep-all; } .order-audience-router__card ul { display: grid; gap: 10px; margin: 20px 0 0; } .order-audience-router__card li { position: relative; padding-left: 24px; color: var(--router-muted); font-size: 14.5px; line-height: 1.55; letter-spacing: -.2px; word-break: keep-all; } .order-audience-router__card li::before { position: absolute; top: 1px; left: 0; color: #94a3b8; content: "·"; font-size: 18px; font-weight: 900; } .order-audience-router__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--router-ink); font-size: 15px; font-weight: 850; text-decoration: none; } .order-audience-router__link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .order-audience-router__card:hover .order-audience-router__link svg { transform: translateX(3px); } @media (max-width: 1180px) { .order-audience-router__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-audience-router__card { min-height: 0; } } @media (max-width: 720px) { .order-audience-router__cards { grid-template-columns: 1fr; } } @media (max-width: 640px) { .order-audience-router { padding: 64px 0 72px; } .order-audience-router__inner { width: min(560px, calc(100% - 40px)); } .order-audience-router__card { padding: 27px 24px 25px; border-radius: 19px; } .order-audience-router__card h3 { font-size: 21px; } } /* source: order-scan-support.css */ .order-scan-section, .order-scan-section * { box-sizing: border-box; } .order-scan-section { position: relative; overflow: hidden; padding: 112px 0; color: #111827; background: #fff; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-scan-section--support { background: #f7f9fc; } .order-scan-section__inner { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1fr); gap: 72px; width: min(1280px, calc(100% - 72px)); margin: 0 auto; align-items: center; } .order-scan-section__number { display: block; margin-bottom: 18px; color: #2563eb; font-size: 14px; font-weight: 800; letter-spacing: -.2px; } .order-scan-section__copy h2 { margin: 0; color: #111827; font-size: clamp(42px, 4.2vw, 66px); font-weight: 850; line-height: 1.12; letter-spacing: -3.6px; word-break: keep-all; } .order-scan-section__copy h2 strong { color: #2563eb; font-weight: 900; } .order-scan-section__lead { margin: 28px 0 0; color: #111827; font-size: 24px; font-weight: 800; line-height: 1.45; letter-spacing: -1px; word-break: keep-all; } .order-scan-section__text { max-width: 620px; margin: 18px 0 0; color: #4b5563; font-size: 18px; font-weight: 500; line-height: 1.75; letter-spacing: -.55px; word-break: keep-all; } .order-scan-section__note { display: inline-flex; max-width: 620px; margin: 28px 0 0; padding: 16px 20px; border: 1px solid #dbeafe; border-radius: 14px; color: #1d4ed8; background: #eff6ff; font-size: 15px; font-weight: 700; line-height: 1.55; letter-spacing: -.35px; word-break: keep-all; } .order-scan-section__visual { position: relative; min-height: 430px; } .order-scan-section__scan-card { position: relative; width: min(460px, 100%); min-height: 270px; margin-left: auto; padding: 34px; overflow: hidden; border: 1px solid #dce5f3; border-radius: 30px; background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(20, 184, 166, .08)), #fff; box-shadow: 0 28px 70px rgba(17, 24, 39, .12); } .order-scan-section__scan-card::before { position: absolute; inset: 32px; border: 1px dashed #bfdbfe; border-radius: 20px; content: ""; } .order-scan-section__scanner-line { position: absolute; top: 68px; right: 34px; left: 34px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #22c55e, transparent); box-shadow: 0 0 24px rgba(34, 197, 94, .5); animation: orderScanLine 2.8s ease-in-out infinite; } .order-scan-section__scan-card span, .order-scan-section__scan-card strong, .order-scan-section__scan-card em { position: relative; z-index: 1; display: block; } .order-scan-section__scan-card span { color: #2563eb; font-size: 13px; font-weight: 900; } .order-scan-section__scan-card strong { margin-top: 76px; color: #111827; font-size: 32px; font-weight: 900; letter-spacing: -1.5px; } .order-scan-section__scan-card em { margin-top: 12px; color: #64748b; font-size: 16px; font-style: normal; font-weight: 700; } .order-scan-section__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(500px, 100%); margin: 24px 0 0 auto; } .order-scan-section__steps div { display: flex; min-height: 76px; align-items: center; gap: 14px; padding: 0 18px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; } .order-scan-section__steps b { color: #2563eb; font-size: 13px; font-weight: 900; } .order-scan-section__steps span { color: #111827; font-size: 17px; font-weight: 800; letter-spacing: -.55px; } .order-scan-section__support-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .order-scan-section__support-list article { min-height: 190px; padding: 28px; border: 1px solid #e5e7eb; border-radius: 24px; background: #fff; box-shadow: 0 20px 48px rgba(17, 24, 39, .07); } .order-scan-section__support-list article span { color: #2563eb; font-size: 13px; font-weight: 900; } .order-scan-section__support-list article strong { display: block; margin-top: 18px; color: #111827; font-size: 23px; font-weight: 850; line-height: 1.28; letter-spacing: -1.1px; word-break: keep-all; } .order-scan-section__support-list article em { display: block; margin-top: 12px; color: #6b7280; font-size: 15px; font-style: normal; font-weight: 500; line-height: 1.55; letter-spacing: -.35px; word-break: keep-all; } @keyframes orderScanLine { 0%, 100% { transform: translateY(0); opacity: .45; } 45% { transform: translateY(118px); opacity: 1; } } @media (max-width: 1024px) { .order-scan-section__inner { grid-template-columns: 1fr; gap: 42px; } .order-scan-section__visual, .order-scan-section__scan-card, .order-scan-section__steps { margin-right: auto; margin-left: auto; } } @media (max-width: 640px) { .order-scan-section { padding: 72px 0; } .order-scan-section__inner { width: calc(100% - 32px); gap: 32px; } .order-scan-section__copy h2 { font-size: 36px; letter-spacing: -2.2px; } .order-scan-section__lead { margin-top: 20px; font-size: 20px; } .order-scan-section__text { font-size: 16px; } .order-scan-section__visual { min-height: auto; } .order-scan-section__scan-card { min-height: 240px; padding: 26px; border-radius: 24px; } .order-scan-section__scan-card strong { margin-top: 64px; font-size: 27px; } .order-scan-section__steps, .order-scan-section__support-list { grid-template-columns: 1fr; } .order-scan-section__support-list article { min-height: auto; padding: 22px; } } /* 2026-07-14: section 02 barcode-scan presentation. */ .order-scan-section--scan { min-height: 820px; padding: 0; background: radial-gradient(circle at 73% 22%, rgba(92, 164, 255, .08), transparent 32%), #fff; } .order-scan-v2, .order-scan-v2 * { box-sizing: border-box; } .order-scan-v2 { position: relative; display: grid; grid-template-columns: minmax(400px, .8fr) minmax(0, 1.2fr); gap: 24px; width: min(1280px, calc(100% - 64px)); min-height: 760px; align-items: center; margin: 0 auto; padding: 92px 0 82px; } .order-scan-v2__copy { position: relative; z-index: 6; max-width: 540px; } .order-scan-v2__number { display: block; margin-bottom: 24px; color: #1769ed; font-size: 15px; font-weight: 900; letter-spacing: -.2px; } .order-scan-v2__copy h2 { margin: 0; color: #111b2e; font-size: clamp(56px, 4.7vw, 78px); font-weight: 900; line-height: 1.03; letter-spacing: -4.8px; word-break: keep-all; } .order-scan-v2__copy h2 strong { color: #2469ef; font-weight: 900; } .order-scan-v2__lead { position: relative; margin: 46px 0 0; padding-left: 26px; color: #172033; font-size: 21px; font-weight: 850; line-height: 1.5; letter-spacing: -.85px; word-break: keep-all; } .order-scan-v2__lead::before { position: absolute; top: 2px; bottom: 2px; left: 0; width: 5px; border-radius: 999px; background: #2469ef; content: ""; } .order-scan-v2__text { margin: 27px 0 0; color: #536177; font-size: 16px; font-weight: 600; line-height: 1.78; letter-spacing: -.42px; word-break: keep-all; } .order-scan-v2__note { display: flex; width: min(500px, 100%); min-height: 106px; align-items: center; gap: 18px; margin-top: 34px; padding: 18px 22px; border: 1px solid #dbeafe; border-radius: 18px; color: #1f5fd6; background: linear-gradient(135deg, #f2f7ff, #eaf2ff); box-shadow: 0 14px 30px rgba(37, 99, 235, .06); } .order-scan-v2__note-icon { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; border: 1px solid #9fc2ff; border-radius: 50%; background: rgba(255, 255, 255, .72); } .order-scan-v2__note-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .order-scan-v2__note p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.65; letter-spacing: -.35px; } .order-scan-v2__note strong { color: #175bd9; font-weight: 850; } .order-scan-v2__visual { position: relative; z-index: 2; width: 100%; min-height: 680px; } .order-scan-v2__scene { position: absolute; top: 0; right: -4%; width: 108%; height: auto; aspect-ratio: 3 / 2; overflow: visible; } .order-scan-v2__scene::after { position: absolute; inset: auto 0 0; z-index: 2; height: 38%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .9) 86%, #fff 100%); content: ""; pointer-events: none; } .order-scan-v2__shelf { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .order-scan-v2__status { position: absolute; top: -28px; left: 4%; z-index: 4; max-width: 300px; padding: 22px 24px 24px; border-radius: 22px; background: #fff; box-shadow: 0 22px 48px rgba(15, 23, 42, .16); } .order-scan-v2__status > span { display: inline-flex; min-height: 32px; align-items: center; padding: 0 14px; border-radius: 999px; color: #1769ed; background: #eaf2ff; font-size: 12px; font-weight: 900; } .order-scan-v2__status > strong { display: block; margin-top: 25px; color: #101a2d; font-size: clamp(34px, 3vw, 48px); font-weight: 900; line-height: 1.15; letter-spacing: -2.5px; } .order-scan-v2__status > p { margin: 16px 0 0; color: #5c6d84; font-size: 16px; font-weight: 750; letter-spacing: -.45px; } .order-scan-v2__status > p b { color: #13a97e; font-weight: 900; } .order-scan-v2__price-tag { position: absolute; top: 42.8%; left: 55.9%; z-index: 5; width: 29.9%; height: 18%; padding: 7px 12px 6px; color: #111827; text-align: center; } .order-scan-v2__price-tag > span, .order-scan-v2__price-tag > strong, .order-scan-v2__price-tag > em { position: relative; z-index: 2; display: block; } .order-scan-v2__price-tag > span { overflow: hidden; font-size: 10px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .order-scan-v2__price-tag > strong { margin-top: 1px; font-size: clamp(15px, 1.5vw, 20px); font-weight: 900; line-height: 1.1; letter-spacing: -.6px; } .order-scan-v2__price-tag > strong small { margin-left: 2px; font-size: .55em; } .order-scan-v2__barcode { position: relative; z-index: 2; width: 82%; height: 24px; margin: 4px auto 0; overflow: visible; } .order-scan-v2__barcode > i:first-child { position: absolute; inset: 0; display: block; background: repeating-linear-gradient(90deg, #111827 0 2px, transparent 2px 4px, #111827 4px 5px, transparent 5px 8px, #111827 8px 12px, transparent 12px 15px); } .order-scan-v2__beam { position: absolute; top: -2px; right: -9px; left: -9px; z-index: 3; display: block; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #45f1b5 18%, #56ffbc 50%, #45f1b5 82%, transparent); box-shadow: 0 0 7px rgba(70, 255, 190, .95), 0 0 18px rgba(46, 216, 172, .72); animation: orderScanV2Beam 1.9s ease-in-out infinite alternate; } .order-scan-v2__price-tag > em { margin-top: 2px; color: #253247; font-size: 7px; font-style: normal; font-weight: 750; letter-spacing: .5px; } .order-scan-v2__scanner { position: absolute; top: 46%; left: 60%; z-index: 3; width: 22%; max-width: 200px; height: auto; filter: drop-shadow(0 23px 24px rgba(20, 34, 59, .24)); transform: rotate(-8deg); transform-origin: bottom left; } .order-scan-v2__steps { position: absolute; right: 1%; bottom: 0; z-index: 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 84%; margin: 0; padding: 0; list-style: none; } .order-scan-v2__steps li { display: flex; min-height: 106px; align-items: center; gap: 17px; padding: 14px 20px; border: 1px solid rgba(221, 228, 239, .96); border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 38px rgba(31, 47, 72, .08); backdrop-filter: blur(12px); } .order-scan-v2__step-icon { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; overflow: hidden; border-radius: 50%; background: #edf4ff; } .order-scan-v2__step-icon img { display: block; width: 50px; height: 50px; object-fit: contain; } .order-scan-v2__steps li:nth-child(2) .order-scan-v2__step-icon img { width: 44px; height: 54px; } .order-scan-v2__steps li:nth-child(3) .order-scan-v2__step-icon img { width: 48px; height: 40px; } .order-scan-v2__step-icon--barcode svg { width: 30px; height: 30px; fill: none; stroke: #1769ed; stroke-linecap: round; stroke-width: 1.8; } .order-scan-v2__steps li > div { min-width: 0; } .order-scan-v2__steps b, .order-scan-v2__steps strong { display: block; } .order-scan-v2__steps b { color: #1769ed; font-size: 13px; font-weight: 900; } .order-scan-v2__steps strong { margin-top: 8px; color: #172033; font-size: 19px; font-weight: 900; line-height: 1.25; letter-spacing: -.8px; white-space: nowrap; } @keyframes orderScanV2Beam { from { transform: translateY(0); opacity: .75; } to { transform: translateY(24px); opacity: 1; } } @media (max-width: 1320px) { .order-scan-v2 { grid-template-columns: minmax(390px, .72fr) minmax(620px, 1.28fr); width: calc(100% - 56px); } .order-scan-v2__copy h2 { font-size: 62px; } .order-scan-v2__steps { width: 88%; } .order-scan-v2__steps li { min-height: 96px; padding: 12px 15px; } } @media (max-width: 1024px) { .order-scan-section--scan, .order-scan-v2 { min-height: auto; } .order-scan-v2 { grid-template-columns: 1fr; gap: 48px; width: min(760px, calc(100% - 40px)); padding: 94px 0 80px; } .order-scan-v2__copy { max-width: 620px; } .order-scan-v2__visual { min-height: 680px; } .order-scan-v2__scene { right: -8%; width: 116%; } .order-scan-v2__steps { right: 0; width: 90%; } } @media (max-width: 640px) { .order-scan-section--scan { padding: 0; } .order-scan-v2 { gap: 34px; width: calc(100% - 32px); padding: 76px 0 68px; } .order-scan-v2__number { margin-bottom: 18px; font-size: 13px; } .order-scan-v2__copy h2 { font-size: 48px; letter-spacing: -3px; } .order-scan-v2__lead { margin-top: 30px; padding-left: 18px; font-size: 18px; } .order-scan-v2__lead::before { width: 4px; } .order-scan-v2__text { margin-top: 20px; font-size: 14px; line-height: 1.72; } .order-scan-v2__text br { display: none; } .order-scan-v2__note { min-height: 92px; gap: 13px; margin-top: 25px; padding: 14px; border-radius: 15px; } .order-scan-v2__note-icon { flex-basis: 45px; width: 45px; height: 45px; } .order-scan-v2__note-icon svg { width: 24px; height: 24px; } .order-scan-v2__note p { font-size: 12px; } .order-scan-v2__visual { min-height: 610px; } .order-scan-v2__scene { top: 0; right: -32%; width: 155%; height: auto; } .order-scan-v2__status { top: 16px; left: 4%; max-width: 220px; padding: 16px 18px 18px; border-radius: 18px; } .order-scan-v2__status > span { min-height: 29px; padding: 0 10px; font-size: 9px; } .order-scan-v2__status > strong { margin-top: 15px; font-size: 26px; letter-spacing: -1.5px; } .order-scan-v2__status > p { margin-top: 9px; font-size: 11px; } .order-scan-v2__price-tag { top: 42.8%; left: 55.9%; padding: 6px 8px; } .order-scan-v2__price-tag > span { font-size: 7px; } .order-scan-v2__price-tag > strong { font-size: 17px; } .order-scan-v2__barcode { height: 30px; margin-top: 4px; } .order-scan-v2__price-tag > em { font-size: 5px; } .order-scan-v2__scanner { top: 46%; left: 60%; width: 20%; } .order-scan-v2__steps { right: 0; bottom: 0; width: 100%; gap: 8px; } .order-scan-v2__steps li { min-height: 78px; gap: 9px; padding: 9px 10px; border-radius: 15px; } .order-scan-v2__step-icon { flex-basis: 43px; width: 43px; height: 43px; } .order-scan-v2__step-icon img, .order-scan-v2__steps li:nth-child(2) .order-scan-v2__step-icon img, .order-scan-v2__steps li:nth-child(3) .order-scan-v2__step-icon img { width: 35px; height: 35px; } .order-scan-v2__steps b { font-size: 10px; } .order-scan-v2__steps strong { margin-top: 4px; font-size: 13px; } @keyframes orderScanV2Beam { from { transform: translateY(0); } to { transform: translateY(30px); } } } @media (prefers-reduced-motion: reduce) { .order-scan-v2__beam { animation: none; } } /* source: order-modes.css */ .order-modes { --modes-blue: #073fae; --modes-sky: #1473e6; --modes-ink: #101a35; --modes-muted: #5c6780; --modes-mint: #72e7b2; --modes-paper: #fbfaf7; --modes-line: #e8e3da; position: relative; overflow: hidden; padding: 104px 0 104px; color: var(--modes-ink); background: radial-gradient(circle at 8% 12%, rgba(20, 115, 230, .07), transparent 24%), radial-gradient(circle at 88% 8%, rgba(114, 231, 178, .1), transparent 28%), linear-gradient(180deg, var(--modes-paper) 0%, #ffffff 100%); } .order-modes, .order-modes * { box-sizing: border-box; } .order-modes__inner { position: relative; width: min(1380px, calc(100% - 80px)); margin: 0 auto; } .order-modes__heading { display: grid; grid-template-columns: minmax(460px, .94fr) minmax(390px, .78fr); gap: 48px 76px; align-items: center; margin-bottom: 52px; } .order-modes__heading-copy { position: relative; z-index: 2; } .order-modes__label { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 20px; padding: 10px 16px; border: 1px solid rgba(7, 63, 174, .16); border-radius: 999px; color: #0644bb; background: rgba(255, 255, 255, .82); box-shadow: 0 14px 30px rgba(32, 92, 180, .08); font-size: 15px; font-weight: 850; letter-spacing: -.35px; } .order-modes__label::before { width: 8px; height: 8px; border-radius: 50%; background: var(--modes-mint); box-shadow: 0 0 0 6px rgba(114, 231, 178, .18); content: ""; } .order-modes__heading h2 { margin: 0; color: var(--modes-ink); font-size: clamp(42px, 4vw, 64px); font-weight: 850; line-height: 1.14; letter-spacing: -3.5px; word-break: keep-all; } .order-modes__heading p { max-width: 620px; margin: 24px 0 0; color: var(--modes-muted); font-size: 19px; line-height: 1.72; letter-spacing: -.65px; word-break: keep-all; } .order-modes__visual { position: relative; z-index: 1; display: flex; min-height: 460px; align-items: center; justify-content: center; } .order-modes__device-stage { position: relative; width: min(720px, 100%); height: auto; min-height: 0; overflow: visible; margin-left: -18px; padding: 0 18px 54px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .order-modes__device-stage::before { display: none; content: none; } .order-modes__device-stage::after { position: absolute; left: 50%; bottom: 8px; width: 480px; height: 72px; border-radius: 50%; background: rgba(13, 29, 67, .12); filter: blur(18px); content: ""; transform: translateX(-50%); } .order-modes__device-glow { position: absolute; right: 26px; top: 48px; width: 190px; height: 190px; border-radius: 50%; background: rgba(23, 198, 189, .22); filter: blur(8px); } .order-modes__pc, .order-modes__mobile, .order-modes__scanner { position: absolute; display: block; width: auto; height: auto; max-width: none; pointer-events: none; user-select: none; } .order-modes__pc { position: relative; left: auto; top: auto; z-index: 2; width: min(100%, 700px); filter: drop-shadow(0 24px 34px rgba(21, 48, 96, .2)); transform: none; } .order-modes__mobile { right: -8px; bottom: 30px; z-index: 4; width: 190px; filter: drop-shadow(0 18px 24px rgba(21, 48, 96, .22)); } .order-modes__scanner { right: 155px; bottom: 42px; z-index: 5; width: 110px; transform: rotate(-8deg); filter: drop-shadow(0 16px 20px rgba(21, 48, 96, .2)); } .order-modes__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .order-modes__card { position: relative; min-height: 410px; padding: 30px 28px; border: 1px solid var(--modes-line); border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 34px rgba(35, 39, 47, .06); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .order-modes__card::before { display: none; content: none; } .order-modes__card:hover { transform: translateY(-3px); border-color: #d7d0c5; box-shadow: 0 18px 42px rgba(35, 39, 47, .09); } .order-modes__card--precision { border-color: #d8e3f7; color: var(--modes-ink); background: rgba(255, 255, 255, .96); box-shadow: 0 14px 38px rgba(7, 63, 174, .09); } .order-modes__card--precision::before { display: none; content: none; } .order-modes__card-top, .order-modes__card h3, .order-modes__card p, .order-modes__card ul { position: relative; z-index: 2; } .order-modes__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .order-modes__step { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: transparent; background: #f7f6f3; font-size: 0; font-weight: 900; } .order-modes__step::before { color: #1f2328; content: "🧾"; font-size: 27px; font-weight: 400; line-height: 1; } .order-modes__card--advanced .order-modes__step::before { content: "📈"; } .order-modes__card--precision .order-modes__step::before { content: "✨"; } .order-modes__card--precision .order-modes__step { color: transparent; background: #f4f7ff; } .order-modes__tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #e9e5dd; border-radius: 10px; color: #645f58; background: #f7f6f3; font-size: 13px; font-weight: 850; letter-spacing: -.25px; } .order-modes__card--precision .order-modes__tag { color: #164ca6; border-color: #dfe8fa; background: #f4f7ff; } .order-modes__card h3 { margin: 34px 0 14px; color: #12244a; font-size: 32px; font-weight: 900; line-height: 1.15; letter-spacing: -1.7px; } .order-modes__card--precision h3 { color: #12244a; } .order-modes__card p { margin: 0; color: #5d6880; font-size: 16px; line-height: 1.65; letter-spacing: -.45px; word-break: keep-all; } .order-modes__card--precision p { color: #5d6880; } .order-modes__card ul { display: grid; gap: 14px; margin: 28px 0 0; } .order-modes__card li { position: relative; padding-left: 31px; color: #394862; font-size: 15px; line-height: 1.55; letter-spacing: -.4px; word-break: keep-all; } .order-modes__card li::before { position: absolute; top: 2px; left: 0; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #0f63d6; background: #f4f7ff; content: "✓"; font-size: 12px; font-weight: 900; } .order-modes__card--precision li { color: #394862; } .order-modes__card--precision li::before { color: #0f63d6; background: #f4f7ff; } .order-modes__note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; padding: 22px 28px; border: 1px solid var(--modes-line); border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 10px 28px rgba(35, 39, 47, .05); text-align: center; word-break: keep-all; } .order-modes__note::before { content: "💡"; font-size: 22px; line-height: 1; } .order-modes__note strong { color: #073fae; font-size: 17px; font-weight: 900; letter-spacing: -.5px; } .order-modes__note span { color: #4f5d76; font-size: 16px; line-height: 1.5; letter-spacing: -.45px; } @media (max-width: 1200px) { .order-modes__inner { width: min(1080px, calc(100% - 56px)); } .order-modes__heading { grid-template-columns: 1fr; gap: 34px; text-align: center; } .order-modes__label, .order-modes__heading p { margin-right: auto; margin-left: auto; } .order-modes__heading p { max-width: 760px; } .order-modes__visual { min-height: 430px; } .order-modes__device-stage { width: min(680px, 100%); height: auto; padding: 0 18px 48px; } .order-modes__pc { left: auto; top: auto; width: min(100%, 640px); transform: none; } .order-modes__mobile { right: 8px; bottom: 30px; width: 150px; } .order-modes__scanner { right: 155px; bottom: 42px; width: 110px; } .order-modes__cards { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; } .order-modes__card { min-height: auto; } } @media (max-width: 640px) { .order-modes { padding: 70px 0 68px; } .order-modes__inner { width: calc(100% - 36px); } .order-modes__heading { margin-bottom: 34px; } .order-modes__label { margin-bottom: 14px; font-size: 14px; } .order-modes__heading h2 { font-size: 34px; line-height: 1.2; letter-spacing: -2px; } .order-modes__heading p { font-size: 15px; line-height: 1.65; } .order-modes__visual { min-height: 0; } .order-modes__device-stage { width: 100%; height: auto; padding: 0 0 34px; margin-left: 0; border-radius: 0; } .order-modes__device-stage::before { top: 22px; left: 20px; width: 82px; height: 82px; border-radius: 24px; } .order-modes__device-stage::after { right: 30px; bottom: 14px; width: 220px; height: 42px; } .order-modes__device-glow { right: 24px; top: 38px; width: 112px; height: 112px; } .order-modes__pc { left: auto; top: auto; width: 112%; margin-left: -8%; transform: none; } .order-modes__mobile { right: -6px; bottom: 30px; width: 92px; } .order-modes__scanner { right: 155px; bottom: 42px; width: 110px; } .order-modes__cards { gap: 16px; } .order-modes__card { padding: 24px 22px; border-radius: 26px; } .order-modes__step { width: 40px; height: 40px; border-radius: 14px; } .order-modes__tag { min-height: 32px; padding: 0 12px; font-size: 12px; } .order-modes__card h3 { margin-top: 32px; font-size: 28px; } .order-modes__card p, .order-modes__card li { font-size: 14px; } .order-modes__note { align-items: flex-start; flex-direction: column; gap: 8px; padding: 20px; text-align: left; } .order-modes__note strong { font-size: 16px; } .order-modes__note span { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .order-modes__card { transition: none; } } /* 2026-07-06: content rhythm closer to Sabangnet service pages */ .order-modes { --modes-blue: #2563eb; --modes-sky: #2563eb; --modes-ink: #111827; --modes-muted: #4b5563; --modes-mint: #14b8a6; --modes-paper: #ffffff; --modes-line: #e5e7eb; padding: 112px 0; background: #fff; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-modes__inner { width: min(1280px, calc(100% - 72px)); } .order-modes__heading { grid-template-columns: minmax(0, .86fr) minmax(420px, .9fr); gap: 70px; margin-bottom: 44px; align-items: center; } .order-modes__label { margin-bottom: 18px; padding: 0; border: 0; border-radius: 0; color: #2563eb; background: transparent; box-shadow: none; font-size: 14px; font-weight: 800; } .order-modes__label::before { display: none; content: none; } .order-modes__heading h2 { color: #111827; font-size: clamp(42px, 4.1vw, 64px); font-weight: 850; line-height: 1.12; letter-spacing: -3.4px; } .order-modes__heading p { max-width: 600px; color: #4b5563; font-size: 18px; font-weight: 500; } .order-modes__visual { min-height: 390px; } .order-modes__device-stage { padding-bottom: 42px; } .order-modes__device-stage::after { opacity: .7; } .order-modes__cards { gap: 16px; } .order-modes__card { min-height: 0; padding: 28px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: none; } .order-modes__card:hover { border-color: #bfdbfe; box-shadow: 0 18px 42px rgba(17, 24, 39, .08); } .order-modes__step { width: auto; height: auto; place-items: start; color: #2563eb; background: transparent; font-size: 14px; font-weight: 900; } .order-modes__step::before { display: none; content: none; } .order-modes__tag, .order-modes__card--precision .order-modes__tag { min-height: 30px; padding: 0 11px; border-color: #dbeafe; border-radius: 999px; color: #2563eb; background: #eff6ff; font-size: 12px; font-weight: 800; } .order-modes__card h3 { margin: 30px 0 14px; color: #111827; font-size: 28px; font-weight: 850; letter-spacing: -1.4px; } .order-modes__card p { color: #4b5563; font-size: 15px; font-weight: 500; } .order-modes__card ul { gap: 11px; margin-top: 24px; } .order-modes__card li { color: #374151; font-size: 15px; font-weight: 500; } .order-modes__card li::before, .order-modes__card--precision li::before { color: #2563eb; background: #eff6ff; } .order-modes__note { justify-content: flex-start; margin-top: 20px; border-color: #dbeafe; border-radius: 16px; background: #eff6ff; box-shadow: none; text-align: left; } .order-modes__note::before { content: "!"; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #2563eb; font-size: 14px; font-weight: 900; } .order-modes__note strong { color: #1d4ed8; } @media (max-width: 1200px) { .order-modes__heading { grid-template-columns: 1fr; text-align: left; } .order-modes__label, .order-modes__heading p { margin-left: 0; } } @media (max-width: 640px) { .order-modes { padding: 72px 0; } .order-modes__inner { width: calc(100% - 32px); } .order-modes__heading h2 { font-size: 36px; letter-spacing: -2.2px; } .order-modes__heading p { font-size: 16px; } .order-modes__card { padding: 22px; border-radius: 16px; } } /* source: order-comparison.css */ .order-comparison { --comparison-bg: #071a3d; --comparison-blue: #1761e8; --comparison-mint: #51d9aa; --comparison-line: rgba(174, 200, 244, .21); position: relative; overflow: hidden; padding: 58px 0 70px; color: #fff; background: radial-gradient(circle at 73% 42%, rgba(19, 90, 224, .17), transparent 31%), linear-gradient(135deg, #081d43 0%, var(--comparison-bg) 62%, #061733 100%); } .order-comparison::before { position: absolute; top: -210px; left: 50%; width: 780px; height: 420px; border: 1px solid rgba(74, 137, 244, .13); border-radius: 50%; content: ""; transform: translateX(-10%) rotate(-12deg); } .order-comparison, .order-comparison * { box-sizing: border-box; } .order-comparison__inner { position: relative; z-index: 1; width: min(1380px, calc(100% - 80px)); margin: 0 auto; } .order-comparison__section-no { display: inline-block; padding-bottom: 9px; border-bottom: 2px solid #4382f4; color: #4382f4; font-size: 20px; font-weight: 850; line-height: 1; } .order-comparison h2 { margin: 28px 0 38px; color: #fff; font-size: clamp(48px, 3.8vw, 62px); font-weight: 800; line-height: 1.18; letter-spacing: -4px; word-break: keep-all; } .order-comparison h2 strong { color: #2872ef; font-weight: 850; } .order-comparison__table { overflow: hidden; border: 1px solid rgba(142, 176, 230, .2); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 6, 22, .24); } .order-comparison__head, .order-comparison__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.05fr); } .order-comparison__head { min-height: 60px; } .order-comparison__head > div { display: grid; place-items: center; font-size: 27px; font-weight: 800; letter-spacing: -1px; } .order-comparison__head-old { color: #c0cce0; background: rgba(123, 151, 197, .23); } .order-comparison__head-flow { background: rgba(21, 52, 100, .74); } .order-comparison__head-new { color: #fff; background: linear-gradient(90deg, #0d4fcf, #1761e8); } .order-comparison__row { min-height: 92px; border-top: 1px solid var(--comparison-line); } .order-comparison__old, .order-comparison__new { display: grid; min-width: 0; align-items: center; } .order-comparison__old { grid-template-columns: 112px 1fr; padding: 14px 34px 14px 18px; color: #aebbd1; background: rgba(79, 108, 156, .2); font-size: 20px; font-weight: 650; letter-spacing: -.55px; } .order-comparison__flow { display: flex; align-items: center; justify-content: center; gap: 7px; color: #2e78ef; background: rgba(12, 40, 83, .86); } .order-comparison__flow i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .order-comparison__flow svg { width: 45px; height: 45px; margin-left: 4px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .order-comparison__new { grid-template-columns: 112px 1fr 48px; gap: 6px; padding: 14px 28px 14px 18px; color: #09275d; background: #f9fbff; } .order-comparison__new strong { font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.65px; word-break: keep-all; } .order-comparison__icon { display: grid; place-items: center; } .order-comparison__icon svg { width: 55px; height: 55px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; } .order-comparison__old .order-comparison__icon { color: #91a8ce; } .order-comparison__old .order-comparison__icon .mark { stroke: #8299bd; } .order-comparison__new .order-comparison__icon { color: #1459cf; } .order-comparison__new .order-comparison__icon .mark { stroke: var(--comparison-mint); } .order-comparison__check { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fff; background: var(--comparison-mint); font-size: 17px; font-weight: 900; line-height: 1; } @media (max-width: 1100px) { .order-comparison__inner { width: min(980px, calc(100% - 56px)); } .order-comparison__head, .order-comparison__row { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.05fr); } .order-comparison__old, .order-comparison__new { grid-template-columns: 80px 1fr; } .order-comparison__new { grid-template-columns: 80px 1fr 40px; } .order-comparison__old { padding-right: 20px; } } @media (max-width: 760px) { .order-comparison { padding: 78px 0 84px; } .order-comparison__inner { width: calc(100% - 36px); } .order-comparison__section-no { font-size: 16px; } .order-comparison h2 { margin: 25px 0 38px; font-size: clamp(35px, 10.2vw, 43px); line-height: 1.2; letter-spacing: -2.6px; } .order-comparison h2 br { display: none; } .order-comparison__table { overflow: visible; border: 0; border-radius: 0; box-shadow: none; } .order-comparison__head { display: none; } .order-comparison__body { display: grid; gap: 16px; } .order-comparison__row { display: grid; min-height: 0; grid-template-columns: 1fr; overflow: hidden; border: 1px solid rgba(142, 176, 230, .22); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 5, 18, .18); } .order-comparison__old, .order-comparison__new { grid-template-columns: 58px 1fr; grid-template-rows: auto auto; min-height: 78px; padding: 12px 16px; font-size: 14px; } .order-comparison__old::before, .order-comparison__new::before { display: block; grid-column: 2; margin-bottom: 3px; font-size: 17px; font-weight: 800; letter-spacing: -.2px; } .order-comparison__old::before { color: #8297ba; content: "기존 발주"; } .order-comparison__new::before { color: #1761e8; content: "한바퀴 발주"; } .order-comparison__old > .order-comparison__icon, .order-comparison__new > .order-comparison__icon { grid-row: 1 / 3; } .order-comparison__old > span:not(.order-comparison__icon) { grid-row: 2; grid-column: 2; } .order-comparison__flow { min-height: 30px; } .order-comparison__flow i { width: 4px; height: 4px; } .order-comparison__flow svg { width: 27px; height: 27px; transform: rotate(90deg); } .order-comparison__new { grid-template-columns: 58px 1fr 30px; } .order-comparison__new::before { grid-column: 2 / 4; } .order-comparison__new strong { grid-row: 2; grid-column: 2; font-size: 15px; } .order-comparison__icon svg { width: 43px; height: 43px; } .order-comparison__check { grid-row: 1 / 3; grid-column: 3; align-self: center; width: 25px; height: 25px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .order-comparison * { scroll-behavior: auto !important; } } /* source: order-proof.css */ .order-proof { --proof-blue: #0a3eaa; --proof-dark: #061b55; --proof-light: #8eb8ff; --proof-mint: #64e5b4; position: relative; overflow: hidden; padding: 62px 0 70px; color: #fff; background: radial-gradient(circle at 50% 26%, rgba(34, 102, 230, .34), transparent 42%), linear-gradient(135deg, #08276e 0%, var(--proof-blue) 48%, var(--proof-dark) 100%); } .order-proof, .order-proof * { box-sizing: border-box; } .order-proof::before, .order-proof::after { position: absolute; border: 1px solid rgba(122, 170, 255, .12); border-radius: 50%; content: ""; } .order-proof::before { top: -250px; left: -140px; width: 650px; height: 650px; } .order-proof::after { right: -220px; bottom: -370px; width: 780px; height: 780px; } .order-proof__inner { position: relative; z-index: 1; width: min(1540px, calc(100% - 64px)); margin: 0 auto; } .order-proof__section-no { display: table; margin: 0 auto; padding-bottom: 9px; border-bottom: 2px solid var(--proof-mint); color: #fff; font-size: 20px; font-weight: 850; line-height: 1; } .order-proof h2 { margin: 28px 0 44px; color: #fff; font-size: clamp(48px, 4vw, 66px); font-weight: 800; line-height: 1.2; letter-spacing: -4px; text-align: center; word-break: keep-all; } .order-proof__rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .order-proof__rail::before { position: absolute; z-index: 0; right: 5%; bottom: 116px; left: 5%; height: 5px; border-radius: 10px; background: linear-gradient(90deg, #74a9ff, #99c2ff 55%, #68e2b2); box-shadow: 0 0 0 5px rgba(120, 169, 255, .15); content: ""; } .order-proof__metric { position: relative; z-index: 1; min-width: 0; text-align: center; } .order-proof__icon { display: flex; width: 56px; height: 56px; margin: 0 auto 18px; align-items: center; justify-content: center; border-radius: 16px; background: #eff6ff; font-size: 28px; line-height: 1; } .order-proof__visual { height: 210px; } .order-proof__visual svg { display: block; width: 100%; height: 100%; fill: none; stroke: #8eb5fc; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .order-proof__visual .route { stroke-dasharray: 4 7; } .order-proof__visual .hub, .order-proof__visual .clock { stroke: #fff; stroke-width: 3; } .order-proof__visual .main-store, .order-proof__visual .barcode, .order-proof__visual .basket { stroke: #b9d0ff; stroke-width: 3; } .order-proof__visual .scan-frame, .order-proof__visual .receipt, .order-proof__visual .store { stroke: #9cbcff; } .order-proof__visual .product { fill: rgba(80, 130, 226, .18); } .order-proof__visual .accent, .order-proof__visual .success { stroke: var(--proof-mint); stroke-width: 3.2; } .order-proof__visual .success { fill: rgba(100, 229, 180, .08); } .order-proof__visual .small-store circle { fill: rgba(77, 128, 226, .1); } .order-proof__checkpoint { position: relative; width: 44px; height: 44px; margin: -3px auto 23px; border: 5px solid #d7e5ff; border-radius: 50%; background: var(--proof-mint); box-shadow: 0 0 0 8px rgba(77, 133, 237, .46), 0 0 0 13px rgba(100, 229, 180, .1); } .order-proof__value { display: flex; min-height: 78px; align-items: baseline; justify-content: center; margin: 0; color: #fff; line-height: 1; white-space: nowrap; } .order-proof__value strong { font-size: clamp(52px, 4.9vw, 82px); font-weight: 850; letter-spacing: -4px; } .order-proof__value span { margin-left: 5px; font-size: clamp(28px, 2.4vw, 42px); font-weight: 800; letter-spacing: -2px; } .order-proof__label { margin: 12px 0 0; color: #e5edff; font-size: 18px; font-weight: 550; line-height: 1.4; letter-spacing: -.55px; word-break: keep-all; } @media (max-width: 1100px) { .order-proof__inner { width: min(960px, calc(100% - 48px)); } .order-proof__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px 20px; } .order-proof__rail::before { display: none; } .order-proof__metric { padding: 24px 12px 28px; border-bottom: 1px solid rgba(158, 190, 246, .32); } .order-proof__visual { height: 190px; } .order-proof__checkpoint { margin-top: -7px; } } @media (max-width: 640px) { .order-proof { padding: 70px 0 76px; } .order-proof__inner { width: calc(100% - 36px); } .order-proof__section-no { font-size: 16px; } .order-proof h2 { margin: 25px 0 38px; font-size: 35px; line-height: 1.22; letter-spacing: -2px; } .order-proof h2 span { display: block; } .order-proof__rail { grid-template-columns: 1fr; gap: 0; } .order-proof__metric { display: grid; min-height: 175px; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; align-items: center; padding: 20px 0; text-align: left; } .order-proof__visual { grid-row: 1 / 3; width: 120px; height: 120px; } .order-proof__checkpoint { position: absolute; top: 50%; left: 108px; width: 22px; height: 22px; margin: 0; border-width: 3px; box-shadow: 0 0 0 5px rgba(77, 133, 237, .4); transform: translateY(-50%); } .order-proof__value { min-height: 0; align-self: end; justify-content: flex-start; padding-left: 24px; } .order-proof__value strong { font-size: 45px; letter-spacing: -2.7px; } .order-proof__value span { font-size: 24px; letter-spacing: -1.2px; } .order-proof__label { align-self: start; margin-top: 10px; padding-left: 24px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .order-proof * { scroll-behavior: auto !important; } } /* source: order-faq.css */ .order-faq { --faq-blue: #1557d6; --faq-navy: #071738; --faq-line: #cfd6e2; position: relative; overflow: hidden; padding: 88px 0 96px; color: var(--faq-navy); background: radial-gradient(circle at 4% 96%, rgba(89, 159, 255, .18), transparent 24%), #fff; } .order-faq, .order-faq * { box-sizing: border-box; } .order-faq__inner { display: grid; width: min(1500px, calc(100% - 64px)); grid-template-columns: minmax(330px, .72fr) minmax(650px, 1.28fr); gap: clamp(70px, 8vw, 150px); margin: 0 auto; } .order-faq__heading { padding-top: 27px; } .order-faq__section-no { display: inline-block; padding-bottom: 9px; border-bottom: 2px solid var(--faq-blue); color: var(--faq-blue); font-size: 20px; font-weight: 850; line-height: 1; } .order-faq h2 { display: flex; flex-direction: column; gap: 8px; margin: 36px 0 42px; color: var(--faq-navy); font-size: clamp(50px, 4.25vw, 72px); font-weight: 850; line-height: 1.1; letter-spacing: -4.5px; word-break: keep-all; } .order-faq h2 strong { color: var(--faq-blue); font-size: 1.35em; font-weight: 900; letter-spacing: -3px; } .order-faq__heading-line { display: block; width: 50px; height: 2px; margin-bottom: 28px; background: var(--faq-blue); } .order-faq__heading p { margin: 0; color: #34425c; font-size: 18px; line-height: 1.75; letter-spacing: -.55px; word-break: keep-all; } .order-faq__list { border-top: 1px solid var(--faq-line); } .order-faq details { border-bottom: 1px solid var(--faq-line); } .order-faq summary { display: grid; min-height: 88px; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 0; padding: 11px 4px 11px 22px; color: var(--faq-navy); cursor: pointer; list-style: none; transition: color .2s ease; } .order-faq summary::-webkit-details-marker { display: none; } .order-faq summary::marker { display: none; content: ""; } .order-faq summary:hover, .order-faq summary:focus-visible, .order-faq details[open] summary { color: var(--faq-blue); } .order-faq summary:focus-visible { outline: 3px solid rgba(21, 87, 214, .2); outline-offset: -3px; } .order-faq__question-no { color: var(--faq-blue); font-size: 25px; font-weight: 900; letter-spacing: -1px; } .order-faq summary strong { color: inherit; font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -.8px; word-break: keep-all; } .order-faq__toggle { width: 44px; height: 44px; fill: #fff; stroke: var(--faq-blue); stroke-linecap: round; stroke-width: 1.7; transition: fill .2s ease, transform .2s ease; } .order-faq__toggle path { stroke-width: 2; } .order-faq details[open] .order-faq__toggle { fill: var(--faq-blue); stroke: #fff; } .order-faq details[open] .order-faq__toggle-vertical { opacity: 0; } .order-faq__answer { margin: 0 0 20px 0; padding: 24px 54px; border-radius: 16px; background: #eef4ff; } .order-faq__answer p { margin: 0; color: #263550; font-size: 16px; line-height: 1.8; letter-spacing: -.4px; word-break: keep-all; } .order-faq__answer p + p { margin-top: 10px; } .order-faq__answer p a { color: #1d4ed8; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { .order-faq__inner { grid-template-columns: 280px minmax(0, 1fr); gap: 55px; } .order-faq h2 { font-size: 46px; } .order-faq summary { grid-template-columns: 65px minmax(0, 1fr) 40px; padding-left: 15px; } .order-faq__question-no { font-size: 22px; } .order-faq summary strong { font-size: 18px; } .order-faq__toggle { width: 40px; height: 40px; } } @media (max-width: 760px) { .order-faq { padding: 70px 0 76px; } .order-faq__inner { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 42px; } .order-faq__heading { padding-top: 0; } .order-faq__section-no { font-size: 16px; } .order-faq h2 { display: block; margin: 25px 0 24px; font-size: 38px; line-height: 1.18; letter-spacing: -2.5px; } .order-faq h2 strong { display: inline; margin-left: 8px; font-size: 1em; letter-spacing: -1px; } .order-faq__heading-line { display: none; } .order-faq__heading p { font-size: 15px; line-height: 1.65; } .order-faq__heading p br { display: none; } .order-faq summary { min-height: 78px; grid-template-columns: 48px minmax(0, 1fr) 34px; gap: 2px; padding: 12px 0; } .order-faq__question-no { font-size: 18px; } .order-faq summary strong { padding-right: 8px; font-size: 15px; line-height: 1.45; } .order-faq__toggle { width: 34px; height: 34px; } .order-faq__answer { margin-bottom: 14px; padding: 20px; border-radius: 12px; } .order-faq__answer p { font-size: 14px; line-height: 1.72; } } @media (prefers-reduced-motion: reduce) { .order-faq__toggle, .order-faq summary { transition: none; } } /* source: order-cta.css */ .order-cta { --cta-blue: #124fdd; --cta-navy: #020d3b; --cta-mint: #9dfbe1; position: relative; overflow: hidden; min-height: 820px; color: #fff; background: radial-gradient(circle at 50% 50%, rgba(20, 84, 225, .68), transparent 46%), linear-gradient(125deg, #020a2d 0%, #06236f 46%, #01092e 100%); } .order-cta, .order-cta * { box-sizing: border-box; } .order-cta::before, .order-cta::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; } .order-cta::before { top: -390px; left: 50%; width: 1050px; height: 850px; border: 1px solid rgba(65, 132, 255, .12); transform: translateX(-50%); } .order-cta::after { right: -230px; bottom: -490px; width: 850px; height: 850px; background: radial-gradient(circle, rgba(0, 52, 171, .24), transparent 65%); } .order-cta__inner { position: relative; display: grid; width: min(1540px, calc(100% - 64px)); min-height: 820px; place-items: center; margin: 0 auto; padding: 84px 40px 78px; } .order-cta__section-no { position: absolute; top: 72px; left: 0; z-index: 3; padding-bottom: 9px; border-bottom: 3px solid var(--cta-mint); color: #fff; font-size: 20px; font-weight: 850; line-height: 1; } .order-cta__content { position: relative; z-index: 3; display: grid; width: min(1280px, 100%); grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); align-items: center; gap: clamp(50px, 6vw, 100px); } .order-cta__copy { text-align: left; } .order-cta h2 { display: flex; flex-direction: column; gap: 5px; margin: 0; color: #fff; font-size: clamp(54px, 4.7vw, 78px); font-weight: 850; line-height: 1.15; letter-spacing: -5px; text-shadow: 0 7px 30px rgba(0, 0, 30, .22); word-break: keep-all; } .order-cta h2 strong { color: var(--cta-mint); font-size: 1.13em; font-weight: 900; } .order-cta__copy > p { margin: 32px 0 42px; color: rgba(255, 255, 255, .88); font-size: 20px; line-height: 1.7; letter-spacing: -.65px; word-break: keep-all; } .order-cta__button { display: grid; width: 100%; min-height: 68px; grid-template-columns: 1fr 46px; align-items: center; padding: 0 28px 0 62px; border: 1px solid rgba(116, 178, 255, .72); border-radius: 15px; color: #fff; background: linear-gradient(135deg, #0e5bff, #1739e8); box-shadow: 0 18px 50px rgba(0, 20, 90, .38), inset 0 1px 0 rgba(255, 255, 255, .3); font-size: 20px; font-weight: 850; letter-spacing: -1px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .order-cta__button:disabled { cursor: wait; opacity: .7; transform: none; } .order-contact { width: 100%; padding: 32px; border: 1px solid rgba(149, 190, 255, .34); border-radius: 24px; background: rgba(2, 18, 67, .72); box-shadow: 0 24px 60px rgba(0, 7, 38, .34); } .order-contact__heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 23px; text-align: left; } .order-contact__heading strong { color: #fff; font-size: 25px; font-weight: 900; letter-spacing: -.5px; } .order-contact__heading span { color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; } .order-contact__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .order-contact__fields label { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: #dce9ff; font-size: 13px; font-weight: 750; text-align: left; } .order-contact__message { grid-column: 1 / -1; } .order-contact input, .order-contact textarea { width: 100%; border: 1px solid rgba(171, 201, 255, .28); border-radius: 11px; outline: 0; color: #fff; background: rgba(255, 255, 255, .08); font: inherit; font-size: 14px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .order-contact input { height: 48px; padding: 0 14px; } .order-contact textarea { min-height: 118px; padding: 13px 14px; line-height: 1.6; resize: vertical; } .order-contact input::placeholder, .order-contact textarea::placeholder { color: rgba(255, 255, 255, .45); } .order-contact input:focus, .order-contact textarea:focus { border-color: #82e9c8; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(130, 233, 200, .13); } .order-contact .order-cta__button { margin-top: 18px; } .order-contact__status { min-height: 22px; margin: 12px 0 0; color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 1.5; text-align: center; } .order-contact__status.is-success { color: var(--cta-mint); } .order-contact__status.is-error { color: #ffb4b4; } .order-cta__button svg { width: 38px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform .2s ease; } .order-cta__button:hover, .order-cta__button:focus-visible { color: #fff; background: linear-gradient(135deg, #2476ff, #1a47f1); box-shadow: 0 22px 58px rgba(0, 20, 90, .46), 0 0 32px rgba(79, 143, 255, .22); transform: translateY(-3px); } .order-cta__button:hover svg, .order-cta__button:focus-visible svg { transform: translateX(6px); } .order-cta__button:focus-visible { outline: 3px solid var(--cta-mint); outline-offset: 5px; } .order-cta__orbit { position: absolute; top: 50%; left: 50%; z-index: 1; width: min(1390px, 94vw); height: 420px; border: 2px solid rgba(36, 120, 255, .58); border-right-color: #2696ff; border-bottom-color: #2696ff; border-radius: 50%; box-shadow: inset -6px -3px 16px rgba(34, 137, 255, .13), 4px 4px 18px rgba(23, 120, 255, .2); transform: translate(-50%, -49%) rotate(-7deg); pointer-events: none; } .order-cta__orbit::before { position: absolute; top: 18px; right: 145px; width: 210px; border-top: 2px dotted rgba(66, 145, 255, .8); content: ""; } .order-cta__orbit-dot { position: absolute; width: 13px; height: 13px; border: 3px solid rgba(255, 255, 255, .45); border-radius: 50%; background: #e8fff8; box-shadow: 0 0 18px #36a8ff; } .order-cta__orbit-dot--one { top: -2px; right: 180px; } .order-cta__orbit-dot--two { bottom: 33px; left: 88px; } .order-cta__scan-corner { position: absolute; z-index: 2; width: 30px; height: 30px; border-color: #2583ff; opacity: .9; } .order-cta__scan-corner--left { top: 286px; left: 7%; border-top: 4px solid #2583ff; border-left: 4px solid #2583ff; border-radius: 7px 0 0; } .order-cta__scan-corner--right { right: 7%; bottom: 165px; border-right: 4px solid #2583ff; border-bottom: 4px solid #2583ff; border-radius: 0 0 7px; } .order-cta__barcode { position: absolute; z-index: 2; width: 110px; height: 42px; opacity: .75; background: repeating-linear-gradient( 90deg, #2992ff 0 3px, transparent 3px 7px, #2992ff 7px 9px, transparent 9px 13px ); } .order-cta__barcode--left { bottom: 157px; left: 8%; } .order-cta__barcode--right { top: 210px; right: 6%; } @media (max-width: 900px) { .order-cta, .order-cta__inner { min-height: 980px; } .order-cta__inner { width: calc(100% - 48px); padding-right: 20px; padding-left: 20px; } .order-cta h2 { font-size: clamp(44px, 7vw, 60px); letter-spacing: -3.5px; } .order-cta__content { grid-template-columns: 1fr; gap: 44px; } .order-cta__copy { text-align: center; } .order-cta__copy > p { max-width: 700px; margin-right: auto; margin-left: auto; font-size: 17px; } .order-contact { max-width: 620px; margin: 0 auto; } .order-cta__orbit { width: 115vw; height: 360px; } .order-cta__barcode, .order-cta__scan-corner { opacity: .4; } } @media (max-width: 600px) { .order-cta, .order-cta__inner { min-height: 1040px; } .order-cta__inner { width: calc(100% - 36px); padding: 100px 0 70px; } .order-cta__section-no { top: 54px; font-size: 16px; border-bottom-width: 2px; } .order-cta h2 { gap: 8px; font-size: 36px; line-height: 1.22; letter-spacing: -2.3px; } .order-cta h2 strong { font-size: 1.05em; } .order-cta__copy > p { margin: 25px 0 34px; padding: 0 8px; font-size: 15px; line-height: 1.65; } .order-cta__button { min-height: 62px; grid-template-columns: 1fr 34px; padding: 0 20px 0 42px; border-radius: 16px; font-size: 18px; } .order-cta__button svg { width: 31px; } .order-cta__orbit { width: 145vw; height: 300px; } .order-cta__orbit::before, .order-cta__barcode, .order-cta__scan-corner { display: none; } .order-contact { padding: 25px 19px; border-radius: 19px; } .order-contact__heading strong { font-size: 22px; } .order-contact__fields { grid-template-columns: 1fr; } .order-contact__message { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .order-cta__button, .order-cta__button svg { transition: none; } } /* source: order-main-refresh.css */ /* 2026-07-06 main landing skin refresh Keeps the existing section markup, but normalizes the visual language after the hero. */ .order-story, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq, .order-cta { color: #111827; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-story__inner, .order-industries__inner, .order-comparison__inner, .order-audiences__inner, .order-proof__inner, .order-features__inner, .order-onboarding__inner, .order-faq__inner, .order-cta__content { width: min(1280px, calc(100% - 72px)); } .order-story__problems, .order-story__solution, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq { padding: 104px 0; background: #fff; } .order-story__insight, .order-audiences, .order-onboarding, .order-faq { background: #f7f9fc; } .order-story__auto-layout, .order-story__solution-layout, .order-industries__inner, .order-audiences__system, .order-features__showcase, .order-onboarding__integration, .order-cta__content { gap: 64px; } .order-story__heading p, .order-industries__section-no, .order-comparison__section-no, .order-audiences__section-no, .order-proof__section-no, .order-features__section-no, .order-onboarding__section-no, .order-faq__section-no, .order-cta__section-no { position: static; display: inline-flex; margin: 0 0 18px; padding: 0; border: 0; color: #2563eb; background: transparent; box-shadow: none; font-size: 14px; font-weight: 850; line-height: 1; letter-spacing: -.25px; } .order-cta__section-no { display: none; } .order-story__heading p::before, .order-comparison::before, .order-cta::before, .order-cta::after, .order-cta__orbit, .order-cta__scan-corner, .order-cta__barcode { display: none; content: none; } .order-story__heading h2, .order-industries h2, .order-comparison h2, .order-audiences h2, .order-proof h2, .order-features h2, .order-onboarding h2, .order-faq h2, .order-cta h2 { margin: 0; color: #111827; font-size: clamp(40px, 4vw, 62px); font-weight: 850; line-height: 1.14; letter-spacing: -3.2px; text-shadow: none; word-break: keep-all; } .order-story__heading h2 strong, .order-industries h2 strong, .order-comparison h2 strong, .order-audiences h2 strong, .order-proof h2 strong, .order-features h2 strong, .order-onboarding h2 strong, .order-faq h2 strong, .order-cta h2 strong { color: #2563eb; font-weight: 900; } .order-story__heading > span, .order-industries__lead, .order-industries__body, .order-cta__copy > p, .order-faq__heading p { color: #4b5563; font-size: 18px; font-weight: 500; line-height: 1.72; letter-spacing: -.5px; } .order-story__auto-layout::before, .order-modes__device-glow, .order-industries__scan-visual, .order-audiences__bridge { opacity: .72; } .order-industries__list { display: grid; gap: 14px; margin: 0; padding: 0; } .order-industries__list::before, .order-features__list li::before, .order-features__list li::after, .order-onboarding__steps::before { display: none; content: none; } .order-story__auto-panel, .order-story__auto-card-list li, .order-story__process li, .order-industries__list li, .order-industries__list li:nth-child(n), .order-audiences__panel, .order-proof__metric, .order-features__list li, .order-features__list--right li, .order-features__phone-shell, .order-onboarding__steps li, .order-onboarding__steps li:nth-child(even), .order-onboarding__integration, .order-faq details, .order-contact { border: 1px solid #e5e7eb; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(17, 24, 39, .06); } .order-story__auto-panel, .order-story__auto-card-list li, .order-story__process li, .order-industries__list li, .order-proof__metric, .order-features__list li, .order-onboarding__steps li, .order-faq details { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .order-story__auto-card-list li:hover, .order-industries__list li:hover, .order-proof__metric:hover, .order-features__list li:hover, .order-onboarding__steps li:hover, .order-onboarding__steps li:nth-child(even):hover, .order-faq details:hover { border-color: #bfdbfe; box-shadow: 0 24px 52px rgba(17, 24, 39, .09); transform: translateY(-2px); } .order-story__auto-panel { background: #fff; } .order-story__auto-panel::after { display: none; } .order-story__auto-panel-head strong, .order-story__auto-result, .order-cta__button { background: #2563eb; box-shadow: 0 14px 30px rgba(37, 99, 235, .2); } .order-story__auto-result { border-radius: 18px; } .order-story__auto-sources span, .order-story__auto-card-list li, .order-story__process li { border-color: #e5e7eb; border-radius: 16px; box-shadow: none; } .order-story__insight { padding: 74px 0; } .order-story__insight-copy { max-width: 960px; } .order-story__insight-copy h3 { color: #111827; font-size: clamp(30px, 3vw, 44px); font-weight: 850; letter-spacing: -2px; } .order-story__quote { color: rgba(37, 99, 235, .14); } .order-comparison { color: #111827; background: #f7f9fc; } .order-comparison h2 { margin-bottom: 34px; } .order-comparison__table { border-color: #e5e7eb; border-radius: 20px; background: #fff; box-shadow: 0 22px 54px rgba(17, 24, 39, .08); } .order-comparison__head-old, .order-comparison__head-flow, .order-comparison__head-new { color: #111827; background: #f3f6fb; } .order-comparison__head-new { color: #fff; background: #2563eb; } .order-comparison__head > div { font-size: 20px; font-weight: 850; } .order-comparison__row { border-color: #eef2f7; } .order-comparison__old, .order-comparison__flow, .order-comparison__new { background: #fff; } .order-comparison__old { color: #6b7280; font-size: 17px; } .order-comparison__flow { color: #93a4bd; } .order-comparison__new strong { color: #111827; font-size: 17px; } .order-comparison__check { color: #2563eb; } .order-audiences__system { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); } .order-audiences__panel { overflow: hidden; padding: 30px; } .order-audiences__panel-head h3, .order-features__copy strong, .order-onboarding__steps strong, .order-faq summary strong { color: #111827; font-weight: 850; } .order-audiences__benefits li { border-color: #eef2f7; border-radius: 14px; background: #f8fafc; } .order-proof { background: #fff; } .order-proof__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .order-proof__metric { min-height: auto; padding: 26px 22px; text-align: left; } .order-proof__visual { min-height: 120px; } .order-proof__checkpoint { display: none; } .order-proof__value { color: #111827; } .order-proof__value strong { font-size: clamp(34px, 3vw, 46px); font-weight: 900; } .order-proof__label { color: #4b5563; } .order-features { background: #f7f9fc; } .order-features__showcase { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); gap: 24px; } .order-features__list li { grid-template-columns: 62px minmax(0, 1fr); min-height: auto; padding: 22px; } .order-features__list--right li { grid-template-columns: 62px minmax(0, 1fr); } .order-features__list--right .order-features__icon, .order-features__list--right .order-features__copy { grid-column: auto; grid-row: auto; align-items: flex-start; text-align: left; } .order-features__icon, .order-audiences__role-icon, .order-onboarding__icon { width: 62px; height: 62px; border: 0; border-radius: 16px; color: #2563eb; background: #eff6ff; } .order-features__icon svg, .order-audiences__role-icon svg, .order-onboarding__icon svg { width: 34px; height: 34px; } .order-onboarding__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .order-onboarding__steps li { transform: none; padding: 24px 18px; } .order-onboarding__number { color: #2563eb; } .order-onboarding__integration { padding: 30px; background: #fff; } .order-faq__heading { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 44px; } .order-faq__heading-line { display: none; } .order-faq__list { gap: 10px; } .order-faq details { overflow: hidden; border-radius: 16px; } .order-faq summary { min-height: 72px; } .order-faq__toggle circle { stroke: #dbeafe; } .order-faq__toggle path { stroke: #2563eb; } .order-cta { min-height: auto; color: #111827; background: #fff; } .order-cta__inner { width: min(1280px, calc(100% - 72px)); min-height: auto; padding: 104px 0; } .order-cta__content { width: 100%; padding: 50px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 84% 10%, rgba(20, 184, 166, .22), transparent 32%), linear-gradient(135deg, #111827 0%, #1d4ed8 100%); } .order-cta h2, .order-cta h2 strong, .order-cta__copy > p { color: #fff; } .order-contact { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12); box-shadow: none; backdrop-filter: blur(16px); } .order-contact input, .order-contact textarea { border-radius: 12px; } @media (max-width: 1200px) { .order-proof__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-audiences__system { grid-template-columns: 1fr; } .order-features__showcase { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .order-features__phone { width: min(410px, 100%); order: -1; } .order-onboarding__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-audiences__bridge { display: none; } } @media (max-width: 760px) { .order-story__inner, .order-industries__inner, .order-comparison__inner, .order-audiences__inner, .order-proof__inner, .order-features__inner, .order-onboarding__inner, .order-faq__inner, .order-cta__inner { width: calc(100% - 32px); } .order-story__problems, .order-story__solution, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq { padding: 72px 0; } .order-story__heading h2, .order-industries h2, .order-comparison h2, .order-audiences h2, .order-proof h2, .order-features h2, .order-onboarding h2, .order-faq h2, .order-cta h2 { font-size: 34px; letter-spacing: -2px; } .order-proof__rail { grid-template-columns: 1fr; } .order-story__auto-layout, .order-story__solution-layout, .order-industries__inner, .order-audiences__system, .order-features__showcase, .order-onboarding__integration { grid-template-columns: 1fr; } .order-story__auto-card-list, .order-story__process, .order-onboarding__steps { grid-template-columns: 1fr; } .order-industries__scan-visual { display: none; } .order-features__list { gap: 12px; } .order-features__list li, .order-features__list--right li { grid-template-columns: 56px minmax(0, 1fr); } .order-features__icon, .order-audiences__role-icon, .order-onboarding__icon { width: 56px; height: 56px; border-radius: 14px; } .order-features__icon svg, .order-audiences__role-icon svg, .order-onboarding__icon svg { width: 30px; height: 30px; } .order-comparison__head, .order-comparison__row { grid-template-columns: 1fr; } .order-comparison__flow { display: none; } .order-comparison__old, .order-comparison__new { grid-template-columns: 64px 1fr; padding: 16px; } .order-comparison__new { grid-template-columns: 64px 1fr 34px; } .order-faq__heading { grid-template-columns: 1fr; gap: 18px; } .order-cta__content { grid-template-columns: 1fr; padding: 26px; border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .order-story__auto-card-list li, .order-industries__list li, .order-proof__metric, .order-features__list li, .order-onboarding__steps li, .order-faq details { transition: none; } } /* source: order-below-fold.css */ /* 2026-07-13: redesign only below section 2. Keep hero + scan section as-is. Re-plan the lower landing flow with more air. */ /* Section 3. Setup support: one spacious routing canvas instead of repeated cards. */ .order-scan-section--support, .order-scan-section--support * { box-sizing: border-box; } .order-scan-section--support { --support-blue: #2563eb; --support-navy: #0f172a; --support-muted: #607086; --support-line: #dfe8f4; position: relative; padding: 132px 0 118px; overflow: hidden; color: var(--support-navy); background: #fff; } .order-scan-section--support::before { position: absolute; top: 60px; right: -180px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .075), rgba(37, 99, 235, 0) 68%); content: ""; pointer-events: none; } .order-support__inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 72px)); margin: 0 auto; } .order-support__heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); gap: 86px; align-items: end; } .order-support__eyebrow { display: block; margin-bottom: 22px; color: var(--support-blue); font-size: 13px; font-weight: 850; line-height: 1; letter-spacing: .02em; } .order-support__heading h2 { margin: 0; color: var(--support-navy); font-size: clamp(40px, 4.35vw, 62px); font-weight: 850; line-height: 1.14; letter-spacing: -3.6px; word-break: keep-all; } .order-support__heading h2 strong { color: var(--support-blue); font-weight: 900; } .order-support__intro { padding-bottom: 4px; } .order-support__intro p { margin: 0; color: var(--support-muted); font-size: 16px; font-weight: 500; line-height: 1.72; letter-spacing: -.45px; word-break: keep-all; } .order-support__intro .order-support__lead { margin-bottom: 16px; color: #1e293b; font-size: 19px; font-weight: 750; line-height: 1.58; } .order-support__route { display: grid; grid-template-columns: minmax(230px, .72fr) 72px minmax(320px, 1fr) 72px minmax(210px, .62fr); align-items: center; min-height: 348px; margin-top: 70px; padding: 48px; border: 1px solid var(--support-line); border-radius: 34px; background: radial-gradient(circle at 3% 0%, rgba(37, 99, 235, .075), transparent 30%), linear-gradient(145deg, #fbfdff 0%, #f4f8fd 100%); box-shadow: 0 28px 80px rgba(15, 23, 42, .075); } .order-support__route-start > span:not(.order-support__route-icon), .order-support__route-start > strong, .order-support__route-start > em { display: block; } .order-support__route-icon { display: grid; width: 56px; height: 56px; margin-bottom: 28px; place-items: center; border-radius: 18px; color: #fff; background: var(--support-blue); box-shadow: 0 16px 30px rgba(37, 99, 235, .2); } .order-support__route-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .order-support__route-start > span:not(.order-support__route-icon) { color: var(--support-blue); font-size: 13px; font-weight: 850; } .order-support__route-start > strong { margin-top: 10px; color: var(--support-navy); font-size: 25px; font-weight: 850; line-height: 1.32; letter-spacing: -1.3px; } .order-support__route-start > em { margin-top: 16px; color: #7a8798; font-size: 13px; font-style: normal; font-weight: 650; } .order-support__route-lines { display: grid; gap: 50px; } .order-support__route-lines span { position: relative; display: block; height: 1px; background: #a9c4ef; } .order-support__route-lines span::after { position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 1.5px solid #5b8fe4; border-right: 1.5px solid #5b8fe4; content: ""; transform: translateY(-50%) rotate(45deg); } .order-support__channels { display: grid; gap: 12px; } .order-support__channels article { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 12px 16px; border: 1px solid #e4ebf5; border-radius: 18px; background: rgba(255, 255, 255, .92); } .order-support__channels article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: var(--support-blue); background: #edf4ff; font-size: 13px; font-weight: 900; } .order-support__channels strong, .order-support__channels em { display: block; } .order-support__channels strong { color: #172033; font-size: 16px; font-weight: 800; letter-spacing: -.45px; } .order-support__channels em { margin-top: 3px; color: #758297; font-size: 12px; font-style: normal; font-weight: 550; } .order-support__channels b { padding: 6px 8px; border-radius: 8px; color: #53637a; background: #f2f5f9; font-size: 10px; font-weight: 850; letter-spacing: .035em; } .order-support__route-result { position: relative; grid-column: 5; text-align: center; } .order-support__route-result::before { position: absolute; top: 50%; right: calc(100% + 1px); width: 70px; height: 1px; background: #a9c4ef; content: ""; } .order-support__route-result::after { position: absolute; top: calc(50% - 3px); left: -8px; width: 7px; height: 7px; border-top: 1.5px solid #5b8fe4; border-right: 1.5px solid #5b8fe4; content: ""; transform: rotate(45deg); } .order-support__route-result > span { display: grid; width: 54px; height: 54px; margin: 0 auto 20px; place-items: center; border-radius: 50%; color: #fff; background: #14b8a6; box-shadow: 0 16px 32px rgba(20, 184, 166, .2); } .order-support__route-result svg { width: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .order-support__route-result em, .order-support__route-result strong, .order-support__route-result p { display: block; margin-right: 0; margin-left: 0; } .order-support__route-result em { color: #0f9f91; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .08em; } .order-support__route-result strong { margin-top: 7px; color: var(--support-navy); font-size: 22px; font-weight: 850; letter-spacing: -1px; } .order-support__route-result p { margin-top: 10px; margin-bottom: 0; color: #6d7a8e; font-size: 13px; line-height: 1.55; } .order-support__services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 54px 0 0; padding: 0; list-style: none; } .order-support__services li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 2px 26px; border-left: 1px solid var(--support-line); } .order-support__services li:first-child { padding-left: 0; border-left: 0; } .order-support__services li:last-child { padding-right: 0; } .order-support__services li > span { padding-top: 2px; color: var(--support-blue); font-size: 12px; font-weight: 900; } .order-support__services strong, .order-support__services em { display: block; } .order-support__services strong { color: #1a2435; font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -.55px; word-break: keep-all; } .order-support__services em { margin-top: 8px; color: #758297; font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.55; word-break: keep-all; } .order-modes, .order-story, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq, .order-cta { --below-blue: #2563eb; --below-navy: #0f172a; --below-text: #111827; --below-muted: #5f6b7d; --below-line: #e3eaf5; --below-soft: #f6f9fd; --below-mint: #14b8a6; --below-shadow: 0 24px 70px rgba(15, 23, 42, .075); color: var(--below-text); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-modes__inner, .order-story__inner, .order-industries__inner, .order-comparison__inner, .order-audiences__inner, .order-proof__inner, .order-features__inner, .order-onboarding__inner, .order-faq__inner, .order-cta__inner { width: min(1180px, calc(100% - 72px)) !important; margin-right: auto; margin-left: auto; } .order-modes, .order-story__problems, .order-story__insight, .order-story__solution, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq { position: relative; overflow: hidden; padding: 118px 0 !important; } .order-modes, .order-industries, .order-audiences, .order-features, .order-faq { background: #fff !important; } .order-story__problems, .order-comparison, .order-proof, .order-onboarding, .order-story__insight { background: linear-gradient(180deg, #f8fbff 0%, #f4f7fc 100%) !important; } .order-story__solution { background: #fff !important; } .order-modes__label, .order-story__heading p, .order-industries__section-no, .order-comparison__section-no, .order-audiences__section-no, .order-proof__section-no, .order-features__section-no, .order-onboarding__section-no, .order-faq__section-no { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 30px; margin: 0 0 20px !important; padding: 0 10px !important; border: 0 !important; border-radius: 10px; color: #fff !important; background: var(--below-blue) !important; box-shadow: none !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: -.2px !important; } .order-modes__heading h2, .order-story__heading h2, .order-industries h2, .order-comparison h2, .order-audiences h2, .order-proof h2, .order-features h2, .order-onboarding h2, .order-faq h2, .order-cta h2 { margin: 0 !important; color: var(--below-navy) !important; font-size: clamp(38px, 3.9vw, 58px) !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: -3px !important; word-break: keep-all; } .order-modes__heading h2 strong, .order-story__heading h2 strong, .order-industries h2 strong, .order-comparison h2 strong, .order-audiences h2 strong, .order-proof h2 strong, .order-features h2 strong, .order-onboarding h2 strong, .order-faq h2 strong, .order-cta h2 strong { color: var(--below-blue) !important; font-weight: 900 !important; } .order-modes__heading p, .order-story__heading > span, .order-industries__lead, .order-industries__body, .order-faq__heading p, .order-cta__copy > p { max-width: 620px; color: var(--below-muted) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.72 !important; letter-spacing: -.5px !important; word-break: keep-all; } /* Section 3. Operating methods: calm horizontal selector */ .order-modes__heading { display: grid !important; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 72px; align-items: center; } .order-modes__visual { min-height: 310px !important; border: 1px solid var(--below-line); border-radius: 34px; background: radial-gradient(circle at 18% 20%, rgba(37, 99, 235, .12), transparent 38%), linear-gradient(145deg, #fff, #f5f9ff); box-shadow: var(--below-shadow); } .order-modes__cards { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 48px !important; } .order-modes__card { display: grid !important; grid-template-columns: 120px 170px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 112px !important; padding: 24px 28px !important; border: 1px solid var(--below-line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 16px 44px rgba(15, 23, 42, .05) !important; } .order-modes__card-top { display: flex !important; gap: 9px; align-items: center; } .order-modes__step { display: grid !important; width: 36px !important; height: 36px !important; place-items: center; border-radius: 12px !important; color: #fff !important; background: var(--below-blue) !important; font-size: 12px !important; font-weight: 900 !important; } .order-modes__tag { color: #1d4ed8 !important; background: #eff6ff !important; } .order-modes__card h3 { margin: 0 !important; color: var(--below-navy) !important; font-size: 24px !important; font-weight: 850 !important; letter-spacing: -1.1px !important; } .order-modes__card p { margin: 0 !important; color: var(--below-muted) !important; font-size: 15px !important; line-height: 1.58 !important; } .order-modes__card ul { grid-column: 3; display: flex !important; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; padding: 0 !important; } .order-modes__card li { padding: 7px 10px !important; border-radius: 999px; color: #36506f !important; background: #f5f8fc; font-size: 13px !important; font-weight: 700 !important; } .order-modes__card li::before { display: none !important; } .order-modes__note { margin-top: 22px !important; padding: 18px 22px !important; border: 1px solid #cfe0ff !important; border-radius: 18px !important; color: #173b7d !important; background: #f0f6ff !important; box-shadow: none !important; } /* AI recommendation: one large product panel, cards below */ .order-story__auto-layout { display: grid !important; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 64px !important; align-items: center; } .order-story__auto-panel { min-height: 320px !important; padding: 34px !important; border: 1px solid var(--below-line) !important; border-radius: 30px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-story__auto-panel::after { display: none !important; } .order-story__auto-result { border-radius: 22px !important; background: var(--below-blue) !important; } .order-story__auto-card-list { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 18px !important; } .order-story__auto-card-list li, .order-story__process li { padding: 26px !important; border: 1px solid var(--below-line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 16px 42px rgba(15, 23, 42, .055) !important; } .order-story__insight { padding: 70px 0 !important; } .order-story__insight .order-story__inner { display: block !important; } .order-story__quote { display: none !important; } .order-story__insight-copy { max-width: 980px !important; margin: 0 auto !important; padding: 40px 46px !important; border: 1px solid #d7e5fb; border-radius: 30px; background: #fff; box-shadow: var(--below-shadow); } .order-story__insight-copy h3 { color: var(--below-navy) !important; font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.28 !important; letter-spacing: -2px !important; } .order-story__solution-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 62px !important; align-items: center; } .order-story__process { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } .order-story__process li { display: grid !important; grid-template-columns: 70px minmax(0, 1fr); column-gap: 20px; align-items: center; min-height: 0 !important; } .order-story__process-icon { grid-row: span 2; } .order-story__solution-copy h3 { color: var(--below-navy) !important; font-size: clamp(28px, 3vw, 42px) !important; letter-spacing: -2.1px !important; } /* Suitable stores: airy split layout */ .order-industries__inner { display: grid !important; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 70px !important; align-items: center; } .order-industries__scan-visual { margin-top: 38px !important; transform: scale(.9); transform-origin: left center; } .order-industries__list { display: grid !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } .order-industries__list::before { display: none !important; } .order-industries__list li { display: grid !important; grid-template-columns: 44px 58px minmax(0, 1fr); gap: 18px; align-items: center; min-height: 98px !important; margin: 0 !important; padding: 20px 24px !important; border: 1px solid var(--below-line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: 0 16px 42px rgba(15, 23, 42, .05) !important; } .order-industries__number { position: static !important; display: grid !important; width: 36px !important; height: 36px !important; place-items: center; border-radius: 12px !important; color: #fff !important; background: var(--below-blue) !important; font-size: 12px !important; font-weight: 900 !important; } .order-industries__icon { width: 54px !important; height: 54px !important; border-radius: 16px !important; background: #eff6ff !important; } .order-industries__icon svg { width: 32px !important; height: 32px !important; } /* Comparison: less decorative, easier to read */ .order-comparison__inner { display: grid !important; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 62px; align-items: start; } .order-comparison__table { margin-top: 0 !important; overflow: hidden; border: 1px solid var(--below-line) !important; border-radius: 28px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-comparison__head, .order-comparison__row { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) !important; } .order-comparison__old, .order-comparison__new { min-height: 78px !important; padding: 15px 20px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .order-comparison__icon { width: 42px !important; height: 42px !important; } .order-comparison__flow { opacity: .55; } /* Owner / HQ: two clean panels */ .order-audiences__system { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr) !important; gap: 26px !important; margin-top: 52px !important; } .order-audiences__panel { overflow: hidden; border: 1px solid var(--below-line) !important; border-radius: 30px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-audiences__panel-head { padding: 30px 34px !important; border-bottom: 1px solid var(--below-line); } .order-audiences__panel-body { padding: 30px 34px !important; } .order-audiences__benefits { display: grid !important; gap: 10px !important; } .order-audiences__benefits li { min-height: 48px !important; padding: 11px 14px !important; border-radius: 14px; background: #f8fbff; } .order-audiences__owner-visual, .order-audiences__report-visual { display: none !important; } .order-audiences__bridge { display: flex !important; min-height: 100%; align-items: center; justify-content: center; opacity: 1 !important; } .order-audiences__bridge-line, .order-audiences__bridge-arrows { display: none !important; } .order-audiences__database { width: 68px !important; height: 68px !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--below-shadow); } /* Proof: compact numbers, no heavy illustration */ .order-proof__rail { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 48px !important; } .order-proof__metric { min-height: 190px !important; padding: 30px 24px !important; border: 1px solid var(--below-line) !important; border-radius: 26px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-proof__visual, .order-proof__checkpoint { display: none !important; } .order-proof__value strong { color: var(--below-blue) !important; font-size: clamp(40px, 3.5vw, 56px) !important; letter-spacing: -2.4px !important; } .order-proof__label { color: var(--below-muted) !important; font-size: 15px !important; font-weight: 750 !important; } /* Feature section: keep phone preview but reduce noise */ .order-features__showcase { align-items: center !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) minmax(0, 1fr) !important; gap: 26px !important; margin-top: 52px !important; } .order-features__list { gap: 14px !important; } .order-features__list li { min-height: 96px !important; padding: 18px !important; border: 1px solid var(--below-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 16px 42px rgba(15, 23, 42, .05) !important; } .order-features__icon { width: 54px !important; height: 54px !important; border-radius: 16px !important; } .order-features__phone-shell { border: 1px solid var(--below-line) !important; box-shadow: 0 30px 80px rgba(15, 23, 42, .13) !important; } /* Onboarding, FAQ, CTA */ .order-onboarding__steps { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 50px !important; } .order-onboarding__steps li { min-height: 210px !important; padding: 26px 18px !important; border: 1px solid var(--below-line) !important; border-radius: 24px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-onboarding__integration { margin-top: 34px !important; padding: 32px !important; border: 1px solid var(--below-line) !important; border-radius: 28px !important; background: #fff !important; box-shadow: var(--below-shadow) !important; } .order-faq__inner { display: grid !important; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 60px; align-items: start; } .order-faq__heading { display: block !important; } .order-faq details { border: 1px solid var(--below-line) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 14px 36px rgba(15, 23, 42, .045) !important; } .order-faq summary { min-height: 70px !important; padding: 0 22px !important; } .order-cta { padding: 110px 0 !important; background: #fff !important; } .order-cta__inner { width: min(1180px, calc(100% - 72px)) !important; min-height: 0 !important; padding: 0 !important; } .order-cta__content { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(360px, .8fr); gap: 46px !important; width: 100% !important; padding: 58px !important; border-radius: 34px !important; background: radial-gradient(circle at 86% 10%, rgba(20, 184, 166, .24), transparent 32%), linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%) !important; box-shadow: 0 34px 90px rgba(15, 23, 42, .2) !important; } .order-contact { border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 24px !important; background: rgba(255, 255, 255, .12) !important; box-shadow: none !important; } @media (max-width: 1180px) { .order-support__route { grid-template-columns: minmax(190px, .7fr) 44px minmax(300px, 1fr) 44px minmax(180px, .62fr); padding: 38px; } .order-support__services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; } .order-support__services li:nth-child(3) { padding-left: 0; border-left: 0; } .order-story__auto-card-list, .order-audiences__system, .order-proof__rail, .order-onboarding__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .order-audiences__bridge { display: none !important; } .order-modes__card { grid-template-columns: 120px minmax(0, 1fr); } .order-modes__card p, .order-modes__card ul { grid-column: 1 / -1; } .order-features__showcase { grid-template-columns: 1fr !important; max-width: 760px; margin-right: auto; margin-left: auto; } .order-features__phone { order: -1; width: min(390px, 100%) !important; margin: 0 auto; } } @media (max-width: 860px) { .order-support__heading { grid-template-columns: 1fr; gap: 30px; } .order-support__intro { max-width: 620px; } .order-support__route { grid-template-columns: 1fr; gap: 28px; padding: 34px; } .order-support__route-start { text-align: center; } .order-support__route-icon { margin-right: auto; margin-left: auto; } .order-support__route-lines { display: none; } .order-support__route-result { grid-column: auto; padding-top: 28px; border-top: 1px solid var(--support-line); } .order-support__route-result::before, .order-support__route-result::after { display: none; } .order-modes__heading, .order-story__auto-layout, .order-story__solution-layout, .order-industries__inner, .order-comparison__inner, .order-faq__inner, .order-cta__content { grid-template-columns: 1fr !important; } .order-modes__visual, .order-industries__scan-visual { display: none !important; } .order-comparison__head, .order-comparison__row { grid-template-columns: 1fr !important; } .order-comparison__flow, .order-comparison__head-flow { display: none !important; } } @media (max-width: 640px) { .order-scan-section--support { padding: 88px 0 78px; } .order-support__inner { width: calc(100% - 32px); } .order-support__heading h2 { font-size: 36px; letter-spacing: -2.35px; } .order-support__intro .order-support__lead { font-size: 17px; } .order-support__route { min-height: 0; margin-top: 44px; padding: 26px 18px; border-radius: 26px; } .order-support__route-start > strong { font-size: 22px; } .order-support__channels article { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; } .order-support__channels b { display: none; } .order-support__services { grid-template-columns: 1fr; gap: 0; margin-top: 38px; border-top: 1px solid var(--support-line); } .order-support__services li, .order-support__services li:nth-child(3) { padding: 20px 0; border-bottom: 1px solid var(--support-line); border-left: 0; } .order-modes__inner, .order-story__inner, .order-industries__inner, .order-comparison__inner, .order-audiences__inner, .order-proof__inner, .order-features__inner, .order-onboarding__inner, .order-faq__inner, .order-cta__inner { width: calc(100% - 32px) !important; } .order-modes, .order-story__problems, .order-story__insight, .order-story__solution, .order-industries, .order-comparison, .order-audiences, .order-proof, .order-features, .order-onboarding, .order-faq, .order-cta { padding: 76px 0 !important; } .order-modes__heading h2, .order-story__heading h2, .order-industries h2, .order-comparison h2, .order-audiences h2, .order-proof h2, .order-features h2, .order-onboarding h2, .order-faq h2, .order-cta h2 { font-size: 34px !important; letter-spacing: -2px !important; } .order-story__auto-card-list, .order-audiences__system, .order-proof__rail, .order-onboarding__steps { grid-template-columns: 1fr !important; } .order-industries__list li { grid-template-columns: 38px minmax(0, 1fr); } .order-industries__icon { display: none !important; } .order-cta__content { padding: 30px !important; border-radius: 24px !important; } } /* ============================================================ 2026-07-23 QC fixes — appended last on purpose so these rules win the cascade over the older passes above without having to track down every conflicting declaration one by one. ============================================================ */ /* 1) Unify every main-section content width to 1280px. Before this, widths were scattered across files (1180/1380/1500/1540/1600px), which is why the hero looked wider than the sections below it. */ .order-hero__inner, .order-audience-router__inner, .order-scan-section__inner, .order-scan-v2, .order-modes__inner, .order-story__inner, .order-industries__inner, .order-comparison__inner, .order-audiences__inner, .order-proof__inner, .order-features__inner, .order-onboarding__inner, .order-faq__inner, .order-cta__inner { width: min(1280px, calc(100% - 64px)) !important; } /* 2) order-comparison__inner was force-set to a 2-column grid (label + table as if they were two side-by-side cards), but the section actually has three direct children (label, h2, table), so the table was wrapping into a squeezed 360px column. Restore normal stacked flow and let a proper heading wrapper (added in order-comparison.php) own the 2-column split instead. */ .order-comparison__inner { display: block !important; } .order-comparison__heading { max-width: 640px; margin: 0 auto 40px; text-align: center; } .order-comparison__heading p { max-width: 560px; margin: 16px auto 0; color: var(--below-muted, #5f6b7d); font-size: 16px; line-height: 1.7; word-break: keep-all; } /* 3) CTA text-visibility fix. The shared ".order-cta h2 { color: var(--below-navy) !important }" rule above was written for the light-background sections and was never updated when the CTA card was redesigned as a dark navy/blue gradient card — leaving near-invisible dark-on-dark text. Restore light text here. */ .order-cta h2, .order-cta h2 strong, .order-cta__copy > p, .order-contact__heading strong { color: #fff !important; } .order-contact__heading span { color: rgba(255, 255, 255, .72) !important; } /* source: order-header.css */ /* 한바퀴 랜딩 전용 상단 내비게이션 */ #header.or-site-header { top: 28px; width: min(1460px, calc(100% - 48px)); max-width: none; height: 84px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px rgba(3, 28, 91, .18), 0 2px 8px rgba(3, 28, 91, .08); } #header.or-site-header .header-inner { display: flex; align-items: center; padding: 0 22px 0 28px; } #header.or-site-header #logo { display: flex; flex: 0 0 auto; align-items: center; margin: 0; } #header.or-site-header #logo a { display: flex; width: auto; min-width: 172px; height: 84px; align-items: center; gap: 0; color: #10224a; font-size: 19px; font-weight: 850; letter-spacing: -1px; line-height: normal; white-space: nowrap; } .or-header-brand-mark { display: block; width: 170px; height: auto; flex: 0 0 auto; object-fit: contain; } #header.or-site-header #logo .or-header-brand-mark { width: 170px; min-width: 170px; max-width: 170px; max-height: 58px; height: auto; } #header.or-site-header #logo a span { display: none; } .or-side-brand-mark { display: block; width: 152px; height: auto; flex: 0 0 auto; object-fit: contain; } .or-side-brand .or-side-brand-mark { width: 152px; min-width: 152px; max-width: 152px; max-height: 58px; height: auto; } #header.or-site-header .gnb { position: static; display: flex; height: 100%; align-items: center; gap: 8px; margin-left: auto; } #header.or-site-header .gnb > li { float: none; width: auto; height: 84px; line-height: normal; } #header.or-site-header .gnb > li > a { position: relative; display: flex; min-width: 174px; height: 84px; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border-radius: 14px; color: #17213a; font-size: 16px; font-weight: 750; line-height: 1; letter-spacing: -.6px; transition: color .2s ease, background .2s ease; } .or-app-menu-bubble { position: absolute; top: 7px; right: 10px; display: inline-flex; min-width: 34px; height: 21px; align-items: center; justify-content: center; padding: 0 7px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ff5a3c; box-shadow: 0 6px 14px rgba(225, 57, 30, .28); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .5px; pointer-events: none; animation: or-app-menu-bob 1.45s ease-in-out infinite; } .or-app-menu-bubble::after { position: absolute; right: 7px; bottom: -5px; width: 0; height: 0; border-top: 5px solid #ff5a3c; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .or-app-menu-bubble.is-side, .or-app-menu-bubble.is-mobile { position: relative; top: auto; right: auto; flex: 0 0 auto; margin-left: 8px; vertical-align: middle; } .or-side-menu-name { display: flex; min-width: 0; align-items: center; } @keyframes or-app-menu-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } #header.or-site-header .gnb > li > a:hover, #header.or-site-header .gnb > li:focus-within > a { color: #1457d9; background: #f4f7fd; } #header.or-site-header .gnb-arrow { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .2s ease; } #header.or-site-header .gnb > li:hover .gnb-arrow, #header.or-site-header .gnb > li:focus-within .gnb-arrow { transform: rotate(180deg); } #header.or-site-header .gnb > li.is-cta { height: 58px; margin-left: 10px; } #header.or-site-header .gnb > li.is-cta > a { min-width: 146px; height: 58px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1764e8, #1045c5); box-shadow: 0 10px 23px rgba(18, 77, 201, .25); } #header.or-site-header .gnb > li.is-cta > a:hover, #header.or-site-header .gnb > li.is-cta:focus-within > a { color: #fff; background: linear-gradient(135deg, #2376f4, #1551d4); } .or-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-left: 12px; padding-left: 12px; border-left: 1px solid #e7ebf3; } .or-header-action { display: inline-flex; height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #dfe5ef; border-radius: 11px; color: #35435d; background: #fff; font-size: 12px; font-weight: 750; line-height: 1; letter-spacing: -.4px; text-decoration: none; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .or-header-action i { color: #1457d9; font-size: 14px; } .or-header-action--utility:hover, .or-header-action--utility:focus-visible { border-color: #b9cbec; color: #1457d9; background: #f3f7ff; } .or-header-action--service { min-width: 119px; border-color: #102958; color: #fff; background: #102958; box-shadow: 0 8px 18px rgba(8, 30, 74, .18); } .or-header-action--service i { color: #8ff0ce; } .or-header-action--service:hover, .or-header-action--service:focus-visible { border-color: #173b7d; color: #fff; background: #173b7d; transform: translateY(-2px); } .or-header-action--inquiry { display: none; color: #fff; border-color: #1764e8; background: #1764e8; } .or-header-action--inquiry i { color: #fff; } .or-header-action:focus-visible { outline: 3px solid rgba(20, 87, 217, .24); outline-offset: 2px; } #header.or-site-header .gnb .snb, .device-md #header.or-site-header .gnb .snb { display: block; top: 76px; right: auto; left: 50%; width: 250px; margin-top: -14px; padding: 24px 10px 10px; border: 1px solid #e7ebf3; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(14, 37, 83, .17); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; will-change: opacity, transform; } #header.or-site-header .gnb > li:hover .snb, #header.or-site-header .gnb > li:focus-within .snb { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { #header.or-site-header .gnb .snb { transition: opacity .16s ease, visibility .16s ease; } } #header.or-site-header .gnb .snb::before { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; border-top: 1px solid #e7ebf3; border-left: 1px solid #e7ebf3; background: #fff; content: ""; transform: translateX(-50%) rotate(45deg); } #header.or-site-header .gnb .snb li { position: relative; border: 0; font-size: 14px; line-height: normal; text-align: left; } #header.or-site-header .gnb .snb li a, #header.or-site-header .gnb .snb li > span { position: relative; z-index: 1; display: block; padding: 14px 16px; border-radius: 10px; color: #27344d; font-weight: 650; line-height: 1.4; word-break: keep-all; } #header.or-site-header .gnb .snb li a:hover, #header.or-site-header .gnb .snb li a:focus-visible { color: #1457d9; background: #eef4ff; } #header.or-site-header .gnb .snb li.is-disabled > span { color: #a3aab7; cursor: not-allowed; } .scrolled #header.or-site-header { top: 14px; border: 0; background: #fff; box-shadow: 0 16px 42px rgba(3, 28, 91, .2), 0 2px 8px rgba(3, 28, 91, .08); } .side_gnb .depth-2 > li.is-disabled > span { display: block; padding: 0 1.5em 0 2.2em; color: #898989; background: #e5e5e5; font-size: 16px; line-height: 3em; cursor: not-allowed; } #guide-franchise, #guide-headquarters, #order-industries, #order-faq, #order-cta { scroll-margin-top: 125px; } @media screen and (max-width: 1250px) and (min-width: 961px) { #header.or-site-header .gnb > li > a { min-width: 132px; padding: 0 13px; font-size: 14px; } #header.or-site-header .gnb > li.is-cta > a { min-width: 112px; } .or-header-actions { gap: 5px; margin-left: 8px; padding-left: 8px; } .or-header-action { width: 42px; padding: 0; } .or-header-action--utility span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); } .or-header-action--service { width: auto; min-width: 108px; padding: 0 11px; } } @media screen and (max-width: 960px) { body.right-side-on { overflow: hidden; } #or-side-backdrop { position: fixed; z-index: 1190; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(4, 16, 43, .58); opacity: 0; visibility: hidden; backdrop-filter: blur(5px); transition: opacity .3s ease, visibility .3s ease; cursor: pointer; } .right-side-on #or-side-backdrop { opacity: 1; visibility: visible; } #right-side { position: fixed; z-index: 1200; top: 0; right: auto; bottom: 0; left: 0; width: min(420px, calc(100vw - 24px)); max-width: none; height: 100%; padding: 0; overflow: hidden; color: #15213a; background: #f4f7fc; box-shadow: 24px 0 70px rgba(3, 20, 61, .3); transform: translateX(-105%); transition: transform .38s cubic-bezier(.22, .75, .25, 1); } .right-side-on #right-side { right: auto; transform: translateX(0); } .right-side-on #wrap, .right-side-on #wrapper { left: auto; } .right-side-on #header { left: 50%; } .or-side-head { position: relative; min-height: 210px; padding: 26px 28px 28px 76px; overflow: hidden; color: #fff; background: radial-gradient(circle at 92% 3%, rgba(81, 140, 255, .62), transparent 36%), linear-gradient(145deg, #092c79 0%, #0a3da5 60%, #145bd8 100%); } .or-side-head::after { position: absolute; right: -58px; bottom: -88px; width: 210px; height: 210px; border: 28px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ""; } .or-side-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0; padding: 8px 12px; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 26px rgba(4, 18, 50, .16); font-size: 18px; font-weight: 850; letter-spacing: -1px; } .or-side-brand-mark { display: block; width: 145px; height: auto; flex: 0 0 auto; object-fit: contain; } .or-side-close { position: absolute; z-index: 2; top: 22px; right: 20px; display: none; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 13px; background: rgba(255, 255, 255, .1); } .or-side-close span { position: absolute; top: 20px; left: 11px; width: 20px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); } .or-side-close span:last-child { transform: rotate(-45deg); } .or-side-intro { position: relative; z-index: 1; margin-top: 28px; } .or-side-intro strong { display: block; font-size: 25px; font-weight: 800; line-height: 1.28; letter-spacing: -1.4px; } .or-side-intro p { margin-top: 10px; color: rgba(255, 255, 255, .7); font-size: 13px; letter-spacing: -.4px; } .or-side-body { height: calc(100% - 210px); padding: 18px 18px 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } #right-side .quick_menu { width: 100%; margin: 0 0 20px; padding: 0; } #right-side .quick_menu ul { display: flex; gap: 8px; text-align: left; } #right-side .quick_menu li { display: block; flex: 1 1 0; width: auto; margin: 0; border: 0; } #right-side .quick_menu li a { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid #e2e8f2; border-radius: 12px; color: #263653; background: #fff; box-shadow: 0 6px 16px rgba(25, 48, 91, .06); font-size: 12px; font-weight: 700; } #right-side .quick_menu li a i { color: #1764e8; font-size: 13px; } #right-side .side_gnb { float: none; width: 100%; padding: 0; } #right-side .side_gnb .or-side-nav-label { margin: 0 0 9px; padding: 0 4px; color: #8792a7 !important; font-size: 15px !important; font-weight: 800; letter-spacing: 1.8px; text-align: left !important; } #right-side .side_gnb .menu-list { display: block; margin: 0; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(19, 43, 86, .08); } #right-side .side_gnb .menu-list > li { border-top: 1px solid #edf1f6; } #right-side .side_gnb .menu-list > li:first-child { border-top: 0; } #right-side .side_gnb .menu-list > li > a { display: grid; grid-template-columns: 34px 1fr 22px; min-height: 66px; align-items: center; padding: 0 18px; border: 0; color: #17243e; background: #fff; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.7px; text-decoration: none; transition: color .2s ease, background .2s ease; } #right-side .side_gnb .menu-list > li.on > a { color: #1457d9; background: #f3f7ff; } .or-side-menu-number { color: #a4adbd; font-size: 15px; font-weight: 800; letter-spacing: .5px; } #right-side .side_gnb .menu-list > li.on .or-side-menu-number { color: #70a0f3; } .or-side-menu-arrow, .or-side-menu-link { width: 16px; height: 16px; fill: none; stroke: #7d899e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .25s ease, stroke .25s ease; } #right-side .side_gnb .menu-list > li.on .or-side-menu-arrow { stroke: #1457d9; transform: rotate(180deg); } #right-side .side_gnb .depth-2 { display: none; padding: 3px 14px 13px 51px; background: #f3f7ff; } #right-side .side_gnb .depth-2 > li { position: relative; background: transparent; } #right-side .side_gnb .depth-2 > li::before { position: absolute; top: 20px; left: 1px; width: 4px; height: 4px; border-radius: 50%; background: #a8b7d2; content: ""; } #right-side .side_gnb .depth-2 > li > a, #right-side .side_gnb .depth-2 > li > span { display: block; padding: 11px 12px; border: 0; border-radius: 9px; color: #4a5b77; background: transparent; font-size: 13px; font-weight: 650; line-height: 1.55; word-break: keep-all; } #right-side .side_gnb .depth-2 > li > a:focus-visible, #right-side .side_gnb .depth-2 > li > a:hover { color: #1457d9; background: #e6efff; } #right-side .side_gnb .depth-2 > li.is-disabled::before { background: #d0d5df; } #right-side .side_gnb .depth-2 > li.is-disabled > span { padding: 11px 12px; color: #a8afbc; background: transparent; font-size: 13px; line-height: 1.55; } .or-side-contact { margin-top: 18px; padding: 22px; border-radius: 18px; color: #fff; background: #102958; box-shadow: 0 14px 28px rgba(8, 30, 74, .18); } .or-side-contact > div span { display: block; margin-bottom: 7px; color: #8ff0ce; font-size: 17px; font-weight: 800; letter-spacing: -.2px; } .or-side-contact > div strong { display: block; font-size: 17px; font-weight: 750; line-height: 1.45; letter-spacing: -.7px; } .or-side-contact > a { display: flex; height: 47px; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; border-radius: 12px; color: #fff; background: #1764e8; font-size: 12px; font-weight: 800; letter-spacing: .4px; } .or-side-contact > a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .or-side-contact > a.or-side-phone { height: auto; margin-top: 13px; color: rgba(255, 255, 255, .7); background: transparent; font-size: 12px; letter-spacing: 0; } #header.or-site-header { top: 12px; width: 100%; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; } #header.or-site-header .header-inner { display: block; padding: 0; } #header.or-site-header #logo { display: none; } #header.or-site-header .gnb { display: none !important; } .scrolled #header.or-site-header { top: 12px; border: 0; background: transparent; box-shadow: none; } #open-button { z-index: 1210; top: 12px; right: auto; left: 10px; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .78); border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(3, 28, 91, .18); appearance: none; pointer-events: auto; } #open-button > div { width: 24px; height: 20px; margin: 0 auto; } #open-button .nl1, #open-button .nl2, #open-button .nl3 { right: 0; width: 24px; height: 2px; border-radius: 3px; } #open-button .nl1 { top: 1px; } #open-button .nl2 { top: 9px; } #open-button .nl3 { top: 17px; } #open-button .navicon-line, .scrolled #open-button .navicon-line { background: #14264b; } #open-button.on { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); box-shadow: none; } #open-button.on > div > div, #open-button.on.scrolled > div > div { top: 9px; right: 0; width: 24px; background: #fff; } #open-button.on > div > .nl1 { transform: rotate(45deg); } #open-button.on > div > .nl2 { opacity: 0; transform: none; } #open-button.on > div > .nl3 { transform: rotate(-45deg); } .or-header-actions { position: absolute; top: 0; right: 10px; display: flex; height: 46px; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; pointer-events: auto; } .or-header-action { width: auto; height: 46px; gap: 3px; padding: 0 14px; border-color: rgba(255, 255, 255, .8); border-radius: 13px; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(3, 28, 91, .16); font-size: 15px; letter-spacing: -.7px; } .or-header-action i { font-size: 17px; } .or-header-action--admin { display: inline-flex; } .or-header-action--service { min-width: 78px; border-color: #102958; background: #102958; } .or-header-action--inquiry { display: inline-flex; min-width: 61px; border-color: #1764e8; background: #1764e8; } } @media screen and (max-width: 480px) { #header.or-site-header { width: 100%; } #open-button { left: 7px; width: 44px; height: 44px; } .or-header-actions { right: 7px; gap: 3px; } .or-header-action { height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; } .or-header-action--admin, .or-header-action--auth { min-width: 44px; } .or-header-action--service { min-width: 69px; } .or-header-action i { display: none; } .or-header-action--inquiry { min-width: 54px; } .or-side-head { min-height: 198px; padding: 24px 22px 24px 68px; } .or-side-intro { margin-top: 25px; } .or-side-intro strong { font-size: 23px; } .or-side-body { height: calc(100% - 198px); padding: 16px 14px 24px; } } @media screen and (min-width: 961px) { #or-side-backdrop, #right-side { display: none !important; } } @media screen and (max-width: 350px) { #open-button { left: 5px; width: 42px; height: 42px; } .or-header-actions { right: 5px; gap: 2px; } .or-header-action { min-width: 0; height: 42px; padding: 0 5px; font-size: 9px; } .or-header-action--admin, .or-header-action--auth { min-width: 40px; } .or-header-action--service { min-width: 63px; } .or-header-action--inquiry { min-width: 49px; } } /* 그누보드 모바일 헤더 */ #hd.or-mobile-header--home { position: absolute; top: 12px; right: 12px; left: 12px; z-index: 1000; width: auto; height: 64px; border: 0; border-radius: 17px; background: #fff; box-shadow: 0 12px 32px rgba(3, 28, 91, .2); } #hd.or-mobile-header--home #hd_wrapper { position: relative; height: 64px; } #hd.or-mobile-header--home #logo { position: absolute; top: 0; right: 156px; left: 49px; height: 64px; padding: 10px 0; text-align: left; } #hd.or-mobile-header--home #logo a { display: inline-flex; max-width: 100%; height: 44px; align-items: center; gap: 0; color: #10224a; font-size: 14px; font-weight: 850; letter-spacing: -.8px; white-space: nowrap; } #hd.or-mobile-header--home .or-header-brand-mark { width: 116px; min-width: 0; max-width: 100%; max-height: 42px; height: auto; object-fit: contain; } #hd.or-mobile-header--home #logo a span { display: none; } #hd.or-mobile-header--home #gnb_open { top: 12px; right: auto; left: 7px; width: 38px; height: 40px; padding: 0; border-radius: 10px; color: #14264b; font-size: 21px; } #hd.or-mobile-header--home #user_btn { display: none; } #hd.or-mobile-header--home .or-mobile-auth { position: absolute; top: 14px; right: 93px; display: inline-flex; height: 36px; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid #dce4f1; border-radius: 10px; color: #33415b; background: #f7f9fd; font-size: 17px; font-weight: 750; line-height: 36px; letter-spacing: -.45px; white-space: nowrap; } #hd.or-mobile-header--home .or-mobile-auth i { color: #1457d9; font-size: 12px; } #hd.or-mobile-header--home .or-mobile-entry { top: 14px; right: 7px; height: 36px; padding: 0 10px; border-radius: 10px; box-shadow: 0 7px 16px rgba(20, 87, 217, .22); font-size: 17px; line-height: 36px; white-space: nowrap; } #gnb .gnb_2dli.is-disabled .gnb_2da { display: block; padding-left: 30px; color: #a4a9b2; cursor: not-allowed; } .or-mobile-account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 70px 14px 12px; background: #fff; } .or-mobile-account-actions a { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dfe6f1; border-radius: 11px; color: #34425c; background: #f8faff; font-size: 13px; font-weight: 750; } .or-mobile-account-actions a i { color: #1457d9; font-size: 15px; } .or-mobile-account-actions a.is-service { grid-column: 1 / -1; color: #fff; border-color: #102958; background: #102958; } .or-mobile-account-actions a.is-service i { color: #8ff0ce; } .or-mobile-account-actions a:nth-child(2):last-child { grid-column: 1 / -1; } @media screen and (max-width: 640px) { .order-hero .order-hero__inner { padding-top: 132px; } #gnb { max-width: 360px; background: #f4f7fc; box-shadow: 16px 0 45px rgba(6, 24, 67, .25); } #gnb_1dul { padding: 4px 14px 18px; background: #fff; } .gnb_1dli { margin-bottom: 7px; border: 1px solid #e6ebf4; border-radius: 12px; overflow: hidden; } .gnb_1da { display: flex; align-items: center; padding: 8px 18px; border-bottom: 0; color: #17213a; font-size: 15px; } .or-app-menu-bubble.is-mobile { margin-left: 10px; } .gnb_2dul { border-top: 1px solid #edf0f5; background: #f7f9fd; } .gnb_2da, #gnb .gnb_2dli.is-disabled .gnb_2da { padding: 9px 20px 9px 28px; color: #44516a; font-size: 14px; } #gnb_close { top: 14px; right: 14px; color: #17213a; } } @media (prefers-reduced-motion: reduce) { .or-app-menu-bubble { animation: none; } } @media screen and (max-width: 370px) { #hd.or-mobile-header--home { right: 8px; left: 8px; } #hd.or-mobile-header--home #logo { right: 146px; left: 45px; } #hd.or-mobile-header--home #logo a { gap: 4px; font-size: 12px; letter-spacing: -1px; } #hd.or-mobile-header--home .or-header-brand-mark { width: 102px; min-width: 0; max-width: 100%; height: auto; } #hd.or-mobile-header--home #gnb_open { left: 4px; width: 37px; } #hd.or-mobile-header--home .or-mobile-auth { right: 87px; gap: 0; padding: 0 7px; font-size: 15px; } #hd.or-mobile-header--home .or-mobile-auth i { display: none; } #hd.or-mobile-header--home .or-mobile-entry { right: 4px; padding: 0 8px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { #header.or-site-header, #header.or-site-header *, #hd.or-mobile-header--home * { transition: none !important; } } /* 2026-07-06: cleaner Sabangnet-like top bar */ @media screen and (min-width: 961px) { #header.or-site-header { position: fixed; top: 0; left: 0; right: auto; width: 100%; max-width: none; height: 74px; border-radius: 0; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 rgba(17, 24, 39, .08); backdrop-filter: blur(16px); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; transform: none; z-index: 1200; } #header.or-site-header .header-inner { width: min(1280px, calc(100% - 56px)); height: 74px; margin: 0 auto; padding: 0; } #header.or-site-header #logo a { min-width: 0; height: 74px; } #header.or-site-header #logo .or-header-brand-mark { width: 128px; min-width: 128px; max-width: 128px; max-height: 42px; } #header.or-site-header .gnb { gap: 4px; margin-right: auto; margin-left: 34px; } #header.or-site-header .gnb > li { height: 74px; } #header.or-site-header .gnb > li.is-cta { display: none; } #header.or-site-header .gnb > li > a { min-width: 0; height: 74px; padding: 0 16px; border-radius: 0; color: #111827; font-size: 15px; font-weight: 700; letter-spacing: -.45px; } #header.or-site-header .gnb > li > a:hover, #header.or-site-header .gnb > li:focus-within > a { color: #2563eb; background: transparent; } .or-header-actions { gap: 8px; margin-left: 22px; padding-left: 0; border-left: 0; } .or-header-action { height: 40px; padding: 0 15px; border-radius: 8px; font-size: 13px; font-weight: 750; box-shadow: none; } .or-header-action i { display: none; } .or-header-action--inquiry { display: inline-flex; color: #2563eb; border-color: #bfdbfe; background: #eff6ff; } .or-header-action--service { min-width: 118px; border-color: #2563eb; background: #2563eb; box-shadow: 0 10px 20px rgba(37, 99, 235, .2); } .scrolled #header.or-site-header { top: 0; box-shadow: 0 1px 0 rgba(17, 24, 39, .1), 0 10px 30px rgba(17, 24, 39, .08); } } /* 2026-07-06: final responsive guard after legacy mobile header rules */ @media screen and (max-width: 640px) { .order-hero .order-hero__inner { padding-top: 120px; } #hd.or-mobile-header--home { top: 10px; right: 10px; left: 10px; height: 58px; border-radius: 15px; } #hd.or-mobile-header--home #hd_wrapper { height: 58px; } #hd.or-mobile-header--home #logo { right: 148px; left: 49px; height: 58px; padding: 9px 0; } #hd.or-mobile-header--home .or-header-brand-mark { width: 104px; max-height: 38px; } #hd.or-mobile-header--home .or-mobile-auth, #hd.or-mobile-header--home .or-mobile-entry { top: 12px; height: 34px; border-radius: 9px; font-size: 14px; line-height: 34px; } #hd.or-mobile-header--home .or-mobile-auth { right: 88px; } } @media screen and (max-width: 370px) { .order-hero .order-hero__inner { padding-top: 112px; } #hd.or-mobile-header--home #logo { display: none; } } /* source: order-footer.css */ .sumerz-footer { position: relative; padding: 48px 0 42px; color: #aeb9cd; background: #07122d; } .sumerz-footer, .sumerz-footer * { box-sizing: border-box; } .sumerz-footer__inner { width: min(1420px, calc(100% - 64px)); margin: 0 auto; } .sumerz-footer__brand { display: block; margin-bottom: 20px; color: #fff; font-size: 21px; font-weight: 900; letter-spacing: 1.5px; } .sumerz-footer address { display: flex; flex-direction: column; gap: 8px; margin: 0; font-style: normal; } .sumerz-footer address p { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; line-height: 1.7; } .sumerz-footer address span { position: relative; color: #aeb9cd; font-size: 13px; } .sumerz-footer address span + span::before { position: absolute; top: 50%; left: -11px; width: 1px; height: 11px; background: rgba(174, 185, 205, .32); content: ""; transform: translateY(-50%); } .sumerz-footer a { color: #dbe6fa; text-decoration: none; } .sumerz-footer a:hover, .sumerz-footer a:focus-visible { color: #8ff0ce; } .sumerz-footer__copyright { margin: 23px 0 0; color: #69758c; font-size: 12px; letter-spacing: .2px; } .sumerz-footer #top_btn { border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); } .sumerz-footer #top_btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } @media (max-width: 640px) { .sumerz-footer { padding: 38px 0 34px; } .sumerz-footer__inner { width: calc(100% - 36px); } .sumerz-footer address { gap: 12px; } .sumerz-footer address p { display: block; } .sumerz-footer address span { display: block; margin-top: 4px; font-size: 12px; } .sumerz-footer address span + span::before { display: none; } } /* source: order-hero-duo.css */ .order-hero.order-hero--duo, .order-hero.order-hero--duo * { box-sizing: border-box; } .order-hero.order-hero--duo { height: auto !important; min-height: 0 !important; padding: 112px 18px 28px; overflow: hidden; color: #111827; background: #f4f7fb !important; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; } .order-hero.order-hero--duo::before, .order-hero.order-hero--duo::after { display: none !important; content: none !important; } .or-hero-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .or-hero-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(1780px, 100%); margin: 0 auto; } .or-hero-service { position: relative; min-width: 0; min-height: clamp(820px, 52vw, 940px); overflow: hidden; border: 1px solid rgba(206, 219, 239, .84); border-radius: 38px; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 24px 70px rgba(39, 57, 87, .1); isolation: isolate; } .or-hero-service::before { position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none; } .or-hero-service--scan { background-image: url("../img/hero-scan-bg-20260805.jpg"); } .or-hero-service--scan .or-hero-service__content { padding-top: 78px; } .or-hero-service--scan::before { background: linear-gradient(105deg, rgba(247, 250, 255, .25) 0%, rgba(247, 250, 255, .08) 54%, transparent 74%), linear-gradient(180deg, transparent 62%, rgba(235, 243, 255, .6) 100%); } .or-hero-service--shop { border-color: rgba(236, 208, 182, .72); background-color: #fff8ef; background-image: url("../img/hero-shop-bg-20260805.jpg"); background-position: center bottom; background-size: auto 118%; box-shadow: 0 24px 70px rgba(105, 62, 28, .1); } .or-hero-service--shop::before { background: linear-gradient(108deg, rgba(255, 251, 246, .12), rgba(255, 249, 240, .02) 66%), linear-gradient(180deg, transparent 63%, rgba(255, 247, 238, .54) 100%); } .or-hero-service__content { position: relative; z-index: 5; width: 63%; padding: 44px 0 0 44px; } .or-hero-service__eyebrow { margin: 0 0 13px; color: #2f6de0; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; } .or-hero-service--shop .or-hero-service__eyebrow { color: #f56613; } .or-hero-service__content h2 { margin: 0; color: #07142f; font-size: clamp(43px, 3.25vw, 66px); font-weight: 950; line-height: 1.16; letter-spacing: -4px; word-break: keep-all; } .or-hero-service__content h2 em { color: #1768f2; font-style: normal; font-weight: inherit; } .or-hero-service--shop .or-hero-service__content { width: 64%; padding-top: 48px; } .or-hero-service--shop .or-hero-service__content h2 { color: #180c06; font-size: clamp(39px, 3vw, 60px); line-height: 1.17; letter-spacing: -3.5px; } .or-hero-service--shop .or-hero-service__content h2 em { color: #ff650f; } .or-hero-service__rule { display: block; width: 65px; height: 5px; margin-top: 34px; border-radius: 999px; background: #1768f2; } .or-hero-service--shop .or-hero-service__rule { background: #ff650f; } .or-hero-service__points { display: grid; gap: 16px; margin: 29px 0 0; padding: 0; list-style: none; } .or-hero-service__points li { position: relative; padding-left: 37px; color: #17223a; font-size: clamp(15px, 1.1vw, 19px); font-weight: 760; line-height: 1.62; letter-spacing: -.6px; word-break: keep-all; } .or-hero-service__points li::before { position: absolute; top: 2px; left: 0; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: #1768f2; box-shadow: 0 7px 15px rgba(23, 104, 242, .23); content: "\2713"; font-size: 14px; font-weight: 900; } .or-hero-service__button { display: inline-flex; min-width: 220px; height: 61px; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; padding: 0 26px; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 900; letter-spacing: -.5px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .or-hero-service__button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; } .or-hero-service__button.is-blue { background: linear-gradient(135deg, #1975ff, #0f5ae4); box-shadow: 0 17px 33px rgba(19, 92, 229, .25); } .or-hero-service__button.is-orange { background: linear-gradient(135deg, #ff8421, #ff650f); box-shadow: 0 17px 33px rgba(230, 91, 12, .24); } .or-hero-service__button:hover, .or-hero-service__button:focus-visible { color: #fff; text-decoration: none; transform: translateY(-3px); filter: saturate(1.08); } .or-hero-service__button:focus-visible { outline: 3px solid rgba(23, 104, 242, .28); outline-offset: 4px; } /* Barcode ordering story */ .or-scan-story { position: absolute; right: 28px; bottom: 28px; left: 28px; z-index: 4; min-height: 290px; } .or-scan-story::before { position: absolute; top: 105px; right: 16%; bottom: 94px; left: 24%; border-right: 2px dashed rgba(34, 103, 239, .76); border-bottom: 2px dashed rgba(34, 103, 239, .76); border-left: 2px dashed rgba(34, 103, 239, .76); border-radius: 0 0 18px 18px; content: ""; } .or-scan-metric { position: absolute; overflow: hidden; border: 1px solid rgba(255, 255, 255, .96); border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 17px 42px rgba(45, 67, 101, .14); backdrop-filter: blur(12px); } .or-scan-metric--pos { top: 0; left: 4%; width: 47%; min-height: 139px; padding: 17px 19px; } .or-scan-metric--shortage { top: 0; right: 4%; width: 40%; min-height: 122px; padding: 17px; } .or-scan-metric__head { display: flex; align-items: center; justify-content: space-between; color: #121d33; font-size: 14px; font-weight: 900; letter-spacing: -.4px; } .or-scan-metric__head b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #eb302b; box-shadow: 0 7px 14px rgba(235, 48, 43, .23); font-size: 12px; } .or-scan-metric__body { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 13px; align-items: end; margin-top: 7px; } .or-scan-metric__body > img { display: block; width: 70px; height: 74px; object-fit: contain; } .or-mini-sales-chart svg { display: block; width: 100%; height: 42px; overflow: visible; } .or-mini-sales-chart .area { fill: url(#orHeroScanArea); } .or-mini-sales-chart .line { fill: none; stroke: #2f7bff; stroke-width: 2.4; } .or-mini-sales-chart circle { fill: #fff; stroke: #2f7bff; stroke-width: 2; } .or-mini-sales-chart small, .or-mini-sales-chart strong { display: block; } .or-mini-sales-chart small { margin-top: 3px; color: #65738a; font-size: 9px; font-weight: 750; } .or-mini-sales-chart strong { margin-top: 2px; color: #111a2e; font-size: 13px; font-weight: 900; } .or-mini-sales-chart strong em { color: #246af0; font-size: 9px; font-style: normal; } .or-product-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 18px; } .or-product-row i { position: relative; display: block; height: 50px; border: 1px solid #e9edf4; border-radius: 10px; background: #f8fafc; } .or-product-row i::before { position: absolute; right: 30%; bottom: 6px; left: 30%; height: 31px; border-radius: 4px 4px 7px 7px; background: linear-gradient(180deg, #1b1c21 0 20%, #d89817 21% 64%, #fff 65% 72%, #d89817 73%); box-shadow: 0 4px 7px rgba(20, 28, 42, .14); content: ""; } .or-product-row i::after { position: absolute; top: 8px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 2px 2px 0 0; background: #25272c; content: ""; } .or-product-row i.is-orange::before { background: linear-gradient(180deg, #e47a00 0 20%, #f6a019 21% 64%, #fff 65% 72%, #f6a019 73%); } .or-product-row i.is-brown::before { background: linear-gradient(180deg, #54230d 0 20%, #96502c 21% 64%, #fff 65% 72%, #96502c 73%); } .or-product-row i.is-cream::before { background: linear-gradient(180deg, #d1c5ae 0 20%, #eee4d1 21% 64%, #fff 65% 72%, #eee4d1 73%); } .or-product-row i.is-navy::before { background: linear-gradient(180deg, #121821 0 20%, #293b50 21% 64%, #fff 65% 72%, #293b50 73%); } .or-scan-route { position: absolute; right: 0; bottom: 0; left: 0; } .or-scan-route > span { display: inline-flex; min-height: 30px; align-items: center; padding: 0 13px; border-radius: 12px 12px 0 0; color: #1c2a43; background: rgba(255, 255, 255, .95); font-size: 11px; font-weight: 900; } .or-scan-route__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .or-scan-route__list > div { display: flex; min-width: 0; min-height: 72px; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 0 16px 16px 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 14px 30px rgba(45, 67, 101, .1); backdrop-filter: blur(12px); } .or-scan-route__list > div:not(:first-child) { border-radius: 16px; } .or-scan-route__list img { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; object-fit: contain; } .or-scan-route__list strong { min-width: 0; color: #172238; font-size: 12px; font-weight: 900; letter-spacing: -.35px; white-space: nowrap; } /* ROS reservation commerce story */ .or-hero-service__lead { margin: 24px 0 0; color: #3f332c; font-size: clamp(15px, 1.15vw, 19px); font-weight: 720; line-height: 1.65; letter-spacing: -.55px; word-break: keep-all; } .or-hero-service__lead strong, .or-hero-service__lead span { display: block; } .or-hero-service__lead strong { margin-bottom: 3px; color: #21140c; font-size: 1.16em; font-weight: 900; } .or-hero-service__lead b { color: #ff650f; font-weight: 950; } .or-hero-service--shop .or-hero-service__points { gap: 12px; margin-top: 19px; } .or-hero-service--shop .or-hero-service__points li { color: #3f332c; } .or-hero-service--shop .or-hero-service__points li::before { background: #ff650f; box-shadow: 0 7px 15px rgba(255, 101, 15, .22); } .or-shop-profit-card, .or-shop-managed-card { position: absolute; z-index: 4; border: 1px solid rgba(255, 255, 255, .96); border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 42px rgba(98, 61, 32, .13); backdrop-filter: blur(12px); } .or-shop-profit-card { top: 42px; right: 27px; width: 30%; min-width: 190px; padding: 18px 18px 12px; } .or-shop-profit-card > span, .or-shop-profit-card > strong { display: block; } .or-shop-profit-card > span { color: #303438; font-size: 11px; font-weight: 820; } .or-shop-profit-card > strong { margin-top: 8px; color: #209a44; font-size: 22px; font-weight: 950; letter-spacing: -1px; } .or-shop-profit-card > strong small { margin-left: 2px; font-size: 11px; } .or-shop-profit-card > em { position: absolute; top: 48px; right: 16px; color: #209a44; font-size: 10px; font-style: normal; font-weight: 900; } .or-shop-profit-card svg { display: block; width: 100%; height: 57px; margin-top: 8px; overflow: visible; } .or-shop-profit-card .area { fill: url(#orHeroShopArea); } .or-shop-profit-card .line { fill: none; stroke: #229c46; stroke-width: 2.2; } .or-shop-profit-card circle { fill: #229c46; } .or-shop-managed-card { top: 235px; right: 28px; width: 26%; min-width: 174px; padding: 17px; } .or-shop-managed-card i { display: grid; float: left; width: 31px; height: 31px; margin-right: 9px; place-items: center; border-radius: 50%; color: #fff; background: #31a24a; box-shadow: 0 7px 14px rgba(49, 162, 74, .2); font-size: 15px; font-style: normal; font-weight: 900; } .or-shop-managed-card strong { display: block; padding-top: 6px; color: #242a30; font-size: 12px; font-weight: 900; } .or-shop-managed-card p { clear: both; margin: 14px 0 0; color: #4f565e; font-size: 10px; font-weight: 730; line-height: 1.5; } .or-shop-dashboard { position: absolute; right: 25px; bottom: 26px; left: 25px; z-index: 5; display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 258px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .96); border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: 0 22px 52px rgba(101, 61, 27, .16); backdrop-filter: blur(15px); } .or-shop-dashboard aside { padding: 16px 11px; border-right: 1px solid #eceff3; } .or-shop-dashboard__brand { display: flex; align-items: center; gap: 6px; margin: 0 5px 14px; } .or-shop-dashboard__brand img { width: 20px; height: 20px; border-radius: 6px; } .or-shop-dashboard__brand b { color: #1b1f25; font-size: 9px; font-weight: 900; } .or-shop-dashboard aside > span { display: flex; height: 32px; align-items: center; gap: 7px; margin-top: 3px; padding: 0 9px; border-radius: 8px; color: #5d6269; font-size: 10px; } .or-shop-dashboard aside > span.is-active { color: #2165e9; background: #edf4ff; } .or-shop-dashboard aside > span b { font-weight: 780; } .or-shop-dashboard__main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 16px; } .or-shop-product-card, .or-shop-number-card { position: relative; min-width: 0; min-height: 156px; padding: 12px; border: 1px solid #edf0f4; border-radius: 13px; background: rgba(255, 255, 255, .92); } .or-shop-product-card small, .or-shop-number-card small { color: #393f47; font-size: 8px; font-weight: 850; } .or-shop-product-card > em { position: absolute; top: 10px; right: 9px; padding: 3px 5px; border-radius: 5px; color: #2d9d4b; background: #eaf8ed; font-size: 7px; font-style: normal; font-weight: 850; } .or-demo-product { position: relative; display: block; width: 39px; height: 58px; margin: 12px auto 7px; border-radius: 8px; background: linear-gradient(135deg, #667f42, #d7ca72); box-shadow: 0 7px 12px rgba(55, 45, 26, .17); } .or-demo-product::before { position: absolute; top: 5px; right: 7px; left: 7px; height: 9px; border-radius: 4px; background: rgba(255, 255, 255, .78); content: ""; } .or-demo-product.is-bottle { width: 28px; border-radius: 6px 6px 9px 9px; } .or-demo-product.is-bottle::after { position: absolute; top: -6px; left: 8px; width: 12px; height: 9px; border-radius: 3px 3px 0 0; background: #3a3325; content: ""; } .or-demo-product.is-pack { background: linear-gradient(145deg, #fff0a8, #d87228 46%, #43642c 47%); transform: rotate(-3deg); } .or-shop-product-card > strong, .or-shop-product-card > span { display: block; text-align: center; } .or-shop-product-card > strong { color: #252a30; font-size: 9px; font-weight: 900; } .or-shop-product-card > span { margin-top: 4px; color: #68707a; font-size: 7px; font-weight: 750; } .or-shop-number-card > strong, .or-shop-number-card > span { display: block; } .or-shop-number-card > strong { margin-top: 29px; color: #15191e; font-size: 25px; font-weight: 950; letter-spacing: -1px; } .or-shop-number-card > strong em { font-size: 9px; font-style: normal; } .or-shop-number-card > span { margin-top: 3px; color: #25a149; font-size: 8px; font-weight: 900; } .or-bar-chart { position: absolute; right: 11px; bottom: 11px; left: 11px; display: flex; height: 35px; align-items: flex-end; gap: 5px; border-bottom: 1px solid #ffd9bd; } .or-bar-chart b { flex: 1; border-radius: 2px 2px 0 0; background: #ff9b55; } .or-bar-chart b:nth-child(1) { height: 30%; } .or-bar-chart b:nth-child(2) { height: 58%; } .or-bar-chart b:nth-child(3) { height: 42%; } .or-bar-chart b:nth-child(4) { height: 76%; } .or-bar-chart b:nth-child(5) { height: 100%; } .or-line-chart { position: absolute; right: 12px; bottom: 22px; left: 12px; height: 28px; border-bottom: 2px solid #ff7423; transform: skewY(-16deg); } .or-line-chart::before, .or-line-chart::after { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ff7423; content: ""; } .or-line-chart::before { bottom: -3px; left: 18%; } .or-line-chart::after { right: 8%; bottom: -3px; } .or-shop-dashboard__tasks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .or-shop-dashboard__tasks span { display: grid; min-height: 44px; place-items: center; border: 1px solid #edf0f4; border-radius: 11px; color: #4b5057; background: rgba(255, 255, 255, .94); font-size: 8px; font-weight: 820; text-align: center; } @media (max-width: 1450px) and (min-width: 1121px) { .order-hero.order-hero--duo { padding-right: 12px; padding-left: 12px; } .or-hero-duo { gap: 12px; } .or-hero-service { min-height: 820px; border-radius: 32px; } .or-hero-service__content { width: 62%; padding-left: 34px; } .or-hero-service__content h2 { font-size: clamp(39px, 3.35vw, 49px); letter-spacing: -3px; } .or-hero-service--shop .or-hero-service__content h2 { font-size: clamp(37px, 3.15vw, 46px); letter-spacing: -2.8px; } .or-hero-service__points li, .or-hero-service__lead { font-size: 14px; } .or-hero-service__button { min-width: 190px; height: 56px; padding: 0 20px; font-size: 14px; } .or-shop-profit-card { min-width: 174px; padding-right: 14px; padding-left: 14px; } .or-shop-managed-card { min-width: 154px; } .or-shop-dashboard { grid-template-columns: 112px minmax(0, 1fr); } .or-scan-route__list > div { padding-right: 9px; padding-left: 9px; } .or-scan-route__list img { flex-basis: 35px; width: 35px; height: 35px; } .or-scan-route__list strong { font-size: 10px; } } @media (max-width: 1120px) { .or-hero-duo { grid-template-columns: 1fr; width: min(820px, 100%); } .or-hero-service { min-height: 920px; } .or-hero-service__content h2 { font-size: clamp(48px, 7vw, 65px); } .or-hero-service--shop .or-hero-service__content h2 { font-size: clamp(45px, 6.5vw, 60px); } } @media (max-width: 700px) { .order-hero.order-hero--duo { height: auto !important; min-height: 0 !important; padding: 84px 10px 18px; } .or-hero-duo { gap: 12px; } .or-hero-service { min-height: 900px; border-radius: 26px; background-position: 57% center; } .or-hero-service--shop { min-height: 940px; background-position: 51% bottom; background-size: auto 118%; } .or-hero-service__content, .or-hero-service--shop .or-hero-service__content { width: 100%; padding: 27px 22px 0; } .or-hero-service--scan .or-hero-service__content { padding-top: 36px; } .or-hero-service__eyebrow { margin-bottom: 9px; font-size: 9px; } .or-hero-service__content h2, .or-hero-service--shop .or-hero-service__content h2 { max-width: 350px; font-size: clamp(39px, 11.6vw, 51px); line-height: 1.13; letter-spacing: -3px; } .or-hero-service__rule { width: 52px; height: 4px; margin-top: 22px; } .or-hero-service__points { gap: 11px; margin-top: 19px; } .or-hero-service__points li { max-width: 360px; padding-left: 30px; font-size: 14px; line-height: 1.55; } .or-hero-service__points li::before { width: 21px; height: 21px; font-size: 11px; } .or-hero-service__button { min-width: 0; height: 52px; margin-top: 21px; padding: 0 18px; border-radius: 12px; font-size: 13px; } .or-scan-story { right: 14px; bottom: 16px; left: 14px; min-height: 264px; } .or-scan-story::before { display: none; } .or-scan-metric--pos { left: 0; width: 53%; min-height: 118px; padding: 13px; } .or-scan-metric--shortage { right: 0; width: 44%; min-height: 108px; padding: 13px; } .or-scan-metric__body { grid-template-columns: 52px minmax(0, 1fr); gap: 7px; } .or-scan-metric__body > img { width: 52px; height: 58px; } .or-mini-sales-chart svg { height: 33px; } .or-mini-sales-chart strong { font-size: 9px; } .or-product-row { gap: 3px; margin-top: 13px; } .or-product-row i { height: 43px; } .or-product-row i::before { right: 28%; left: 28%; height: 27px; } .or-scan-route__list { gap: 5px; } .or-scan-route__list > div { min-height: 62px; gap: 5px; padding: 8px 6px; border-radius: 13px; } .or-scan-route__list img { flex-basis: 31px; width: 31px; height: 31px; border-radius: 9px; } .or-scan-route__list strong { font-size: 9px; letter-spacing: -.5px; } .or-hero-service__lead { max-width: 350px; margin-top: 17px; font-size: 14px; } .or-shop-profit-card { top: 465px; right: 18px; width: 190px; min-width: 0; padding: 14px 14px 9px; } .or-shop-profit-card > strong { font-size: 18px; } .or-shop-profit-card svg { height: 42px; } .or-shop-managed-card { display: none; } .or-shop-dashboard { right: 13px; bottom: 15px; left: 13px; grid-template-columns: 1fr; min-height: 245px; border-radius: 18px; } .or-shop-dashboard aside { display: none; } .or-shop-dashboard__main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 10px; } .or-shop-product-card, .or-shop-number-card { min-height: 145px; padding: 8px; } .or-shop-number-card > strong { margin-top: 28px; font-size: 20px; } .or-shop-dashboard__tasks { gap: 4px; } .or-shop-dashboard__tasks span { min-height: 42px; padding: 3px; font-size: 7px; } } @media (max-width: 430px) { .or-hero-service--scan { min-height: 880px; } .or-hero-service--shop { min-height: 920px; } .or-shop-dashboard__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .or-shop-product-card, .or-shop-number-card { min-height: 92px; } .or-demo-product, .or-bar-chart, .or-line-chart { display: none; } .or-shop-product-card > strong, .or-shop-product-card > span { margin-top: 12px; } .or-shop-number-card > strong { margin-top: 18px; } .or-shop-dashboard__tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: no-preference) { .or-hero-service { transition: transform .32s ease, box-shadow .32s ease; } .or-hero-service:hover { transform: translateY(-4px); box-shadow: 0 30px 82px rgba(39, 57, 87, .15); } .or-hero-service--scan .or-scan-metric, .or-hero-service--scan .or-scan-route { animation: orHeroRise .7s cubic-bezier(.22, .8, .3, 1) both; } .or-hero-service--scan .or-scan-route { animation-delay: .12s; } .or-hero-service--shop .or-shop-dashboard, .or-hero-service--shop .or-shop-profit-card, .or-hero-service--shop .or-shop-managed-card { animation: orHeroRise .72s cubic-bezier(.22, .8, .3, 1) both; } .or-hero-service--shop .or-shop-profit-card { animation-delay: .08s; } .or-hero-service--shop .or-shop-managed-card { animation-delay: .16s; } } @keyframes orHeroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .or-hero-service, .or-hero-service__button { transition: none; } } /* source: order-mobile-polish.css */ /* Mobile-only density and readability pass for the public homepage. */ .order-audience-router__mobile-hint, .order-modes__mobile-hint { display: none; } @media (max-width: 700px) { html { scroll-padding-top: 82px; } .order-hero.order-hero--duo { padding: 80px 8px 14px; } .or-hero-duo { gap: 10px; } .or-hero-service { min-height: 700px; border-radius: 22px; } .or-hero-service--scan { min-height: 680px; } .or-hero-service--shop { min-height: 780px; background-position: 47% 112%; } .or-hero-service--shop::before { background: linear-gradient(90deg, rgba(255, 250, 244, .96) 0%, rgba(255, 249, 241, .86) 48%, rgba(255, 249, 241, .28) 68%, rgba(255, 249, 241, .05) 88%), linear-gradient(180deg, rgba(255, 251, 246, .26), transparent 66%, rgba(255, 247, 238, .5) 100%); } .or-hero-service__content, .or-hero-service--shop .or-hero-service__content { padding: 24px 20px 0; } .or-hero-service--scan .or-hero-service__content { padding-top: 30px; } .or-hero-service__eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: 1.25px; } .or-hero-service__content h2, .or-hero-service--shop .or-hero-service__content h2 { max-width: 330px; font-size: clamp(34px, 10vw, 43px); line-height: 1.1; letter-spacing: -2.6px; } .or-hero-service__rule { width: 46px; height: 4px; margin-top: 18px; } .or-hero-service__points { gap: 9px; margin-top: 16px; } .or-hero-service__points li { max-width: 330px; padding-left: 27px; font-size: 13px; line-height: 1.45; } .or-hero-service__points li::before { width: 19px; height: 19px; font-size: 10px; } .or-hero-service__button { height: 48px; margin-top: 17px; padding: 0 16px; border-radius: 11px; font-size: 12px; } .or-hero-service__button svg { width: 18px; height: 18px; } .or-scan-story { right: 10px; bottom: 12px; left: 10px; min-height: 220px; } .or-scan-metric--pos { width: 53%; min-height: 100px; padding: 11px; } .or-scan-metric--shortage { width: 44%; min-height: 94px; padding: 11px; } .or-scan-metric__head { font-size: 11px; } .or-scan-metric__head b { width: 25px; height: 25px; font-size: 10px; } .or-scan-metric__body { grid-template-columns: 43px minmax(0, 1fr); gap: 6px; margin-top: 5px; } .or-scan-metric__body > img { width: 43px; height: 48px; } .or-mini-sales-chart svg { height: 27px; } .or-product-row { margin-top: 10px; } .or-product-row i { height: 36px; } .or-product-row i::before { height: 22px; } .or-scan-route > span { min-height: 25px; font-size: 9px; } .or-scan-route__list > div { min-height: 52px; padding: 6px 5px; border-radius: 11px; } .or-scan-route__list img { flex-basis: 27px; width: 27px; height: 27px; border-radius: 8px; } .or-scan-route__list strong { font-size: 8px; } .or-shop-benefit-tags { margin-top: 14px; } .or-shop-benefit-tags span { min-height: 28px; padding: 0 9px; font-size: 8px; } .or-hero-service__description { max-width: 320px; margin-top: 14px; font-size: 13px; line-height: 1.52; } .or-hero-service__description span + span { margin-top: 9px; } .or-shop-profit-card { top: auto; right: auto; bottom: 208px; left: 14px; width: 165px; padding: 12px 12px 8px; border-radius: 15px; } .or-shop-profit-card > strong { margin-top: 5px; font-size: 16px; } .or-shop-profit-card svg { height: 36px; margin-top: 5px; } .or-shop-managed-card { display: none; } .or-shop-dashboard { right: 10px; bottom: 12px; left: 10px; min-height: 184px; border-radius: 16px; } .or-shop-dashboard__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; } .or-shop-product-card, .or-shop-number-card { min-height: 76px; padding: 7px; border-radius: 10px; } .or-demo-product, .or-bar-chart, .or-line-chart, .or-shop-dashboard__tasks { display: none; } .or-shop-product-card > strong, .or-shop-product-card > span { margin-top: 9px; } .or-shop-number-card > strong { margin-top: 15px; font-size: 18px; } } @media (max-width: 640px) { .order-audience-router, .order-scan-section--scan, .order-modes, .order-comparison, .order-proof, .order-faq, .order-cta { scroll-margin-top: 82px; } .order-audience-router { padding: 54px 0 58px; } .order-audience-router__inner { width: 100%; } .order-audience-router__heading { margin-bottom: 16px; padding: 0 20px; } .order-audience-router__label { margin-bottom: 12px; padding: 7px 12px; font-size: 12px; } .order-audience-router__heading h2 { font-size: 29px; line-height: 1.25; letter-spacing: -1.7px; } .order-audience-router__mobile-hint, .order-modes__mobile-hint { display: flex; align-items: center; gap: 7px; margin: 0 20px 14px; color: #64748b; font-size: 12px; font-weight: 700; } .order-audience-router__mobile-hint::before, .order-modes__mobile-hint::before { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #2563eb; background: #eff6ff; content: "\2194"; font-size: 13px; } .order-audience-router__cards, .order-modes__cards { display: grid; grid-template-columns: none !important; grid-auto-columns: min(84vw, 360px); grid-auto-flow: column; gap: 12px !important; max-width: none !important; margin: 0 !important; padding: 0 20px 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .order-audience-router__cards::-webkit-scrollbar, .order-modes__cards::-webkit-scrollbar { display: none; } .order-audience-router__cards:focus-visible, .order-modes__cards:focus-visible { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: -3px; } .order-audience-router__card, .order-modes__card { scroll-snap-align: start; } .order-audience-router__card { min-height: 365px; padding: 22px 20px; border-radius: 18px; box-shadow: 0 12px 28px rgba(20, 30, 60, .07); } .order-audience-router__icon { width: 44px; height: 44px; border-radius: 12px; } .order-audience-router__icon svg { width: 24px; height: 24px; } .order-audience-router__tag { margin-top: 12px; padding: 4px 9px; font-size: 11px; } .order-audience-router__card h3 { margin-top: 10px; font-size: 19px; line-height: 1.32; } .order-audience-router__card ul { gap: 7px; margin-top: 14px; } .order-audience-router__card li { padding-left: 18px; font-size: 13px; line-height: 1.45; } .order-audience-router__link { padding-top: 15px; font-size: 13px; } .order-scan-v2 { gap: 22px; width: calc(100% - 32px); padding: 56px 0 48px; } .order-scan-v2__number { margin-bottom: 13px; font-size: 11px; } .order-scan-v2__copy h2 { font-size: 40px; line-height: 1.08; letter-spacing: -2.6px; } .order-scan-v2__lead { margin-top: 20px; padding-left: 14px; font-size: 16px; } .order-scan-v2__text { margin-top: 14px; font-size: 13px; line-height: 1.62; } .order-scan-v2__note { min-height: 76px; margin-top: 18px; padding: 12px; border-radius: 14px; } .order-scan-v2__note-icon { flex-basis: 39px; width: 39px; height: 39px; } .order-scan-v2__visual { min-height: 480px; } .order-scan-v2__scene { right: -27%; width: 145%; } .order-scan-v2__steps { gap: 7px; } .order-scan-v2__steps li { min-height: 66px; gap: 7px; padding: 7px 8px; border-radius: 13px; } .order-scan-v2__step-icon { flex-basis: 36px; width: 36px; height: 36px; } .order-scan-v2__step-icon img, .order-scan-v2__steps li:nth-child(2) .order-scan-v2__step-icon img, .order-scan-v2__steps li:nth-child(3) .order-scan-v2__step-icon img { width: 30px; height: 30px; } .order-scan-v2__steps strong { font-size: 11px; } .order-modes { padding: 56px 0 58px !important; } .order-modes__inner { width: 100% !important; } .order-modes__heading { margin-bottom: 18px; padding: 0 20px; } .order-modes__label { margin-bottom: 11px; font-size: 12px; } .order-modes__heading h2 { font-size: 30px; line-height: 1.18; letter-spacing: -1.8px; } .order-modes__heading p { margin-top: 15px; font-size: 14px; line-height: 1.58; } .order-modes__card { min-height: 320px; padding: 20px; border-radius: 17px; } .order-modes__card h3 { margin: 19px 0 10px; font-size: 23px; } .order-modes__card p, .order-modes__card li { font-size: 13px; line-height: 1.5; } .order-modes__card ul { gap: 8px; margin-top: 16px; } .order-modes__card li { padding-left: 26px; } .order-modes__note { width: calc(100% - 40px); margin: 14px 20px 0; padding: 15px 16px; border-radius: 14px; } .order-modes__note strong { font-size: 14px; } .order-modes__note span { font-size: 12px; } .order-comparison { padding: 56px 0 58px !important; } .order-comparison__inner { width: calc(100% - 32px) !important; } .order-comparison__heading { margin-bottom: 24px; } .order-comparison__section-no { margin-bottom: 12px; font-size: 12px; } .order-comparison h2 { margin-bottom: 12px; font-size: 30px !important; line-height: 1.2; letter-spacing: -1.8px !important; } .order-comparison__heading p { margin-top: 10px; font-size: 13px; line-height: 1.58; } .order-comparison__table { overflow: visible; border: 0 !important; background: transparent !important; box-shadow: none !important; } .order-comparison__body { display: grid; gap: 10px; } .order-comparison__row { border-radius: 13px !important; box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important; } .order-comparison__old, .order-comparison__new { min-height: 58px !important; padding: 9px 11px !important; font-size: 12px !important; } .order-comparison__old { grid-template-columns: 40px minmax(0, 1fr) !important; } .order-comparison__new { grid-template-columns: 40px minmax(0, 1fr) 24px !important; } .order-comparison__old::before, .order-comparison__new::before { margin-bottom: 1px; font-size: 11px; } .order-comparison__new strong { font-size: 13px; } .order-comparison__icon { width: 34px !important; height: 34px !important; } .order-comparison__icon svg { width: 34px; height: 34px; } .order-comparison__check { width: 22px; height: 22px; font-size: 11px; } .order-proof { padding: 56px 0 60px !important; } .order-proof__inner { width: calc(100% - 32px) !important; } .order-proof__section-no { font-size: 12px; } .order-proof h2 { margin: 18px 0 24px; font-size: 30px !important; line-height: 1.18; letter-spacing: -1.8px !important; } .order-proof__rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .order-proof__metric { display: grid; min-height: 132px !important; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; padding: 14px !important; border: 1px solid #e5e7eb !important; border-radius: 16px; text-align: left; } .order-proof__icon { grid-row: 1 / 3; width: 42px; height: 42px; margin: 0; border-radius: 12px; font-size: 21px; } .order-proof__value { min-height: 0; align-self: end; justify-content: flex-start; padding-left: 10px; } .order-proof__value strong { font-size: 29px; letter-spacing: -1.8px; } .order-proof__value span { margin-left: 3px; font-size: 15px; letter-spacing: -.7px; } .order-proof__label { align-self: start; margin-top: 6px; padding-left: 10px; font-size: 11px; line-height: 1.35; } .order-faq { padding: 56px 0 60px !important; } .order-faq__inner { width: calc(100% - 32px) !important; } .order-faq__heading { gap: 12px; margin-bottom: 24px; } .order-faq__section-no { margin-bottom: 8px; font-size: 12px; } .order-faq h2 { font-size: 30px !important; letter-spacing: -1.8px !important; } .order-faq__heading p { font-size: 13px; line-height: 1.58; } .order-faq details { border-radius: 13px; } .order-faq summary { min-height: 58px; grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 8px; padding: 10px 12px; } .order-faq__question-no { font-size: 15px; } .order-faq summary strong { font-size: 13px; line-height: 1.4; } .order-faq__toggle { width: 30px; height: 30px; } .order-faq__answer { margin: 0 10px 10px; padding: 15px; border-radius: 11px; } .order-faq__answer p { font-size: 12px; line-height: 1.65; } .order-cta { min-height: 0 !important; padding: 56px 0 60px !important; } .order-cta__inner { width: calc(100% - 24px) !important; min-height: 0 !important; padding: 0 !important; } .order-cta__content { gap: 26px !important; padding: 24px 20px !important; border-radius: 22px !important; } .order-cta h2 { font-size: 31px !important; line-height: 1.14; letter-spacing: -2px !important; } .order-cta__copy > p { margin: 18px 0 0; padding: 0; font-size: 13px !important; line-height: 1.62; } .order-contact { padding: 20px 16px; border-radius: 17px !important; } .order-contact__heading { gap: 5px; margin-bottom: 17px; } .order-contact__heading strong { font-size: 20px; } .order-contact__heading span, .order-contact__fields label > span { font-size: 12px; } .order-contact__fields { gap: 11px; } .order-contact input { height: 44px; } .order-contact textarea { min-height: 96px; } .order-contact input, .order-contact textarea { padding: 10px 12px; font-size: 13px; } .order-cta__button { min-height: 50px; margin-top: 15px; padding: 0 16px; font-size: 15px; } } @media (max-width: 430px) { .or-hero-service--scan { min-height: 650px; } .or-hero-service--shop { min-height: 740px; } } @media (prefers-reduced-motion: reduce) { .order-audience-router__cards, .order-modes__cards { scroll-behavior: auto; } }