@charset "utf-8"; @import url("weight.css"); /* initialize */ body { margin:0; padding:0; background-color:#fff; color:#555; font-size:14px; line-height:1;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;} html, body {/*width:100%; height:100%; *//*min-width:1024px; */} html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, caption, tbody, tfoot, thead, tr, th, article, aside, canvas, footer, header, menu, nav, section, summary, video {z-index: inherit;padding: 0;border: 0;margin: 0;vertical-align: baseline;font: inherit;font-size: 100%; font-family:'NanumSquare',sans-serif; font-weight: 400;} input[type=button], input[type=text], input[type=image], input[type=submit],input[type=password], input[type=tel], input[type=number], textarea { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; outline: 0; vertical-align:middle; font-family:'NanumSquare', sans-serif; } input[type=checkbox] {-webkit-appearance: checkbox;-moz-appearance: checkbox;} input[type=radio] {-webkit-appearance: radio;-moz-appearance: radio;} input::-ms-clear {display: none;width: 0;height: 0;} input::-ms-reveal {display: none;width: 0;height: 0;} select{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none;} li{ list-style:none; } table{ width:100%; border-collapse:collapse; border-spacing:0; } th, td{ border-collapse:collapse; } legend, caption, hr{ display:none; } a { text-decoration:none; color:#838383;} a:hover { color:#838383;} *{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} *:focus { outline: none; } ::placeholder { color:#dbdbdb;} :-ms-input-placeholder { color:#dbdbdb;} ::-ms-input-placeholder { color:#dbdbdb;} .popup-wrap input::placeholder { color: #333;} html,body{height: 100%; } body{overflow-x: auto !important;} .scroll::-webkit-scrollbar {width: 8px; height: 8px; } .scroll::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: #d4d4d4; -webkit-border-radius: 8px; border-radius: 8px; } .scroll{overflow-y: auto; height: 100%;} .wrap .error{display: none;} /*//////////////////////////////*/ /*46 40 26 24 18 16 */ h1{font-size: 46px;line-height: 1.4;} h2{font-size: 26px;} h3{font-size: 24px;} h4{font-size: 20px; line-height: 1.4;} h5{font-size: 18px;} h6{font-size: 16px; line-height: 1.75;} .mt1{transition: 0.2s all; } .mt2{transition: transform 0.5s;} ul{font-size: 0;} button span{font-size: 16px; font-weight: 600;} .w-m{width: 280px !important;} [class *= _img]{background: url(../image/common.png) left top no-repeat; background-size:1100px auto; display: inline-block; } [class *= _partner]{background: url(../image/partner.png) left top no-repeat; background-size:1000px auto; display: inline-block; } [class *= _refer]{background: url(../image/repference.png) left top no-repeat; background-size:800px auto; display: inline-block; } /*txt*/ [class ^="btn-type"] {display: inline-block; color: #fff; background-color:#0eaa4f; ; font-size: 18px; width: auto; height: 60px; border-radius: 30px; border: 1px solid #0eaa4f; transition: all .3s; cursor: pointer;} .btn-type-detail{font-size: 18px; height: 60px; padding: 20px 45px; background: transparent; border: 1px solid #fff; border-radius: 30px; display: inline-block; margin-top: 50px; cursor: pointer;} .btn-type-detail:hover{background: #0eae58; border: 1px solid #0eae58; } .btn-type-detail i{width: 13px; height: 14px; background-position: -350px -100px; margin-left: 13px;vertical-align: middle;} .btn-type-fill{ height: 60px; padding: 20px 63px;} .btn-type-fill:hover{background: #0c9947; border: 1px solid #0c9947; } .btn-type-fill i{width: 13px; height: 14px; background-position: -350px -100px; margin-left: 13px;vertical-align: middle;} .btn-type-fill.download i{width: 20px; height: 20px; background-position: -50px -150px; margin-left: 13px;vertical-align: middle;} .btn-type-line{ height: 60px; padding: 20px 45px; background: #fff; border: 1px solid #0eaa4f; color: #0eaa4f;} .btn-type-line:hover{background: #0eae58; border: 1px solid #0eae58; color: #fff; } .btn-type-line i{width: 13px; height: 14px; background-position: -350px -150px; margin-left: 13px;vertical-align: middle;} .btn-type-line:hover i{background-position-y: -100px;} .btn-type-line.white{background: none; border: 1px solid #fff; color: #fff;} .btn-type-line.white:hover{background: rgba(256, 256, 256, 0.2);} /*input*/ [class ^="txt-type"] {height: 46px; width: 100%; line-height: 46px; background-color: #fff ; font-size: 14px; border: 1px solid #e6e6e6; padding: 15px 20px; border-radius: 0 0 20px 0;} .txt-type-normal {} .txt-type-normal:focus {border: 1px solid #5ba94f; } /*checkbox*/ [class ^="cbox-type"]{display: none;} [class ^="cbox-type"] + label {height: 20px; line-height: 20px; padding: 0 12px 0 30px; color: #000; font-size: 16px; display: inline-block; cursor: pointer; background-position: -1050px -200px ;} input[type=checkbox]:checked + label { background-position-y: -250px ; } /* textarea */ textarea{font-size: 14px; padding: 18px 20px; width: 100%; border: 1px solid #e6e6e6; resize: none; border-radius: 0 0 20px 0; height: 240px; } textarea:focus {border: 1px solid #5ba94f; } /**/ .wrap {min-height: 100%; margin: 0 auto 0px;} .wrap .wrap-holder{ width: 1250px; margin: 0 auto; position: relative;} .wrap .wrap-holder .logo{width:221px; height: 30px; position: absolute; left: 50px; top: 30px; cursor: pointer; } .wrap.fixe .wrap-holder .logo {top: 37px; left: 20px;} .wrap.fixe .wrap-holder .logo i { width: 118px; height: 17px; background-position: 0 -50px;} /*header*/ .header-wrap{ background: rgba(0, 0, 0, 0.15);position: fixed; width: 100%; font-size: 16px;z-index: 9999; border-bottom: 1px solid rgba(230,230,230,0.3);} .header-wrap.on{position: absolute; top: 195px; background: #fff;} .header-wrap .wrap-holder{height: 90px; width: auto; min-width: 1300px;} .header-wrap .wrap-holder::after{content: ''; position: absolute; left: -25%; bottom: -1px; border-top: 1px solid rgba(230,230,230,0.3); width: 150%;} .header-wrap .menu-group {} .header-wrap .menu-group h5{height: 90px;color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer;} .header-wrap .menu-group li{font-weight: 600; text-align: center; flex-basis: 150px; position: relative;} .header-wrap .menu-group ol li{cursor: pointer;} .header-wrap .menu-group ol li h6{font-size: 14px;} .header-wrap .menu-group li:first-child{padding-left: 0;} .header-wrap .menu{overflow: hidden; height: 90px; width: calc(100% - 650px);} .header-wrap .menu-group li > h5.on{color: #05854a;} .header-wrap .menu-group .submenu {position: absolute; padding: 20px 0 30px 0; top: 90px; z-index: 2;margin-top: 1px; background-color: #fff; width: 100%; height: 280px; border-right: solid 1px #e6e6e6; } .header-wrap .menu-group li:first-child .submenu{border-left: solid 1px #e6e6e6;} .header-wrap .menu-group .submenu li{font-weight: 400; padding: 10px; height: 40px; padding: 10px 0px; } .header-wrap .menu-group .submenu li:hover{ color: #0eaa4f;} .header-wrap .menu-bg{width: 100%; height: 0px;background: rgba(255, 255, 255, 1); } .header-wrap .r-group{position: absolute;right: 0;align-items: center;} .header-wrap .r-group .language{font-size: 12px; color: #e6e6e6; width: 75px; border: 1px solid #e6e6e6; height: 26px; border-radius: 13px; margin-right: 34px; padding: 3px 5px;} .header-wrap .r-group .language ul{display: none; border-radius: 10px; overflow: hidden; border: solid 1px #e6e6e6; width: 75px; background: #fff; color: #808080; position: absolute; left: 0; top: 60px; text-align: center; } .header-wrap .r-group .language ul h6{font-size: 12px;line-height: 2.25;} .header-wrap .r-group .language ul li{height: 26px; line-height: 26px; cursor: pointer;} .header-wrap .r-group .language ul li:hover{color:#2c2c2c ;background: #f2f2f2;} .header-wrap .r-group .language p{align-items: center;justify-content: start;} .header-wrap .r-group .language p:hover i:last-child{ transform: rotate(180deg);} .header-wrap .r-group .language span{width: 30px;} .header-wrap .r-group .language i:first-child{width: 18px; height: 18px; background-position: -50px -100px; margin-right: 5px;} .header-wrap .r-group .language i:last-child{width: 9px; height: 9px; background-position: -150px -100px ;} .header-wrap .r-group .product{width: 200px; height: 90px; background: #0eaa4f; color: #fff; font-size: 20px; cursor: pointer; align-items: center;} .header-wrap .r-group .product:hover{background: #0c9947;} .header-wrap .r-group .product i{width: 24px; height: 24px; background-position: 0 -100px; margin-right: 8px;} .header-wrap.over{background: #fff;} .header-wrap.over .menu-group h4{color: #2c2c2c;} .header-wrap.over .r-group .language{color: #2c2c2c; border: 1px solid #d0d0d0;} .header-wrap.over .r-group .language i:last-child{background-position: -150px -125px ;} .header-wrap.over .menu-group h5{color: #2c2c2c; } .header-wrap.over .menu-group h5:hover{color: #0eaa4f;} /* 201226 추가 - 시작 */ .header-wrap .menu {width: calc(100% - 750px); margin-left: -100px;} /* its2020 링크 삭제시 같이 삭제 */ .header-wrap .r-group .language ul {left: inherit; right: 234px;} .header-wrap .link a.link-its {display: inline-block; width: 92px; height: 26px; text-indent: -9999px; font-size: 0; vertical-align: top; margin-right: 15px; background-position: -110px -829px;} .fixe .header-wrap .link a.link-its {background-position: 0px -829px;} .header-wrap.over .link a.link-its {background-position: 0px -829px;} .header-wrap.over .link a.link-its:hover {background-position: -221px -829px;} /* 201226 추가 - 끝 */ .fixe .header-wrap{background: #fff;} .fixe .header-wrap .menu-group h4{color: #2c2c2c;} .fixe .header-wrap .r-group .language{color: #2c2c2c; border: 1px solid #d0d0d0;} .fixe .header-wrap .r-group .language i:last-child{background-position: -150px -125px ;} .fixe .header-wrap .menu-group h5{color: #2c2c2c; } /*screen0*/ .main [class ^= screen] {position: relative; overflow: hidden;} .main .screen0, .main .screen1, .main .screen2, .main .screen3, .main .screen0 .fp-tableCell, .main .screen1 .fp-tableCell, .main .screen2 .fp-tableCell, .main .screen3 .fp-tableCell{ min-height: 650px !important;} .main [class ^=screen].before{transform: translate3d(0, 400px, 0); transition: all 0.7s ease 0s;} .main .screen0{background-color: #333; color: #fff; } .main .screen0 .wrap-holder.full{width: 100%;} .main [class ^=screen] .wrap-holder{ width: 100%; height: 100%; min-width: 1100px;} .main .screen0 .wrap-holder .bg{position: absolute; width: 100%; height:100% ; margin: 0 auto; transform: scale(1); background-size: cover !important;} .main .screen0 .wrap-holder .bg-group{width: 100%; height: 100%; position: absolute; overflow: hidden; display: none; } .main .screen0 .wrap-holder .bg-group:nth-child(1){display: block;} .main .screen0 .wrap-holder .bg-group:nth-child(1) .bg{background: url(../image/main/bg-0.jpg) center no-repeat;} .main .screen0 .wrap-holder .bg-group:nth-child(2) .bg{background: url(../image/main/bg-1.jpg) center no-repeat;} .main .screen0 .wrap-holder .bg-group:nth-child(3) .bg{background: url(../image/main/bg-2.jpg) center no-repeat;} .main .screen0 .wrap-holder .txt{position: relative; width: 1100px; margin: 0 auto; text-align: center; height: 100%; flex-direction: column; align-items: center; } .main .screen0 .wrap-holder .txt i{width: 130px; height: 19px; background-position: -150px -50px; } .main .screen0 .wrap-holder .txt p{font-size: 62px; margin-top: 50px;} .main .screen0 .wrap-holder .txt span{font-size: 70px; margin-top: 8px;} .main .screen0 .wrap-holder .txt h3{margin-top: 36px; color: rgba(255, 255, 255, 0.6);} .main .screen0 .wrap-holder .txt *{opacity: 0;} .main .screen0 .wrap-holder .btn-group{position: relative;z-index: 10; top: calc(50% - 32px); justify-content: space-between; padding: 0 60px;} .main .screen0 .wrap-holder .btn-group i{ width: 64px; height: 64px; background-position: -250px -100px; cursor: pointer;} .main .screen0 .wrap-holder .btn-group i:nth-child(1){transform: rotate(180deg);} .main .screen0 .wrap-holder .btn-group i:nth-child(2){} .dot-group{position: relative; top: calc( 100% - 180px); align-items: center; z-index: 10; } .dot-group h4{font-size: 20px;} .dot-group ul {margin: 0 14px;} .dot-group ul li{width: 100px; height: 4px; background: rgba(255, 255, 255, 0.5); display: inline-block; margin-left: 1px;} .dot-group ul li:first-child{border-radius: 2px 0 0 2px;} .dot-group ul li:last-child{border-radius: 0 2px 2px 0;} .dot-group ul li.on{background: #0eaa4f !important;} .dot-group ._img{width: 20px; height: 20px; margin: 0 14px; cursor: pointer;} .dot-group .prev{background-position: -200px -125px; transform: rotate(180deg);} .dot-group .next{background-position: -200px -125px;} .main .screen1 { color: #fff;} .main .screen1 h1, .main .screen1 h6, .main .screen1 span{ transition: all 0.35s;} .main .screen1 h1{transform: translate3d(0,70px,0);font-size: 46px; } .main .screen1 h6{transform: translate3d(0,70px,0); margin-top: 14px; } .main .screen1 .btn-type-detail{transform: translate3d(0,-30px,0); opacity: 0;} .main .screen1 ul{height: 100%;} .main .screen1 li{width: 100%; flex-direction: column; align-items: center; position: relative; overflow: hidden; } .main .screen1 li .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;transition: transform 0.5s; transform: scale(1.05);background-size: cover !important;} .main .screen1 li .bg.dimmed:before{opacity: 0;} .main .screen1 li .txt{z-index: 1; text-align: center;} .main .screen1 li:nth-child(1) .bg{background: url(../image/main/tab-01.jpg) center center;} .main .screen1 li:nth-child(2) .bg{background: url(../image/main/tab-02.jpg) center center;} .main .screen1 li:nth-child(3) .bg{background: url(../image/main/tab-03.jpg) center center;} .main .screen1 li:hover .bg{transform: scale(1.01);} .main .screen1 li:hover .bg:before{opacity: 0.7;} .main .screen1 li:hover h1{transform: translate3d(0,0,0); color: #17cd69;} .main .screen1 li:hover h6{transform: translate3d(0,0,0); transition-delay: 0.03s;} .main .screen1 li:hover span{transform: translate3d(0,0,0); opacity: 1;} .main .screen2 .wrap-holder{background: #262626;} .main .screen2 .wrap-holder .bg{position: absolute; width: 100%; height: 100%;background-repeat: no-repeat; background-size: cover; opacity: 0; transition: opacity 0.3s ease-in-out} .main .screen2 .wrap-holder .bg.visible{opacity: 1;} .main .screen2 .right{width: 100%; height: 100%; display: inline-flex; align-items: center; min-height: 650px; position: relative; color: #fff;} .main .screen2 .right h3{color: #17cd69;} .main .screen2 .right h1{margin-top: 32px;} .main .screen2 .right h6{margin-top: 21px; } .main .screen2 .right h6:nth-of-type(2){margin-top: 16px;} .main .screen2 .right .txt{position: relative; padding-left: 80px; margin: auto 0 auto 40%; width: 100%; } .main .screen2 .right .txt-in{height: 500px;} .main .screen2 .right .txt-in li{position: absolute;} .main .screen2 .right .txt-in li:not(:first-child){display: none;} .main .screen2 .right .txt-in li h3 i{width: 40px; height: 40px;vertical-align: middle; background-position-y: -250px; margin-right: 8px;} .main .screen2 .right .txt-in li:nth-child(1) h3 i{background-position-x: -250px;} .main .screen2 .right .txt-in li:nth-child(2) h3 i{background-position-x: -300px;} .main .screen2 .right .txt-in li:nth-child(3) h3 i{background-position-x: -350px;} .main .screen2 .right .txt-in li:nth-child(4) h3 i{background-position-x: -400px;} .main .screen2 .right .dot-group h5{margin-top: 4px;} .main .screen2 .right .dot-group h5:nth-of-type(2){color: #d1d1d1;} .main .screen2 .dot-group{margin-top: 50px; justify-content: start;} .main .screen2 .dot-group li{width: 80px;} .main .screen2 .dot-group li.on{background:#17cd69 !important ;} .main .screen2 .dot-group ._img{width: 20px; height: 20px; margin: 0 14px; cursor: pointer;} .main .screen2 .dot-group .prev{background-position: -200px -100px; transform: rotate(180deg);} .main .screen2 .dot-group .next{background-position: -200px -100px;} .main .screen2 .right .dimmed:before{width: 100%; left: -100%;} .main .screen3 .wrap-holder{text-align: center; padding-top: 120px; height: 640px;} .main .screen3 .wrap-holder h1{color: #0f0f0f;} .main .screen3 .wrap-holder .mask{overflow: hidden; width: 1080px; height: 180px; display: inline-block; position: relative;} .main .screen3 .wrap-holder .mask ul{text-align: left; position: absolute; left: 0; top: 0; display: none;} .main .screen3 .wrap-holder .mask ul:first-child{display: block;} .main .screen3 .wrap-holder .mask ul li {display: inline-block; width: 270px; height: 102px; } .main .screen3 .wrap-holder .mask ul li i{width: 200px; height: 79px;} .main .screen3 .wrap-holder .mask ul:nth-child(1) li i{background-position-x: 0;} .main .screen3 .wrap-holder .mask ul:nth-child(2) li i{background-position-x:-250px;} .main .screen3 .wrap-holder .mask ul:nth-child(3) li i{background-position-x:-500px;} .main .screen3 .wrap-holder .mask ul:nth-child(4) li i{background-position-x:-750px;} .main .screen3 .wrap-holder .mask ul li:nth-child(1) i{background-position-y: 0;} .main .screen3 .wrap-holder .mask ul li:nth-child(2) i{background-position-y: -100px;} .main .screen3 .wrap-holder .mask ul li:nth-child(3) i{background-position-y: -200px;} .main .screen3 .wrap-holder .mask ul li:nth-child(4) i{background-position-y: -300px;} .main .screen3 .wrap-holder .mask ul li:nth-child(5) i{background-position-y: -400px;} .main .screen3 .wrap-holder .mask ul li:nth-child(6) i{background-position-y: -500px;} .main .screen3 .wrap-holder .mask ul li:nth-child(7) i{background-position-y: -600px;} .main .screen3 .wrap-holder .mask ul li:nth-child(8) i{background-position-y: -700px;} .main .screen3 .wrap-holder .mask ul li:nth-child(9) i{background-position-y: -800px;} .main .screen3 .wrap-holder .mask ul li:nth-child(10) i{background-position-y: -900px;} .main .screen3 .wrap-holder .partners{position: relative; width: 100%; display: inline-block; margin-top: 60px;} .main .screen3 .wrap-holder .btn-group{ position: absolute; top: calc(50% - 32px); width: 100%; justify-content: space-evenly;} .main .screen3 .wrap-holder .btn-group i{width: 64px; height: 64px; background-position: -250px -100px; cursor: pointer;} .main .screen3 .wrap-holder .btn-group .prev{transform: rotate(180deg);} .main .screen3 .dot-group{top: 84px;} .main .screen3 .dot-group li{background: #e6e6e6;} .main .screen3 .blank{width: 1100px;} .main .screen5 .footer-wrap .logo i { width: 170px; height: 24px; background-position: -300px -50px;} /* subtitle */ .subtitle-wrap{padding: 0px 0 0px; height: 320px; min-width: 1250px; } .subtitle-wrap .visiul{height: 320px; position: relative; color: #fff; text-align: center;background-size: cover !important; } .subtitle-wrap .visiul h1{padding-top: 140px; overflow: hidden;} .subtitle-wrap .visiul h6{margin-top: 4px; color: #bfbfbf;} .subtitle-wrap ul{justify-content: space-around; align-items: center; color: #808080; background: #fff; width: 1000px; height: 70px; border-bottom: 1px solid #f0f0f0;} .subtitle-wrap ul li{position: relative; text-align: center; cursor: pointer; padding: 20px 0;} .subtitle-wrap ul li h4{height: 70px; display: flex; justify-content: center; align-items: center;} .subtitle-wrap ul li:not(:first-child):before{content: ""; position: absolute; left: 0; top: 26px; width: 1px; height: 16px; background: #e6e6e6;} .subtitle-wrap .menu li.on{color: #0eaa4f;} .subtitle-wrap .menu-holder{display: flex; justify-content: center; width: 100%; margin-top: -35px; position: relative; overflow: hidden;} .subtitle-wrap .menu-holder .logo{position: absolute; left: -160px; top: 25px; z-index: 2; cursor: pointer;} .subtitle-wrap .menu-holder .logo i{width: 118px; height: 17px; background-position: 0 -50px;} .subtitle-wrap .menu-holder .more{position: absolute; right: -60px; top: 6px; padding: 20px; cursor: pointer;} .subtitle-wrap .menu-holder .menu{position:relative;z-index: 1; } .subtitle-wrap .menu-holder .more span{width: 17px; height: 2px; background: #919191; display: block;transition: transform 0.5s;} .subtitle-wrap .menu-holder .more span:not(:last-child){margin-bottom: 4px;} .fixe .subtitle-wrap .menu-holder .more span:nth-child(1){transform: translateY(6px) rotate(-45deg);} .fixe .subtitle-wrap .menu-holder .more span:nth-child(2){opacity: 0;} .fixe .subtitle-wrap .menu-holder .more span:nth-child(3){transform: translateY(-6px) rotate(45deg);} .fixe .subtitle-wrap .menu-holder .more span{background:#0eaa4f ;} .fixe .subtitle-wrap.on .menu-holder .logo{transform: translateX(0px)} .subtitle-wrap.on .menu-holder{position: fixed; z-index: 11; top: 35px; background: #fff; min-width: 1250px; } .subtitle-wrap.on .menu-holder:before{content: ""; width: 100%; height: 1px; background: #eaeaea; position: absolute; left: 0; bottom: 0;} .subtitle-wrap.on .menu-holder .logo{transform: translateX(180px);} .subtitle-wrap.on .menu-holder .more{transform: translateX(-60px);} /* 회사소개 */ .company .visiul{position: relative; background: url(../image/overview-title.jpg) center 0px no-repeat ; } .company .screen0 h6{margin-top: 4px; color: rgba(255, 255, 255, 0.7); letter-spacing: 1.28px;} .overview{} .overview [class ^= screen] {padding-top: 120px;} .overview [class ^= screen] .wrap-holder{} .overview [class ^= screen] .wrap-holder .wrap-in{margin: auto;} .overview .screen0 {padding-top: 70px;} .overview .screen0 .wrap-holder .wrap-in{height: 260px; margin-top: 35px; width: 1000px; background: url(../image/overview-01.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .overview .screen0 .flex{align-items: center; flex-direction: column;} .overview .screen1 {padding-top: 100px;} .overview .screen1 .wrap-holder{text-align: center; } .overview .screen1 .wrap-holder:before{content: ""; width: 1px; height: 40px; background: #e2e2e2; position: absolute; left: 50%; top: -64px;} .overview .screen1 .wrap-holder h6{ margin-top: 32px;} .overview .screen1 .wrap-holder h6:nth-of-type(1){margin-top: 80px;} .overview .screen1 .wrap-holder h1{color: #000;} .overview .screen2 .wrap-holder .wrap-in{width: 1000px;} .overview .screen2 .wrap-holder .img{width: 100%; height: 543px; background: url(../image/overview-02.png); color: #fff; background-size: cover;} .overview .screen3 .wrap-holder{min-width: 1250px; text-align: center; height: 340px; background: url(../image/overview-03.jpg); color: #fff; background-size: cover; width: auto;} .overview .screen3 .wrap-holder.flex{align-items: center; flex-direction: column;} .overview .screen3 .wrap-holder .wrap-in{margin: 0;} .overview .screen3 .wrap-holder h1{margin-top: 20px;} .overview .screen3 .wrap-holder h2{font-size: 28px; margin-top: 14px;} .overview .screen4 .wrap-holder{text-align: center; padding: 0 75px; } .overview .screen4 .wrap-holder .img{width: 100%; height: 286px; margin-top: 80px; background: url(../image/overview-04.png); background-size: cover; } .overview .screen4 .wrap-holder h1{color: #000;} .overview .screen4 .wrap-holder h6{margin-top: 14px; color: #b7b7b7;} .overview .screen4 ul{margin-top: 110px; text-align: left;} .overview .screen4 ul li{font-size: 20px; width: 520px; height: 260px; vertical-align: top; position: relative; padding: 56px 0 56px 134px; display: inline-block; border-bottom: 1px solid #e6e6e6;} .overview .screen4 ul li:nth-child(-n+2) { border-top: 1px solid #e6e6e6;} .overview .screen4 ul li:nth-child(odd){margin-right: 60px;} .overview .screen4 ul li i{width: 64px; height: 64px; background-position-y:-300px ; position: absolute; left: 32px; top: 80px; } .overview .screen4 ul li:nth-child(1) i{background-position-x: 0;} .overview .screen4 ul li:nth-child(2) i{background-position-x: -100px;} .overview .screen4 ul li:nth-child(3) i{background-position-x: -300px;} .overview .screen4 ul li:nth-child(4) i{background-position-x: -200px;} .overview .screen4 .wrap-holder ul li h6{margin-top: 0;} .overview .screen4 ul li h4{margin-top: 20px; color: #000;} .overview .screen4 ul li h6:last-child{ color: #555; margin-top: 14px;width: 303px;} .history{} .history [class ^= screen] {padding-top: 60px; position: relative;} .history [class ^= screen] .wrap-holder .wrap-in{margin: auto;} .history .screen0 {padding-top: 70px;} .history .screen0 .wrap-holder .wrap-in{height: 260px; margin-top: 35px; width: 1000px; background: url(../image/history-01.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .history .screen0 .flex{align-items: center; flex-direction: column;} .history .screen1 .wrap-holder{} .history .screen1 .wrap-holder .wrap-in{width: 1100px;} .history .screen1 p{font-size: 90px; line-height: 1.14; color: #dedede; position: absolute; } .history .screen1 ul{padding-top: 80px;} .history .screen1 li:nth-child(1) div{width: 125px; height: 125px; display: inline-block; border-radius: 50%; background: #0eaa4f; box-shadow: 2px 3px 5px 0 rgba(47, 82, 61, 0.4);} .history .screen1 li:nth-child(1) {text-align: center; margin: auto;} .history .screen1 li:nth-child(odd){margin-left: 50%;} .history .screen1 li:nth-child(odd) em{ margin: 0 0px 0 -8px ;} .history .screen1 li:nth-child(odd) h1 i{ margin-right: 14px ;} .history .screen1 li:nth-child(odd) h4{margin-left: 93px;} .history .screen1 li:nth-child(even){margin-right: 50%; } .history .screen1 li:nth-child(even) em{ margin: 0 -8px 0 0px ;} .history .screen1 li:nth-child(even) h1 i{margin-left: 14px;} .history .screen1 li:nth-child(even) h1{justify-content: flex-end;} .history .screen1 li:nth-child(even) h4{} .history .screen1 li em{width: 16px; height: 16px; border-radius: 50%; border:solid 2px #0eae58; display: inline-block; background: #fff;} .history .screen1 li h1{font-size: 70px; display: flex; align-items: center; color: #0eae58;} .history .screen1 li h1 i{width: 80px; height: 2px; background: #0eae58; display: inline-block;} .history .screen1 li h4{border: 1px solid #ebebeb; background: #fafafa; text-align: left; min-height: 100px; line-height: 1.7; padding: 30px 30px 30px 84px; width: 460px; position: relative; margin-top: 15px;} .history .screen1 li h4:nth-of-type(1){margin-top: 24px;} .history .screen1 ul:before{content: ""; width: 0px; height: 100%; background: transparent; border-right: 1px dashed #bababa; position: absolute; left: 50%; top: 0; z-index: -1;} .history .screen1 ul ._img{width: 36px; height: 36px; background-position-y: -200px; position: absolute; left: 32px; top: 31px;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(1) i{background-position-x:-750px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(2) i{background-position-x:-850px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(3) i{background-position-x:-550px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(4) i{background-position-x:-850px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(5) i{background-position-x:-900px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(6) i{background-position-x:-850px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(7) i{background-position-x:-50px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(8) i{background-position-x:-900px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(9) i{background-position-x:-450px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(10) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(1) h4:nth-of-type(11) i{background-position-x:-750px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(1) i{background-position-x:-900px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(2) i{background-position-x:-550px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(3) i{background-position-x:-600px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(4) i{background-position-x:-750px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(5) i{background-position-x:-50px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(6) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(2) h4:nth-of-type(7) i{background-position-x:-750px ;} .history .screen1 ul li:nth-child(3) h4:nth-of-type(1) i{background-position-x:-50px ;} .history .screen1 ul li:nth-child(3) h4:nth-of-type(2) i{background-position-x:-700px ;} .history .screen1 ul li:nth-child(3) h4:nth-of-type(3) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(3) h4:nth-of-type(4) i{background-position-x:-750px ;} .history .screen1 ul li:nth-child(3) h4:nth-of-type(5) i{background-position-x:-450px ;} .history .screen1 ul li:nth-child(4) h4:nth-of-type(1) i{background-position-x:-50px ;} .history .screen1 ul li:nth-child(4) h4:nth-of-type(2) i{background-position-x:-800px ;} .history .screen1 ul li:nth-child(4) h4:nth-of-type(3) i{background-position-x:-550px ;} .history .screen1 ul li:nth-child(5) h4:nth-of-type(1) i{background-position-x:-850px ;} .history .screen1 ul li:nth-child(5) h4:nth-of-type(2) i{background-position-x:-900px ;} .history .screen1 ul li:nth-child(5) h4:nth-of-type(3) i{background-position-x:-550px ;} .history .screen1 ul li:nth-child(5) h4:nth-of-type(4) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(5) h4:nth-of-type(5) i{background-position-x:-50px ;} .history .screen1 ul li:nth-child(6) h4:nth-of-type(1) i{background-position-x:-300px ;} .history .screen1 ul li:nth-child(6) h4:nth-of-type(2) i{background-position-x:-950px ;} .history .screen1 ul li:nth-child(6) h4:nth-of-type(3) i{background-position-x:-200px ;} .history .screen1 ul li:nth-child(7) h4:nth-of-type(1) i{background-position-x:-350px ;} .history .screen1 ul li:nth-child(7) h4:nth-of-type(2) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(7) h4:nth-of-type(3) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(7) h4:nth-of-type(4) i{background-position-x:-200px ;} .history .screen1 ul li:nth-child(8) h4:nth-of-type(1) i{background-position-x:-400px ;} .history .screen1 ul li:nth-child(8) h4:nth-of-type(2) i{background-position-x:-200px ;} .history .screen1 ul li:nth-child(8) h4:nth-of-type(3) i{background-position-x:-150px ;} .history .screen1 ul li:nth-child(9) h4:nth-of-type(1) i{background-position-x:-500px ;} .history .screen1 ul li:nth-child(9) h4:nth-of-type(2) i{background-position-x:-350px ;} .history .screen1 ul li:nth-child(9) h4:nth-of-type(3) i{background-position-x:-650px ;} .history .screen1 ul li:nth-child(10) h4:nth-of-type(1) i{background-position-x:-400px ;} .history .screen1 ul li:nth-child(10) h4:nth-of-type(2) i{background-position-x:-0px ;} .history .screen1 ul li:nth-child(11) h4:nth-of-type(1) i{background-position-x:-450px ;} .history .screen1 .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden; } .history .screen1 .circle{background: #c2f8db; width: 670px; height: 670px; border-radius: 50%; position: absolute;} .history .screen1 .circle.a1{width: 400px; height: 400px; top: 720px; left: calc(50% + 690px); border: 80px solid #fafafa; background: #fff; } .history .screen1 .circle.a2{width: 460px; height: 460px; top: 1600px; left: -300px; background: #e0ffef;} .history .screen1 .circle.a3{bottom: -290px; left: calc(50% + 530px);} .history .screen1 {padding-bottom: 190px; margin-bottom: -120px;} .location{} .root_daum_roughmap {width:100%!important;} .location .subtitle-wrap .bar{left: 800px;} .location [class ^= screen] {padding-top: 120px;} .location [class ^= screen] .wrap-holder .wrap-in{margin: auto;} .location .screen0 {padding-top: 70px;} .location .screen0 .wrap-holder{text-align: center; margin-top: 35px;} .location .screen0 .wrap-holder h1{color: #000;} .location .screen0 .wrap-holder h6{color: #9f9f9f; margin-top: 14px;} .location .screen1 .wrap-holder{width: 100%;margin-top: -50px; min-width: 1250px;} .location .screen2 .wrap-holder{margin-top: -40px;padding: 0 75px;} .location .screen2 .wrap-holder th{height: 84px; padding-left: 80px; vertical-align: middle; text-align: left;} .location .screen2 .wrap-holder td{ vertical-align: middle;} .location .screen2 .wrap-holder tr{border-bottom: solid 1px #e5e5e5;} .location .screen2 .wrap-holder tr:first-child{border-top: solid 2px #a2a2a2;} .location .screen2 .wrap-holder i{width: 36px; height: 36px; margin-right: 40px; vertical-align: middle; background-position-y: -250px ;} .location .screen2 .wrap-holder tr:nth-child(1) i{background-position-x: 0 ;} .location .screen2 .wrap-holder tr:nth-child(2) i{background-position-x: -50px ;} .location .screen2 .wrap-holder tr:nth-child(3) i{background-position-x: -100px ;} .location .screen2 .wrap-holder tr:nth-child(4) i{background-position-x: -150px ;} .location .screen2 .wrap-holder tr:nth-child(5) i{background-position-x: -200px ;} .ceo{} .ceo [class ^= screen]{padding-top: 120px;} .ceo [class ^= screen] .wrap-holder{} .ceo [class ^= screen] .wrap-holder .wrap-in{margin: auto;} .ceo [class ^= screen] h2{font-size: 28px; line-height: 1.43;} .ceo .screen0{padding-top: 70px; } .ceo .screen0 .wrap-holder .wrap-in{height: 260px; margin-top: 35px; width: 1000px; background: url(../image/ceo-01.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .ceo .screen0 .flex{align-items: center; flex-direction: column;} .ceo .screen1{padding-top: 60px; } .ceo .screen1 .wrap-holder{text-align: center;} .ceo .screen1 .wrap-holder h2:nth-of-type(1){color: #000;} .ceo .screen1 .wrap-holder h2:nth-of-type(2){margin-top: 20px;} .ceo .screen1 .wrap-holder:before{content: ""; width: 1px; height: 40px; background: #e2e2e2; position: absolute; left: 50%; bottom: -74px;} .ceo .screen2 .wrap-holder{padding: 120px 0;margin-bottom: -120px; text-align: center; background: #f8f8f8; width: 100%; min-width: 1250px;} .ceo .screen2 .wrap-holder .wrap-in{width: 1175px;} .ceo .screen2 .wrap-holder .txt-box{margin-top: 0px; text-align: left; justify-content: space-between;} .ceo .screen2 .wrap-holder .txt-box h5{width: 534px; color: #555; text-align: left;} .ceo .screen2 .wrap-holder .txt-box h5 i{width: 515px; height: 666px; background: url(../image/ceo-02.png) no-repeat; background-size: cover;} .ceo .screen2 .wrap-holder .txt-box h6{width: 655px; color: #555; letter-spacing: -0.02em;} .ceo .screen2 .wrap-holder .ceo-box {display: table; width: 100%; margin-top: 80px;} .ceo .screen2 .wrap-holder .ceo-box h6{display: table-cell; color: #838383; text-align: right; vertical-align: middle; padding-right: 20px;} .ceo .screen2 .wrap-holder .ceo-box h2{display: table-cell; color: #000; margin-top: 14px; width: 137px; text-align: right;} .ceo .screen2 .wrap-holder .ceo-box h2 i{width: 260px; height: 66px; background-position: -200px -750px;} .ci{} .ci [class ^= screen] {padding-top: 120px;} .ci [class ^= screen] .wrap-holder{} .ci [class ^= screen] .wrap-holder .wrap-in{margin: auto;} .ci .screen0 {padding-top: 70px;} .ci .screen0 .wrap-holder .wrap-in{height: 260px; margin-top: 35px; width: 1000px; background: url(../image/ci-01.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .ci .screen0 .flex{align-items: center; flex-direction: column;} .ci .screen1 {padding-top: 60px;} .ci .screen1 .wrap-holder{text-align: center; } .ci .screen1 .wrap-holder h2{line-height: 1.5;} .ci .screen1 .wrap-holder div:nth-of-type(1) h1{ font-size: 50px; color: #ddd; } .ci .screen1 .wrap-holder div:nth-of-type(1) h2{ font-size: 28px; color: #000; margin: 0 58px;} .ci .screen1 .wrap-holder div:nth-of-type(2) {width: 1100px; height: 395px;align-items: center; background: #fafafa; margin: 80px auto 0;} .ci .screen1 .wrap-holder div:nth-of-type(3){margin-top: 60px;} .ci .screen1 .wrap-holder div:nth-of-type(3) h2{margin-top: 14px;} .ci .screen1 .wrap-holder div:nth-of-type(3) h6:nth-of-type(1){color: #838383;} .ci .screen1 .wrap-holder div:nth-of-type(3) h6:nth-of-type(2){margin-top: 30px;} .ci .screen1 .wrap-holder div img{width:600px ; height:84px ;} .ci .screen1 .wrap-holder .download{display: inline-flex; margin-top: 40px;} .ci .screen2 .wrap-holder{text-align: center;width: 100%; min-width: 1250px; padding: 120px 0; background: #fafafa;} .ci .screen2 .wrap-holder h1{color: #000;} .ci .screen2 .wrap-holder .wrap-in{} .ci .screen2 .wrap-holder .wrap-in > h6:nth-of-type(1){margin-top: 8px; } .ci .screen2 .wrap-holder .wrap-in > h6:nth-of-type(2){margin-top: 40px;} .ci .screen2 .wrap-holder ul{margin-top: 80px; background: url(../image/ci-06.png) top center no-repeat ;background-size: 632px auto ;} .ci .screen2 .wrap-holder ul li{color: #fff; text-align: center; padding:0 70px;} .ci .screen2 .wrap-holder ul li h2{margin-top: 125px;} .ci .screen2 .wrap-holder ul li h6{margin-top: 16px; line-height: 1.4;} .ci .screen2 .wrap-holder ul li h6:last-child{color: #59585a; margin-top: 145px;} .ci .screen3 .wrap-holder{text-align: center;} .ci .screen3 .wrap-holder h1{color: #000;} .ci .screen3 .wrap-holder ul{margin-top: 16px; } .ci .screen3 .wrap-holder li{display: inline-flex; vertical-align: top; background: url(../image/ci-07.png) center center no-repeat; background-size: 540px auto ; align-items: center; position: relative; margin-top:16px ; width: 540px; height: 276px; border: 1px solid #ddd;} .ci .screen3 .wrap-holder li:nth-child(2n-1){margin-right: 20px;} .ci .screen3 .wrap-holder li h6{color: #aaa; position: absolute; left: 24px; top: 24px;} .ci .screen3 .wrap-holder li:nth-child(1) img{width: 332px; height: 48px;} .ci .screen3 .wrap-holder li:nth-child(2) img{width: 98px; height: 98px;} .ci .screen3 .wrap-holder li:nth-child(3) img{width: 288px; height: 53px;} .ci .screen3 .wrap-holder li:nth-child(4) img{width: 372px; height: 53px;} .ci .screen3 .wrap-holder .wrap-in > h6{color: #b7b7b7;} .esg .wrap-holder .wrap-in h1 {display: block; font-size: 40px; color: #000; text-align: center; margin-top: 120px;} .esg .screen0 {padding-top: 70px;} .esg .screen0 .flex {align-items: center; flex-direction: column;} .esg .screen0 .wrap-holder {text-align: center;} .esg .screen0 .wrap-holder .wrap-in{height: 260px; margin: 0 auto; margin-top: 35px; width: 1000px; background: url(../image/esg-01.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .esg .screen0 .wrap-holder h1 {color: #fff; margin-top: 0; margin-bottom: 0px;} .esg .screen1 .wrap-holder {text-align: center;} .esg .screen1 .wrap-holder h3{width: 741px; background: url(../image/esg-08.png) center center no-repeat; font-size: 24px; font-weight: bold; line-height: 40px; color: #000; text-align: center; margin: 0 auto; margin-top: 60px; padding: 0 50px;} .esg .screen2 .wrap-holder {text-align: center;} .esg .screen2 .wrap-holder ul{width: 1000px; margin: 0 auto; margin-top: 80px;} .esg .screen2 .wrap-holder ul li {display: inline-block; margin: 0 20px; vertical-align: top;} .esg .screen2 .wrap-holder ul li:nth-child(1) {margin-left: 0;} .esg .screen2 .wrap-holder ul li:nth-child(4) {margin-right: 0;} .esg .screen2 .wrap-holder ul li h3 {width: 220px; height: 220px; border-radius: 16px; text-align: center; color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 40px; padding-top: 60px;} .esg .screen2 .wrap-holder ul li:nth-child(1) h3 {background: url(../image/esg-02.png);} .esg .screen2 .wrap-holder ul li:nth-child(2) h3 {background: url(../image/esg-03.png);} .esg .screen2 .wrap-holder ul li:nth-child(3) h3 {background: url(../image/esg-04.png);} .esg .screen2 .wrap-holder ul li:nth-child(4) h3 {background: url(../image/esg-05.png);} .esg .screen2 .wrap-holder ul li h3 i{display: block; margin: 0 auto; width: 60px; height: 60px; margin-bottom: 25px;} .esg .screen2 .wrap-holder ul li:nth-child(1) h3 i{background-position: -550px -950px;} .esg .screen2 .wrap-holder ul li:nth-child(2) h3 i{background-position: -650px -950px;} .esg .screen2 .wrap-holder ul li:nth-child(3) h3 i{background-position: -750px -950px;} .esg .screen2 .wrap-holder ul li:nth-child(4) h3 i{background-position: -850px -950px;} .esg .screen2 .wrap-holder ul li h6{width: 220px; font-size: 16px; color: #555; text-align: center;} .esg .screen3 .wrap-holder {text-align: center;} .esg .screen3 .wrap-holder ul{width: 1000px; margin: 0 auto; margin-top: 80px;} .esg .screen3 .wrap-holder ul li{background: #fafafa; padding: 30px 50px; line-height: 1.4em; text-align: center; font-size: 20px; color: #555; margin-bottom: 15px;} .esg .screen4 .wrap-holder {text-align: center;} .esg .screen4 .wrap-holder .img {width: 1000px; height: 260px; background: url(../image/esg-06.png); background-size: contain; margin: 0 auto; margin-top: 80px; margin-bottom: 120px;} .esg .screen5 .wrap-holder {text-align: center;} .esg .screen5 .wrap-holder {min-width: 1250px; text-align: center; height: 470px; background: url(../image/esg-07.png) center center; color: #fff; background-size: cover; width: auto;} .esg .screen5 .wrap-holder.flex {align-items: center; flex-direction: column;} .esg .screen5 .wrap-holder .wrap-in {margin: 0; width: 1000px;} .esg .screen5 .wrap-holder h1 {font-size: 40px; font-weight: bold; color: #fff; margin-top: 0px; } .esg .screen5 .wrap-holder h4 {font-size: 20px; text-align: center; margin-top: 40px; margin-bottom: 35px;} .esg .screen5 .wrap-holder a i {width: 20px; height: 20px; background-position: -50px -150px; margin-left: 13px; vertical-align: middle;} .esg .screen6 .wrap-holder {text-align: center; width: 1000px;} .esg .screen6 .wrap-holder h1 {margin-bottom: 80px;} .esg .screen6 .wrap-holder h3 {font-size: 20px; font-weight: bold; color: #000; margin-bottom: 15px; text-align: left;} .esg .screen6 .wrap-holder ul {border-top: 2px solid #A2A2A2; border-bottom: 1px solid #E5E5E5; padding: 30px 20px; margin-bottom: 60px;} .esg .screen6 .wrap-holder ul li {font-size: 16px; color: #555; background: url(../image/esg-09.png) no-repeat; margin-bottom: 20px; padding-left: 20px; text-align: left;} .esg .screen6 .wrap-holder ul li:last-child {margin-bottom: 0;} .esg .screen6 .wrap-holder .wrap-in > div {border-top: 2px solid #A2A2A2; border-bottom: 1px solid #E5E5E5; padding: 30px 0px;} .esg .screen6 .wrap-holder .wrap-in div div {background: none; padding-bottom: 30px; border-bottom: 1px solid #E5E5E5;text-align: left; padding-left: 70px;} .esg .screen6 .wrap-holder .wrap-in div div:last-child {border-bottom:none; padding-bottom: 0; padding-top: 30px;} .esg .screen6 .wrap-holder .wrap-in div div span:nth-child(1) {display: inline-block; width: 294px; font-size: 20px; font-weight: bold;} .esg .screen6 .wrap-holder .wrap-in div div span:nth-child(2) {display: inline-block; font-size: 18px; color:#454545;} /* 솔루션 */ .solution .visiul{position: relative; background: url(../image/solution-title.jpg) center 0px no-repeat ; } .solution [class ^= screen] {padding-top: 120px; } .solution [class ^= screen] h1{font-size: 40px;} .solution .screen0 {padding-top: 70px;} .solution .screen0 .wrap-holder{min-width: 1250px;} .solution .screen0 .wrap-holder .wrap-in{text-align: center; margin-top: 35px;} .solution .screen0 .wrap-holder h1{color: #000; margin-top: 18px;} .solution .screen0 .wrap-holder i{width: 235px; height: 31px; background-position: 0px -650px;} .solution .screen1 {padding-top:50px ;} .view-type-2 .wrap-holder {padding: 0 0 0px 0 !important;} .view-type-2 .wrap-holder .wrap-in{padding:0 30px 0 600px; min-height: 500px;flex-direction: column;} .view-type-2 .wrap-holder .wrap-in > i{width: 498px; height: 498px; overflow: hidden; padding: 19px 20px 20px 19px; position: absolute; left: 25px; top: 0; display: inline-block; border: 2px dashed #e6e6e6; border-radius: 50%;} .view-type-2 .wrap-holder h1{line-height: 1.4; color: #000; } .view-type-2 .wrap-holder h5{line-height: 1.67; margin-top: 30px;} .view-type-2 .wrap-holder ul{margin-top: 50px;justify-content: normal;} .view-type-2 .wrap-holder ul li{height: 90px; display: flex; justify-content: center; align-items: center; text-align: center;} .view-type-2 .wrap-holder ul li:nth-child(odd) {width: 162px; background: #f8f8f8; border-radius: 20px; border: 1px solid #f4f4f4;} .view-type-2 .wrap-holder ul li:nth-child(even){width: 40px;} .view-type-2 .wrap-holder ul li:nth-child(even) i{width: 16px; height: 17px; background-position: -350px -125px;} .product .view-type-2 .wrap-holder h5{padding-left: 66px; position: relative;} .product .view-type-2 .wrap-holder h5 i{width: 46px; height: 46px; background-position: -800px -450px; position: absolute; left: 0; top: 4px;} .product .view-type-2 .wrap-holder h5:nth-of-type(2) i{background-position: -850px -450px;} .facevue .view-type-2 .wrap-holder h5 i{ background-position: -900px -450px; } .facevue .view-type-2 .wrap-holder h5:nth-of-type(2) i{background-position: -950px -450px;margin-top: -14px;} .solution .screen2 .wrap-holder{height: 578px; width: 100%; min-width: 1250px; padding-top: 120px; background: url(../image/s-solution-bg.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .solution .screen2 .wrap-holder h2{margin-top: 120px;} .solution .screen2 .wrap-holder ul{margin: 40px auto 0; width: 1200px;} .solution .screen2 .wrap-holder ul li{width: 33.3%; position: relative;} .solution .screen2 .wrap-holder ul li i{width: 60px; height: 60px; background-position: -400px -300px;} .solution .screen2 .wrap-holder ul li:nth-child(2) i{background-position: -475px -300px;} .solution .screen2 .wrap-holder ul li:nth-child(3) i{background-position: -550px -300px;} .solution .screen2 .wrap-holder ul li:not(:first-child)::before{content: ""; width: 1px; height: 250px; background: rgba(230,230,230,0.37); position: absolute; top: 30px; left: 0;} .solution .screen2 .wrap-holder ul li h4{margin-top: 40px; height: 50px;} .solution .screen2 .wrap-holder ul li h6{margin-top: 20px; line-height: 1.75; padding: 0 20px;} .solution .screen3 .wrap-holder{width: 100%; background: #fafafa; min-width: 1250px; text-align: center; padding: 120px 0;} .solution .screen3 .wrap-holder h1{color: #000;} .solution .screen3 .wrap-holder img{width: 926px; height: 187px; margin-top: 80px;} .solution .screen3 .wrap-holder table{width: 1100px; margin: 0 auto; margin-top: 40px;} .solution .screen3 .wrap-holder tr{border-bottom: 1px solid #d3d3d3; text-align: left; } .solution .screen3 .wrap-holder tr th{vertical-align: middle; color: #000;} .solution .screen3 .wrap-holder tr td{height: 148px; vertical-align: middle;} .solution .screen3 .wrap-holder tr i{width: 42px; height: 42px; background-position: -600px -450px; margin-left: 50px; vertical-align: middle;} .solution .screen3 .wrap-holder tr:nth-child(1) i{background-position-x: -600px;} .solution .screen3 .wrap-holder tr:nth-child(2) i{background-position-x: -650px;} .solution .screen3 .wrap-holder tr:nth-child(3) i{background-position-x: -700px;} .solution .screen3 .wrap-holder tr:nth-child(4) i{background-position-x: -750px;} .solution .screen3 .wrap-holder tr th h4{text-align: left;} .solution .screen3 a{position: relative; display: block; width: 200px; height: 60px; border-radius: 30px; background-color: #fff; cursor: pointer; overflow: hidden; margin: 0 auto;} .solution .screen3 a::after{content: ""; position: absolute; top: 0; left: -200px; background-color: #0EAA4F; border-radius: 30px; width: 100%; height: 100%; z-index: 1; transform: scale(1, 1); transform-origin: 0% 0%; /* transform: translateX(100%); */ transition: transform 0.35s;} .solution .screen3 a span{position: relative; display: block; width: 100%; height: 100%; z-index: 2; border: 1px solid #0EAA4F; border-radius: 30px; color: #0EAA4F; font-size: 18px; font-weight: bold; text-align: center; line-height: 60px; transition: color 0.35s;} .solution .screen3 a span i{width: 10px; height: 14px; background-position: -400px -950px; vertical-align: middle; margin-top: -2px; margin-left: 8px;} .solution .screen3 a:hover::after{animation: 0.5s btn forwards;} .solution .screen3 a:hover span{color: #fff;} .solution .screen3 a:hover span i{background-position: -500px -950px;} .solution .screen4 .wrap-holder{text-align: center; width: 1100px;} .solution .screen4 .wrap-holder .wrap-in{width: 1100px; margin: auto;} .solution .screen4 .wrap-holder h1{color: #000;} .solution .screen4 .wrap-holder img{margin-top: 80px; width: 798px;} .solution .screen4 .wrap-holder h6{margin-top: 40px; color: #797979;} .solution .screen4 .wrap-holder .box{background: #fff; border-radius: 20px; border: solid 1px #f4f4f4;} .solution .screen4 .wrap-holder .a1{margin-top: 20px; padding: 60px 50px;} .solution .screen4 .wrap-holder .a2{margin-top: 100px; padding: 60px 0; position: relative;} .solution .screen4 .wrap-holder .a1 img{width: 1001px; height: 398px; margin-top: 0;} .solution .screen4 .wrap-holder .a2 img{width: 787px; height: 244px; margin-top: 0;} .solution .screen4 .wrap-holder .a2 i{width: 200px; height: 128px; display: inline-block; position: absolute; top: -144px; left: calc(50% - 100px);} .solution .screen4 .wrap-holder .a2 i img{width: 100%; height: 100%; margin: 0;} .solution .screen5 .wrap-holder{width: 100%; background: #fafafa; min-width: 1250px; text-align: center; padding: 120px 0;} .solution .screen6 .wrap-holder{text-align: center; width: 1100px;} .solution .screen6 .wrap-holder ul{display: table; width: 100%; margin-top: 80px;} .solution .screen6 .wrap-holder ul li{display: table-cell; text-align: left; vertical-align: top;} .solution .screen6 .wrap-holder ul li:nth-child(1){width: 600px; padding-right: 50px;} .solution .screen6 .wrap-holder ul li:nth-child(1) img {width: 550px;} .solution .screen6 .wrap-holder ul li h3{font-size: 22px; text-align: left; color: #000; font-weight: bold; margin-top: 10px;} .solution .screen6 .wrap-holder ul li h3 i{width: 162px; height: 18px; background-position: 0px -950px; margin-top: 10px;} .solution .screen6 .wrap-holder ul li h6{margin-top: 20px; color: #797979; text-align: left; margin-bottom: 30px;} .solution .screen6 .wrap-holder ul li a{position: relative; display: block; width: 200px; height: 60px; border-radius: 30px; background-color: #fff; cursor: pointer; overflow: hidden;} .solution .screen6 .wrap-holder ul li a::after{content: ""; position: absolute; top: 0; left: -200px; background-color: #0EAA4F; border-radius: 30px; width: 100%; height: 100%; z-index: 1; transform: scale(1, 1); transform-origin: 0% 0%; /* transform: translateX(100%); */ transition: transform 0.35s;} .solution .screen6 .wrap-holder ul li a span{position: relative; display: block; width: 100%; height: 100%; z-index: 2; border: 1px solid #0EAA4F; border-radius: 30px; color: #0EAA4F; font-size: 18px; font-weight: bold; text-align: center; line-height: 60px; transition: color 0.35s;} .solution .screen6 .wrap-holder ul li a span i{width: 29px; height: 29px; background-position: -200px -950px; vertical-align: middle; margin-top: -3px; margin-left: 8px;} .solution .screen6 .wrap-holder ul li a:hover::after{animation: 0.5s btn forwards;} .solution .screen6 .wrap-holder ul li a:hover span{color: #fff;} .solution .screen6 .wrap-holder ul li a:hover span i{background-position: -300px -950px;} @keyframes btn { 0% {left: -200px; top: 0px;} 100% {left: 0px; top: 0px;} } .vision .screen3 .wrap-holder ul{margin-top: 120px;} .vision .screen3 .wrap-holder li{width:467px; text-align: center; display: inline-block;} .vision .screen3 .wrap-holder li:nth-child(2){width: 618px; margin-left: 10px;} .vision .screen3 .wrap-holder li img{width: 100%; height: 350px; margin-top: 0;} .vision .screen3 .wrap-holder li h6{margin-top: 20px;} .vision .screen5 .wrap-holder{padding: 120px 0 !important; height: inherit; margin-bottom: -120px;} .vision #vision-pop01, .vision #vision-pop02 {display: none; position: fixed; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 100;} .vision #vision-pop01 > div, .vision #vision-pop02 > div {width: 1200px; height: 675px; position: absolute; left: 50%; top: 50%; margin-top: -337px; margin-left: -600px;} .vision #vision-pop01 > div > span, .vision #vision-pop02 > div > span {position: absolute; top: -40px; right: 0px; display: block; width: 40px; height: 40px; background: #000; border: none; padding: 0; cursor: pointer;} .vision #vision-pop01 > div > span i, .vision #vision-pop02 > div > span i {background-position: -945px -948px; width: 40px; height: 40px;} .vichk .screen0{} .vichk .screen0 .wrap-holder i{width: 220px; height: 31px; background-position: -450px -650px; } .vichk .screen2 .wrap-holder{background: #fafafa; color: #555; padding-bottom: 120px; height: auto;} .vichk .screen2 .wrap-holder .wrap-in{width: 1250px; margin: auto; position: relative;} .vichk .screen2 .wrap-holder .wrap-in h1{color: #000; text-align: left; position: absolute; left: 75px;} .vichk .screen2 .wrap-holder .wrap-in > h6{color: #454545; padding-left: 333px; text-align: left;} .vichk .screen2 .wrap-holder .wrap-in .title{height: 80px; margin-top: 80px; padding: 13px 68px; background: #0dad73; border-radius: 40px; color: #fff; display: inline-block; } .vichk .screen2 .wrap-holder .wrap-in .title h2{margin: auto; font-size: 24px;} .vichk .screen2 .wrap-holder .wrap-in > div i{width:184px; height: 110px; position: absolute; margin-left: -92px; margin-top: 20px; background-position: -625px 0;} .vichk .screen2 .wrap-holder .task{margin-top: 110px; justify-content: space-between; width: 1100px;} .vichk .screen2 .wrap-holder .task li{ width: 245px; text-align: left;} .vichk .screen2 .wrap-holder .task li::before{content: none !important ;} .vichk .screen2 .wrap-holder .task li h4{margin-top: 10px;line-height: 30px;} .vichk .screen2 .wrap-holder .task li h6{padding-left: 14px; text-indent: -10px;} .vichk .screen2 .wrap-holder .task div{width: 240px; height: 240px; margin-bottom: 40px;border-radius: 50%; overflow: hidden; color: #fff; flex-direction: column; align-items: center; } .vichk .screen2 .wrap-holder .task li:nth-child(1) div{background: url(../image/solution-06-1.jpg); } .vichk .screen2 .wrap-holder .task li:nth-child(2) div{background: url(../image/solution-06-2.jpg); } .vichk .screen2 .wrap-holder .task li:nth-child(3) div{background: url(../image/solution-06-3.jpg); } .vichk .screen2 .wrap-holder .task li:nth-child(4) div{background: url(../image/solution-06-4.jpg); } .vichk .screen2 .wrap-holder ul.task li i{background-position-y: -500px ;} .vichk .screen2 .wrap-holder .task li:nth-child(1) i{background-position-x: -775px ;} .vichk .screen2 .wrap-holder .task li:nth-child(2) i{background-position-x: -1000px ;} .vichk .screen2 .wrap-holder .task li:nth-child(3) i{background-position-x: -925px ;} .vichk .screen2 .wrap-holder .task li:nth-child(4) i{background-position-x: -850px ;} .vichk .screen2 .wrap-holder .task2{ height: 150px; margin-top: 60px; border: 1px solid #707070; border-radius: 20px;} .vichk .screen2 .wrap-holder .task2 li {align-items: center;} .vichk .screen2 .wrap-holder ul.task2 li::before{height: 30px; top: 60px; background: #ccc;} .vichk .screen2 .wrap-holder .task2 i{width: 42px; height: 42px; margin-right: 8px; background-position-y: -500px !important ;} .vichk .screen2 .wrap-holder .task2 li:nth-child(1) i{background-position-x: -600px;} .vichk .screen2 .wrap-holder .task2 li:nth-child(2) i{background-position-x: -650px;} .vichk .screen2 .wrap-holder .task2 li:nth-child(3) i{background-position-x: -700px;} .vichk .screen2 .wrap-holder .task2 h4{text-align: left; margin: 0;} .vichk .screen3 .wrap-holder{width: 1250px; color: #fff; background: #fff; padding: 0;} .vichk .screen3 .wrap-holder .box{width: 1250px; height:878px ; background: url(../image/solution-07.jpg);} .vichk .screen3 .wrap-holder table td{text-align: center;} .vichk .screen3 .wrap-holder table td i{margin: auto;} .vichk .screen3 .wrap-holder table td h4{margin-top: 12px;} .vichk .screen3 .wrap-holder table td ul{margin-top: 20px;justify-content: normal;} .vichk .screen3 .wrap-holder table td {border-right: 1px solid rgba(255, 255, 255, 0.36) ; padding: 0 0 0 82px;} .vichk .screen3 .wrap-holder table tr {border-bottom: 1px solid rgba(255, 255, 255, 0.36) ; height: 440px;} .vichk .screen3 .wrap-holder table tr:nth-child(1) td{padding: 0 82px;} .vichk .screen3 .wrap-holder table tr:nth-child(2) td{text-align: left; vertical-align: top; padding-top: 30px ;} .vichk .screen3 .wrap-holder table tr i{width: 60px; height: 60px; background-position-y: -375px ;} .vichk .screen3 .wrap-holder table tr td:nth-child(1) i{background-position-x: -700px ;} .vichk .screen3 .wrap-holder table tr td:nth-child(2) i{background-position-x: -775px ;} .vichk .screen3 .wrap-holder table tr td:nth-child(3) i{background-position-x: -850px ;} .vichk .screen3 .wrap-holder table tr:nth-child(2) td:nth-child(1) i{background-position-x: -625px ;} .vichk .screen3 .wrap-holder table li{width: 50%; padding: 0 24px 0 14px;} .vichk .screen3 .wrap-holder table li:first-child{width: 45%;} .vichk .screen3 .wrap-holder table li:last-child{padding-right: 0;} .vichk .screen3 .wrap-holder table li p{font-size: 14px; color: #ccc; margin-top: 10px; line-height: 1.86;} .vichk .screen3 .wrap-holder table li h6{text-indent: -10px;line-height: 1.5;} .vichk .screen3 .wrap-holder table li h6:not(:first-child){margin-top: 10px;} .vichk .screen4 .wrap-holder{background: #fafafa; color: #555; padding: 120px 0; height: auto; width: 100%;} .vichk .screen5 .wrap-holder{background: #fff; padding: 0; height: 540px; margin-bottom: -80px;} .frs .screen0 .wrap-holder i{width: 170px; height: 31px; background-position: -250px -650px; } .frs .screen2 .wrap-holder{background: url(../image/solution-11.jpg);} .solution.frs .screen2 .wrap-holder ul li i{background-position-y: -375px;} .frs .screen2 .wrap-holder ul li:nth-child(1) i{background-position-x: -400px;} .frs .screen2 .wrap-holder ul li:nth-child(2) i{background-position-x: -475px;} .frs .screen2 .wrap-holder ul li:nth-child(3) i{background-position-x: -550px;} .frs .screen3 .wrap-holder img {width: 804px; height: 208px;} .frs .screen3 .wrap-holder tr i{background-position: -200px -500px;} .frs .screen3 .wrap-holder tr:nth-child(1) i{background-position-x: -200px;} .frs .screen3 .wrap-holder tr:nth-child(2) i{background-position-x: -250px;} .frs .screen3 .wrap-holder tr:nth-child(3) i{background-position-x: -300px;} .frs .screen3 .wrap-holder tr p{font-size: 14px; color: #555; margin-top: 8px; text-align: left;} .frs .screen4 .wrap-holder h2{color: #000; margin-top: 80px;} .frs .screen4 .wrap-holder .view1{margin-top: 40px;} .frs .screen4 .wrap-holder .view1 li i{background-position: -350px -500px; width: 60px; height: 60px; margin-right: 16px;} .frs .screen4 .wrap-holder .view1 li:nth-child(1) i{background-position-x: -350px;} .frs .screen4 .wrap-holder .view1 li:nth-child(2) i{background-position-x: -425px;} .frs .screen4 .wrap-holder .view1 li:nth-child(3) i{background-position-x: -500px;} .frs .screen4 .wrap-holder .view1 li:not(:last-child){margin-right: 60px;} .frs .screen4 .wrap-holder .view1 h6{margin: 0; color: #555; text-align: left; } .frs .screen4 .wrap-holder .view2{text-align: left; margin-top: 60px;} .frs .screen4 .wrap-holder .view2 li{width: 350px; height: 128px; vertical-align: top; position: relative; padding: 26px 0 0 60px; margin-right: 25px; border-bottom: 1px solid #d3d3d3; display: inline-block;} .frs .screen4 .wrap-holder .view2 li:nth-child(3n) {margin-right: 0;} .frs .screen4 .wrap-holder .view2 li i{width: 40px; height: 40px; background-position-y: -550px ; position: absolute; left: 0; top: 26px;; } .frs .screen4 .wrap-holder .view2 li:nth-child(1) i{ background-position-x: 0 ; } .frs .screen4 .wrap-holder .view2 li:nth-child(2) i{ background-position-x: -50px ; } .frs .screen4 .wrap-holder .view2 li:nth-child(3) i{ background-position-x: -100px ; } .frs .screen4 .wrap-holder .view2 li:nth-child(4) i{ background-position-x: -150px ; } .frs .screen4 .wrap-holder .view2 li:nth-child(5) i{ background-position-x: -200px ; } .frs .screen4 .wrap-holder .view2 li h6{margin-top: 0px; color: #555;} .frs .screen3 .wrap-holder{width: 1250px; color: #fff; background: #fff; padding: 0;} .frs .screen4 .wrap-holder{background: #fafafa; color: #555; padding: 120px 0; height: auto; width: 100%;} .frs .screen5 .wrap-holder{background: #fff; padding: 0; height: 540px;} .anonymizer .screen0 .wrap-holder i{width: 237px; background-position: -322px -900px;} .anonymizer .screen2 .wrap-holder{background: url(../image/solution-19.jpg);} .anonymizer .screen2 .wrap-holder ul li:nth-child(1) i{background-position: -475px -300px;} .anonymizer .screen2 .wrap-holder ul li:nth-child(2) i{background-position: -400px -375px;} .anonymizer .screen2 .wrap-holder ul li:nth-child(3) i{background-position: -400px -300px;} .anonymizer .screen3 .wrap-holder table{width: 741px;} .anonymizer .screen3 .wrap-holder table tr{border-bottom: none;} .anonymizer .screen3 .wrap-holder table tr th, .anonymizer .screen3 .wrap-holder table tr td{vertical-align: top;} .anonymizer .screen3 .wrap-holder table tr td{padding-bottom: 118px;} .anonymizer .screen3 .wrap-holder table tr th img, .anonymizer .screen3 .wrap-holder table tr td img{width: inherit; height: inherit; margin: 0;} .anonymizer .screen3 .wrap-holder table tr th img {width: 80px;} .anonymizer .screen3 .wrap-holder table tr td img{margin-top: 10px;} .anonymizer .screen3 .wrap-holder table tr th h4{font-size: 20px; font-weight: bold; color: #000; margin-top: 30px; margin-left: 40px; margin-bottom: 20px; padding-right: 20px;} .anonymizer .screen3 .wrap-holder table tr th h4 span{font-weight: bold;} .anonymizer .screen3 .wrap-holder table tr:nth-child(1) th h4 span{color: #0EAA4F;} .anonymizer .screen3 .wrap-holder table tr:nth-child(2) th h4 span{color: #0CAC97;} .anonymizer .screen3 .wrap-holder table tr:nth-child(3) th h4 span{color: #0DA1AA;} .anonymizer .screen3 .wrap-holder table tr:nth-child(4) th h4 span{color: #1E8F97;} .anonymizer .screen3 .wrap-holder table tr th h6{color: #454545; margin-left: 40px; padding-right: 40px;} .anonymizer .screen4 .wrap-holder ul{width: 1100px; margin: 80px auto 0;} .anonymizer .screen4 .wrap-holder ul li{align-items: center; flex-direction: column; position: relative; border-right: 1px solid #fff; vertical-align: top; height: 470px; color: #fff; transition: all 0.5s ease 0s; width: 27%;} .anonymizer .screen4 .wrap-holder ul li *{transition: all 0.5s ease 0s;} .anonymizer .screen4 .wrap-holder ul li::before{content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0; } .anonymizer .screen4 .wrap-holder ul li.on::before{opacity: 0.5; } .anonymizer .screen4 .wrap-holder ul li:nth-child(1){background: url(../image/solution-20-1.jpg) center center;} .anonymizer .screen4 .wrap-holder ul li:nth-child(2){background: url(../image/solution-20-2.jpg) center center;} .anonymizer .screen4 .wrap-holder ul li:nth-child(3){background: url(../image/solution-20-3.jpg) center center;} .anonymizer .screen4 .wrap-holder ul li h4{transform: translateY(50px); font-weight: bold;} .anonymizer .screen4 .wrap-holder ul li h6{margin-top: 20px; opacity: 0; z-index: 0; color: #fff; padding: 0 20px;} .anonymizer .screen4 .wrap-holder ul li.on{width: 46%;} .anonymizer .screen4 .wrap-holder ul li.on h4{transform: translateY(0px);} .anonymizer .screen4 .wrap-holder ul li.on h6{opacity: 1;} .retail .screen0 .wrap-holder i{width: 230px; background-position: 0px -1022px;} .retail .view-type-2 .wrap-holder h5 {letter-spacing: -0.03em;} .retail .screen2 .wrap-holder {background: url(../image/solution-27.png);} .retail .screen2 .wrap-holder ul li i {background-position: -550px -1022px;} .retail .screen2 .wrap-holder ul li:nth-child(2) i {background-position: -651px -1022px;} .retail .screen2 .wrap-holder ul li:nth-child(3) i {background-position: -746px -1022px;} .retail .screen6 .wrap-holder ul li h3 {margin-top: 100px;} .retail .screen6 .wrap-holder ul li h3 i {background-position: -265px -1022px; width: 215px; height: 30px;} .retail .screen6 .wrap-holder ul li h6 {color: #555;} .retail .screen3 ul {width: 1100px; margin: 0 auto; margin-top: 50px;} .retail .screen3 ul li {display: inline-block; width: 50%; height: 460px;} .retail .screen3 ul li h4 {font-size: 29px; color: #000; margin-bottom: 30px;} .retail .screen3 ul li h6 {font-size: 20px; color: #7F7F7F;} .retail .screen3 ul li i {display: block; margin: 40px auto; width: 110px; height: 110px;} .retail .screen3 ul li:nth-child(1) i {background-position: 12px -1081px;} .retail .screen3 ul li:nth-child(2) i {background-position: -102px -1079px;} .retail .screen3 ul li:nth-child(3) i {background-position: -217px -1080px;} .retail .screen3 ul li:nth-child(4) i {background-position: -334px -1079px;} .retail .screen7 {padding-top: 0;} .retail .screen7 .wrap-holder {width: 100%; background: #fafafa; min-width: 1250px; text-align: center;} .retail .screen7 .wrap-holder h1 {color: #000; margin-bottom: 100px;} .retail .screen7 .wrap-holder ul {width: 1250px; margin: 0 auto;} .retail .screen7 .wrap-holder ul li {padding-bottom: 70px; text-align: left;} .retail .screen7 .wrap-holder ul li h4 {font-size: 21px; color: #000; text-align: left; font-weight: bold;} .retail .screen7 .wrap-holder ul li:nth-child(2) {padding-left: 420px;} .retail .screen7 .wrap-holder ul li:nth-child(3) {padding-top: 140px; padding-bottom: 180px; text-align: center;} .retail .screen4 .wrap-holder {width: 100%; background: #fff; min-width: 1250px; text-align: center;} .retail .screen6 .wrap-holder ul {margin-top: 0;} .retail .screen5 .wrap-holder {width: 100%; background: #fafafa; min-width: 1250px; text-align: center; padding: 120px 0 !important; height: inherit; margin-bottom: -120px;} /* ////////////////////////////////// */ .reference {padding-top: 120px;} .reference .wrap-holder {height: 414px; min-width: 1250px; width: 100%; text-align: center; overflow: hidden; padding: 0 !important;} .reference .wrap-holder .wrap-in{position: relative; width: 1250px; margin: auto; text-align: left; padding-left: 75px;} .reference .wrap-holder h1{color: #000;line-height: normal;} .reference .wrap-holder .mask {margin-top: 68px; width: 790px; overflow: hidden; } .reference .wrap-holder .mask ul{ white-space: nowrap;} .reference .wrap-holder .mask ul li{display: inline-block; width: 230px; height: 278px; position: relative; vertical-align: top; margin-right: 45px;} .reference .wrap-holder .mask ul li:before{content: ""; width: 100%; height: 1px; background: #e6e6e6 ; position: absolute; left: 0; top:78px} .reference .wrap-holder .mask ul li h4{margin-top: 47px; line-height: 28px; white-space: initial;} .reference .wrap-holder .mask ul li h6{margin-top: 12px;line-height: 1.4; white-space: initial;} .reference .wrap-holder img{position: absolute; left: 914px; top: 0px;} .reference .dot-group{justify-content: normal; -ms-flex-pack: start; color: #aaa; top: 0px;} .reference .dot-grou .mask{overflow: hidden;} .reference .dot-group ul li{background: #e6e6e6; display: inline-flex; width: 50px;} .reference .dot-group .index{color: #555;} .reference .wrap-holder .mask ul li i {width: 200px; height: 60px;} .vision .reference .wrap-holder .mask ul li{height: 320px;} .vision .reference .wrap-holder .mask ul li:nth-child(1) i{background-position-y: 0px;} .vision .reference .wrap-holder .mask ul li:nth-child(2) i{background-position-y: -750px;} .vision .reference .wrap-holder .mask ul li:nth-child(3) i{background-position-y: -150px;} .vision .reference .wrap-holder .mask ul li:nth-child(4) i{background-position: -200px -675px;} .vision .reference .wrap-holder .mask ul li:nth-child(5) i{background-position-y: -75px;} .vision .reference .wrap-holder .mask ul li:nth-child(6) i{background-position: -500px -675px;} .vision .reference .wrap-holder .mask ul li:nth-child(7) i{background-position-y: 0px;} .vision .reference .wrap-holder .mask ul li:nth-child(8) i{background-position-y: -75px;} .vision .reference .wrap-holder .mask ul li:nth-child(9) i{background-position-y: -225px;} .vision .reference .wrap-holder .mask ul li:nth-child(10) i{background-position-y: 0px;} .vision .reference .wrap-holder .mask ul li:nth-child(11) i{background-position-y: -150px;} .vision .reference .wrap-holder .mask ul li:nth-child(12) i{background-position: -400px -375px;} .vision .reference .wrap-holder .mask ul li:nth-child(13) i{background-position: 0 -600px;} .vision .reference .wrap-holder .mask ul li:nth-child(14) i{background-position: -200px -600px;} .vision .reference .wrap-holder .mask ul li:nth-child(15) i{background-position: 0 -675px;} .ito .reference .dot-group ul li{width: 40px;} .ito .reference .wrap-holder .mask ul li i{ background-position-x: -200px;} .ito .reference .wrap-holder .mask ul li:nth-child(1) i{ background-position: -400px -600px;} .ito .reference .wrap-holder .mask ul li:nth-child(2) i{ background-position-y: -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(3) i{ background-position: 0 -375px;} .ito .reference .wrap-holder .mask ul li:nth-child(4) i{ background-position-y: -375px;} .ito .reference .wrap-holder .mask ul li:nth-child(5) i{ background-position-y: -75px;} .ito .reference .wrap-holder .mask ul li:nth-child(6) i{ background-position: -600px 0px;} .ito .reference .wrap-holder .mask ul li:nth-child(7) i{ background-position: -400px -600px;} .ito .reference .wrap-holder .mask ul li:nth-child(8) i{ background-position-y: -150px;} .ito .reference .wrap-holder .mask ul li:nth-child(9) i{ background-position-y: -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(10) i{ background-position: -600px -375px;} .ito .reference .wrap-holder .mask ul li:nth-child(11) i{ background-position: 0 -525px;} .ito .reference .wrap-holder .mask ul li:nth-child(12) i{ background-position: 0 -450px;} .ito .reference .wrap-holder .mask ul li:nth-child(13) i{ background-position: -600px -450px;} .ito .reference .wrap-holder .mask ul li:nth-child(14) i{ background-position: 0 -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(15) i{ background-position: -600px -375px;} .ito .reference .wrap-holder .mask ul li:nth-child(16) i{ background-position: 0 -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(17) i{ background-position: -600px -450px;} .ito .reference .wrap-holder .mask ul li:nth-child(18) i{ background-position: -200px -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(19) i{ background-position: -200px -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(20) i{ background-position: 0px -450px;} .ito .reference .wrap-holder .mask ul li:nth-child(21) i{ background-position: -200px -300px;} .ito .reference .wrap-holder .mask ul li:nth-child(22) i{ background-position: -200px -450px;} .ito .reference .wrap-holder .mask ul li:nth-child(23) i{ background-position: -400px -600px;} .ito .reference .wrap-holder .mask ul li:nth-child(24) i{ background-position: -200px -525px;} .ito .reference .wrap-holder .mask ul li:nth-child(25) i{ background-position: -200px -300px;} .facevue .reference .wrap-holder .mask ul li i{ background-position-x: -400px;} .facevue .reference .wrap-holder .mask ul li:nth-child(1) i{ background-position-y: -0px;} .sketch .reference .wrap-holder .mask ul li i{ background-position-x: -400px;} .sketch .reference .wrap-holder .mask ul li:nth-child(1) i{background-position: -200px -745px;} .sketch .reference .wrap-holder .mask ul li:nth-child(2) i{background-position-y: -0px;} .sketch .reference .wrap-holder .mask ul li:nth-child(3) i{background-position-y: -75px;} .sketch .reference .wrap-holder .mask ul li:nth-child(4) i{background-position-y: -150px;} .sketch .reference .wrap-holder .mask ul li:nth-child(5) i{background-position-y: -75px;} /* .sketch .reference .wrap-holder .mask ul li:nth-child(5) i{background-position-y: -375px;} */ .sketch .reference .wrap-holder .mask ul li:nth-child(6) i{background-position-y: -450px;} .sketch .reference .wrap-holder .mask ul li:nth-child(7) i{background-position-y: -0px;} .sketch .reference .wrap-holder .mask ul li:nth-child(8) i{background-position-y: -525px;} .bigdata .reference .wrap-holder .mask ul li i{ background-position-x: -200px;} .bigdata .reference .wrap-holder .mask ul li:nth-child(1) i{ background-position-y: -225px;} .bigdata .reference .wrap-holder .mask ul li:nth-child(2) i{ background-position-y: -150px;} .bigdata .reference .wrap-holder .mask ul li:nth-child(3) i{ background-position-y: 0px;} .bigdata .reference .wrap-holder .mask ul li:nth-child(4) i{ background-position-y: -75px;} .frs .reference .wrap-holder .mask ul li:nth-child(1) i{ background-position:-400px 0;} .vichk .reference .wrap-holder .mask ul li i{ background-position-x: -600px;} .vichk .reference .wrap-holder .mask ul li:nth-child(1) i{ background-position-y: 0px;} .vichk .reference .wrap-holder .mask ul li:nth-child(2) i{ background-position: -200px -300px;} .vichk .reference .wrap-holder .mask ul li:nth-child(3) i{ background-position-y: -75px;} .vichk .reference .wrap-holder .mask ul li:nth-child(4) i{ background-position-y: -600px;} .vichk .reference .wrap-holder .mask ul li:nth-child(5) i{ background-position-y: -150px;} .vichk .reference .wrap-holder .mask ul li:nth-child(6) i{ background-position-y: -225px;} .vichk .reference .wrap-holder .mask ul li:nth-child(7) i{ background-position-y: -300px;} .vichk .reference .wrap-holder .mask ul li:nth-child(8) i{ background-position-y: -375px;} .vichk .reference .wrap-holder .mask ul li:nth-child(9) i{ background-position: -200px -300px;} .vichk .reference .wrap-holder .mask ul li:nth-child(10) i{ background-position-y: -450px;} .vichk .reference .wrap-holder .mask ul li:nth-child(11) i{ background-position: -400px -225px;} .vichk .reference .wrap-holder .mask ul li:nth-child(12) i{ background-position: -400px -600px; } .vichk .reference .wrap-holder .mask ul li:nth-child(13) i{ background-position-y: -525px;} .vichk .reference .wrap-holder .mask ul li:nth-child(14) i{ background-position-y: -450px;} .retail .reference .wrap-holder .mask ul li i{background-position-y: -825px;} .retail .reference .wrap-holder .mask ul li:nth-child(1) i{background-position-x: -0px;} /* 서비스 */ .service .visiul{position: relative; background: url(../image/service-title.jpg) center 0px no-repeat ; } .service [class ^= screen] {padding-top: 120px; } .service [class ^= screen] h1{font-size: 40px;} .service .screen0 {padding-top: 70px;} .service .screen0 .wrap-holder{min-width: 1250px;} .service .screen0 .wrap-holder .wrap-in{text-align: center; margin-top: 35px;} .service .screen0 .wrap-holder h1{color: #000; margin-top: 18px;} .service .screen0 .wrap-holder h2{color: #0eaa4f;} .service .screen0 .wrap-holder i{width: 274px; height: 31px; background-position: -500px 0;} .service .screen1 {padding-top: 50px;} .bigdata .screen2 .wrap-holder{ width: 100%; min-width: 1250px; padding: 120px 0; background: url(../image/s-bigdata-bg.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .bigdata .screen2 .wrap-holder h2{margin-top: 120px;} .bigdata .screen2 .wrap-holder ul{margin: 80px auto 0; width: 1200px;} .bigdata .screen2 .wrap-holder ul li{width: 33.3%; position: relative;} .bigdata .screen2 .wrap-holder ul li i{width: 60px; height: 60px; background-position: -400px -300px;} .bigdata .screen2 .wrap-holder ul li:nth-child(2) i{ background-position: -625px -300px;} .bigdata .screen2 .wrap-holder ul li:nth-child(3) i{ background-position: -700px -300px;} .bigdata .screen2 .wrap-holder ul li:before{content: ""; width: 250px; height: 1px; background: rgba(230,230,230,0.37); position: absolute; top: 174px; left: calc(50% - 125px);} .bigdata .screen2 .wrap-holder ul li h4{margin-top: 40px; height: 56px;font-size: 18px;} .bigdata .screen2 .wrap-holder ul li h6{margin-top: 40px; } .service .screen3{background: #f8f8f8; padding-bottom: 120px;} .service .screen3 .wrap-holder {text-align: center; width: 1100px;} .service .screen3 .wrap-holder h1{color: #000;} .service .screen3 .wrap-holder .wrap-in img{width: 951px; height: 550px; margin-top: 60px;} .service .screen3 .wrap-holder .wrap-in h2{color: #000; font-size: 28px;} .service .screen3 .wrap-holder .study-db{position: relative;margin-top: 136px;} .service .screen3 .wrap-holder .study-db h2{font-size: 28px; color: #000;} .service .screen3 .wrap-holder .study-db i{width: 257px; height: 156px; background-position: -825px 0px; align-items: center; position: absolute; top: -176px; left: calc(50% - 128px); color: #000;} .service .screen3 .wrap-holder .study-db img{margin-top: 40px; width: 940px; height: 689px;} .service .screen3 .wrap-holder .table{width: 1000px; text-align: left; margin: 40px;} .service .screen3 .wrap-holder .table li{display: inline-block; position: relative; padding: 42px 0 0 45px; vertical-align: top; width: 450px; border-bottom: 1px solid #c4c4c4; height: 157px;} .service .screen3 .wrap-holder .table li:nth-child(even){margin-left: 90px;} .service .screen3 .wrap-holder .table li h4{color: #0fae42; position: absolute; left: 0; top: 42px;} .service .screen3 .box{width: 1100px; border: solid 1px #f4f4f4; background: #fff; border-radius: 20px; margin-top: 80px; padding: 80px;} .service .screen4 {padding-top: 0;} .service .screen4 .wrap-holder{width: 100%; min-width: 1250px; text-align: center; padding: 120px 0;} .service .screen4 .wrap-holder h1{color: #000;} .service .screen4 .wrap-holder .wrap-in{margin: auto; width: 1250px;} .service .screen4 .wrap-holder .wrap-in > h4{margin-top: 18px;} .service .screen4 .wrap-holder ul{width: 1100px; margin: 80px auto 0;} .service .screen4 .wrap-holder ul li{align-items: center; flex-direction: column; position: relative; border-right: 1px solid #fff; vertical-align: top; height: 470px; color: #fff; transition: all 0.5s ease 0s; width: 27%;} .service .screen4 .wrap-holder ul li *{transition: all 0.5s ease 0s;} .service .screen4 .wrap-holder ul li::before{content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0; } .service .screen4 .wrap-holder ul li.on::before{opacity: 0.5; } .service .screen4 .wrap-holder ul li:nth-child(1){ background: url(../image/service-04-1.jpg) center center;} .service .screen4 .wrap-holder ul li:nth-child(2){ background: url(../image/service-04-2.jpg) center center;} .service .screen4 .wrap-holder ul li:nth-child(3){ background: url(../image/service-04-3.jpg) center center;} .service .screen4 .wrap-holder ul li h4{transform: translateY(50px);} .service .screen4 .wrap-holder ul li h6{margin-top: 20px; opacity: 0; z-index: 0;} .service .screen4 .wrap-holder ul li.on{width: 46%;} .service .screen4 .wrap-holder ul li.on h4{transform: translateY(0px);} .service .screen4 .wrap-holder ul li.on h6{opacity: 1;} .service.ito .screen2{} .service.ito .screen2 .wrap-holder {padding: 120px 0; text-align: center; width: auto; min-width: 1250px;background: #fafafa; overflow: hidden;} .service.ito .screen2 .wrap-holder .wrap-in{width: 1250px; margin: auto;} .service.ito .screen2 h1{color: #000;} .service.ito .screen2 ul{text-align: left;} .service.ito .screen2 li{height: 504px; position: relative; margin-top: 80px;} .service.ito .screen2 li .box{position: relative;height: 504px;} .service.ito .screen2 li .box:nth-child(1) {flex-direction: column;} .service.ito .screen2 li .box:nth-child(2){width: 750px; border-radius: 10px; position: absolute; left: 130px; top: 0px; overflow: hidden;} .service.ito .screen2 li:nth-child(even) .box:nth-child(2){ left: 537px;} .service.ito .screen2 li:nth-child(even) .box:nth-child(1){margin-left: 75px;} .service.ito .screen2 li:nth-child(odd) .box:nth-child(2){left: -130px;} .service.ito .screen2 li:nth-child(odd) .box:nth-child(1){margin-left: 680px;} .service.ito .screen2 li span{position: relative;} .service.ito .screen2 li span:last-child{line-height: 40px;} .service.ito .screen2 li span:first-child{font-size: 100px; color: #d4f5df; position: absolute; left: 0; top: -65px;} .service.ito .screen2 li h2{color: #000; position: relative; display: inline-block ;} .service.ito .screen2 li h6{margin-top: 18px;} .service.ito .screen2 li:nth-child(odd) span:first-child{ right: -70px; left: auto;} /* 제품 */ .product .visiul{position: relative; background: url(../image/product-title.jpg) center 0px no-repeat ; } .product [class ^= screen] { } .product [class ^= screen] h1{font-size: 40px;} .product [class ^= screen] .wrap-holder {padding: 120px 0;} .product .screen0 .wrap-holder{min-width: 1250px; padding: 70px 0 50px ; } .product .screen0 .wrap-holder .wrap-in{text-align: center; margin-top: 35px;} .product .screen0 .wrap-holder h1{color: #000; margin-top: 18px;} .product .screen0 .wrap-holder i{width: 214px; height: 31px; background-position: -700px -650px;} .product .screen1 .wrap-holder{} .product .screen2 {padding-top: 120px;} .product .screen2 .wrap-holder{ width: 100%; min-width: 1250px; background: url(../image/p-sketch-bg.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .product .screen2 .wrap-holder h2{margin-top: 120px;} .product .screen2 .wrap-holder ul{margin:0px auto 0; width: 1200px;} .product .screen2 .wrap-holder ul li{width: 50%; position: relative; display: inline-block; margin-top: 80px; vertical-align: top;} .product .screen2 .wrap-holder ul li i{width: 60px; height: 60px; background-position-y: -300px;} .product .screen2 .wrap-holder ul li:nth-child(1) i{ background-position-x: -775px;} .product .screen2 .wrap-holder ul li:nth-child(2) i{ background-position-x: -850px;} .product .screen2 .wrap-holder ul li:nth-child(3) i{ background-position-x: -925px;} .product .screen2 .wrap-holder ul li:nth-child(4) i{ background-position-x: -1000px;} .product .screen2 .wrap-holder ul li:nth-child(even)::before{content: ""; width: 1px; height: 160px; background: rgba(230,230,230,0.37); position: absolute; top: 30px; left: 0;} .product .screen2 .wrap-holder ul li h4{margin-top: 40px;line-height: 30px;} .product .screen2 .wrap-holder ul li h6{margin-top: 20px;} .product .screen3 .wrap-holder {text-align: center; width: 100%; min-width: 1250px; background: #fafafa; } .product .screen3 .wrap-holder h1{color: #000;} .product .screen3 .wrap-holder h4{color: #000;margin-top: 100px; font-size: 28px;} .product .screen3 .wrap-holder h4:nth-of-type(1){ margin-top: 80px;} .product .screen3 .wrap-holder h4 i{width: 40px; height: 40px; vertical-align: middle; margin-right: 8px;background-position: -450px -250px;} .product .screen3 .wrap-holder h4:nth-of-type(1) i{background-position-x: -550px;} .product .screen3 .wrap-holder h4:nth-of-type(2) i{background-position-x: -600px;} .product .screen3 .wrap-holder h4:nth-of-type(3) i{background-position-x: -500px;} .product .screen3 .wrap-holder h6{margin-top: 12px;} .product .screen3 .wrap-holder img{margin: 40px auto 0; display: block;} .product .screen3 .wrap-holder img:nth-of-type(1){width: 1100px; height: 309px;} .product .screen3 .wrap-holder img:nth-of-type(2){width: 1100px; height: 276px;} .product .screen3 .wrap-holder img:nth-of-type(3){width: 1100px; height: 270px;} .sketch .screen3 .wrap-holder h6:nth-of-type(1){text-align: left; width: 1000px; display: inline-block;} .sketch .screen3 .wrap-holder h6:nth-of-type(1) span{font-weight: 600;margin-right: 12px;} .facevue .visiul{position: relative; background: url(../image/product-title.jpg) center 0px no-repeat ; } .facevue [class ^= screen] { } .facevue [class ^= screen] h1{font-size: 40px;} /* .facevue [class ^= screen] .wrap-holder {padding: 50px 0;} */ .facevue .screen0 .wrap-holder{min-width: 1250px; } .facevue .screen0 .wrap-holder .wrap-in{text-align: center; margin-top: 35px;} .facevue .screen0 .wrap-holder h1{color: #000; margin-top: 18px;} .facevue .screen0 .wrap-holder i{width: 250px; height: 31px; background-position: -0px -700px;} .facevue .screen1 .wrap-holder{} .facevue .screen2 .wrap-holder{ width: 100%; min-width: 1250px; background: url(../image/p-facevue-bg.jpg); color: #fff; background-size: cover; align-items: center; text-align: center;} .facevue .screen2 .wrap-holder h2{margin-top: 120px;} .facevue .screen2 .wrap-holder ul{margin:0px auto 0; width: 1200px;} .facevue .screen2 .wrap-holder ul li{width: 50%; position: relative; display: inline-block; margin-top: 80px;} .facevue .screen2 .wrap-holder ul li i{width: 60px; height: 60px; background-position-y: -375px;} .facevue .screen2 .wrap-holder ul li:nth-child(1) i{ background-position-x: -925px;} .facevue .screen2 .wrap-holder ul li:nth-child(2) i{ background-position-x: -1000px;} .facevue .screen2 .wrap-holder ul li:nth-child(even)::before{content: ""; width: 1px; height: 160px; background: rgba(230,230,230,0.37); position: absolute; top: 30px; left: 0;} .facevue .screen2 .wrap-holder ul li h4{margin-top: 40px;} .facevue .screen2 .wrap-holder ul li h6{margin-top: 20px;} .facevue .screen3 .wrap-holder {text-align: center; width: 100%; min-width: 1250px; background: #f8f8f8; } .facevue .screen3 .wrap-holder h1{color: #000;} .facevue .screen3 .wrap-holder h4{color: #000;margin-top: 100px;} .facevue .screen3 .wrap-holder h4:nth-of-type(1){ margin-top: 80px;} .facevue .screen3 .wrap-holder h4 i{width: 40px; height: 40px; background-position: -450px -250px; vertical-align: middle; margin-right: 8px;} .facevue .screen3 .wrap-holder h4:nth-of-type(1) i{background-position-x: -450px;} .facevue .screen3 .wrap-holder h4:nth-of-type(2) i{background-position-x: -500px;} .facevue .screen3 .wrap-holder h6{margin-top: 12px;} .facevue .screen3 .wrap-holder img{margin-top: 40px;} .facevue .screen3 .wrap-holder img:nth-of-type(1){width: 1100px; height: 450px;} .facevue .screen3 .wrap-holder img:nth-of-type(2){width: 1100px; height: 417px;} .facevue .screen3 .wrap-holder img:nth-of-type(3){width: 1100px; height: 828px; margin: 80px auto 0; display: block;} /* 사업영역 */ .business .visiul{position: relative; background: url(../image/business-title.jpg) center 0px no-repeat; } .public .screen1 .wrap-holder { background: url(../image/b-public-bg.jpg); background-size: cover;} .plant .screen1 .wrap-holder { background: url(../image/b-plant-bg.jpg); background-size: cover;} .security .screen1 .wrap-holder { background: url(../image/b-security-bg.jpg); background-size: cover;} .business.ito .screen1 .wrap-holder { background: url(../image/b-ito-bg.jpg); background-size: cover;} .business [class ^= screen] .wrap-holder .wrap-in{margin:auto;} .business .screen0 {padding-top: 70px;} .business .screen0 .wrap-holder{text-align: center;} .business .screen0 .wrap-holder .wrap-in {margin-top: 35px;} .business .screen1 .wrap-holder { width: auto; min-width: 1250px;} .business .screen1 .wrap-holder .wrap-in{ margin-top: 80px; text-align: center; padding-bottom: 120px; color: #fff; background-size: cover; width: auto;} .business .screen1 .wrap-holder > h6{margin-top: 42px;} .business .screen0 h2{color: #0eaa4f;} .business .screen0 h2 i{width: 40px; height: 40px; background-position-y: -500px; vertical-align: middle; margin-right: 10px;} .business .screen0 h1{font-size: 40px; margin-top: 18px; color: #000; line-height: 60px;} .business .screen1 h1{font-size: 40px; padding-top: 120px; line-height: 1.4;} .business .screen1 ul{display: inline-block; margin: 23px 0 0;} .business .screen1 li{ justify-content: start; align-items: center; position: relative; min-height: 120px; background: rgba(255, 255, 255, 0.1); width: 820px;padding: 27px 70px 27px 160px; text-align: left;} .business .screen1 li:first-child{border-radius: 50px 0 0px 0;} .business .screen1 li:last-child{border-radius: 0 0 50px 0;} .business .screen1 li:not(:first-child){margin-top: 6px;} .business .screen1 li i{width: 46px; height: 46px; margin-right: 30px; background-position-y: -450px ; position: absolute; left: 85px; top: 36px;} .business .screen1 .wrap-in > h6{margin-top: 42px;} .business .screen1 .line{ width: 1px; height: 34px; background: #555; position: relative; display: block; margin:23px auto 0;} .business .screen2 .wrap-holder{margin: 120px 0 -120px; padding-bottom: 230px; min-width: 1250px; overflow: hidden; width: auto; text-align: center;} .business .screen2 .wrap-holder .wrap-in > h1{color: #000; text-align: center;} .business .screen2 ul{display: inline-block; width: 1200px;} .business .screen2 .circle{width: 76px; height: 76px; padding: 6px; position: relative; display: inline-block; border-radius: 50%; background: #f8f8f8; border:18px solid transparent; } .business .screen2 .circle:after { position: absolute; top: 50%; left: 50%; margin: -38px 0 0 -38px; width: 76px; height: 76px; border-radius: 50%; content: ''; opacity: 0; pointer-events: none; box-shadow: inset 0 0 0 38px rgba(14,174,88,0); -webkit-animation: circle 2s 0.5s ease-out infinite; animation: circle 2s 0.5s ease-out infinite;} .business .screen2 .circle::before{content: ""; position: absolute; width: 40px; height: 40px; background: #0eaa4f; border-radius: 50%; left: 0; top: 0;} .business .screen2 .circle i{width: 28px; height: 28px;} .business .screen2 .box h1{color: #212121; margin-top: 36px;} .business .screen2 .box h4{color: #000; margin-top: 25px;} .business .screen2 .box h6{ margin-top: 13px;} .business .screen2 .box .btn-type-line{margin-top: 56px;} .business .screen2 li{text-align: left; position: relative; margin-top: 343px;} .business .screen2 li:first-child{margin-top: 232px;} .business .screen2 li .box:nth-child(2){width: 608px; height: 608px; border-radius: 50%; box-shadow: 10px 20px 40px 0 rgba(23, 51, 36, 0.22); position: absolute; left: 530px; top: -112px; overflow: hidden;} .business .screen2 li:nth-child(odd) .box:nth-child(2){ left: 630px;} .business .screen2 li:nth-child(odd) .box:nth-child(1){margin-left: 100px;} .business .screen2 li:nth-child(even) .box:nth-child(2){left: -36px;} .business .screen2 li:nth-child(even) .box:nth-child(1){margin-left: 690px;} .business .screen2 li .circle i{width: 28px; height: 28px; background-position-y: -400px; position: relative;} .plant .screen0 h2 i{background-position-x: 0;} .plant .screen1 li:nth-child(1) i{background-position-x: 0px;} .plant .screen1 li:nth-child(2) i{background-position-x: -50px;} .plant .screen1 li:nth-child(3) i{background-position-x: -100px;} .plant .screen2 li:nth-child(1) .circle i{background-position-x: 0px;} .plant .screen2 li:nth-child(2) .circle i{background-position-x: -50px;} .plant .screen2 li:nth-child(3) .circle i{background-position-x: -100px;} .plant .screen2 li:nth-child(1) h1 i{background-position: -250px -700px; width: 290px; height: 51px;} .plant .screen2 li:nth-child(2) h1 i{background-position: -600px -700px; width: 283px; height: 51px;} .public .screen0 h2 i{background-position-x: -50px;} .public .screen1 li:nth-child(1) i{background-position-x: -150px;} .public .screen1 li:nth-child(2) i{background-position-x: -200px;} .public .screen1 li:nth-child(3) i{background-position-x: -250px;} .public .screen2 li:nth-child(1) .circle i{background-position-x: -150px;} .public .screen2 li:nth-child(2) .circle i{background-position-x: -200px;} .public .screen2 li:nth-child(3) .circle i{background-position-x: -250px;} .public .screen2 li:nth-child(4) .circle i{background-position-x: -100px;} .public .screen2 li:nth-child(5) .circle i{background-position-x: -350px;} .public .screen2 li:nth-child(1) h1 i{background-position: -0px -600px; width: 208px; height: 51px;} .public .screen2 li:nth-child(2) h1 i{background-position: -250px -600px; width: 262px; height: 51px;} .public .screen2 li:nth-child(3) h1 i{background-position: -550px -600px; width: 300px; height: 51px;} .public .screen2 li:nth-child(5) h1 i{background-position: -0px -900px; width: 308px; height: 50px;} .security .screen0 h2 i{background-position-x: -100px;} .security .screen1 li:nth-child(1) i{background-position-x: -300px;} .security .screen1 li:nth-child(2) i{background-position-x: -350px;} .security .screen1 li:nth-child(3) i{background-position-x: -400px;} .security .screen2 li:nth-child(1) .circle i{background-position-x: -50px;} .security .screen2 li:nth-child(2) .circle i{background-position-x: -150px;} .security .screen2 li:nth-child(3) .circle i{background-position-x: 0px;} .security .screen2 li:nth-child(4) .circle i{background-position-x: -350px;} .security .screen2 li:nth-child(1) h1 i{background-position: -600px -700px; width: 283px; height: 51px;} .security .screen2 li:nth-child(2) h1 i{background-position: -0px -600px; width: 208px; height: 51px;} .security .screen2 li:nth-child(3) h1 i{background-position: -250px -700px; width: 290px; height: 51px;} .security .screen2 li:nth-child(4) h1 i{background-position: -0px -900px; width: 308px; height: 50px;} .business.ito .screen0 h2 i{background-position-x: -150px;} .business.ito .screen1 li:nth-child(1) i{background-position-x: -450px;} .business.ito .screen1 li:nth-child(2) i{background-position-x: -500px;} .business.ito .screen1 li:nth-child(3) i{background-position-x: -550px;} .business.ito .screen2 li:nth-child(1) .circle i{background-position-x: -300px;} .business.ito .screen2 li:nth-child(2) .circle i{background-position-x: -50px;} .business.ito .screen2 li:nth-child(2) h1 i{background-position: -600px -700px; width: 283px; height: 51px;} /* 문의하기 */ .contact .visiul{position: relative; background: url(../image/contact-title.jpg) center 0px no-repeat ; } .contact .content-wrap .screen0{padding-top: 120px;} .contact .content-wrap .left{width: 575px;} .contact .content-wrap .left h1{color: #000; font-size: 40px;} .contact .content-wrap .left > h6 {margin-top: 4px;} .contact .content-wrap .left > h6:nth-of-type(2){margin-top: 40px;} .contact .content-wrap .left div{margin-top: 10px; justify-content: normal;-ms-flex-pack: start;} .contact .content-wrap .left .tel{margin-top: 20px;} .contact .content-wrap .left i{background-position: -245px -545px; margin-right: 10px; width: 30px; height: 30px; background-color: #0eaa4f; border-radius: 50%;} .contact .content-wrap .left .fax i{background-position-x: -295px;} .contact .content-wrap .left .mail i{background-position-x: -245px; background-position-y: -573px;} .contact .content-wrap ul{width: 600px;} .contact .content-wrap ul li:not(:first-child){margin-top: 24px;} .contact .content-wrap ul h6{color: #000; margin-bottom: 10px;} .contact .content-wrap ul .btn{height: 60px; width: 220px; cursor: pointer; border-radius: 30px; background: #0eaa4f; align-items: center; color: #fff;} .contact .content-wrap ul .btn:hover{background: #0c9947;} .contact .content-wrap ul li:last-child{justify-content: flex-end;} .contact .content-wrap .arrow{position: relative; width: 22px;margin-left: 12px;} .contact .content-wrap .arrow span{width: 22px; height: 2px; background: #fff;display: inline-block;} .contact .content-wrap .arrow::before, .contact .content-wrap .arrow::after{content: ''; width: 11px; height: 2px; background: #fff; position: absolute; right: 0; transform-origin: right 50%; } .contact .content-wrap .arrow::before{ transform: rotate(-45deg);} .contact .content-wrap .arrow::after{transform: rotate(45deg); } .contact .content-wrap ul .btn:hover .arrow span {animation:width both 0.55s;} .contact .content-wrap ul .btn:hover .arrow:before {animation:width5 both 0.3s 0.3s;} .contact .content-wrap ul .btn:hover .arrow:after {animation:width5 both 0.3s 0.4s;} #contact .question-group{display: none;} @keyframes width { 0% {width:0;} 100% {width:100%;} } @keyframes width5 { 0% {width:0;} 100% {width:50%;} } /* footer */ .footer-wrap{background:#262626;color: #b4b4b4; min-width: 1250px; position: relative; } .footer-wrap .logo i{width: 170px; height: 24px; background-position: -300px -50px;} .footer-wrap:before{content: ''; position: absolute; left: 0; bottom: 80px; border-top: 1px solid #333; width: 100%;} .footer-wrap .wrap-holder{ width: auto !important; min-width: 1250px; margin: 120px auto 0; position: relative !important; } .footer-wrap .question-group{height: 430px; color: #fff; background: url(../image/footer.jpg); position: relative; background-size: cover;} .footer-wrap .menu-group{color: #555; margin: 0 90px 0 332px;-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;} .footer-wrap .copy-group{height: 90px; color: #555; align-items: center;} .footer-wrap .question-group > div { position: relative; text-align: center;} .footer-wrap .question-group h1{padding-top: 130px; font-size: 40px; color: #fff !important; } .footer-wrap .question-group h4{margin-top: 14px; line-height: 1.67;} .footer-wrap .question-group .btn-type-fill {display: inline-flex; margin-top: 32px; } .footer-wrap .question-group i{width: 20px; height: 20px; background-position: 0 -100px; margin:0 8px 0 0;} .footer-wrap .logo{position: absolute; left: 20px !important; top: 52px !important; color: #555;} .footer-wrap .logo h4{margin-top: 10px;} .footer-wrap .menu {padding: 45px 0 55px; position: relative; margin: auto; width: 1250px;} .footer-wrap .menu-group > li > h6{height: 32px; padding: 5px 0 0 0px; font-size: 14px; color: #d3d3d3;} .footer-wrap .menu-group h6{font-size: 14px;} .footer-wrap .menu-group > li:nth-child(1){width: 66px; } .footer-wrap .menu-group > li:nth-child(2){width: 106px; margin-left: 70px;} .footer-wrap .menu-group > li:nth-child(3){width: 76px; margin-left: 52px;} .footer-wrap .menu-group > li:nth-child(4){width: 110px; margin-left: 58px;} .footer-wrap .menu-group > li:nth-child(5){width: 100px; margin-left: 32px;} .footer-wrap .submenu li{height: 32px; padding: 5px 0 0 0px; cursor: pointer;} .footer-wrap .submenu li:hover{color: #d1d1d1;} .footer-wrap .copy-group{ margin: auto; max-width: 1100px; text-align: center; padding-top: 26px;} .footer-wrap .copy-group p{font-size: 13px; padding: 5px 0;} .footer-wrap .copy-group p em{color: #383838; margin: 0 10px;} .main .footer-wrap .wrap-holder{margin-top: 0;} .footer-wrap .family{width: 168px; padding: 10px 14px; height: 36px; position: relative; background: #262626; border: 1px solid #555;} .footer-wrap .family div{color: #838383; font-size: 14px; cursor: pointer; align-items: center;-ms-flex-pack: start;} .footer-wrap .family div i{width: 10px; height: 10px; background-position: 0 -150px;margin-left: auto;} .footer-wrap .family div.on i{background-position: -20px -150px;} .footer-wrap .family ul{display: none;position: absolute; width: 100%; left: 0; top: 36px; } .footer-wrap .family li{height: 36px; background: #fff; cursor: pointer; font-size: 14px; padding: 10px 14px;} .footer-wrap .family li:hover{background: #f8f8f8;} /* 201226 추가- 시작 */ .footer-wrap .links {position: absolute; right: 0; top: 95px; width: 168px; height: 36px;text-align: right;} .footer-wrap .links a {display: inline-block; width: 32px; height: 32px; border-radius: 100%; background-color: #bbbbbb; text-indent: -9999px; font-size: 0; vertical-align: top; margin-left: 6px;} .footer-wrap .links a:hover {background-color: #555555;} .footer-wrap .links a.link1 {background-position: -332px -829px;} .footer-wrap .links a.link2 {background-position: -374px -829px;} .footer-wrap .links a.link1:hover {background-position: -415px -829px;} .footer-wrap .links a.link2:hover {background-position: -457px -829px;} /* 201226 추가- 끝 */ .ellipsis{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;display: inline-block;} .underline{text-decoration: underline;} .flex{display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} .div-2 li{width: 50%;} .div-3 li{width: 33.3%;} .div-4 li{width: 25%;} .div-5 li{width: 20%;} .div-6 li{width: 16.6%;} .subtitle-wrap .bar{position: absolute; left: 0; top: 68px; height: 2px; background: #0eaa4f; } .subtitle-wrap .div-2 + .bar{width:500px ;} .subtitle-wrap .div-3 + .bar{width:333px ;} .subtitle-wrap .div-4 + .bar{width:250px ;} .subtitle-wrap .div-5 + .bar{width:200px ;} .subtitle-wrap .div-6 + .bar{width:166px ;} .dimmed::before{content: "";position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgb(0, 0, 0); opacity: 0.5; transition: opacity 0.35s, transform 0.35s;} .logo i{width: 201px; height: 28px; background-position: 0 0;} .over .logo i{background-position-x: -250px;} .fixe .header-wrap .logo i, .header-wrap.on .logo i{background-position: -250px 0;} .top-navi{position: fixed; right: 50px; bottom: 50px; display: none; cursor: pointer;} .top-navi i{width: 70px; height: 70px; background-position: -400px -100px ;} .content-wrap{padding: 0px 0 0px; min-width: 1100px;} /*//////////*/ .main .screen2 .right .dimmed.bgm:before{ animation: bgm 1s 0.25s ease-in-out forwards; } @keyframes bgm { 0% { left: -100%; } 60% { left: 0; } 70% { left: 0; } 100% { left: 40%; } } .screen1 .list ul li{opacity: 0; -webkit-animation: fade-In 0.5s 0.1s ease-in-out forwards; animation: fade-In 0.5s 0.1s ease-in-out forwards; } .screen1 .list ul li:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .screen1 .list ul li:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .screen1 .list ul li:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes fade-In { 0% { -webkit-transform: translateX(50px); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes fade-In { 0% { transform: translateX(50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .blur { -webkit-animation: blur 1s ease forwards; animation: blur 1s ease forwards; } @keyframes blur { 0% { filter: blur(10px); opacity: 0; transform: translateY(10px);} 100% { filter: blur(0); opacity: 1; transform: translateY(0px);} } .scale { -webkit-animation: scale 1.5s ease forwards; animation: scale 1.5s ease forwards; } @keyframes scale { 0% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1);opacity: 1; } } .move_up2{opacity: 0;} .move_up2.animate { -webkit-animation: moveUp2 1s ease forwards; animation: moveUp2 1s ease forwards; } @-webkit-keyframes moveUp2 { 0% { -webkit-transform: translateY(30px);opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveUp2 { 0% { transform: translateY(30px);opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .moving{opacity: 0;} .up{opacity: 0;} .up.animate{ -webkit-animation: up 1s ease forwards; animation: up 1s ease forwards; } @-webkit-keyframes up { 0% { -webkit-transform: translateY(100px);opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes up { 0% { transform: translateY(100px);opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .left_right{opacity: 0;} .left_right.animate{ -webkit-animation: left_right 1s ease forwards; animation: left_right 1s ease forwards; } @-webkit-keyframes left_right { 0% { -webkit-transform: translateX(-100px);opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes left_right { 0% { transform: translateX(-100px);opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .right_left{opacity: 0;} .right_left.animate{ -webkit-animation: right_left 1s ease forwards; animation: right_left 1s ease forwards; } @-webkit-keyframes right_left { 0% { -webkit-transform: translateX(100px);opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes right_left { 0% { transform: translateX(100px);opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .txt-mask{ display: inline-block; -webkit-animation: txt-mask 0.5s ease; animation: txt-mask 0.5s ease; } @-webkit-keyframes txt-mask { 0% { -webkit-transform: translateY(50px);opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes txt-mask { 0% { transform: translateY(50px);opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animate.A { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .animate.A- { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .animate.B { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .animate.B- { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .animate.C { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .animate.C- { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; } .animate.D { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .animate.D- { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; } .animate.E { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes circle { 0% {opacity: 1;-webkit-transform: scale3d(0.4, 0.4, 1);} 40% {box-shadow: inset 0 0 0 2px rgba(14,174,88,0.8);;opacity: 0.1;} 50% { box-shadow: inset 0 0 0 2px rgba(14,174,88,0.8);; opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1);} } @keyframes circle { 0% { opacity: 1; transform: scale3d(0.4, 0.4, 1);} 40% { box-shadow: inset 0 0 0 2px rgba(14,174,88,0.8); opacity: 0.1;} 50% { box-shadow: inset 0 0 0 2px rgba(14,174,88,0.2);; opacity: 0; transform: scale3d(1.2, 1.2, 1);} }