/* ======================================== layout css ======================================== @author : @version : v1.0 @date-create : @file-name : layout */ @import url('base.css'); ::-webkit-scrollbar {width: 5px; height:5px;} ::-webkit-scrollbar-thumb {background-color: #111;} ::-webkit-scrollbar-corner {background-color: #111;} ::-webkit-scrollbar-button {display: none;} * {margin:0; padding:0;} html, body {overflow-x:hidden;} body {-webkit-font-smoothing:antialiased;} .container {position:relative; left:50%; margin-left:-600px; width:1200px; max-width:1920px; transition:all 0.3s ease;} .container-fluid {position:relative; width:100%;} .img-responsive {display:block; width:100%;} /* Header */ .wrap header {position:fixed; width:100%; height:80px; background:#000; z-index:9;} .wrap header h1 {width:210px; padding-top:17px;} .wrap header nav {position:absolute; top:30px; right:165px;} .wrap header nav .gnb:after {content:''; display:block; height:0; clear:both;} .wrap header nav .gnb li {float:left; margin:0 23px; transition:all 0.3s ease;} .wrap header nav .gnb li a {display:block; padding:0 30px;font-size:1.125em; letter-spacing:-0.05em; color:#fff; transition:all 0.3s ease;} .wrap header nav .gnb li a.on {color:#4c52a4;} .wrap header .language {position:absolute; top:24px; right:0; width:120px; z-index:10;} .wrap header .language >a {position:relative; display:block; width:120px; height:32px; line-height:32px; text-align:center; font-size:0.875em; letter-spacing:-0.025em; color:#fff; background:#4c52a4;} .wrap header .language >a:after {content:''; position:absolute; width:5px; height:3px; top:15px; right:20px; background:url(../../images/common.png) no-repeat;} .wrap header .language .list {display:none; width:100%; position:absolute; top:32px; left:0;} .wrap header .language .list li {height:32px; line-height:32px; background:#6d72b5; border-top:1px solid #878dd5;} .wrap header .language .list li:first-child {border-top:none;} .wrap header .language .list li a {text-align:center; font-size:0.875em; letter-spacing:-0.025em; color:#c5c8fc;} .wrap header .language .list li a:hover {color:#fff; background:#4c52a4;} /* Footer */ .wrap footer {padding:80px 0 72px; text-align:center; background:#333;} .wrap footer address {line-height:26px; font-size:1em; letter-spacing:0.025em; color:#fff; font-weight:200;} .wrap footer p {font-size:1em; color:#fff; font-weight:200; letter-spacing:0.025em;} .wrap footer a {display:inline; color:#fff;} .wrap footer .copyright {margin-top:29px; color:#999;} .wrap .mobileMenu.on {top:80px; z-index:10;} .wrap .mobileMenu {position:fixed; top:-300px; left:0; width:100%; z-index:8; transition:all 0.6s ease;} .wrap .mobileMenu .inner {position:relative;} .wrap header .openMobileMenu {display:none; position:absolute; top:24px; right:0; width:50px; height:35px; text-indent:-9999em; background:url(../../images/common.png) 2px -268px no-repeat;} .wrap .mobileMenu .closeMobileMenu {position:absolute; top:-56px; right:6%; width:50px; height:35px; text-indent:-9999em; background:url(../../images/common.png) -70px -266px no-repeat;} .wrap .mobileMenu .menu >li {width:100%; font-size:1.375em; color:#999; font-size:1.375em; border-top:1px solid #383635; background:#211f1e;} .wrap .mobileMenu .menu >li:first-child {border-top:none;} .wrap .mobileMenu .menu >li >a {position:relative; display:block; width:100%; height:68px; line-height:68px; padding-left:6.6%; box-sizing:border-box; color:#999;} .wrap .mobileMenu .menu >li >a:after {content:''; position:absolute; top:26px; right:6.6%; width:20px; height:20px; background:url(../../images/common.png) -135px -281px no-repeat;} .wrap .mobileMenu .menu >li >a.on:after {background-position:-175px -284px;} .wrap .mobileMenu .menu li .list {display:none; padding:25px 0; background:#000;} .wrap .mobileMenu .menu li .list li a {height:30px; line-height:30px; margin:8px 0; padding:10px 0 10px 12%; font-size:1.125em; color:#999;} .wrap .mobileMenu .menu li .list li .on {color:#5d65d1;} .wrap #layout {padding-top:80px;} .wrap br.tablet,.wrap br.mo {display:none;} .wrap br.pc {display:block;} /* Main */ .main .visualBox {height:880px; background:url(../../images/main/main_visual_bg.jpg) center top no-repeat;} .main .visualBox .contentBox {padding-top:333px; text-align:center;} .main .visualBox .contentBox h2 {line-height:66px; font-size:4.125em; color:#fff; transition:all 0.3s ease;} .main .visualBox .contentBox h2 em {line-height:120px; font-size:1.818em; font-weight:500; transition:all 0.3s ease;} .main .visualBox .contentBox p {margin-top:14px; line-height:55px; font-size:2.125em; color:#fff; transition:all 0.3s ease;} .main .visualBox .contentBox .btnContact {position:relative; display:inline-block; width:440px; height:80px; margin-top:50px; line-height:80px; text-align:center; font-size:2.125em; color:#fff; background:#5d65d1; border-radius:3px;} .main .visualBox .contentBox .btnContact:after {content:''; display:inline-block; width:11px; height:19px; margin-left:15px; background:url(../../images/common.png) -25px 0 no-repeat;} .main .solutionBox .contentBox {position:absolute; width:80%;} .main .solutionBox .contentBox h2 {position:relative; line-height:46px; font-size:2.500em; color:#4646ff; transition:all 0.3s ease;} .main .solutionBox .contentBox h2:after {content:''; position:absolute; bottom:-3px; left:0; width:49px; height:2px; background:#4646ff;} .main .solutionBox .contentBox .desc {margin-top:27px; line-height:40px; font-size:2.000em; color:#000; transition:all 0.3s ease;} .main .solutionBox .contentBox .txt {margin-top:19px; line-height:28px; font-size:1.250em; color:#333; transition:all 0.3s ease;} .main .solutionBox .contentBox p em {font-weight:bold;} .main .solutionBox >div {height:527px; background-position:center top; background-repeat:no-repeat;} .main .solutionBox .trand {background-image:url(../../images/main/main_trend_bg.jpg);} .main .solutionBox .trand .contentBox {top:175px; left:8.5%;} .main .solutionBox .branding {background-image:url(../../images/main/main_branding_bg.jpg);} .main .solutionBox .branding .contentBox {top:135px; right:0; width:40%;} .main .solutionBox .feature {background-image:url(../../images/main/main_feature_bg.jpg);} .main .solutionBox .feature .contentBox {top:160px; left:8.5%;} .main .solutionBox .design {background-image:url(../../images/main/main_design_bg.jpg);} .main .solutionBox .design .contentBox {top:156px; right:2%; width:43%;} .main .solutionBox .technology {background-image:url(../../images/main/main_technology_bg.jpg);} .main .solutionBox .technology .contentBox {top:151px; left:8.5%;} .main .solutionBox .technology .contentBox h2, .main .solutionBox .technology .contentBox .desc {color:#fff;} .main .solutionBox .technology .contentBox h2:after {background:#fff;} .main .solutionBox .technology .contentBox .txt {color:#fff; opacity:0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"} .main .companyBox h2 {text-align:center;} .main .companyBox .uzen {padding-bottom:54px; background:#f8f8f8; border-top:3px solid #f05626;} .main .companyBox .uzen h2 {margin-top:59px; transition:all 0.3s ease;} .main .companyBox .uzen p {margin-top:37px; text-align:center; font-size:2.625em; line-height:48px; color:#222; transition:all 0.3s ease;} .main .companyBox .uzen p .en {font-size:1.105em; transition:all 0.3s ease;} .main .companyBox .uzen ul {width:1050px; margin:91px auto 0;} .main .companyBox .uzen ul:after {content:''; display:block; height:0; clear:both;} .main .companyBox .uzen ul li {float:left; width:29%; margin:0 2.1%; text-align:center; font-size:1.500em; line-height:28px; color:#666;} .main .companyBox .uzen ul li:before {content:''; display:block; width:144px; height:144px; padding-bottom:33px; margin:0 auto; text-align:center; background:url(../../images/main/uzen_client_typo.png) no-repeat;} .main .companyBox .uzen ul li em {font-weight:bold;} .main .companyBox .uzen ul .first:before {background-position:0 0;} .main .companyBox .uzen ul .second:before {background-position:-165px 0;} .main .companyBox .uzen ul .third:before {background-position:-330px 0;} .main .companyBox .uzenClients {position:relative; padding-bottom:93px; border-top:1px solid #c6c6c6; background:#f8f8f8;} .main .companyBox .uzenClients:before {content:''; position:absolute; top:0; left:0; width:100%; height:1px; background:#fff;} .main .companyBox .uzenClients h2 {margin-top:66px; line-height:60px; font-size:2.500em; font-weight:500; letter-spacing:0.025em; color:#555; transition:all 0.3s ease;} .main .companyBox .uzenClients .clientList {margin-top:31px;} .main .companyBox .uzenClients .clientList:after {content:''; display:block; height:0; clear:both;} .main .companyBox .uzenClients .clientList li {float:left; width:14.2%; height:80px; padding:15px 0; text-align:center; vertical-align:middle; border-bottom:1px solid #dddcdb; border-left:1px solid #dddcdb; box-sizing:border-box; transition:all 0.3s ease;} .main .companyBox .uzenClients .clientList .client01, .main .companyBox .uzenClients .clientList .client08, .main .companyBox .uzenClients .clientList .client15 {border-left:none;} .main .companyBox .uzenClients .clientList .client15, .main .companyBox .uzenClients .clientList .client16, .main .companyBox .uzenClients .clientList .client17, .main .companyBox .uzenClients .clientList .client18, .main .companyBox .uzenClients .clientList .client19, .main .companyBox .uzenClients .clientList .client20, .main .companyBox .uzenClients .clientList .client21 {border-bottom:none;} /* Contact */ .mt40 {margin-top: 40px;} .mt50 {margin-top: 50px;} .mt80 {margin-top: 80px;} .contact#layout {background: #ebebdd;} .contents {padding: 77px 0 102px; margin: 0 auto; width:1000px;} .subTit {font-size:2.250em;} .subTit strong {color: #4646ff; font-weight:500;} .sectionWrap {border-top: 1px solid #c3c3c3;} .sectionGroup {overflow: hidden; padding-bottom: 50px; border-bottom: 1px solid #c3c3c3;} .sectionGroup h3 {float: left; padding-top: 68px; font-size: 1.250em; color: #000; font-weight: 500;} .sectionGroup ul {float: right; padding-top: 49px; width: 79.7%;} .sectionGroup ul li {margin-top: 10px;} .sectionGroup ul li:first-child {margin-top: 0;} .sectionGroup ul li {line-height: 50px; font-size: 1.125em;} .sectionGroup ul li h4 {position: relative; display: inline-block; width: 17.2%; vertical-align: middle; color: #666;} /*.sectionGroup ul li h4.required {padding-left: 3%; width: 8.2%;}*/ .sectionGroup ul li input, .sectionGroup ul li select {padding-left: 2%; height: 50px; vertical-align: middle; border: 1px solid #bfbfbf; border-right: none; border-bottom: none; color: #b5b5b5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .sectionGroup ul li input.mail, .sectionGroup ul li select.mail {width: 46.6%;} .sectionGroup ul li select.long {width: 80%;} .sectionGroup ul li input.long {width: 80%;} .sectionGroup ul li .inputGroup {float: right; width: 82.1%;} .sectionGroup ul li input.trisect {width: 30.6%;} .sectionGroup ul li textarea {width: 79.8%; height: 249px; vertical-align: middle; border: 1px solid #bfbfbf; border-right: none; border-bottom: none; color: #b5b5b5; box-sizing: border-box;} .sectionGroup ul li .required em {position: absolute; top: 18px; left: -11px; width: 7px; height: 7px; background: url(../../images/ico_required.png) no-repeat;} .boxCheck {position: relative; padding: 30px; background: #ebebdd; border: 1px solid #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#666;} .boxCheck .title {padding-bottom:16px;} .boxCheck .title h4 {margin-top: -3px; font-size: 1.250em; text-align: center; font-weight: 500; color:#000;} .boxCheck .title .arrow {display: block; margin: 13px auto 0; width: 30px; height: 21px; text-align: center; text-indent:-9999em; background-image: url(../../images/common.png); background-repeat: no-repeat; background-position:9px -22px; cursor: pointer;} .boxCheck .title.up .arrow {background-image: url(../../images/common.png); background-position:9px -37px;} .boxCheck .title span {display: block; margin-top:20px; text-align: center; font-size:1.125em;} .boxCheck .check {margin-left:10px; width: 20px;} .boxCheck p {display: none; margin: 15px 0 25px; font-size:1.125em;} .boxCheck .agree {position:relative; padding-top:23px; text-align:center; border-top:1px solid #c0c0c0; font-size:1.125em;} .boxCheck input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(1); /* IE */ -moz-transform: scale(1); /* FF */ -webkit-transform: scale(1); /* Safari and Chrome */ -o-transform: scale(1); /* Opera */ padding: 10px; } .btnWrap {text-align: center;} .btnWrap a[class*='btn'] {display: inline-block; width: 23%; height: 54px; text-align: center; line-height: 54px; font-size: 1.5em; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-weight:500;} .btnWrap a:first-child {margin-right: 2%;} .btnWrap .btnGray {background: #666; color: #fff; } .btnWrap .btnBlue {background: #4646ff; color: #fff;} @media screen and (max-width:1200px) { .container {left:0; margin:0 5%; width:90%;} .wrap header nav {right:130px} .wrap header nav .gnb li {margin:0 10px;} .wrap header nav .gnb li a {padding:0 15px;} .main .visualBox .contentBox h2 {line-height:65px; font-size:3.750em;} .main .visualBox .contentBox h2 em {line-height:90px; font-size:1.500em;} .main .visualBox .contentBox p {font-size:1.625em;} .main .solutionBox .contentBox {width:85%;} .main .solutionBox .trand .contentBox {left:0;} .main .solutionBox .branding .contentBox {width:400px;} .main .solutionBox .feature .contentBox {left:0;} .main .solutionBox .design .contentBox {width:479px;} .main .solutionBox .technology .contentBox {left:0;} .main .companyBox .container {margin:0; width:100%;} .main .companyBox .uzen ul {width:100%; margin-top:92px;} .main .companyBox .uzenClients .clientList li {padding-left:10px; padding-right:10px;} .main .companyBox .uzenClients .clientList li img {width:100%;} /* Contact*/ .contents {padding: 77px 2% 102px; width: 100%; box-sizing: border-box;} .sectionGroup h3 {} .sectionGroup ul {width: 78%;} .sectionGroup ul li h4 {width: 23.2%;} .sectionGroup ul li .inputGroup {width: 76%;} .sectionGroup ul li input.long {width: 75%;} .sectionGroup ul li select.long {width: 75%;} .sectionGroup ul li textarea {width: 75%;} .sectionGroup ul li input.mail, .sectionGroup ul li select.mail {width: 46.2%;} .sectionGroup ul li input.trisect {width: 30%;} } @media screen and (max-width:799px) { .wrap br.pc {display:none;} .wrap br.tablet {display:block;} .wrap header .gnb {display:none;} .wrap header .language {display:none;} .wrap header .openMobileMenu {display:block;} .wrap .mobileMenu.on {display:block !important;} .wrap footer .container {width:100%; margin:0;} .main .visualBox .container {margin:0; width:100%;} .main .visualBox .contentBox .btnContact {font-size:1.750em;} .main .solutionBox .contentBox {width:90%;} .main .solutionBox .contentBox h2 {line-height:33px; font-size:2.500em;} .main .solutionBox .contentBox h2:after {bottom:-9px; width:48px;} .main .solutionBox .contentBox .desc {margin-top:34px; line-height:38px; font-size:1.750em;} .main .solutionBox .contentBox .txt {margin-top:22px; line-height:28px; font-size:1.125em;} .main .solutionBox >div {height:450px;} .main .solutionBox .trand .contentBox {top:108px;} .main .solutionBox .branding .contentBox {top:116px; width:340px;} .main .solutionBox .feature .contentBox {top:129px;} .main .solutionBox .design .contentBox {top:90px; width:432px;} .main .solutionBox .technology .contentBox {top:120px;} .main .solutionBox .trand {background-image:url(../../images/main/main_trend_bg_tablet.jpg);} .main .solutionBox .branding {background-image:url(../../images/main/main_branding_bg_tablet.jpg); background-position:right top;} .main .solutionBox .feature {background-image:url(../../images/main/main_feature_bg_tablet.jpg);} .main .solutionBox .design {background-image:url(../../images/main/main_design_bg_tablet.jpg);} .main .solutionBox .technology {background-image:url(../../images/main/main_technology_bg_tablet.jpg);} .main .companyBox .uzen {padding-bottom:70px;} .main .companyBox .uzen p {margin-top:50px; font-size:2.250em; line-height:46px;} .main .companyBox .uzen p .en {font-size:1.167em;} .main .companyBox .uzen ul li {font-size:1.25em; line-height:24px;} .main .companyBox .uzen ul li:before {padding-bottom:19px} .main .companyBox .uzenClients {padding-bottom:70px;} .main .companyBox .uzenClients h2 {margin-top:66px; line-height:60px; font-size:2.500em;} .main .companyBox .uzenClients .clientList {margin-top:41px; border-top:1px solid #dddcdb; border-bottom:1px solid #dddcdb;} .main .companyBox .uzenClients .clientList li {width:33.33%; padding-left:0; padding-right:0;} .main .companyBox .uzenClients .clientList li img {width:auto;} .main .companyBox .uzenClients .clientList .client15, .main .companyBox .uzenClients .clientList .client16, .main .companyBox .uzenClients .clientList .client17, .main .companyBox .uzenClients .clientList .client18 {border-bottom:1px solid #dddcdb;} .main .companyBox .uzenClients .clientList .client01, .main .companyBox .uzenClients .clientList .client08, .main .companyBox .uzenClients .clientList .client15 {border-left:1px solid #dddcdb;} /* Contact */ .contents {padding: 50px 5% 102px; width: 100%; box-sizing: border-box;} .subTit {font-size: 1.875em;} .sectionWrap.mt50 {margin-top: 32px;} .sectionGroup h3 {float: none; padding-top: 40px; padding-left: 1.5%;} .sectionGroup ul {float: none; padding-top: 26px; width: 100%;} .sectionGroup ul li h4 {padding-left: 2%; width: 21.65%;} .sectionGroup ul li h4.required {padding-left: 2%; width: 21.65%;} .sectionGroup ul li h4.twoRow {line-height: 1.125em;} .sectionGroup ul li select, .sectionGroup ul li textarea, .sectionGroup ul li .inputGroup, .sectionGroup ul li label input {float: right;} .sectionGroup ul li .inputGroup {width: 70%;} .sectionGroup ul li input.long {width: 70%;} .sectionGroup ul li select.long {width: 70%;} .sectionGroup ul li textarea {width: 70%;} .sectionGroup ul li input.mail, .sectionGroup ul li select.mail {width: 45%;} .sectionGroup ul li input.trisect {width: 30%;} .btnWrap a[class*='btn'] {width: 40.93%; font-size: 1.25em;} .sectionGroup ul li .required em {left: 0;} .btnWrap.mt80 {margin-top: 40px;} } @media screen and (max-width:639px) { .wrap br.tablet {display:none;} .wrap br.mo {display:block;} .container {left:0; margin:0; width:100%;} .wrap header .container {margin:0 4%; width:92%;} .wrap footer {padding:65px 0 58px;} .wrap footer .container {padding:10px; box-sizing:border-box;} .main .visualBox {height:880px; background-image:url(../../images/main/main_visual_bg_mo.jpg);} .main .visualBox .contentBox {padding-top:58%;} .main .visualBox .contentBox h2 {font-size:9.8vw; line-height:13.6vw;} .main .visualBox .contentBox h2 em {font-size:15vw; line-height:15.5vw;} .main .visualBox .contentBox p {font-size:4.4vw; line-height:5.5vw;} .main .visualBox .contentBox .btnContact {margin-top:60px; width:68.75%; font-size:1.563em;} .main .visualBox .contentBox .btnContact:after {vertical-align:middle;} .main .solutionBox .contentBox {position:relative; top:0; width:100%; padding-top:100px;text-align:center;} .main .solutionBox .contentBox h2 {font-size:6.25vw; line-height:5.1vw;} .main .solutionBox .contentBox .desc {font-size:4.8vw;} .main .solutionBox .contentBox .txt {font-size:3.2vw;} .main .solutionBox .contentBox h2:after {left:50%; margin-left:-24px;} .main .solutionBox >div {padding-bottom:62%; background-size:contain;} .main .solutionBox .trand {height:auto; background-position:center bottom; background-image:url(../../images/main/main_trend_bg_mo.jpg);} .main .solutionBox .trand .contentBox {top:0;} .main .solutionBox .branding {height:auto; background-position:center bottom; background-image:url(../../images/main/main_branding_bg_mo.jpg);} .main .solutionBox .branding .contentBox {top:0; width:100%;} .main .solutionBox .feature {height:auto; background-position:center bottom; background-image:url(../../images/main/main_feature_bg_mo.jpg);} .main .solutionBox .feature .contentBox {top:0;} .main .solutionBox .design {height:auto; background-position:center bottom; background-image:url(../../images/main/main_design_bg_mo.jpg);} .main .solutionBox .design .contentBox {top:0; width:100%; padding-top:40px;} .main .solutionBox .technology {height:auto; background-position:center bottom; background-image:url(../../images/main/main_technology_bg_mo.jpg);} .main .solutionBox .technology .contentBox {top:0;} .main .solutionBox .technology .contentBox h2 {color:#4646ff;} .main .solutionBox .technology .contentBox h2:after {background:#4646ff;} .main .solutionBox .technology .contentBox .desc {color:#000;} .main .solutionBox .technology .contentBox .txt {color:#333; opacity:1;} .main .companyBox .uzen h2 {margin-top:79px;} .main .companyBox .uzen p {margin-top:40px; font-size:5.6vw;} .main .companyBox .uzen p .en {font-size:5.9vw;} .main .companyBox .uzen ul {margin-top:52px;} /* Contact */ .sectionGroup ul li h4 {letter-spacing:-0.05em;} .boxCheck .agree {font-size:1em;} } @media screen and (max-width:479px) { .wrap #layout {padding-top:40px;} .wrap .mobileMenu.on {top:40px; z-index:10;} .wrap .mobileMenu .closeMobileMenu {top:-36px; right:4%; width:30px; height:30px; background-size:150px; background-position:-32px -127px;} .wrap .mobileMenu .menu >li >a {height:40px; line-height:40px; font-size:0.81em;} .wrap .mobileMenu .menu >li >a:after {top:8px; background-size:200px; background-position:-86px -185px;} .wrap .mobileMenu .menu >li >a.on:after {background-position:-113px -187px;} .wrap .mobileMenu .menu li .list {padding:15px 0;} .wrap .mobileMenu .menu li .list li a {height:auto; line-height:1em; padding-left:10%; font-size:0.81em;} .wrap header {height:40px;} .wrap header h1 {width:105px; padding-top:8px;} .wrap header h1 img {width:100%; vertical-align:top;} .wrap header .openMobileMenu {top:7px; right:0; width:33px; height:25px; background-position: 6px -131px; background-size:150px;} .main .visualBox {height:auto; padding-bottom:14%; background-size:contain;} .main .visualBox .contentBox {padding-bottom:2%;} .main .visualBox .contentBox h2 {line-height:11.6vw;} .main .visualBox .contentBox .btnContact {height:60px; margin-top:20px; line-height:60px; font-size:1.375em;} .main .solutionBox >div {padding-bottom:60.5%;} .main .solutionBox .contentBox {padding-top:50px;} .main .solutionBox .contentBox h2 {font-size:1.250em; line-height:20px;} .main .solutionBox .contentBox h2:after {width:24px; margin-left:-12px;} .main .solutionBox .contentBox .desc {margin-top:20px; font-size:1em; line-height:20px;} .main .solutionBox .contentBox .txt {margin-top:10px; font-size:0.750em; line-height:16px; font-weight:300; letter-spacing:0;} .main .companyBox .uzen {padding-bottom:40px;} .main .companyBox .uzen h2 {margin-top:40px;} .main .companyBox .uzen h2 img {width:25%;} .main .companyBox .uzen p {margin-top:14px; font-size:1.063em; line-height:23px; letter-spacing:0;} .main .companyBox .uzen ul {margin-top:29px;} .main .companyBox .uzen ul li {width:30%; margin:0 1.6%; font-size:0.750em; line-height:14px;} .main .companyBox .uzen ul li:before {width:80%; height:auto; padding-bottom:87%; background-size:330%;} .main .companyBox .uzen ul .second:before {background-position:center 0;} .main .companyBox .uzen ul .third:before {background-position:right 0;} .main .companyBox .uzenClients {padding-bottom:40px;} .main .companyBox .uzenClients h2 {margin-top:35px; font-size:1.250em; line-height:30px;} .main .companyBox .uzenClients .clientList {margin-top:21px;} .main .companyBox .uzenClients .clientList li {height:auto; padding-left:10px; padding-right:10px; box-sizing:border-box;} .main .companyBox .uzenClients .clientList li img {width:100%; vertical-align:top;} .wrap footer {padding:50px 0 42px;} .wrap footer address {font-size:0.750em; line-height:22px;} .wrap footer p {font-size:0.750em; line-height:22px; letter-spacing:-0.001em;} /* Contact */ .sectionGroup ul li {font-size:1em;} .sectionGroup ul li h4 {width:28%;} .sectionGroup ul li input.mail, .sectionGroup ul li select.mail {width:44%;} .sectionGroup ul li input.trisect {width:29%;} .boxCheck {padding:30px 20px;} .boxCheck .title h4 {font-size:1.063em;} .boxCheck .title span {font-size:0.875em;} .boxCheck p {margin-top:0; font-size:0.875em;} .boxCheck .agree {font-size:0.875em;} .boxCheck input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(1); /* IE */ -moz-transform: scale(1); /* FF */ -webkit-transform: scale(1); /* Safari and Chrome */ -o-transform: scale(1); /* Opera */ padding: 10px; } } @media screen and (max-width:320px) { .main .visualBox .contentBox {padding-top:56%;} .main .visualBox .contentBox h2 {font-size:9.5vw;} .main .solutionBox .contentBox .desc {font-size:0.938em;} .main .solutionBox .contentBox .txt {font-size:0.688em;} .main .companyBox .uzen p {font-size:1em;} .main .companyBox .uzen ul li {font-size:0.688em;} }