@charset "utf-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); .nanum-neo{font-family: 'NanumSquare Neo', sans-serif;} .nanum {font-family: 'NanumSquare', sans-serif;} .poppins {font-family: "Poppins", sans-serif;} .outfit {font-family: "Outfit", sans-serif;} .mont {font-family: "Montserrat", sans-serif;} .raleway {font-family: "Raleway", sans-serif;} .pre{font-family: 'Pretendard Variable', sans-serif;} .pre_vari{font-family: "Pretendard Variable", sans-serif;} .txt-white {color: #fff !important;} em{font-style: normal;} dl, ul, ol, menu, li {list-style:none; vertical-align: middle} .svg {font-size: 0 !important; text-indent: -999999px !important;} .wid100{width: 100% !important;} .wid50{width: 50% !important;} .text-primary{color: #29D4C1 !important;} .sticky-wrap{position: relative;} .wrapper-sticky {contain: content; overflow: visible;} .ta{display: none !important;} /*태블릿*/ .blind{position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0, 0, 0, 0); overflow: hidden;} /***** Margin *****/ .ml-0 { margin-left: 0 !important;} .mr-0 { margin-right: 0 !important;} .mb-0 { margin-bottom: 0 !important;} .m0-auto { margin: 0 auto !important;} .mt-auto { margin-top: auto !important;} .ml-auto { margin-left: auto !important;} .mr-auto { margin-right: auto !important;} .mb-auto { margin-bottom: auto !important;} .mt-0 { margin-top: 0 !important;} .mt-5 { margin-top: 5px !important;} .mt-8 { margin-top: 8px !important;} .mt-10 { margin-top: 10px !important;} .mt-15 { margin-top: 15px !important;} .mt-20 { margin-top: 20px !important;} .mt-25 { margin-top: 25px !important;} .mt-30 { margin-top: 30px !important;} .mt-35 { margin-top: 35px !important;} .mt-38 { margin-top: 38px !important;} .mt-40 { margin-top: 40px !important;} .mt-50 { margin-top: 50px !important;} .mt-55 { margin-top: 55px !important;} .mt-60 { margin-top: 60px !important;} .mt-70 { margin-top: 70px !important;} .mt-75 { margin-top: 75px !important;} .mt-80 { margin-top: 80px !important;} .mt-100 { margin-top: 100px !important;} .mt-125 { margin-top: 125px !important;} .mt-140 { margin-top: 140px !important;} .mt-150 { margin-top: 150px !important;} .mt-160 { margin-top: 160px !important;} .mt-170 { margin-top: 170px !important;} .mt-200 { margin-top: 200px !important;} .mb-5 { margin-bottom: 5px !important;} .mb-10 { margin-bottom: 10px !important;} .mb-20 { margin-bottom: 20px !important;} .mb-30 { margin-bottom: 30px !important;} .mb-40 { margin-bottom: 40px !important;} .mb-50 { margin-bottom: 50px !important;} .mb-170 { margin-bottom: 170px !important;} /***** Padding *****/ .pt-0 { padding-top: 0 !important;} .pl-0 { padding-left: 0 !important;} .pr-0 { padding-right: 0 !important;} .pb-0 { padding-bottom: 0 !important;} .p-0 { padding: 0px !important; } .p-20 { padding: 20px !important; } .p-40 { padding: 40px !important; } .p-60 { padding: 60px !important; } .p-80 { padding: 80px !important; } .p-100 { padding: 100px !important; } .p-150 { padding: 150px !important; } .p-200 { padding: 200px !important; } .p-250 { padding: 250px !important; } .p-300 { padding: 300px !important; } .p-350 { padding: 350px !important; } .ptb-100 { padding: 100px 0 !important; } .ptb-150 { padding: 150px 0 !important; } .ptb-200 { padding: 200px 0 !important; } .ptb-250 { padding: 250px 0 !important; } .ptb-300 { padding: 300px 0 !important; } .ptb-350 { padding: 350px 0 !important; } /***** Text *****/ .t-rw {overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -moz-box-orient:vertical; word-break:break-all; word-wrap:break-word;} .rw-1 {-webkit-line-clamp:1;} .rw-2 {-webkit-line-clamp:2;} .rw-3 {-webkit-line-clamp:3;} .txt-lowercase { text-transform: lowercase;} .txt-uppercase { text-transform: uppercase; } .txt-capitalize { text-transform: capitalize; } .txt-l{text-align:left !important;} .txt-c{text-align:center !important;} .txt-r{text-align:right !important;} .ver-t{vertical-align:top !important;} .ver-m{vertical-align:middle !important;} .ver-b{vertical-align:bottom !important;} .txt-line{text-decoration:underline !important;} .col-4{width: 25%;} .col-3{width: 33.333%;} .col-2{width: 50%;} .letter-spacing-63 {letter-spacing: -0.63px !important;} /* ================================================== Utility ================================================== */ /***** Flex *****/ .flex-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .justify-content-center { -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;} .justify-content-start { -webkit-box-pack: justify; -moz-justify-content: flex-start; -ms-flex-pack: justify; justify-content: flex-start; } .justify-content-end { -webkit-box-pack: justify; -moz-justify-content: flex-end; -ms-flex-pack: justify; justify-content: flex-end } .justify-content-between { -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .justify-content-around { -webkit-box-pack: justify; -moz-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around;} .justify-content-evenly { -webkit-box-pack: justify; -moz-justify-content: space-evenly; -ms-flex-pack: justify; justify-content: space-evenly;} .align-items-center { -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; } .align-items-start { -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .align-items-end { -webkit-box-align: end; -moz-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .align-items-baseline { -webkit-box-align: baseline; -moz-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } .flex-column { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .flex-row { -webkit-box-orient: horizontal; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row;} .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;} .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;} .flex-nowrap {-webkit-box-lines: multiple; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-wrap {-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .gap-5 { gap: 5px !important; } .gap-10 { gap: 10px; } .gap-15 { gap: 15px; } .gap-20 { gap: 20px; } .gap-25 { gap: 25px; } .gap-30 { gap: 30px; } .gap-34 { gap: 34px; } .gap-40 { gap: 40px; } .gap-50 { gap: 50px; } .gap-60 { gap: 60px; } .gap-70 { gap: 70px; } .gap-80 { gap: 80px; } .gap-90 { gap: 90px; } .gap-100 { gap: 100px; } /***** Overflow Scrollbar *****/ .overflow-y { overflow-y: auto; } .overflow-y::-webkit-scrollbar { width: 6px; height: 1px;} .overflow-y::-webkit-scrollbar-track { background: transparent;} .overflow-y::-webkit-scrollbar-thumb { background: rgba(230, 0, 19, 0.2);} .scroll-out {-ms-overflow-style: none; scrollbar-width: none;} .scroll-out::-webkit-scrollbar {display: none;} /***** check_box *****/ .check-box{ position:relative;} .check-box > input[type="checkbox"]{width:1px; height:1px; margin:-1px; position:absolute; clip: rect(0, 0, 0, 0); overflow:hidden;} .check-box > input[type="checkbox"] ~ label{padding-left:26px; box-sizing:border-box; position:relative; font-size:1.4rem; font-weight:700; color:#222; cursor:pointer;} .check-box > input[type="checkbox"]:checked ~ label{color:#244177;} .check-box > input[type="checkbox"] ~ label:before{display:block; content:''; clear:both; width:20px; height:20px; border-radius:3px; border:1px solid #ccc; box-sizing:border-box; background-color:#fff; position:absolute; top:50%; margin-top:-10px; left:0; z-index:0;} .check-box > input[type="checkbox"]:checked ~ label:before{background-image:url('/img/ico_chk_blu.svg'); background-size:12px 9px; background-repeat:no-repeat; background-position:center;} .check-list .check-box { position:relative !important; left:0 !important; top: 0 !important; transform: translate(0, 0) !important; float: left !important; margin-left: 25px !important; width: fit-content !important; height: auto !important;} .check-box.non-position { position:relative !important; left:0 !important; top: 0 !important; transform: translate(0, 0) !important; float: left !important; width: fit-content !important; height: auto !important; } .check-list .check-box:first-child, .check-box:first-child.non-position{margin-left: 0 !important;} .check-list .check-box label, .check-box.non-position label { padding-left: 26px !important; font-size: 1.4rem !important; } .check-list .check-box > input[type="checkbox"] ~ label:before, .check-box.non-position > input[type="checkbox"] ~ label:before { position: absolute !important; top: 0 !important; margin-top: 0 !important; } .f-name { margin-right: 5px;} caption {display:none;} footer{ height: 100vh;} .footer .footer-body *{width: 100%; font-family: 'NanumSquare'; transform: skew(-0.03deg)} .footer .footer-body.dark{background: #0C0C0D; height: calc(100% - 208px); vertical-align: middle; align-content: center;} .footer .footer-body.dark *{color: #fff !important;} .footer .footer-body .footer-inner .txt-area .tit-area{text-align: start;} .footer .footer-body .footer-inner .txt-area .tit-area h2{font-size: 7.0rem; font-weight: 800; line-height: 1; letter-spacing: -2.1px; font-family: "Poppins", sans-serif;} .footer .footer-body .footer-inner .txt-area .tit-area em{font-size: 3.0rem; font-weight: 400; letter-spacing: -0.9px; line-height: 1;} .footer .footer-body .footer-inner > div.max1440{max-width: 1480px; margin: 0 auto; padding:0 20px;} .footer .footer-body .footer-inner .right{max-width: 720px; width: 100%;} .footer .footer-body .footer-inner .right p{} .footer .footer-body .footer-inner .right p span{} .footer .footer-body .footer-inner .right p span em{font-size: 1.5rem; font-weight: 700; letter-spacing: -0.45px; line-height: 1; color: #8B8B8B !important; display: block;} .footer .footer-body .footer-inner .right p span b{font-size: 1.8rem; font-weight: 600; letter-spacing: -0.54px; font-family: "Poppins", sans-serif; display: block; line-height: 1;} .footer .footer-body .footer-inner .right p span b + b{font-family: 'NanumSquare Neo', sans-serif;} /* .footer .footer-body .footer-inner .map-area{border-radius: 30px; overflow: hidden;} */ .footer .footer-body .footer-inner .map-area iframe{border-radius: 30px; overflow: hidden;} .mapboxgl-canvas{border-radius: 30px; overflow: hidden;} #sub.contact ~ .footer .footer-body .footer-inner {padding-top:100px; box-sizing: border-box;} #sub.contact ~ .footer .footer-body .footer-inner .txt-area .tit-area {width: fit-content;} /* ================================================== board ================================================== */ .bbs{position:relative; width:100%; clear:both;} input[type='text'], .bbs input[type='password'], .bbs select {height:40px; line-height: 40px; vertical-align: middle; padding:0 5px; width:100%; box-sizing:border-box;} .tbl-area.bbs .tit-box h3{font-size:18px; font-weight: 500; color:#333; margin-bottom: 15px; letter-spacing: -1px;} /* list */ #sub.maintenance table{border-collapse: separate;} #sub.story .tbl-area.bbs .tbl-box table{border-top: 3px solid #000000; border-bottom: 3px solid #000000; width: 100%;} .tbl-area.bbs .tbl-box thead{border-top:2px solid #333; border-bottom:1px solid #adadad;} .tbl-area.bbs .tbl-box thead th{padding:15px 10px; font-size:1.5rem; color:#333;} .tbl-area.bbs .tbl-box tbody tr{padding: 70px 0; box-sizing: border-box; display: block; position: relative;border-bottom:1px solid #000000;} .tbl-area.bbs .tbl-box tbody tr:last-child{border-bottom: none} .tbl-area.bbs .tbl-box tbody td{font-family: 'NanumSquare Neo', sans-serif; display: block;} .tbl-area.bbs .tbl-box tbody td.title{font-size: 4.0rem; font-weight: 800; letter-spacing: -1.2px; line-height: 1; transition: 0.3s;} .tbl-area.bbs .tbl-box tbody td.date{display: block; text-align: end; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.45px; color: #8B8B8B; font-family: 'NanumSquare';} .tbl-area.bbs .tbl-box tbody td.sub_con{color: #8B8B8B; font-size: 2.0rem; font-weight: 400; letter-spacing: -0.6px; transition: 0.3s; font-family: 'NanumSquare';} .tbl-area.bbs .tbl-box tbody .hover-img{width: 0; height: 0; border-radius: 50%; box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.05); overflow: hidden; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); opacity: 0; transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease; cursor: pointer;} .tbl-area.bbs .tbl-box tbody tr:hover .hover-img{width: 378px; height: 378px; opacity: 1;} .tbl-area.bbs .tbl-box tbody tr:hover td.title{color: #29D4C1;} .tbl-area.bbs .tbl-box tbody tr:hover td.sub_con{color: #0C0C0D;} .tbl-area.bbs .tbl-box .notice{background:#fffdf6;} /*탑공지 배경칼라지정*/ .bbs span.notice_ico{background:#e30000 url(/img/ico_notice.png) no-repeat center center; border-radius:12px; height:24px; width:24px; display: block; line-height: 24px; vertical-align: middle; text-indent: -99999px; margin:0 auto;} .tbl-area.bbs .tbl-box .reNum{color:#a9a9a9; font-size:1.3rem;} .tbl-area.bbs .tbl-box .reNum strong{font-weight: 400; color:#333; padding:0 2px;} .tbl-area.bbs .tbl-box .secret{display: inline-block; width:25px; height:25px; line-height: 20px; border-radius:15px; background:#f9f9f9; text-align: center; vertical-align: middle;} .tbl-area.bbs .tbl-box .secret img{line-height: 25px; vertical-align: middle;} .tbl-area.bbs .tbl-box span.comment{color:#999; font-size:1.2rem !important; font-weight:normal !important;} /*댓글수*/ .tbl-area.bbs .tbl-box .image img{width:80px; height:auto;} .tbl-area.bbs .tbl-box .title span{font-size:1.5rem; font-weight:bold;} .bbs .state span{display: block; padding:2px 8px; margin:auto; max-width:50px; font-size:1.4rem; text-align: center; box-sizing: border-box;} .bbs .state span.waiting{background:#f4f4f4; color:#aaa; } .bbs .state span.complete{background:#eff9fa; color:#1091ff;} .bbs .state span b{display:none;} /* view */ .tbl-area.bbs .tbl-box.view{font-family: 'NanumSquare';} /* .tbl-area.bbs .tbl-box.view{width:100%; border-top:2px solid #333;} */ /* .tbl-area.bbs .tbl-box.view .title > dl{width:100%; padding:20px; border-bottom:1px solid #adadad; background:#fafafa; box-sizing: border-box;} */ .tbl-area.bbs .tbl-box.view .title > dl > dt{text-align: center; font-size: 4.0rem; font-weight: 800; letter-spacing: -1.2px; line-height: 1;} .tbl-area.bbs .tbl-box.view .title > dl > dd{display: block; text-align: center; font-size: 1.5rem; font-weight: 700; color: #8B8B8B; letter-spacing: -0.45px; margin-top: 40px; margin-bottom: 0;} /* .tbl-area.bbs .tbl-box.view .title > dl > dd:after{content:""; display:inline-block; width:1px; height:14px; background:#dddddd; position:absolute; right:8px; top:50%; margin-top:-7px;} .tbl-area.bbs .tbl-box.view .title > dl > dd:last-child:after{background:none; padding-right:0;} */ .tbl-area.bbs .tbl-box.view .title > dl > dd > span{padding-right:8px; color:#333; display: inline-block; /*text-indent: -99999px;*/} /* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */ /* .tbl-area.bbs .tbl-box.view .title > dl > dd > span.name{background:url(/img/ico_name.png) no-repeat left center; width:15px; height:auto;} .tbl-area.bbs .tbl-box.view .title > dl > dd > span.date{background:url(/img/ico_date.png) no-repeat left center; width:13px; height:auto;} .tbl-area.bbs .tbl-box.view .title > dl > dd > span.hit{background:url(/img/ico_hit.png) no-repeat left center; width:18px; height:auto;} */ .tbl-area.bbs .tbl-box.view .cont{padding: 80px 0; box-sizing: border-box; border-top: 3px solid #000; border-bottom: 3px solid #000; margin-top: 80px; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.54px;} .tbl-area.bbs .tbl-box.view .cont img{max-width:100% !important;} .tbl-area.bbs .tbl-box.view .reply{} .tbl-area.bbs .tbl-box.view .reply > dl{width:100%; background:#f4f4f4; padding:20px 5%;} .tbl-area.bbs .tbl-box.view .reply > dl > dt{ padding:20px 0; font-size:2.2rem; color:#000; position:relative;} .tbl-area.bbs .tbl-box.view .reply > dl > dt > span{display:block; font-size:1.6rem; color:#999;} .tbl-area.bbs .tbl-box.view .reply > dl > dt:after {content:""; position:absolute; width:17px; height:1px; background-color:#000; bottom:0; left:3px;} .tbl-area.bbs .tbl-box.view .reply > dl > dd{ font-size:1.6rem; color:#5c5d63; padding:20px 0;} .tbl-area.bbs .tbl-box.view .link{position:relative; overflow: hidden;} .tbl-area.bbs .tbl-box.view .link dl{border-bottom:1px solid #e1e1e1; width:100%; display: block; position: relative; overflow: hidden; clear: both; padding:10px 20px; box-sizing: border-box;} .tbl-area.bbs .tbl-box.view .link dl:last-child{border-bottom:1px solid #adadad;} .tbl-area.bbs .tbl-box.view .link dl dt{float:left; color:#333; padding-right:15px; text-indent: -99999px;} /* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */ .tbl-area.bbs .tbl-box.view .link dl dt.file{background:url(/img/ico_file.png) no-repeat left center; width:16px; height:24px;} .tbl-area.bbs .tbl-box.view .link dl dt.url{background:url(/img/ico_link.png) no-repeat left center; width:16px; height:24px;} .tbl-area.bbs .tbl-box.view .link dl dd{float:left; font-size:1.4rem;;} ul.view-navi{font-family: "Poppins", sans-serif; padding: 50px 0; box-sizing: border-box;} .view-navi li{font-size: 1.6rem; font-weight: 800; color: #8B8B8B; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1; transition: 0.3s; position: relative; min-width: 112px; border-bottom: 2px solid transparent;} .view-navi li.navi:hover{color: #29D4C1; border-bottom: 2px solid #0C0C0D;} .view-navi li.navi a{display: block; width: 100%; padding: 18.5px 0; box-sizing: border-box; position: relative; transition: justify-content 0.3s; color: #888888;} .view-navi li.navi .navi_hover_img{max-width: 210px; max-height: 210px; min-width: 210px; min-height: 210px; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; top: -210px; opacity: 0; z-index: -1; transition: 0.3s; right: 50px;} .view-navi li.navi:hover .navi_hover_img{opacity: 1; z-index: 0;} .view-navi li.navi:hover::after{content: ''; clear: both; display: block; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;} .view-navi li.next:hover a, .view-navi li.prev:hover a{color: #29D4C1;} .view-navi li.prev a{transform: translateX(0); transition: transform 0.5s ease;} .view-navi li.prev:hover a{transform: translateX(65px);} .view-navi li.prev:hover::after{ background: url(/img/ico_prev_m.svg) no-repeat center center; background-size: 24px 24px; left: 0;} .view-navi li.next a{transform: translateX(65px); transition: transform 0.5s ease;} .view-navi li.next:hover a{transform: translateX(0);} .view-navi li.next .navi_hover_img{left: 50px;} .view-navi li.next:hover::after{background: url(/img/ico_next_m.svg) no-repeat center center; background-size: 24px 24px; right: 0;} .view-navi li.list{ color: #0C0C0D; box-sizing: border-box; border: 1px solid #0C0C0D; background: rgba(255, 255, 255, 0.90); box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.10); border-radius: 500px; transition: 0.3s; min-width: 193px;} .view-navi li.list:hover{background: #29D4C1; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.10); border: 1px solid #29D4C1;} .view-navi li.list a{width: 100%; height: 100%; padding: 26px 46.12px; text-align: center; box-sizing: border-box; font-size: 1.6rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1; transition: 0.3s all ease; position: relative; color: #0C0C0D; display: flex; justify-content: center; align-items: center; gap: 0;} .view-navi li a{padding: 0; position: relative; transition: 0.3s;} .view-navi li.list:hover a{color: #fff; text-align: start; justify-content: space-between; gap: 85px;} .view-navi li.list .hover-image{opacity: 0; transition: opacity 0.3s; width: 0;} .view-navi li.list:hover .hover-image{opacity: 1; width: 17px; margin-top: 4px;} .view-navi .empty { width: 50px; visibility: hidden;} /* ================================================== popup ================================================== */ .popup.pp-alert{top: 50%; left: 50%; transform: translate(-50%, -50%);} .popup.pp-alert .popup-inner{height: fit-content; padding: 35px;} .popup {display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index:2000; } .popup.bg { background-color: rgba(0, 0, 0, 0.6); } .popup .popup-body{width: 100%; max-width: 905px; margin: 0 auto; height: 100%; display: flex; justify-content: center; align-items: center; } .popup .popup-body.big { max-width: 1024px; } .popup .popup-body.small { max-width: 500px; } .popup .popup-inner{background-color: #fff; padding: 40px; box-sizing: border-box; position: relative; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); } .popup .popup-inner.lined{border-top:3px solid #168fda;} .popup .popup-inner.round{border-radius:10px;} .popup .popup-inner .popup-close{display: block; width: 50px; height: 50px; position: absolute; right: 0px; top: -50px; background : transparent url('/img/ico_close_wht.svg') no-repeat center; background-size: 16px; z-index: 9;} .popup .popup-title {padding-top: 0; text-align: start; color: #fff;} .popup .popup-title h2 {float: none; font-size: 6.0rem; font-weight: 800; line-height: 1; letter-spacing: -1.8px; display: block; margin-bottom: 0;} .popup .popup-title h4 {float: none; font-size: 3.0rem; font-weight: 400; line-height: 1; letter-spacing: -0.9px; display: block; margin-bottom: 0;} .popup .popup-cont {margin-top: 20px;} .popup .popup-cont .text-box{overflow-y: scroll; max-height: 100%; box-sizing:border-box;} .popup .popup-cont .text-box::-webkit-scrollbar{display: none;} /* .popup .popup-cont .text-box::-webkit-scrollbar{width:3px;} .popup .popup-cont .text-box::-webkit-scrollbar-track{background:#efefef;} .popup .popup-cont .text-box::-webkit-scrollbar-thumb{box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);} */ .small-modal {display: block;} .small-modal .popup-body {max-width: 480px;} .small-modal .popup-inner { width: 100%; padding: 35px; border-radius: 0 0 20px 20px; border-top: 2px solid #29D4C1;} .small-modal .popup-cont {margin-top: 0; text-align: center;} .small-modal .txt-box p {font-size: 1.8rem; text-align: center; font-weight: 800;} .small-modal .btnSet {margin-top: 30px;} .small-modal .btnSet .btn { min-width: 150px; } /* 팝업 */ .popup{top: 100%; transition: top 0.4s ease-in-out; /* 부드러운 애니메이션 효과 설정 */} .popup .popup-body.big { max-width: 100%; } .popup .popup-inner{padding: 0; width: 100%; height: 100%;} .popup .popup-inner .popup-close{width: 63.33px; height: 63.33px; right: 20px; top: 20px; background: transparent url(/img/ico_close.svg) no-repeat center; border: 1px solid #333333; background-size: 23px;} .popup .popup-inner > div{box-sizing: border-box; margin-top: 0;} .popup .popup-inner .left-cont{background: #29D4C1; max-width: 686px; width: 100%; padding: 120px 100px;} /* 개인정보 팝업 */ #policy1.popup{z-index: 2001;} #policy1.popup .popup-inner .left-cont p{font-size: 1.5rem; font-weight: 400; letter-spacing: -0.45px; line-height: 30px;} #policy1.popup .popup-inner .left-cont p b{display: block; font-weight: 800;} #policy1.popup .popup-inner .right-cont{padding: 120px 100px;} /* 지원하기 팝업 */ #inquiry_pop.popup .left-cont a{font-size: 1.2rem; font-weight: 800; letter-spacing: -0.36px; line-height: 1; padding: 25.1px 25px; box-sizing: border-box; border: 1px solid #0C0C0D; max-height: 64px; color: #0C0C0D;} #inquiry_pop.popup .gauge-wrap{width: 12px; height: 100%; position: absolute; left: 0; top: 0; background: #E1E1E1;} #inquiry_pop.popup .gauge-wrap .gaugebar-inner{width: 100%; background: #0C0C0D;} #inquiry_pop.popup .right-cont{width: calc(100% - 686px); padding: 120px 100px; position: relative;} #inquiry_pop.popup .right-cont .step-wrap .step {opacity: 0; visibility: hidden; height: 0; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, height 0.5s ease-in-out;} #inquiry_pop.popup .right-cont .step-wrap .step.active {opacity: 1; visibility: visible; height: auto; /* auto를 사용하여 원래 높이를 자동으로 설정 */} #inquiry_pop.popup .right-cont .step b{font-size: 5.0rem; font-weight: 800; line-height: 80px; letter-spacing: -1.5px;} #inquiry_pop.popup .right-cont .step b input[type="text"]{font-size: 5.0rem; font-weight: 800; line-height: 80px; letter-spacing: -1.5px; color: #29D4C1; height: 80px; border-left: none; border-top: none; border-right: none; border-bottom: 1px solid #000000; width: fit-content; padding: 0; background: none;} #inquiry_pop.popup .right-cont .step b input[type="text"]::placeholder{font-size: 5.0rem; font-weight: 800; line-height: 80px; letter-spacing: -1.5px; color: #CECECE; font-family: 'NanumSquare'; transform: skew(-0.03deg);} #inquiry_pop.popup .right-cont .step b input:focus{outline: none; border-bottom: 1px solid #000000;} #inquiry_pop.popup .right-cont .type-wrap{padding-left: 0;} #inquiry_pop.popup .right-cont .type-wrap .type.check-box > input[type="checkbox"] ~ label{font-size: 3.0rem; font-weight: 800; letter-spacing: -0.9px; line-height: 48px; color: #CECECE;border: 3px solid #CECECE; border-radius: 500px; padding: 9px 18px; box-sizing: border-box; height: fit-content; transition: 0.3s;} #inquiry_pop.popup .right-cont .type-wrap .type.check-box > input[type="checkbox"] ~ label:before{display: none;} #inquiry_pop.popup .right-cont .type-wrap .type.check-box > input[type="checkbox"]:checked ~ label{color: #FFFFFF; border: 3px solid #29D4C1; background: #29D4C1; transition: 0.3s;} #inquiry_pop.popup .right-cont .type-wrap .type:nth-child(1), #inquiry_pop.popup .right-cont .type-wrap .type:nth-child(2), #inquiry_pop.popup .right-cont .type-wrap .type:nth-child(5){max-width: 122px;} #inquiry_pop.popup .right-cont .type-wrap .type:nth-child(3), #inquiry_pop.popup .right-cont .type-wrap .type:nth-child(4){max-width: 148px;} #inquiry_pop.popup .right-cont .step-3 b input{} #inquiry_pop.popup .right-cont .step-4 b input{display: block;} #inquiry_pop.popup .right-cont .step-5 b textarea{resize: none; width: 100%; max-width: 100%; min-height: 400px; overflow-y: auto; border: 1px solid #000000; padding: 20px; box-sizing: border-box; font-size: 1.6rem; font-weight: 800; line-height: 24px; letter-spacing: -0.48px;} #inquiry_pop.popup .right-cont .step-6 b input{cursor: pointer;} #inquiry_pop.popup .right-cont .step-6 b input::placeholder{font-size: 1.6rem; font-weight: 800; line-height: 24px; letter-spacing: -0.48px; color: #CECECE;} .dynamic-width {transition: width 0.3s ease; /* 부드럽게 너비 변경 */} #inquiry_pop.popup .right-cont .nextprev-wrap{gap: 12.5px; margin-top: 46.25px;} #inquiry_pop.popup .right-cont .nextprev-wrap > div{position: relative; width: 107.5px; height: 107.5px; border-radius: 50%; border: 5px solid #CECECE; box-sizing: border-box; cursor: pointer; transition: 0.3s; font-size: 0; text-indent: -999999px;} #inquiry_pop.popup .right-cont .nextprev-wrap > div:hover{background: #0C0C0D; border: 3px solid transparent;} #inquiry_pop.popup .right-cont .nextprev-wrap .prev{display: none;} #inquiry_pop.popup .right-cont .nextprev-wrap .prev::after{content: ''; clear: both; display: block; width: 42.49px; height: 37.49px; background: url(/img/inquiry_pop_ico_prev.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #inquiry_pop.popup .right-cont .nextprev-wrap .prev:hover::after{background: url(/img/inquiry_pop_ico_prev_on.svg) no-repeat center center; background-size: 100% 100%;} #inquiry_pop.popup .right-cont .nextprev-wrap .next::after{content: ''; clear: both; display: block; width: 42.49px; height: 37.49px; background: url(/img/inquiry_pop_ico_next.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #inquiry_pop.popup .right-cont .nextprev-wrap .next:hover::after{background: url(/img/inquiry_pop_ico_next_on.svg) no-repeat center center; background-size: 100% 100%;} #submitBtn{letter-spacing: -0.48px; padding: 30px 110px 30px 100px; } #submitBtn:hover{padding: 30px 130px 30px 100px;} /* #inquiry_pop.popup .right-cont .nextprev-wrap #submitBtn::after{content: ''; clear: both; width: 5px; height: 5px; border-radius: 50%; background: #29D4C1; position: absolute; top: 34%; right: 34%;} */ /* 약관 및 개인정보수집 동의 */ .agree{margin:0 0 30px;} .agree_con{background:#fff; overflow-y:scroll; width:100%; height:150px; border:1px solid rgb(204, 204, 204); padding:10px; box-sizing:border-box; border-radius: 4px;} .agree_con > strong{color:#000; font-size:1.8rem; font-weight: 500; margin-bottom:10px; display: block;} .agree p.check_box{margin:10px 0 0;text-align:right;} .agree_txt b{font-size: 1.8rem; font-weight: 800; letter-spacing: -0.54px; line-height: 28.8px;} .agree_txt p, .agree_txt ul, .agree_txt ol{margin-bottom:10px; font-size: 1.5rem; line-height: 30px; letter-spacing: -0.45px; font-weight: 400; transform: skew(-0.03deg); margin-top: 0;} .agree_txt h4{font-family:'NanumSquare', sans-serif; margin-top: 20px; font-size: 1.5rem; line-height: 30px; letter-spacing: -0.45px; font-weight: 800; transform: skew(-0.03deg); margin-bottom: 0;} .agree_txt h4 + h4{margin-top: 35px;} .agree_txt dt{font-size: 1.5rem; line-height: 30px; letter-spacing: -0.45px; font-weight: 800; margin-top: 30px; transform: skew(-0.03deg);} .agree_txt dd:last-child{margin-bottom:10px;} .agree_txt .num_list {counter-reset: item;} .agree_txt .num_list > li, .agree_txt .num_list > dt, .agree_txt .num_list > dd{position:relative; padding-left: 15px;} .agree_txt .num_list > li:before, .agree_txt .num_list > dt:before{content: counter(item)'.'; counter-increment:item; position:absolute; top:1px; left:0; font-weight: 300;} .agree_txt .subnum_list{counter-reset: item; padding-left: 0;} /*.agree_txt .subnum_list > li, .agree_txt .subnum_list > dt, .agree_txt .subnum_list > dd{padding-left: 20px; position:relative;} .agree_txt .subnum_list > li:before, .agree_txt .subnum_list > dt:before {content: counter(item); counter-increment:item; position:absolute; top:5px; left:0; width:14px; height:14px;line-height: 14px; font-size:10px; vertical-align: middle; border:1px solid #707070; border-radius: 10px; text-align: center; display: inline-block; } */ .agree_txt .dotline_list > li{position:relative; padding-left:10px;} .agree_txt .dotline_list > li:before{content:''; width:4px; height:2px; background:#707070; left:0; top:11px; position:absolute;} .btn {display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;} .btn-cancel{font-weight: 700; color: #fff !important; background-color: #29D4C1; border-color: #29D4C1;} .btn-search{color: #fff; background-color: #444949; border-color: #444949;} .btn-submit{color: #fff !important; background-color: rgba(0,0,0,0.8) !important; border-color: rgba(0,0,0,0.8) !important; height: 38px;} .btn.cancel{background:rgba(0,0,0,0.6); height: 38px; color: #fff;} .btn.intable{color: #fff; background:rgba(0,0,0,0.4) !important; min-width:80px; height: 38px;} .btn-primary {color: #fff; background-color: #337ab7; border-color: #2e6da4;} .clear:after {clear:both;content:'';display:block;} /* button */ .btnSet {position:relative; margin:20px 0; text-align:center; } .btnSet .main_btn{border-radius: 500px; border: 1px solid #0C0C0D; background: rgba(255, 255, 255, 0.90); box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.10); padding: 30px 70px 30px 60px; box-sizing: border-box; transition: 0.3s;} .btnSet .main_btn p{font-size: 1.6rem; font-weight: 400; letter-spacing: -0.48px; line-height: 1; font-family: 'NanumSquare'; position: relative; transition: 0.3s; transform: skew(-0.03deg); margin: 0; color: #0C0C0D;} .btnSet .main_btn p::after{content: ''; clear: both; display: block; width: 5px; height: 5px; background: #29D4C1; border-radius: 50%; position: absolute; top: 0; right: -10px; transition: 0.3s;} .btnSet .main_btn b{font-weight: 800; text-transform: uppercase; transition: 0.3s;} .btnSet .main_btn:hover{border: 1.5px solid #29D4C1; background: #0C0C0D; box-shadow: 0px 0px 24px 0px rgba(126, 227, 216, 0.40); padding: 30px 95px 30px 60px;} .btnSet .main_btn:hover p{color: #FFFFFF;} .btnSet .main_btn:hover p b{color: #29D4C1;} .btnSet .main_btn:hover p::after{content: ''; clear: both; background: url(/img/ico_arrow_mint.svg) no-repeat center center; background-size: 100% 100%; display: block; width: 15px; height: 15px; border-radius: 50%; position: absolute; top: 0; right: -30px;} /* ================================================== quick ================================================== */ /* .quick_btn2 {position: fixed; top: 120px; right: 50px; z-index: 999;} */ .quick_btn {position: fixed; bottom: 10px; right: 30px; z-index: 999;} .quick_btn.on{position: absolute; bottom: 1309px;} .quick_btn.active .contactBtn .circle{border: 1px solid #29D4C1 !important;} .quick_btn.active .contactBtn span{color: #0C0C0D !important;} .quick_btn .contactBtn, .quick_btn.contactBtn span, .quick_btn .contactBtn span:after {transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;} .quick_btn .contactBtn{width: 150px; height: 150px; transform: rotate(-45deg); background-color:#29D4C1; color:#fff; border-radius: 50%;} .quick_btn .contactBtn span {width: 100%; height: 100%; position: relative; text-align: center; margin: 0; padding: 0; box-sizing: border-box; transform: rotate(45deg); border-radius: 50%; font-size: 2.0rem; font-weight: 900; color: #0C0C0D; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;} @keyframes gatherAndSpread { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--circle-x), var(--circle-y)); } } .quick_btn .contactBtn .circle {position: absolute; top: 0; left: 0; transform: rotate(-45deg); border-radius: 50%; animation: gatherAndSpread 1s ease-in-out alternate infinite; } /* 각 원의 최종 위치를 커스텀 속성으로 설정 */ .quick_btn .contactBtn .circle._1 {--circle-x: 0; --circle-y: -0.5rem; border: 1px solid #0C0C0D;} .quick_btn .contactBtn .circle._2 {--circle-x: 0; --circle-y: 0; border: 1px solid #0C0C0D;} .quick_btn .contactBtn .circle._3 {--circle-x: 0; --circle-y: 0.5rem; border: 1px solid #0C0C0D;} .quick_btn .contactBtn .circle._4 {--circle-x: 0; --circle-y: 1rem; border: 1px solid #0C0C0D;} .quick_btn .contactBtn .circle._5 {--circle-x: 0; --circle-y: 1.5rem; border: 1px solid #0C0C0D;} .quick_btn .contactBtn span:first-child:after {display: none; content: ''; position: relative; vertical-align: middle; width: 0.8rem; height: 0.8rem; background: #29D4C1; border-radius: 50%; margin: -3.5rem 0 0 3.0px; padding: 0; box-sizing: border-box;} .quick_btn .contactBtn:hover {} .quick_btn .contactBtn:hover span {color:#0C0C0D; transform:rotate(0deg);} .quick_btn .contactBtn:hover span:first-child {background:rgba(41,212,193,1.0); /* background:rgba(255,255,255,0.95); */ border:1px solid rgba(41,212,193,1.0);} .quick_btn .contactBtn:hover span:first-child:after {background:#fff;} .quick_btn .contactBtn:hover .circle._1 {top:0rem; border:1px solid #29D4C1;} .quick_btn .contactBtn:hover .circle._2 {top:0rem; border:1px solid #29D4C1;} .quick_btn .contactBtn:hover .circle._3 {top:0rem; border:1px solid #29D4C1;} .quick_btn .contactBtn:hover .circle._4 {top:0rem; border:1px solid #29D4C1;} .quick_btn .contactBtn:hover .circle._5 {top:0rem; border:1px solid #29D4C1;} .quick_btn .contactBtn:hover .circle._6 {top:0rem; border:1px solid #29D4C1;} .top-btn{background: #0C0C0D; border: 1px solid #2E2E2F; border-radius: 500px; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.25); width: 40px; height: 40px;} /* animated */ .animate [class*='ani-']{opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0);} .fromFade:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(0, 0, 0); -webkit-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0,0,0);} .fromLeft:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(-50px, 0, 0); -webkit-transform:translate3d(-50px, 0, 0); -o-transform:translate3d(-50px, 0, 0); -ms-transform:translate3d(-50px, 0, 0); -moz-transform:translate3d(-50px,0,0);} .fromRight:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(50px, 0, 0); -webkit-transform:translate3d(50px, 0, 0); -o-transform:translate3d(50px, 0, 0); -ms-transform:translate3d(50px, 0, 0); -moz-transform:translate3d(50px, 0, 0); } .fromBottom:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(0, 100px, 0); -webkit-transform:translate3d(0, 100px, 0); -o-transform:translate3d(0, 100px, 0); -ms-transform:translate3d(0, 100px, 0); -moz-transform:translate3d(0, 100px, 0);} .fromTop:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(0, -100px, 0); -webkit-transform:translate3d(0, -100px, 0); -o-transform:translate3d(0, -100px, 0); -ms-transform:translate3d(0, -100px, 0); -moz-transform:translate3d(0, -100px, 0); } .fromCenter:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:scale(0.8) translate3d(0,0,0) ; -webkit-transform:scale(0.8) translate3d(0,0,0); -o-transform:scale(0.8) translate3d(0,0,0); -ms-transform:scale(0.8) translate3d(0,0,0); -moz-transform:scale(0.8) translate3d(0,0,0); } .animate [class*='ani-'] {transition-property:transform, opacity; -webkit-transition-property:transform, opacity; transition-duration:0.8s; -webkit-transition-duration:0.8s; -o-transition-duration:.8s; -moz-transition-duration:.8s; } .animate.fast [class*='ani-'] {transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:.3s; -moz-transition-duration:.3s;} .animate.slow [class*='ani-'] {transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -moz-transition-duration:1s; } .animate .ani-1 {transition-delay:10ms; -webkit-transition-delay:10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;} .animate .ani-2 {transition-delay:160ms; -webkit-transition-delay:160ms; -o-transition-delay:160ms; -moz-transition-delay:160ms;} .animate .ani-3 {transition-delay:320ms; -webkit-transition-delay:320ms; -o-transition-delay:320ms; -moz-transition-delay:320ms;} .animate .ani-4 {transition-delay:480ms; -webkit-transition-delay:480ms; -o-transition-delay:480ms; -moz-transition-delay:480ms;} .animate .ani-5 {transition-delay:640ms; -webkit-transition-delay:640ms; -o-transition-delay:640ms; -moz-transition-delay:640ms;} .animate .ani-6 {transition-delay:800ms; -webkit-transition-delay:800ms; -o-transition-delay:800ms; -moz-transition-delay:800ms;} .animate .ani-7 {transition-delay:960ms; -webkit-transition-delay:960ms; -o-transition-delay:960ms; -moz-transition-delay:960ms;} .aniamte .ani-8 {transition-delay:1120ms; -webkit-transition-delay:1120ms; -o-transition-delay:1120ms; -moz-transition-delay:1120ms;} .aniamte .ani-9 {transition-delay:1280ms; -webkit-transition-delay:1280ms; -o-transition-delay:1280ms; -moz-transition-delay:1280ms; } .animate .ani-10 {transition-delay:1440ms; -webkit-transition-delay:1440ms; -o-transition-delay:1440ms; -moz-transition-delay:1440ms; } .animate .ani-11 {transition-delay:1600ms; -webkit-transition-delay:1600ms; -o-transition-delay:1600ms; -moz-transition-delay:1600ms; } .fast.animate .ani-1 {transition-delay: 5ms;-webkit-transition-delay: 5ms; -o-transition-delay:5ms; -moz-transition-delay:5ms;} .fast.animate .ani-2 {transition-delay: 85ms;-webkit-transition-delay: 85ms; -o-transition-delay:85ms; -moz-transition-delay:85ms;} .fast.animate .ani-3 {transition-delay: 165ms;-webkit-transition-delay: 165ms; -o-transition-delay:165ms; -moz-transition-delay:165ms;} .fast.animate .ani-4 {transition-delay: 245ms;-webkit-transition-delay: 245ms;-o-transition-delay:245ms; -moz-transition-delay:245ms;} .fast.animate .ani-5 {transition-delay: 325ms;-webkit-transition-delay: 325ms;-o-transition-delay:325ms; -moz-transition-delay:325ms;} .fast.animate .ani-6 {transition-delay: 405ms;-webkit-transition-delay: 405ms;-o-transition-delay:405ms; -moz-transition-delay:405ms;} .fast.animate .ani-7 {transition-delay: 485ms;-webkit-transition-delay: 485ms;-o-transition-delay:485ms; -moz-transition-delay:485ms;} .fast.animate .ani-8 {transition-delay: 655ms;-webkit-transition-delay: 655ms;-o-transition-delay:655ms; -moz-transition-delay:655ms;} .fast.animate .ani-10 {transition-delay: 800ms;-webkit-transition-delay: 800ms;-o-transition-delay:800ms; -moz-transition-delay:800ms;} .slow.animate .ani-1 {transition-delay: 10ms; -webkit-transition-delay: 10ms;-o-transition-delay:10ms;-moz-transition-delay:10ms;} .slow.animate .ani-2 {transition-delay: 210ms;-webkit-transition-delay: 210ms;-o-transition-delay:210ms; -moz-transition-delay:210ms;} .slow.animate .ani-3 {transition-delay: 420ms;-webkit-transition-delay: 420ms;-o-transition-delay:420ms; -moz-transition-delay:420ms;} .slow.animate .ani-4 {transition-delay: 630ms;-webkit-transition-delay: 630ms;-o-transition-delay:630ms; -moz-transition-delay:630ms;} .slow.animate .ani-5 {transition-delay: 840ms;-webkit-transition-delay: 840ms;-o-transition-delay:840ms; -moz-transition-delay:840ms;} .slow.animate .ani-6 {transition-delay: 1050ms;-webkit-transition-delay: 1050ms;-o-transition-delay:1050ms; -moz-transition-delay:1050ms;} .slow.animate .ani-7 {transition-delay: 1260ms;-webkit-transition-delay: 1260ms;-o-transition-delay:1260ms; -moz-transition-delay:1260ms;} .slow.animate .ani-8 {transition-delay: 1470ms;-webkit-transition-delay: 1470ms;-o-transition-delay:1470ms; -moz-transition-delay:1470ms;} .slow.animate .ani-10 {transition-delay: 1700ms;-webkit-transition-delay: 1700ms;-o-transition-delay:1700ms; -moz-transition-delay:1700ms;} .scale [class*='sc-'] {transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); transition-property:transform; -webkit-transition-property:transform; -o-transition-property:transform; -moz-transition-property:transform; transition-duration:0.8s; -webkit-transition-duration:0.8s; -o-transition-duration:0.8s; -moz-transition-duration:0.8s; } .scale .fromSc9:not(.done) {transform:scale(0.9); -webkit-transform:scale(0.9); -o-transform:scale(0.9); -ms-transform:scale(0.9); -moz-transform:scale(0.9);} .scale .fromSc8:not(.done) {transform:scale(0.8); -webkit-transform:scale(0.8); -o-transform:scale(0.8); -ms-transform:scale(0.8); -moz-transform:scale(0.8);} .scale .fromSc7:not(.done) {transform:scale(0.7); -webkit-transform:scale(0.7); -o-transform:scale(0.7); -ms-transform:scale(0.7); -moz-transform:scale(0.7); } .scale .fromSc6:not(.done) {transform:scale(0.6); -webkit-transform:scale(0.6); -o-transform:scale(0.6); -ms-transform:scale(0.6); -moz-transform:scale(0.6); } .scale .fromSc5:not(.done) {transform:scale(0.5); -webkit-transform:scale(0.5); -o-transform:scale(0.5); -ms-transform:scale(0.5); -moz-transform:scale(0.5); } .scale .fromSc11:not(.done) {transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1);} .scale .fromSc12:not(.done) {transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); -moz-transform:scale(1.2); } .scale .fromSc13:not(.done) {transform:scale(1.3); -webkit-transform:scale(1.3); -o-transform:scale(1.3); -ms-transform:scale(1.3); -moz-transform:scale(1.3); } .scale .fromSc14:not(.done) {transform:scale(1.4); -webkit-transform:scale(1.4); -o-transform:scale(1.4); -ms-transform:scale(1.4); -moz-transform:scale(1.4);} .scale .fromSc15:not(.done) {transform:scale(1.5); -webkit-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); -moz-transform:scale(1.5); } .scale .sc-1 {transition-delay:10ms; -webkit-transition-delay:10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;} .scale .sc-2 {transition-delay:160ms; -webkit-transition-delay:160ms; -o-transition-delay:160ms; -moz-transition-delay:160ms;} .scale .sc-3 {transition-delay:320ms; -webkit-transition-delay:320ms; -o-transition-delay:320ms; -moz-transition-delay:320ms;} .scale .sc-4 {transition-delay:480ms; -webkit-transition-delay:480ms; -o-transition-delay:480ms; -moz-transition-delay:480ms;} .scale .sc-5 {transition-delay:640ms; -webkit-transition-delay:640ms; -o-transition-delay:640ms; -moz-transition-delay:640ms;} .scale .sc-6 {transition-delay:800ms; -webkit-transition-delay:800ms; -o-transition-delay:800ms; -moz-transition-delay:800ms;} .scale .sc-7 {transition-delay:960ms; -webkit-transition-delay:960ms; -o-transition-delay:960ms; -moz-transition-delay:960ms;} .scale .sc-8 {transition-delay:1120ms; -webkit-transition-delay:1120ms; -o-transition-delay:1120ms; -moz-transition-delay:1120ms;} .fast.scale .sc-1 {transition-delay: 10ms;-webkit-transition-delay: 10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;} .fast.scale .sc-2 {transition-delay: 140ms;-webkit-transition-delay: 140ms; -o-transition-delay:140ms; -moz-transition-delay:140ms;} .fast.scale .sc-3 {transition-delay: 270ms;-webkit-transition-delay: 270ms; -o-transition-delay:270ms; -moz-transition-delay:270ms;} .fast.scale .sc-4 {transition-delay: 400ms;-webkit-transition-delay: 400ms;-o-transition-delay:400ms; -moz-transition-delay:400ms;} .fast.scale .sc-5 {transition-delay: 530ms;-webkit-transition-delay: 530ms;-o-transition-delay:530ms; -moz-transition-delay:530ms;} .fast.scale .sc-6 {transition-delay: 660ms;-webkit-transition-delay: 660ms;-o-transition-delay:660ms; -moz-transition-delay:660ms;} .fast.scale .sc-7 {transition-delay: 790ms;-webkit-transition-delay: 790ms;-o-transition-delay:790ms; -moz-transition-delay:790ms;} .fast.scale .sc-8 {transition-delay: 920ms;-webkit-transition-delay: 920ms;-o-transition-delay:920ms; -moz-transition-delay:920ms;} .slow.scale .sc-1 {transition-delay: 10ms; -webkit-transition-delay: 10ms;-o-transition-delay:10ms;-moz-transition-delay:10ms;} .slow.scale .sc-2 {transition-delay: 210ms;-webkit-transition-delay: 210ms;-o-transition-delay:210ms; -moz-transition-delay:210ms;} .slow.scale .sc-3 {transition-delay: 420ms;-webkit-transition-delay: 420ms;-o-transition-delay:420ms; -moz-transition-delay:420ms;} .slow.scale .sc-4 {transition-delay: 630ms;-webkit-transition-delay: 630ms;-o-transition-delay:630ms; -moz-transition-delay:630ms;} .slow.scale .sc-5 {transition-delay: 840ms;-webkit-transition-delay: 840ms;-o-transition-delay:840ms; -moz-transition-delay:840ms;} .slow.scale .sc-6 {transition-delay: 1050ms;-webkit-transition-delay: 1050ms;-o-transition-delay:1050ms; -moz-transition-delay:1050ms;} .slow.scale .sc-7 {transition-delay: 1260ms;-webkit-transition-delay: 1260ms;-o-transition-delay:1260ms; -moz-transition-delay:1260ms;} .slow.scale .sc-8 {transition-delay: 1470ms;-webkit-transition-delay: 1470ms;-o-transition-delay:1470ms; -moz-transition-delay:1470ms;} .vertical-i {animation:vb 1s infinite;} @keyframes vb { 0%{ bottom: 0; } 50% { bottom:10px; } 100% { bottom:0px; } } @keyframes vt{ 0%{ top: 0; } 50%{ top:10px; } 100%{ top:0; } } /* 250421 */ .p-relative{position: relative;} .text-default{color: #0C0C0D;} .text-white{color: #fff;} .text-mlogo{color: #2E2E2F;} .text-nomal{color: #999;} .text-gray{color: #666;} .text-gray2{color: #D6DDE6;} .text-lgray{color: #8B8B8B;} .fs350{font-size: 35rem; line-height: 420px; letter-spacing: 17.5px;} .fs200{font-size: 20rem; line-height: 221px;} .fs110{font-size: 11rem; line-height: 132px; letter-spacing: -3.3px;} .fs50{font-size: 5.0rem; line-height: 65px; letter-spacing: -1.5px;} .fs40{font-size: 4.0rem; line-height: 48px; letter-spacing: -0.4px;} .fs30{font-size: 3.0rem; line-height: 40px; letter-spacing: -0.3px;} .fs28{font-size: 2.8rem; line-height: 50px; letter-spacing: -0.84px;} .fs24{font-size:2.4rem; line-height: 43px; letter-spacing: -0.72px;} .fs22{font-size:2.2rem; line-height: 26px; letter-spacing: 1.1px;} .fs20{font-size: 2.0rem; line-height: 24px; letter-spacing: -0.6px;} .fs18{font-size:1.8rem; letter-spacing: -0.54px;} .fs16{font-size: 1.6rem; line-height: 22px;} .fs14{font-size: 1.4rem; line-height: 17px;} .fw100 {font-weight:100 !important;} .fw200 {font-weight:200 !important;} .fw300 {font-weight:300 !important;} .fw400 {font-weight:400 !important;} .fw500 {font-weight:500 !important;} .fw600 {font-weight:600 !important;} .fw700 {font-weight:700 !important;} .fw800 {font-weight:800 !important;} .fw900 {font-weight:900 !important;} @charset "utf-8"; /* CSS Document */ @media (pointer: coarse) { html, body { overflow-x: hidden; position: relative; height: auto; -webkit-overflow-scrolling: touch; } .has-smooth-scroll { overflow: auto !important; height: auto !important; } .horizontal-scroll.has-horizontal-scroll { overflow: auto; -webkit-overflow-scrolling: touch; } .auto-scroll-next__button-hover, .auto-scroll-next_scrolling .auto-scroll-next__button-hover { display: none; } } @media screen and (max-width: 2400px){ /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2{font-size: 8rem;} .subtit {font-size: 2.6rem; line-height:35px;} } @media screen and (max-width: 1920px){ .quick_btn.on {bottom: 949px;} /* ================================================== | 메인 */ .subtit{font-size: 2.4rem; line-height: 30px;} .br1920{display: block;} .section.mobilewebapp .section-body, main .section.design .section-body{max-width: 1480px;} .section.mobilewebapp .text li a{font-size:5rem;} .section.mobilewebapp .text.gap-50{gap:40px;} .section.mobilewebapp .swiper{max-width: 300px; height: 550px;} .section.mobilewebapp .swiper .swiper-slide a {padding: 12.7px 15px;} /* ================================================== | 서브 */ #sub.about .section3 .canvas-wrapper{transform: scale(1.3);} #sub.about .section3 .canvas-wrapper canvas{top: -25%; left: 22vw; position: absolute;} #sub.contact ~ .footer{height: fit-content;} #sub.contact ~ .footer .footer-body .footer-inner > div.max1440.mt-100{margin-top: 60px !important} #sub.contact ~ .footer .footer-body .footer-inner .map-area iframe{height: 500px;} #sub.contact ~ .footer .footerWrap{padding-top: 60px;} } @media screen and (max-width: 1850px){ /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:7rem; line-height:80px;} .homepage .subtit .block1850 {display:block;} /* ================================================== | 서브 */ #sub.contact .visual-wrap {padding:83px 100px;} } @media screen and (max-width: 1780px) { #sub.about .section3 .canvas-wrapper canvas {right: -54%; left: unset;} } @media screen and (max-width: 1700px){ /* ================================================== | 메인 */ .section_rolling .text1 li {font-size:18rem;} .section_rolling .text2 li {font-size:22rem;} .section_rolling .text2 li b::after {width:135px;} } @media screen and (max-width: 1600px){ /* ================================================== | 메인 */ .has-horizontal-scroll .hs-col-lg-4 {width:40% !important;} /* .contactUsWrap.con {padding-bottom:unset; height:850px;} */ .con ._t.tit.sub {font-size:7rem; line-height:80px;} /* ================================================== | 서브 */ #sub.hiring .visual-wrap, #sub.contact .visual-wrap {padding:70px;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area {width: 50%;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {white-space: nowrap;} /* #sub.hiring .tag-area {left:30px; flex-grow:1; max-width: 50%; min-height:430px;} */ #sub.contact .tag-area {flex-grow:1; max-width: 50%; min-height:423px;} /* #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(2), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:200px; max-width:200px;} #sub.hiring .tag-area li:nth-child(1) {left:unset; right:370px;} #sub.hiring .tag-area li:nth-child(1)::after {right:-114px;} #sub.hiring .tag-area li:nth-child(2) {text-indent:-23px;} #sub.hiring .tag-area li:nth-child(2)::after {right:16px;} #sub.hiring .tag-area li:nth-child(3) {left:unset; right:270px;} #sub.hiring .tag-area li:nth-child(5) {left:unset; right:330px;} #sub.hiring .tag-area li:nth-child(7) {left:unset; right:300px;} #sub.hiring .tag-area li:nth-child(7)::after {background-size:40px;} #sub.contact .tag-area li:nth-child(1) { max-width: 150px; min-width: 150px; right: 370px;} #sub.contact .tag-area li:nth-child(2) { max-width: 170px; min-width: 170px; left: unset; right: 330px;} #sub.contact .tag-area li:nth-child(3) { max-width: 190px; min-width: 190px;} #sub.contact .tag-area li:nth-child(4) { max-width: 120px; min-width: 120px; left: unset; right: 240px;} #sub.contact .tag-area li:nth-child(5) { max-width: 230px; min-width: 230px;} #sub.contact .tag-area li:nth-child(6) { max-width: 170px; min-width: 170px; right: 320px;} #sub.contact .tag-area li:nth-child(7) { max-width: 200px; min-width: 200px; right: 60px;} #sub.contact .tag-area li:nth-child(8) { max-width: 240px; min-width: 240px; left: unset; right: 220px;} */ #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:100px 70px;} #sub.hiring .tag-area li:nth-child(2) {min-width: 220px !important;} #sub.hiring .tag-area li:nth-child(2)::after{right: 27px;} #sub.hiring .tag-area li:nth-child(7)::after {top: -39px; right: -17px;} } @media screen and (max-width: 1500px){ /* ================================================== | 메인 */ main .main_visual .pc-img {display:none;} main .main_visual .ta-img {display:block;} .transition-container2 {margin-top:-140px;} .section_rolling .transition-container > ul li {line-height:170px;} .section_rolling .text1 li {font-size:14rem;} .section_rolling .text2 li {font-size:17rem;} .section_rolling .text2 li b::after {width:110px;} .realItrcCont .realItrcCon .h3 {font-size: 5.4rem;} /* ================================================== | 서브 */ #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left:30px;} #sub.hiring .process li .txt {padding: 0 50px 0 0; word-break: keep-all; word-wrap: break-word;} #sub.hiring .process li .txt br {display:none;} .popup .popup-inner .left-cont {padding:80px;} #policy1.popup .popup-inner .right-cont {padding:90px 80px 80px 80px;} #policy1.popup .popup-inner .left-cont p {margin-bottom:0;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding:104px 30px 84px 45px !important;} #sub.business .work-wrap::after {width:calc(100% - 90px); left:45px; top:calc(50% - 16px);} #sub.business .work-wrap > li .circle h5 {margin-top:20px !important; } .tag-area li {max-width: unset !important; min-width: unset !important; padding: 0 40px; min-height: 70px !important; font-size: 2.0rem; box-sizing: border-box;} #sub.contact .tag-area li:nth-child(4) {left: 148px;} #sub.about .section3 .canvas-wrapper canvas {right: -56%; left: unset;} #sub.portfolio.view-new .styleguide-list .color-list{gap: 20px;} #sub.portfolio.view-new .styleguide-list .color-list li {padding: 25px;} } @media screen and (max-width: 1360px){ /* ================================================== | 헤더 */ .header:not(.opened) .header__burger:hover .header__label-burger_closed-hover, .header.opened .header__burger:hover .header__label-burger_opened-hover {opacity:0; transform:translateY(100%);} .menu-overlay__heading, .menu-overlay > li > a {font-size:8rem;} .header__col-widgets-box {height:540px;} /* .logo__wrapper-img img{width: 150px;} */ .header__burger{min-width: unset;} .menu-classic > li a {padding:0 20px;} .con ._t.tit.sub {font-size:6rem; line-height:70px;} /* ================================================== | 서브 */ .square-flip {min-height:500px;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.8rem} #sub.business .work-wrap::after {top:calc(50% - 7px);} #sub.business .tips-wrap li p {font-size:2.5rem;} #sub.business .tips-wrap li p strong {font-size:9rem;} #sub.portfolio.view-new .section7 .content-list .txtbox{padding: 30px; padding-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .ri .imgbox {margin-left: 26px;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox {margin-right: 30px;} } @media screen and (max-width: 1280px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:9rem;} .main_visual p {font-size:2.3rem; line-height:30px;} .section_rolling .text1 li {font-size:12rem;} .section_rolling .text2 li {font-size:15rem;} .section_rolling .text2 li b::after {width:90px;} #next-section .horizontal-scroll__header {padding-right:20px; padding-left:40px;} .section.design{margin-top: 100px !important;} .section.mobilewebapp .infinite-list__heading-item h2.h3, .landing .pricing-table__header h3 {font-size:3.6rem;} .section-portfolio-grid__col-grid .js-grid__item{margin-top: 30px;} .footer .con ._ts {min-height:117px;} .typing-txt {font-size: 8rem;} .typed-cursor {height:100px; } .section.mobilewebapp .text.gap-50{width: 50% !important; gap: 30px;} .section.mobilewebapp .text li a {font-size: 4rem;} .section.mobilewebapp .mockup-wrapper.gap-50{gap: 30px;} /* ================================================== | 서브 */ .tit-area .tit-box h3 {font-size:4.5rem; line-height:55px;} .tit-area .tit-box h3 b {font-size:5rem; line-height:65px;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap {padding: 50px;} #sub.hiring .tit-area .tit-box h5, #sub.contact .tit-area .tit-box h5 {font-size:2rem; margin-top:30px !important;} .tag-area li {min-height:70px; font-size:1.8rem;} #sub.hiring .tag-area li:nth-child(2){top: 50px;} #sub.hiring .tag-area li:nth-child(3){top: 108px;} #sub.hiring .tag-area li:nth-child(6) {right: 134px;} /* #sub.hiring .tag-area {left:unset;} #sub.hiring .tag-area li:nth-child(1) {right:320px; top:50px;} #sub.hiring .tag-area li:nth-child(1)::after {background-size:400px;} #sub.hiring .tag-area li:nth-child(2) {right:61px; top:133px;} #sub.hiring .tag-area li:nth-child(2)::after {top:11px;} #sub.hiring .tag-area li:nth-child(3) {right:220px; top:158px;} #sub.hiring .tag-area li:nth-child(4) {right:0; bottom:140px;} #sub.hiring .tag-area li:nth-child(5) {right:280px; bottom:120px;} #sub.hiring .tag-area li:nth-child(6) {right:49px; bottom:80px;} #sub.hiring .tag-area li:nth-child(7) {right:250px; bottom:40px;} */ #sub.hiring .process {display: block; overflow-x: scroll;} #sub.hiring .process li .circle {max-width:280px; max-height: 280px; padding:101px 86px} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {max-width:250px; max-height: 250px; } #sub.hiring .process li {max-width:280px;} #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left:-30px;} #sub.hiring .process::after {width: calc(100% - 147px); top:28%;} #sub.hiring .process li .txt {padding: 0 20px 0 0; margin-top:30px !important; margin-left:20px;} /* #sub.contact .tag-area li:nth-child(1) {right:270px;} #sub.contact .tag-area li:nth-child(2) {right:220px; top:66px;} #sub.contact .tag-area li:nth-child(2)::after {width:35px;} #sub.contact .tag-area li:nth-child(3) {right:50px; top:80px;} #sub.contact .tag-area li:nth-child(4) {top:150px;} #sub.contact .tag-area li:nth-child(5) {min-height:73px; top:170px;} #sub.contact .tag-area li:nth-child(6) {top:240px; right:220px;} #sub.contact .tag-area li:nth-child(8) {max-width: 200px; min-width: 200px; right: 150px;} #sub.contact .tag-area li:nth-child(8)::before {width:20px; left:-28px;} #sub.contact .tag-area li:nth-child(8)::after {width:30px; bottom:1px;} */ #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:80px 40px;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {margin-top:50px;} #sub.business .work-wrap > li .circle h5 {font-size:1.8rem;} #sub.business .work-wrap > li .circle h5 b {font-size:2.4rem;} #sub.business .work-wrap::after {top:calc(50% - 3px);} /* #sub.business .square-flip, #sub.business.design .square-flip, #sub.business.marketing .square-flip, #sub.business.maintenance .square-flip {width:calc(50% - 22px); min-height: 450px;} */ #sub.business.maintenance .tbl-wrap{overflow-y: scroll; padding: 0 5px 10px;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table thead tr th{padding: 10px;} #sub.business .big-circle-wrap .big-circle {width:350px; height:350px;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width:500px; height:500px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width:700px; height:700px;} #sub.hiring .section2 .cont-wrap{overflow-x: scroll; overflow-y: visible;} #sub.hiring .process {min-width: 1280px;} #sub.business .square-flip{min-height: 400px;} #sub.business .centerflipcards{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; width: 100%; margin-left: 0;} #sub.business.design .centerflipcards, #sub.business.marketing .centerflipcards, #sub.business.maintenance .centerflipcards, #sub.business.ai .centerflipcards{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; width: 100%; margin-left: 0;} #sub.business .centerflipcards .square-flip .square-container{padding: 0 20px;} #sub.business .centerflipcards > *{width: 100% !important;} #sub.business .centerflipcards .square-flip{margin-left: 0;} #sub.business .centerflipcards .square-flip .img-wrap{ height: 50%;} #sub.business .centerflipcards .square-flip .img-wrap img{height: 100%;} #sub.business .centerflipcards .square-flip .img-wrap svg{width: 100%; height: 100%;} #sub.business .centerflipcards1 .square-flip .txt-wrap b{font-size: 2.5rem;} #sub.business .square-container2{padding: 0 20px;} #sub.business .centerflipcards .square-flip .img-wrap{width: 100%;} .svg-animation-container, .svg-animation-container3, .svg-animation-container4{width: 100% !important; height: 100% !important;} .square-flip .txt-wrap em {font-size: 1.4rem;} .square-flip .txt-wrap p {font-size: 1.3rem; line-height: 24px;} .sub .portfolio .infinite-list__marquee-row{margin-top: -30px; margin-left: -30px;} #sub.about .section2 .cont-area ul li p b{font-size: 12rem;} #sub.about .section2 .section-column, #sub.about .section_history .section-column1{max-width: 445px;} #sub.about .section2 .section-column + .section-column, #sub.about .section_history .section-column + .section-column{width: calc(100% - 445px);} #sub.about .section3 .section-column.mt-50{margin-top: 100px !important;} #sub.about .section3 .txt-wrap > li > ul > li{padding: 30.5px 57px; height: fit-content;} #sub.about .section3 .txt-wrap > li > ul.gap-30{gap: 20px !important;} #sub.about .section3 .round{top: 35px;} #sub.about .section4 .work_wrap {padding-top: 165px;} #sub.about .section6 .withus_list{grid-template-columns: repeat(6, 1fr);} #sub.about .section_history .img-area .img-box {width: 70%;} #sub.about .section_history #fix-year {max-width: 107%;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 7rem;} #sub.about .section_history .position_list .history_list {font-size: 1.4rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.6rem;} #sub.about .section_history .history_list > li + li {margin-top: 20px;} #sub.about .section_history .position_list + .position_list {margin-top: 80px;} #sub.about .section_history.pin-going .last_position_list.on {margin-top: 160px !important;} /* #sub.about .section_history .last_position_list {margin-top: 100px !important;} */ #sub.about .section_history .last_position_list {margin-top:120px !important;} #sub.about .section_history .last_position_list.on {margin-top: 70px !important;} #sub.about .section_history .history_year {padding-left: 90px;} #sub.about .section_history .section-column2 {margin-left: auto; } #sub.about .section_history .position_list {margin-left: -90px;} #sub.about .section_history .cont-area .last_position_list > li:nth-child(2) {margin-top: -140px;} .fs200{font-size: 18rem;} .fs110 {font-size: 9rem; line-height: 106px; letter-spacing: -2.3px;} .fs40 {font-size: 3.5rem; line-height: 40px; letter-spacing: -0.6px;} .fs28 {font-size: 2.5rem; line-height: 45px;} .fs24 {font-size: 2.0rem; line-height: 36px; letter-spacing: -0.72px;} #sub.portfolio.view-new .section1 .txt-box {padding: 100px 0;} #sub.portfolio.view-new .txt-box.gap-100{gap: 70px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 150px 0;} #sub.portfolio.view-new .styleguide-list .color-list{gap: 15px; flex-wrap: wrap;} #sub.portfolio.view-new .styleguide-list .color-list li {min-height: 350px; border-radius: 130px;} #sub.portfolio.view-new .mt-160 {margin-top: 100px !important;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 230px;} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40{gap: 25px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 29px 24.22px;} #sub.portfolio.view-new .section4 .section-column {max-width: 470px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60{gap: 40px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 340px; margin-bottom: 40px;}#sub.portfolio.view-new .section7 .content-list .list {gap: 38px;} #sub.portfolio.view-new .section9 {padding: 146px 0 166px;} .br1280{display: block;} #sub.portfolio.view-new .section7 .content-list .txtbox span {line-height: 22px; margin-top: 6px;} } @media screen and (max-width: 1210px){ /* ================================================== | 서브 */ #sub.hiring .agency li h4 .block1210 {display:block;} #sub.hiring .agency li:not(:last-of-type) span {margin-top:106px;} #sub.hiring .agency li:first-of-type span br:first-of-type {display:none;} #sub.business .work-wrap::after {top:calc(50% - 9px);} #sub.business .work-wrap > li .circle .detail-con {left:20px; width:calc(100% - 20px); top: calc(100% + 12px);} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding:90px 30px 84px 45px !important;} #sub.contact .tag-area{transform: scale(0.9); transform-origin: right; max-width: 55%;} .tit-area .tit-box h3 {font-size: 4.3rem;} .tit-area .tit-box h3 b{font-size: 4.8rem;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area{width: 45%;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 7rem; line-height: 120%;} #mVisual .tit-box p{font-size: 2.4rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:50px; } #mVisual .cate-box p{font-size: 1.6rem;} .contact-tit-area{flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important;} .contact-tit-area .tel-box{margin-top:20px; padding-left:65px;} .contact-tit-area .tel-box:before{width:60px; height:60px; top:-8px;} } @media screen and (max-width: 1195px){ #sub.about .section_history .last_position_list {margin-top: 80px !important;} #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} /* #sub.about .section_history .last_position_list.on {margin-top: 28px !important;} */ } @media screen and (max-width: 1150px){ /* ================================================== | 헤더 */ .menu-classic > li a {padding:0 15px; font-size:1.6rem;} /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:5.9rem; line-height:70px;} .con ._t.tit.sub {font-size:5rem; line-height:60px;} /* ================================================== | 서브 */ #sub.hiring .process li .txt {padding: 0 40px 0 0; margin-left:40px;} #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left: 0} #sub.hiring .process li .circle{padding: 101px 55px;} #sub.portfolio.view-new .section8 .txt-box em > br{display: none;} } @media screen and (max-width: 1120px){ /* ================================================== | 서브 */ .square-flip {min-height:550px;} #sub.contact ~ .footer .footer-body .footer-inner .txt-area {display:block;} #sub.contact ~ .footer .footer-body .footer-inner .right {margin-top:50px;} #sub.business .visual-wrap.bg_b h5 br:nth-of-type(2), #sub.business .visual-wrap.bg_b h5 b br {display:none;} #sub.business .work-wrap > li .circle h5 {margin-top: 10px !important;} } @media screen and (max-width: 1100px){ /* ================================================== | 메인 */ .section.mobilewebapp .swiper {max-width: 250px; height: 500px;} .section.mobilewebapp .text li a {font-size: 3.5rem;} /* ================================================== | 서브 */ #sub.business .work-wrap::after {top:calc(50% - 5px);} #sub.business .work-wrap > li .circle h5 b {font-size:2.2rem !important;} #sub.business .work-wrap li .circle .detail-con li {line-height:19px;} #sub.business .work-wrap li .circle .detail-con li + li {margin-top:3px;} #sub.business .section2 .section-body{padding: 0 0 0 20px;} #sub.about .section5 .organization_wrap .cont-wrap{margin-left: 0;} .pcsvg{display: none;} .mosvg{display: block; margin: 0 auto;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap{flex-direction: column;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area{width: 100%; text-align: center;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3{font-size: 4rem; white-space: unset;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 4.5rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 > br, #sub.contact .visual-wrap .tit-area .tit-box h3 > br{display: none;} #sub.contact .tag-area, #sub.hiring .tag-area{ transform: unset; max-width: 100%; margin-top: 50px;display: flex; min-height: 100%; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; padding-bottom: 20%;} .tag-area li{position: relative !important; top: unset !important; left: unset !important; right: unset !important; bottom: unset !important;} #sub.hiring .tag-area li:nth-child(1)::after, #sub.hiring .tag-area li:nth-child(7)::before, #sub.hiring .tag-area li:nth-child(7)::after{transform: scale(0.7);} #sub.hiring .tag-area li:nth-child(2) {min-width: 177px !important; text-indent: -26px;} #sub.business .square-flip {min-height: 400px;} #sub.business .centerflipcards .square-flip .img-wrap {height: 40%;} #sub.business .centerflipcards .square-flip .square .txt-wrap b{font-size: 2.3rem;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 15rem; line-height: 160px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 3.0rem;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: -162px;} #sub.business .tab-area{justify-content: flex-start !important;} } @media screen and (max-width: 1099px){ #sub.about .section_history .last_position_list.on {margin-top: 29px !important;} } @media screen and (max-width: 1071px){ #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} } @media screen and (max-width: 1052px){ #sub.about .section_history .last_position_list.on {margin-top: -12px !important;} } @media screen and (max-width: 1025px){ #sub.about .section_history .last_position_list.on {margin-top: -33px !important;} } @media screen and (max-width: 1024px){ /* ================================================== | 헤더 */ .header {padding:0 20px;} .header__burger.header__burger_opened {margin:30px 0 0 0;} /* ================================================== | 메인 */ main .main_visual.section {margin:0 20px;} main .main_visual {width:calc(100% - 40px);} main .section {margin:100px auto 0;} .section_rolling .height-container {min-height:220px;} .section_rolling {padding:0 20px;} .section_rolling .text1 li {font-size:10rem;} .section_rolling .text2 li {font-size:13rem;} .section_rolling .text2 li b::after {width:70px; height:30px; bottom:3px} .transition-container2 {margin-top:-70px;} .section_rolling .transition-container > ul li {line-height:130px;} .shopping.section .section-row > *:first-child{width: 45% !important;} .shopping.section .section-row > *:last-child{width: 55% !important;} .section.shopping h3 {font-size: 3rem;} .homepage .pt-header-height {padding-top:0px;} #next-section .horizontal-scroll__header {padding-top:0;} .section.design .infinite-list__images {padding:0 20px;} #sub.portfolio.view-new .tit-area .tit-box h1{font-size: 10rem; line-height: 110px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 2.5rem; line-height: 31px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 120px 0;} .footerWrap .footer {padding: 50px 20px;} .footerWrap .footer .area p span:last-child {display:block;} .footerWrap .footer .area p span:nth-of-type(2):after {display:none;} .footer .con ._ts {min-height:104px;} .typing-txt {font-size:8rem;} .typed-cursor {height:90px; } /* ================================================== | 서브 */ #sub.about .section1 .video_wrap{width: 500px; height: calc(100vh - 160px);} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em {font-size:2.2rem; line-height:30px; word-break: keep-all; word-wrap: break-word;} .tit-area .tit-box h1 {font-size:8rem; letter-spacing:4px; line-height: 55px;} .section .section-row .section-column.mt-100 {margin-top:60px !important;} .tit-area .tit-box h3 {font-size:3.5rem; line-height:45px;} .tit-area .tit-box h3 b { font-size: 4rem; line-height: 50px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.8rem;} #sub.hiring .section{padding-top: 100px;} #sub.hiring .section4.mt-200{margin-top: 100px !important; padding-top: 30px;} #sub.hiring .tag-area, #sub.contact .tag-area {min-height:280px;} #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(2), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:150px; max-width:150px;} .tag-area li {min-height:60px;} .tag-area li.mini {min-height:50px;} .tag-area li,.tag-area li.mini {font-size:1.6rem;} /* #sub.hiring .tag-area li:nth-child(1) {right:200px; top:20px;} #sub.hiring .tag-area li:nth-child(1)::after {bottom: -102px; background-size: 300px; right:-145px} #sub.hiring .tag-area li:nth-child(2) { right: 30px; top: 80px;} #sub.hiring .tag-area li:nth-child(2)::after {right: 12px; width: 20px; height: 30px;} #sub.hiring .tag-area li:nth-child(3) {right: 160px; top: 90px;} #sub.hiring .tag-area li:nth-child(4) {right: 0; bottom: 70px; gap: 10px !important;} #sub.hiring .tag-area li:nth-child(4) img {width:25px;} #sub.hiring .tag-area li:nth-child(5) { right: 210px; bottom: 65px;} #sub.hiring .tag-area li:nth-child(6) { right: 49px; bottom: 30px;} #sub.hiring .tag-area li:nth-child(7) { right: 200px; bottom: 0;} #sub.hiring .tag-area li:nth-child(7)::before {width:30px; height:40px; bottom:-8px; left:-6px;} #sub.hiring .tag-area li:nth-child(7)::after {background-size:100% 100%; width:30px; height:30px; top:-14px; right:14px;} #sub.contact .tag-area li:nth-child(1) {min-width:130px; max-width:130px; right: 220px; top: 0;} #sub.contact .tag-area li:nth-child(2) {min-width:120px; max-width:120px; right: 180px; top: 40px;} #sub.contact .tag-area li:nth-child(3) {min-width:120px; max-width:120px; top: 50px;} #sub.contact .tag-area li:nth-child(4) {min-width:100px; max-width:100px; top: 120px; right: 180px;} #sub.contact .tag-area li:nth-child(5) {min-height:60px; min-width:190px; max-width:190px; top: 130px;} #sub.contact .tag-area li:nth-child(5) img {width:20px;} #sub.contact .tag-area li:nth-child(6) {min-width:110px; max-width:110px; top:155px; right: 220px;} #sub.contact .tag-area li:nth-child(7) {min-width:130px; max-width:130px; bottom: unset; top: 210px;} #sub.contact .tag-area li:nth-child(8) {min-width:160px; max-width:160px; right: 180px;} */ #sub.hiring .process li .txt {margin-left:50px;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.6rem;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.8rem;} #sub.business .work-wrap::after {top:calc(50% + 2px);} #sub.business .section{padding-top: 100px;} #sub.business .section3{padding-bottom: 100px;} #sub.business .tips-wrap li p {font-size:2rem;} #sub.business .tips-wrap li p strong {font-size:7rem; line-height:46px;} #sub.hiring .agency li:first-of-type span br:last-of-type {display:none;} .popup .popup-inner .left-cont {padding:40px;} #policy1.popup .popup-inner .right-cont {padding:90px 40px 40px 40px;} .popup .popup-title h4 {font-size:2.3rem;} .popup .popup-title h2 {font-size:4.7rem} .sub{padding-top: 60px; margin-top: 70px;} #sub.story .section {padding-bottom: 120px;} #sub.story .section ul.list li a{padding: 50px 0;} #sub.story .section ul.list li a .title, #sub.story_view .section .title{font-size: 3.5rem;} #sub.story_view {padding-bottom: 143px;} #sub.story_view .section .cont{padding: 60px 0; margin-top: 60px;} .sub .portfolio.mt-150{margin-top: 100px !important;} .tab-area.gap-15{gap: 10px;} #sub.about .section2 .cont-area ul li p b{font-size: 10rem;} #sub.about .section2 .section-column{max-width: 360px;} #sub.about .section2 .section-column + .section-column{width: calc(100% - 360px);} #sub.about .section2 .cont-area ul li:nth-child(2) {margin-left: -40px;} #sub.about .section.bg_b .tit-box b{font-size: 7.0rem;} #sub.about .section.bg_b .tit-box b + b{margin-top: 20px;} #sub.about #sub.about .marquee{padding: 29px 0;} #sub.about #sub.about .marquee_text {font-size: 3.5rem; line-height: 1;} #sub.about .section3 .txt-wrap > li > ul > li{font-size: 2.0rem;} @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -79px; margin-top: -47px; } } #sub.about .section4 .work_wrap .work_list li{padding: 50px;} #sub.about .section4 .work_wrap .work_list li p{margin-top: 50px;} #sub.about .section6 .section-body .section-inner{padding: 150px 0;} #sub.about .section5 {padding-bottom: 150px;} #sub.about .section_history .tit-area .tit-box h3 {font-size: 3.5rem; line-height: 45px;} #sub.about .section_history .tit-area .tit-box h3 b {font-size: 4rem; line-height: 50px;} #sub.about .section_history .img-area .img-box {width: 63%;} #sub.about .section_history #fix-year {max-width: 91%;} #sub.about .section_history .position_list {margin-left: -180px;} #sub.about .section_history .history_year {padding-left: 109px;} #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} #sub.portfolio.view-new .dateList.mt-80{margin-top: 60px !important;} #sub.portfolio.view-new .mt-50{margin-top: 40px !important;} .typography-list{flex-direction: column;} #sub.portfolio.view-new .section4 .section-column {max-width: 440px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60, #sub.portfolio.view-new .section4 .section-row {gap: 25px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 290px; margin-bottom: 25px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv .txt-box{padding: 20px;} #sub.portfolio.view-new .section5 .img img{width: 200px; height: 116px;} #sub.portfolio.view-new .section5{padding: 100px 0;} .fs50 {font-size: 4rem; line-height: 53px;} #sub.portfolio.view-new .pro_fea li .txt em br, #sub.portfolio.view-new .section7 .txt-box em > br{display: none;} .pc-1024{display: none !important;} .mo-1024{display: flex !important;} #sub.portfolio.view-new .section10 .view-navi {padding: 100px 0 0 0;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: 80px;} #sub.portfolio.view-new .section9 .artlist{align-items: start !important; -webkit-box-align: start; -moz-align-items: start; -ms-flex-align: start; justify-content: center !important; -webkit-box-pack: center !important; -moz-justify-content: inherit; -ms-flex-pack: inherit;} #sub.portfolio.view-new .section9 .artlist li{width: 50%;} #sub.portfolio.view-new .section9 .artlist li + li{margin-top: 80px;} #sub.portfolio.view-new .section9 .artlist li + li .art-img + .art-img{margin-top: 50px;} #sub.portfolio.view-new .section9 .artlist > li:first-child .art-img + .art-img{width: 114%;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 6rem; line-height: 120%;} #mVisual .tit-box p{font-size: 2rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:50px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.4rem;} #mVisual .cate-box-wrap{gap:10px;} } @media screen and (max-width: 1009px){ #sub.about .section_history .last_position_list.on {margin-top: 30px !important;} } @media screen and (max-width: 991px){ /* ================================================== | 헤더 */ .header {height:70px;} main.page-wrapper{padding-top: 70px;} .header__bar .logo__wrapper-img img {width:150px;} .menu-overlay {padding:0;} .menu-overlay__heading, .menu-overlay > li > a {font-size:6rem;} .header__col-overlay {padding-bottom:50px;} .header__col-widgets {padding-top:50px; padding-bottom:50px;} .header__col-widgets-box {height:auto;} .header__widget + .header__widget {margin-top:20px;} /* ================================================== | 메인 */ .horizontal-scroll__section {transition: none !important; width: 100% !important;} .homepage .subtit {margin-top:30px; margin-bottom:0;} .homepage .horizontal-scroll__section {height:auto !important;} .homepage .realItrcCont .realItrcCon .h3 {padding-bottom:50px;} .homepage .js-horizontal-scroll__section.last-item {height:auto !important; width:100%; margin-top: 40px;} #next-section .horizontal-scroll__header {padding-left:0; padding-right:0; padding-bottom: 40px;} .section.shopping .mo-txt-box {display:block !important; height:auto !important;} .section.shopping .mo-txt-box > .p-gutters {height:auto !important;} .section.shopping .tit-txt {text-align:center;} .section.mobilewebapp .pc-box {display:none !important;} .section.mobilewebapp .canvas-wrapper {width:60vw; left:50%; transform:translateX(-50%);} .section.mobilewebapp .infinite-list__images-lane {width:60%; left:50%; transform:translateX(-50%);} .section.mobilewebapp h2.h2 {font-size: 4rem; line-height: 50px; margin-top: 20px !important;} .section.design .infinite-list__content {display:block !important;} .section.design .infinite-list__content, .section.design .infinite-list__content > .infinite-list__header {position:static; transform:unset;} main .section.design .img-wrap .img-con li a h3{top: 95%; transform: translateX(-50%); opacity: 1; color: #0C0C0D; font-size: 3.2rem; text-align: end;} main .section.design .img-wrap .img-con li:nth-child(even) a h3{text-align: start;} main .section.design .img-wrap .img-con li a .subheading{margin-top: 40px; display: block;} /* ================================================== | 서브 */ #sub.hiring .process li .txt { margin-left: 30px; padding:0 10px 0 0;} /* #sub.business .work-wrap li .circle .detail-con {top:calc(100% + 20px);} */ .sub .portfolio .js-infinite-list__lane-images:first-child .infinite-list__image-inner{margin-left: unset; margin: 0 auto;} .sub .portfolio .infinite-list__image-item, .sub .portfolio .infinite-list__marquee-row{margin-left: 0;} #sub.about .section6 .withus_list{grid-gap: 24px;} .br1280{display: none;} #sub.portfolio.view-new .section7 .content-list .list{display: unset;} #sub.portfolio.view-new .section7 .content-list .list > * {max-height: 100%; height: 450px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri, #sub.portfolio.view-new .section7 .content-list .list.btm .le{width: calc(50% - 15px); float: left; margin-top: 30px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri{margin-right: 15px; margin-bottom: 30px;} #sub.portfolio.view-new .section7 .content-list .list.btm .le{margin-left: 15px; margin-bottom: 30px;} } @media screen and (max-width: 981px){ #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} } @media screen and (max-width: 962px){ #sub.about .section_history .last_position_list.on {margin-top: -12px !important;} } @media screen and (max-width: 960px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:8rem;} .main_visual p {font-size:2.2rem; padding: 0 30px; line-height:28px;} .con ._t.tit.sub {font-size:4rem; line-height:50px;} .subtit {font-size: 2.2rem; line-height: 28px;} /* .section.design .subtit br{display: none;} */ .section.mobilewebapp .text li a {font-size: 3.0rem;} .landing.section a.mt-80{margin-top: 50px !important;} /* ================================================== | 서브 */ #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:74.4%;} #sub.hiring .agency li:first-of-type h4 .block960 {display:block;} #sub.hiring .agency li:first-of-type h4 br:last-of-type {display:none;} #sub.hiring .benefits {width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap:20px;} #sub.hiring .benefits li {width:auto; margin-left:0; padding:0;} #sub.hiring .benefits li:nth-child(13) { padding:0; margin-top:-25px;} #sub.hiring .benefits li:nth-child(20) {padding:0;} #sub.business .tips-wrap li h4 {word-break: keep-all; word-wrap: break-word;} #sub.business .tips-wrap li h4 .block960 {display:block;} #sub.business .tips-wrap li:nth-of-type(3) h4 br {display:none;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table thead tr th{padding: 10px 15px; word-break: keep-all;} #sub.business.maintenance .detail-table tbody tr td > br{display: none;} .ta{display: block !important;} .br960{display: block;} #sub.business .centerflipcards.clear:after{display: none;} #sub.business .centerflipcards-wrap{display: flex; gap: 10px;} #sub.business .centerflipcards-wrap .centerflipcards{width: 30%; display: flex; flex-direction: column;} #sub.business .centerflipcards-wrap .centerflipcards_big{width: 70%;} #sub.business .centerflipcards .square-flip {min-height: 200px !important;} #sub.business .centerflipcards .square-flip.on .square-container{box-shadow: inset 0 0 0 3px #29D4C1; box-sizing: content-box; border-radius: 15px;} #sub.business .centerflipcards .square-flip:hover .square {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d; z-index: 1;} #sub.business .centerflipcards .square-flip:hover .square2 {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); transform-style: preserve-3d; z-index: 1;} #sub.business .centerflipcards .square-flip:hover .square-container {position: relative; top: 50%; -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(0px) scale(1); -ms-transform: translateY(-50%) translateX(0px) scale(1); transform: translateY(-50%) translateX(0px) scale(1); transform-style: preserve-3d; z-index: 2;} #sub.business .centerflipcards .square-flip .square-container{padding: 0 10px; transition: 0.3s;} #sub.business .centerflipcards .square-flip .square .txt-wrap.mt-40{margin-top: 20px !important;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 2.1rem; line-height: 1;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.2rem;} #sub.business .centerflipcards_big{pointer-events: none; border-radius: 15px; overflow: hidden;} #sub.business .centerflipcards_big .square-container2{transform: unset !important; top: 0; padding: 80px;} #sub.business .centerflipcards_big .square-flip{min-height: 300px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p{font-size: 1.5rem; text-align: center; word-break: keep-all; padding-right: 0; color: #fff;} #sub.business .centerflipcards_big .square-flip .txt-wrap p span{font-size: 1.5rem; color: #0C0C0D; display: block;} #sub.business .centerflipcards_big .square-flip .txt-wrap p > br{display: none;} #sub.business .centerflipcards_big .square-flip .txt-wrap p b{font-size: 1.5rem; display: block;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-35{margin-top: 25px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-25{margin-top: 15px !important;} #sub.story .section ul.list li:hover .hover-img{width: 278px; height: 278px; opacity: 1;} .fs200{font-size: 15rem;} .fs110 {font-size: 6.5rem; line-height: 80px;} #sub.portfolio.view-new .section1 .txt-box{flex-direction: column;} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 40px;} #sub.portfolio.view-new .section1 .txt-box em.mt-30{margin-top: 15px !important;} #sub.portfolio.view-new .section .txt-box em > br{display: none;} #sub.portfolio.view-new .section1 .txt-box {padding: 70px 0;} #sub.portfolio.view-new .styleguide-list .color-list li {min-height: 256px;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 190px;} #sub.portfolio.view-new .section6 .feature-list{padding: 63.13px 0 82.76px;} #sub.portfolio.view-new .pro_fea li{padding: 20px; width: 200px; max-width: 200px; min-height: 178px;} #sub.portfolio.view-new .section8 .section-body .section-column.txt-box {padding: 80px 20px;} #sub.portfolio.view-new .section10 {padding: 100px 0 60px;} .headersubvisual.mt-100{margin-top: 60px !important;} } @media screen and (max-width: 935px){ #sub.about .section_history .last_position_list.on {margin-top: 11px !important;} #sub.about .section_history .position_list .history_list {font-size: 1.3rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.4rem;} #sub.about .section_history .history_list > li + li {margin-top: 15px;} #sub.about .section_history .position_list.first_position_list {padding-top: 80px;} #sub.about .section_history .position_list {padding-top: 50px;} } @media screen and (max-width: 922px){ #sub.about .section_history .last_position_list.on {margin-top: -10px !important;} } @media screen and (max-width: 900px){ /* ================================================== | 서브 */ /* .centerflipcards, #sub.business .centerflipcards {display: grid !important; grid-template-columns: 1fr; width: 100%; margin-left: 0; row-gap: 30px;} #sub.business .square-flip, #sub.business.design .square-flip, #sub.business.marketing .square-flip, #sub.business.maintenance .square-flip{width: 100%;} #sub.business .centerflipcards {gap:30px;} .square-flip, #sub.business .square-flip {float: unset; margin-left:0; width:100%; padding-left:20px; min-height:450px;} #sub.business .square-flip {padding-left:0;} .square-flip:nth-of-type(2) {border-right:unset;} .centerflipcards.clear:after {display:none;} #sub.business .square-flip:nth-of-type(3), #sub.business .square-flip:nth-of-type(4) {margin-top:0;} */ #sub.hiring .centerflipcards {display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; row-gap: 30px;} #sub.hiring .square-flip {float: unset; margin-left:0; width:100%; padding-left:20px; min-height:450px;} #sub.hiring .square-flip:nth-of-type(2) {border-right:unset;} #sub.hiring .centerflipcards.clear:after {display:none;} .shopping.section .section-row{flex-direction: column; gap: 30px;} .shopping.section .section-row > *:first-child, .shopping.section .section-row > *:last-child{width: 100% !important;} .shopping.section .tit-area .tit-box{text-align: center;} .section.mobilewebapp .swiper {max-width: 200px; height: 400px;} .section.mobilewebapp .swiper .swiper-slide a {padding: 9.7px 10px;} #sub.portfolio.view-new .section4 .section-row{flex-direction: column; gap: 40px;} #sub.portfolio.view-new .section4 .section-column + .section-column, #sub.portfolio.view-new .section4 .section-column {max-width: 100%;} #sub.portfolio.view-new .section4 .marquee, #sub.portfolio.view-new .section4 .marquee2{width: 50%;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv{max-width: 100%;} #sub.portfolio.view-new .section4 .section-column.txt-box{padding-top: 50px;} .br900{display: block;} #sub.portfolio.view-new .section9 {padding: 100px 0;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 13rem; line-height: 140px;} #sub.about .section_history .section-column1 {width: 33.333%;} /* #sub.about .section_history .section-column2 {width: 66.667%; margin-left: unset;} */ #sub.about .section_history .position_list:not(.first_position_list) .history_year {margin-top: -80px;} #sub.about .section_history .tit-area .tit-box h3 {white-space: nowrap;} #sub.about .section_history .img-area {display: none;} #sub.about .section_history #fix-year {max-width: unset; text-align: left;} #sub.about .section_history .position_list {margin-left: 0;} #sub.about .section_history .history_year {position: absolute; padding-left: 0; left:74px; transition: opacity .2s ease-out;} #sub.about .section_history .last_position_list {margin-top:140px !important;} #sub.about .section_history .last_position_list.on {margin-top: 180px !important;} #sub.about .section_history .cont-area .position_list > li:nth-child(1) {margin-left: 0;} #sub.about .section_history .cont-area .position_list > li:nth-child(2) {margin-left: unset; max-width: unset;} #sub.about .section_history #fix-year {top:241px;} #sub.about .section_history .position_list.first_position_list {padding-top: 5px;} #sub.about .section_history .section-column1 {position: absolute;} #sub.about .section_history.fixed .section-column1 {position: fixed; top:0;} #sub.about .section_history .section-column2 {margin-left: 33.333%; width: 100% !important; position: static !important;} #sub.about .section_history .first_position_list .history_list {margin-top: 90px;} #sub.about .section_history .history_year {left:88px;} #sub.about .section_history:not(.pin-going) .last_position_list.on .history_year {margin-top: 0;} #sub.about .section_history.pin-fixed .position_list.on .history_year { top: 240px; position: fixed; left: 109px;} #sub.about .section_history.pin-fixed .position_list:not(.first_position_list).on {margin-top: 130px;} #sub.about .section_history.pin-fixed .position_list:not(.first_position_list).on .history_year {margin-top: 0;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: 40px;} #sub.about .section_history.out-fixed .section-column1 {bottom:483px; top:unset;} } @media screen and (max-width: 860px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:170px;} .section_rolling .text1 li {font-size:8rem;} .section_rolling .text2 li {font-size:10rem;} .section_rolling .text2 li b::after {width:60px;} .transition-container2 {margin-top:-60px;} .section_rolling .transition-container > ul li {line-height:100px !important;} /* ================================================== | 서브 */ #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:130px; max-width:130px;} #sub.hiring .tag-area li:nth-child(1) {right:180px;} #sub.hiring .tag-area li:nth-child(5) {right:140px;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:74%;} #sub.contact .tag-area li:nth-child(1) {right:170px;} #sub.contact .tag-area li:nth-child(2) {right:130px;} #sub.contact .tag-area li:nth-child(3) {right:20px;} #sub.contact .tag-area li:nth-child(4) {right:160px; top:102px;} #sub.contact .tag-area li:nth-child(5) {right:-30px; top:120px;} #sub.contact .tag-area li:nth-child(6) {right:140px;} #sub.contact .tag-area li:nth-child(7) {right:0; top:190px;} #sub.contact .tag-area li:nth-child(8) {right:140px;} #sub.business .work-wrap > li:nth-child(5) .circle span:after { width: calc(183% + 60px);} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40{gap: 15px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 24px 19.22px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico img{width: 54px; height: 44px;} #sub.portfolio.view-new .section5 {padding: 80px 0;} } @media screen and (max-width: 840px) { #sub.about .section2 .section-column + .section-column .num-sec{flex-direction: column !important;} #sub.about .section1 .img_wrap{width: 80%; height: 100%;} #sub.about .section3 .story_wrap .tit-box, #sub.about .section.bg_b .tit-box > em{text-align: center;} #sub.about .section3 .txt-wrap{width: 100%;} #sub.about .section3 .section-column.mt-50 {margin-top: 150px !important;} #sub.about .section3 {padding-top: 150px;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 26.5px 53px;} #sub.about .section3 .canvas-wrapper{transform: scale(1);} #sub.about .section3 .canvas-wrapper canvas{top: -39px; right: -51%;} #sub.about .section3 .round {top: 24px;} #sub.about .section2 .section-body .section-inner{padding: 100px 0;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 3.0rem;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img{height: 60px;} .search-area.mt-125{margin-top: 60px !important;} .section.portfolio .tab-area{justify-content: flex-start !important;} #sub.about .section_history .section-body .section-inner {padding:0 0 100px;} #sub.about .section_history .position_list {padding-bottom: 0;} /* #sub.about .section_history .last_position_list .history_list {padding-bottom: 200px; box-sizing: border-box;} */ #sub.about .section_history .last_position_list .history_year {margin-top: -100px;} #sub.about .section_history #fix-year {top:240px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -104px;} #sub.about .section_history.out-fixed .section-column1 {bottom:346px; top:unset;} } @media screen and (max-width: 790px){ /* ================================================== | 서브 */ #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.5rem;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.7rem; line-height:30px;} #sub.hiring .agency li:nth-of-type(2) h4 .block790 {display:block;} #sub.hiring .agency li:nth-of-type(2) span {margin-top:67px;} #sub.about .section1{overflow: hidden;} #sub.portfolio.view-new .tit-area .tit-box h1{font-size: 8rem; line-height: 90px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 2rem; line-height: 24px;} #sub.portfolio.view-new .fs18{font-size: 1.6rem; line-height: 25px !important; letter-spacing: -0.44px; word-break: keep-all;} #sub.portfolio.view-new .fs24 {font-size: 2rem; line-height: 30px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 80px 0;} #sub.portfolio.view-new .mt-60{margin-top: 40px !important;} #sub.portfolio.view-new .styleguide-list .color-list li {width: calc(50% - 7.5px); max-width: 100%; min-height: 150px;} .fs16 {font-size: 1.4rem; line-height: 18px;} .header__col_right-wrap{gap:15px;} .header__col_right-menu .tell span i{display: inline-block; width:20px;} .header__col_right-menu .tell span{font-size:0 !important; padding:0; display:flex; align-items: center; justify-content: center;} .header__col_right-menu .tell span.fs16{padding:11px 16px !important;} } @media screen and (max-width: 768px){ /* ================================================== | 헤더 */ .header__widget-content.h6 {font-size:1.8rem;} /* ================================================== | 메인 */ main .section {margin:60px auto 0;} main .main_visual{height: 80vh;} main .main_visual #pcslider{display: none;} main .main_visual #moslider{display: block;} .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 5rem; line-height: 60px;} .subtit {font-size: 1.8rem; margin-top: 20px; margin-bottom: 40px;} .solution.section .subtit {margin-bottom: 30px;} .main_visual h2 {font-size:6rem;} .main_visual p {font-size:2rem; line-height:26px;} .main_visual .slider-dots_right.slider-dots {right:20px; bottom:20px;} .main_visual .slider-categories_left, .main_visual .slider-categories {left:20px; bottom:20px;} .homepage .realItrcCont .realItrcCon .thumbnail {padding:30px 0 10px;} .homepage .realItrcCont .realItrcCon .h3 {font-size:4rem;} .section.mobilewebapp .canvas-wrapper {width:80vw; } .section.mobilewebapp .infinite-list__images-lane {width:80%; } main .section.design .tit-area{position: unset; height: auto;} main .section.design .img-wrap{margin-top: 30px;} main .section.design .img-wrap .img-con li {width: 80vw; margin: 0 auto;} main .section.design .img-wrap .img-con li + li {margin-top: 20px;} main .section.design .img-wrap .img-con li .subheading{display: block; text-align: center !important;} main .section.design .img-wrap .img-con li a h3{text-align: center !important; margin: 0; top: 100%; font-weight: 500;} .section.mobilewebapp .mockup-wrapper{justify-content: center !important;} .section.mobilewebapp .text, .section.mobilewebapp .swiper.r-swiper{display: none;} .section.mobilewebapp .swiper.l-swiper{max-width: 350px; width: 100%; height: 550px;} .section.mobilewebapp .swiper .swiper-slide a .motxt{display: block; width: fit-content; margin: 0 auto; font-size: 2.0rem; font-weight: 700; letter-spacing: -1.2px; font-family: "NanumSquareNeo", sans-serif; margin-top: 20px; color: #0C0C0D; opacity: 0; transition: 0.3s all; text-align: center; position: relative;} .section.mobilewebapp .swiper .swiper-slide.swiper-slide-active a .motxt{opacity: 1;} .section.mobilewebapp .swiper .swiper-slide.swiper-slide-active a .motxt::after {content: ''; clear: both; display: block; width: calc(100% + 4px); background: #7EE3D8; height: 10px; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; left: -2px;} .landing.section a.mt-80{margin-top: 30px !important;} .section-portfolio-grid__col-grid{padding-top: 30px;} .section-portfolio-grid__col-grid .js-grid__item {margin-top: 20px;} .footer {height:auto;} .contactUsWrap.con {height:700px;} main.page-wrapper .contactUsWrap.con {height:800px;} .con ._t.tit.sub {font-size:3rem; line-height:40px;} .footerWrap .footer {display:block; flex-direction: column;} .footerWrap .footer .area._2 {margin-top:30px; text-align:left;} .footerWrap .footer .area._1, .footerWrap .footer .area._2 {width:100%;} .footer .con ._ts {min-height:78px;} .typing-txt {font-size:6rem; } .typed-cursor {height:70px; } .footerWrap .footer .area p span:last-child {display: inline-block;} .footerWrap .footer .area p span:nth-of-type(2):after {display: block;} .footerWrap .footer .area .util .familySite {width:calc(100% - 130px);} .footerWrap .footer .area .util .social:last-child{margin-right: 0;} .quick_btn{right: 20px;} .quick_btn .contactBtn {width: 92px; height: 92px;} /* ================================================== | 서브 */ #sub.about .section1 .video_wrap{width: 320px;} .sub .portfolio .portfolio-list{gap: 10px;} .sub .portfolio .portfolio-list .txt {bottom: 20px; left: 20px;} .sub .portfolio .portfolio-list .txt span {font-size: 1.4rem; line-height: 1;} .sub .portfolio .portfolio-list .txt p {font-size: 1.8rem; line-height: 1;} .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:6rem; line-height:70px;} .square-flip .txt-wrap b {font-size:2.5rem;} #sub.hiring .process {min-width: 1050px; height: 350px;} #sub.hiring .process li {max-width: 230px;} #sub.hiring .process li .txt{padding: 0 10px; box-sizing: border-box; max-width: 90%; margin: 0 auto !important; left: unset;} #sub.hiring .process li .circle {max-width: 230px; max-height: 230px; padding: 85px 42px;} #sub.hiring .process.loaded li:nth-child(2) {left: 23%;} #sub.hiring .process.loaded li:nth-child(3) {left: 42%;} #sub.hiring .process.loaded li:nth-child(4) {left: 61%;} #sub.hiring .process.loaded li:nth-child(5) {left: 80%;} #sub.hiring .process::after{top: 32%; left: 41.5px; width: calc(100% - 100px);} #sub.hiring .centerflipcards {grid-template-columns:1fr; row-gap:40px;} #sub.hiring .square-flip {pointer-events: none; border-right:unset; min-height:unset; padding-left: 0;} #sub.hiring .square-flip:not(:last-of-type):after {position:absolute; display:block; content:''; clear:both; width:100%; height:1px; top:calc(100% + 20px); left:0; background:#E4E4E4;} #sub.hiring .square-flip .square { transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform:rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg);opacity: 0; visibility: hidden;} #sub.hiring .square-flip .square2 { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform:rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); opacity: 1; visibility: visible; position:static;} #sub.hiring .square-flip .square-container2 {transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -moz-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -webkit-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -o-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -ms-transform: translateY(-50%) translateX(0) translateZ(0) scale(1);} #sub.hiring .square-flip:hover .square, #sub.hiring .square-flip:hover .square2, #sub.hiring .square-flip:hover .square-container, #sub.hiring .square-flip:hover .square-container2 {transform: none;} #sub.hiring .square-flip .img-wrap img{transform: scale(0.8);} #sub.hiring .square-flip .txt-wrap p{padding-right: 0; margin-top: 15px !important;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap {display:block; padding:50px 20px;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area {width:100%; padding:0 10px;} #sub.hiring .tit-area .tit-box h5, #sub.contact .tit-area .tit-box h5 {margin-top:20px !important;} #sub.hiring .tag-area, #sub.contact .tag-area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap:10px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; padding-bottom:0; min-height: 200px; max-height:unset; margin-top:30px; max-width: 100%;} .tag-area li {position:static;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after { height:72.4%;} #sub.hiring .process li .circle span, #sub.business .work-wrap li .circle span {font-size:1.4rem;} #sub.hiring .process li .circle b {font-size:2rem; margin-top:25px !important;} #sub.business .work-wrap > li .circle h5 b {font-size:2rem !important;} #sub.business .work-wrap > li .circle h5 {font-size:1.6rem;} #sub.hiring .process.loaded li:nth-child(1) .circle span:after, #sub.hiring .process.loaded li:nth-child(4) .circle span:after {top:26px;} #sub.business .work-wrap > li:nth-child(1) .circle span:after, #sub.business .work-wrap > li:nth-child(4) .circle span:after {top:18px;} #sub.hiring .process.loaded li:nth-child(5) .circle span:after {top:26px;} #sub.hiring .process li .txt, #sub.business .work-wrap li .circle .detail-con li {font-size:1.4rem; line-height:20px;} #sub.hiring .section4 .section-inner, #sub.business .section4 .section-inner {padding:70px 0;} #sub.hiring .section4 .section-column.poa, #sub.business .section4 .section-column.poa {position:static;} #sub.business .section4 .section-row.gap-140 {gap:90px;} #sub.hiring .agency, #sub.business .tips-wrap {display:grid; grid-template-columns:1fr; border:none;} #sub.hiring .agency li, #sub.business .tips-wrap li {width:100%; padding:0;} #sub.hiring .agency li + li, #sub.business .tips-wrap li + li {border-top:1px solid #474747; border-left:none; padding-top:30px;} #sub.hiring .agency li:not(:last-of-type), #sub.business .tips-wrap li:not(:last-of-type) {padding-bottom:30px;} #sub.hiring .agency li:first-of-type span, #sub.hiring .agency li:nth-of-type(2) span, #sub.hiring .agency li:nth-of-type(3) span {margin-top:20px;} #sub.hiring .agency li:first-of-type h4 .block960, #sub.hiring .agency li:nth-of-type(2) h4 .block790, #sub.hiring .agency li h4 .block1210, #sub.hiring .agency li h4 br, #sub.business .tips-wrap li h4 br, #sub.business .tips-wrap li h4 .block960 {display:none;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {margin:0;} #sub.hiring .agency li:nth-of-type(2) span br, #sub.hiring .agency li:last-of-type span br {display:none;} #sub.hiring .benefits {grid-template-columns:repeat(3, 1fr);} #sub.hiring .benefits li .txt p {font-size:1.5rem; line-height:19px;} #sub.hiring .benefits li .txt p b {font-size:1.9rem; line-height:23px; margin-bottom:5px;} #sub.hiring .benefits li .img img {width:100px; height:100px;} #sub.hiring .benefits li:nth-child(13) .img img {height:125px;} #sub.hiring .agency li:hover::before {opacity:0; z-index:-1;} #sub.contact .tag-area li:nth-child(2)::after {width:25px;} #sub.contact .tag-area li:nth-child(8)::before {width:15px; right:-20px; left:unset; top:4px;} #sub.contact .tag-area li:nth-child(8)::after {width:25px; bottom:1px; left:unset; right:-15px;} #sub.contact .visual-wrap .tit-area .tit-box h3 br {display:none;} .conArea input[type="text"], .conArea textarea, .conArea em, .conArea input[type="text"]::placeholder, .conArea textarea::placeholder, .contact .check-box > input[type="checkbox"] ~ label {font-size: 1.6rem;} .popup .popup-inner {-webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .popup .popup-inner .left-cont {max-width:unset;} .popup .popup-inner .popup-close {width:50px; height:50px; background-size:17px;} .popup .popup-inner .left-cont, #policy1.popup .popup-inner .right-cont {padding:30px;} .popup .popup-cont .text-box {max-height:calc(100vh - 305px);} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:80px 30px;} #sub.business .tit-area .tit-box h3 {font-size:3rem; line-height:40px;} #sub.business .tit-area .tit-box h3 b {font-size:3.5rem; line-height:45px;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {font-size:1.8rem; line-height:30px; margin-top:30px; margin-bottom: 0;} #sub.business .tips-wrap li span {margin-top:20px;} #sub.business .tips-wrap li p strong {font-size:6rem; line-height:40px;} #sub.business .tips-wrap li p {font-size:1.8rem;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width:450px; height:450px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width:650px; height:650px;} #sub.business .svg-img.pcsvg_wrap{display: none;} #animatedCircle {transform-origin: center; animation: none; } #sub.business .svg-img.mosvg_wrap{display: block; top: 128px;} #animatedCircle1 {transform-origin: center; animation: moveAlongPath 8s linear infinite; } #sub.hiring .visual-wrap .tit-area .tit-box h3 > br, #sub.contact .visual-wrap .tit-area .tit-box h3 > br{display: block;} .tag-area li, .tag-area li.mini{min-height: 60px !important;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 3rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 3.5rem;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.9rem;} .view-navi li.navi .navi_hover_img {max-width: 150px; max-height: 150px; min-width: 150px; min-height: 150px; top: -150px; right: -30px} .view-navi li.next .navi_hover_img {left: -30px;} #sub.story .section, #sub.story_view, #sub.about .section5 {padding-bottom: 100px;} .tit-area .tit-box h1{margin-top: 10px !important;} #sub.story .section ul.list li a .title, #sub.story_view .section .title {font-size: 3rem; margin-top: 0 !important;} #sub.story .section ul.list li a .sub_con{font-size: 1.8rem; line-height: 28px;} #sub.story .section ul.list li a .title, #sub.story .section ul.list li a .sub_con{width: 100%;} #sub.story .section ul.list li a .date{position: unset; transform: unset; margin-top: 10px;} #sub.story_view .section .date{margin-top: 20px;} #sub.story_view .section .cont{padding: 40px 0; margin-top: 40px;} .view-navi li.list{min-width: fit-content;} .view-navi li.list a{padding: 21px 46.12px !important;} .sub .portfolio.mt-150{margin-top: 70px !important;} .tab-area.gap-15{gap: 7px;} .tab-area li a{line-height: 50px; min-height: 50px;} #sub.about .section2 .section-row{flex-direction: column; align-items: center; gap: 50px; text-align: center;} #sub.about .section2 .section-column, #sub.about .section2 .section-column + .section-column{width: 100%; max-width: 100%; margin-left: 0;} #sub.about .section2 .section-column + .section-column .num-sec{ gap: 20px;} #sub.about .section2 .cont-area ul li{min-width: unset !important; width: fit-content; text-align: start;} #sub.about .section2 .cont-area ul li:nth-child(2){margin-left: 0;} #sub.about .section.bg_b .tit-box b {font-size: 6rem;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 12px !important;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 22.5px 46px;} #sub.about .section3 .round {width: 45px; height: 45px; top: 22px;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -55px; margin-top: -33px; } } #sub.about .section4 .work_wrap .work_list li{padding: 50px;} #sub.about .section4 .work_wrap .work_list li p{margin-top: 50px;} #sub.about .section6 .section-body .section-inner{padding: 150px 0;} #sub.about .section5 {padding-bottom: 150px;} #sub.about .section_history #fix-year {top:210px;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 6rem;} #sub.about .section_history .history_year {left:75px;} #sub.about .section_history.pin-fixed .position_list.on .history_year { top: 210px; left: 95px;} #sub.about .section_history .section-column2 {margin-top: 105px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -134px;} #sub.portfolio.view-new .mt-160 {margin-top: 80px !important;} .fs50 {font-size: 3.5rem; line-height: 45px;} #sub.portfolio.view-new .section1 .section-body .section-column + .section-column {padding: 0 20px;} #sub.portfolio.view-new .section5 {padding: 60px 0;} #sub.portfolio.view-new .section5 .img img {width: 150px; height: 100px;} #sub.portfolio.view-new .section5 .txt.mt-30{margin-top: 20px !important;} #sub.portfolio.view-new .section5 .txt .mt-40{margin-top: 30px !important;} .headersubvisual.mt-100{margin-top: 40px !important;} #sub.portfolio.view-new .section7 .content-list .txtbox {padding: 20px; padding-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox.mt-30{margin-top: 20px !important;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox{margin-right: 20px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .le .imgbox{margin-left: 20px;} #sub.portfolio.view-new .section10 .view-navi {padding: 80px 0 0 0;} .mt-70 {margin-top: 50px !important;} #sub.portfolio.view-new .section1 .it-wrap{height: 70svh;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 11rem; line-height: 120px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 2.5rem;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 5rem; } #mVisual .tit-box p{font-size: 1.6rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:44px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.1rem;} #mVisual .cate-box-wrap{gap:10px;} .ai-service-item{padding:30px; flex-direction: column !important; align-items: center !important; border-radius:30px;} #main .section .tit-box h3 span.sub-txt{font-size:1.4rem; line-height: 140%;} #main .section1 .tit-box h3 span.poppin{font-size:4.0rem; letter-spacing: 0; line-height: 110%; margin-top:20px;} #main .section1{padding-top:50px;} #main .section1 .cont-wrap{margin-top:50px;} .ai-service-item .left h4{font-size:2.4rem; margin-top:10px;} .ai-service-item .left .s-txt{font-size:1.4rem; margin-top:18px;} .ai-service-item .left ul li p{font-size:1.2rem;} .ai-service-item .left ul li{gap:6px;} .section1 .li1 .right{margin-top:30px;} .ai-service-item .left ul li + li{margin-top:10px;} .ai-service-item .right{height:auto; position:relative; margin-top:30px;} .ai-service-item3 .right .right-inner, .ai-service-item5 .right .right-inner{margin-top:0;} .lang-box, .cate-box-wrap{top:50px;} .upload-box .loading-box{left:25%;} .cate-box-wrap .loading-box{right:25%;} .ai-service-item6 .right{height:380px;} .li6 .cate-tab{margin-top:0;} #main .section .tit-box h3{font-size:4rem; line-height: 110%; padding-bottom:30px;} .effect-list{grid-template-columns:repeat(2, 1fr);} .effect-list li{padding:40px 20px 0 20px;} .effect-list li h4{margin: 10px 0;} #main .section2 .txt1{font-size:3.0rem; line-height: 140%;} #main .section2 .txt2{font-size:1.4rem; line-height: 140%;} #main .section2 .txt1 img{top:-40px; width:80px;} #main .section2 .txt1{margin-top:80px;} #main .section3{padding:80px 0; margin-top:0;} #main .section3 ul li{margin-top:40px;} .ai-service-item5.on .cate-box-wrap { top: 80px; } .contact-tit-area .tel-box{margin-top:10px; padding-left:55px; font-size:4.2rem;} .contact-tit-area .tel-box:before{width:45px; height:45px; top:-8px;} } @media screen and (max-width: 740px){ /* ================================================== | 서브 */ #sub.hiring .agency li:first-of-type span br:first-of-type {display:block;} } @media screen and (max-width: 690px){ #sub.hiring .process li .circle, /* #sub.business .work-wrap li .circle{padding:70px 19px 0 50px !important;} */ /* #sub.business .work-wrap li:last-child .circle {padding:70px 20px 0 50px !important;} */ /* #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:67.8%;} */ #sub.hiring .process li:last-child .circle.on::before {top:5px; left:5px;} #sub.hiring .process li:last-child .circle.on::after {top:10px; left:10px;} #sub.hiring .process li .txt {margin-top:20px !important;} #sub.contact .visual-wrap .tit-area .tit-box h3 br {display:block;} /* #sub.business .work-wrap > li {padding-bottom:200px;} */ } @media screen and (max-width: 680px) { .solution.section .subtit, .design.setion .subtit {margin-bottom: 10px;} main .section.design .img-wrap{margin-top: 10px;} #sub.about .section.bg_b .tit-box b{font-size: 5rem;} #sub.about .section.bg_b .tit-box b + b {margin-top: 12px;} #sub.about .section.bg_b .tit-box > p{font-size: 1.8rem; margin-top: 35px; line-height: 30px;} #sub.about .section.bg_b .tit-box > em{margin-top: 20px; font-size: 1.6rem; line-height: 28px;} #sub.about .section.bg_b .tit-box > em b{font-size: 1.6rem;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 7px !important;} #sub.about .section3 .txt-wrap > li > ul > li{font-size: 1.8rem; padding: 22.5px 38px;} #sub.about .section3 .round {width: 42px; height: 42px; top: 23px; left: 37%;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -34px; margin-top: -28px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -59px; margin-top: -35px; } } /* #sub.about .section3 .canvas-wrapper{transform: scale(0.9); transform-origin: center center; left: 300px; top: 83px; } */ #sub.about .section3 .canvas-wrapper canvas {transform: scale(0.9); transform-origin: center center; top: unset; right: calc(-51% + -31px);} #sub.about .section4 .work_wrap .work_list li{max-width: 417px; padding: 40px 30px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 2.5rem; margin-top: 15px;} #sub.about .section4 .work_wrap .work_list li p em {font-size: 1.6rem;} #sub.about .section4 .work_wrap .work_list li span {font-size: 1.6rem; line-height: 28px; margin-top: 30px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 9rem; line-height: 110px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 2rem; line-height: 25px;} } @media screen and (max-width: 670px){ /* ================================================== | 서브 */ #sub.hiring .agency li:nth-of-type(2) span br:first-of-type, #sub.hiring .agency li:last-of-type span br:first-of-type {display:block;} } @media screen and (max-width: 660px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:150px;} .section_rolling .text1 li {font-size:7rem;} .section_rolling .text2 li {font-size:8rem;} .transition-container2 {margin-top:-70px;} .section_rolling .text2 li b::after {width:45px; height:25px; bottom:8px;} .br900{display: none;} #mVisual .tit-area .tit-box em{display:block;} } @media screen and (max-width: 640px){ /* ================================================== | 헤더 */ .header__bar .logo__wrapper-img img {width:130px;} .header__burger.header__burger_opened {margin: 20px 0 0 0;} .header__col-overlay {padding-top:100px;} /* ================================================== | 메인 */ .main_visual .main_visual h2 {font-size:6rem;} .main_visual .main_visual p {font-size:2rem; line-height:26px;} .main_visual .slider-dots_right.slider-dots {display:none;} .homepage .realItrcCont .realItrcCon .h3 {font-size:3rem; padding-bottom:30px;} .homepage .realItrcCont .realItrcCon .description {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom:10px;} .homepage .realItrcCont .realItrcCon .description .kind {width:fit-content;} .homepage .realItrcCont .realItrcCon .description .title {flex-grow:1;} .homepage .realItrcCont .realItrcCon .description .date {width:100%;} .shopping h3 {font-size:3rem;} .section.mobilewebapp h2.h2 {font-size: 3rem; line-height: 40px; margin-top: 10px !important;} .section.section-arc-images .js-arc-images__list-item {padding-right:0; padding-left:0;} .section.section-arc-images .js-arc-images__list-item .rounded-50 {border-radius:20px !important;} .footerWrap .footer .area .copyright {font-size:1.2rem; line-height:2rem;} .menu-overlay__heading {font-size:5rem;} .contactUsWrap.con {height:600px;} main.page-wrapper .contactUsWrap.con {height:600px;} .footer .con ._ts {min-height:52px;} .typing-txt {font-size:4rem; } .typed-cursor {height:50px; } /* ================================================== | 서브 */ .section .section-row .section-column.mt-100 {margin-top:40px !important;} #sub.hiring .visual-wrap .tit-area {padding:0;} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em {font-size:2rem; line-height:28px;} .tit-area .tit-box h1 {font-size:6rem; line-height:45px;} .tit-area .tit-box h3, #sub.about .section_history .tit-area .tit-box h3 {font-size:2.5rem; line-height:35px;} .tit-area .tit-box h3 b, #sub.about .section_history .tit-area .tit-box h3 b { font-size: 3rem; line-height: 40px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.6rem; line-height:24px; word-break: keep-all; word-wrap: break-word;} .tag-area li, .tag-area li.mini {font-size:1.5rem; min-height:50px;} /* #sub.hiring .tag-area li:nth-child(1)::after {bottom:-109px; right:-145px; background-size:200px;} #sub.hiring .tag-area li:nth-child(7)::after { width: 20px; height: 20px; top: -6px;} */ #sub.hiring .process li .circle span {font-size:1.3rem;} #sub.hiring .process li .circle b {font-size:1.7rem; margin-top:20px !important;} #sub.hiring .process li .txt {font-size:1.3rem;} .section .section-row.gap-90, .section .section-row.gap-60, #sub.business .section4 .section-row.gap-140 {gap:30px;} .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:5rem; margin-top:10px !important; word-break: keep-all; word-wrap: break-word; line-height:60px;} .tit-area .tit-box h2.mt-0{margin-top: 0 !important;} #sub.hiring .section {padding-top:80px;} #sub.contact .section2 {padding:80px 0;} #sub.hiring .section.section1 {padding-top:0;} #sub.hiring .process li:first-of-type .txt, #sub.hiring .process li:nth-of-type(4) .txt {margin-left:0;} .square-flip .txt-wrap em {font-size: 1.3rem;} .square-flip .txt-wrap b, #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2rem; line-height:30px;} .square-flip .txt-wrap p, #sub.hiring .section4 {padding-top:0;} #sub.hiring .section4 .section-inner, #sub.business .section4 .section-inner {padding:50px 0;} #sub.business .section.section4 {padding-top:0;} #sub.business.maintenance .section3, #sub.business.maintenance .section4{padding-top: 80px;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.4rem; line-height:23px;} #sub.hiring .agency li:first-of-type span, #sub.hiring .agency li:nth-of-type(2) span, #sub.hiring .agency li:nth-of-type(3) span {margin-top:10px;} #sub.hiring .benefits li .txt p {font-size:1.4rem; line-height:18px;} #sub.hiring .benefits li .txt p b {font-size:1.8rem; line-height:22px;} #sub.hiring .benefits {grid-template-columns:repeat(2, 1fr);} #sub.contact .tag-area li:nth-child(5) {min-height:50px;} #sub.contact .conArea table, #sub.contact .conArea table tbody {display:block;} #sub.contact .conArea table tbody tr {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #sub.contact .conArea table tbody tr td {width:100%; padding-top: 20px;} .conArea em{top: 24px;} .conArea input[type="text"], .conArea textarea{padding: 0;} .conArea table tr td:nth-child(odd) {padding-right:0;} .conArea table tr td:nth-child(even) {padding-left:0;} .conArea table tr td:nth-child(even) em {left:0;} .conArea input[type="text"], .conArea textarea, .conArea em, .conArea input[type="text"]::placeholder, .conArea textarea::placeholder, .contact .check-box > input[type="checkbox"] ~ label {font-size:1.4rem;} .contact .check-box > input[type="checkbox"] ~ label:before {width:25px; height:25px; margin-top:-12.5px;} .btnSet .main_btn {padding:20px 50px 20px 40px;} .btnSet .main_btn:hover {padding:20px 70px 20px 40px;} #sub.contact ~ .footer .footer-body .footer-inner {padding-top:50px;} #sub.contact ~ .footer .footer-body .footer-inner .right {margin-top:30px;} .footer .footer-body .footer-inner .right p.mt-50 {margin-top:30px !important; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .footer .footer-body .footer-inner .right p span b {font-size:1.6rem; line-height:20px; word-break: keep-all; word-wrap: break-word;} .footer .footer-body .footer-inner .right p span b.mt-20 {margin-top:15px !important;} .footer .footer-body .footer-inner .right p span b + b {margin-top:10px !important;} .popup .popup-title h4 P {font-size:1.8rem;} .popup .popup-title h2 {font-size:3.7rem;} #policy1.popup .popup-inner .left-cont p {font-size:1.4rem; line-height:20px;} .agree_txt b {font-size:1.6rem; line-height:20px;} .agree_txt h4 {font-size:1.4rem; line-height:25px;} .agree_txt p, .agree_txt ul, .agree_txt ol, .agree_txt dl {font-size:1.4rem; line-height:20px;} .popup .popup-cont .text-box {max-height:calc(100vh - 273px);} .section.mobilewebapp .infinite-list__heading-item h2.h3, .landing .pricing-table__header h3 {font-size:2.5rem; line-height:40px;} .landing .pricing-table__header .pricing-table__subtxt {font-size:1.6rem; line-height:22px; margin-top:20px !important} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {margin-top:30px !important;} #sub.business .section {padding-top:80px;} #sub.business .section2 {padding-bottom:0;} #sub.business.maintenance .section2{padding-bottom: 70px;} #sub.business .section3 {padding-bottom:80px;} /* #sub.hiring .process, #sub.business .work-wrap {grid-template-columns:1fr; row-gap:20px;} #sub.hiring .process li, #sub.business .work-wrap > li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; } #sub.hiring .process.loaded li:nth-child(1) .circle span:after, #sub.hiring .process.loaded li:nth-child(5) .circle span:after, #sub.business .work-wrap > li:nth-child(1) .circle span:after, #sub.business .work-wrap > li:nth-child(5) .circle span:after {display:none;} #sub.hiring .process li .circle, #sub.business .work-wrap li .circle {padding:0 !important; aspect-ratio:unset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-shrink:0;} #sub.hiring .process li .circle { width:100px; height:100px;} #sub.business .work-wrap li .circle {width:145px; height:145px;} */ /* #sub.business .big-circle-wrap .big-circle{display: none;} */ /* #sub.hiring .process li .txt {margin-top:0 !important; padding:0; left:unset;} */ /* #sub.hiring .process li:nth-child(2), #sub.hiring .process li:nth-child(3), #sub.hiring .process li:nth-child(5), #sub.hiring .process li:nth-child(5) {left:unset;} */ /* #sub.hiring .process li .circle b {margin-top:10px !important;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {width:100px; height:100px;} #sub.hiring .process li:first-of-type .txt, #sub.hiring .process li:nth-of-type(4) .txt {margin-left:20px;} #sub.hiring .process li .circle:hover {background:transparent; border:1px solid #8B8B8B;} #sub.hiring .process li .circle:hover b {color:#0C0C0D;} */ /* #sub.business .work-wrap > li, #sub.business .work-wrap > li:nth-child(4), #sub.business .work-wrap > li:nth-child(5), #sub.business.design .work-wrap > li, #sub.business.design .work-wrap > li:nth-child(4), #sub.business.design .work-wrap > li:nth-child(5) {padding-bottom:0;} #sub.business .work-wrap li .circle .detail-con {opacity:1; top:50%; transform:translateY(-50%); width: calc(100% - 165px); left:165px;} #sub.business .work-wrap li .circle {position:static;} #sub.business .work-wrap > li {position:relative;} #sub.business .work-wrap > li:nth-child(2), #sub.business .work-wrap > li:nth-child(5), #sub.business .work-wrap > li:nth-child(3) {left:unset;} #sub.business .work-wrap > li .circle h5 {text-align:center;}*/ #sub.business .work-wrap li .circle:hover {background:transparent; border:1px solid #8B8B8B;} #sub.business .work-wrap li .circle:hover span, #sub.business .work-wrap li .circle:hover h5 {color:#0C0C0D;} /* #sub.business .work-wrap li:last-child .circle {width:100%; aspect-ratio:unset; padding:30px !important; border-radius:30px;} */ #sub.business .section2 .section-row .section-column + .section-column {margin-top:30px;} /* #sub.business .big-circle-wrap .big_wrap {display:none;} */ /* #sub.business .work-wrap li:last-child .circle {background: linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%); border: 1px solid transparent;} */ /* #sub.business .work-wrap > li:last-child .circle span, #sub.business .work-wrap li:last-child .circle h5 {color:#0C0C0D !important;} #sub.business .work-wrap li:last-child .circle h5 b {color: #ffffff !important;} */ #sub.business .work-wrap > li .circle h5 {margin-bottom:0;} #sub.business .tips-wrap li p {font-size:1.6rem;} #sub.business .tips-wrap li p strong {font-size: 4rem; line-height:30px;} #sub.business .tips-wrap li p img {width:13px; height:13px; margin-bottom:9px;} #sub.business .section.solution .section-portfolio-grid__col-grid {padding-top:30px;} #sub.business .solution .portfolio-card .rect .typo .disTC {padding:20px;} #sub.business .solution .portfolio-card .rect > * p {font-size:1.5rem; line-height:1.3;} #sub.business .solution .portfolio-card .rect .typo .t2 {font-size:1.8rem; line-height:1.3;} #sub.business .solution .row > *:last-child {margin-top:30px;} #sub.business.maintenance .section4{padding-bottom: 60px;} #sub.portfolio.view-new .section1 .it-wrap{border-radius: 20px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 6rem; line-height: 70px; letter-spacing: -2.6px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 1.6rem; line-height: 20px;} #sub.portfolio.view-new .fs18{font-size: 1.4rem;} #sub.portfolio.view-new .fs24 {font-size: 2rem;} .fs200{font-size: 13rem;} .fs110 {font-size: 5.5rem; line-height: 75px;} .fs22 {font-size: 1.8rem; line-height: 20px;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 150px;} #sub.portfolio.view-new .pro_fea li {padding: 15px; width: 150px; max-width: 150px; min-height: 185px;} #sub.portfolio.view-new .pro_fea li .txt b, #sub.portfolio.view-new .pro_fea li .txt em{line-height: 16px;} #sub.portfolio.view-new .section6 .feature-list .tit-box b {font-size: 3.3458rem;} #sub.portfolio.view-new .section6 .feature-list .tit-box p {margin-top: 10px;} #sub.portfolio.view-new .section7 .content-list .list{display: flex; flex-direction: column;} #sub.portfolio.view-new .section7 .content-list .list.top .ri, #sub.portfolio.view-new .section7 .content-list .list.btm .le{width: 100%; float: unset; margin-top: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .ri{margin-right: 0; margin-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.btm .le{margin-left: 0; margin-bottom: 0;} #sub.about .section_history .tit-area .tit-box h3, #sub.about .section_history .tit-area .tit-box h3 b {line-height: 1;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -134px;} #sub.about .section_history #fix-year, #sub.about .section_history.pin-fixed .position_list.on .history_year {top:170px;} #sub.about .section_history .section-column2 .cont-area {padding-top: 60px;} /* #sub.about .section_history .position_list:not(.first_position_list) .history_year {margin-top: -80px;} */ /* #sub.about .section_history.pin-fixed .position_list.on .history_year {margin-top: 0;} */ .ai-service-item2 .right{flex-direction: column !important; align-items: center !important;} } @media screen and (max-width: 600px){ .section.landing .subtit .block600, .section.solution .subtit .block600 {display:block;} .footer .con ._ts {margin:0 auto 50px;} .contactUsWrap .contactBtn, .contactUsWrap .contactBtn span {width:25rem; height:25rem; line-height:25rem; font-size:2.6rem;} #sub.business .centerflipcards-wrap{gap: 5px;} #sub.business .centerflipcards-wrap .centerflipcards{grid-gap: 5px;} #sub.business .centerflipcards .square-flip {min-height: 150px !important;} #sub.business .centerflipcards .square-flip .img-wrap {height: 35%;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.1rem;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.6rem; margin-top: 5px; line-height: 19px;} #sub.business .centerflipcards_big .square-container2{padding: 80px 40px;} } @media screen and (max-width: 580px){ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 4rem; line-height: 50px;} .subtit {font-size: 1.4rem; line-height: 20px;} .homepage .subtit {margin-top: 15px;} .quick_btn.gap-25{gap: 15px;} .quick_btn .contactBtn {width: 72px; height: 72px;} .quick_btn .contactBtn span {font-size: 1.1rem;} .quick_btn .contactBtn span:first-child:after{width: 0.5rem; height: 0.5rem; top: 9px;} .section.mobilewebapp .swiper.l-swiper {width: 60vw;} .section.shopping .subtit, .landing.section .subtit {margin-bottom: 0;} #next-section .horizontal-scroll__header{padding-bottom: 30px;} .hoverbtn {width: 120px; height: 120px;} .hoverbtn b {font-size: 1.2rem; line-height: 12px;} .button-circle span{font-size: 1.2rem;} #sub.business .tit-area .tit-box h3 {font-size:2rem; line-height:30px;} #sub.business .tit-area .tit-box h3 b {font-size:2.5rem; line-height:33px;} #sub.business .big-circle-wrap .big-circle:nth-child(1) {width: 350px;height: 305px;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width: 500px;height: 500px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width: 700px;height: 700px;} #sub.hiring .process li .circle, #sub.business .work-wrap > li .circle, #sub.business .work-wrap li .circle .detail-con {top: calc(100% + 10px);} .btnSet.mt-100{margin-top: 50px !important;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 2.5rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 3rem; line-height: 35px;} .tag-area li, .tag-area li.mini{padding: 0 20px; min-height: 50px !important;} #sub.hiring .tag-area li:nth-child(1)::after, #sub.hiring .tag-area li:nth-child(7)::before, #sub.hiring .tag-area li:nth-child(7)::after {transform: scale(0.5);} .br580{display: block;} #sub.business .centerflipcards .square-flip .square .txt-wrap.mt-40 {margin-top: 12px !important;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding: 84px 30px 34px 45px !important;} .sub .portfolio .portfolio-list .txt {bottom: 15px; left: 15px;} .sub .portfolio .portfolio-list .txt span {font-size: 1.2rem;} .sub .portfolio .portfolio-list .txt p {font-size: 1.4rem; margin-top: 10px;} .sub .portfolio.mt-150{margin-top: 40px !important;} .tab-area li a {line-height: 40px; min-height: 40px; font-size: 1.4rem;} .sub .portfolio .infinite-list.mt-50{margin-top: 30px !important;} #sub.about .section2 .cont-area ul li p b {font-size: 7rem;} #sub.about .section2 .cont-area ul li em {font-size: 2.4rem; margin-top: 10px;} #sub.about .marquee {padding: 25px 0;} #sub.about .marquee_text::after{left: -21px;} #sub.about .marquee #sub.about .marquee_text + #sub.about .marquee_text, #sub.about .marquee .js-marquee + .js-marquee{margin-left: 29px;} #sub.about .marquee_text{font-size: 3.0rem;} #sub.about .section2 .section-body .section-inner {padding: 60px 0;} #sub.about .section3 {padding-top: 100px;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.6rem; padding: 18.5px 34px;} #sub.about .section3 .round {width: 36px; height: 36px; top: 18px; left: 38%;} #sub.about .section6 .section-body .section-inner{padding: 60px 0;} #sub.about .section1 .tit-area .tit-box h4 {font-size: 3rem; line-height: 38px;} #sub.about .section5 {padding-bottom: 60px;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 5rem;} #sub.about .section_history .history_year {left:63px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:84px;} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em{font-size: 1.8rem;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {font-size: 1.4rem; line-height: 26px; margin-top: 20px;} .sub .search-area .search-wrap{max-width: 321px; height: 50px;} .sub .search-area .search-wrap input[type="text"]{width: 321px;} .sub .search-area .placeholder, .sub .search-area .search-wrap input[type="text"]{font-size: 1.6rem;} .sub .search-area .search-wrap::before, .sub .search-area .search-wrap::after {width: 15px; height: 50px;} .sub .search-area .search-wrap::before{left: -20px;} .sub .search-area .search-wrap::after{right: -20px;} #sub.story .section ul.list li:hover .hover-img{width: 200px; height: 200px;} #sub.contact ~ .footer .footer-body .footer-inner > div.max1440.mt-100{margin-top: 30px !important} #sub.contact ~ .footer .footer-body .footer-inner .map-area iframe{height: 350px;} #sub.contact ~ .footer .footerWrap{padding-top: 30px;} #sub.portfolio.view-new .dateList.mt-80{margin-top: 40px !important;} #sub.portfolio.view-new .mt-50{margin-top: 30px !important;} .fs40 {font-size: 3rem; letter-spacing: -0.4px;} .fs28 {font-size: 2rem; line-height: 30px;} #sub.portfolio.view-new .section1 .txt-box, #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 50px 0;} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 30px;} #sub.portfolio.view-new .fs24 {font-size: 1.7rem; line-height: 26px;} #sub.portfolio.view-new .styleguide-list .color-list {margin-top: 30px !important;} #sub.portfolio.view-new .styleguide-list .color-list li{width: 100%; min-height: 100px;} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40 {gap: 10px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 19px 14.22px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico img {width: 44px; height: 34px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 250px; margin-bottom: 15px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60 {gap: 15px;} .fs50 {font-size: 3.0rem; line-height: 37px;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: 60px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 7rem; line-height: 80px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 1.8rem;} .footer .footer-body .footer-inner .right p.mt-50 {margin-top: 20px !important;} .footer .footer-body .footer-inner .right p span b.mt-20 {margin-top: 5px !important;} .lang-tab, .cate-tab{gap:5px;} .lang-tab li, .cate-tab li{font-size:1.2rem; min-width:auto; padding:0 10px;} .lang-box .original-txt, .lang-box .translation-txt, .cate-box-wrap .ai-pmt, .cate-box-wrap .ai-complt, .tts-box, .stt-box{padding:15px;} .lang-box .original-txt p, .lang-box .translation-txt p, .cate-box-wrap .ai-pmt p, .cate-box-wrap .ai-complt p, .tts-box p, .stt-box p{font-size:1.4rem;} .upload-box .loading-box{width:auto;} .loading-box{font-size:1.6rem;} .li4-sh-product{padding:15px;} .li4-ul li .ag-bn{height:auto; line-height:100%; padding:5px; width:40px;} .cate-box-wrap .loading-box{right:-20px; width:auto;} .ai-service-item5 .right{height:420px;} .cate-box-wrap .loading-box{top:70px;} .tts-box .loading-box, .stt-box .loading-box{top:-50px;} .chart-tab{gap:5px;} .chart-tab li{padding:10px; flex-direction: column;} .chart-wrap{padding:20px 0 13px 0;} #main .section1{padding:50px 0;} #main .section2{padding:80px 0;} .effect-list{grid-template-columns:repeat(1, 1fr); margin-top:30px;} .tts-box, .stt-box{bottom:20px;} .visual_btn .button-circle span{font-size:1.4rem;} .button-circle.visual_btn_request span{ font-size:1.6rem; } } @media screen and (max-width: 530px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:90px;} .transition-container2 {margin-top:-40px;} .transition-container > ul.text1, .transition-container > ul.text2 {padding-left:0;} .section_rolling .text2 li b::after {width:30px; height:20px; bottom:-3px;} .section_rolling .text1 li {font-size:5rem; letter-spacing:-2px !important;} .section_rolling .text2 li {font-size:6rem; letter-spacing:-6px !important;} .section_rolling .transition-container > ul li {line-height:60px !important;} .footerWrap .footer .area p span:last-child {display: block;} .footerWrap .footer .area p span:nth-of-type(2):after {display: none;} } @media screen and (max-width: 520px) { #sub.about .section.bg_b .tit-box b {font-size: 4.2rem;} #sub.about .section.bg_b .tit-box > p {font-size: 1.6rem; margin-top: 25px; line-height: 26px;} #sub.about .section.bg_b .tit-box > em {margin-top: 15px; font-size: 1.4rem; line-height: 22px;} #sub.about .section.bg_b .tit-box > em b{font-size: 1.4rem;} #sub.about .section3 .round {width: 30px; height: 30px; top: 22px; left: 35%;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.4rem; padding: 18.5px 26px;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -22px; margin-top: -20px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -37px; margin-top: -25px; } } #sub.about .section3 .canvas-wrapper canvas {right: calc(-51% + -22px);} } @media screen and (max-width: 500px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:5rem;} .main_visual p {font-size:1.8rem; line-height:24px;} /* ================================================== | 연혁 */ #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 4rem;} #sub.about .section_history .history_year {left:50px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:71px;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 3.2rem; } #mVisual .tit-box p{font-size: 1.4rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:40px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.1rem; margin-bottom:0;} #mVisual .cate-box-wrap{gap:5px;} } @media screen and (max-width: 480px){ .menu-overlay__heading, .menu-overlay > li > a{font-size: 4rem;} .header__burger.header__burger_opened{width: 50px; height: 50px;} .header__burger_opened .header__burger-line:nth-of-type(1), .header__burger_opened .header__burger-line, .pswp-custom-button__close-line, .header__burger_opened .header__burger-line:nth-of-type(1), .header__burger_opened .pswp-custom-button__close-line:nth-of-type(1), .header__burger_opened:hover .header__burger-line:nth-of-type(1){width: calc(1* 20* 1px);} .header__widget-content.h6{font-size: 1.6rem; line-height: 18px;} .subheading, .wp-block-latest-posts__post-date, .widget_categories ul li span, .comment-edit-link, .comment-reply-link, .comment-metadata{font-size: 1.4rem;} .header__col-widgets {padding-top: 30px; padding-bottom: 30px;} #sub.business .centerflipcards-wrap {gap: 2px;} #sub.business .centerflipcards-wrap .centerflipcards{grid-gap: 2px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip {min-height: 130px !important;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square-container{padding: 0 10px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .img-wrap{height: 30%; max-height: 50px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap.mt-40 {margin-top: 15px !important;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.4rem;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-container2 {padding: 80px 20px;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap b {font-size: 2.0rem;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap p, #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap p b {font-size: 1.3rem;} /* ================================================== | 메인 */ /* .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:4.7rem; line-height:57px;} .subtit {font-size:2.0rem; line-height:32px; margin-bottom: 20px;} */ .shopping h3 {font-size:2.6rem;} .section.design .subtit .block480 {display:block;} .section.mobilewebapp .swiper.l-swiper{height: 450px;} main .section.design .img-wrap .img-con li a h3{font-size: 3.0rem; top: 101%;} .homepage .js-horizontal-scroll__section.last-item{margin-top: 20px;} .footer .con ._ts {min-height:39px;} .typing-txt {font-size:3rem; } .typed-cursor {height:40px;} .footerWrap .footer .area .util .familySite {width:calc(100% - 115px); height: 50px;} .footerWrap .footer .area .util .familySite .cur{height: 50px; line-height: 50px;} .footerWrap .footer .area .util .social{height: 50px; width: 50px;} .footerWrap .footer .area .util .social.blog img{} .footerWrap .footer .area .util .social.instargram img{} /* ================================================== | 서브 */ .sub .portfolio .portfolio-list .txt p {font-size: 1.2rem;} .sub .portfolio .portfolio-list .txt span {font-size: 1.0rem;} .btnSet .main_btn p {font-size: 1.4rem;} #sub.business.maintenance .detail-table thead tr th{font-size: 1.4rem;} #sub.business.maintenance .detail-table tbody tr td b{font-size: 1.3rem;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5) em, #sub.business.maintenance .detail-table tbody tr td em{font-size: 1.2rem; line-height: 16px;} #sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5){line-height: 17.5px;} .tit-area .tit-box h1, .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:3rem; line-height: 35px;} .tit-area .tit-box h3 {font-size: 2rem; line-height: 28px;} .tit-area .tit-box h3 b{font-size: 2.5rem; line-height: 30px;} .tag-area li, .tag-area li.mini {font-size:1.2rem; min-height: 45px !important; padding: 0 15px;} .tit-area .tit-box h1 {font-size: 4rem; letter-spacing: 1px; line-height: 1;} /* #sub.about .section1 .tit-area .tit-box h4 {font-size: 2.6rem; line-height: 24px;} #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(7) {min-width:100px; max-width:100px;} #sub.hiring .tag-area li:nth-child(1)::after {right:-184px;} #sub.hiring .tag-area li:nth-child(2) {min-width:130px; max-width:130px;} #sub.hiring .tag-area li:nth-child(4) {gap:5px !important; min-width:110px; max-width:110px;} #sub.hiring .tag-area li:nth-child(6) {min-width:90px; max-width:90px;} #sub.hiring .tag-area li:nth-child(7)::before {width: 25px; height: 35px; bottom: -8px; left: -5px;} #sub.contact .tag-area li:nth-child(4) {min-width:120px; max-width:120px;} */ #sub.business .section {padding-top: 60px;} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding: 60px 30px;} #sub.business .work-wrap > li{width: 210px; height: 210px;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle{padding: 20px 30px 20px 45px !important; display: flex; flex-direction: column; justify-content: center; top: 0;} #sub.hiring .process li .circle span, #sub.business .work-wrap li .circle span{height: 50%; margin-top: 0; display: flex; align-items: end;} #sub.business .work-wrap > li .circle h5{height: 50%;} #sub.hiring .tag-area li:nth-child(2) {min-width: 130px !important; text-indent: -15px;} #sub.hiring .tag-area li:nth-child(2)::after {top: 0; right: 10px; transform: scale(0.7);} #sub.hiring .tag-area li:nth-child(4) img{transform: scale(0.8);} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-35{margin-top: 15px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-25{margin-top: 5px !important;} .header {height: 60px;} main.page-wrapper{padding-top: 60px;} .tab-area li a {line-height: 35px; min-height: 35px; font-size: 1.2rem; padding: 0 10px; min-width: 60px;} #sub.story .section ul.list li a{padding: 20px 0;} #sub.story .section ul.list li a .title, #sub.story_view .section .title{font-size: 2.0rem;} #sub.story .section ul.list li a .sub_con{font-size: 1.3rem; line-height: 20px; margin-top: 5px;} #sub.story .section ul.list li a .date{font-size: 1.0rem;} .tit-area .tit-box em, .tit-area .tit-box h4{font-size: 1.4rem; line-height: 18px;} .sub {padding-top: 40px; margin-top: 60px;} #sub.story .section, #sub.story_view {padding-bottom: 80px;} #sub.story_view .section .sub_con {padding: 20px 0;} ul.view-navi{padding: 30px 0;} .view-navi li.list a {padding: 15px 44.12px !important; font-size: 1.2rem;} .view-navi li.next a, .view-navi li.prev a{font-size: 1.2rem;} #sub.story_view .section .cont{padding: 30px 0; margin-top: 30px; font-size: 1.4rem; line-height: 25px;} .view-navi li{min-width: fit-content;} .view-navi li.next a, .view-navi li.prev a{transform: unset;} .sub .portfolio .infinite-list__image-item{margin-top: 20px;} .tab-area.gap-15{gap: 5px;} .sub .portfolio .infinite-list__item-header{bottom: 30px; left: 25px;} .sub .portfolio .infinite-list__item-header p{margin-top: 10px;} #sub.about .section2 .cont-area ul li em {font-size: 2rem;} #sub.about .section2 .cont-area ul li p {font-size: 2rem; margin-top: 15px;} #sub.about .section2 .cont-area ul li p b {font-size: 5rem;} #sub.about .section3 {padding-top: 60px;} #sub.about .section3 .section-column.mt-50 {margin-top: 120px !important;} #sub.about .section3 .canvas-wrapper canvas {transform: scale(1); top: -36px; right: -48%;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 5px !important;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 15.5px 23px;} #sub.about .section3 .round {top: 17px; left: 30vw;} #sub.about .section4 .workSwiper{padding-right: 20px;} #sub.about .section4 .work_wrap .work_list li {padding: 30px 20px;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img {height: 50px;} #sub.about .section4 .work_wrap .work_list li p {margin-top: 30px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 2.3rem; margin-top: 12px;} #sub.about .section4 .work_wrap .work_list li span {font-size: 1.2rem; line-height: 18px; margin-top: 20px; word-break: keep-all; min-height: 120px;} #sub.about .section .section-row .section-column.mt-80{margin-top: 40px !important;} #sub.about .section6 .withus_list {grid-template-columns: repeat(3, 1fr); grid-gap: 15px;} .search-area.mt-125{margin-top: 40px !important;} .sub .portfolio.mt-55{margin-top: 20px !important;} .sub .search-area .placeholder, .sub .search-area .search-wrap input[type="text"]{font-size: 1.4rem;} .sub .search-area .search-wrap{max-width: calc(100vw - 80px); height: 40px;} .sub .search-area .search-wrap input[type="text"]{width: calc(100vw - 80px); padding: 0 35px 0 0;} .sub .search-area .search-wrap::before, .sub .search-area .search-wrap::after {width: 15px; height: 40px;} .sub .search-area .search-wrap .btn_search {width: 30px !important; height: 30px !important; background-size: 13px 14px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 4.3rem; line-height: 50px; letter-spacing: -1px;} #sub.portfolio.view-new .fs18{font-size: 1.4rem; line-height: 20px !important; letter-spacing: -0.44px;} #sub.portfolio.view-new .fs24 {font-size: 1.6rem; line-height: 25px;} .fs200{font-size: 10rem;} .fs110 {font-size: 4.5rem; line-height: 65px;} .fs28 {font-size: 1.8rem; line-height: 25px;} .fs22 {font-size: 1.7rem;} .fs14 {font-size: 1.2rem; line-height: 15px;} #sub.portfolio.view-new .dateList li{gap: 7px;} #sub.portfolio.view-new .dateList li > em {width: 42px;} #sub.portfolio.view-new .dateList li + li {margin-top: 7px;} #sub.portfolio.view-new .dateList li > span {width: calc(100% - 49px);} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 25px;} #sub.portfolio.view-new .section1 .txt-box em.mt-30 {margin-top: 12px !important;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 125px;} #sub.portfolio.view-new .section5 .img img {width: 125px; height: 95px;} .fs50 {font-size: 2.8rem; line-height: 35px;} #sub.portfolio.view-new .section5 .txt b > br{display: none;} #sub.portfolio.view-new .section6 .feature-list {padding: 30px 0;} #sub.portfolio.view-new .section6 .feature-list .tit-box b {font-size: 1.8rem;} #sub.portfolio.view-new .section6 .feature-list .tit-box p {font-size: 1rem; line-height: 13px;} #sub.portfolio.view-new .pro_fea li{width: 120px; min-height: 110px; padding: 10px;} #sub.portfolio.view-new .pro_fea li .txt b {font-size: 0.6417rem;} #sub.portfolio.view-new .pro_fea li .txt em {font-size: 0.4933rem; line-height: 8px;} #sub.portfolio.view-new .pro_fea li .img img{width: 25.73px; height: 25.73px;}#sub.portfolio.view-new .pro_fea li + li {margin-left: 7px;} #sub.portfolio.view-new .section6 .marquee-wrap {margin-top: 16.25px;} #sub.portfolio.view-new .section7 .content-list .list > * {height: 350px;} #sub.portfolio.view-new .section8 .section-body .section-column.txt-box {padding: 50px 20px 40px;} #sub.portfolio.view-new .section9, #sub.portfolio.view-new .section10 {padding: 60px 0;} #sub.portfolio.view-new .section10 .view-navi {padding: 60px 0 0 0;} #sub.portfolio.view-new .section10 .txt-box em {line-height: 26px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 6rem; line-height: 70px;} #sub.portfolio.view-new .section9 .artlist{gap: 20px;} #sub.portfolio.view-new .section9 .artlist li + li {margin-top: 60px;} #sub.portfolio.view-new .section9 .art-img img{border: 5px solid transparent; box-sizing: border-box;} #sub.portfolio.view-new .section9 .artlist li + li .art-img + .art-img {margin-top: 30px;} .mt-70 {margin-top: 40px !important;} .contact-tit-area .tel-box{margin-top:10px; padding-left:40px; font-size:2.8rem; letter-spacing: -2px;} .contact-tit-area .tel-box:before{width:35px; height:35px; top:-8px;} } @media screen and (max-width: 460px){ /* ================================================== | 서브 */ #sub.business .tips-wrap li:nth-of-type(3) h4 br {display:block;} } @media screen and (max-width: 430px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:4rem;} .main_visual p {font-size:1.6rem; line-height:22px;} .section_rolling .text1 li {font-size:4.5rem;} .section_rolling .text2 li {font-size:5.5rem;} main .landing a.mt-80{margin-top: 40px !important;} /* ================================================== | 서브 */ /* #sub.business .work-wrap li .circle .detail-con {width: calc(100% - 140px); left: 140px;} #sub.business .work-wrap .detail-con li { padding-left: 13px;} */ #sub.business .work-wrap > li .circle h5 b {font-size:1.8rem !important;} /* #sub.business .work-wrap li .circle { width: 135px; height: 135px;} */ #sub.business .tit-area .tit-box h3 {font-size:1.6rem; line-height: 24px;} #sub.business .tit-area .tit-box h3 b {font-size:2.0rem; line-height: 29px;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 2rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 2.5rem; line-height: 30px;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.0rem;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap b{font-size: 1.2rem; margin-top: 5px;} .br430{display: block;} #sub.story .section ul.list li:hover .hover-img{width: 160px; height: 160px;} #sub.about .section_history .position_list .history_list {font-size: 1.2rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.3rem;} #sub.about .section_history .history_list > li + li {margin-top: 10px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -174px;} } @media screen and (max-width: 420px) { .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 3.5rem; line-height: 45px;} .subtit {font-size: 1.2rem; line-height: 18px;} #sub.about .section.bg_b .tit-box b {font-size: 3.5rem;} #sub.about .section.bg_b .tit-box b + b {margin-top: 4px;} #sub.about .section.bg_b .tit-box > p {font-size: 1.2rem; margin-top: 15px; line-height: 20px;} #sub.about .section.bg_b .tit-box > em {margin-top: 12px; font-size: 1.2rem; line-height: 20px;} #sub.about .section.bg_b .tit-box > em b {font-size: 1.2rem;} #sub.about .section3 .round {width: 27px; height: 27px; top: 14px; left: 30.5vw;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.3rem; padding: 13.5px 19px;} #sub.about .section4 .work_wrap .work_list li {padding: 20px;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img {height: 35px;} #sub.about .section4 .work_wrap .work_list li p {margin-top: 20px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 1.9rem; margin-top: 8px;} #sub.about .section4 .work_wrap .work_list li p em {font-size: 1.4rem;} #sub.about .section4 .work_wrap .work_list li span{min-height: 90px;} .sub .portfolio .portfolio-list{grid-template-columns: 1fr; gap: 5px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 5rem; line-height: 60px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 1.6rem; line-height: 1;} .header__col_right-menu .request-btn i{display:none !important;} .header__col_right-menu .request-btn{ padding:15px !important; width:60px;} } @media screen and (max-width: 400px) { #sub.about .section3 .canvas-wrapper canvas {transform: scale(0.8); top: 14px;} .br400{display: block;} #sub.portfolio.view-new .section7 .content-list .list > * {height: 300px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 4rem;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 1.5rem;} #sub.about .section_history .history_list .block400 {display: block;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 3.5rem;} #sub.about .section_history .history_year {left:45px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:65px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -156px;} #sub.about .section_history .position_list .history_list {margin-left: 20px;} } @media screen and (max-width: 380px){ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2{font-size: 3.0rem; letter-spacing: -0.8px; line-height: 37px;} .subtit {font-size: 1.4rem; line-height: 20px;} /* ================================================== | 서브 */ #sub.business .tips-wrap li h4 br {display:block;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 3px !important;} #sub.about .section3 .round {left: 28.5vw;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -22px; margin-top: -16px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -37px; margin-top: -21px; } } #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.2rem;} #sub.about .section3 .canvas-wrapper canvas {transform: unset; right: -59%;} } @media screen and (max-width: 364px){ /* ================================================== | 서브 */ #sub.hiring .agency li:first-of-type span br:last-of-type, #sub.hiring .agency li:nth-of-type(2) span br:last-of-type, #sub.hiring .agency li:last-of-type span br:last-of-type {display:block;} .br364{display: block;} } @media screen and (max-width: 360px){ /* ================================================== | 헤더 */ .menu-overlay__heading, .menu-overlay > li > a {font-size:4rem;} /* ================================================== | 메인 */ .main_visual h2 {font-size:3.5rem;} .main_visual p {font-size:1.4rem; line-height:20px;} .section_rolling .text2 li b::after {width:25px; height:15px; bottom:5px;} .section_rolling .text1 li {font-size:4rem;} .section_rolling .text2 li {font-size:5rem;} .footerWrap .footer .area .util {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; gap:10px 5px;} .footerWrap .footer .area .util .familySite {width:100%;} .typing-txt {font-size:2.5rem;} .typed-cursor {height:35px; } .footer .con ._ts {min-height:33px;} .contactUsWrap.con, main.page-wrapper .contactUsWrap.con {height:500px;} /* ================================================== | 서브 */ .tit-area .tit-box h3 {font-size:2rem; line-height:30px;} .tit-area .tit-box h3 b {font-size:2.5rem; line-height:35px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.5rem; line-height:23px;} .contact .check-box > input[type="checkbox"] ~ label {line-height:20px; flex-grow:1;} .contact .check-box a {flex-shrink: 1; width: 45px; padding: 5px; text-align: center;} #sub.business .work-wrap {grid-template-columns:1fr 1fr;} #sub.business .work-wrap > li:last-of-type {grid-column:1 / 3;} #sub.business .work-wrap > li .circle {margin:0 auto;} #sub.business .work-wrap > li .circle .detail-con {top: 145px; width: 100%; left: 50%; transform: translate(-50%, 0);} #sub.business .work-wrap > li:nth-of-type(2) .circle .detail-con, #sub.business .work-wrap > li:nth-of-type(4) .circle .detail-con {padding-left:10px;} .br360{display: block;} } @media screen and (max-width: 340px){ /* ================================================== | 서브 */ .contact .check-box > input[type="checkbox"] ~ label .block360 {display:block;} } /* 반응형 */ @charset "utf-8"; /* CSS Document */ @media (pointer: coarse) { html, body { overflow-x: hidden; position: relative; height: auto; -webkit-overflow-scrolling: touch; } .has-smooth-scroll { overflow: auto !important; height: auto !important; } .horizontal-scroll.has-horizontal-scroll { overflow: auto; -webkit-overflow-scrolling: touch; } .auto-scroll-next__button-hover, .auto-scroll-next_scrolling .auto-scroll-next__button-hover { display: none; } } @media screen and (max-width: 2400px){ /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2{font-size: 8rem;} .subtit {font-size: 2.6rem; line-height:35px;} } @media screen and (max-width: 1920px){ .quick_btn.on {bottom: 949px;} /* ================================================== | 메인 */ .subtit{font-size: 2.4rem; line-height: 30px;} .br1920{display: block;} .section.mobilewebapp .section-body, main .section.design .section-body{max-width: 1480px;} .section.mobilewebapp .text li a{font-size:5rem;} .section.mobilewebapp .text.gap-50{gap:40px;} .section.mobilewebapp .swiper{max-width: 300px; height: 550px;} .section.mobilewebapp .swiper .swiper-slide a {padding: 12.7px 15px;} /* ================================================== | 서브 */ #sub.about .section3 .canvas-wrapper{transform: scale(1.3);} #sub.about .section3 .canvas-wrapper canvas{top: -25%; left: 22vw; position: absolute;} #sub.contact ~ .footer{height: fit-content;} #sub.contact ~ .footer .footer-body .footer-inner > div.max1440.mt-100{margin-top: 60px !important} #sub.contact ~ .footer .footer-body .footer-inner .map-area iframe{height: 500px;} #sub.contact ~ .footer .footerWrap{padding-top: 60px;} } @media screen and (max-width: 1850px){ /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:7rem; line-height:80px;} .homepage .subtit .block1850 {display:block;} /* ================================================== | 서브 */ #sub.contact .visual-wrap {padding:83px 100px;} } @media screen and (max-width: 1780px) { #sub.about .section3 .canvas-wrapper canvas {right: -54%; left: unset;} } @media screen and (max-width: 1700px){ /* ================================================== | 메인 */ .section_rolling .text1 li {font-size:18rem;} .section_rolling .text2 li {font-size:22rem;} .section_rolling .text2 li b::after {width:135px;} } @media screen and (max-width: 1600px){ /* ================================================== | 메인 */ .has-horizontal-scroll .hs-col-lg-4 {width:40% !important;} /* .contactUsWrap.con {padding-bottom:unset; height:850px;} */ .con ._t.tit.sub {font-size:7rem; line-height:80px;} /* ================================================== | 서브 */ #sub.hiring .visual-wrap, #sub.contact .visual-wrap {padding:70px;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area {width: 50%;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {white-space: nowrap;} /* #sub.hiring .tag-area {left:30px; flex-grow:1; max-width: 50%; min-height:430px;} */ #sub.contact .tag-area {flex-grow:1; max-width: 50%; min-height:423px;} /* #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(2), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:200px; max-width:200px;} #sub.hiring .tag-area li:nth-child(1) {left:unset; right:370px;} #sub.hiring .tag-area li:nth-child(1)::after {right:-114px;} #sub.hiring .tag-area li:nth-child(2) {text-indent:-23px;} #sub.hiring .tag-area li:nth-child(2)::after {right:16px;} #sub.hiring .tag-area li:nth-child(3) {left:unset; right:270px;} #sub.hiring .tag-area li:nth-child(5) {left:unset; right:330px;} #sub.hiring .tag-area li:nth-child(7) {left:unset; right:300px;} #sub.hiring .tag-area li:nth-child(7)::after {background-size:40px;} #sub.contact .tag-area li:nth-child(1) { max-width: 150px; min-width: 150px; right: 370px;} #sub.contact .tag-area li:nth-child(2) { max-width: 170px; min-width: 170px; left: unset; right: 330px;} #sub.contact .tag-area li:nth-child(3) { max-width: 190px; min-width: 190px;} #sub.contact .tag-area li:nth-child(4) { max-width: 120px; min-width: 120px; left: unset; right: 240px;} #sub.contact .tag-area li:nth-child(5) { max-width: 230px; min-width: 230px;} #sub.contact .tag-area li:nth-child(6) { max-width: 170px; min-width: 170px; right: 320px;} #sub.contact .tag-area li:nth-child(7) { max-width: 200px; min-width: 200px; right: 60px;} #sub.contact .tag-area li:nth-child(8) { max-width: 240px; min-width: 240px; left: unset; right: 220px;} */ #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:100px 70px;} #sub.hiring .tag-area li:nth-child(2) {min-width: 220px !important;} #sub.hiring .tag-area li:nth-child(2)::after{right: 27px;} #sub.hiring .tag-area li:nth-child(7)::after {top: -39px; right: -17px;} } @media screen and (max-width: 1500px){ /* ================================================== | 메인 */ main .main_visual .pc-img {display:none;} main .main_visual .ta-img {display:block;} .transition-container2 {margin-top:-140px;} .section_rolling .transition-container > ul li {line-height:166px;} .section_rolling .text1 li {font-size:14rem;} .section_rolling .text2 li {font-size:17rem;} .section_rolling .text2 li b::after {width:110px;} .realItrcCont .realItrcCon .h3 {font-size: 5.4rem;} /* ================================================== | 서브 */ #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left:30px;} #sub.hiring .process li .txt {padding: 0 50px 0 0; word-break: keep-all; word-wrap: break-word;} #sub.hiring .process li .txt br {display:none;} .popup .popup-inner .left-cont {padding:80px;} #policy1.popup .popup-inner .right-cont {padding:90px 80px 80px 80px;} #policy1.popup .popup-inner .left-cont p {margin-bottom:0;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding:104px 30px 84px 45px !important;} #sub.business .work-wrap::after {width:calc(100% - 90px); left:45px; top:calc(50% - 16px);} #sub.business .work-wrap > li .circle h5 {margin-top:20px !important; } .tag-area li {max-width: unset !important; min-width: unset !important; padding: 0 40px; min-height: 70px !important; font-size: 2.0rem; box-sizing: border-box;} #sub.contact .tag-area li:nth-child(4) {left: 148px;} #sub.about .section3 .canvas-wrapper canvas {right: -56%; left: unset;} #sub.portfolio.view-new .styleguide-list .color-list{gap: 20px;} #sub.portfolio.view-new .styleguide-list .color-list li {padding: 25px;} } @media screen and (max-width: 1360px){ /* ================================================== | 헤더 */ .header:not(.opened) .header__burger:hover .header__label-burger_closed-hover, .header.opened .header__burger:hover .header__label-burger_opened-hover {opacity:0; transform:translateY(100%);} .menu-overlay__heading, .menu-overlay > li > a {font-size:8rem;} .header__col-widgets-box {height:540px;} /* .logo__wrapper-img img{width: 150px;} */ .header__burger{min-width: unset;} .menu-classic > li a {padding:0 20px;} .con ._t.tit.sub {font-size:6rem; line-height:70px;} /* ================================================== | 서브 */ .square-flip {min-height:500px;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.8rem} #sub.business .work-wrap::after {top:calc(50% - 7px);} #sub.business .tips-wrap li p {font-size:2.5rem;} #sub.business .tips-wrap li p strong {font-size:9rem;} #sub.portfolio.view-new .section7 .content-list .txtbox{padding: 30px; padding-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .ri .imgbox {margin-left: 26px;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox {margin-right: 30px;} } @media screen and (max-width: 1280px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:9rem;} .main_visual p {font-size:2.3rem; line-height:30px;} .section_rolling .text1 li {font-size:12rem;} .section_rolling .text2 li {font-size:15rem;} .section_rolling .text2 li b::after {width:90px;} #next-section .horizontal-scroll__header {padding-right:20px; padding-left:40px;} .section.design{margin-top: 100px !important;} .section.mobilewebapp .infinite-list__heading-item h2.h3, .landing .pricing-table__header h3 {font-size:3.6rem;} .section-portfolio-grid__col-grid .js-grid__item{margin-top: 30px;} .footer .con ._ts {min-height:117px;} .typing-txt {font-size: 8rem;} .typed-cursor {height:100px; } .section.mobilewebapp .text.gap-50{width: 50% !important; gap: 30px;} .section.mobilewebapp .text li a {font-size: 4rem;} .section.mobilewebapp .mockup-wrapper.gap-50{gap: 30px;} /* ================================================== | 서브 */ .tit-area .tit-box h3 {font-size:4.5rem; line-height:55px;} .tit-area .tit-box h3 b {font-size:5rem; line-height:65px;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap {padding: 50px;} #sub.hiring .tit-area .tit-box h5, #sub.contact .tit-area .tit-box h5 {font-size:2rem; margin-top:30px !important;} .tag-area li {min-height:70px; font-size:1.8rem;} #sub.hiring .tag-area li:nth-child(2){top: 50px;} #sub.hiring .tag-area li:nth-child(3){top: 108px;} #sub.hiring .tag-area li:nth-child(6) {right: 134px;} /* #sub.hiring .tag-area {left:unset;} #sub.hiring .tag-area li:nth-child(1) {right:320px; top:50px;} #sub.hiring .tag-area li:nth-child(1)::after {background-size:400px;} #sub.hiring .tag-area li:nth-child(2) {right:61px; top:133px;} #sub.hiring .tag-area li:nth-child(2)::after {top:11px;} #sub.hiring .tag-area li:nth-child(3) {right:220px; top:158px;} #sub.hiring .tag-area li:nth-child(4) {right:0; bottom:140px;} #sub.hiring .tag-area li:nth-child(5) {right:280px; bottom:120px;} #sub.hiring .tag-area li:nth-child(6) {right:49px; bottom:80px;} #sub.hiring .tag-area li:nth-child(7) {right:250px; bottom:40px;} */ #sub.hiring .process {display: block; overflow-x: scroll;} #sub.hiring .process li .circle {max-width:280px; max-height: 280px; padding:101px 86px} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {max-width:250px; max-height: 250px; } #sub.hiring .process li {max-width:280px;} #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left:-30px;} #sub.hiring .process::after {width: calc(100% - 147px); top:28%;} #sub.hiring .process li .txt {padding: 0 20px 0 0; margin-top:30px !important; margin-left:20px;} /* #sub.contact .tag-area li:nth-child(1) {right:270px;} #sub.contact .tag-area li:nth-child(2) {right:220px; top:66px;} #sub.contact .tag-area li:nth-child(2)::after {width:35px;} #sub.contact .tag-area li:nth-child(3) {right:50px; top:80px;} #sub.contact .tag-area li:nth-child(4) {top:150px;} #sub.contact .tag-area li:nth-child(5) {min-height:73px; top:170px;} #sub.contact .tag-area li:nth-child(6) {top:240px; right:220px;} #sub.contact .tag-area li:nth-child(8) {max-width: 200px; min-width: 200px; right: 150px;} #sub.contact .tag-area li:nth-child(8)::before {width:20px; left:-28px;} #sub.contact .tag-area li:nth-child(8)::after {width:30px; bottom:1px;} */ #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:80px 40px;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {margin-top:50px;} #sub.business .work-wrap > li .circle h5 {font-size:1.8rem;} #sub.business .work-wrap > li .circle h5 b {font-size:2.4rem;} #sub.business .work-wrap::after {top:calc(50% - 3px);} /* #sub.business .square-flip, #sub.business.design .square-flip, #sub.business.marketing .square-flip, #sub.business.maintenance .square-flip {width:calc(50% - 22px); min-height: 450px;} */ #sub.business.maintenance .tbl-wrap{overflow-y: scroll; padding: 0 5px 10px;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table thead tr th{padding: 10px;} #sub.business .big-circle-wrap .big-circle {width:350px; height:350px;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width:500px; height:500px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width:700px; height:700px;} #sub.hiring .section2 .cont-wrap{overflow-x: scroll; overflow-y: visible;} #sub.hiring .process {min-width: 1280px;} #sub.business .square-flip{min-height: 400px;} #sub.business .centerflipcards{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; width: 100%; margin-left: 0;} #sub.business.design .centerflipcards, #sub.business.marketing .centerflipcards, #sub.business.maintenance .centerflipcards, #sub.business.ai .centerflipcards{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; width: 100%; margin-left: 0;} #sub.business .centerflipcards .square-flip .square-container{padding: 0 20px;} #sub.business .centerflipcards > *{width: 100% !important;} #sub.business .centerflipcards .square-flip{margin-left: 0;} #sub.business .centerflipcards .square-flip .img-wrap{ height: 50%;} #sub.business .centerflipcards .square-flip .img-wrap img{height: 100%;} #sub.business .centerflipcards .square-flip .img-wrap svg{width: 100%; height: 100%;} #sub.business .centerflipcards1 .square-flip .txt-wrap b{font-size: 2.5rem;} #sub.business .square-container2{padding: 0 20px;} #sub.business .centerflipcards .square-flip .img-wrap{width: 100%;} .svg-animation-container, .svg-animation-container3, .svg-animation-container4{width: 100% !important; height: 100% !important;} .square-flip .txt-wrap em {font-size: 1.4rem;} .square-flip .txt-wrap p {font-size: 1.3rem; line-height: 24px;} .sub .portfolio .infinite-list__marquee-row{margin-top: -30px; margin-left: -30px;} #sub.about .section2 .cont-area ul li p b{font-size: 12rem;} #sub.about .section2 .section-column, #sub.about .section_history .section-column1{max-width: 445px;} #sub.about .section2 .section-column + .section-column, #sub.about .section_history .section-column + .section-column{width: calc(100% - 445px);} #sub.about .section3 .section-column.mt-50{margin-top: 100px !important;} #sub.about .section3 .txt-wrap > li > ul > li{padding: 30.5px 57px; height: fit-content;} #sub.about .section3 .txt-wrap > li > ul.gap-30{gap: 20px !important;} #sub.about .section3 .round{top: 35px;} #sub.about .section4 .work_wrap {padding-top: 165px;} #sub.about .section6 .withus_list{grid-template-columns: repeat(6, 1fr);} #sub.about .section_history .img-area .img-box {width: 70%;} #sub.about .section_history #fix-year {max-width: 107%;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 7rem;} #sub.about .section_history .position_list .history_list {font-size: 1.4rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.6rem;} #sub.about .section_history .history_list > li + li {margin-top: 20px;} #sub.about .section_history .position_list + .position_list {margin-top: 80px;} #sub.about .section_history.pin-going .last_position_list.on {margin-top: 160px !important;} /* #sub.about .section_history .last_position_list {margin-top: 100px !important;} */ #sub.about .section_history .last_position_list {margin-top:120px !important;} #sub.about .section_history .last_position_list.on {margin-top: 70px !important;} #sub.about .section_history .history_year {padding-left: 90px;} #sub.about .section_history .section-column2 {margin-left: auto; } #sub.about .section_history .position_list {margin-left: -90px;} #sub.about .section_history .cont-area .last_position_list > li:nth-child(2) {margin-top: -140px;} .fs200{font-size: 18rem;} .fs110 {font-size: 9rem; line-height: 106px; letter-spacing: -2.3px;} .fs40 {font-size: 3.5rem; line-height: 40px; letter-spacing: -0.6px;} .fs28 {font-size: 2.5rem; line-height: 45px;} .fs24 {font-size: 2.0rem; line-height: 36px; letter-spacing: -0.72px;} #sub.portfolio.view-new .section1 .txt-box {padding: 100px 0;} #sub.portfolio.view-new .txt-box.gap-100{gap: 70px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 150px 0;} #sub.portfolio.view-new .styleguide-list .color-list{gap: 15px; flex-wrap: wrap;} #sub.portfolio.view-new .styleguide-list .color-list li {min-height: 350px; border-radius: 130px;} #sub.portfolio.view-new .mt-160 {margin-top: 100px !important;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 230px;} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40{gap: 25px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 29px 24.22px;} #sub.portfolio.view-new .section4 .section-column {max-width: 470px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60{gap: 40px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 340px; margin-bottom: 40px;}#sub.portfolio.view-new .section7 .content-list .list {gap: 38px;} #sub.portfolio.view-new .section9 {padding: 146px 0 166px;} .br1280{display: block;} #sub.portfolio.view-new .section7 .content-list .txtbox span {line-height: 22px; margin-top: 6px;} } @media screen and (max-width: 1210px){ /* ================================================== | 서브 */ #sub.hiring .agency li h4 .block1210 {display:block;} #sub.hiring .agency li:not(:last-of-type) span {margin-top:106px;} #sub.hiring .agency li:first-of-type span br:first-of-type {display:none;} #sub.business .work-wrap::after {top:calc(50% - 9px);} #sub.business .work-wrap > li .circle .detail-con {left:20px; width:calc(100% - 20px); top: calc(100% + 12px);} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding:90px 30px 84px 45px !important;} #sub.contact .tag-area{transform: scale(0.9); transform-origin: right; max-width: 55%;} .tit-area .tit-box h3 {font-size: 4.3rem;} .tit-area .tit-box h3 b{font-size: 4.8rem;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area{width: 45%;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 7rem; line-height: 120%;} #mVisual .tit-box p{font-size: 2.4rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:50px; } #mVisual .cate-box p{font-size: 1.6rem;} .contact-tit-area{flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important;} .contact-tit-area .tel-box{margin-top:20px; padding-left:65px;} .contact-tit-area .tel-box:before{width:60px; height:60px; top:-8px;} } @media screen and (max-width: 1195px){ #sub.about .section_history .last_position_list {margin-top: 80px !important;} #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} /* #sub.about .section_history .last_position_list.on {margin-top: 28px !important;} */ } @media screen and (max-width: 1150px){ /* ================================================== | 헤더 */ .menu-classic > li a {padding:0 15px; font-size:1.6rem;} /* ================================================== | 메인 */ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:5.9rem; line-height:70px;} .con ._t.tit.sub {font-size:5rem; line-height:60px;} /* ================================================== | 서브 */ #sub.hiring .process li .txt {padding: 0 40px 0 0; margin-left:40px;} #sub.hiring .process li .circle span, #sub.hiring .process li .circle b {left: 0} #sub.hiring .process li .circle{padding: 101px 55px;} #sub.portfolio.view-new .section8 .txt-box em > br{display: none;} } @media screen and (max-width: 1120px){ /* ================================================== | 서브 */ .square-flip {min-height:550px;} #sub.contact ~ .footer .footer-body .footer-inner .txt-area {display:block;} #sub.contact ~ .footer .footer-body .footer-inner .right {margin-top:50px;} #sub.business .visual-wrap.bg_b h5 br:nth-of-type(2), #sub.business .visual-wrap.bg_b h5 b br {display:none;} #sub.business .work-wrap > li .circle h5 {margin-top: 10px !important;} } @media screen and (max-width: 1100px){ /* ================================================== | 메인 */ .section.mobilewebapp .swiper {max-width: 250px; height: 500px;} .section.mobilewebapp .text li a {font-size: 3.5rem;} /* ================================================== | 서브 */ #sub.business .work-wrap::after {top:calc(50% - 5px);} #sub.business .work-wrap > li .circle h5 b {font-size:2.2rem !important;} #sub.business .work-wrap li .circle .detail-con li {line-height:19px;} #sub.business .work-wrap li .circle .detail-con li + li {margin-top:3px;} #sub.business .section2 .section-body{padding: 0 0 0 20px;} #sub.about .section5 .organization_wrap .cont-wrap{margin-left: 0;} .pcsvg{display: none;} .mosvg{display: block; margin: 0 auto;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap{flex-direction: column;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area{width: 100%; text-align: center;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3{font-size: 4rem; white-space: unset;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 4.5rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 > br, #sub.contact .visual-wrap .tit-area .tit-box h3 > br{display: none;} #sub.contact .tag-area, #sub.hiring .tag-area{ transform: unset; max-width: 100%; margin-top: 50px;display: flex; min-height: 100%; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; padding-bottom: 20%;} .tag-area li{position: relative !important; top: unset !important; left: unset !important; right: unset !important; bottom: unset !important;} #sub.hiring .tag-area li:nth-child(1)::after, #sub.hiring .tag-area li:nth-child(7)::before, #sub.hiring .tag-area li:nth-child(7)::after{transform: scale(0.7);} #sub.hiring .tag-area li:nth-child(2) {min-width: 177px !important; text-indent: -26px;} #sub.business .square-flip {min-height: 400px;} #sub.business .centerflipcards .square-flip .img-wrap {height: 40%;} #sub.business .centerflipcards .square-flip .square .txt-wrap b{font-size: 2.3rem;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 15rem; line-height: 160px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 3.0rem;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: -162px;} #sub.business .tab-area{justify-content: flex-start !important;} } @media screen and (max-width: 1099px){ #sub.about .section_history .last_position_list.on {margin-top: 29px !important;} } @media screen and (max-width: 1071px){ #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} } @media screen and (max-width: 1052px){ #sub.about .section_history .last_position_list.on {margin-top: -12px !important;} } @media screen and (max-width: 1025px){ #sub.about .section_history .last_position_list.on {margin-top: -33px !important;} } @media screen and (max-width: 1024px){ /* ================================================== | 헤더 */ .header {padding:0 20px;} .header__burger.header__burger_opened {margin:30px 0 0 0;} /* ================================================== | 메인 */ main .main_visual.section {margin:0 20px;} main .main_visual {width:calc(100% - 40px);} main .section {margin:100px auto 0;} .section_rolling .height-container {min-height:220px;} .section_rolling {padding:0 20px;} .section_rolling .text1 li {font-size:10rem;} .section_rolling .text2 li {font-size:13rem;} .section_rolling .text2 li b::after {width:70px; height:30px; bottom:3px} .transition-container2 {margin-top:-70px;} .section_rolling .transition-container > ul li {line-height:130px;} .shopping.section .section-row > *:first-child{width: 45% !important;} .shopping.section .section-row > *:last-child{width: 55% !important;} .section.shopping h3 {font-size: 3rem;} .homepage .pt-header-height {padding-top:0px;} #next-section .horizontal-scroll__header {padding-top:0;} .section.design .infinite-list__images {padding:0 20px;} #sub.portfolio.view-new .tit-area .tit-box h1{font-size: 10rem; line-height: 110px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 2.5rem; line-height: 31px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 120px 0;} .footerWrap .footer {padding: 50px 20px;} .footerWrap .footer .area p span:last-child {display:block;} .footerWrap .footer .area p span:nth-of-type(2):after {display:none;} .footer .con ._ts {min-height:104px;} .typing-txt {font-size:8rem;} .typed-cursor {height:90px; } /* ================================================== | 서브 */ #sub.about .section1 .video_wrap{width: 500px; height: calc(100vh - 160px);} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em {font-size:2.2rem; line-height:30px; word-break: keep-all; word-wrap: break-word;} .tit-area .tit-box h1 {font-size:8rem; letter-spacing:4px; line-height: 55px;} .section .section-row .section-column.mt-100 {margin-top:60px !important;} .tit-area .tit-box h3 {font-size:3.5rem; line-height:45px;} .tit-area .tit-box h3 b { font-size: 4rem; line-height: 50px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.8rem;} #sub.hiring .section{padding-top: 100px;} #sub.hiring .section4.mt-200{margin-top: 100px !important; padding-top: 30px;} #sub.hiring .tag-area, #sub.contact .tag-area {min-height:280px;} #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(2), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:150px; max-width:150px;} .tag-area li {min-height:60px;} .tag-area li.mini {min-height:50px;} .tag-area li,.tag-area li.mini {font-size:1.6rem;} /* #sub.hiring .tag-area li:nth-child(1) {right:200px; top:20px;} #sub.hiring .tag-area li:nth-child(1)::after {bottom: -102px; background-size: 300px; right:-145px} #sub.hiring .tag-area li:nth-child(2) { right: 30px; top: 80px;} #sub.hiring .tag-area li:nth-child(2)::after {right: 12px; width: 20px; height: 30px;} #sub.hiring .tag-area li:nth-child(3) {right: 160px; top: 90px;} #sub.hiring .tag-area li:nth-child(4) {right: 0; bottom: 70px; gap: 10px !important;} #sub.hiring .tag-area li:nth-child(4) img {width:25px;} #sub.hiring .tag-area li:nth-child(5) { right: 210px; bottom: 65px;} #sub.hiring .tag-area li:nth-child(6) { right: 49px; bottom: 30px;} #sub.hiring .tag-area li:nth-child(7) { right: 200px; bottom: 0;} #sub.hiring .tag-area li:nth-child(7)::before {width:30px; height:40px; bottom:-8px; left:-6px;} #sub.hiring .tag-area li:nth-child(7)::after {background-size:100% 100%; width:30px; height:30px; top:-14px; right:14px;} #sub.contact .tag-area li:nth-child(1) {min-width:130px; max-width:130px; right: 220px; top: 0;} #sub.contact .tag-area li:nth-child(2) {min-width:120px; max-width:120px; right: 180px; top: 40px;} #sub.contact .tag-area li:nth-child(3) {min-width:120px; max-width:120px; top: 50px;} #sub.contact .tag-area li:nth-child(4) {min-width:100px; max-width:100px; top: 120px; right: 180px;} #sub.contact .tag-area li:nth-child(5) {min-height:60px; min-width:190px; max-width:190px; top: 130px;} #sub.contact .tag-area li:nth-child(5) img {width:20px;} #sub.contact .tag-area li:nth-child(6) {min-width:110px; max-width:110px; top:155px; right: 220px;} #sub.contact .tag-area li:nth-child(7) {min-width:130px; max-width:130px; bottom: unset; top: 210px;} #sub.contact .tag-area li:nth-child(8) {min-width:160px; max-width:160px; right: 180px;} */ #sub.hiring .process li .txt {margin-left:50px;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.6rem;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.8rem;} #sub.business .work-wrap::after {top:calc(50% + 2px);} #sub.business .section{padding-top: 100px;} #sub.business .section3{padding-bottom: 100px;} #sub.business .tips-wrap li p {font-size:2rem;} #sub.business .tips-wrap li p strong {font-size:7rem; line-height:46px;} #sub.hiring .agency li:first-of-type span br:last-of-type {display:none;} .popup .popup-inner .left-cont {padding:40px;} #policy1.popup .popup-inner .right-cont {padding:90px 40px 40px 40px;} .popup .popup-title h4 {font-size:2.3rem;} .popup .popup-title h2 {font-size:4.7rem} .sub{padding-top: 60px; margin-top: 70px;} #sub.story .section {padding-bottom: 120px;} #sub.story .section ul.list li a{padding: 50px 0;} #sub.story .section ul.list li a .title, #sub.story_view .section .title{font-size: 3.5rem;} #sub.story_view {padding-bottom: 143px;} #sub.story_view .section .cont{padding: 60px 0; margin-top: 60px;} .sub .portfolio.mt-150{margin-top: 100px !important;} .tab-area.gap-15{gap: 10px;} #sub.about .section2 .cont-area ul li p b{font-size: 10rem;} #sub.about .section2 .section-column{max-width: 360px;} #sub.about .section2 .section-column + .section-column{width: calc(100% - 360px);} #sub.about .section2 .cont-area ul li:nth-child(2) {margin-left: -40px;} #sub.about .section.bg_b .tit-box b{font-size: 7.0rem;} #sub.about .section.bg_b .tit-box b + b{margin-top: 20px;} #sub.about #sub.about .marquee{padding: 29px 0;} #sub.about #sub.about .marquee_text {font-size: 3.5rem; line-height: 1;} #sub.about .section3 .txt-wrap > li > ul > li{font-size: 2.0rem;} @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -79px; margin-top: -47px; } } #sub.about .section4 .work_wrap .work_list li{padding: 50px;} #sub.about .section4 .work_wrap .work_list li p{margin-top: 50px;} #sub.about .section6 .section-body .section-inner{padding: 150px 0;} #sub.about .section5 {padding-bottom: 150px;} #sub.about .section_history .tit-area .tit-box h3 {font-size: 3.5rem; line-height: 45px;} #sub.about .section_history .tit-area .tit-box h3 b {font-size: 4rem; line-height: 50px;} #sub.about .section_history .img-area .img-box {width: 63%;} #sub.about .section_history #fix-year {max-width: 91%;} #sub.about .section_history .position_list {margin-left: -180px;} #sub.about .section_history .history_year {padding-left: 109px;} #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} #sub.portfolio.view-new .dateList.mt-80{margin-top: 60px !important;} #sub.portfolio.view-new .mt-50{margin-top: 40px !important;} .typography-list{flex-direction: column;} #sub.portfolio.view-new .section4 .section-column {max-width: 440px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60, #sub.portfolio.view-new .section4 .section-row {gap: 25px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 290px; margin-bottom: 25px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv .txt-box{padding: 20px;} #sub.portfolio.view-new .section5 .img img{width: 200px; height: 116px;} #sub.portfolio.view-new .section5{padding: 100px 0;} .fs50 {font-size: 4rem; line-height: 53px;} #sub.portfolio.view-new .pro_fea li .txt em br, #sub.portfolio.view-new .section7 .txt-box em > br{display: none;} .pc-1024{display: none !important;} .mo-1024{display: flex !important;} #sub.portfolio.view-new .section10 .view-navi {padding: 100px 0 0 0;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: 80px;} #sub.portfolio.view-new .section9 .artlist{align-items: start !important; -webkit-box-align: start; -moz-align-items: start; -ms-flex-align: start; justify-content: center !important; -webkit-box-pack: center !important; -moz-justify-content: inherit; -ms-flex-pack: inherit;} #sub.portfolio.view-new .section9 .artlist li{width: 50%;} #sub.portfolio.view-new .section9 .artlist li + li{margin-top: 80px;} #sub.portfolio.view-new .section9 .artlist li + li .art-img + .art-img{margin-top: 50px;} #sub.portfolio.view-new .section9 .artlist > li:first-child .art-img + .art-img{width: 114%;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 6rem; line-height: 120%;} #mVisual .tit-box p{font-size: 2rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:50px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.4rem;} #mVisual .cate-box-wrap{gap:10px;} } @media screen and (max-width: 1009px){ #sub.about .section_history .last_position_list.on {margin-top: 30px !important;} } @media screen and (max-width: 991px){ /* ================================================== | 헤더 */ .header {height:70px;} main.page-wrapper{padding-top: 70px;} .header__bar .logo__wrapper-img img {width:150px;} .menu-overlay {padding:0;} .menu-overlay__heading, .menu-overlay > li > a {font-size:6rem;} .header__col-overlay {padding-bottom:50px;} .header__col-widgets {padding-top:50px; padding-bottom:50px;} .header__col-widgets-box {height:auto;} .header__widget + .header__widget {margin-top:20px;} /* ================================================== | 메인 */ .horizontal-scroll__section {transition: none !important; width: 100% !important;} .homepage .subtit {margin-top:30px; margin-bottom:0;} .homepage .horizontal-scroll__section {height:auto !important;} .homepage .realItrcCont .realItrcCon .h3 {padding-bottom:50px;} .homepage .js-horizontal-scroll__section.last-item {height:auto !important; width:100%; margin-top: 40px;} #next-section .horizontal-scroll__header {padding-left:0; padding-right:0; padding-bottom: 40px;} .section.shopping .mo-txt-box {display:block !important; height:auto !important;} .section.shopping .mo-txt-box > .p-gutters {height:auto !important;} .section.shopping .tit-txt {text-align:center;} .section.mobilewebapp .pc-box {display:none !important;} .section.mobilewebapp .canvas-wrapper {width:60vw; left:50%; transform:translateX(-50%);} .section.mobilewebapp .infinite-list__images-lane {width:60%; left:50%; transform:translateX(-50%);} .section.mobilewebapp h2.h2 {font-size: 4rem; line-height: 50px; margin-top: 20px !important;} .section.design .infinite-list__content {display:block !important;} .section.design .infinite-list__content, .section.design .infinite-list__content > .infinite-list__header {position:static; transform:unset;} main .section.design .img-wrap .img-con li a h3{top: 95%; transform: translateX(-50%); opacity: 1; color: #0C0C0D; font-size: 3.2rem; text-align: end;} main .section.design .img-wrap .img-con li:nth-child(even) a h3{text-align: start;} main .section.design .img-wrap .img-con li a .subheading{margin-top: 40px; display: block;} /* ================================================== | 서브 */ #sub.hiring .process li .txt { margin-left: 30px; padding:0 10px 0 0;} /* #sub.business .work-wrap li .circle .detail-con {top:calc(100% + 20px);} */ .sub .portfolio .js-infinite-list__lane-images:first-child .infinite-list__image-inner{margin-left: unset; margin: 0 auto;} .sub .portfolio .infinite-list__image-item, .sub .portfolio .infinite-list__marquee-row{margin-left: 0;} #sub.about .section6 .withus_list{grid-gap: 24px;} .br1280{display: none;} #sub.portfolio.view-new .section7 .content-list .list{display: unset;} #sub.portfolio.view-new .section7 .content-list .list > * {max-height: 100%; height: 450px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri, #sub.portfolio.view-new .section7 .content-list .list.btm .le{width: calc(50% - 15px); float: left; margin-top: 30px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri{margin-right: 15px; margin-bottom: 30px;} #sub.portfolio.view-new .section7 .content-list .list.btm .le{margin-left: 15px; margin-bottom: 30px;} } @media screen and (max-width: 981px){ #sub.about .section_history .last_position_list.on {margin-top: 8px !important;} } @media screen and (max-width: 962px){ #sub.about .section_history .last_position_list.on {margin-top: -12px !important;} } @media screen and (max-width: 960px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:8rem;} .main_visual p {font-size:2.2rem; padding: 0 30px; line-height:28px;} .con ._t.tit.sub {font-size:4rem; line-height:50px;} .subtit {font-size: 2.2rem; line-height: 28px;} /* .section.design .subtit br{display: none;} */ .section.mobilewebapp .text li a {font-size: 3.0rem;} .landing.section a.mt-80{margin-top: 50px !important;} /* ================================================== | 서브 */ #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:74.4%;} #sub.hiring .agency li:first-of-type h4 .block960 {display:block;} #sub.hiring .agency li:first-of-type h4 br:last-of-type {display:none;} #sub.hiring .benefits {width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap:20px;} #sub.hiring .benefits li {width:auto; margin-left:0; padding:0;} #sub.hiring .benefits li:nth-child(13) { padding:0; margin-top:-25px;} #sub.hiring .benefits li:nth-child(20) {padding:0;} #sub.business .tips-wrap li h4 {word-break: keep-all; word-wrap: break-word;} #sub.business .tips-wrap li h4 .block960 {display:block;} #sub.business .tips-wrap li:nth-of-type(3) h4 br {display:none;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table thead tr th{padding: 10px 15px; word-break: keep-all;} #sub.business.maintenance .detail-table tbody tr td > br{display: none;} .ta{display: block !important;} .br960{display: block;} #sub.business .centerflipcards.clear:after{display: none;} #sub.business .centerflipcards-wrap{display: flex; gap: 10px;} #sub.business .centerflipcards-wrap .centerflipcards{width: 30%; display: flex; flex-direction: column;} #sub.business .centerflipcards-wrap .centerflipcards_big{width: 70%;} #sub.business .centerflipcards .square-flip {min-height: 200px !important;} #sub.business .centerflipcards .square-flip.on .square-container{box-shadow: inset 0 0 0 3px #29D4C1; box-sizing: content-box; border-radius: 15px;} #sub.business .centerflipcards .square-flip:hover .square {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); transform-style: preserve-3d; z-index: 1;} #sub.business .centerflipcards .square-flip:hover .square2 {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); transform-style: preserve-3d; z-index: 1;} #sub.business .centerflipcards .square-flip:hover .square-container {position: relative; top: 50%; -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1); transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1); -webkit-transform: translateY(-50%) translateX(0px) scale(1); -ms-transform: translateY(-50%) translateX(0px) scale(1); transform: translateY(-50%) translateX(0px) scale(1); transform-style: preserve-3d; z-index: 2;} #sub.business .centerflipcards .square-flip .square-container{padding: 0 10px; transition: 0.3s;} #sub.business .centerflipcards .square-flip .square .txt-wrap.mt-40{margin-top: 20px !important;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 2.1rem; line-height: 1;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.2rem;} #sub.business .centerflipcards_big{pointer-events: none; border-radius: 15px; overflow: hidden;} #sub.business .centerflipcards_big .square-container2{transform: unset !important; top: 0; padding: 80px;} #sub.business .centerflipcards_big .square-flip{min-height: 300px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p{font-size: 1.5rem; text-align: center; word-break: keep-all; padding-right: 0; color: #fff;} #sub.business .centerflipcards_big .square-flip .txt-wrap p span{font-size: 1.5rem; color: #0C0C0D; display: block;} #sub.business .centerflipcards_big .square-flip .txt-wrap p > br{display: none;} #sub.business .centerflipcards_big .square-flip .txt-wrap p b{font-size: 1.5rem; display: block;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-35{margin-top: 25px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-25{margin-top: 15px !important;} #sub.story .section ul.list li:hover .hover-img{width: 278px; height: 278px; opacity: 1;} .fs200{font-size: 15rem;} .fs110 {font-size: 6.5rem; line-height: 80px;} #sub.portfolio.view-new .section1 .txt-box{flex-direction: column;} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 40px;} #sub.portfolio.view-new .section1 .txt-box em.mt-30{margin-top: 15px !important;} #sub.portfolio.view-new .section .txt-box em > br{display: none;} #sub.portfolio.view-new .section1 .txt-box {padding: 70px 0;} #sub.portfolio.view-new .styleguide-list .color-list li {min-height: 256px;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 190px;} #sub.portfolio.view-new .section6 .feature-list{padding: 63.13px 0 82.76px;} #sub.portfolio.view-new .pro_fea li{padding: 20px; width: 200px; max-width: 200px; min-height: 178px;} #sub.portfolio.view-new .section8 .section-body .section-column.txt-box {padding: 80px 20px;} #sub.portfolio.view-new .section10 {padding: 100px 0 60px;} .headersubvisual.mt-100{margin-top: 60px !important;} } @media screen and (max-width: 935px){ #sub.about .section_history .last_position_list.on {margin-top: 11px !important;} #sub.about .section_history .position_list .history_list {font-size: 1.3rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.4rem;} #sub.about .section_history .history_list > li + li {margin-top: 15px;} #sub.about .section_history .position_list.first_position_list {padding-top: 80px;} #sub.about .section_history .position_list {padding-top: 50px;} } @media screen and (max-width: 922px){ #sub.about .section_history .last_position_list.on {margin-top: -10px !important;} } @media screen and (max-width: 900px){ /* ================================================== | 서브 */ /* .centerflipcards, #sub.business .centerflipcards {display: grid !important; grid-template-columns: 1fr; width: 100%; margin-left: 0; row-gap: 30px;} #sub.business .square-flip, #sub.business.design .square-flip, #sub.business.marketing .square-flip, #sub.business.maintenance .square-flip{width: 100%;} #sub.business .centerflipcards {gap:30px;} .square-flip, #sub.business .square-flip {float: unset; margin-left:0; width:100%; padding-left:20px; min-height:450px;} #sub.business .square-flip {padding-left:0;} .square-flip:nth-of-type(2) {border-right:unset;} .centerflipcards.clear:after {display:none;} #sub.business .square-flip:nth-of-type(3), #sub.business .square-flip:nth-of-type(4) {margin-top:0;} */ #sub.hiring .centerflipcards {display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; row-gap: 30px;} #sub.hiring .square-flip {float: unset; margin-left:0; width:100%; padding-left:20px; min-height:450px;} #sub.hiring .square-flip:nth-of-type(2) {border-right:unset;} #sub.hiring .centerflipcards.clear:after {display:none;} .shopping.section .section-row{flex-direction: column; gap: 30px;} .shopping.section .section-row > *:first-child, .shopping.section .section-row > *:last-child{width: 100% !important;} .shopping.section .tit-area .tit-box{text-align: center;} .section.mobilewebapp .swiper {max-width: 200px; height: 400px;} .section.mobilewebapp .swiper .swiper-slide a {padding: 9.7px 10px;} #sub.portfolio.view-new .section4 .section-row{flex-direction: column; gap: 40px;} #sub.portfolio.view-new .section4 .section-column + .section-column, #sub.portfolio.view-new .section4 .section-column {max-width: 100%;} #sub.portfolio.view-new .section4 .marquee, #sub.portfolio.view-new .section4 .marquee2{width: 50%;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv{max-width: 100%;} #sub.portfolio.view-new .section4 .section-column.txt-box{padding-top: 50px;} .br900{display: block;} #sub.portfolio.view-new .section9 {padding: 100px 0;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 13rem; line-height: 140px;} #sub.about .section_history .section-column1 {width: 33.333%;} /* #sub.about .section_history .section-column2 {width: 66.667%; margin-left: unset;} */ #sub.about .section_history .position_list:not(.first_position_list) .history_year {margin-top: -80px;} #sub.about .section_history .tit-area .tit-box h3 {white-space: nowrap;} #sub.about .section_history .img-area {display: none;} #sub.about .section_history #fix-year {max-width: unset; text-align: left;} #sub.about .section_history .position_list {margin-left: 0;} #sub.about .section_history .history_year {position: absolute; padding-left: 0; left:74px; transition: opacity .2s ease-out;} #sub.about .section_history .last_position_list {margin-top:140px !important;} #sub.about .section_history .last_position_list.on {margin-top: 180px !important;} #sub.about .section_history .cont-area .position_list > li:nth-child(1) {margin-left: 0;} #sub.about .section_history .cont-area .position_list > li:nth-child(2) {margin-left: unset; max-width: unset;} #sub.about .section_history #fix-year {top:241px;} #sub.about .section_history .position_list.first_position_list {padding-top: 5px;} #sub.about .section_history .section-column1 {position: absolute;} #sub.about .section_history.fixed .section-column1 {position: fixed; top:0;} #sub.about .section_history .section-column2 {margin-left: 33.333%; width: 100% !important; position: static !important;} #sub.about .section_history .first_position_list .history_list {margin-top: 90px;} #sub.about .section_history .history_year {left:88px;} #sub.about .section_history:not(.pin-going) .last_position_list.on .history_year {margin-top: 0;} #sub.about .section_history.pin-fixed .position_list.on .history_year { top: 240px; position: fixed; left: 109px;} #sub.about .section_history.pin-fixed .position_list:not(.first_position_list).on {margin-top: 130px;} #sub.about .section_history.pin-fixed .position_list:not(.first_position_list).on .history_year {margin-top: 0;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: 40px;} #sub.about .section_history.out-fixed .section-column1 {bottom:483px; top:unset;} } @media screen and (max-width: 860px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:170px;} .section_rolling .text1 li {font-size:8rem;} .section_rolling .text2 li {font-size:10rem;} .section_rolling .text2 li b::after {width:60px;} .transition-container2 {margin-top:-60px;} .section_rolling .transition-container > ul li {line-height:100px;} /* ================================================== | 서브 */ #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(4), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(6), #sub.hiring .tag-area li:nth-child(7) {min-width:130px; max-width:130px;} #sub.hiring .tag-area li:nth-child(1) {right:180px;} #sub.hiring .tag-area li:nth-child(5) {right:140px;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:74%;} #sub.contact .tag-area li:nth-child(1) {right:170px;} #sub.contact .tag-area li:nth-child(2) {right:130px;} #sub.contact .tag-area li:nth-child(3) {right:20px;} #sub.contact .tag-area li:nth-child(4) {right:160px; top:102px;} #sub.contact .tag-area li:nth-child(5) {right:-30px; top:120px;} #sub.contact .tag-area li:nth-child(6) {right:140px;} #sub.contact .tag-area li:nth-child(7) {right:0; top:190px;} #sub.contact .tag-area li:nth-child(8) {right:140px;} #sub.business .work-wrap > li:nth-child(5) .circle span:after { width: calc(183% + 60px);} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40{gap: 15px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 24px 19.22px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico img{width: 54px; height: 44px;} #sub.portfolio.view-new .section5 {padding: 80px 0;} } @media screen and (max-width: 840px) { #sub.about .section2 .section-column + .section-column .num-sec{flex-direction: column !important;} #sub.about .section1 .img_wrap{width: 80%; height: 100%;} #sub.about .section3 .story_wrap .tit-box, #sub.about .section.bg_b .tit-box > em{text-align: center;} #sub.about .section3 .txt-wrap{width: 100%;} #sub.about .section3 .section-column.mt-50 {margin-top: 150px !important;} #sub.about .section3 {padding-top: 150px;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 26.5px 53px;} #sub.about .section3 .canvas-wrapper{transform: scale(1);} #sub.about .section3 .canvas-wrapper canvas{top: -39px; right: -51%;} #sub.about .section3 .round {top: 24px;} #sub.about .section2 .section-body .section-inner{padding: 100px 0;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 3.0rem;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img{height: 60px;} .search-area.mt-125{margin-top: 60px !important;} .section.portfolio .tab-area{justify-content: flex-start !important;} #sub.about .section_history .section-body .section-inner {padding:0 0 100px;} #sub.about .section_history .position_list {padding-bottom: 0;} /* #sub.about .section_history .last_position_list .history_list {padding-bottom: 200px; box-sizing: border-box;} */ #sub.about .section_history .last_position_list .history_year {margin-top: -100px;} #sub.about .section_history #fix-year {top:240px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -104px;} #sub.about .section_history.out-fixed .section-column1 {bottom:346px; top:unset;} } @media screen and (max-width: 790px){ /* ================================================== | 서브 */ #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2.5rem;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.7rem; line-height:30px;} #sub.hiring .agency li:nth-of-type(2) h4 .block790 {display:block;} #sub.hiring .agency li:nth-of-type(2) span {margin-top:67px;} #sub.about .section1{overflow: hidden;} #sub.portfolio.view-new .tit-area .tit-box h1{font-size: 8rem; line-height: 90px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 2rem; line-height: 24px;} #sub.portfolio.view-new .fs18{font-size: 1.6rem; line-height: 25px !important; letter-spacing: -0.44px; word-break: keep-all;} #sub.portfolio.view-new .fs24 {font-size: 2rem; line-height: 30px;} #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 80px 0;} #sub.portfolio.view-new .mt-60{margin-top: 40px !important;} #sub.portfolio.view-new .styleguide-list .color-list li {width: calc(50% - 7.5px); max-width: 100%; min-height: 150px;} .fs16 {font-size: 1.4rem; line-height: 18px;} .header__col_right-wrap{gap:15px;} .header__col_right-menu .tell span i{display: inline-block; width:20px;} .header__col_right-menu .tell span{font-size:0 !important; padding:0; display:flex; align-items: center; justify-content: center;} .header__col_right-menu .tell span.fs16{padding:11px 16px !important;} } @media screen and (max-width: 768px){ /* ================================================== | 헤더 */ .header__widget-content.h6 {font-size:1.8rem;} /* ================================================== | 메인 */ main .section {margin:60px auto 0;} main .main_visual{height: 80vh;} main .main_visual #pcslider{display: none;} main .main_visual #moslider{display: block;} .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 5rem; line-height: 60px;} .subtit {font-size: 1.8rem; margin-top: 20px; margin-bottom: 40px;} .solution.section .subtit {margin-bottom: 30px;} .main_visual h2 {font-size:6rem;} .main_visual p {font-size:2rem; line-height:26px;} .main_visual .slider-dots_right.slider-dots {right:20px; bottom:20px;} .main_visual .slider-categories_left, .main_visual .slider-categories {left:20px; bottom:20px;} .homepage .realItrcCont .realItrcCon .thumbnail {padding:30px 0 10px;} .homepage .realItrcCont .realItrcCon .h3 {font-size:4rem;} .section.mobilewebapp .canvas-wrapper {width:80vw; } .section.mobilewebapp .infinite-list__images-lane {width:80%; } main .section.design .tit-area{position: unset; height: auto;} main .section.design .img-wrap{margin-top: 30px;} main .section.design .img-wrap .img-con li {width: 80vw; margin: 0 auto;} main .section.design .img-wrap .img-con li + li {margin-top: 20px;} main .section.design .img-wrap .img-con li .subheading{display: block; text-align: center !important;} main .section.design .img-wrap .img-con li a h3{text-align: center !important; margin: 0; top: 100%; font-weight: 500;} .section.mobilewebapp .mockup-wrapper{justify-content: center !important;} .section.mobilewebapp .text, .section.mobilewebapp .swiper.r-swiper{display: none;} .section.mobilewebapp .swiper.l-swiper{max-width: 350px; width: 100%; height: 550px;} .section.mobilewebapp .swiper .swiper-slide a .motxt{display: block; width: fit-content; margin: 0 auto; font-size: 2.0rem; font-weight: 700; letter-spacing: -1.2px; font-family: "NanumSquareNeo", sans-serif; margin-top: 20px; color: #0C0C0D; opacity: 0; transition: 0.3s all; text-align: center; position: relative;} .section.mobilewebapp .swiper .swiper-slide.swiper-slide-active a .motxt{opacity: 1;} .section.mobilewebapp .swiper .swiper-slide.swiper-slide-active a .motxt::after {content: ''; clear: both; display: block; width: calc(100% + 4px); background: #7EE3D8; height: 10px; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; left: -2px;} .landing.section a.mt-80{margin-top: 30px !important;} .section-portfolio-grid__col-grid{padding-top: 30px;} .section-portfolio-grid__col-grid .js-grid__item {margin-top: 20px;} .footer {height:auto;} .contactUsWrap.con {height:700px;} main.page-wrapper .contactUsWrap.con {height:800px;} .con ._t.tit.sub {font-size:3rem; line-height:40px;} .footerWrap .footer {display:block; flex-direction: column;} .footerWrap .footer .area._2 {margin-top:30px; text-align:left;} .footerWrap .footer .area._1, .footerWrap .footer .area._2 {width:100%;} .footer .con ._ts {min-height:78px;} .typing-txt {font-size:6rem; } .typed-cursor {height:70px; } .footerWrap .footer .area p span:last-child {display: inline-block;} .footerWrap .footer .area p span:nth-of-type(2):after {display: block;} .footerWrap .footer .area .util .familySite {width:calc(100% - 130px);} .footerWrap .footer .area .util .social:last-child{margin-right: 0;} .quick_btn{right: 20px;} .quick_btn .contactBtn {width: 92px; height: 92px;} /* ================================================== | 서브 */ #sub.about .section1 .video_wrap{width: 320px;} .sub .portfolio .portfolio-list{gap: 10px;} .sub .portfolio .portfolio-list .txt {bottom: 20px; left: 20px;} .sub .portfolio .portfolio-list .txt span {font-size: 1.4rem; line-height: 1;} .sub .portfolio .portfolio-list .txt p {font-size: 1.8rem; line-height: 1;} .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:6rem; line-height:70px;} .square-flip .txt-wrap b {font-size:2.5rem;} #sub.hiring .process {min-width: 1050px; height: 350px;} #sub.hiring .process li {max-width: 230px;} #sub.hiring .process li .txt{padding: 0 10px; box-sizing: border-box; max-width: 90%; margin: 0 auto !important; left: unset;} #sub.hiring .process li .circle {max-width: 230px; max-height: 230px; padding: 85px 42px;} #sub.hiring .process.loaded li:nth-child(2) {left: 23%;} #sub.hiring .process.loaded li:nth-child(3) {left: 42%;} #sub.hiring .process.loaded li:nth-child(4) {left: 61%;} #sub.hiring .process.loaded li:nth-child(5) {left: 80%;} #sub.hiring .process::after{top: 32%; left: 41.5px; width: calc(100% - 100px);} #sub.hiring .centerflipcards {grid-template-columns:1fr; row-gap:40px;} #sub.hiring .square-flip {pointer-events: none; border-right:unset; min-height:unset; padding-left: 0;} #sub.hiring .square-flip:not(:last-of-type):after {position:absolute; display:block; content:''; clear:both; width:100%; height:1px; top:calc(100% + 20px); left:0; background:#E4E4E4;} #sub.hiring .square-flip .square { transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform:rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg);opacity: 0; visibility: hidden;} #sub.hiring .square-flip .square2 { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform:rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); opacity: 1; visibility: visible; position:static;} #sub.hiring .square-flip .square-container2 {transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -moz-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -webkit-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -o-transform: translateY(-50%) translateX(0) translateZ(0) scale(1); -ms-transform: translateY(-50%) translateX(0) translateZ(0) scale(1);} #sub.hiring .square-flip:hover .square, #sub.hiring .square-flip:hover .square2, #sub.hiring .square-flip:hover .square-container, #sub.hiring .square-flip:hover .square-container2 {transform: none;} #sub.hiring .square-flip .img-wrap img{transform: scale(0.8);} #sub.hiring .square-flip .txt-wrap p{padding-right: 0; margin-top: 15px !important;} #sub.hiring .visual-wrap, #sub.contact .visual-wrap {display:block; padding:50px 20px;} #sub.hiring .visual-wrap .tit-area, #sub.contact .visual-wrap .tit-area {width:100%; padding:0 10px;} #sub.hiring .tit-area .tit-box h5, #sub.contact .tit-area .tit-box h5 {margin-top:20px !important;} #sub.hiring .tag-area, #sub.contact .tag-area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap:10px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; padding-bottom:0; min-height: 200px; max-height:unset; margin-top:30px; max-width: 100%;} .tag-area li {position:static;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after { height:72.4%;} #sub.hiring .process li .circle span, #sub.business .work-wrap li .circle span {font-size:1.4rem;} #sub.hiring .process li .circle b {font-size:2rem; margin-top:25px !important;} #sub.business .work-wrap > li .circle h5 b {font-size:2rem !important;} #sub.business .work-wrap > li .circle h5 {font-size:1.6rem;} #sub.hiring .process.loaded li:nth-child(1) .circle span:after, #sub.hiring .process.loaded li:nth-child(4) .circle span:after {top:26px;} #sub.business .work-wrap > li:nth-child(1) .circle span:after, #sub.business .work-wrap > li:nth-child(4) .circle span:after {top:18px;} #sub.hiring .process.loaded li:nth-child(5) .circle span:after {top:26px;} #sub.hiring .process li .txt, #sub.business .work-wrap li .circle .detail-con li {font-size:1.4rem; line-height:20px;} #sub.hiring .section4 .section-inner, #sub.business .section4 .section-inner {padding:70px 0;} #sub.hiring .section4 .section-column.poa, #sub.business .section4 .section-column.poa {position:static;} #sub.business .section4 .section-row.gap-140 {gap:90px;} #sub.hiring .agency, #sub.business .tips-wrap {display:grid; grid-template-columns:1fr; border:none;} #sub.hiring .agency li, #sub.business .tips-wrap li {width:100%; padding:0;} #sub.hiring .agency li + li, #sub.business .tips-wrap li + li {border-top:1px solid #474747; border-left:none; padding-top:30px;} #sub.hiring .agency li:not(:last-of-type), #sub.business .tips-wrap li:not(:last-of-type) {padding-bottom:30px;} #sub.hiring .agency li:first-of-type span, #sub.hiring .agency li:nth-of-type(2) span, #sub.hiring .agency li:nth-of-type(3) span {margin-top:20px;} #sub.hiring .agency li:first-of-type h4 .block960, #sub.hiring .agency li:nth-of-type(2) h4 .block790, #sub.hiring .agency li h4 .block1210, #sub.hiring .agency li h4 br, #sub.business .tips-wrap li h4 br, #sub.business .tips-wrap li h4 .block960 {display:none;} #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {margin:0;} #sub.hiring .agency li:nth-of-type(2) span br, #sub.hiring .agency li:last-of-type span br {display:none;} #sub.hiring .benefits {grid-template-columns:repeat(3, 1fr);} #sub.hiring .benefits li .txt p {font-size:1.5rem; line-height:19px;} #sub.hiring .benefits li .txt p b {font-size:1.9rem; line-height:23px; margin-bottom:5px;} #sub.hiring .benefits li .img img {width:100px; height:100px;} #sub.hiring .benefits li:nth-child(13) .img img {height:125px;} #sub.hiring .agency li:hover::before {opacity:0; z-index:-1;} #sub.contact .tag-area li:nth-child(2)::after {width:25px;} #sub.contact .tag-area li:nth-child(8)::before {width:15px; right:-20px; left:unset; top:4px;} #sub.contact .tag-area li:nth-child(8)::after {width:25px; bottom:1px; left:unset; right:-15px;} #sub.contact .visual-wrap .tit-area .tit-box h3 br {display:none;} .conArea input[type="text"], .conArea textarea, .conArea em, .conArea input[type="text"]::placeholder, .conArea textarea::placeholder, .contact .check-box > input[type="checkbox"] ~ label {font-size: 1.6rem;} .popup .popup-inner {-webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .popup .popup-inner .left-cont {max-width:unset;} .popup .popup-inner .popup-close {width:50px; height:50px; background-size:17px;} .popup .popup-inner .left-cont, #policy1.popup .popup-inner .right-cont {padding:30px;} .popup .popup-cont .text-box {max-height:calc(100vh - 305px);} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding:80px 30px;} #sub.business .tit-area .tit-box h3 {font-size:3rem; line-height:40px;} #sub.business .tit-area .tit-box h3 b {font-size:3.5rem; line-height:45px;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {font-size:1.8rem; line-height:30px; margin-top:30px; margin-bottom: 0;} #sub.business .tips-wrap li span {margin-top:20px;} #sub.business .tips-wrap li p strong {font-size:6rem; line-height:40px;} #sub.business .tips-wrap li p {font-size:1.8rem;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width:450px; height:450px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width:650px; height:650px;} #sub.business .svg-img.pcsvg_wrap{display: none;} #animatedCircle {transform-origin: center; animation: none; } #sub.business .svg-img.mosvg_wrap{display: block; top: 128px;} #animatedCircle1 {transform-origin: center; animation: moveAlongPath 8s linear infinite; } #sub.hiring .visual-wrap .tit-area .tit-box h3 > br, #sub.contact .visual-wrap .tit-area .tit-box h3 > br{display: block;} .tag-area li, .tag-area li.mini{min-height: 60px !important;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 3rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 3.5rem;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.9rem;} .view-navi li.navi .navi_hover_img {max-width: 150px; max-height: 150px; min-width: 150px; min-height: 150px; top: -150px; right: -30px} .view-navi li.next .navi_hover_img {left: -30px;} #sub.story .section, #sub.story_view, #sub.about .section5 {padding-bottom: 100px;} .tit-area .tit-box h1{margin-top: 10px !important;} #sub.story .section ul.list li a .title, #sub.story_view .section .title {font-size: 3rem; margin-top: 0 !important;} #sub.story .section ul.list li a .sub_con{font-size: 1.8rem; line-height: 28px;} #sub.story .section ul.list li a .title, #sub.story .section ul.list li a .sub_con{width: 100%;} #sub.story .section ul.list li a .date{position: unset; transform: unset; margin-top: 10px;} #sub.story_view .section .date{margin-top: 20px;} #sub.story_view .section .cont{padding: 40px 0; margin-top: 40px;} .view-navi li.list{min-width: fit-content;} .view-navi li.list a{padding: 21px 46.12px !important;} .sub .portfolio.mt-150{margin-top: 70px !important;} .tab-area.gap-15{gap: 7px;} .tab-area li a{line-height: 50px; min-height: 50px;} #sub.about .section2 .section-row{flex-direction: column; align-items: center; gap: 50px; text-align: center;} #sub.about .section2 .section-column, #sub.about .section2 .section-column + .section-column{width: 100%; max-width: 100%; margin-left: 0;} #sub.about .section2 .section-column + .section-column .num-sec{ gap: 20px;} #sub.about .section2 .cont-area ul li{min-width: unset !important; width: fit-content; text-align: start;} #sub.about .section2 .cont-area ul li:nth-child(2){margin-left: 0;} #sub.about .section.bg_b .tit-box b {font-size: 6rem;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 12px !important;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 22.5px 46px;} #sub.about .section3 .round {width: 45px; height: 45px; top: 22px;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -55px; margin-top: -33px; } } #sub.about .section4 .work_wrap .work_list li{padding: 50px;} #sub.about .section4 .work_wrap .work_list li p{margin-top: 50px;} #sub.about .section6 .section-body .section-inner{padding: 150px 0;} #sub.about .section5 {padding-bottom: 150px;} #sub.about .section_history #fix-year {top:210px;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 6rem;} #sub.about .section_history .history_year {left:75px;} #sub.about .section_history.pin-fixed .position_list.on .history_year { top: 210px; left: 95px;} #sub.about .section_history .section-column2 {margin-top: 105px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -134px;} #sub.portfolio.view-new .mt-160 {margin-top: 80px !important;} .fs50 {font-size: 3.5rem; line-height: 45px;} #sub.portfolio.view-new .section1 .section-body .section-column + .section-column {padding: 0 20px;} #sub.portfolio.view-new .section5 {padding: 60px 0;} #sub.portfolio.view-new .section5 .img img {width: 150px; height: 100px;} #sub.portfolio.view-new .section5 .txt.mt-30{margin-top: 20px !important;} #sub.portfolio.view-new .section5 .txt .mt-40{margin-top: 30px !important;} .headersubvisual.mt-100{margin-top: 40px !important;} #sub.portfolio.view-new .section7 .content-list .txtbox {padding: 20px; padding-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox.mt-30{margin-top: 20px !important;} #sub.portfolio.view-new .section7 .content-list .list.top .le .imgbox{margin-right: 20px;} #sub.portfolio.view-new .section7 .content-list .list.top .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .ri .imgbox, #sub.portfolio.view-new .section7 .content-list .list.btm .le .imgbox{margin-left: 20px;} #sub.portfolio.view-new .section10 .view-navi {padding: 80px 0 0 0;} .mt-70 {margin-top: 50px !important;} #sub.portfolio.view-new .section1 .it-wrap{height: 70svh;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 11rem; line-height: 120px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 2.5rem;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 5rem; } #mVisual .tit-box p{font-size: 1.6rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:44px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.1rem;} #mVisual .cate-box-wrap{gap:10px;} .ai-service-item{padding:30px; flex-direction: column !important; align-items: center !important; border-radius:30px;} #main .section .tit-box h3 span.sub-txt{font-size:1.4rem; line-height: 140%;} #main .section1 .tit-box h3 span.poppin{font-size:4.0rem; letter-spacing: 0; line-height: 110%; margin-top:20px;} #main .section1{padding-top:50px;} #main .section1 .cont-wrap{margin-top:50px;} .ai-service-item .left h4{font-size:2.4rem; margin-top:10px;} .ai-service-item .left .s-txt{font-size:1.4rem; margin-top:18px;} .ai-service-item .left ul li p{font-size:1.2rem;} .ai-service-item .left ul li{gap:6px;} .section1 .li1 .right{margin-top:30px;} .ai-service-item .left ul li + li{margin-top:10px;} .ai-service-item .right{height:auto; position:relative; margin-top:30px;} .ai-service-item3 .right .right-inner, .ai-service-item5 .right .right-inner{margin-top:0;} .lang-box, .cate-box-wrap{top:50px;} .upload-box .loading-box{left:25%;} .cate-box-wrap .loading-box{right:25%;} .ai-service-item6 .right{height:380px;} .li6 .cate-tab{margin-top:0;} #main .section .tit-box h3{font-size:4rem; line-height: 110%; padding-bottom:30px;} .effect-list{grid-template-columns:repeat(2, 1fr);} .effect-list li{padding:40px 20px 0 20px;} .effect-list li h4{margin: 10px 0;} #main .section2 .txt1{font-size:3.0rem; line-height: 140%;} #main .section2 .txt2{font-size:1.4rem; line-height: 140%;} #main .section2 .txt1 img{top:-40px; width:80px;} #main .section2 .txt1{margin-top:80px;} #main .section3{padding:80px 0; margin-top:0;} #main .section3 ul li{margin-top:40px;} .ai-service-item5.on .cate-box-wrap { top: 80px; } .contact-tit-area .tel-box{margin-top:10px; padding-left:55px; font-size:4.2rem;} .contact-tit-area .tel-box:before{width:45px; height:45px; top:-8px;} } @media screen and (max-width: 740px){ /* ================================================== | 서브 */ #sub.hiring .agency li:first-of-type span br:first-of-type {display:block;} } @media screen and (max-width: 690px){ #sub.hiring .process li .circle, /* #sub.business .work-wrap li .circle{padding:70px 19px 0 50px !important;} */ /* #sub.business .work-wrap li:last-child .circle {padding:70px 20px 0 50px !important;} */ /* #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {height:67.8%;} */ #sub.hiring .process li:last-child .circle.on::before {top:5px; left:5px;} #sub.hiring .process li:last-child .circle.on::after {top:10px; left:10px;} #sub.hiring .process li .txt {margin-top:20px !important;} #sub.contact .visual-wrap .tit-area .tit-box h3 br {display:block;} /* #sub.business .work-wrap > li {padding-bottom:200px;} */ } @media screen and (max-width: 680px) { .solution.section .subtit, .design.setion .subtit {margin-bottom: 10px;} main .section.design .img-wrap{margin-top: 10px;} #sub.about .section.bg_b .tit-box b{font-size: 5rem;} #sub.about .section.bg_b .tit-box b + b {margin-top: 12px;} #sub.about .section.bg_b .tit-box > p{font-size: 1.8rem; margin-top: 35px; line-height: 30px;} #sub.about .section.bg_b .tit-box > em{margin-top: 20px; font-size: 1.6rem; line-height: 28px;} #sub.about .section.bg_b .tit-box > em b{font-size: 1.6rem;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 7px !important;} #sub.about .section3 .txt-wrap > li > ul > li{font-size: 1.8rem; padding: 22.5px 38px;} #sub.about .section3 .round {width: 42px; height: 42px; top: 23px; left: 37%;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -34px; margin-top: -28px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -59px; margin-top: -35px; } } /* #sub.about .section3 .canvas-wrapper{transform: scale(0.9); transform-origin: center center; left: 300px; top: 83px; } */ #sub.about .section3 .canvas-wrapper canvas {transform: scale(0.9); transform-origin: center center; top: unset; right: calc(-51% + -31px);} #sub.about .section4 .work_wrap .work_list li{max-width: 417px; padding: 40px 30px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 2.5rem; margin-top: 15px;} #sub.about .section4 .work_wrap .work_list li p em {font-size: 1.6rem;} #sub.about .section4 .work_wrap .work_list li span {font-size: 1.6rem; line-height: 28px; margin-top: 30px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 9rem; line-height: 110px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 2rem; line-height: 25px;} } @media screen and (max-width: 670px){ /* ================================================== | 서브 */ #sub.hiring .agency li:nth-of-type(2) span br:first-of-type, #sub.hiring .agency li:last-of-type span br:first-of-type {display:block;} } @media screen and (max-width: 660px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:150px;} .section_rolling .text1 li {font-size:7rem;} .section_rolling .text2 li {font-size:8rem;} .transition-container2 {margin-top:-70px;} .section_rolling .text2 li b::after {width:45px; height:25px; bottom:8px;} .br900{display: none;} #mVisual .tit-area .tit-box em{display:block;} } @media screen and (max-width: 640px){ /* ================================================== | 헤더 */ .header__bar .logo__wrapper-img img {width:130px;} .header__burger.header__burger_opened {margin: 20px 0 0 0;} .header__col-overlay {padding-top:100px;} /* ================================================== | 메인 */ .main_visual .main_visual h2 {font-size:6rem;} .main_visual .main_visual p {font-size:2rem; line-height:26px;} .main_visual .slider-dots_right.slider-dots {display:none;} .homepage .realItrcCont .realItrcCon .h3 {font-size:3rem; padding-bottom:30px;} .homepage .realItrcCont .realItrcCon .description {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom:10px;} .homepage .realItrcCont .realItrcCon .description .kind {width:fit-content;} .homepage .realItrcCont .realItrcCon .description .title {flex-grow:1;} .homepage .realItrcCont .realItrcCon .description .date {width:100%;} .shopping h3 {font-size:3rem;} .section.mobilewebapp h2.h2 {font-size: 3rem; line-height: 40px; margin-top: 10px !important;} .section.section-arc-images .js-arc-images__list-item {padding-right:0; padding-left:0;} .section.section-arc-images .js-arc-images__list-item .rounded-50 {border-radius:20px !important;} .footerWrap .footer .area .copyright {font-size:1.2rem; line-height:2rem;} .menu-overlay__heading {font-size:5rem;} .contactUsWrap.con {height:600px;} main.page-wrapper .contactUsWrap.con {height:600px;} .footer .con ._ts {min-height:52px;} .typing-txt {font-size:4rem; } .typed-cursor {height:50px; } /* ================================================== | 서브 */ .section .section-row .section-column.mt-100 {margin-top:40px !important;} #sub.hiring .visual-wrap .tit-area {padding:0;} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em {font-size:2rem; line-height:28px;} .tit-area .tit-box h1 {font-size:6rem; line-height:45px;} .tit-area .tit-box h3, #sub.about .section_history .tit-area .tit-box h3 {font-size:2.5rem; line-height:35px;} .tit-area .tit-box h3 b, #sub.about .section_history .tit-area .tit-box h3 b { font-size: 3rem; line-height: 40px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.6rem; line-height:24px; word-break: keep-all; word-wrap: break-word;} .tag-area li, .tag-area li.mini {font-size:1.5rem; min-height:50px;} /* #sub.hiring .tag-area li:nth-child(1)::after {bottom:-109px; right:-145px; background-size:200px;} #sub.hiring .tag-area li:nth-child(7)::after { width: 20px; height: 20px; top: -6px;} */ #sub.hiring .process li .circle span {font-size:1.3rem;} #sub.hiring .process li .circle b {font-size:1.7rem; margin-top:20px !important;} #sub.hiring .process li .txt {font-size:1.3rem;} .section .section-row.gap-90, .section .section-row.gap-60, #sub.business .section4 .section-row.gap-140 {gap:30px;} .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:5rem; margin-top:10px !important; word-break: keep-all; word-wrap: break-word; line-height:60px;} .tit-area .tit-box h2.mt-0{margin-top: 0 !important;} #sub.hiring .section {padding-top:80px;} #sub.contact .section2 {padding:80px 0;} #sub.hiring .section.section1 {padding-top:0;} #sub.hiring .process li:first-of-type .txt, #sub.hiring .process li:nth-of-type(4) .txt {margin-left:0;} .square-flip .txt-wrap em {font-size: 1.3rem;} .square-flip .txt-wrap b, #sub.hiring .agency li h4, #sub.business .tips-wrap li h4 {font-size:2rem; line-height:30px;} .square-flip .txt-wrap p, #sub.hiring .section4 {padding-top:0;} #sub.hiring .section4 .section-inner, #sub.business .section4 .section-inner {padding:50px 0;} #sub.business .section.section4 {padding-top:0;} #sub.business.maintenance .section3, #sub.business.maintenance .section4{padding-top: 80px;} #sub.hiring .agency li span, #sub.business .tips-wrap li span {font-size:1.4rem; line-height:23px;} #sub.hiring .agency li:first-of-type span, #sub.hiring .agency li:nth-of-type(2) span, #sub.hiring .agency li:nth-of-type(3) span {margin-top:10px;} #sub.hiring .benefits li .txt p {font-size:1.4rem; line-height:18px;} #sub.hiring .benefits li .txt p b {font-size:1.8rem; line-height:22px;} #sub.hiring .benefits {grid-template-columns:repeat(2, 1fr);} #sub.contact .tag-area li:nth-child(5) {min-height:50px;} #sub.contact .conArea table, #sub.contact .conArea table tbody {display:block;} #sub.contact .conArea table tbody tr {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #sub.contact .conArea table tbody tr td {width:100%; padding-top: 20px;} .conArea em{top: 24px;} .conArea input[type="text"], .conArea textarea{padding: 0;} .conArea table tr td:nth-child(odd) {padding-right:0;} .conArea table tr td:nth-child(even) {padding-left:0;} .conArea table tr td:nth-child(even) em {left:0;} .conArea input[type="text"], .conArea textarea, .conArea em, .conArea input[type="text"]::placeholder, .conArea textarea::placeholder, .contact .check-box > input[type="checkbox"] ~ label {font-size:1.4rem;} .contact .check-box > input[type="checkbox"] ~ label:before {width:25px; height:25px; margin-top:-12.5px;} .btnSet .main_btn {padding:20px 50px 20px 40px;} .btnSet .main_btn:hover {padding:20px 70px 20px 40px;} #sub.contact ~ .footer .footer-body .footer-inner {padding-top:50px;} #sub.contact ~ .footer .footer-body .footer-inner .right {margin-top:30px;} .footer .footer-body .footer-inner .right p.mt-50 {margin-top:30px !important; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .footer .footer-body .footer-inner .right p span b {font-size:1.6rem; line-height:20px; word-break: keep-all; word-wrap: break-word;} .footer .footer-body .footer-inner .right p span b.mt-20 {margin-top:15px !important;} .footer .footer-body .footer-inner .right p span b + b {margin-top:10px !important;} .popup .popup-title h4 P {font-size:1.8rem;} .popup .popup-title h2 {font-size:3.7rem;} #policy1.popup .popup-inner .left-cont p {font-size:1.4rem; line-height:20px;} .agree_txt b {font-size:1.6rem; line-height:20px;} .agree_txt h4 {font-size:1.4rem; line-height:25px;} .agree_txt p, .agree_txt ul, .agree_txt ol, .agree_txt dl {font-size:1.4rem; line-height:20px;} .popup .popup-cont .text-box {max-height:calc(100vh - 273px);} .section.mobilewebapp .infinite-list__heading-item h2.h3, .landing .pricing-table__header h3 {font-size:2.5rem; line-height:40px;} .landing .pricing-table__header .pricing-table__subtxt {font-size:1.6rem; line-height:22px; margin-top:20px !important} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {margin-top:30px !important;} #sub.business .section {padding-top:80px;} #sub.business .section2 {padding-bottom:0;} #sub.business.maintenance .section2{padding-bottom: 70px;} #sub.business .section3 {padding-bottom:80px;} /* #sub.hiring .process, #sub.business .work-wrap {grid-template-columns:1fr; row-gap:20px;} #sub.hiring .process li, #sub.business .work-wrap > li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; } #sub.hiring .process.loaded li:nth-child(1) .circle span:after, #sub.hiring .process.loaded li:nth-child(5) .circle span:after, #sub.business .work-wrap > li:nth-child(1) .circle span:after, #sub.business .work-wrap > li:nth-child(5) .circle span:after {display:none;} #sub.hiring .process li .circle, #sub.business .work-wrap li .circle {padding:0 !important; aspect-ratio:unset; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-shrink:0;} #sub.hiring .process li .circle { width:100px; height:100px;} #sub.business .work-wrap li .circle {width:145px; height:145px;} */ /* #sub.business .big-circle-wrap .big-circle{display: none;} */ /* #sub.hiring .process li .txt {margin-top:0 !important; padding:0; left:unset;} */ /* #sub.hiring .process li:nth-child(2), #sub.hiring .process li:nth-child(3), #sub.hiring .process li:nth-child(5), #sub.hiring .process li:nth-child(5) {left:unset;} */ /* #sub.hiring .process li .circle b {margin-top:10px !important;} #sub.hiring .process li:last-child .circle.on::before, #sub.hiring .process li:last-child .circle.on::after {width:100px; height:100px;} #sub.hiring .process li:first-of-type .txt, #sub.hiring .process li:nth-of-type(4) .txt {margin-left:20px;} #sub.hiring .process li .circle:hover {background:transparent; border:1px solid #8B8B8B;} #sub.hiring .process li .circle:hover b {color:#0C0C0D;} */ /* #sub.business .work-wrap > li, #sub.business .work-wrap > li:nth-child(4), #sub.business .work-wrap > li:nth-child(5), #sub.business.design .work-wrap > li, #sub.business.design .work-wrap > li:nth-child(4), #sub.business.design .work-wrap > li:nth-child(5) {padding-bottom:0;} #sub.business .work-wrap li .circle .detail-con {opacity:1; top:50%; transform:translateY(-50%); width: calc(100% - 165px); left:165px;} #sub.business .work-wrap li .circle {position:static;} #sub.business .work-wrap > li {position:relative;} #sub.business .work-wrap > li:nth-child(2), #sub.business .work-wrap > li:nth-child(5), #sub.business .work-wrap > li:nth-child(3) {left:unset;} #sub.business .work-wrap > li .circle h5 {text-align:center;}*/ #sub.business .work-wrap li .circle:hover {background:transparent; border:1px solid #8B8B8B;} #sub.business .work-wrap li .circle:hover span, #sub.business .work-wrap li .circle:hover h5 {color:#0C0C0D;} /* #sub.business .work-wrap li:last-child .circle {width:100%; aspect-ratio:unset; padding:30px !important; border-radius:30px;} */ #sub.business .section2 .section-row .section-column + .section-column {margin-top:30px;} /* #sub.business .big-circle-wrap .big_wrap {display:none;} */ /* #sub.business .work-wrap li:last-child .circle {background: linear-gradient(45deg, #3FBC9D 38.76%, #00B0AE 65.59%, #00AAC3 92.13%); border: 1px solid transparent;} */ /* #sub.business .work-wrap > li:last-child .circle span, #sub.business .work-wrap li:last-child .circle h5 {color:#0C0C0D !important;} #sub.business .work-wrap li:last-child .circle h5 b {color: #ffffff !important;} */ #sub.business .work-wrap > li .circle h5 {margin-bottom:0;} #sub.business .tips-wrap li p {font-size:1.6rem;} #sub.business .tips-wrap li p strong {font-size: 4rem; line-height:30px;} #sub.business .tips-wrap li p img {width:13px; height:13px; margin-bottom:9px;} #sub.business .section.solution .section-portfolio-grid__col-grid {padding-top:30px;} #sub.business .solution .portfolio-card .rect .typo .disTC {padding:20px;} #sub.business .solution .portfolio-card .rect > * p {font-size:1.5rem; line-height:1.3;} #sub.business .solution .portfolio-card .rect .typo .t2 {font-size:1.8rem; line-height:1.3;} #sub.business .solution .row > *:last-child {margin-top:30px;} #sub.business.maintenance .section4{padding-bottom: 60px;} #sub.portfolio.view-new .section1 .it-wrap{border-radius: 20px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 6rem; line-height: 70px; letter-spacing: -2.6px;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 1.6rem; line-height: 20px;} #sub.portfolio.view-new .fs18{font-size: 1.4rem;} #sub.portfolio.view-new .fs24 {font-size: 2rem;} .fs200{font-size: 13rem;} .fs110 {font-size: 5.5rem; line-height: 75px;} .fs22 {font-size: 1.8rem; line-height: 20px;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 150px;} #sub.portfolio.view-new .pro_fea li {padding: 15px; width: 150px; max-width: 150px; min-height: 185px;} #sub.portfolio.view-new .pro_fea li .txt b, #sub.portfolio.view-new .pro_fea li .txt em{line-height: 16px;} #sub.portfolio.view-new .section6 .feature-list .tit-box b {font-size: 3.3458rem;} #sub.portfolio.view-new .section6 .feature-list .tit-box p {margin-top: 10px;} #sub.portfolio.view-new .section7 .content-list .list{display: flex; flex-direction: column;} #sub.portfolio.view-new .section7 .content-list .list.top .ri, #sub.portfolio.view-new .section7 .content-list .list.btm .le{width: 100%; float: unset; margin-top: 0;} #sub.portfolio.view-new .section7 .content-list .list.top .ri{margin-right: 0; margin-bottom: 0;} #sub.portfolio.view-new .section7 .content-list .list.btm .le{margin-left: 0; margin-bottom: 0;} #sub.about .section_history .tit-area .tit-box h3, #sub.about .section_history .tit-area .tit-box h3 b {line-height: 1;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -134px;} #sub.about .section_history #fix-year, #sub.about .section_history.pin-fixed .position_list.on .history_year {top:170px;} #sub.about .section_history .section-column2 .cont-area {padding-top: 60px;} /* #sub.about .section_history .position_list:not(.first_position_list) .history_year {margin-top: -80px;} */ /* #sub.about .section_history.pin-fixed .position_list.on .history_year {margin-top: 0;} */ .ai-service-item2 .right{flex-direction: column !important; align-items: center !important;} } @media screen and (max-width: 600px){ .section.landing .subtit .block600, .section.solution .subtit .block600 {display:block;} .footer .con ._ts {margin:0 auto 50px;} .contactUsWrap .contactBtn, .contactUsWrap .contactBtn span {width:25rem; height:25rem; line-height:25rem; font-size:2.6rem;} #sub.business .centerflipcards-wrap{gap: 5px;} #sub.business .centerflipcards-wrap .centerflipcards{grid-gap: 5px;} #sub.business .centerflipcards .square-flip {min-height: 150px !important;} #sub.business .centerflipcards .square-flip .img-wrap {height: 35%;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.1rem;} #sub.business .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.6rem; margin-top: 5px; line-height: 19px;} #sub.business .centerflipcards_big .square-container2{padding: 80px 40px;} } @media screen and (max-width: 580px){ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 4rem; line-height: 50px;} .subtit {font-size: 1.4rem; line-height: 20px;} .homepage .subtit {margin-top: 15px;} .quick_btn.gap-25{gap: 15px;} .quick_btn .contactBtn {width: 72px; height: 72px;} .quick_btn .contactBtn span {font-size: 1.1rem;} .quick_btn .contactBtn span:first-child:after{width: 0.5rem; height: 0.5rem; top: 9px;} .section.mobilewebapp .swiper.l-swiper {width: 60vw;} .section.shopping .subtit, .landing.section .subtit {margin-bottom: 0;} #next-section .horizontal-scroll__header{padding-bottom: 30px;} .hoverbtn {width: 120px; height: 120px;} .hoverbtn b {font-size: 1.2rem; line-height: 12px;} .button-circle span{font-size: 1.2rem;} #sub.business .tit-area .tit-box h3 {font-size:2rem; line-height:30px;} #sub.business .tit-area .tit-box h3 b {font-size:2.5rem; line-height:33px;} #sub.business .big-circle-wrap .big-circle:nth-child(1) {width: 350px;height: 305px;} #sub.business .big-circle-wrap .big-circle:nth-child(2) {width: 500px;height: 500px;} #sub.business .big-circle-wrap .big-circle:nth-child(3) {width: 700px;height: 700px;} #sub.hiring .process li .circle, #sub.business .work-wrap > li .circle, #sub.business .work-wrap li .circle .detail-con {top: calc(100% + 10px);} .btnSet.mt-100{margin-top: 50px !important;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 2.5rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 3rem; line-height: 35px;} .tag-area li, .tag-area li.mini{padding: 0 20px; min-height: 50px !important;} #sub.hiring .tag-area li:nth-child(1)::after, #sub.hiring .tag-area li:nth-child(7)::before, #sub.hiring .tag-area li:nth-child(7)::after {transform: scale(0.5);} .br580{display: block;} #sub.business .centerflipcards .square-flip .square .txt-wrap.mt-40 {margin-top: 12px !important;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle {padding: 84px 30px 34px 45px !important;} .sub .portfolio .portfolio-list .txt {bottom: 15px; left: 15px;} .sub .portfolio .portfolio-list .txt span {font-size: 1.2rem;} .sub .portfolio .portfolio-list .txt p {font-size: 1.4rem; margin-top: 10px;} .sub .portfolio.mt-150{margin-top: 40px !important;} .tab-area li a {line-height: 40px; min-height: 40px; font-size: 1.4rem;} .sub .portfolio .infinite-list.mt-50{margin-top: 30px !important;} #sub.about .section2 .cont-area ul li p b {font-size: 7rem;} #sub.about .section2 .cont-area ul li em {font-size: 2.4rem; margin-top: 10px;} #sub.about .marquee {padding: 25px 0;} #sub.about .marquee_text::after{left: -21px;} #sub.about .marquee #sub.about .marquee_text + #sub.about .marquee_text, #sub.about .marquee .js-marquee + .js-marquee{margin-left: 29px;} #sub.about .marquee_text{font-size: 3.0rem;} #sub.about .section2 .section-body .section-inner {padding: 60px 0;} #sub.about .section3 {padding-top: 100px;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.6rem; padding: 18.5px 34px;} #sub.about .section3 .round {width: 36px; height: 36px; top: 18px; left: 38%;} #sub.about .section6 .section-body .section-inner{padding: 60px 0;} #sub.about .section1 .tit-area .tit-box h4 {font-size: 3rem; line-height: 38px;} #sub.about .section5 {padding-bottom: 60px;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 5rem;} #sub.about .section_history .history_year {left:63px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:84px;} .tit-area .tit-box em, .tit-area .tit-box h4, .footer .footer-body .footer-inner .txt-area .tit-area em{font-size: 1.8rem;} #sub.business .visual-wrap.bg_b h5, #sub.business.shopping_mall .visual-wrap.bg_b h5, #sub.business.solution .visual-wrap.bg_b h5, #sub.business.mobile .visual-wrap.bg_b h5, #sub.business.landing .visual-wrap.bg_b h5, #sub.business.design .visual-wrap.bg_b h5, #sub.business.marketing .visual-wrap.bg_b h5, #sub.business.maintenance .visual-wrap.bg_b h5 {font-size: 1.4rem; line-height: 26px; margin-top: 20px;} .sub .search-area .search-wrap{max-width: 321px; height: 50px;} .sub .search-area .search-wrap input[type="text"]{width: 321px;} .sub .search-area .placeholder, .sub .search-area .search-wrap input[type="text"]{font-size: 1.6rem;} .sub .search-area .search-wrap::before, .sub .search-area .search-wrap::after {width: 15px; height: 50px;} .sub .search-area .search-wrap::before{left: -20px;} .sub .search-area .search-wrap::after{right: -20px;} #sub.story .section ul.list li:hover .hover-img{width: 200px; height: 200px;} #sub.contact ~ .footer .footer-body .footer-inner > div.max1440.mt-100{margin-top: 30px !important} #sub.contact ~ .footer .footer-body .footer-inner .map-area iframe{height: 350px;} #sub.contact ~ .footer .footerWrap{padding-top: 30px;} #sub.portfolio.view-new .dateList.mt-80{margin-top: 40px !important;} #sub.portfolio.view-new .mt-50{margin-top: 30px !important;} .fs40 {font-size: 3rem; letter-spacing: -0.4px;} .fs28 {font-size: 2rem; line-height: 30px;} #sub.portfolio.view-new .section1 .txt-box, #sub.portfolio.view-new .section3, #sub.portfolio.view-new .section6, #sub.portfolio.view-new .section7 {padding: 50px 0;} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 30px;} #sub.portfolio.view-new .fs24 {font-size: 1.7rem; line-height: 26px;} #sub.portfolio.view-new .styleguide-list .color-list {margin-top: 30px !important;} #sub.portfolio.view-new .styleguide-list .color-list li{width: 100%; min-height: 100px;} #sub.portfolio.view-new .styleguide-list .icon-list.gap-40 {gap: 10px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico {padding: 19px 14.22px;} #sub.portfolio.view-new .styleguide-list .icon-list .ico img {width: 44px; height: 34px;} #sub.portfolio.view-new .section4 .js-marquee .marqueeDiv {height: 250px; margin-bottom: 15px;} #sub.portfolio.view-new .section4 .cont-wrap.gap-60 {gap: 15px;} .fs50 {font-size: 3.0rem; line-height: 37px;} #sub.portfolio.view-new .section9 .section-column + .section-column {margin-top: 60px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 7rem; line-height: 80px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 1.8rem;} .footer .footer-body .footer-inner .right p.mt-50 {margin-top: 20px !important;} .footer .footer-body .footer-inner .right p span b.mt-20 {margin-top: 5px !important;} .lang-tab, .cate-tab{gap:5px;} .lang-tab li, .cate-tab li{font-size:1.2rem; min-width:auto; padding:0 10px;} .lang-box .original-txt, .lang-box .translation-txt, .cate-box-wrap .ai-pmt, .cate-box-wrap .ai-complt, .tts-box, .stt-box{padding:15px;} .lang-box .original-txt p, .lang-box .translation-txt p, .cate-box-wrap .ai-pmt p, .cate-box-wrap .ai-complt p, .tts-box p, .stt-box p{font-size:1.4rem;} .upload-box .loading-box{width:auto;} .loading-box{font-size:1.6rem;} .li4-sh-product{padding:15px;} .li4-ul li .ag-bn{height:auto; line-height:100%; padding:5px; width:40px;} .cate-box-wrap .loading-box{right:-20px; width:auto;} .ai-service-item5 .right{height:420px;} .cate-box-wrap .loading-box{top:70px;} .tts-box .loading-box, .stt-box .loading-box{top:-50px;} .chart-tab{gap:5px;} .chart-tab li{padding:10px; flex-direction: column;} .chart-wrap{padding:20px 0 13px 0;} #main .section1{padding:50px 0;} #main .section2{padding:80px 0;} .effect-list{grid-template-columns:repeat(1, 1fr); margin-top:30px;} .tts-box, .stt-box{bottom:20px;} .visual_btn .button-circle span{font-size:1.4rem;} .button-circle.visual_btn_request span{ font-size:1.6rem; } } @media screen and (max-width: 530px){ /* ================================================== | 메인 */ .section_rolling .height-container {min-height:90px;} .transition-container2 {margin-top:-40px;} .transition-container > ul.text1, .transition-container > ul.text2 {padding-left:0;} .section_rolling .text2 li b::after {width:30px; height:20px; bottom:-3px;} .section_rolling .text1 li {font-size:5rem; letter-spacing:-2px !important;} .section_rolling .text2 li {font-size:6rem; letter-spacing:-6px !important;} .section_rolling .transition-container > ul li {line-height:60px;} .footerWrap .footer .area p span:last-child {display: block;} .footerWrap .footer .area p span:nth-of-type(2):after {display: none;} } @media screen and (max-width: 520px) { #sub.about .section.bg_b .tit-box b {font-size: 4.2rem;} #sub.about .section.bg_b .tit-box > p {font-size: 1.6rem; margin-top: 25px; line-height: 26px;} #sub.about .section.bg_b .tit-box > em {margin-top: 15px; font-size: 1.4rem; line-height: 22px;} #sub.about .section.bg_b .tit-box > em b{font-size: 1.4rem;} #sub.about .section3 .round {width: 30px; height: 30px; top: 22px; left: 35%;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.4rem; padding: 18.5px 26px;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -22px; margin-top: -20px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -37px; margin-top: -25px; } } #sub.about .section3 .canvas-wrapper canvas {right: calc(-51% + -22px);} } @media screen and (max-width: 500px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:5rem;} .main_visual p {font-size:1.8rem; line-height:24px;} /* ================================================== | 연혁 */ #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 4rem;} #sub.about .section_history .history_year {left:50px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:71px;} /* AI서비스 */ #mVisual .tit-box h4, #mVisual h4 em{font-size: 3.2rem; } #mVisual .tit-box p{font-size: 1.4rem; line-height: 140%;} #mVisual .cate-box-wrap{margin-top:30px;} #mVisual .cate-box{height:40px; padding:0 20px;} #mVisual .cate-box p{font-size: 1.1rem; margin-bottom:0;} #mVisual .cate-box-wrap{gap:5px;} } @media screen and (max-width: 480px){ .menu-overlay__heading, .menu-overlay > li > a{font-size: 4rem;} .header__burger.header__burger_opened{width: 50px; height: 50px;} .header__burger_opened .header__burger-line:nth-of-type(1), .header__burger_opened .header__burger-line, .pswp-custom-button__close-line, .header__burger_opened .header__burger-line:nth-of-type(1), .header__burger_opened .pswp-custom-button__close-line:nth-of-type(1), .header__burger_opened:hover .header__burger-line:nth-of-type(1){width: calc(1* 20* 1px);} .header__widget-content.h6{font-size: 1.6rem; line-height: 18px;} .subheading, .wp-block-latest-posts__post-date, .widget_categories ul li span, .comment-edit-link, .comment-reply-link, .comment-metadata{font-size: 1.4rem;} .header__col-widgets {padding-top: 30px; padding-bottom: 30px;} #sub.business .centerflipcards-wrap {gap: 2px;} #sub.business .centerflipcards-wrap .centerflipcards{grid-gap: 2px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip {min-height: 130px !important;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square-container{padding: 0 10px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .img-wrap{height: 30%; max-height: 50px;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap.mt-40 {margin-top: 15px !important;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap b {font-size: 1.4rem;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-container2 {padding: 80px 20px;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap b {font-size: 2.0rem;} #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap p, #sub.business .centerflipcards-wrap .centerflipcards_big .square-flip .txt-wrap p b {font-size: 1.3rem;} /* ================================================== | 메인 */ /* .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size:4.7rem; line-height:57px;} .subtit {font-size:2.0rem; line-height:32px; margin-bottom: 20px;} */ .shopping h3 {font-size:2.6rem;} .section.design .subtit .block480 {display:block;} .section.mobilewebapp .swiper.l-swiper{height: 450px;} main .section.design .img-wrap .img-con li a h3{font-size: 3.0rem; top: 101%;} .homepage .js-horizontal-scroll__section.last-item{margin-top: 20px;} .footer .con ._ts {min-height:39px;} .typing-txt {font-size:3rem; } .typed-cursor {height:40px;} .footerWrap .footer .area .util .familySite {width:calc(100% - 115px); height: 50px;} .footerWrap .footer .area .util .familySite .cur{height: 50px; line-height: 50px;} .footerWrap .footer .area .util .social{height: 50px; width: 50px;} .footerWrap .footer .area .util .social.blog img{} .footerWrap .footer .area .util .social.instargram img{} /* ================================================== | 서브 */ .sub .portfolio .portfolio-list .txt p {font-size: 1.2rem;} .sub .portfolio .portfolio-list .txt span {font-size: 1.0rem;} .btnSet .main_btn p {font-size: 1.4rem;} #sub.business.maintenance .detail-table thead tr th{font-size: 1.4rem;} #sub.business.maintenance .detail-table tbody tr td b{font-size: 1.3rem;} #sub.business.maintenance .detail-table tbody tr td, #sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5) em, #sub.business.maintenance .detail-table tbody tr td em{font-size: 1.2rem; line-height: 16px;} #sub.business.maintenance .detail-table tbody tr:nth-child(1) td:nth-child(5){line-height: 17.5px;} .tit-area .tit-box h1, .tit-area .tit-box h2, .footer .footer-body .footer-inner .txt-area .tit-area h2 {font-size:3rem; line-height: 35px;} .tit-area .tit-box h3 {font-size: 2rem; line-height: 28px;} .tit-area .tit-box h3 b{font-size: 2.5rem; line-height: 30px;} .tag-area li, .tag-area li.mini {font-size:1.2rem; min-height: 45px !important; padding: 0 15px;} .tit-area .tit-box h1 {font-size: 4rem; letter-spacing: 1px; line-height: 1;} /* #sub.about .section1 .tit-area .tit-box h4 {font-size: 2.6rem; line-height: 24px;} #sub.hiring .tag-area li:nth-child(1), #sub.hiring .tag-area li:nth-child(3), #sub.hiring .tag-area li:nth-child(5), #sub.hiring .tag-area li:nth-child(7) {min-width:100px; max-width:100px;} #sub.hiring .tag-area li:nth-child(1)::after {right:-184px;} #sub.hiring .tag-area li:nth-child(2) {min-width:130px; max-width:130px;} #sub.hiring .tag-area li:nth-child(4) {gap:5px !important; min-width:110px; max-width:110px;} #sub.hiring .tag-area li:nth-child(6) {min-width:90px; max-width:90px;} #sub.hiring .tag-area li:nth-child(7)::before {width: 25px; height: 35px; bottom: -8px; left: -5px;} #sub.contact .tag-area li:nth-child(4) {min-width:120px; max-width:120px;} */ #sub.business .section {padding-top: 60px;} #sub.business .visual-wrap.bg_b, #sub.business.shopping_mall .visual-wrap.bg_b, #sub.business.solution .visual-wrap.bg_b, #sub.business.mobile .visual-wrap.bg_b, #sub.business.landing .visual-wrap.bg_b, #sub.business.design .visual-wrap.bg_b, #sub.business.marketing .visual-wrap.bg_b, #sub.business.maintenance .visual-wrap.bg_b {padding: 60px 30px;} #sub.business .work-wrap > li{width: 210px; height: 210px;} #sub.business .work-wrap > li .circle, #sub.business .work-wrap > li:last-child .circle{padding: 20px 30px 20px 45px !important; display: flex; flex-direction: column; justify-content: center; top: 0;} #sub.hiring .process li .circle span, #sub.business .work-wrap li .circle span{height: 50%; margin-top: 0; display: flex; align-items: end;} #sub.business .work-wrap > li .circle h5{height: 50%;} #sub.hiring .tag-area li:nth-child(2) {min-width: 130px !important; text-indent: -15px;} #sub.hiring .tag-area li:nth-child(2)::after {top: 0; right: 10px; transform: scale(0.7);} #sub.hiring .tag-area li:nth-child(4) img{transform: scale(0.8);} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-35{margin-top: 15px !important;} #sub.business .centerflipcards_big .square-flip .txt-wrap p.mt-25{margin-top: 5px !important;} .header {height: 60px;} main.page-wrapper{padding-top: 60px;} .tab-area li a {line-height: 35px; min-height: 35px; font-size: 1.2rem; padding: 0 10px; min-width: 60px;} #sub.story .section ul.list li a{padding: 20px 0;} #sub.story .section ul.list li a .title, #sub.story_view .section .title{font-size: 2.0rem;} #sub.story .section ul.list li a .sub_con{font-size: 1.3rem; line-height: 20px; margin-top: 5px;} #sub.story .section ul.list li a .date{font-size: 1.0rem;} .tit-area .tit-box em, .tit-area .tit-box h4{font-size: 1.4rem; line-height: 18px;} .sub {padding-top: 40px; margin-top: 60px;} #sub.story .section, #sub.story_view {padding-bottom: 80px;} #sub.story_view .section .sub_con {padding: 20px 0;} ul.view-navi{padding: 30px 0;} .view-navi li.list a {padding: 15px 44.12px !important; font-size: 1.2rem;} .view-navi li.next a, .view-navi li.prev a{font-size: 1.2rem;} #sub.story_view .section .cont{padding: 30px 0; margin-top: 30px; font-size: 1.4rem; line-height: 25px;} .view-navi li{min-width: fit-content;} .view-navi li.next a, .view-navi li.prev a{transform: unset;} .sub .portfolio .infinite-list__image-item{margin-top: 20px;} .tab-area.gap-15{gap: 5px;} .sub .portfolio .infinite-list__item-header{bottom: 30px; left: 25px;} .sub .portfolio .infinite-list__item-header p{margin-top: 10px;} #sub.about .section2 .cont-area ul li em {font-size: 2rem;} #sub.about .section2 .cont-area ul li p {font-size: 2rem; margin-top: 15px;} #sub.about .section2 .cont-area ul li p b {font-size: 5rem;} #sub.about .section3 {padding-top: 60px;} #sub.about .section3 .section-column.mt-50 {margin-top: 120px !important;} #sub.about .section3 .canvas-wrapper canvas {transform: scale(1); top: -36px; right: -48%;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 5px !important;} #sub.about .section3 .txt-wrap > li > ul > li {padding: 15.5px 23px;} #sub.about .section3 .round {top: 17px; left: 30vw;} #sub.about .section4 .workSwiper{padding-right: 20px;} #sub.about .section4 .work_wrap .work_list li {padding: 30px 20px;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img {height: 50px;} #sub.about .section4 .work_wrap .work_list li p {margin-top: 30px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 2.3rem; margin-top: 12px;} #sub.about .section4 .work_wrap .work_list li span {font-size: 1.2rem; line-height: 18px; margin-top: 20px; word-break: keep-all; min-height: 120px;} #sub.about .section .section-row .section-column.mt-80{margin-top: 40px !important;} #sub.about .section6 .withus_list {grid-template-columns: repeat(3, 1fr); grid-gap: 15px;} .search-area.mt-125{margin-top: 40px !important;} .sub .portfolio.mt-55{margin-top: 20px !important;} .sub .search-area .placeholder, .sub .search-area .search-wrap input[type="text"]{font-size: 1.4rem;} .sub .search-area .search-wrap{max-width: calc(100vw - 80px); height: 40px;} .sub .search-area .search-wrap input[type="text"]{width: calc(100vw - 80px); padding: 0 35px 0 0;} .sub .search-area .search-wrap::before, .sub .search-area .search-wrap::after {width: 15px; height: 40px;} .sub .search-area .search-wrap .btn_search {width: 30px !important; height: 30px !important; background-size: 13px 14px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 4.3rem; line-height: 50px; letter-spacing: -1px;} #sub.portfolio.view-new .fs18{font-size: 1.4rem; line-height: 20px !important; letter-spacing: -0.44px;} #sub.portfolio.view-new .fs24 {font-size: 1.6rem; line-height: 25px;} .fs200{font-size: 10rem;} .fs110 {font-size: 4.5rem; line-height: 65px;} .fs28 {font-size: 1.8rem; line-height: 25px;} .fs22 {font-size: 1.7rem;} .fs14 {font-size: 1.2rem; line-height: 15px;} #sub.portfolio.view-new .dateList li{gap: 7px;} #sub.portfolio.view-new .dateList li > em {width: 42px;} #sub.portfolio.view-new .dateList li + li {margin-top: 7px;} #sub.portfolio.view-new .dateList li > span {width: calc(100% - 49px);} #sub.portfolio.view-new .section1 .txt-box.gap-100 {gap: 25px;} #sub.portfolio.view-new .section1 .txt-box em.mt-30 {margin-top: 12px !important;} #sub.portfolio.view-new .styleguide-list .typography-list li b {line-height: 125px;} #sub.portfolio.view-new .section5 .img img {width: 125px; height: 95px;} .fs50 {font-size: 2.8rem; line-height: 35px;} #sub.portfolio.view-new .section5 .txt b > br{display: none;} #sub.portfolio.view-new .section6 .feature-list {padding: 30px 0;} #sub.portfolio.view-new .section6 .feature-list .tit-box b {font-size: 1.8rem;} #sub.portfolio.view-new .section6 .feature-list .tit-box p {font-size: 1rem; line-height: 13px;} #sub.portfolio.view-new .pro_fea li{width: 120px; min-height: 110px; padding: 10px;} #sub.portfolio.view-new .pro_fea li .txt b {font-size: 0.6417rem;} #sub.portfolio.view-new .pro_fea li .txt em {font-size: 0.4933rem; line-height: 8px;} #sub.portfolio.view-new .pro_fea li .img img{width: 25.73px; height: 25.73px;}#sub.portfolio.view-new .pro_fea li + li {margin-left: 7px;} #sub.portfolio.view-new .section6 .marquee-wrap {margin-top: 16.25px;} #sub.portfolio.view-new .section7 .content-list .list > * {height: 350px;} #sub.portfolio.view-new .section8 .section-body .section-column.txt-box {padding: 50px 20px 40px;} #sub.portfolio.view-new .section9, #sub.portfolio.view-new .section10 {padding: 60px 0;} #sub.portfolio.view-new .section10 .view-navi {padding: 60px 0 0 0;} #sub.portfolio.view-new .section10 .txt-box em {line-height: 26px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 6rem; line-height: 70px;} #sub.portfolio.view-new .section9 .artlist{gap: 20px;} #sub.portfolio.view-new .section9 .artlist li + li {margin-top: 60px;} #sub.portfolio.view-new .section9 .art-img img{border: 5px solid transparent; box-sizing: border-box;} #sub.portfolio.view-new .section9 .artlist li + li .art-img + .art-img {margin-top: 30px;} .mt-70 {margin-top: 40px !important;} .contact-tit-area .tel-box{margin-top:10px; padding-left:40px; font-size:2.8rem; letter-spacing: -2px;} .contact-tit-area .tel-box:before{width:35px; height:35px; top:-8px;} } @media screen and (max-width: 460px){ /* ================================================== | 서브 */ #sub.business .tips-wrap li:nth-of-type(3) h4 br {display:block;} } @media screen and (max-width: 430px){ /* ================================================== | 메인 */ .main_visual h2 {font-size:4rem;} .main_visual p {font-size:1.6rem; line-height:22px;} .section_rolling .text1 li {font-size:4.5rem;} .section_rolling .text2 li {font-size:5.5rem;} main .landing a.mt-80{margin-top: 40px !important;} /* ================================================== | 서브 */ /* #sub.business .work-wrap li .circle .detail-con {width: calc(100% - 140px); left: 140px;} #sub.business .work-wrap .detail-con li { padding-left: 13px;} */ #sub.business .work-wrap > li .circle h5 b {font-size:1.8rem !important;} /* #sub.business .work-wrap li .circle { width: 135px; height: 135px;} */ #sub.business .tit-area .tit-box h3 {font-size:1.6rem; line-height: 24px;} #sub.business .tit-area .tit-box h3 b {font-size:2.0rem; line-height: 29px;} #sub.hiring .visual-wrap .tit-area .tit-box h3, #sub.contact .visual-wrap .tit-area .tit-box h3 {font-size: 2rem;} #sub.hiring .visual-wrap .tit-area .tit-box h3 b, #sub.contact .visual-wrap .tit-area .tit-box h3 b{font-size: 2.5rem; line-height: 30px;} #sub.business .centerflipcards .square-flip .square .txt-wrap em {font-size: 1.0rem;} #sub.business .centerflipcards-wrap .centerflipcards .square-flip .square .txt-wrap b{font-size: 1.2rem; margin-top: 5px;} .br430{display: block;} #sub.story .section ul.list li:hover .hover-img{width: 160px; height: 160px;} #sub.about .section_history .position_list .history_list {font-size: 1.2rem;} #sub.about .section_history .position_list.on .history_list {font-size: 1.3rem;} #sub.about .section_history .history_list > li + li {margin-top: 10px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -174px;} } @media screen and (max-width: 420px) { .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2 {font-size: 3.5rem; line-height: 45px;} .subtit {font-size: 1.2rem; line-height: 18px;} #sub.about .section.bg_b .tit-box b {font-size: 3.5rem;} #sub.about .section.bg_b .tit-box b + b {margin-top: 4px;} #sub.about .section.bg_b .tit-box > p {font-size: 1.2rem; margin-top: 15px; line-height: 20px;} #sub.about .section.bg_b .tit-box > em {margin-top: 12px; font-size: 1.2rem; line-height: 20px;} #sub.about .section.bg_b .tit-box > em b {font-size: 1.2rem;} #sub.about .section3 .round {width: 27px; height: 27px; top: 14px; left: 30.5vw;} #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.3rem; padding: 13.5px 19px;} #sub.about .section4 .work_wrap .work_list li {padding: 20px;} #sub.about .section4 .work_wrap .work_list li .ico_wrap img {height: 35px;} #sub.about .section4 .work_wrap .work_list li p {margin-top: 20px;} #sub.about .section4 .work_wrap .work_list li p b {font-size: 1.9rem; margin-top: 8px;} #sub.about .section4 .work_wrap .work_list li p em {font-size: 1.4rem;} #sub.about .section4 .work_wrap .work_list li span{min-height: 90px;} .sub .portfolio .portfolio-list{grid-template-columns: 1fr; gap: 5px;} #sub.portfolio.view-new .section9 .txt-box p span.fs200 {font-size: 5rem; line-height: 60px;} #sub.portfolio.view-new .section9 .txt-box p em.fs40 {font-size: 1.6rem; line-height: 1;} .header__col_right-menu .request-btn i{display:none !important;} .header__col_right-menu .request-btn{ padding:15px !important; width:60px;} } @media screen and (max-width: 400px) { #sub.about .section3 .canvas-wrapper canvas {transform: scale(0.8); top: 14px;} .br400{display: block;} #sub.portfolio.view-new .section7 .content-list .list > * {height: 300px;} #sub.portfolio.view-new .tit-area .tit-box h1 {font-size: 4rem;} #sub.portfolio.view-new .tit-area .tit-box em {font-size: 1.5rem;} #sub.about .section_history .history_list .block400 {display: block;} #sub.about .section_history .history_year, #sub.about .section_history #fix-year {font-size: 3.5rem;} #sub.about .section_history .history_year {left:45px;} #sub.about .section_history.pin-fixed .position_list.on .history_year {left:65px;} #sub.about .section_history.out-fixed .last_position_list.on .history_year {margin-top: -156px;} #sub.about .section_history .position_list .history_list {margin-left: 20px;} } @media screen and (max-width: 380px){ .homepage h2, .section.shopping .tit-box h2, .mobile h2, .section.design .tit-box h2, .landing h2, main .solution h2{font-size: 3.0rem; letter-spacing: -0.8px; line-height: 37px;} .subtit {font-size: 1.4rem; line-height: 20px;} /* ================================================== | 서브 */ #sub.business .tips-wrap li h4 br {display:block;} #sub.about .section3 .txt-wrap > li > ul.gap-30 {gap: 3px !important;} #sub.about .section3 .round {left: 28.5vw;} @keyframes slideAndRotateCon7 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(24.98deg); /* 최종 위치와 회전 상태 */ margin-left: -22px; margin-top: -16px; } } @keyframes slideAndRotateCon8 { 0% { opacity: 0; transform: translateY(-50px) rotate(0deg); /* 회전 없음, 위쪽으로 이동 */ } 100% { opacity: 1; transform: translateY(0) rotate(50.24deg); /* 최종 위치와 회전 상태 */ margin-left: -37px; margin-top: -21px; } } #sub.about .section3 .txt-wrap > li > ul > li {font-size: 1.2rem;} #sub.about .section3 .canvas-wrapper canvas {transform: unset; right: -59%;} } @media screen and (max-width: 364px){ /* ================================================== | 서브 */ #sub.hiring .agency li:first-of-type span br:last-of-type, #sub.hiring .agency li:nth-of-type(2) span br:last-of-type, #sub.hiring .agency li:last-of-type span br:last-of-type {display:block;} .br364{display: block;} } @media screen and (max-width: 360px){ /* ================================================== | 헤더 */ .menu-overlay__heading, .menu-overlay > li > a {font-size:4rem;} /* ================================================== | 메인 */ .main_visual h2 {font-size:3.5rem;} .main_visual p {font-size:1.4rem; line-height:20px;} .section_rolling .text2 li b::after {width:25px; height:15px; bottom:5px;} .section_rolling .text1 li {font-size:4rem;} .section_rolling .text2 li {font-size:5rem;} .footerWrap .footer .area .util {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; gap:10px 5px;} .footerWrap .footer .area .util .familySite {width:100%;} .typing-txt {font-size:2.5rem;} .typed-cursor {height:35px; } .footer .con ._ts {min-height:33px;} .contactUsWrap.con, main.page-wrapper .contactUsWrap.con {height:500px;} /* ================================================== | 서브 */ .tit-area .tit-box h3 {font-size:2rem; line-height:30px;} .tit-area .tit-box h3 b {font-size:2.5rem; line-height:35px;} #sub.hiring .tit-area .tit-box h5 {font-size:1.5rem; line-height:23px;} .contact .check-box > input[type="checkbox"] ~ label {line-height:20px; flex-grow:1;} .contact .check-box a {flex-shrink: 1; width: 45px; padding: 5px; text-align: center;} #sub.business .work-wrap {grid-template-columns:1fr 1fr;} #sub.business .work-wrap > li:last-of-type {grid-column:1 / 3;} #sub.business .work-wrap > li .circle {margin:0 auto;} #sub.business .work-wrap > li .circle .detail-con {top: 145px; width: 100%; left: 50%; transform: translate(-50%, 0);} #sub.business .work-wrap > li:nth-of-type(2) .circle .detail-con, #sub.business .work-wrap > li:nth-of-type(4) .circle .detail-con {padding-left:10px;} .br360{display: block;} } @media screen and (max-width: 340px){ /* ================================================== | 서브 */ .contact .check-box > input[type="checkbox"] ~ label .block360 {display:block;} }