/* public */ .stroke{color:rgba(0, 0, 0, 0); -webkit-text-stroke: 1px #000;} .rbg{ left: auto !important; right: -154px !important; transform: rotate(270deg); z-index: 0 !important;} /************* products *************/ /************* products *************/ /* atear */ .productsMain{ padding-top:263px; position: relative;} .productsMain .productsCircle{ position: absolute; left: 0; top: 0;} .productsMain .productsBg{ width: 66%; position: absolute; right: 0; top: 0; z-index: -1;} .productsMain .downBtn{ float:right;} .productsMain .dep1{ font-size: 21px; font-weight: 700;} .productsMain .dep1::before{ content: ''; display: block; width: 25px; height: 2px; background: #000; margin-bottom: 12px;} .productsMain .tit{ font-size: 100px; line-height: 1.2; font-weight: 800; margin: 64px 0 25px;} .productsMain .txt1{ font-size: 25px; font-weight: 500;} .productsMain .txt2{ position: absolute; right: 0; bottom: 0;} .productsMain .txt2 p{ font-size: 20px; font-weight: 500; margin-bottom: 15px;} .productsMain .txt2 ul{} .productsMain .txt2 ul li{ font-size: 18px; position: relative; padding-left: 20px; padding-left: 14px;} .productsMain .txt2 ul li::before{ content: ''; display: block; width: 6px; height: 6px; background: #000; position: absolute; left: 0; top:11px;} .container.atear{ margin:262px auto 125px;} .container.atear .atear1{ position:absolute; right: 0; bottom: 0;} .container.atear > span{font-size: 25px; color:#919191; font-weight: 700;} .container.atear .atearTxt{ font-size: 60px; margin:20px 0 49px; font-weight: 500; line-height: 1.4;} .container.atear .atearTxt em{ color:#8bc341;} .container.atear ul{} .container.atear ul li{ font-size: 18px; color:#3e3e3e; padding-left: 24px; position: relative; margin-bottom: 15px; line-height: 16px;} .container.atear ul li .num{ width: 16px; height: 16px; border-radius: 50%; border: 1px solid #2f519a; position: absolute; left: 0; top: 0; font-size: 11px; text-align: center; font-family: 'raleway'; color:#2f519a; line-height: 13px;} .atearBg{position: absolute; right: -176px; bottom: -113px;} .container.skill{} .grayTit{ font-weight: 700; font-size: 25px; color:#919191; margin-bottom: 30px;} .container.skill .tit{ font-weight: 700; font-size: 25px; color:#919191; margin-bottom: 30px;} .container.skill ul{border: 1px solid #bcbcbc; border-width: 1px 0 0 1px; overflow: hidden;} .container.skill ul li{ width: 25%; height: 310px; border: 1px solid #bcbcbc; border-width: 0 1px 1px 0; float: left; box-sizing: border-box; padding: 35px 0 35px 36px;} .container.skill.iotcare ul li{ height: 343px;} .container.skill.airline ul li{ height: 313px;} .container.skill ul li .wrap{ width: 100%; height: 100%; position: relative;} .container.skill ul li .wrap img{} .container.skill ul li .wrap .txtbox{ position: absolute; left: 0; bottom: 0;} .container.skill ul li .wrap .txtbox .txt1{ font-size: 20px; margin-bottom: 18px; font-weight: 500;} .container.skill ul li .wrap .txtbox .txt2{ font-size: 17px; color:#3e3e3e;} .features{ height: 517px; margin:237px auto 220px;} .features .featuresVisual{ width: 48.2%; height: 100%; padding: 33px 47px; box-sizing: border-box; float: left; border-radius: 15px;} .features .featuresVisual .imgWrap{ width: 100%; height: 100%; background: #263f52 url(/images/contents/atear2.png)no-repeat center center; border-radius: 15px; overflow: hidden;} .features .txtbox{ display: inline-block; width: calc( 51.8% - 90px ); float: right; position: absolute; right: 0; bottom: 0;} .features .txtbox .tit{ font-size: 35px; font-weight: 700; margin-bottom: 50px;} .features .txtbox ul{ font-size: 18px;} .features .txtbox ul li{ box-sizing: border-box; position: relative; padding: 0 0 25px 211px; margin-bottom: 25px;} .features .txtbox ul li:last-child{padding-bottom:50px; margin-bottom:0;} .features .txtbox ul li::before, .features .txtbox ul li::after{ content: ''; width: 180px; height: 1px; position: absolute; left: 0; bottom: 0; background: #8bc341;} .features .txtbox ul li::after{ width: calc( 100% - 211px ); left: auto; right: 0; background: #bcbcbc;} .features .txtbox ul li p{ box-sizing: border-box;} .features .txtbox ul li .subject{ font-weight: 500; width: 180px; margin-right: 31px; position: absolute; left: 0; top: 0;} .features .txtbox ul li .explain{ font-weight: 500; color:#000; width: 100%;} .greenSnow{ position: absolute;} .greenSnow.num1{ right: 0; top: -100px;} .ataerWrap{ position: relative;} .ataerWrap .lineUpBg{ width: 100%; position: absolute; right: 0; top: 28%; touch-action: none; pointer-events: none; opacity: .05;} .lineUp{ padding-bottom: 140px; margin-bottom: 262px;} .lineUp .txtbox{ position: absolute; padding-left: 20px;} .lineUp .txtbox::before{ content: ''; width: 9px; height: 9px; border-radius: 50%; background: #8bc341; position: absolute; left: 0; top: 11px;} .lineUp .txtbox span{ font-size: 20px; font-weight: 500;} .lineUp .txtbox p{ font-weight: 300; font-size: 18px; color:#3e3e3e; margin-top: 10px;} .lineUp .txtbox p strong{ text-decoration: underline;} .lineUp .txtbox .arrow{ position: absolute;} .lineUp .txtbox.pro{ right: 0; top: 135px;} .lineUp .txtbox.pro .arrow{ left:-62px; top:52px;} .lineUp .txtbox.mobile{ left: 0; bottom: 0;} .lineUp .txtbox.mobile .arrow{ right: 50px; top:-60px;} .tryAtear{ margin-bottom: 90px;} .tryAtear .tryAtearList{ display: flex; justify-content: space-between;} .tryAtear .tryAtearList > li{ width: 100%; margin-right: 67px; border-radius: 15px; background: #fbfbfb; padding: 70px 45px; box-sizing: border-box;} .tryAtear .tryAtearList > li:last-child{ margin-right: 0;} .tryAtear .tryAtearList .inner{ width: 100%; height: 100%; position: relative;} .tryAtear .tryAtearList .inner span{ font-size: 35px; font-weight: 600; font-family: 'Raleway';} .tryAtear .tryAtearList .inner p{ font-size: 17px; color:#cdcdcd; margin:21px 0 55px;} .tryAtear .tryAtearList .inner ul{ height: 350px; margin-bottom: 90px; overflow: hidden; overflow-y: auto;} .tryAtear .tryAtearList .inner ul li{ font-size: 18px; position: relative; padding-left:41px; margin-top:20px;} .tryAtear .tryAtearList .inner ul li:first-child{margin-top: 0;} .tryAtear .tryAtearList .inner ul li::before{content: ''; width: 26px; height: 26px; position: absolute; left: 0; top: 0; background: url(/images/contents/checkCon.png)no-repeat center center / contain;} .tryAtear .tryAtearList .inner ul li.add::before{ background-image: url(/images/contents/addCon.png);} .tryAtear .tryAtearList .inner a{ width: 100%; height: 51px; line-height: 51px; border: 2px solid #8bc341; text-align: center; color:#8bc341; font-size: 19px; font-weight: 600; box-sizing: border-box; transition: .5s ease; border-radius: 25px; position: absolute; left: 0; bottom: 0;} .tryAtear .tryAtearList .inner a:hover{ background-color: #8bc341; color:#fff;} /* iotcare2.0 */ .productsMain.iotcare .txt2{ bottom:-100px;} .iotcareNeed{ margin:210px auto 150px;} .iotGrayTit{ font-size: 28px; font-weight: 700; color: #919191;} .iotNeedList{ margin-top: 30px; display: flex; flex-wrap: wrap;} .iotNeedList li{ width: calc( 50% - 32px ); height: 120px; margin:0 64px 55px 0; border-radius: 15px; display: flex; align-items: center; padding: 0 50px; box-sizing: border-box;} .iotNeedList li:nth-child(even){ margin-right: 0;} .iotNeedList li span{ display: block; width: 148px; font-size: 20px; font-weight: 500; margin-right: 33px; position: relative;} .iotNeedList li span::after{ content: ''; width: 1px; height: 20px; background: #d3d3d3; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .iotcaregrayBg{ background: linear-gradient( to bottom, #fafafa, #fff);} .iotcareUIimg{ display: block; max-width: 100%; margin: 0 auto;} .features.iotcare{ height: 678px;} .features.iotcare .featuresVisual{ background: url(/images/contents/iotcareThum.png)no-repeat left center; border-radius: 0;} .iotcareSystem {margin-bottom: 194px;} .iotcareSystem.m-144 {margin-top:-144px;} /* .iotcareSystem .grayImgBox{ border:1px solid #bcbcbc; padding: 46px 68px; box-sizing: border-box;} */ /* iotcare - air */ .container.atear.iotcareair{ margin-top:145px;} .iotcareair2Img{ max-width: 100%; display:block; margin: 0 auto 70px;} .features.iotcareair .featuresVisual{ background:url(/images/contents/iotcareairThum.png)no-repeat left center} .features.iotcareair{ height: 850px;} .features.iotcareair .txtbox .tit{ margin-bottom: 50px;} .features.iotcareair .txtbox ul li .explain .barTxt{ display: block; color:#3e3e3e; font-size: 16px; position: relative; padding-left: 10px; box-sizing: border-box; font-weight: 300;} .features.iotcareair .txtbox ul li .explain .barTxt.lh20{ margin-bottom: 20px;} .features.iotcareair .txtbox ul li .explain .barTxt::before{ content: '-'; position: absolute; left: 0; top: 0;} .features.iotcareair .txtbox ul li .subject span{ display: block; font-size: 14px; font-weight: 400;} .contactBtn.air{margin-top:60px;} /* Quantum Service */ .productsMain .serviceBg {width: 100%;} .service_bg {position: absolute; right: -19%; top:17%; z-index:-1;} .service_bg1 {position: absolute; left: -32%; bottom: 46%; z-index:-1;} .container.atear.service {position: relative; margin: 262px 182px 125px;} .container.atear.service .atearTxt{font-size: 50px; margin:20px 0 49px; font-weight: 500; line-height: 1.4;} .container.atear.service .qstxt {position: absolute; bottom: -150px; right: 0; font-family: 'Raleway'; font-style: italic; line-height: 141px; color: transparent; text-transform: capitalize; font-size: 120px; font-weight: 700; -webkit-text-stroke: 1px #cdcdcd; z-index: -1; white-space: nowrap;} .container.service_con1 {padding-top:100px; position: relative;} .container.service_con1 > ul {display: flex; justify-content: space-between;} .container.service_con1 > ul li {padding: 50px 35px 35px; border-radius: 15px; margin-right: 28px; width: calc(100% / 3); box-sizing: border-box; border:1px solid #DEDEDE;} .container.service_con1 > ul li strong {display: inline-block; font-size: 40px; font-weight: 500; color: #8bc341; margin-bottom:50px;} .container.service_con1 > ul li .text_box .tit {font-size: 22px; font-weight: 500; margin-bottom:18px;} .container.service_con1 > ul li .text_box .desc {font-size: 17px; color:#3E3E3E; font-weight: 400;} .container.service_con2 {padding-top:100px;} .container.service_con3 {padding:200px 0;} .container.service_con3 .tit_box {margin-bottom: 50px;} .container.service_con3 .tit_box .tit {text-align: center; font-size: 55px; font-weight: 700; margin-bottom: 20px;} .container.service_con3 .tit_box .desc {text-align: center; font-size: 20px; color: #3E3E3E; } .container.service_con3 .element_tit, .container.service_con3 .characteristic_tit {text-align: center; font-size: 25px; font-weight: 700; color: #919191;} .container.service_con3 .characteristic_tit {margin-bottom: 10px;} .container.service_con3 .element_box {border: 1px solid #DEDEDE; padding:30px 122px; border-radius: 15px; margin:10px 0 30px;} .container.service_con3 .element_box > ul {display: flex; justify-content: space-between;} .container.service_con3 .element_box > ul li {position: relative; font-size: 22px; font-weight: 700; padding-right: 40px} .container.service_con3 .element_box > ul li::after {content: ''; width: 1px; height: 15px; position: absolute; top: 50%; right:0; transform: translateY(-50%); background-color: #8BC341;} .container.service_con3 .element_box > ul li:last-child::after {content: none;} .container.service_con3 .characteristic_box {margin-top:30px;} .container.service_con3 .characteristic_box .characteristic_list {display: flex; justify-content: space-between;} .container.service_con3 .characteristic_box .characteristic_list > li {position: relative; width: calc(100% / 3); margin-right: 28px; border: 1px solid #DEDEDE; border-radius: 15px; padding:35px;} .container.service_con3 .characteristic_box .characteristic_list > li:last-child {margin-right: 0;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box {position: absolute; top: 35px; right: 35px;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box img {width:120px;} .container.service_con3 .characteristic_box .characteristic_list > li .tit {padding-top:27px; padding-bottom:120px; font-size: 22px; font-weight: 500;} .container.service_con3 .characteristic_box .characteristic_list > li .desc_list {} .container.service_con3 .characteristic_box .characteristic_list > li .desc_list li {position: relative; margin-bottom:15px; padding-left: 15px;} .container.service_con3 .characteristic_box .characteristic_list > li .desc_list li::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #8BC341; position: absolute; left: 0; top: 9px;} .container.service_con3 .characteristic_box .characteristic_list > li .desc_list li:last-child {margin-bottom: 0;} .container.service_con4 {padding-top:100px; padding-bottom: 100px; position: relative;} .container.service_con4::after {display: inline-block; content: ''; position: absolute; bottom: 0; left: 50%; width: 100vw; height: 70%; background-color: #000; transform: translateX(-50%); z-index: -1;} .container.service_con4 .tit_box {margin-bottom: 50px;} .container.service_con4 .tit_box .tit {text-align: center; font-size: 55px; font-weight: 700; margin-bottom: 20px;} .container.service_con4 .tit_box .desc {text-align: center; font-size: 20px; color: #3E3E3E; } .container.service_con4 .element_tit, .container.service_con3 .characteristic_tit {text-align: center; font-size: 25px; font-weight: 700; color: #919191;} .container.service_con4 .video_wrap {padding:35px 35px 20px; background: rgba(255, 255, 255, 0.70); border-radius: 15px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);} .container.service_con4 .video_wrap img {width:100%;} .container.service_con4 .video_wrap p {font-size: 35px; font-weight: 700; text-align: center; padding-top:20px;} .container.service_con4 .img_wrap {margin-top:30px;} .container.service_con4 .img_wrap img, .container.service_con6 .img_wrap img{width:100%;} .container.service_con4 .characteristic_box {margin-top:30px;} .container.service_con4 .characteristic_box .characteristic_list {display: flex; justify-content: space-between;} .container.service_con4 .characteristic_box .characteristic_list > li {position: relative; width: calc(100% / 3); margin-right: 28px; background-color: #141414; border-radius: 15px; padding:35px; color:#fff;} .container.service_con4 .characteristic_box .characteristic_list > li:last-child {margin-right: 0;} .container.service_con4 .characteristic_box .characteristic_list > li .icon_box {position: absolute; top: 35px; right: 35px;} .container.service_con4 .characteristic_box .characteristic_list > li .tit {padding-top:27px; padding-bottom:120px; font-size: 22px; font-weight: 500;} .container.service_con4 .characteristic_box .characteristic_list > li .desc_list {} .container.service_con4 .characteristic_box .characteristic_list > li .desc_list li {position: relative; margin-bottom:15px; padding-left: 15px;} .container.service_con4 .characteristic_box .characteristic_list > li .desc_list li::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #8BC341; position: absolute; left: 0; top: 9px;} .container.service_con4 .characteristic_box .characteristic_list > li .desc_list li:last-child {margin-bottom: 0;} .container.service_con5 {padding-top: 100px;} .container.service_con6 {padding:0 0 200px} .container.service_con6 p {text-align: center; font-size: 55px; font-weight: 700; margin-bottom:50px;} /************* SOLUTION *************/ /************* SOLUTION *************/ /************* SOLUTION *************/ .solutionBg{ position: absolute; right: 0; top: 182px;} .solutionMain{ padding-top:263px; position: relative;} .solutionMain .dep2Tit{ display: inline-block; font-size: 21px; font-weight: 700; padding-top:12px; position: relative;} .solutionMain .dep2Tit::before{ content: ''; display: block; width: 25px; height: 2px; background: #000; position: absolute; left: 0; top: 0;} .solutionMain .dep3Tit{ font-size: 148px; font-weight: 800; line-height: 1.1; margin:65px 0 25px;} .solutionMain .dep3Tit.kr{ font-weight: 700; line-height: 1.2;} .solutionMain .soltxt{ font-size: 25px; font-weight: 500; padding-bottom: 80px;} .solutionMain .needList{ position: absolute; left: 73.6%; bottom: 182px;} .solutionMain .needList p{ font-size: 20px; font-weight: 500; margin-bottom: 15px;} .solutionMain .needList li{ font-size: 18px; position: relative; padding-left: 14px;} .solutionMain .needList li::before{ content: ''; display: block; width: 6px; height: 6px; background: #000; position: absolute; left: 0; top:11px;} .recruitType.even{ margin: 0;} .recruitType.even ul li{ max-width: calc( 25% - 27px );} .solutionMain .verticalTxt{ font-size: 16px; color:#cdcdcd; position: absolute; right: 0; bottom: 60px;writing-mode: tb-rl; transform: rotate(180deg);} .solutionCon1{ padding-top:222px; position: relative;} .solutionCon1 .txtbox{ font-weight: 500;} .solutionCon1 .txtbox .txt1{ font-size: 60px; letter-spacing: -.5px;} .solutionCon1 .txtbox .txt1 em{ color:#8bc341;} .solutionCon1 .txtbox .txt2{ margin-top: 40px; font-size: 18px;} .solutionCon1 .solCon1Bg{ position: absolute; right: -313px; top: 33px; z-index: -1;} .conBlackTit{ text-align: center; font-size: 55px; font-weight: 700; margin-bottom:80px;} .solutionCon1 .txtbox .txt3{ font-size: 25px; font-weight: 700; margin-bottom: 20px; color:#919191;} .conBlackTit span{ display: block; font-size: 25px; color: #919191; margin-bottom: 14px;} .borderBg{position: absolute; right: 0; bottom: 400px; z-index: -1; touch-action: none; pointer-events: none;} .grayBg{ width: 100%; background-color: #fafafa;} /************* SOLUTION : business *************/ /************* SOLUTION : business *************/ .busi_home_damage{ margin:220px 0 150px; padding:100px 0 165px;} .busi_home_damage.mt200{ margin-top:200px;} .busi_home_damage.mt288{ margin-top:288px;} .busi_home_damage .aimgWrap{ margin-top:100px;} .busi_home_damage .aimgWrap img.pc{ margin-right:-40px;} .busi_home_visual{ margin-bottom: 194px;} .busi_home_visual h1{ font-style: italic; font-size: 120px; line-height:1.1; font-weight: 600; -webkit-text-stroke:1px #cdcdcd; text-align: right; } .busi_home_visual h1 span{ display: block; text-align: left; margin-left: 157px;} .busi_home_visual img{ width:100%; margin:-150px 0 0 6%;} /************* SOLUTION : life & city *************/ /************* SOLUTION : life & city *************/ .lifeCon{ margin-top:361px; padding-top:0 !important;} .lifeCon .lifeConWrap{ margin-bottom: 280px; position: relative; text-align: right;} .lifeCon .lifeConWrap .busiLife{ position: absolute; left: 0; top: 0; z-index: -1} .lifeCon .lifeConWrap .busiLifeBg{ position: absolute; left: -400px; top: -400px; z-index: -1;} .lifeCon .lifeConWrap .txtbox{ display: inline-block; text-align: left;} .lifeCon .lifeConWrap .txtbox .barList li{ position: relative; padding-left: 7px;} .lifeCon .lifeConWrap .txtbox .barList li::before{ content: '-'; position: absolute; left: 0; top: 0;} .lifeCon .lifeConWrap.con2{ text-align: left; padding: 100px 0 0 144px;} .lifeCon .lifeConWrap.con2 .busiLife{ left:auto; right: 0;} .lifeCon .lifeConWrap.con2 .busiLifeBg{ left: auto; right: 100px; top: -250px;} .lifeCon .lifeConWrap .txt2{ font-weight: 400;} .lifeCon .lifeConWrap.con2 .txt2{ color:#3e3e3e;} /************* SOLUTION : aiot5g *************/ /************* SOLUTION : aiot5g *************/ .aiot5gBg{ width: 100%; height: 22vw; position: relative;} .aiot5gBg img{ width: 100%; position: absolute; left: 0; bottom: 0;} /************* SECURITY : monitoring *************/ /************* SECURITY : monitoring *************/ .smartSecurity > div{ margin-bottom:190px; position: relative;} .smartSecurity .careBg{position: absolute; left: 0; bottom: -1500px; z-index: -1;} .smartSecurity .careList{ display: flex; justify-content: center; text-align: center;} .smartSecurity .careList li{ margin: 0 70px;} .smartSecurity .careList li img{} .smartSecurity .careList li .txt1{ font-size: 24px; margin: 46px 0 15px; font-weight: 500;} .smartSecurity .careList li .txt2{ font-size: 17px; color:#3e3e3e; font-weight: 300;} .smartSecurity .careList li .txt2 span{ display: block; color:#626262; margin-bottom: 10px;} .smartSecurity .careList .aiottxtBg{ position: absolute; right: 0; top: -141px;} .conBlackTit .subTit{ font-size: 18px; margin:8px 0 -20px; color: #3e3e3e; font-weight: 400;} .smartSecurity .ss_monitoring .swiper-container{ margin-bottom: 25px;} .smartSecurity .ss_monitoring .swiper-slide img{ max-width: 77%; display: block; margin: 0 auto;} .smartSecurity .ss_monitoring .swiper-button-next, .smartSecurity .ss_monitoring .swiper-button-prev{ width: auto; filter: brightness(0.5); opacity: 1;} .smartSecurity .ss_monitoring .swiper-button-next:hover, .smartSecurity .ss_monitoring .swiper-button-prev:hover{ filter: brightness(1);} .advantagesList{} .advantagesList li{ display: inline-block; width: calc( 33.3333% - 36px ); margin: 0 50px 50px 0; padding: 55px 0 40px 40px; box-sizing: border-box; min-height: 380px; position: relative; overflow: hidden; border-radius: 15px;} .advantagesList li:nth-child(3n){ margin-right: 0;} .advantagesList li .tit{ font-size: 22px; margin-bottom:26px; font-weight: 500;} .advantagesList li .dotList{ font-size: 18px; color:#3e3e3e; font-weight: 300; position: relative; padding-left: 10px; margin-left: 7px; z-index: 1;} .advantagesList li .dotList em{ position: absolute; left: 0; top: 0;} .advantagesList li img{ position: absolute; right: -30px; bottom: 40px;} /************* SECURITY : bluetooth *************/ /************* SECURITY : bluetooth *************/ .solutionCon1.mt73{ margin-top:73px;} .solutionCon1 .txtbox .txt2 a{ text-decoration: underline;} .bluetooth {position: relative;} .bluetooth .btVisualTxt{ position: absolute; right: 50px; top: -100px; font-size: 100px; line-height: 1; font-weight: 800; white-space: nowrap; -webkit-text-stroke-color: #bcbcbc;} .dotlist{ list-style: disc outside; padding-left: 18px;} .btdotlist{ position: absolute; left: 55%; top: 103px;} .wearable{ margin-top:170px;} .btdotlist2{ list-style-position: inside; text-align: center; margin:-50px 0 110px;} .wearable img{ width: 100%;} /************* SOLUTION : consulting *************/ /************* SOLUTION : consulting *************/ .consultingAnchor{ margin:151px 0 70px; overflow:hidden; box-sizing: border-box;} .consultingAnchor .tit{ font-size: 55px; font-weight: 700; float: left;} .consultingAnchor .anchorList{ width: 69.5%; float: right; overflow: hidden;} .consultingAnchor .anchorList li{ width: calc(33.3333% - 19px); height: 165px; margin:0 28px 28px 0; float: left; padding:46px 0 46px 42px; box-sizing: border-box; border-radius: 15px; border: 1px solid #dedede; background: #fff;} .consultingAnchor .anchorList.ani li:hover{ background: url(/images/contents/solAnchorBg.png)no-repeat center center; box-shadow: 15px 12px 20px #eee; border-width: 0;} .consultingAnchor .anchorList li:nth-child(3n){ margin-right: 0;} .consultingAnchor .anchorList li a{ width: 100%; height: 100%; position: relative; padding: 15px 0 0 35px; box-sizing: border-box; cursor: inherit;} .consultingAnchor .anchorList li a em{ font-size: 24px; position: absolute; left: 0; top: 6px; font-weight: 700; font-family: 'noto sans kr';} .consultingAnchor .anchorList li a p{ font-size: 18px;} .sol_consulting{} .sol_consulting > div{ position: relative;} .sol_consulting .container{ padding:50px 0 100px;} .sol_consulting .anchorConWrap{ text-align: center;} .sol_consulting .consultingBg1{ position: absolute; right: 0; bottom: -500px; z-index: -1;} .sol_consulting .consultingBg2{ position: absolute; left: 0; bottom: -500px; z-index: -1;} .sol_consulting .anchorNum{ font-size: 121px; -webkit-text-stroke-color:#8bc341; font-weight: 900;} .sol_consulting .anchorTit{ font-size: 55px; font-weight: 700;margin:-70px 0 30px;} .sol_consulting .anchorTxt1{ font-size: 18px;} .sol_consulting .anchorTxt1 strong{ display: inline-block; margin-bottom: 10px; font-weight: 500;} .sol_consulting .anchorTxt2{ font-size: 18px; margin-top: 20px; color:#626262;} .sol_consulting .solCertList{ width: 100%; margin: 144px 0 100px;} .sol_consulting .solCertList ul{ width: 100%; display: flex; justify-content: space-between;} .sol_consulting .solCertList ul li{ width: 500px; border-radius: 15px; text-align: center; padding-top:60px; box-sizing: border-box; background: #fff; box-shadow: 5px 30px 70px rgba(111, 111, 111, 0.03); transition: .5s ease; margin-right:30px} .sol_consulting .solCertList ul li:last-child{ margin-right: 0;} .sol_consulting .solCertList ul li:hover{ transform:translateY(-70px);} .sol_consulting .solCertList ul li img{ margin-bottom: 21px;} .sol_consulting .solCertList ul li .txt1{ font-size: 22px; font-weight: 500;} .sol_consulting .solCertList ul li .txt2{ font-size: 18px; font-weight: 300; margin:13px 0 50px; color:#626262;} .sol_consulting .isms-p{ margin-bottom: 132px;} .sol_consulting .solGrayTit{ font-size: 28px; font-weight: 700; margin-bottom: 40px; color:#919191;} .greentb{ width: 100%; overflow: hidden; overflow-x: auto; font-size: 18px; text-align: center;} .greentb table{ width: 100%; min-width: 1000px; border-top: 2px solid #8bc341;} .greentb tr > *{border: 1px solid #dedede; border-width: 0 1px; padding: 21px 0; box-sizing: border-box;} .greentb tr > *:first-child{border-left: none; font-weight: 500;} .greentb tr > *:last-child{border-right: none;} .greentb tr > th{ background: #f4f4f4; font-weight: 500;} .greentb tr > td{ border-width: 0 1px 1px;} .sol_consulting .benefitWrap{} .sol_consulting .benefitWrap .benefitSlideWrap{ position: relative; padding: 50px 0 170px;} .sol_consulting .benefitWrap .benefitSlideWrap .snow { position: absolute; left: 85px; top: 50px;} .sol_consulting .benefitWrap .benefitSlideWrap .line { position: absolute; left: 50%; bottom: 0;} .sol_consulting .benefitWrap .benefitSlideWrap .subslide{} .sol_consulting .benefitWrap .benefitSlideWrap .subslide ul{ position: relative;} .sol_consulting .benefitWrap .benefitSlideWrap .subslide ul li{ position: absolute; left: 0; top: 0;} .swiper-container.benefit{ width: 628px; height: 628px;} .swiper-container.benefit .swiper-wrapper{} .swiper-container.benefit .swiper-slide{ background-position: center; background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;} .swiper-container.benefit .swiper-slide.pic1{ background-image: url(/images/contents/benefit1-1.png);} .swiper-container.benefit .swiper-slide.pic2{ background-image: url(/images/contents/benefit1-2.png);} .swiper-container.benefit .swiper-slide.pic3{ background-image: url(/images/contents/benefit1-3.png);} .swiper-container.benefit .swiper-slide.pic4{ background-image: url(/images/contents/benefit1-4.png);} .swiper-container.benefit .swiper-slide.pic5{ background-image: url(/images/contents/benefit1-5.png);} .swiper-container.benefit .swiper-slide.pic6{ background-image: url(/images/contents/benefit1-6.png);} .swiper-container.benefit .swiper-slide.pic7{ background-image: url(/images/contents/benefit1-7.png);} .swiper-container.benefit .swiper-button-prev{ left:-105px;} .swiper-container.benefit .swiper-button-next{ right:-105px;} .sol_consulting .service{ margin: 100px 0 140px;} .sol_consulting .service ul{ display: flex; width: 1270px; max-width: 100%; margin:0 auto; justify-content: space-between; flex-wrap: wrap;} .sol_consulting .service ul li{ width: calc( 50% - 25px); font-size: 22px; font-weight: 500; padding:34px 40px; box-sizing: border-box; border: 1px solid #c5e59b; box-shadow: 5px 30px 70px rgb(111 111 111 / 10%); background: #fff; margin-bottom: 28px; border-radius: 15px;} .sol_consulting .privacyLaw{ margin-bottom: 116px;} .sol_consulting .process .aimgWrap{ margin-top:70px;} .sol_consulting .cloudWrap{ display: flex; margin-top: 100px;} .sol_consulting .cloudWrap > div{ width: 50%;} .sol_consulting .cloudWrap .cloudService{} .sol_consulting .cloudWrap .cloudService ul{ padding-right: 180px; box-sizing: border-box;} .sol_consulting .cloudWrap .cloudService ul li{ padding:34px 40px; box-sizing: border-box; margin-bottom: 28px; font-size: 22px; font-weight: 500; border-radius: 15px; background: #fff;} .sol_consulting .cloudWrap .cloudExample img{ width: 100%;} .sol_consulting .hackingBox{ border: 1px solid #bcbcbc; padding: 50px 50px 0; box-sizing: border-box; margin-top:70px;} .sol_consulting .hackingBox .solGrayTit{ color:#919191;} .sol_consulting .standardWrap{ margin-bottom: 162px;} .sol_consulting .standardWrap .stnadard{ position: relative; overflow:hidden;} .sol_consulting .standardWrap .stnadard img{ position: absolute; left: 0; top: 0;} .sol_consulting .standardWrap .stnadard .greentb{ width: calc( 100% - 650px ); float: right;} .swiper-container.benefit .swiper-slide.pic2-1{ background-image: url(/images/contents/benefit2-1.png);} .swiper-container.benefit .swiper-slide.pic2-2{ background-image: url(/images/contents/benefit2-2.png);} .swiper-container.benefit .swiper-slide.pic2-3{ background-image: url(/images/contents/benefit2-3.png);} .swiper-container.benefit .swiper-slide.pic2-4{ background-image: url(/images/contents/benefit2-4.png);} .swiper-container.benefit .swiper-slide.pic2-5{ background-image: url(/images/contents/benefit2-5.png);} .swiper-container.benefit .swiper-slide.pic2-6{ background-image: url(/images/contents/benefit2-6.png);} .swiper-container.benefit .swiper-slide.pic2-7{ background-image: url(/images/contents/benefit2-7.png);} /************* SOLUTION : ot *************/ /************* SOLUTION : ot *************/ .consulting_ot .solutionCon1 .solCon1Bg{top:230px;} .consulting_ot .otSecurity{ margin-top:391px;} .grayPicBox{ border:1px solid #bcbcbc; padding:46px 92px; box-sizing: border-box;} .consulting_ot .otBenefit { margin: 200px 0 194px;} .consulting_ot .otBenefit .checkList{ display: flex; width: 1055px; max-width: 100%; margin: 0 auto; padding: 45px 69px; justify-content: space-between; border: 1px solid #bcbcbc; border-radius: 60px; box-sizing: border-box;} .consulting_ot .otBenefit .checkList li{ font-size: 20px; font-weight: 500;} .consulting_ot .otBenefit .checkList li::before{content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 10px; background: url(/images/contents/greenCheckBox.png)no-repeat center center / cover; transform: translateY(5px);} .coninfoList{ display: flex; justify-content: space-between; margin: 65px 0 70px;} .coninfoList li{ width: 100%; height: 273px; position: relative; margin-right: 45px; font-size: 22px; font-weight: 500; padding: 40px; box-sizing: border-box; border-radius: 15px; overflow: hidden;} .coninfoList li:last-child{ margin-right: 0;} .coninfoList li p{ position: relative; z-index:1;} .coninfoList li img{ position: absolute; right: -20px; bottom: 20px;} .contactBtn{ width: 300px; height: 80px; margin: 0 auto; line-height: 80px; font-size: 20px; font-weight: 700; color:#8bc341; border-radius: 40px; padding: 0 60px; box-sizing: border-box; position: relative; border:1px solid #8bc341; transition: .3s ease;} .contactBtn img{ position: absolute; right: 60px; top: 50%; transform: translateY(-50%);} .contactBtn:hover{ background: #8bc341; color:#fff;} .contactBtn:hover img{ filter: brightness(0) invert(1);} /************* SOLUTION : security *************/ /************* SOLUTION : security *************/ .consulting_security .solutionMain .verticalTxt{ bottom: -100px;} .consulting_security .consultingAnchor{ margin: 289px 0 218px;} .consulting_security .consultingAnchor .tit{ font-size: 40px;} .consulting_security .consultingAnchor .anchorList li{ border-radius:0;} /*.consulting_security .consultingAnchor .anchorList li:hover{ background: none; box-shadow: none; border-width: 1px;}*/ .consulting_security .otSecurity{ margin-bottom: 200px;} .consulting_security .coninfoList li{ height: 406px;} .coninfoList li span{ display: inline-block; font-weight: 300; margin-top:40px; font-size: 18px; color:#3e3e3e; z-index: 1; position: relative;} .consulting_security .coninfoList{ margin-bottom: 194px;} /************* SOLUTION : column *************/ /************* SOLUTION : column *************/ .columnList{ margin-top:165px;} .columnList .num{ font-size: 16px; position: absolute; right: 54px; bottom: 40px;} /************* PR CENTER *************/ /************* PR CENTER *************/ .prCenter{ margin-bottom: 194px;} .boardTitBg{ width: 100%; position: absolute; left: 0; top: 0;} .boardTit{ padding-top:267px} .boardTit .tit{ font-size: 145px; font-weight: 800; line-height:1.1; margin-bottom: 26px;} .boardTit .tit span{} .boardTit .txt{ font-size: 20px;} .prListWrap{ margin:70px 0 144px;} .prListWrap .searchWrap{ height: 45px; margin-bottom: 30px; text-align: right;} .prListWrap .searchWrap > *{ height: 100%; border: 1px solid #dedede; padding: 0 15px; box-sizing: border-box; color:#919191;} .prListWrap .searchWrap .searchBar{ width: 461px; margin-right: 15px; background: url(/images/contents/search.png)no-repeat right 15px center;} .prListWrap .searchWrap .selectBar{ width: 122px; color:#000;} .prListWrap .prlist{ overflow: hidden; position: relative;} .prListWrap .prlist > a{ display: inline-block; padding-bottom: 55px; position: relative;} .prListWrap .prlist .thumb{ width: 100%; height: 100%; position: relative;} .prListWrap .prlist .thumb::after{ content: ''; display: block; width: 28px; height: 28px; background: url(/images/contents/playBtn.png)no-repeat center center / cover; position: absolute; right: 30px; bottom: 30px;} .prListWrap .prlist .thumb img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover;} .prListWrap .prlist .tit{ width: 100%; font-size: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; position: absolute; left: 0; bottom: 0;} .prListWrap .prlist .tit em{ margin-right: 10px; padding-right: 11px; position: relative;} .prListWrap .prlist .tit em::after{ content: ''; display: block; width: 1px; height: 25px; background: #000; position: absolute; right: 0; top: 5px;} .prListWrap .prlist{} .prListWrap .prlist .sc1{ display: block; width: calc( 61.5% - 56px ); height: 868px; margin-bottom: 85px;} .prListWrap .prlist .sc2{ width: 38.5%; height: 367px; position: absolute; right: 0; top: 0;} .prListWrap .prlist .sc3{ width: 38.5%; height: 367px; position: absolute; right: 0; top: 500px;} .prListWrap .prlist .sc4{ width: 32%; height: 281px;margin-right: 28px; margin-bottom: 250px;} .prListWrap .prlist .sc5{ width: 49%; height: 430px; margin-bottom:250px;} .prListWrap .prlist .sc6{ width: 66%; height: 578px; float: right; margin-bottom: 103px;} .prListWrap .prlist .sc7{ width: 32%; height: 281px; float: left;} .prListWrap .prlist .sc8{ width: 764px; height: 430px; margin: 0 0 100px 34%;} .prListWrap .prlist .sc9{ width: 66%; height: 578px;margin-left:6.5%;} .prListWrap .prlist .sc10{ width: 23.5%; height: 207px; float: right; transform: translateY(369px);} .prPagination{} .prPagination ul{ display: flex; align-items: center; justify-content: center;} .prPagination ul li{ width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%; transition: .5s ease;} .prPagination ul .prev{ margin: 0 30px 0 10px;} .prPagination ul .next{ margin: 0 10px 0 30px;} .prPagination ul .num.active{ background: #8bc341; color:#fff;} /************* RECRUIT *************/ /************* RECRUIT *************/ .recruit{ margin-bottom: 194px;} .recruitType{ margin:70px 0 40px;} .recruitType ul{ overflow: hidden; display: flex;} .recruitType ul li{ font-size: 20px; position: relative; border-bottom: 1px solid #000; padding-bottom: 20px;} .recruitType ul li::before{ content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; background: #000; position: absolute; left: 0; top: 9px;cursor:pointer;} .recruitType ul li.active::before{ background: #8bc341;} .recruitType ul li.active{ border-color: #8bc341;} .recruitType ul li p{ padding: 0 100px 0 27px;} .recruitType ul li.active p{ color:#8bc341;} .recruitList{} .recruitList ul{ overflow: hidden; margin-bottom:50px;} .recruitList ul li{ width: calc( 33.3333% - 127px ); height: 327px; float: left; margin: 0 28px 50px 0; border: 1px solid #dedede; border-radius: 15px; padding: 54px 53px 35px; background: #fff; transition: .5s ease;} .recruitList ul li:hover{ background: linear-gradient(to left top, rgba(239, 235, 140, .3), rgba(168, 246, 130, .3)); box-shadow: 5px 30px 70px rgba(111, 111, 111, 0.13);} .recruitList ul li:nth-child(3n){ margin-right: 0;} .recruitList ul li a{ width: 100%; height: 100%; position: relative;} .recruitList .wrap{} .recruitTypeCon{ display: inline-block; font-size: 15px; border: 1px solid #0e3589; font-weight: 500; padding: 2px 10px; margin-right: 10px; color:#0e3589;} .recruitTypeCon.new{ border-color:#8bc341; color:#8bc341;} .recruitList .wrap .tit{ display: -webkit-box; margin-top: 9px; font-size: 24px; font-weight: 500; text-overflow: ellipsis;-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .recruitList .wrap .period{ position: absolute; left: 0; bottom: 0;} /* recruit_view */ /* recruit_view */ .recruitView{ margin-top: 70px; border-top: 1px solid #000;} .recruitView ul{} .recruitView ul li{ width: 100%; border-bottom: 1px solid #bcbcbc;} .recruitView ul .tit{ height: 127px; line-height: 127px; font-size: 32px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .recruitView ul .info{ font-size: 24px;height: 82px; display: flex; justify-content: space-between;} .recruitView ul .info > div{ position: relative; padding-left:132px; height: 100%; float: left; display: flex; align-items: center;} .recruitView ul .info > div .recruitTypeCon{ margin:0 10px 0 0;} .recruitView ul .info > div span{line-height: 82px; font-weight: 500; position: absolute; left: 0; top: 0;} .recruitView ul .info .type{} .recruitView ul .info .period{} .recruitView ul .info .site{ padding-left: 234px;} .recruitView ul .info .site img{ margin-left: 20px;} .recruitView ul .viewCon{ padding: 50px 0; box-sizing: border-box; font-size: 16px; border-bottom: 1px solid #bcbcbc;} /*.recruitView ul .viewCon p{ height: 100%;}*/ .backBtnType1{ display: block; width: 204px; height: 50px; margin: 50px auto 0; line-height: 50px; font-size: 19px; font-weight: 500; text-align: center; border: 1px solid #8bc341; color:#8bc341; border-radius: 37px;} /************* NEWS *************/ /************* NEWS *************/ .newsBoard{ margin-bottom: -44px;} .newsBoard ul{} .newsBoard ul li{ font-size: 18px; height: 80px; line-height: 80px; border-top: 1px solid #bcbcbc;} .newsBoard ul li:last-child{ border-bottom: 1px solid #bcbcbc;} .newsBoard ul li a{ padding: 0 122px 0 100px; box-sizing: border-box; position: relative;} .newsBoard ul li a .num{ position: absolute; left: 0; top: 0; color: #c4c4c4; font-weight: 500;} .newsBoard ul li a .tit{ width: 100%; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;} .newsBoard ul li a .date{ position: absolute; right: 0; top: 0; font-size: 17px;} /************* EVENT *************/ /************* EVENT *************/ .event{} .eventList{ margin-bottom: -94px;} .eventList ul{ overflow: hidden;} .eventList ul li{ width: calc( 33.3333% - 18.7px); height: 479px; border-radius: 15px; overflow: hidden; margin:0 28px 50px 0; float: left;} .eventList ul li:hover{ background: url(/images/contents/eventListBg.png)no-repeat right bottom; box-shadow: 10px 20px 20px rgb(111 111 111 / 5%);} .eventList ul li:nth-child(3n){ margin-right: 0;} .eventList ul li a{ width: 100%; height: 100%; position: relative;} .eventList ul li .thumb{ width: 100%; height: 52%; position: relative; background:#dedede;} .eventList ul li .thumb img{ width: 100%; height:100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover;} .eventList ul li .txtbox{ height: 48%; padding: 30px 54px 40px; position: relative; box-sizing: border-box; border: 1px solid #dedede; border-width: 0 1px 1px; border-radius: 0 0 15px 15px;} .eventList ul li:hover .txtbox{ border-width: 0;} .eventList ul li .txtbox .tit{ font-size: 24px; font-weight: 500; display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .eventList ul li .txtbox .date{ font-size: 16px; position: absolute;bottom: 40px;} /* event_view */ /* event_view */ .eventView ul .info{ display: block;} .eventView .date{ margin-right: 164px;} .eventView .listprev{ height: 82px; line-height: 82px; padding-left: 134px; position: relative; box-sizing: border-box;} .eventView .listprev .prevtxt1{ position: absolute; left: 0; top: 0; font-size: 24px; font-weight: 500;} .eventView .listprev .prevtxt2{ font-size: 18px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /************* CONTACTUS *************/ /************* CONTACTUS *************/ .contact{} .contact .contactus{ width: 1027px; max-width: 100%; border-radius: 15px; border: 1px solid #eee; margin: 70px auto 194px; background:#fff;padding: 23px 60px 107px; box-sizing: border-box;} .contact .contactus form > div{ margin-bottom:30px; border-bottom: 1px solid #dedede; padding-bottom: 30px;} .contact .contactus .inquiryPart{} .contact .contactus .inquiryPart p{ font-size: 24px; font-weight: 500; margin-bottom: 15px;} .contact .contactus .inquiryPart ul{ overflow: hidden; font-size: 18px;} .contact .contactus .inquiryPart ul li{ float: left; margin-right: 40px;} .sqbox{ position: relative; padding-left: 26px;} .sqbox::before{ content: ''; display: block; width: 16px; height: 16px; position: absolute; left: 0; top: 6px; border:2px solid #000; box-sizing: border-box;} input:checked + .sqbox::before{ border-width: 4px;} .contact .contactus .entryPart{} .contact .contactus .entryPart ul{ overflow: hidden;} .contact .contactus .entryPart ul li{ width: calc(50% - 15px); float: left;} .contact .contactus .entryPart li p{ font-size: 24px; font-weight: 500; margin-bottom: 15px;} .contact .contactus .entryPart li input, .contact .contactus .entryPart ul .contents textarea{ width: 100%; height: 60px; padding:0 30px; background:#f5f5f5; font-size: 15px; box-sizing: border-box;} .contact .contactus .entryPart ul .name{ float:left; margin-right: 30px;} .contact .contactus .entryPart ul .contents{ width: 100%; margin-top:30px;} .contact .contactus .entryPart ul .contents textarea{ height: 289px; padding: 20px 30px;} .contact .contactus .privacyPart{margin-bottom: 0; padding-bottom: 0; border:none;} .contact .contactus .privacyPart .tit{ font-size: 24px; font-weight: 500; margin-bottom: 15px;} .contact .contactus .privacyPart .txtbox{ width: 100%; height: 257px; border: 1px solid #dedede; padding:23px;box-sizing: border-box;} .contact .contactus .privacyPart .txtbox .txt{ width: 100%; height: 100%; font-size: 17px;overflow: hidden; overflow-y: auto;} .contact .contactus .privacyPart .txtbox .txt ul{} .contact .contactus .privacyPart .txtbox .txt ul li{ margin-bottom: 20px;} .contact .contactus .privacyPart .txtbox .txt ul li span{ display: inline-block; font-weight: 500; margin-bottom: 6px;} .contact .contactus .privacyPart .txtbox .txt ul li p{ margin-left: 20px;} .contact .contactus .privacyCheck{ display: block; margin:30px 0 20px; font-size: 18px;} .privacyCheck.sqbox::before{ top:5px;} .contact .contactus .privacyPart .caution{ font-size: 15px; color:#666;} .contact .contactus .privacyPart .caution sub{ font-size: 22px; line-height: 1;} .contact .contactus .okBtn{ display: block; width: 242px; height: 90px; line-height: 90px; background:#8bc341; border-radius: 45px; margin:50px auto 0; color:#fff; font-size: 25px; font-weight: 700; text-align: center;} /*.contactBg{ width: 100%; height: 0; position: relative;}*/ .contactBg img{ position: absolute; right: 0; bottom: -100px; touch-action: none; pointer-events: none;} /************* DOWNLOAD *************/ /************* DOWNLOAD *************/ .downList{ padding: 70px 0 194px;} .downList a{ display: inline-block; width: calc( 33.3333% - 22px); margin-right: 28px; border: 1px solid #eee; border-radius: 15px; padding:36px 54px; font-size: 24px; font-weight: 500; position: relative; box-sizing: border-box; box-shadow: 5px 30px 30px rgb(111 111 111 / 10%);} .downList a:nth-child(3n){ margin-right: 0;} .downList a .downCon{ margin-bottom: 42px;} .downList a p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .downList a p img{ margin-right: 11px; transform:translateY(7px);} @media ( max-width:1170px){ .solutionMain .needList{ left: 790px; bottom: 236px;} } @media ( min-width:1025px){ .bluetooth .conBlackTit.fl{ text-align: left;} .solutionCon1.pt164{ padding-top: 164px;} .solutionCon1.pt335{ padding-top: 335px;} .solutionCon1.pt268{ padding-top: 268px;} .solutionCon1 .solcon1_typo.t352{ top:352px;} .solutionCon1 .solCon1Bg.t140{ top:140px;} .solutionCon1 .solcon1_typo.t250{ top:250px;} .busi_home_damage.mt298{ margin: 288px 0 0; padding-bottom: 100px;} .busi_home_damage.mb255{ padding-bottom: 255px;} #wrap .recruit_main {width: 100%;} .hrtxtBox{position: absolute; left: 177px; bottom: 370px;} .solutionMain .recruitType ul li p{ padding-right:80px;} } @media ( max-width:1748px){ .container.atear.service {margin: 51px auto 70px;} .container.atear.service .atearTxt {font-size:34px;} .container.atear.service .qstxt {font-size:100px;} } @media ( max-width:1510px){ .container.atear.service {margin: 51px auto 70px;} .container.atear.service .atearTxt {font-size:34px;} .container.service_con1 > ul li strong {margin-bottom:30px; font-size:24px;} .container.service_con3 .element_box {padding: 30px;} .container.service_con3 .element_box > ul li {padding-right: px; font-size: 16px;} .container.service_con3 {padding: 70px 0 20px;} .container.service_con3 .tit_box .tit {font-size: 24px;} .container.service_con3 .tit_box .desc {font-size:16px;} .container.service_con3 .tit_box {margin-bottom: 30px;} .container.service_con3 .element_box > ul {justify-content: space-evenly;} .container.service_con3 .element_tit, .container.service_con3 .characteristic_tit {font-size:18px;} /* .container.service_con3 .element_box {padding: 12px 0 12px;} .container.service_con3 .element_box > ul {display: block;} .container.service_con3 .element_box > ul li {font-size:16px; padding: 8px 0; text-align: center;} .container.service_con3 .element_box > ul li::after {top: unset; transform:unset; bottom: -4px; width: 100%; height: 1px;} .container.service_con3 .element_box > ul li:last-child::after {content: bolck;} */ .container.service_con3 .characteristic_box .characteristic_list {display: flex;} .container.service_con3 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 28px; margin-bottom: 20px; box-sizing: border-box;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box {position: unset;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box img {width: 74px; height: 74px;} .container.service_con3 .characteristic_box .characteristic_list > li .tit {padding-bottom: 18px; font-size: 20px; padding-top: 30px} .container.service_con4 .tit_box .tit {font-size: 24px;} .container.service_con4 .tit_box .desc {font-size:16px;} .container.service_con4 .video_wrap p {font-size:22px;padding-top: 10px;} .container.service_con4 .video_wrap {padding: 20px;} .container.service_con4::after {height: 82%;} .container.service_con4 .img_wrap img.m {width:100%;} .container.service_con4 .characteristic_box .characteristic_list {display: flex;} .container.service_con4 .characteristic_box .characteristic_list > li .tit {padding-bottom: 50px;} .container.service_con4 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 28px; margin-bottom: 20px; box-sizing: border-box;} .container.service_con4 .characteristic_box .characteristic_list > li .icon_box {position: unset;} .container.service_con4 .characteristic_box .characteristic_list > li .icon_box img {width: 74px; height: 74px;} } @media ( max-width:1024px){ /************* products *************/ /************* products *************/ .productsMain .productsBg{ width: 200%; right: 50%; transform: translateX(50%);} .productsMain{ padding-top:143px;} .productsMain .dep1{ font-size: 14px;} .productsMain .dep1::before{ width: 18px; margin-bottom: 8px;} .productsMain .tit{ font-size: 12vw; margin:43px 0 40px;} .productsMain .txt2{ position: static; margin-top: 50px;} .productsMain .txt2 p{ font-size: 15px; margin-bottom: 10px;} .productsMain .txt2 ul li{ font-size: 14px; padding-left:14px;} .productsMain .txt2 ul li::before{ width: 4px; height: 4px; top:9px} .container.atear{ margin:51px auto 70px;} .container.atear .atear1{ display: block; position: static; margin: 0 auto 17px; width: 90%;} .atearBg{ width: 150%; top: 0; right: -140px; bottom: auto;} .container.atear span{ font-size: 18px;} .container.atear .atearTxt{ margin-bottom:30px; font-size: 24px;} .container.atear ul li{ font-size: 16px; margin-bottom: 5px; line-height: 1.5;} .container.atear ul li .num{ top:4px;} .grayTit{ font-size: 18px; margin-bottom: 20px;} .container.skill .tit{ font-size: 18px; margin-bottom: 20px;} .container.skill ul li{ width: 100%; height: 290px; padding: 29px; float: none;} .container.skill ul li .wrap img{ width: 74px;} .container.skill ul li .wrap .txtbox .txt2{ font-size: 16px;} .container.skill ul li .wrap .txtbox .txt2 br{ display: none;} .features{ margin: 70px auto; height: auto;} .features .txtbox{ width: 100%; position: static; float: none;} .features .txtbox .tit{font-size: 24px; margin-bottom: 30px; text-align: center;} .features .featuresVisual{ width: 100%; height: 211px; float: none; padding:15px 20px; margin-bottom: 60px;} .features .featuresVisual .imgWrap{background-size: contain;} .features .txtbox ul li{ padding: 0 0 20px 0; margin-bottom: 30px;} .features .txtbox ul li::before{display: none;} .features .txtbox ul li::after{ width: 100%;} .features .txtbox ul li .subject{ width: 100%; position: static; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #8bc341;} .lineUp { padding-bottom: 0; margin-bottom: 100px;} .lineUp .txtbox{ position: relative; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;} .lineUp .txtbox.pro{ padding-bottom: 80px;} .lineUp .txtbox p{font-size: 16px;} .lineUp .txtbox.pro .arrow { left: 69px; top: auto; bottom: 0;} .ataerWrap .aimgWrap{ margin: 0 !important;} .lineUp .txtbox.mobile{margin-top: 80px;} .lineUp .txtbox.mobile .arrow { right: auto; top: -64px; transform: rotate(-100deg); height: 34px; left: 21px;} .tryAtear .tryAtearList{ display: block;} .tryAtear .tryAtearList > li{ padding: 25px; margin-bottom: 30px;} .tryAtear .tryAtearList .inner span{ font-size: 20px;} .tryAtear .tryAtearList .inner p{ font-size: 14px; margin: 17px 0 48px;} .tryAtear .tryAtearList .inner ul{ height: auto; margin-bottom: 0;} .tryAtear .tryAtearList .inner ul li{ font-size: 16px; margin-top: 8px; padding-left: 27px;} .tryAtear .tryAtearList .inner ul li::before{ width: 17px; height: 17px; top: 5px;} .tryAtear .tryAtearList .inner a{ height: 36px; line-height: 36px; margin-top:40px; position: static; font-size: 16px; border-width: 1px;} /* iotcare */ .iotGrayTit{ font-size: 18px;} .iotcareNeed{ margin:70px auto 90px;} .iotNeedList li{ display: block; width: 100%; height: auto; margin:0 0 15px 0; padding: 25px;} .iotNeedList li span{ width: auto; margin-right: 0; margin-bottom: 15px; padding-bottom: 10px;} .iotNeedList li span::after{ width: 20px; height: 1px; right: auto; left: 0; top: auto; bottom: 0; transform: none;} .container.skill.iotcare ul li{ height: auto;} .container.skill.iotcare ul li .wrap .txtbox{ position: static; margin: 44px 0 18px;} .features.iotcare .featuresVisual{ padding: 0; margin-bottom: 40px; height: 76vw; width: calc( 100% + 40px ); margin-left: -20px; background-size: cover;} .features.iotcare{ height: auto;} .features .txtbox ul .explain{ font-size: 14px;} .iotcareSystem{margin-bottom:90px;} .iotcareSystem.m-144{ margin-top: 0;} .iotcareSystem .grayImgBox{padding:0; bordeR:none;} /* iotcare - air */ .container.atear.iotcareair{margin-top: 50px;} .contactBtn.air{margin-top:0px;} .features.iotcareair .txtbox ul li .subject span{ display: inline-block; margin-left: 10px;} .features.iotcareair .txtbox ul .explain{ font-size: 18px;} /* Quantum Service */ .service_bg.m {position: absolute; right: 4%; top:5%; z-index:-1;} .container.atear.service .atearTxt {font-size:24px;} .container.atear.service .qstxt {font-size: 44px; bottom: -120px; right: auto; left: 0; width: auto;} .container.service_con1 {padding-top: 50px;} .container.service_con1 > ul {display: block;} .container.service_con1 > ul li {width:100%; margin-right: unset; padding: 30px; margin-bottom: 26px;} .container.service_con1 > ul li:last-child .container.service_con1 > ul li strong {font-size:24px; margin-bottom: 30px;} .container.service_con1 > ul li .text_box .tit {font-size: 20px;} .container.service_con1 > ul li .text_box .desc {font-size:16px;} .container.service_con1 > ul li .text_box .desc br {display: none;} .container.service_con2 {padding-top: 0;} .container.service_con3 .characteristic_box .characteristic_list {display: block;} .container.service_con3 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 0; margin-bottom: 20px; box-sizing: border-box;} .container.service_con3 .element_box {padding: 12px 0 12px;} .container.service_con3 .element_box > ul {display: block;} .container.service_con3 .element_box > ul li {font-size:16px; padding: 9px 0; text-align: center;} .container.service_con3 .element_box > ul li::after {top: unset; transform:unset; bottom: -4px; width: 100%; height: 1px;} .container.service_con3 .element_box > ul li:last-child::after {content: bolck;} .container.service_con3 .tit_box .desc br {display: none;} .container.service_con3 .characteristic_box {margin-top: 20px;} .container.service_con3 .characteristic_box .characteristic_list > li .desc_list li br {display: none;} .container.service_con4 .characteristic_box .characteristic_list {display: block;} .container.service_con4 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 0; margin-bottom: 20px; box-sizing: border-box;} /* .container.service_con3 {padding: 70px 0 20px;} .container.service_con3 .tit_box .tit {font-size: 24px;} .container.service_con3 .tit_box .desc {font-size:16px;} .container.service_con3 .tit_box {margin-bottom: 30px;} .container.service_con3 .element_tit, .container.service_con3 .characteristic_tit {font-size:16px;} .container.service_con3 .element_box {padding: 12px 0 12px;} .container.service_con3 .element_box > ul {display: block;} .container.service_con3 .element_box > ul li {font-size:16px; padding: 8px 0; text-align: center;} .container.service_con3 .element_box > ul li::after {top: unset; transform:unset; bottom: -4px; width: 100%; height: 1px;} .container.service_con3 .element_box > ul li:last-child::after {content: bolck;} .container.service_con3 .characteristic_box .characteristic_list {display: block;} .container.service_con3 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 0; margin-bottom: 20px; box-sizing: border-box;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box {position: unset;} .container.service_con3 .characteristic_box .characteristic_list > li .icon_box img {width: 74px; height: 74px;} .container.service_con3 .characteristic_box .characteristic_list > li .tit {padding-bottom: 18px; font-size: 20px; padding-top: 30px} */ /* .container.service_con4 .tit_box .tit {font-size: 24px;} .container.service_con4 .tit_box .desc {font-size:16px;} .container.service_con4 .video_wrap p {font-size:22px;padding-top: 10px;} .container.service_con4 .video_wrap {padding: 20px;} .container.service_con4::after {height: 82%;} .container.service_con4 .img_wrap img.m {width:100%;} .container.service_con4 .characteristic_box .characteristic_list {display: block;} .container.service_con4 .characteristic_box .characteristic_list > li {position: unset; width: 100%; padding: 30px; margin-right: 0; margin-bottom: 20px; box-sizing: border-box;} .container.service_con4 .characteristic_box .characteristic_list > li .icon_box {position: unset;} .container.service_con4 .characteristic_box .characteristic_list > li .icon_box img {width: 74px; height: 74px;} */ .container.service_con6 {padding: 0 0 90px;} .container.service_con4 .characteristic_box .characteristic_list > li .tit {padding-bottom: 18px; font-size: 20px; padding-top: 30px} .container.service_con6 p {font-size:24px; margin-top:50px; margin-bottom: 20px} .container.service_con6 .img_wrap img.m {width:100%;} /************* SOLUTION *************/ /************* SOLUTION *************/ /************* SOLUTION *************/ .solutionBg{width: 80%; top: 88px;} .solutionMain{ padding-top:143px;} .solutionMain .dep2Tit{ font-size: 14px; padding-top:10px;} .solutionMain .dep2Tit::before{ width: 18px;} .solutionMain .dep3Tit{ font-size: 40px; margin:33px 0 40px;} .solutionMain .soltxt{padding-bottom: 50px;} .solutionMain .needList{ position: static; margin-bottom: 50px;} .solutionMain .needList p{ font-size: 15px; margin-bottom: 10px;} .solutionMain .needList li{ font-size: 14px;} .solutionMain .needList li::before{ width: 4px; height: 4px; top: 9px;} .recruitType.even ul{ display: block;} .recruitType.even ul li{ width: calc( 50% - 8px ); max-width: none; margin-bottom: 20px; float:left;} .recruitType.even ul li:nth-child(2n){ margin-right: 0;} .recruitType.even ul li:last-child, .recruitType.even ul li:nth-last-child(2){ margin-bottom: 0;} .solutionCon1{ padding-top:70px} .solutionCon1 .solCon1Bg{ top:0;} .solutionCon1 .txtbox .txt1{ font-size: 24px;} .solutionCon1 .txtbox .txt2{ margin-top:30px; font-size: 16px;} .solutionCon1 .solCon1Bg{ display: none;} .solutionCon1 .solCon1Bg_m{ width: 75%; margin:40px auto 0;} .solutionCon1 .solCon1BgBg_m{ position: absolute; right: -20px; bottom: -250px; z-index: -1;} /************* SOLUTION : business *************/ /************* SOLUTION : business *************/ .busi_home_damage{ margin:70px 0 27px; padding:30px 0 0;} .busi_home_damage.mt288{ margin-top:0;} .busi_home_damage.mt200{ margin-top:70px;} .busi_home_damage .aimgWrap{ margin-top:30px;} .busi_home_visual{ margin-bottom: 90px;} .busi_home_visual h1{ font-size: 7.5vw;} .busi_home_visual h1 span{ margin-left: 0;} .busi_home_visual img{ width:100%; margin:-9vw 0 0 0;} /************* SOLUTION : inustry *************/ /************* SOLUTION : inustry *************/ .inustry_skill{ margin-bottom: 0 !important;} .inustry_skil .aimgWrap img.m{ width: calc( 100% - 40px ); margin: 0 auto;} /************* SOLUTION : life & city *************/ /************* SOLUTION : life & city *************/ .lifeCon{ margin-top: 162px;} .lifeCon .lifeConWrap{margin-bottom: 100px; text-align: left;} .lifeCon .lifeConWrap .busiLife{ display: block; position: static; width: 82%; margin: 0 auto 63px;} .lifeCon .lifeConWrap.con2{ padding: 0;} .lifeCon .lifeConWrap .busiLifeBg { left: -55% !important; top: -43%; width: 150% !important; opacity: .5;} .lifeCon .lifeConWrap.con2 .busiLifeBg{ right: auto; top: -25%;} /************* SOLUTION : aiot5g *************/ /************* SOLUTION : aiot5g *************/ .aiot5gBg{ height: auto;} .aiot5gBg img{ position: static; margin-bottom: -20vw;} /************* SECURITY : monitoring *************/ /************* SECURITY : monitoring *************/ .smartSecurity > div{ margin-bottom: 250px;} .smartSecurity .careList{ display: block; padding: 0 20px; box-sizing: border-box;} .smartSecurity .careList li{ margin:50px 0 0;} .smartSecurity .careList li .txt1{ margin:30px 0 20px; font-size: 20px;} .smartSecurity .careList li .txt2{ font-size: 16px;} .conBlackTit .subTit{ margin: 30px 0 0; font-size: 16px;} .advantagesList li{ width: 100%; padding: 29px; min-height: auto; margin: 0 0 20px 0;} .advantagesList li .tit{font-size: 20px; margin-bottom: 10px;} .advantagesList li .dotList{ font-size: 16px; margin: 0; padding-left: 5px;} .advantagesList li img { right: -35px; bottom: -35px; transform: scale(.5);} /************* SECURITY : bluetooth *************/ /************* SECURITY : bluetooth *************/ .solutionCon1.mt73{ margin-top:0;} .wearable{ margin-top: 70px; padding-bottom: 90px;} .btdotlist{ position: static;} .btdotlist2{ list-style-position: outside; margin:0 0 30px; text-align: left;} /************* SOLUTION : consulting *************/ /************* SOLUTION : consulting *************/ .consultingAnchor{ margin:70px 0;} .consultingAnchor .tit{ float: none; font-size: 24px; margin-bottom: 24px;} .consultingAnchor .anchorList{ width: 100%; float: none;} .consultingAnchor .anchorList li{ width: calc(50% - 4px); height: 156px; margin: 0 8px 8px 0 !important; padding:15px; border-radius: 0;} .consultingAnchor .anchorList li:nth-child(even){ margin: 0 0 8px 0 !important;} .consultingAnchor .anchorList li a{ padding:9px 0 0 24px;} .consultingAnchor .anchorList li a em{ font-size: 24px;} .consultingAnchor .anchorList li a p{ font-size: 16px;} .sol_consulting .container{ padding:0 0 90px;} .sol_consulting .anchorNum{ font-size: 70px;} .sol_consulting .anchorTit{ font-size: 24px; margin: -38px 0 20px;} .sol_consulting .anchorTxt1{ font-size: 16px;} .sol_consulting .anchorTxt2{ font-size: 14px;} .sol_consulting .solCertList{ margin:50px 0 70px;} .sol_consulting .solCertList ul{ display: block;} .sol_consulting .solCertList ul li{ width: 100%; padding:30px 15px 38px; margin-right: 0; margin-bottom: 30px;} .sol_consulting .solCertList ul li:hover{transform:none;} .sol_consulting .solCertList ul li img{ margin-bottom: 10px; height: 80px;} .sol_consulting .solCertList ul li .txt1{ font-size: 20px;} .sol_consulting .solCertList ul li .txt2{ font-size: 16px; margin-bottom: 0;} .sol_consulting .solGrayTit{ font-size: 18px; margin-bottom: 26px;} .greentb{ font-size: 16px;} .sol_consulting .isms-p{ margin-bottom: 70px;} .sol_consulting .benefitWrap .benefitSlideWrap{ padding:0;} .swiper-container.benefit { width: 65%; height: 59vw;} .swiper-container.benefit .swiper-button-prev{left: -56px;} .swiper-container.benefit .swiper-button-next{right:-56px;} .sol_consulting .service{ margin: 70px 0;} .sol_consulting .service ul li{ width: 100%; font-size: 16px; padding:14px 0; margin-bottom:15px; font-size: 16px; text-align: center;} .sol_consulting .privacyLaw{ margin-bottom: 70px;} .sol_consulting .process .aimgWrap{ margin-top:0; margin-bottom: -50px;} .sol_consulting .cloudWrap{ display:block; margin-top:70px;} .sol_consulting .cloudWrap > div{ width: 100%;} .sol_consulting .cloudWrap .cloudService{margin-bottom: 70px;} .sol_consulting .cloudWrap .cloudService ul{ padding-right: 0;} .sol_consulting .cloudWrap .cloudService ul li{ padding:14px 0; text-align: center; margin-bottom: 15px; font-size: 16px;} .sol_consulting .cloudWrap .cloudExample img{ width: auto;} .sol_consulting .hackingBox{ padding: 0;border: none; margin-top:0} .sol_consulting .hackingBox .aimgWrap{ text-align: left; } .sol_consulting .hackingBox .solGrayTit{margin-bottom: 0;} .sol_consulting .hackingBox.p50{ padding-top:50px;} .sol_consulting .hackingBox.p50 .solGrayTit { margin-bottom:26px;} .sol_consulting .standardWrap{ margin-bottom:70px;} .sol_consulting .standardWrap .stnadard img { position: static; width: 75%; margin: 0 auto 30px; display: block;} .sol_consulting .standardWrap .stnadard .greentb { width: 100%; float: none;} /************* SOLUTION : ot *************/ /************* SOLUTION : ot *************/ .consulting_ot .otSecurity{ margin-top: 70px;} .consulting_ot .solutionCon1 .solCon1Bg{ display: none;} .conBlackTit{ font-size: 24px; margin-bottom: 30px;} .grayPicBox{ padding: 9px 18px;} .consulting_ot .otBenefit{ margin: 70px 0 90px;} .consulting_ot .otBenefit .checkList{ display: block; padding: 30px 0 30px 61px; border-radius: 15px;} .consulting_ot .otBenefit .checkList li{ font-size: 18px; margin-bottom: 13px;} .consulting_ot .otBenefit .checkList li:last-child{ margin-bottom:0;} .coninfoList{ display: block; margin: 30px 0 40px;} .coninfoList li{ height: 163px; margin-bottom: 20px; font-size: 16px; padding: 29px; margin-right: 0;} .coninfoList li img { right: auto; left: calc( 100% - 98px ); bottom: -39px; transform: scale(.9);} .contactBtn{ width: 238px; height: 56px; font-size: 16px; padding: 0 43px; border-radius: 28px; line-height: 56px; margin-top:20px;} .contactBtn img{ right: 43px;} /************* SOLUTION : security *************/ /************* SOLUTION : security *************/ .solutionCon1 .txtbox .txt3{ font-size: 18px;} .conBlackTit span{ font-size: 18px; margin-bottom: 5px;} .consulting_security .otSecurity{margin-bottom: 0;} .consulting_security .solutionCon1 .solCon1Bg{ display: none;} .consulting_security .consultingAnchor{ margin:70px 0;} .consulting_security .consultingAnchor .tit { font-size: 24px; text-align: center;} .consulting_security .consultingAnchor .anchorList li{ width: 100%; height: auto; margin: 0 0 20px 0 !important;} .consulting_security .grayPicBox{ padding: 0; border: none;} .consulting_security .grayPicBox .aimgWrap img.m{margin-right: -20px;} .consulting_security .coninfoList li{ height: auto;} .consulting_security .coninfoList li p{ font-size: 20px;} .consulting_security .coninfoList li span{ font-size: 16px; margin-top:10px;} .consulting_security .coninfoList li img{ right: -47px; left: auto; bottom: 0; transform: scale(.6);} .consulting_security .coninfoList{ margin-bottom: 90px;} /************* SOLUTION : column *************/ /************* SOLUTION : column *************/ .columnList{ margin-top:0;} .columnList .num{ font-size: 14px; right: 15px; bottom: 25px;} /************* PR CENTER *************/ /************* PR CENTER *************/ .boardTitBg{ width: auto;} .prCenter{ margin-bottom: 90px;} .boardTit{padding-top:142px;} .boardTit .tit{ font-size: 50px;} .boardTit .txt{ font-size: 14px;} .prListWrap{ margin:70px 0 30px;} .prListWrap .searchWrap{ height:35px; font-size: 14px;} .prListWrap .searchWrap > *{ padding:0 4px;} .prListWrap .searchWrap .searchBar{ width: calc(69% - 15px); float: left; background-position: right 7px center;} .prListWrap .searchWrap .selectBar { width: 31%;} .prListWrap .prlist{ margin: 0 !important;} .prListWrap .prlist *{} .prListWrap .prlist{} .prListWrap .prlist a{ display: block; position: static !important; transform:none !important; width: 100% !important; padding-bottom: 40px; float: none !important; height: auto !important; margin:0 !important;} .prListWrap .prlist .thumb::after{ width: 20px; height: 20px; right: 20px; bottom: 20px;} .prListWrap .prlist .thumb img{ position: static;} .prListWrap .prlist .tit{ font-size: 18px; position: static; margin-top: 15px !important;} .prListWrap .prlist .tit em::after{ height: 14px; top: 7px; } .prPagination ul li{ width: 33px; height: 33px; line-height: 33px; font-size: 10px;} .prPagination ul li img{ width: 100%; height: 100%; object-fit: cover;} .prPagination ul .prev{ margin: 0 20px 0 6px;} .prPagination ul .next{ margin: 0 6px 0 20px;} /************* RECRUIT *************/ /************* RECRUIT *************/ .recruit{ margin-bottom: 90px;} .recruitType{margin:60px 0 57px;} .recruitType ul{ justify-content: space-between;} .recruitType ul li{ width: 100%; padding-top:23px; font-size: 14px; margin-right: 16px; border: none;} .recruitType ul li::before{ width: 10px; height: 10px;} .recruitType ul li:last-child{ margin-right: 0;} .recruitType ul li p{ border-top: 1px solid #000; padding:12px 0 0 0; margin-top: 13px; font-size: 13px;} .recruitList ul{ margin-bottom: 40px;} .recruitList ul li{ width: 100%; float: none; margin:0 0 30px 0; box-sizing: border-box; height: 209px; padding:28px 25px 27px;} .recruitTypeCon{ font-size: 12px; padding:0 7px; margin-right: 0;} .recruitList .wrap .tit{ font-size: 18px;} .recruitList .wrap .period{ font-size: 14px;} /* recruit_view */ /* recruit_view */ .recruitView{ margin-top:60px} .recruitView ul .tit{ height: 78px; line-height: 78px; font-size: 18px;} .recruitView ul .info{ font-size: 13px; display: block; height: 86px;} .recruitView ul .info > div{ width: 50%; height: 50%; padding-left: 0 !important; box-sizing: border-box;} .recruitView ul .info .site{ width: 100%;} .recruitView ul .info > div span{ display: inline-block; position: static; margin-right: 15px; line-height: 43px;} .recruitView ul .info .site img{ max-height: 12px; margin-left: 0; margin-right:21px;} .recruitView ul .viewCon{ font-size: 14px; padding:40px 0;} .recruitView ul .viewCon img{ max-width: 100%;} .backBtnType1{ margin:35px auto 0; font-size: 16px; width: 156px; height: 33px; line-height: 33px; border-radius: 16.5px;} /************* NEWS *************/ /************* NEWS *************/ .newsBoard{ margin-bottom:70px;} .newsBoard ul li{ height: 65px; line-height: 65px; font-size: 16px;} .newsBoard ul li a{ padding: 0 0 0 50px;} /************* EVENT *************/ /************* EVENT *************/ .eventList{ margin-bottom: 0;} .eventList ul li{ width: 100%; float: none; max-height: 500px; height: 92vw; margin:0 0 30px;} .eventList ul li .txtbox{ padding:25px 15px 0;} .eventList ul li .txtbox .tit{ font-size: 18px; -webkit-line-clamp:2;} .eventList ul li .txtbox .date{ font-size: 14px; bottom:25px;} /* event_view */ /* event_view */ .eventView .date{ margin-right: 0;} .eventView ul .info{ height: 43px;} .eventView ul .info > div{ height: 100%;} .eventView .listprev{ height: 40px; line-height: 40px; padding-left: 60px;} .eventView .listprev .prevtxt1{font-size: 14px;} .eventView .listprev .prevtxt2{ font-size: 14px;} /************* CONTACTUS *************/ /************* CONTACTUS *************/ .contact .contactus{ margin:60px auto 90px; padding: 50px 25px 73px;} .contact .contactus form > div{margin-bottom: 35px; padding-bottom: 0; border: none;} .contact .contactus .inquiryPart p{ font-size: 16px; margin-bottom: 10px;} .contact .contactus .inquiryPart ul{ font-size: 14px;} .contact .contactus .inquiryPart ul li{ margin-right: 0; width: 50%; margin-top: 15px;} .sqbox{ padding-left: 20px;} .sqbox::before{ width: 13px; height: 13px; top: 4px;} .contact .contactus .entryPart ul li{ width: 100%; margin-bottom: 30px;} .contact .contactus .entryPart ul .name{ margin-right: 0; float: none;} .contact .contactus .entryPart li p{ font-size: 16px; margin-bottom: 10px;} .contact .contactus .entryPart li input, .contact .contactus .entryPart ul .contents textarea{ height: 46px; padding:0 10px;} .contact .contactus .entryPart ul .contents{ margin-top:0;} .contact .contactus .entryPart ul .contents textarea{ padding:10px; height: 327px;} .contact .contactus .privacyPart .tit{ font-size: 16px; margin-bottom: 10px;} .contact .contactus .privacyPart .txtbox{ padding:25px 10px;} .contact .contactus .privacyPart .txtbox .txt{ font-size: 14px;} .contact .contactus .privacyPart .txtbox .txt ul li span{ margin-bottom: 10px;} .contact .contactus .privacyPart .txtbox .txt ul li p{margin-left: 16px; font-weight: 300;} .contact .contactus .privacyCheck{ margin:26px 0 20px; font-size: 16px;} .privacyCheck.sqbox::before{ top:7px;} .contact .contactus .privacyPart .caution{ font-size: 12px;} .contact .contactus .okBtn{ width: 209px; height: 45px; line-height: 45px; font-size: 16px; margin:40px auto 0;} /************* DOWNLOAD *************/ /************* DOWNLOAD *************/ .downList{ padding: 60px 0 90px;} .downList a{ width: 100%; margin-right: 0;padding:25px 19px; font-size: 18px; margin-bottom: 30px;} .downList a .downCon{ width: 54px; margin-bottom: 50px;} .downList a p img{ width: 14px; transform:translateY(7px);} } /*@media (max-width:767px){ .solutionCon1 .solCon1Bg{ display: none;} .solutionCon1 .solCon1Bg_m{ width: 75%; margin:40px auto 0;} .solutionCon1 .solCon1BgBg_m{ position: absolute; right: -20px; bottom: -250px; z-index: -1;} }*/ /**** circleLogo *****/ #wrap .recruit_main > .title{ padding-bottom: 0 !important;} .hrSildeSB{ width: 100%; overflow: hidden; margin-bottom: 200px; position: relative; margin-top: -150px;} .hrSildeSB .leftSlideWrap{ width: 1003px; max-width: 100%; height: 778px; background: #f6f6f6; float: right; margin-top:100px;} .hrSildeSB .leftSlideWrap .hrhrSlide{} .hrSildeSB .leftSlideWrap .greenSnow{ position: absolute ; right: 100px; top:0px;} .hrSildeSB .leftSlideWrap .hrhrSlide li img{ width: 100%; height: 100%; object-fit: cover;} .hrSildeSB .leftSlideWrap .hrhrSlide li.active{ position: absolute; right: 50px; bottom: 83px; width: 787px; height: 602px;} .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(2), .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(3){ position: absolute; width: 105px; height: 105px;bottom: 0;} .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(2){ right: 916px;} .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(3){ right: 1036px;} .hrSildeSB .leftSlideWrap .hrtxtBox{ position: absolute; left:251px; bottom: 150px;} .hrSildeSB .leftSlideWrap .hrtxtBox .tit{ font-size: 24px; color:#fca239; font-weight: 500; margin-bottom: 30px;} .hrSildeSB .leftSlideWrap .hrtxtBox .barList{font-size: 17px;} .hrSildeSB .leftSlideWrap .hrtxtBox2{ position: absolute; left: 182px; top: 250px; font-size: 40px;} .hrSildeSB .leftSlideWrap .hrtxtBox2 span{ color:#8bc341; font-weight: 700;} .contactBtn.hr{ margin-top:71px;} @media ( min-width:1921px){ .hrSildeSB .leftSlideWrap .hrtxtBox2{ left:492px;} .hrSildeSB .leftSlideWrap .hrtxtBox{ left:560px;} } @media ( max-width:1024px){ #wrap .recruit_main > .title.stroke{ position: relative; z-index:10;} .hrSildeSB{ margin-top:-23px; margin-bottom: 45px;} .hrSildeSB .leftSlideWrap{ padding:65px 20px; margin-top: 23px; box-sizing: border-box; height: auto;} .hrSildeSB .leftSlideWrap .greenSnow { right: 20px; width: 47px;} .hrSildeSB .leftSlideWrap .hrtxtBox{margin: 0; position: static;} .hrSildeSB .leftSlideWrap .hrtxtBox .tit{ font-size: 20px; margin-bottom: 25px;} .hrSildeSB .leftSlideWrap .hrtxtBox .barList{ font-size: 14px;} .hrSildeSB .leftSlideWrap .hrhrSlide li{ position: static !important;} .hrSildeSB .leftSlideWrap .hrhrSlide li.active{ width: 100%; height: 68vw; margin:35px 0 15px;} .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(2), .hrSildeSB .leftSlideWrap .hrhrSlide li:nth-child(3){ width: 96px; height: 96px; float:right; margin-left: 15px;} .hrSildeSB .leftSlideWrap .hrtxtBox2 { position: static; margin-top: 150px; margin-left:0; font-size: 14px;} .contactBtn.hr{ margin-top:35px;} } /* circle logo */ .circleLogo.sbsb1{ width: 216px; height: 216px; right: 0; bottom: 100px;} .circleLogo.sbsb2{ width: 216px; height: 216px; left: 57px; top: -77px;} .circleLogo.sbsb3{ width: 176px; height: 176px; right: 48px; top: 100px; z-index: 10;} .circleLogo.sbsb4{ width: 176px; height: 176px; right:150px; bottom: 200px; z-index: 10;} .circleLogo.sbsb5{ width: 176px; height: 176px; right:0; bottom:677px;} .circleLogo.sbsb6{ width: 176px; height: 176px; right:77px; bottom:337px; z-index: 1;} .circleLogo.sbsb7{ width: 176px; height: 176px; left: 200px; bottom: 50px; z-index: 10;} /** privacy **/ .privacyBg{position: absolute; right: 0; top: 120px;} .privacyTit .boardTit .tit{ font-size: 120px;} .privacyListWrap{ width: 1334px; max-width: 100%; margin:70px 0 194px; color: rgba(0, 0, 0, .6);} .privacyListWrap > ul{} .privacyListWrap > ul > li{ margin-bottom: 60px;} .privacyListWrap > ul > li .tit{ font-size: 24px; font-weight: 500; margin-bottom: 20px; color:#000;} .privacyListWrap > ul > li .txtbox{ font-size: 18px;} .privacyListWrap > ul > li .dottxt{ margin: 12px 0;} .privacyListWrap > ul > li .dottxt li{ position: relative; padding-left: 10px; margin-bottom: 3px;} .privacyListWrap > ul > li .dottxt li::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8bc341; position: absolute; left: 0; top: 10px;} .privacyListWrap > ul > li .numtxt{ margin: 10px 0;} .privacyListWrap > ul > li .numtxt li{ margin-bottom: 3px; position: relative; padding-left: 26px;} .privacyListWrap > ul > li .numtxt li em{ width: 16px; height: 16px; line-height: 15px; font-size: 14px; text-align: center; position: absolute; left: 0; top: 5px; color:#8bc341; border-radius: 50%; border: 1px solid #8bc341; font-weight: 500;;} .privacyListWrap .blank{ display: inline-block; width: 126px;} @media (max-width: 1024px){ .privacyTit .boardTit .tit{font-size: 11vw;} .privacyListWrap{ margin-bottom: 100px;} .privacyListWrap > ul > li{ margin-bottom: 30px;} .privacyListWrap > ul > li .tit{ font-size: 18px; margin-bottom: 14px;} .privacyListWrap > ul > li .txtbox{ font-size: 14px;} .privacyListWrap > ul > li .numtxt li{ padding-left: 22px;} .privacyListWrap > ul > li .numtxt li em{ width: 14px; height: 14px; line-height: 13px; font-size: 10px; top: 3px;} .tableInfo{ margin-top: 10px; font-size: 12px; color:#919191;} .tableInfo em{color:#8bc341;font-weight: 500;} } @media (max-width: 500px){ .contact .contactus .inquiryPart ul li { width: 100%; } } /********* 220322 *********/ /********* 220322 *********/ /********* 220322 *********/ .tbType1{ overflow: hidden; overflow-x: auto; font-family: 'Noto Sans KR'; line-height: 1.2;} .tbType1 table{ width: 100%; min-width: 1024px; border-top: 2px solid #8bc341; text-align: center; font-weight: 500; font-size: 18px;} .tbType1 table .imp{ background: #eff5e5;} .tbType1 table tr.imp{ font-weight: 700;} .tbType1 table td.imp{ background-color: #fdfffb;} .tbType1 table tr > *{ padding: 20px; border: 1px solid #dedede} .tbType1 table.brt_grn tr th:nth-child(3), .tbType1 table.brt_grn tr td:nth-child(3){border-right: 2px dashed #8BC341; border-left: 2px dashed #8BC341;} .tbType1 table.brt_grn tr:last-child td:last-child{border-bottom: 2px dashed #8BC341;} .tbType1 table tr th{ background-color: #f5f5f5;} .tbType1 table tr span{ display: block; font-size: 14px; font-weight: 400; opacity: .5; margin-top: 5px;} .tbType1 table tr sub{ font-size: 40px; font-weight: 100; height: 1px; display: inline-block; line-height: 1px; color: #8BC341;} .tbType1 table.fwt tr td{font-weight: 400;} .tbType1 table.fwt tr td.fwbd{font-weight: 500;} .tbType1 + .tbTxt{ margin-top: 20px; font-size: 14px; color: #626262;} .quantumWrap .solutionCon1 .solcon1_typo.t250{ top: 170px; right: 0;} .quantumWrap .busi_home_damage{background:#fafafa url(/eng/images/contents/solution_bottom_bg.png) no-repeat left bottom;} .quantumWrap .stCon2{ padding: 272px 0 405px;} .quantumWrap .stCon2 .txtbox{ z-index: 1; position: relative;} .quantumWrap .stCon2 .txtbox .txt1{ font-size: 60px; margin-bottom: 25px; font-weight: 500;} .quantumWrap .stCon2 .txtbox .txt1 em{ color: #8bc341;} .quantumWrap .stCon2 .txtbox .txt2{ font-size: 20px; font-weight: 350;} .quantumWrap .stCon2 .txtbox .txt2 strong{ font-weight: 500;} .quantumWrap .stCon2 img{ width: 72%; position: absolute; right: -245px; top: 50%; transform: translateY(-50%);} .pqcWrap .solutionCon1 .solcon1_typo.t250{ top: 111px;} .pqcWrap .solutionCon1.quantum_pt{padding-top: 0;} .pqcWrap .pqcCon1{ display: flex; margin: 150px 0 150px} .pqcWrap .pqcCon1 .tit{ width: 473px; font-size: 35px; font-weight: 500; width: 50%;} .pqcWrap .pqcCon1 ul{ display: flex; width: 100%;} .pqcWrap .pqcCon1 ul li{ display: flex; align-items: center; width: 100%; border: 1px solid #dedede; border-radius: 11px; padding: 30px;} .pqcWrap .pqcCon1 ul li + li{ margin-left: 28px;} .pqcWrap .pqcCon1 ul li img{ margin-right: 30px; margin-left: 0;} .pqcWrap .pqcCon1 ul li .txt{} .pqcWrap .pqcCon1 ul li .txt span{ font-size: 18px; font-weight: 500;} .pqcWrap .pqcCon1 ul li .txt p{ margin-top: 5px; font-size: 16px; opacity: .5; font-weight: 400;} .pqcWrap .tbType1.pqctb1 table { font-weight: 400;} .pqcWrap .tbType1.pqctb1 table td:first-child{ font-weight: 500;} .pqcWrap .pqcCon2{ position: relative; margin-top: 175px;} .pqcWrap .pqcCon2 .snow{ width: 143px; position: absolute; right: 0; top: -47px; animation: circle 10s linear infinite;} .pqcWrap .pqcCon2 .features1 .tit{ margin-bottom: 40px;} .pqcWrap .pqcCon2 .tit .txt1{ font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #919191;} .pqcWrap .pqcCon2 .tit .txt2{ font-size: 18px; color: #3e3e3e; font-family: 'Noto Sans KR';} .pqcWrap .pqcCon2 .features2{ padding: 90px 0 250px;} .pqcWrap .pqcCon2 .features2 .tit{ margin-bottom: 70px;} .pqcWrap .pqcCon2 .features2 .featuresCon{ display: flex; align-items: center;} .pqcWrap .pqcCon2 .features2 .featuresCon .gear{ width: 669px; position: relative; flex-shrink: 0; margin-right: 67px;} .pqcWrap .pqcCon2 .features2 .featuresCon .gear .gear1{ width: 100%;} .pqcWrap .pqcCon2 .features2 .featuresCon .gear .gear2{ position: absolute; right: 0; top: 0; z-index: 1; animation: circle 10s linear infinite;} .pqcWrap .pqcCon2 .features2 .featuresCon ul{ width: 100%;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li{ display: flex; align-items: center; box-shadow: 0px 10px 30px rgba(0, 0, 0, .06); background-color: #fff; border-radius: 30px; width: calc(100% - 74px); padding: 25px 40px;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li:last-child{ margin: 45px 0 0 74px;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li img{ margin-right: 40px;} @media screen and ( max-width:1024px ){ .tbType1{ padding-bottom: 35px;} .tbType1::-webkit-scrollbar{ display: block; background-color: #C4C4C4; height: 5px; border-radius: 2px;} .tbType1::-webkit-scrollbar-thumb{ background-color: #8bc341; border-radius: 2px;} .tbType1 table{ font-size: 16px;} .tbType1 table tr sub{ font-size: 30px; } .tbType1 + .tbTxt{ margin-top: 30px;} .quantumWrap .txtbox br{ display: none;} .quantumWrap .busi_home_damage{ background: #fafafa;} .quantumWrap .stCon2{ padding: 70px 0 90px;} .quantumWrap .stCon2 .txtbox .txt1{ font-size: 24px; margin-bottom: 20px;} .quantumWrap .stCon2 .txtbox .txt2{ font-size: 16px;} .quantumWrap .stCon2 img{ display: block; width: 100%; transform: none; position: static;} .pqcWrap .pqcCon1{ display: block; margin:79px 0 70px;} .pqcWrap .pqcCon1 .tit{ width: 100%; font-size: 24px; margin-bottom: 30px;} .pqcWrap .pqcCon1 .tit br{ display: none;} .pqcWrap .pqcCon1 ul{ display: block;} .pqcWrap .pqcCon1 ul li{ padding:35px 30px; width: 100%; box-sizing: border-box;} .pqcWrap .pqcCon1 ul li + li{ margin:20px 0 0;} .pqcWrap .pqcCon2{ margin-top:70px;} .pqcWrap .pqcCon2 .tit .txt1{ font-size: 18px; margin-bottom: 15px;} .pqcWrap .pqcCon2 .tit .txt2{ font-size: 16px;} .pqcWrap .pqcCon2 .features2{ padding: 70px 0 90px;} .pqcWrap .pqcCon2 .features2 .tit{ margin-bottom: 40px;} .pqcWrap .pqcCon2 .features2 .featuresCon{ display: block;} .pqcWrap .pqcCon2 .features2 .featuresCon .gear{ width: 100%; margin: 0 0 63px 0;} .pqcWrap .pqcCon2 .features2 .featuresCon .gear .gear2{width: 63%;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li{ width: 100%; padding: 20px; box-sizing: border-box;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li br{ display: none;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li:last-child{ margin: 30px 0 0;} .pqcWrap .pqcCon2 .features2 .featuresCon ul li img{ margin-right: 20px;} .busi_home_damage.mt180{margin-top: 80px;} }