.wrap{min-width:1280px; height:100%; } .contain{width:96%;margin:auto;} .contents {width:90%; margin:auto;}/*width:1400px;*/ .contents .contLeft {width:25%; float:left;}/*width:350px;*/ .contents .contRight {width:74%; float:right;}/*width:1050px;*/ .navTitle {font-size: 50px;font-weight: 900; line-height: 1.2;font-family:'Roboto', sans-serif} .navList {font-size: 16px; margin-top:40px; line-height: 2; color:#3B3B3B} .navList li {padding-left:20px;} .navList a {cursor:pointer;display:inherit} .navList .active a {color:#088DC4;font-weight:bold; font-size: 20px;text-align: right !important;} .navList li.active{background: #c9eefd; padding:10px 20px;} .navList li:not(.active):hover {text-decoration:underline} .textDiv {text-align:center; width:100%;} .textDiv h1 {font-size: 55px;margin-bottom: 20px; text-shadow:1px 1px 3px #707070;font-family:'Roboto', sans-serif;word-break:keep-all} .textDiv p {font-size: 24px; text-shadow:1px 1px 3px #707070; word-break:keep-all} @media ( max-width: 1366px ) { .navTitle {font-size: 40px} .textDiv h1 {font-size: 37px;} .textDiv p {font-size: 20px;} } .no_data {text-align: center; color: #a5a5a5;} /* search*/ .search_control {top: -100px; right: 0px} .search_box {} .search_box input {color:#666666; width:200px; height: 36px; padding-left:7px} .btn_search {display:inline-block; width:40px; height:40px; background: url('/images/icon_search.png') center center #088DC4 no-repeat;margin-left:-4px} .search_control select {width: 170px; height: 40px;} /* #pagenum */ #pagenum {margin:30px 0 20px} #pagenum li {cursor:pointer; padding:0; margin:0;border: 1px solid #d3d3d3; padding: 3px 8px;border-radius:3px} #pagenum li:first-child,#pagenum li:last-child {color:#d3d3d3} #pagenum .active {color:#fff;font-weight:bold; border-color:#088DC4; background:#088DC4} /* nav */ #nav {} #nav_container {position:absolute;overflow:hidden;width:100%;border-top: 3px solid #088DC4; height: 70px;z-index: 999;} .logo {width: 300px; height: 100px;background: url('/images/wisecanCi_300.png') 20px -20px no-repeat; } .btn_menu {margin: 25px 30px; cursor:pointer;} .btn_menu li {width: 23px; height:3px; background: #fff; margin-bottom: 5px;} .menu_container {position: fixed;z-index: 9999;width:100%; height:100%; background: #088DC4;color: #FFFFFF} .close {cursor:pointer; width: 70px; height:70px; position:relative; top:100px; right:100px;} .close span{position: absolute; top:35px; display: inline-block; width:70px;height: 2px;background:#FFFFFF;} .close span:first-child {transform:rotate(-45deg);} .close span:last-child {transform:rotate(45deg);} #menu_box{margin: 400px auto 0;} #menu_box ul{float:left; width: 23%; margin-right: 150px;text-align:left} #menu_box ul li:first-child a{font-size: 50px; color: #FFFFFF } #menu_box ul li:first-child:hover a {border-bottom: 1px solid #FFFFFF} #menu_box ul li a{font-size: 20px; color:#84C6E2; line-height: 2;font-weight:900;} #menu_box ul li:hover a{color: #FFFFFF;} /* footer */ footer {padding: 10px 0; background: #fff;position: relative; z-index: 99; bottom: 0;} footer li {padding-right:20px; color: #888888; font-size:13px} .btn_up {display: inline-block;width:50px; height: 50px; line-height: 50px;margin-left:20px;text-align: center;font-size: 15px; } .btn_up span {display: inline-block;width:35px; height: 35px; line-height: 34px;border: 1px solid #888;transform: rotate(-90deg)} .btn_up:hover {color: #000; border-color: #000} /* main */ #main_div {text-align:center;position:relative; width:100%; min-width:1280px; height:110%; margin: 0 auto; overflow: hidden; background:url('/images/main_BG.jpg') no-repeat;background-attachment:fixed} #main_div .bg_blue{width:50%;height: 110%;position:absolute; right:0; background: rgba(8,141,196,0.46);} #main_div .cont {width:100%;min-width:1280px;height: 110%; position:absolute; left:0;background:url('/images/main_BG_cont.png') -160px 50% no-repeat; z-index:33;background-attachment:fixed} #main_div .title {width:100%;min-width:1280px;height: 50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-10%); z-index:99;text-indent: -35px;} #main_div .title .font30{font-size: 27px;} @media ( max-width: 1366px ) { #main_div .cont {background-size: 160%;} #main_div .title {transform:translate(0,0); margin-left: -50%; margin-top: -100px;} } .diagonal_div {width: 100%; min-width:1280px; position: relative; z-index: 55; padding: 100px 0; overflow: hidden; bottom: 100px;} .bg_diagonal {width: 130%; height: 100px; background: #ffffff; position:absolute;} .bg_diagonal.n1 { transform: rotate(5deg); left:-15%;} .bg_diagonal.n2 { transform: rotate(-5deg); right:-15%;} /* #serviceIntro */ #serviceIntro {padding: 0 20px;} #serviceIntro .title {margin: 100px 0 130px} #serviceIntro .cont {font-size: 22px; margin-left: 90px } #serviceIntro .cont div:before {content:'';width: 35px;height: 5px;background: #d5d5d5;display: inherit;margin-bottom: 5px;} #serviceIntro .cont div { text-align: left; margin-bottom: 70px;line-height:1.6} #serviceIntro .contLeft {width:35%} #serviceIntro .contRight {width:65%} #serviceIntro .contRight li{padding-left:80px;line-height: 1.7} /*서비스 구성도*/ #servicePro {background: #F6F6F6; text-align: center; padding:45px 10px;} #servicePro li {width: 26%; text-align: center} #servicePro li:first-child, #servicePro li:last-child{width: 17%;} #servicePro li:nth-child(2n) {width: 35px; height: 50px; background: url('/images/icon_arrow_gray.png') no-repeat;margin-bottom:40px} #servicePro h1 {font-size: 18px; margin-top:25px;} @media ( max-width: 1366px ) { #serviceIntro .title {margin: 100px 0 70px} #serviceIntro .title .font40 {font-size:35px;} #serviceIntro .title .font30 {font-size:25px;} #serviceIntro .cont {font-size:20px; margin-left: 10px } #serviceIntro .cont div{margin-bottom: 50px;} #serviceIntro .contLeft {width:26%} #serviceIntro .contLeft .font35 {font-size: 27px} #serviceIntro .contRight {font-size: 18px;width:74%} /*서비스 구성도*/ #servicePro {margin:auto;} #servicePro li {width: 22%; text-align: center} #servicePro li:first-child, #servicePro li:last-child{width: 15%;} #servicePro li:nth-child(2n) {width: 35px; height: 50px; background: url('/images/icon_arrow_gray.png') no-repeat;margin-bottom:20px; background-size:60%} #servicePro li:nth-child(5) img:first-child {width: 40px !important;margin-right:10px !important;margin-bottom:9px !important;} #servicePro li:nth-child(5) img:nth-child(2) {width: 25px !important;margin-right:10px !important;} #servicePro li:nth-child(5) img:nth-child(3) {width: 60px !important;} #servicePro h1 {font-size: 16px; margin-top:25px;} } /* #advantages */ #advant_bg.diagonal_div {bottom:0;padding:140px 0 200px;height:220px;} #advant_bg .n2 {background:#F6FCFF; height:560px;transform: rotate(-7deg);} #advant_bg img {position: absolute; left:20px; width: 650px;margin-top: -75px;} #advant_bg .title {left:50%; transform:translate(-50%, 50%)} #advantages {background:#F6FCFF; padding:20px 0; overflow:hidden} #advant_div {padding: 0 50px;} #advant_div li {margin-bottom: 70px;} #advant_div .advant_cont1 .imgbox {width:50%;max-width: 700px; height:350px; background:url('/images/cont_advantage.jpg') no-repeat;} #advant_div li:nth-child(2) .advant_cont1 .imgbox {background-position-x: -745px} #advant_div li:nth-child(3) .advant_cont1 .imgbox {background-position-x: -1490px} #advant_div .advant_cont1 .cont{width:49%; height:350px;padding-top: 30px;} #advant_div .advant_cont1 .cont .title {display: inline-block; font-size: 90px; font-weight: 900;margin-left:43px;} #advant_div .advant_cont1 .cont .disInline { margin:0 0 30px 20px;} #advant_div .advant_cont1 .btn {width: 400px; height:40px;font-size: 15px; line-height: 40px} #advant_div .advant_cont2 {position: relative; height: 800px} #advant_div .advant_cont2 .imgbox {height: 670px;width:100%;position:absolute; overflow:hidden;right:-8%;} #advant_div .advant_cont2 .cont1 {position: absolute; top:200px; left: 70px;color:#fff; } #advant_div li:nth-child(1) .advant_cont2 img {margin-top:-100px;} #advant_div .advant_cont2 .cont2 {width: 100%; height: 300px; background:#088DC4; color: #fff; bottom: 50px; left: -50%} #advant_div .advant_cont2 .title {font-size:90px; display: inline-block; font-weight:bold; vertical-align: top; margin-right:31px;} #advant_div .advant_cont2 .cont2 li:after{content:''; float: none; clear: both} #advant_div .advant_cont2 .cont2 li h1 {float:left; font-size: 21px; vertical-align: top; width: 40%;} #advant_div .advant_cont2 .cont2 li div {float:left; font-size: 15px; width: 60%;padding-bottom: 30px;} #advant_div .close {position:absolute; left:50%; top:200px;opacity:0.6} #advant_div .close:hover{opacity:1} #advant_div .close span {height: 5px} #advant_div li:nth-child(2) .advant_cont2 .imgbox{left:-8%} #advant_div li:nth-child(2) .advant_cont2 .cont1 {right: 150px;text-align: right;left: 0;} #advant_div li:nth-child(2) .advant_cont2 img {position: absolute; top:-150px;} #advant_div li:nth-child(2) .advant_cont2 .cont2 {left: 50%} #advant_div li:nth-child(2) .advant_cont2 .title {margin-left: 30px; } #advant_div li:nth-child(2) .advant_cont2 .close {left:45%;} @media ( max-width: 1366px ) { #advant_bg .title .font60 {font-size: 50px;} #advant_bg p {font-size: 20px;} #advant_div {padding: 0 10px;} #advant_div .advant_cont1 .imgbox {width:49%; height:300px;} #advant_div li:nth-child(1) .advant_cont1 .imgbox {background-position-x: -140px;} #advant_div .advant_cont1 .cont{width:49%; height:300px;} #advant_div .advant_cont1 .cont .title {margin-left:23px;margin-top:-28px;} #advant_div .advant_cont1 .disInline h1 {font-size: 33px !important;} #advant_div .advant_cont1 .disInline p {font-size: 16px !important;} #advant_div .advant_cont2 .imgbox {height: 580px;width:100%;position:absolute; overflow:hidden;right:-10%;} #advant_div .advant_cont2 .imgbox img{width:95%;} #advant_div .advant_cont2 .cont1 {top:160px; left: 50px;font-size:18px} #advant_div li:nth-child(1) .advant_cont2 img {margin-top:-50px} #advant_div .advant_cont2 .cont2 {left: -20%} #advant_div .advant_cont2 .w45per {width: 60% !important;} #advant_div .advant_cont2 .title {font-size:90px; display: inline-block; font-weight:bold; vertical-align: top; margin-right:31px;} #advant_div .advant_cont2 .cont2 li:after{content:''; float: none; clear: both} #advant_div .advant_cont2 .cont2 li h1 {float:left; font-size: 21px; vertical-align: top; width: 40%;} #advant_div .advant_cont2 .cont2 li div {float:left; font-size: 15px; width: 60%;padding-bottom: 30px;} #advant_div li:nth-child(2) .advant_cont2 img {position: absolute; top:-150px;} #advant_div li:nth-child(2) .advant_cont2 .cont2 {left: 20%; bottom: 140px} #advant_div li:nth-child(2) .advant_cont2 .cont2 .w45per {margin-left: 70px;} #advant_div li:nth-child(2) .advant_cont2 .imgbox{left:-10%;} #advant_div .close {left:30%; } #advant_div li:nth-child(2) .advant_cont2 .cont2 .close {left:60%; } } /* #deliveryStat */ #deliveryStat {height: 100%; background:#F6F6F6} #deliveryStat {height: auto; min-height: 100vh; background:#F6F6F6} .videoDiv { height: 50%; overflow:hidden; position:relative;} .videoDiv .bg_white {background: rgba(255,255,255,0.4)} .videoDiv video {position:absolute;width: 100%; top: -170px; filter: blur(3px);-webkit-filter: blur(3px);} .bg_white {position:absolute; width: 100%; height: 100%; z-index:22; background:rgba(255,255,255,0.2); } .videoDiv .textDiv {top:50%;left:50%; transform: translate(-50%,-80%);z-index:33;} #deliveryStat .contents {position:relative; top:-100px; background:#FFF;z-index:44;border:1px solid #b3b3b3;border-radius:30px; min-height:40%; padding:40px; box-shadow: 1px 1px 5px #707070;text-align:center} #deliveryStat tr {border-bottom: 1px dashed #b3b3b3; } #deliveryStat td {padding: 20px 5px;max-height:30px; min-height:30px;} #deliveryStat td img {width: 150px} #deliveryStat td:first-child {font-size: 28px;} #deliveryStat td:nth-child(3) {font-size: 20px !important;font-weight:700;text-align: left; padding-left: 20px;line-height:1.5;word-break:keep-all;} @media ( max-width: 1366px ) { .videoDiv { height: 45%;} .videoDiv video {top: -200px;} #deliveryStat .contents {width: 90% !important; border-radius:15px;} #deliveryStat .contents table {width: 100% !important} #deliveryStat td:first-child {font-size: 22px;} #deliveryStat td.font20 {font-size: 20px;} #deliveryStat td:nth-child(3) {font-size: 20px !important;font-weight:700;text-align: left; padding-left: 20px;} } /* #companyInfo */ #companyInfo {height: 100%;background:#F6F6F6} #companyInfo .contLeft {width: 22%;margin-top: 140px;} #companyInfo .contRight {width: 69%; min-width:720px;max-width:1120px;position:relative; top:250px;float:Left; background:#FFF;z-index:44;padding:50px 50px 20px;height:480px;box-shadow: 1px 1px 5px #707070;overflow:hidden} #companyInfo .contRight h1 {padding:0; margin:0; font-size: 30px;} #companyInfo .contRight table td{padding: 5px 0; font-size: 17px;} .dot span{display: inline-block; width: 10px;height:10px; background: #CECECE; border-radius:5px;} #companyInfo #history {height: 415px;} #companyInfo #history .btn_nav {position: absolute; left: 90%; margin-left:; top:55px} #companyInfo #history #cont_box {position: absolute;width:92%;overflow-x:scroll;overflow-y:hidden} #companyInfo #history .box {width: 275px; padding: 15px 5px; float:left;border-right: 1px dotted #eaeaea} #companyInfo #history .box:hover {background:#F6FCFF } #companyInfo #history .box h1 {margin-bottom: 30px; text-align:center} #companyInfo #history .box ul {overflow-y:auto;text-align: ;word-break:keep-all} #companyInfo #history .box li {font-size: 14px; line-height: 1.5;margin-bottom: 10px;word-break:keep-all} #companyInfo #history .dot span{width: 5px;height:5px;} #companyInfo #history .box:last-child {border-right: 0} @media ( max-width: 1366px ) { #companyInfo {padding-bottom: 80px} #companyInfo .contRight{height: 450px} #companyInfo #history .box h1 {font-size: 25px} #companyInfo img {width: 105%; margin-top: 40px} } /*#slides-container {width: 100%; height: 45%; margin:0 auto;} .slides-container li {width:100%; height: 100%; color:#333} .slides-container li:first-child {background:url('/images/bg_slider00.jpg') no-repeat; background-attachment:fixed;} .slides-container li:nth-child(2) {background:url('/images/bg_slider00.jpg') no-repeat; background-attachment:fixed;} .slides-container li:last-child {background:url('/images/bg_slider00.jpg') no-repeat; background-attachment:fixed;} .slides-container .textDiv {position:absolute; z-index:44; left:50%; top:50%; transform:translate(-50%,-80%);} */ /* #companyInfo3 */ #companyInfo3 {} #companyInfo3 > div {margin: 30px 50px 15px;} #companyInfo3 .txt {width: 58%;font-size: 18px; margin-top: 170px;word-break:keep-all} #companyInfo3 .txt p {font-size: 18px; margin-top: 10px;word-break:keep-all} @media ( max-width: 1366px ) { #companyInfo3 .txt {width: 53% !important;font-size: 15px; margin-top: 100px} #companyInfo3 .txt p {font-size: 16px;} #companyInfo3 .img {width: 44%;} #companyInfo3 img {width:90%; vertical-align: middle} } /* #companyInfo2 */ #companyInfo2 {} #companyInfo2 .absolute {top:14%; left:50%; transform:translate(-50%,0%);} #companyInfo2 .textDiv {} #Partners {position: absolute; bottom: 90px; left:50%; transform:translate(-50%,0%);} #Partners img {width: 150px; margin-right:6%; margin-bottom: 30px;} #Partners img:last-child {} @media ( max-width: 1366px ) { #companyInfo2 .textDiv img {width:95px} #Partners {bottom: 60px;} #Partners .font40 {font-size: 35px; text-align: left !important; text-indent: 60px} #Partners img {width: 120px; margin-right:7%} } /* #careers */ #careers {} #careers .top {width:100%;height: 300px; overflow:hidden; position:relative;background:url('/images/bg_careers.jpg') center no-repeat; background-attachment:fixed } #careers .bg_white {background:rgba(255,255,255,0.4); } .textDiv{left:50%; top:50%; z-index:33; transform:translate(-50%,-50%);color:#1d1818} #contCareers .contents {margin-top:140px} #contCareers .contents .contLeft {width:22%;} #contCareers .contents .contRight {padding: 20px 0 100px} #recruitment {} .cont_recruit {border-bottom: 2px solid #d3d3d3 !important; color:#343434; margin-bottom: 20px} .cont_recruit .contsLeft {color: #a5a5a5;font-size: 24px; padding-left: 20px} .cont_recruit .contsRight {width: 88%} .cont_recruit .box {border-bottom: 1px dashed #d3d3d3; padding: 0 0 20px 10px; margin-bottom: 20px; position:relative} .cont_recruit .box h1 {font-size: 20px; margin-bottom: 5px;} .cont_recruit .box li {font-size: 16px;} .cont_recruit .box li:after {content:'|'; padding: 20px; color: #d3d3d3; font-weight: normal; font-size: 12px} .cont_recruit .box li:last-child:after {content:'';} .cont_recruit .box p {font-size: 14px; margin: 15px 0 10px;} .cont_recruit .box .absolute {right: 10px; bottom: 50px} .cont_recruit .box .btn {border:1px solid #707070;color:#707070; background: #fff; padding: 7px 35px; font-weight: bold} .cont_recruit .box .btn:hover{background: #707070; color: #fff} .cont_recruit .box:last-child {margin-bottom:0; border: none;} .cont_recruit .no_data {height: 400px;line-height: 400px;font-size: 14px} @media ( max-width: 1366px ) { #careers .top {height: 250px} #contCareers .contents .contLeft {width:270px;} #contCareers .contents .contRight {width:1120px;float:left; padding: 20px 0 100px} #contCareers .navList {display: none; } #contCareers .navTitle {margin-top: -105px} } /* #contactUs */ #contactUs {height: 66%;} #contactUs .top {width:100%;height: 100%; overflow:hidden; position:absolute;background:url('/images/bg_contact.jpg')30% center no-repeat; background-attachment:fixed } .bg_black {position:absolute; width: 100%; height: 100%; z-index:22; background:rgba(0,0,0,0.4); } #contactUs .mid {left:50%; top:30%;margin-left:-45%;z-index:55} #contactUs .color_white{font-size: 45px;margin-bottom: 20px; text-shadow:1px 1px 3px #707070} #contactUs .box {background:#fff;width: 100%; padding: 35px 0px;box-shadow: 1px 1px 5px #a0a0a0;} #contactUs .box_cont {text-align:left;height:120px; width:28%} #contactUs .box_cont p {font-size: 19px; height: 60px; margin-top:30px;word-break:keep-all} #contactUs .box_cont .label {width:85%; height: 40px;margin-top: 30px;line-height: 40px;text-align:center;font-size: 17px; color:#fff; background: #2080D0; border-radius:0 20px 0 20px ;} #contactUs .box_cont .btn_BlueL {width:85%; height: 40px;margin-top: 30px;line-height: 40px;text-align:center;font-size: 17px;border-radius:20px ;} #contactUs .box_cont:last-child{width: 31%;} #contactUs .box_cont:last-child p{font-size:17px; line-height: 2} @media ( max-width: 1366px ) { #contactUs .box_cont p {font-size: 16px; margin-top:35px;} } /* modal */ .modal {position: absolute;top:0; left:0;z-index:77; width: 100%; height: 100%;} .modal .conatiner {position: absolute; width: 500px; padding: 40px; height:600px; background: #fff; box-shadow: 1px 1px 3px #484848; z-index: 77; top: 50%; left: 50%; transform:translate(-50%,-35%);} .modal .conatiner .box {padding-top: 15px;} .modal .conatiner .mid {padding: 15px; overflow-y:auto} .modal .conatiner h3 {margin: 20px auto 5px;} .modal .conatiner h3:first-child{margin-top:0} .modal .conatiner .closed{position: absolute; left:50%;transform:translate(-50%,0); bottom: 35px; padding:7px 50px; border:1px solid #484848; font-size: 14px} /*슬라이드*/ .swiper { width: 100%; height: 100%; } } /* 납품 실적의 행 수에 맞춰 영역 높이를 확보 */ #deliveryStat > .videoDiv { height: 50vh; } #deliveryStat > .contents { min-height: 0; } @media (max-width: 1366px) { #deliveryStat > .videoDiv { height: 45vh; } }