.fullPage_nav { display: none;} .scroll_img { display: none;} .start #header{ border-bottom: 1px solid rgba(0,0,0,0.1);} /* slick slide common */ .slick-slider { -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; } .slick-slide { display:none; height:100%; min-height:1px; vertical-align:middle; } .slick-list { overflow:hidden; } .slick-list.dragging { cursor:pointer; } .slick-initialized .slick-slide { display:inline-block; } .slick-arrow.slick-hidden { display:none; } .slick-current { opacity:1; display:block; } .slick-track { position:relative; left:0; top:0; display:block; margin-left:auto; margin-right:auto; } /* slick arrow show */ .arwShow .slick-arrow.slick-hidden { display:inline-block; } /* ********************************************************************************* * sub layout * *********************************************************************************/ /** container - sub **/ #sub_content{margin-top: 0;word-break:keep-all; position: relative; } #sub_content:before{content:'';position:absolute;left:0;top:-10rem;width:100%;height:calc(100% + 25rem);background:repeating-linear-gradient(-55deg, #f5f5f7, #f5f5f7 1px, #fff 0, #fff 300px);z-index:-1; } /* #sub_content .container{width:78rem;margin:auto;} */ #sub_content .container2{position:relative;width:70rem;margin:auto;} #sub_content .container2:after{display:block;clear:both;content:"";} /** header - sub **/ #header{position:relative;} .fullmenuBtn > em, .fullmenuBtn > em:before, .fullmenuBtn > em:after{background:#111118;} #wrap { overflow: hidden;} /** 1depth **/ .menu_wrap{position:fixed;display:inline-block;top:1rem;left:50%;width:auto;min-width:250px;height:0;padding-top:50px;overflow:hidden;z-index:999;-webkit-transform:translateX(-50%);transform:translateX(-50%);} .menu_wrap #menu{position:static;margin-top:.2rem;} .menu_wrap #menu > li{margin-top:2px;padding:0 2rem;} .menu_wrap #menu > li > a{position:relative;display:block;padding:0 40px;font-size:.9rem;background:#0b0b18;color:#fff;font-family:'Play';line-height:50px;-webkit-transform:skewX(-35deg);transform:skewX(-35deg);} .menu_wrap #menu > li:not(.on) > a{overflow:hidden;} .menu_wrap #menu > li:not(.on) > a:before{position:absolute;top:0;left:0;width:200%;height:100%;background:#1a20bf;content:'';transform:translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);-webkit-transition:all .5s;transition:all .5s;} .menu_wrap #menu > li > a > span{position:relative;display:inline-block;-webkit-transform:skewX(35deg);transform:skewX(35deg);} .menu_wrap #menu > li > a > span:before{position:absolute;top:50%;left:-230%;width:100%;height:2px;background:#fff;content:'';-webkit-transition:left .3s;transition:left .3s;} .menu_wrap #menu > li.transform{-webkit-transform:translateX(10px);transform:translateX(10px);} .menu_wrap #menu > li.transform > a{-webkit-transform:skewX(35deg);transform:skewX(35deg);} .menu_wrap #menu > li.transform > a > span{position:relative;display:inline-block;-webkit-transform:skewX(-35deg);transform:skewX(-35deg);} .menu_wrap #menu > li.on{position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);padding:0;} .menu_wrap #menu > li.on > a:before{position:absolute;bottom:0;right:-33px;font-size:17px;font-family:'xeicon';z-index:1;color:#fff;line-height:20px;content:'\e943';-webkit-transition:transform .3s;transition:transform .3s;} .menu_wrap #menu > li.on > a:after{position:absolute;right:-40px;bottom:0;width:30px;height:20px;background:#000;content:'';-webkit-transform:skewX(-35deg);transform:skewX(-35deg);-webkit-transition:background .3s;transition:background .3s;} .menu_wrap #menu > li.on > a{padding:0;color:#17171f;background:transparent;font-size:1.5rem;font-weight:700;-webkit-transform:skewX(0deg);transform:skewX(0deg);} .menu_wrap #menu > li.on > a > span{-webkit-transform:skewX(0deg);transform:skewX(0deg);} .menu_wrap.ov #menu > li.on > a:before{-webkit-transform:rotate(180deg);transform:rotate(180deg);} .menu_wrap #menu > li.on > a > span:before{display:none;} .menu_wrap #menu > li.on > a > span:after{position:absolute;bottom:5px;right:0;width:100%;height:3px;background:#000;content:'';} .menu_wrap #menu > li > a:hover > span:before, .menu_wrap #menu > li > a:focus > span:before{left:-120%;} .menu_wrap #menu > li > a:hover:before, .menu_wrap #menu > li > a:focus:before{-webkit-transform:translate(0, 0) matrix(1, 0, 0, 1, 0, 0);transform:translate(0, 0) matrix(1, 0, 0, 1, 0, 0);} /* header fixed */ .header_fixed .menu_wrap #menu > li.on > a{color:#fff;} .header_fixed .menu_wrap #menu > li.on > a:after, .header_fixed .menu_wrap #menu > li.on > a > span:after{background:#fff;} .header_fixed .menu_wrap #menu > li.on > a:before{color:#5c5c5c;} /** 2,3depth **/ .left_menu_wrap{position:fixed;width:10rem;left:50%;-webkit-transform:translateY(-7.5rem) translateX(-50%) translateX(-48rem) translateX(+5rem);transform:translateY(-7.5rem) translateX(-50%) translateX(-48rem) translateX(+5rem);z-index:10;-webkit-transition:all .5s;transition:all .5s;} .left_menu_wrap #leftMenu > li{margin-bottom:0.5rem;} .left_menu_wrap #leftMenu > li > h2{display:block;} .left_menu_wrap #leftMenu > li > h2 a{display:block;color:#bdc3c6;font-size:2.3rem;font-family:'Play', 'NotoSans';font-weight:700;font-style:italic;} .left_menu_wrap #leftMenu > li > h2 a:hover, .left_menu_wrap #leftMenu > li > h2 a:focus, .left_menu_wrap #leftMenu > li > h2.active a{font-style:normal;color:#0e0e10;} .left_menu_wrap #leftMenu > li > h2 a span{-webkit-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s;} .left_menu_wrap #leftMenu > li > h2 a:hover span, .left_menu_wrap #leftMenu > li > h2 a:focus span, .left_menu_wrap #leftMenu > li > h2.active a span{box-shadow:inset rgba(179,185,249,1) 0 -0.85rem 0;} .left_menu_wrap #leftMenu ul > li > a{font-size:1.5rem;font-family:'Play', 'NotoSans';font-weight:700;color:#fff;text-shadow:#0e0e10 0px 0px 1px, #0e0e10 0px 0px 1px, #0e0e10 0px 0px 1px, #0e0e10 0px 0px 1px, #0e0e10 0px 0px 1px, #0e0e10 0px 0px 1px ;} .left_menu_wrap #leftMenu ul > li > a > span{position:relative;display:inline-block;} .left_menu_wrap #leftMenu ul > li > a > span:before{position:absolute;bottom:10px;right:0;width:0;height:17px;background:#b0bbfa;content:'';z-index:-1;-webkit-transition:width .5s;transition:width .5s;} .left_menu_wrap #leftMenu ul > li > a:hover > span:before, .left_menu_wrap #leftMenu ul > li.active > a > span:before{width:1000px;} .left_menu_wrap #leftMenu ul > li > a:hover, .left_menu_wrap #leftMenu ul > li.active > a{text-shadow:none;color:#0e0e10;font-weight:900;} .left_menu_wrap.leftMenu_fixed, .left_menu_wrap.leftMenu_fixed_ani{-webkit-transform:translateY(0) translateX(-50%) translateX(-48rem) translateX(+5rem);transform:translateY(0) translateX(-50%) translateX(-48rem) translateX(+5rem);} /* left_menu_wrap - white */ .w_left_active .left_menu_wrap #leftMenu > li > h2{color:#fff;} .w_left_active .left_menu_wrap #leftMenu ul > li > a{color:#141891;text-shadow:#fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px;} .w_left_active .left_menu_wrap #leftMenu ul > li > a:hover, .w_left_active .left_menu_wrap #leftMenu ul > li.active > a{color:#fff;} .w_left_active .left_menu_wrap #leftMenu ul > li > a > span:before{opacity:.5;} /* ********************************************************************************* * sub common * *********************************************************************************/ /** section **/ .section{position:relative;} /** bullet **/ [class^="bul_lst0"] > li{position:relative;} [class^="bul_lst0"] > li:before{position:absolute;content:'';} [class^="bul_lst0"] > li > [class^="bul_lst0"]{margin-top:.75rem;} [class^="bul0"]{position:relative;line-height:1.5;} [class^="bul0"]:before{position:absolute;content:'';} .bul01{display:block;margin-bottom:2.25rem;color:#17171f;font-size:1rem;font-weight:700;font-family:'Play';} .bul01 > span{position:relative;display:inline-block;padding-right:5rem;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s;} .bul01 > span:before{position:absolute;top:50%;right:0;width:0;height:1px;background:#000;content:''; -webkit-transition:width .5s;transition:width .5s;-webkit-transition-delay:.5s;transition-delay:.5s;} .bul02{display:block;color:#fff;font-size:1rem;font-weight:700;text-align:center;} .bul02 > span{position:relative;display:inline-block;padding-bottom:.25rem;} .bul02 > span:before{position:absolute;bottom:0;left:50%;width:100%;height:3px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#fff;content:'';} .section.active .bul01 > span{opacity:1;} .section.active .bul01 > span:before{width:85px;} [class^="heading"] .badge {transition-delay:0.4s;-webkit-transition-delay:0.4s; border-radius:24.5px; font-size:22px; font-weight:700; max-width:fit-content; margin:0 auto 25px; height:50px; display:flex; align-items:center; padding:0 30px;} /** heading **/ .heading1{display:block;color:#18181b;font-weight:700;} .heading1 > span{display:block;font-size:2rem;line-height:1;} .heading1 > strong{display:block;font-family:'Play';font-size:5.25rem;line-height:1;} .heading2{display:block;color:#17171f;text-align:center;letter-spacing:-1px;} .heading2 > h4.xl-weight {font-weight:400;} .heading2 > h4.xl-weight strong {font-weight:800;} .heading2 > h4, .heading2 > h5, .heading2 > p {opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .heading2 > h4{font-size:3rem;font-weight:800;line-height:1.2;margin-bottom:2rem;} .heading2 > p{font-size:1.5rem;font-weight:300;transition-delay:0.4s;-webkit-transition-delay:0.4s;} .heading2 > h4.small{font-size:2.5rem;} .heading2 > h4.big{font-size:4.5rem;} .heading2 strong.blue {color:#141687;} .section.active .heading2 > h4, .section.active .heading2 > h5, .section.active .heading2 > p, .section.active .heading2 .down-btn {opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .section .list2 ul {width:100%; display:flex; flex-direction:column; gap:40px;} .section .list2 ul > li {opacity:0; display:flex; align-items:flex-start; justify-content:space-between; gap:30px;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .section .list2 ul li p {flex-shrink:0; width:350px;} .section .list2 ul li ul {flex:1; display:flex; height:100%; align-items:flex-start; flex-direction:column; gap:0;} .section .list2 ul li ul li {position:relative; padding-left:1rem; font-size:1.1rem; font-weight:500; color:#333;} .section .list2 ul li ul li:before {content:''; position:absolute; left:0; top:12px; width:7px; height:7px; background:#2c32e3; border-radius:50%;} .section .list2 p.tit {height:4.3rem; display:flex; align-items:center; justify-content:center; border-radius:2.5rem; font-size:1.3rem; font-weight:700; color:#fff;} .section.active .list2 {transform:translateY(0);-webkit-transform:translateY(0); margin:50px 0;} .section.active .list2 ul li {opacity:1; opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .section.active .list2 > ul > li:nth-child(1) {transition-delay:0.4s;-webkit-transition-delay:0.4s;} .section.active .list2 > ul > li:nth-child(2) {transition-delay:1s;-webkit-transition-delay:1s;} .bg_blue1 .tit, .section .list2 ul .bg_blue1 ul li:before {background:#1342d1;} .bg_blue2 .tit, .section .list2 ul .bg_blue2 ul li:before {background:#6682fa;} /* wk platform */ .wk-platform .func .con_wrap {display:flex; gap:40px; justify-content:space-between; margin:80px 0;} .wk-platform .func .con_box_st {flex:1; text-align:center;opacity:0;transform:translateY(-5%);-webkit-transform:translateY(-5%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;transition-delay:0.2s;-webkit-transition-delay:0.2s;} .wk-platform .func .con_box_st + ul {transition-delay:0.4s;-webkit-transition-delay:0.4s;} .wk-platform .func .con_box_st + ul + ul {transition-delay:0.6s;-webkit-transition-delay:0.6s;} .wk-platform .func .con_box_st + ul + ul + ul {transition-delay:0.8s;-webkit-transition-delay:0.8s;} .wk-platform .func .con_box_st p {position:relative;display:block;text-align:center;margin-bottom:1rem;} .wk-platform .func .con_box_st p:before {content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#000;} .wk-platform .func .con_box_st p span{position:relative;font-size:1.2rem;font-weight:700;padding:0 1rem;background:#fff;} .wk-platform .func.active .con_box_st {opacity:1; transform: translateY(0); -webkit-transform: translateY(0);} .wk-platform .func .con_box_st ul.list li {position:relative; padding-left:20px; font-size:18px; font-weight:500; color:#333; text-align:left; line-height:2;} .wk-platform .func .con_box_st ul.list li:before {content:''; position:absolute; left:0; top:14px; width:6px; height:6px; background:#2c32e3; border-radius:50%;} .wk-platform .func .con_box_st .img_box {width:100%; padding:25px; background:#f5f6fe;} .wk-platform .func .con_box_st .img_box img {display:block; width:100%; border:1px solid #d5d5d9; box-shadow:4px 4px 5px rgba(92,99,121,0.1);} .wk-platform .down-btn {opacity:0; border:1px solid #1d2087; gap:0.5rem; background:#f6f6f6; width:14rem; height:3.25rem; display:flex; align-items:center; justify-content:center; margin:1rem auto; color:#141687; font-size:1.1rem; font-weight:700;} .wk-platform h5 {font-size:1.3rem; font-weight:700;} .wk-platform .title {text-align:center; margin-bottom:15px; letter-spacing:10px; opacity:0; transition:opacity 1s, letter-spacing 1s;-webkit-transition:opacity 1s, letter-spacing 1s; } .wk-platform .active .title {letter-spacing:0; opacity:1;} .wk-platform p {text-align: left; font-size: 1.1rem;} .wk-platform p strong {font-weight:700;} .wk-platform .section {padding:0 0 1.5rem 0;} .wk-platform .section h4.xl-weight {font-size:2.6rem;} .wk-platform .section1 {margin-top:2rem;} .wk-platform .section1 .down-btn {margin-bottom:2rem;} .wk-platform .section2 .con_wrap {border-top:2px solid #111;} .wk-platform .section2 .con_box_st {position:relative; transform:translateY(15%);-webkit-transform:translateY(15%); padding:3rem 0;} .wk-platform .section2 .con_box_st:after {content:''; position:absolute; width:1px; height:9rem; background:#ccc; top:50%; right:0; transform:translate(0, -50%);} .wk-platform .section2 .con_box_st:last-child:after {display:none;} .wk-platform .section2 .con_box_st dt {display:flex; align-items:center; width:100%; justify-content:center;} .wk-platform .section2 dl.con_box_st dt:before {display:none;} .wk-platform .section2 dl {width:33%;} .wk-platform .section2 dl + dl {width:33%;} .wk-platform .section2 dl + dl + dl {width:33%;} .wk-platform .section2 dl.con_box_st dt span {font-size:1.3rem;} .wk-platform .section2.active dl.con_box_st {transform: translateY(0); -webkit-transform: translateY(0);} .wk-platform .section2 dl dd {max-width:20rem; margin:0 auto; height:6rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem;} .wk-platform .section2 p.img img {margin:2rem auto 0; display:block; max-width:100%;} .wk-platform .section4 {margin-top:30px;} .wk-platform .section4 .badge {background:#e4efff; color:#002f9f;} .wk-platform .section4 h4.xl-weight {transition-delay:0.8s;-webkit-transition-delay:0.8s;} .wk-platform .section4 h5 {color:#002f9f; transition-delay:1.2s;-webkit-transition-delay:1.2s;} .wk-platform .section5 .badge {background:#ead8ff; color:#4a00ad;} .wk-platform .section5 h5 {color:#4a00ad; transition-delay:1.2s;-webkit-transition-delay:1.2s;} .wk-platform .section6 .badge {background:#daf0ec; color:#00694f;} .wk-platform .section6 h5 {color:#00694f; transition-delay:1.2s;-webkit-transition-delay:1.2s;} .wk-platform .section4 .con_box_st ul.list, .wk-platform .section5 .con_box_st ul.list {min-height:13rem;} .wk-platform .section6 .con_box_st ul.list {min-height:10rem;} .wk-platform .section7 .data_stand {margin:50px 0 20px; position:relative;display:flex; align-items:center; justify-content:space-between; width:100%; min-height:300px;} .wk-platform .section7 .data_stand li {flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transform:scale(1.1);transform:scale(1.1); opacity:0;} .wk-platform .section7 .data_stand li p {display:flex; align-items:center; justify-content:center; width:180px;height:180px;margin:0 1% 20px;border-radius:50%;background:#3d3dd8;} .wk-platform .section7 .data_stand li:nth-child(1) {transition-delay:0.3s;-webkit-transition-delay:0.3s;} .wk-platform .section7 .data_stand li:nth-child(2) {transition-delay:0.4s;-webkit-transition-delay:0.4s;} .wk-platform .section7 .data_stand li:nth-child(3) {transition-delay:0.5s;-webkit-transition-delay:0.5s;} .wk-platform .section7 .data_stand li:nth-child(4) {transition-delay:0.6s;-webkit-transition-delay:0.6s;} .wk-platform .section7 .data_stand li:nth-child(5) {transition-delay:0.7s;-webkit-transition-delay:0.7s;} .wk-platform .section7.active .data_stand li {opacity:1;-webkit-transform:scale(1);transform:scale(1);} .wk-platform .section7 .data_stand h4 {font-size:1.3rem; font-weight:700; color:#111;} .wk-platform .section7 .data_stand span {display:block; margin-top:15px; font-size:1.1rem; font-weight:500; color:#333; text-align:center;} .wk-platform .section7 .badge {background:#d8e0ff; color:#3737d3;} .wk-platform .section7 h5 {color:#3737d3; transition-delay:1.2s;-webkit-transition-delay:1.2s;} /** txt_p **/ .txt_p{display:block;font-size:1rem;color:#17171f;font-weight:300;line-height:1.75;} /** more_btn **/ .more_btn{display:inline-block;color:#17171f;font-size:1.2rem;font-weight:700;font-family:'Play';} .more_btn > span{position:relative;} .more_btn > span:before{position:absolute;bottom:-5px;right:-50px;width:100%;max-width:102px;height:3px;background:#1318b5;content:'';-webkit-transition:right .3s;transition:right .3s;} .more_btn:hover > span:before, .more_btn:focus > span:before{right:0;} .more_btn_black{position:relative;display:inline-block;width:300px;height:4rem;background:#0b0b18;color:#fff;font-size:1.2rem;-webkit-transform:translateX(-50%) skewX(-35deg);transform:translateX(-50%) skewX(-35deg);overflow:hidden;opacity:0;-webkit-transition:transform .5s, opacity .5s;transition:transform .5s, opacity .5s;-webkit-transition-delay:1.3s;transition-delay:1.3s;} .more_btn_black > span{position:absolute;top:50%;left:50%;width:100%;padding-right:3rem;-webkit-transform:translate(-50%, -50%) skewX(35deg);transform:translate(-50%, -50%) skewX(35deg);text-align:center;background:#0b0b18;-webkit-transition:letter-spacing .3s;transition:letter-spacing .3s;} .more_btn_black > span:before{position:absolute;top:50%;right:0;width:30%;height:1px;-webkit-transform:translateY(-50%) skewX(-35deg);transform:translateY(-50%) skewX(-35deg);background:#3c3c46;content:'';-webkit-transition:width .3s;transition:width .3s;-webkit-transition-delay:.1s;transition-delay:.1s;} .more_btn_black:hover > span, .more_btn_black:focus > span{letter-spacing:0;} .more_btn_black:hover > span:before, .more_btn_black:focus > span:before{width:30%;} .active .more_btn_black{opacity:1;-webkit-transform:translateX(0) skewX(-35deg);transform:translateX(0) skewX(-35deg);} .more_btn_black:hover > span, .more_btn_black:focus > span{letter-spacing:.1rem;} .more_btn_black:hover > span:before,z .more_btn_black:focus > span:before{width:3rem;} .prev_btn{display:inline-block;color:#17171f;font-size:1.5rem;font-weight:700;} .prev_btn > span{position:relative;} .prev_btn > span:before{position:absolute;bottom:-10px;left:-50px;width:100%;max-width:137px;height:4px;background:#17171f;content:'';-webkit-transition:left .3s;transition:left .3s;} .prev_btn:hover > span:before, .prev_btn:focus > span:before{left:0;} /** bg_txt **/ .section .bg_txt{position:absolute;top:0;left:0;width:100%;height:100%;/* z-index:-1;*/} .section .bg_txt > strong{position:absolute;display:block;bottom:-4.9rem;left:-100%;font-size:15rem;font-weight:700;font-family:'';color:#141891;text-shadow:-1px -1px 0 rgba(255,255,255,.17), 1px -1px 0 rgba(255,255,255,.17), -1px 1px 0 rgba(255,255,255,.17), 1px 1px 0 rgba(255,255,255,.17);line-height:1;font-family:'Ubuntu';text-transform:uppercase;-webkit-transition:all .5s;transition:all .5s;-webkit-transition-delay:1s;transition-delay:1s;} .section.active .bg_txt > strong{left:0;} /** 레이어팝업 :2021.02.24. **/ body.layerOpen{overflow:hidden;} body.layerOpen .left_menu_wrap{display:none;} .layerPop{display:none;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100vh;background:#fff;} .layerPop .popup_logo{display:block;position:absolute;top:0;left:0;width:79px;height:58px;background:url(/images/klic/sub/popup_logo.png) no-repeat;} .layerPop_tit{font-family:'Play';font-size:1rem;color:#17171f;text-align:center;} .layerPop_tit > span{position:relative;} .layerPop_tit > span:after{content:"";display:block;width:4.25rem;height:1px;margin:2px auto 0;background:#000;} @keyframes btn_close_layerPop_animate{ 0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);} } .btn_close_layerPop{display:block;position:absolute;top:0.7rem;right:0;width:31px;height:25px;margin-top:0;background:url(/images/klic/sub/btn_close_layerPop.png) no-repeat 50% 50%;-webkit-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s;} .btn_close_layerPop.animate_active{-webkit-animation:btn_close_layerPop_animate 0.2s;-ms-animation:btn_close_layerPop_animate 0.2s;animation:btn_close_layerPop_animate 0.2s;} .layerPop .btn_close_layerPop{margin-top:0;} /*** 카카오맵 지도 ***/ .layerPop .view_map{margin:2rem 0;} .layerPop .view_map .root_daum_roughmap{width:100%;} /* ********************************************************************************* * sub contents * Edit :2021.02.24. sehyun oh * ****************************************************************************** ***/ /* Top box */ .sTop_box {position: relative;width: 100%;height: auto;margin-left: 2.5rem;background: #eff0f6 url(/images/klic/sub/sTop_bg.png) no-repeat bottom right;border-radius: 2rem;padding: 4rem 0 3rem 3.5rem;margin-bottom: 4.5rem;} .sTop_box .txt_box {display: flex; } .sTop_box .txt_box h3 { width: 16.5rem; line-height: 1} .sTop_box.si .txt_box h3 { width: 11rem; line-height: 1} .sTop_box .txt_box h3 p { position: relative; color: #1c39b7; font-size: 3rem; font-weight: 600;} .sTop_box .txt_box h3 p::before { position: absolute; content: ''; display: block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #1c39b7; left: -0.85rem; top: -0.75rem;} .sTop_box .txt_box h3 span {font-size: 2rem;font-weight: 600;color: #111;display: inline-block;margin-top: 0.8rem;} .sTop_box .txt_box ul {width: calc(100% - 42rem);} .sTop_box.si .txt_box ul {width: calc(100% - 37rem);} .sTop_box .txt_box ul li {width: 49%;position: relative;padding-left: 1.3rem;font-size: 1rem;line-height: 1.6rem;color: #333;display: inline-block;vertical-align: top;} .sTop_box .txt_box ul li::before {content: '';display: block;width: 6px;height: 1px;background: #333;position:absolute;top: 0.6rem;left: 0.5rem;} .sTop_box .img { width: 22.2rem; height: 14.5rem; border-radius: 2rem 2rem 2rem 0; box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.2); position: absolute; top: -2.5rem; right: 2.5rem; overflow: hidden;} .sTop_box .img img { width: 100%; height: auto;} /** klic **/ .klic_wrap .bul01{text-align:left;} .klic_wrap .section1{text-align:center;} .klic_wrap .section1 p.txt_p{width:40%;margin-top:3.5rem;} .klic_wrap .section1 p.txt_p > strong{font-weight:700;} .klic_wrap .heading1 > span{line-height:1.5;} .klic_wrap .heading1 > span > em{color:#1318b5;} .klic_wrap .greeting{text-align:left;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;-webkit-transition:transform 1s, opacity 1s;transition:transform 1s, opacity 1s;-webkit-transition-delay:.5s;transition-delay:.5s;} .klic_wrap .clip_img{overflow:hidden;position:absolute;top:0;right:-100%;width:60%;height:calc(100% - 6rem);z-index:-1;opacity:0;-webkit-transition:opacity .5s, right .5s;transition:opacity .5s, right .5s;-webkit-transition-delay:1s;transition-delay:1s;} .klic_wrap .clip_img:before{position:absolute;top:0;left:0;width:513px;height:100%;background:url(/images/klic/sub/greeting_bg_clip.png)no-repeat center/cover;content:'';z-index:1;} .klic_wrap .clip_img:after{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:url(/images/klic/sub/greeting_bg.jpg)no-repeat center/cover;content:'';} .klic_wrap .more_btn{margin-top:3rem;} .klic_wrap .section2{text-align:center;padding:8.5rem 0;} .klic_wrap .section2 .vision_lst{display:inline-block;overflow:hidden;} .klic_wrap .section2 .vision_lst > li{float:left;width:33.333%;padding:0 5rem;text-align:left;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;-webkit-transition:transform .2s, opacity .2s;transition:transform .2s, opacity .2s;-webkit-transition-delay:.05s;transition-delay:.05s;} .klic_wrap .section2 .vision_lst > li:nth-of-type(2){-webkit-transition-delay:.4s;transition-delay:.4s;} .klic_wrap .section2 .vision_lst > li:nth-of-type(3){-webkit-transition-delay:.6s;transition-delay:.6s;} .klic_wrap .section2 .vision_lst > li strong{position:relative;display:block;padding-top:3.75rem;font-size:2.8rem;font-weight:700;color:#0008ed;font-family:'Play';text-transform:uppercase;} .klic_wrap .section2 .vision_lst > li:nth-of-type(2) strong{color:#05b999;} .klic_wrap .section2 .vision_lst > li:nth-of-type(3) strong{color:#5521c0;} .klic_wrap .section2 .vision_lst > li strong:before{position:absolute;top:0;left:0;width:60px;height:50px;background-image:url(/images/klic/sub/vision_icon.png);background-size:180px 50px;background-position:0 0;background-repeat:no-repeat;content:'';} .klic_wrap .section2 .vision_lst > li:nth-of-type(2) strong:before{background-position:-60px 0;} .klic_wrap .section2 .vision_lst > li:nth-of-type(3) strong:before{background-position:-120px 0;} .klic_wrap .section2 .vision_lst > li .txt_p{text-align:center;} .klic_wrap .section3{padding:3.25rem 0 6rem;text-align:center;overflow: hidden;width: 100vw;position: relative;left: 50%;transform: translateX(-50%);} .klic_wrap .section3:before{position:absolute;top:50%;left:50%;width: 100%;height:100%;-webkit-transform:scale(1.5) translate(-50%, -50%);transform:scale(1.5) translate(-50%, -50%);background:url(/images/klic/sub/value_bg.jpg)no-repeat center/cover;text-align:center;-webkit-transition:transform 2s;transition:transform 2s;content:'';} .klic_wrap .section3 .value_lst{overflow:hidden;display:inline-block;margin-top:3rem;} .klic_wrap .section3 .value_lst > li{position:relative;float:left;padding:0 3rem;color:#fff;font-size:3rem;font-weight:300;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;} .klic_wrap .section3 .value_lst > li:nth-of-type(even){margin-top:3.75rem;} .klic_wrap .section3 .value_lst > li > em{display:inline-block;font-weight:700;margin-right:.25rem;} .klic_wrap .section4{padding:7.5rem 0;} .klic_wrap .section4 .progress-wrap{overflow:hidden;position:relative;float:left;height:5px;width:100%;margin-top:20px;} .klic_wrap .section4 .progress-wrap:before{position:absolute;top:.5px;left:0;width:100%;height:5px;background:#e9e9e9;content:'';} .klic_wrap .section4 .progress{position:absolute;z-index:2;display:block;width:100%;height:100%;top:0;left:0;background:#222692;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;min-width:10%;border-radius:0 30px 30px 0;} .klic_wrap .section4 .history_lst{position:relative;margin-top:3rem;} .klic_wrap .section4 .history_lst:before{position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff;content:'';z-index:1;} .klic_wrap .section4 .history_lst .slick-list{overflow:visible;} .klic_wrap .section4 .history_lst .slider_wrap{vertical-align:top;} .klic_wrap .section4 .history_lst .slider_wrap > div{position:relative;display:block;padding:3rem 3rem 1rem;} .klic_wrap .section4 .slider_wrap > div > h4{position:absolute;top:.5rem;left:0;display:block;-webkit-transform:rotate(-35deg);transform:rotate(-35deg);font-size:1.4rem;font-weight:700;font-family:'Play';} .klic_wrap .section4 .slider_wrap ul > li{position:relative;padding-left:.75rem;font-size:.9rem;font-weight:400;color:#17171f;} .klic_wrap .section4 .slider_wrap ul > li + li{margin-top:1rem;} .klic_wrap .section4 .slider_wrap ul > li:before{position:absolute;top:0;left:0;width:6px;height:6px;background:#2b5cd7;border-radius:50%;content:'';} .klic_wrap .section5{padding:5.5rem 0;background:#141891;color:#fff;} .klic_wrap .section5:after { content:''; display:block; width:150vw; height:110%; position:absolute; top:0; left:50%; transform:translateX(-50%); background: #141891; z-index:-1;} .klic_wrap .section5 .container{z-index:1;} .klic_wrap .section5 .bul01{color:#fff;} .klic_wrap .section5 .bul01 > span:before{background:#fff;} .klic_wrap .section5 .org{text-align:center;} .klic_wrap .section5 .org > li:nth-child(1) { margin-bottom:3rem;} .klic_wrap .section5 .org > li > strong{position:relative;display:inline-block;padding: 1rem 2.25rem;background:#141891;font-size:1.25rem;font-weight:700;z-index:1;} .klic_wrap .section5 .org > li > strong:after{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid #8a8cc8;background:#141891;content:''; z-index:-1;} .klic_wrap .section5 .org > li:nth-child(1) > strong:before{position:absolute;top:100%;left:50%;width:3px;height: calc(100% + 1rem);-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#8a8cc8;content:'';} .klic_wrap .section5 .org > li:nth-child(2) > strong:before{position:absolute;top:100%;left:50%;width:3px;height: calc(100% + 5rem);-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#8a8cc8;content:'';} .klic_wrap .section5 .org li{position:relative;} .klic_wrap .section5 .org li > span{position:relative;z-index:1;background:#141891;} .klic_wrap .section5 .org .depth2 > li{overflow:hidden;margin-top:2rem;} .klic_wrap .section5 .org .depth2 .lst1{display:inline-block;-webkit-transform:translateX(+7.25rem) translateX(+3px);transform:translateX(+7.25rem) translateX(+3px);} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li{float:left;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type{padding-right:7.25rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type:before{position:absolute;top:50%;right:-100%;width:200%;height:3px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:#8a8cc8;content:'';} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type{padding-left:7.25rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type > span{display:inline-block;vertical-align:middle;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type .depth4{position:relative;display:inline-block;vertical-align:middle;padding-left:4rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type .depth4 li:before{position:absolute;top:50%;left:-100%; width:100%;height:1px;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .depth3{display:inline-block;} .klic_wrap .section5 .org .depth3 > li > span{display:inline-block;width: 6.4rem;padding:1rem 0;font-weight:700;font-size: 1rem;} .klic_wrap .section5 .org .depth3 > li > span:after{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid #8a8cc8;background:#141891;content:'';} .klic_wrap .section5 .org .depth3 > li > span > em{position:relative;z-index:1;} .klic_wrap .section5 .org .depth4 > li > span, .klic_wrap .section5 .org .depth5 > li > span{display:inline-block;width:10.5rem;padding:1rem 0;border:1px solid #8a8cc8;font-weight:500;font-size:1rem;} .klic_wrap .section5 .org .depth2 .lst2{overflow:hidden;margin-top:2.25rem;padding-top:2.25rem;} .klic_wrap .section5 .org .depth2 .lst2 .depth3{position:relative;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li{float:left;} .klic_wrap .section5 .org .depth2 .lst2 .depth3:before{position:absolute;top:-2.25rem;left: 13.6%;width: 81.8%;height:3px;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li > span:before{position:absolute;top:-2.5rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:3px;height:calc(100% + 4.2rem);background:#8a8cc8;content:'';} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:last-of-type .depth4 > li{text-align:center;display:inline-block;float:none;} .klic_wrap .section5 .org .depth2 .lst2 .depth5 > li > span{width:6.32rem;padding:.7rem 0;} .klic_wrap .section5 .org .lst2 .depth4{position:relative;overflow:hidden;margin-top:1.5rem;padding-top:1.5rem;} .klic_wrap .section5 .org .lst2 .depth5 > li:first-of-type > span:after{position:absolute;top:-1.5rem;left:50%;width:calc(100% + 0.85rem);height:3px;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth4 > li:last-of-type .depth5 > li:first-of-type > span:after{display:none;} .klic_wrap .section5 .org .lst2 .depth4 > li{float:left;margin:0 .35rem;} .klic_wrap .section5 .org .lst2 .depth5 > li:first-of-type > span:before{position:absolute;top:-1.5rem;left:50%;width:3px;height:1.5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth5 > li + li{margin-top:.5rem;} .klic_wrap .section5 .org .lst2 .depth6{margin-top:1.75rem;} .klic_wrap .section5 .org .lst2 .depth6 > li + li{margin-top:.25rem;} .klic_wrap .section5 .org .lst2 .depth6 > li:first-of-type:before{position:absolute;top:-1.75rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:1px;height:1.75rem;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth6 > li:first-of-type:after{position:absolute;top:-5px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0px;height:0px;border-right:2.5px solid transparent;border-left:3px solid transparent;border-top:3px solid #8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth6 > li > span{display:block;padding:.5rem 0;border:1px solid #8a8cc8;font-size:.9rem;font-weight:300;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body{text-align:left;} .klic_wrap .greeting_body .top { position: relative; padding-left: 32.25rem; padding-top: 1.5rem; transition: all 0.5s ease; } .klic_wrap .greeting_body .top::after { content: ''; display: block; width: 0; height: calc(100% + 7.7rem); background: #ecf0ff; border-bottom-right-radius: 10rem; position: absolute; top: -5rem; right: -15.5rem; z-index: -1; transition: all 1s ease;} .start .klic_wrap .greeting_body .top::after { width: 200%;} .klic_wrap .greeting_body .top .txtBox { opacity: 0;} .start .klic_wrap .greeting_body .top .txtBox {animation: up11 0.5s ease forwards; animation-delay: 1.2s; } .klic_wrap .greeting_body .top .txtBox::after { content: ''; display: block; clear: both;} .klic_wrap .greeting_body .top .txtBox .sTit { font-size: 2.1rem; color: #111; margin-top: 0.5rem; line-height: 1.2;} .klic_wrap .greeting_body .top .txtBox .sTit .txtBk { font-weight: 600;} .klic_wrap .greeting_body .top .txtBox .sTit .txtBl { font-weight: 600; color: #1c39b7;} .klic_wrap .greeting_body .top .txtBox .mTit { font-size: 3.5rem; font-weight: 600; color: #1c39b7; line-height: 1.2;} .klic_wrap .greeting_body .top .txtBox .sign { font-size: 1rem; color: #000; float: right; margin-top: 2rem;} .klic_wrap .greeting_body .top .txtBox .sign span { font-size: 1.5rem; font-weight: 600; margin-left: 0.5rem;} .klic_wrap .greeting_body .imgBox{overflow:hidden;position:absolute;top:0.5rem;left:0;opacity: 0;width:27.85rem;height:19.3rem; -webkit-transition:opacity .2s, left .2s;-ms-transition:opacity .2s, left .2s;transition:opacity .2s, left .2s; border-bottom-right-radius: 6.5rem; font-size: 0;} .start .greeting_body .imgBox{animation: up11 0.5s ease forwards; animation-delay: 1s; } .klic_wrap .greeting_body .imgBox .img{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:180%;height:100%;background:url('/images/klic/sub/greeting_img02.png') no-repeat 50% 50%; } .klic_wrap .greeting_body .bottom { margin-top: 7rem;} .klic_wrap .greeting_body .bottom ul::after { clear: both; display: block; content: '';} .klic_wrap .greeting_body .bottom ul li { width: 47%; float: left; word-break: keep-all; opacity: 0;} .start .klic_wrap .greeting_body .bottom ul li:nth-child(1) {animation: left11 0.5s ease forwards; animation-delay: 1.5s; } .start .klic_wrap .greeting_body .bottom ul li:nth-child(2) {animation: right11 0.5s ease forwards; animation-delay: 1.6s; } .klic_wrap .greeting_body .bottom ul li + li { margin-left: 6%;} .klic_wrap .greeting_body .bottom ul li p{ margin-bottom: 1.75rem;} @keyframes up11{ 0%{ transform: translateY(5rem); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } @keyframes left11{ 0%{ transform: translateX(-5rem); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } @keyframes right11{ 0%{ transform: translateX(5rem); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } /* //기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .section1.active .greeting{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .klic_wrap .section1.active .clip_img{opacity:1;right:0;} .klic_wrap .section2.active .vision_lst > li{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .klic_wrap .section3.active:before{-webkit-transform:scale(1) translate(-50%, -50%);transform:scale(1) translate(-50%, -50%);} .klic_wrap .section3.active .value_lst > li{opacity:1;} /*** 레이어팝업 :인사말 더보기***/ .layerPop.klic{padding-top:1.5rem;word-wrap:break-word;} .layerPop.klic .container:before, .layerPop.klic .container:after{content:"";display:block;position:absolute;z-index:-2;-webkit-transform:skew(-35deg);-ms-transform:skew(-35deg);transform:skew(-35deg);width:630px;height:703px;background:#1b20d5;} .layerPop.klic .container:before{top:13.7rem;right:calc(100% - -10.5rem);} .layerPop.klic .container:after{top:20.7rem;left:calc(100% - 11rem);} .layerPop.klic .layerPop_tit{margin-bottom:9.5rem;} .layerPop.klic .heading1{position:relative;margin-bottom:3.75rem;background:url('/images/klic/sub/greeting_bg02.png') no-repeat right 1.35rem;} .layerPop.klic .heading1 > strong{margin-bottom:2.5rem;} .layerPop.klic .heading1 .txt1{width:50%;font-size:1.4rem;font-weight:200;color:#18181b;} .layerPop.klic .greeting_body{position:relative;font-size:0.9rem;line-height:1.73;} .layerPop.klic .greeting_body > .top{padding-right:30rem;} .layerPop.klic .greeting_body .imgBox{overflow:hidden;position:absolute;top:-3.3rem;right:-100%;z-index:-1;-webkit-transform:skew(-35deg);-ms-transform:skew(-35deg);transform:skew(-35deg);width:31.5rem;height:35.15rem;box-shadow:rgba(0,0,0,0.22) 0.2rem 0.2rem 2rem;-webkit-transition:opacity .2s, right .2s;-ms-transition:opacity .2s, right .2s;transition:opacity .2s, right .2s;} .layerPop.klic.active .greeting_body .imgBox{right:-10rem;opacity:1;} .layerPop.klic .greeting_body .imgBox .img{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) skew(35deg);-ms-transform:translate(-50%, -50%) skew(35deg);transform:translate(-50%, -50%) skew(35deg);width:180%;height:100%;background:url('/images/klic/sub/greeting_img.png') no-repeat 50% 50%;background-size:cover;} .layerPop.klic .greeting_body p ~ p{margin-top:2.25rem;} .layerPop.klic .greeting_body p .txt1{color:#222ac9;} .layerPop.klic .greeting_body p .txt2{font-weight:700;} .layerPop.klic .greeting_body p.sign{margin-top:1rem;margin-bottom:2.25rem;letter-spacing:-1px;text-align:right;} .layerPop.klic .greeting_body p.sign span{display:inline-block;position:relative;padding-right:7rem;} .layerPop.klic .greeting_body p.sign span:before{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:115px;height:60px;background:url(/images/klic/sub/sign.jpg)no-repeat center/cover;content:'';} .layerPop.klic .btn_close_layerPop:hover, .layerPop.klic .btn_close_layerPop:focus{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);} /** contact **/ .contact_wrap .title{text-align:center;margin-bottom:2.5rem;} .contact_wrap .title .bul03{position:relative;display:block;font-size:1.2rem;color:#3f3fe3;text-transform:uppercase;font-weight:700;font-family:'Play';letter-spacing:2px;overflow:hidden;} .contact_wrap .title strong{position:relative;display:block;font-size:3rem;font-weight:800;letter-spacing:-1px;overflow:hidden;} .contact_wrap .title p{position:relative;display:block;font-size:2.5rem;font-weight:100;line-height:1.5;overflow:hidden;} .contact_wrap .title em{position:relative;display:block;transform:translateY(100%);-webkit-transform:translateY(100%);} .contact_wrap .title span em{transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;} .contact_wrap .title strong em{transition:all 0.5s 0.3s ease-out;-webkit-transition:all 0.5s 0.3s ease-out;} .contact_wrap .title p em{transition:all 0.5s 0.6s ease-out;-webkit-transition:all 0.5s 0.6s ease-out;} .contact_wrap .container{width:66rem !important;margin-top: 4rem;} .contact_wrap ul[class^="culture"]{position:relative;text-align:center;height:auto;overflow:hidden;padding-top:2rem;} .contact_wrap ul[class^="culture"] > li{position:relative;transform:translateY(-10%);-webkit-transform:translateY(-10%);opacity:0;transition:transform 0.6s, opacity 0.6s;-webkit-transition:transform 0.6s, opacity 0.6s;} .contact_wrap ul[class^="culture"] > li:first-child{float:left;transition-delay:0.8s;} .contact_wrap ul[class^="culture"] > li:last-child{float:right;transition-delay:1.0s;} .contact_wrap ul[class^="culture"] li .img{display:block;} .contact_wrap ul[class^="culture"] li .img img{max-width:100%;} .contact_wrap ul[class^="culture"] li p{font-size:1.1rem;color:#0d0df3;font-weight:600;} .contact_wrap ul[class^="culture"] li strong{position:relative;display:block;margin:2rem 0;} .contact_wrap ul[class^="culture"] li strong:before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#17171f;} .contact_wrap ul[class^="culture"] li strong em{position:relative;font-size:1rem;background:#fff;padding:0 1rem;} .contact_wrap ul[class^="culture"] li ul{height:auto;overflow:hidden;} .contact_wrap ul[class^="culture"] li ul li{display:inline-block;} .contact_wrap ul[class^="culture"] li ul li:nth-child(2){padding:0 4rem;} .contact_wrap .section2 ul.culture2:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);-webkit-transform:translateX(-50%);width:58px;height:0;background:url('/images/klic/sub/culture_arrw.png') no-repeat;opacity:0;transition:all 0.5s 0.5s;-webkit-transition:all 0.5s 0.5s;} .contact_wrap .section2 ul.culture2 li{width:45%;} .contact_wrap .section2 .culture_box{position:relative;width:100%;background:url('/images/klic/sub/bg_ptrn.jpg');border-radius:1rem;overflow:hidden; padding:2.5rem;text-align:center;margin:2.5rem 0;transform:translateY(-10%);-webkit-transform:translateY(-10%);opacity:0;transition:all 0.6s;-webkit-transition:all 0.6s;} .contact_wrap .section2 .culture2 + .culture_box{transition-delay:1.3s;-webkit-transition-delay:1.3s;} .contact_wrap .section2 .culture_box p{font-size:1rem;font-weight:700;} .contact_wrap .section2 .culture_box:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:50%;border:1px solid #8787ee;border-top:none;border-radius:0 0 1rem 1rem; } .contact_wrap .section3{padding:5rem 0 0;height:41.75rem;} .contact_wrap .section3 .title{margin-bottom:3rem;} .contact_wrap .section3 .wlb_list > li{float:left;width:25%;height:16rem;padding:0 1.5rem;transform:translateX(-10%);-webkit-transform:translateX(-10%);opacity:0;transition:all 0.6s ease;-webkit-transition:all 0.5s ease;} .contact_wrap .section3 .wlb_list > li:not(:nth-child(4n+1)){border-left:1px solid #bfc7e9;} .contact_wrap .section3 .wlb_list > li:nth-child(n+5){border-top:1px solid #bfc7e9;padding-top:1.5rem;} .contact_wrap .section3 .wlb_list > li:nth-child(1){transition-delay:0.5s;} .contact_wrap .section3 .wlb_list > li:nth-child(2){transition-delay:0.6s;} .contact_wrap .section3 .wlb_list > li:nth-child(3){transition-delay:0.7s;} .contact_wrap .section3 .wlb_list > li:nth-child(4){transition-delay:0.8s;} .contact_wrap .section3 .wlb_list > li:nth-child(5){transition-delay:0.9s;} .contact_wrap .section3 .wlb_list > li:nth-child(6){transition-delay:1.0s;} .contact_wrap .section3 .wlb_list > li:nth-child(7){transition-delay:1.1s;} .contact_wrap .section3 .wlb_list > li:nth-child(8){transition-delay:1.2s;} .contact_wrap .section3 .wlb_list > li strong{display:block;font-size:1.5rem;font-weight:700;margin-bottom:1rem;} .contact_wrap .section4 { padding-top: 8rem;} .contact_wrap .section4 .recruit_wrap{position:relative;text-align:center;padding:5.5rem 2rem;overflow:hidden;} .contact_wrap .section4 .recruit_wrap:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url('/images/klic/sub/recruit_bg.jpg') no-repeat center / cover;transform:scale(1);-webkit-transform:scale(1);transition:transform 0.8s;-webkit-transition:transform 0.8s;} .contact_wrap .section4 .recruit_wrap .recruit_list{position:relative;max-width:70rem;height:auto;margin:0 auto;overflow:hidden;} .contact_wrap .section4 .recruit_wrap .recruit_list li{position:relative;width:25%;float:left;padding-left:2.5rem;color:#fff;font-size:1.75rem;font-weight:700;line-height:1.5;text-align:left;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;-webkit-transition:transform 0.8s, opacity 0.8s;transition:transform 0.8s, opacity 0.8s;-webkit-transition-delay:.5s;transition-delay:.5s;} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(2){-webkit-transition-delay:0.8s;transition-delay:0.8s;} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(3){-webkit-transition-delay:1.1s;transition-delay:1.1s;} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(4){-webkit-transition-delay:1.4s;transition-delay:1.4s;} .contact_wrap .section4 .recruit_wrap .recruit_list li em{position:absolute;left:0;top:3.3rem;width:2.5rem;color:#2830a4;text-shadow:-1px -1px 0 rgba(255,255,255,.17), 1px -1px 0 rgba(255,255,255,.17), -1px 1px 0 rgba(255,255,255,.17), 1px 1px 0 rgba(255,255,255,.17);font-family:'play';font-size:2rem;text-align:center;} .contact_wrap .section4 .recruit_wrap .mail{position:relative;display:none;text-align:center;color:#fff;font-weight:700;font-family:'play';font-size:1.2rem;border-bottom:3px solid #fff;transition:all 0.3s;-webkit-transition:all 0.3s;} .contact_wrap .section4 .recruit_wrap .mail:hover, .contact_wrap .section4 .recruit_wrap .mail:focus{letter-spacing:2px;} .contact_wrap .section4 .recruit_wrap .more_btn_black{display:none;margin-top:1.5rem;} .contact_wrap .section5{margin-top:8rem;} .contact_wrap .section5 .tab_st1_box{opacity:0;position:absolute;bottom:0;left:0;margin-bottom:2rem;overflow:visible;transition:opacity 0.5s 0.5s, left 0.5s 0.5s;-webkit-transition:opacity 0.5s 0.5s, left 0.5s 0.5s;z-index:1;} .contact_wrap .section5 .tab_st1_box .tab_st1{overflow:visible;} .contact_wrap .section5 .tab_st1_box .tab_st1:before{display:none;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li { width: auto;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a{padding:0 2rem;font-weight:600;font-size:0.95rem; border: none; background: none;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li:first-child a{padding:0 2rem 0 8rem;z-index:2;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a:hover, .contact_wrap .section5 .tab_st1_box .tab_st1 > li a:focus{color:#262ccc; background: #fff;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li.on a{color:#fff;background: none; } .contact_wrap .section5 .tab_st1_box .tab_st1 > li a::before { display: none;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a > span{z-index:2;padding:1rem 0;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a > span:before{display:none;} .contact_wrap .section5 #con_com_box{position:relative;padding-bottom:5.25rem;} .contact_wrap .section5 #con_com_box .map{width:100%;height:31rem;background:#eee;} .contact_wrap .section5 #con_com_box .con{position:absolute;left:-5%;bottom:0;width:40rem;height:13rem;transition:all 0.5s 0.8s;-webkit-transition:all 0.5s 0.8s;opacity:0;} .contact_wrap .section5 #con_com_box .con:before{content:'';position:absolute;left:-20%;top:0;width:100%;height:100%;background:#262733;transform:skewX(-35deg);-webkit-transform:skewX(-35deg);} .contact_wrap .section5 #con_com_box .con > p{position:absolute;left:0;transform:rotate(90deg);-webkit-transform:rotate(90deg);top:4.5rem;font-size:1.25rem;color:#fff;opacity:0.1;font-family:'play';font-weight:700;} .contact_wrap .section5 #con_com_box .con > ul{position:relative;padding:1.7rem 14rem 0 6rem;} .contact_wrap .section5 #con_com_box .con > ul li{ color:#fff; padding:0 0 0.5rem;} .contact_wrap .section5 #con_com_box .con > ul li.num{font-family:'play';} .contact_wrap .section5 #con_com_box .con > ul li.more{text-align:right;} .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more{position:relative;display:inline-block;font-size:0.8rem;color:#bdbdbf;line-height:2.5rem;padding-right:1.2rem;transition:all 0.3s;-webkit-transition:all 0.3s;} .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more:before{content:'';position:absolute;right:0;bottom:0;width:4rem;height:3px;background:#fff;transition:all 0.3s;-webkit-transition:all 0.3s;} .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more:hover, .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more:focus{color:#fff;letter-spacing:2px;padding-right:0.5rem;} .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more:hover:before, .contact_wrap .section5 #con_com_box .con > ul li.more .btn_more:focus:before{width:6rem;} .contact_wrap .active .title em, .contact_wrap .active .title em{transform:translateY(0);-webkit-transform:translateY(0);} .contact_wrap .active ul[class^="culture"] > li{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section2.active ul.culture2:before{opacity:1;height:101px;} .contact_wrap .section2.active .culture_box{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section3.active .wlb_list > li{transform:translateX(0);-webkit-transform:translateX(0);opacity:1;} .contact_wrap .section3.active .wlb_list::after { content: ''; display: block; clear: both;} .contact_wrap .section4.active .recruit_wrap:before{transform:scale(1.2);-webkit-transform:scale(1.2);} .contact_wrap .section4.active .recruit_wrap .recruit_list li{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .contact_wrap .section5.active #con_com_box .con{left:0;opacity:1;} .contact_wrap .section5.active .tab_st1_box{left:30%;opacity:1;} .contact_wrap .section5 .tab_st1_box .contactMove{display:inline-block;opacity:0;position:absolute;top:0;height:3.25rem;transform:skew(-35deg);-webkit-transform:skew(-35deg);background:#262ccc;-webkit-transition:opacity .15s cubic-bezier(0.45, 0.05, 0.55, 0.95);-ms-transition:opacity .15s cubic-bezier(0.45, 0.05, 0.55, 0.95);transition:opacity .15s cubic-bezier(0.45, 0.05, 0.55, 0.95);} /*business*/ @keyframes title_bar{ 0%{left:0;} 100%{left:100%;} } @-webkit-keyframes title_bar{ 0%{left:0;} 100%{left:100%;} } .business .section1 .title{text-align:center;margin-bottom:6rem;} .business .section1 .title h4{position:relative;font-size:5rem;font-weight:800;line-height:1.3;margin-bottom:2rem;letter-spacing:8px;opacity:0;transition:all 1s;-webkit-transition:all 1s; } .business .section1 .title h4:before{content:'';position:absolute;left:-100%;top:0;width:10rem;height:100%;background:rgba(255,255,255,0.3);transform:skewX(-35deg);-webkit-transform:skewX(-35deg);animation:title_bar 0.7s 0.8s ease-out;-webkit-animation:title_bar 0.7s 0.8s ease-out;} .business .section1 .title h4 br{display:none;} .business .section1 .title p{font-size:1.5rem;line-height:1.3;letter-spacing:-0.5px;opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:all 0.5s 0.3s;-webkit-transition:all 0.5s 0.3s;} .business .section1 .title p strong{position:relative;font-weight:400;} .business .section1 .title p strong:before{content:'';position:absolute;left:0;bottom:0;width:0;height:0.8rem;background:#3a54f3;opacity:0.4;transition:all 0.3s 0.7s;-webkit-transition:all 0.3s 0.7s;} .business .con{position:relative;text-align:center;margin-bottom:12rem;} .business .con .tit{position:absolute;bottom:5rem;font-family:'play';font-weight:700;color:#1319d3;font-size:8.25rem;z-index:2;opacity:0;transition:opacity 0.4s 0.6s, right 0.4s 0.6s, left 0.4s 0.6s;-webkit-transition:opacity 0.4s 0.6s, right 0.4s 0.6s, left 0.4s 0.6s;} .business .con .img{position:absolute;max-width:60%;height:33rem;overflow:hidden;opacity:0; -webkit-transition:all 0.6s;transition:all 0.6s;-webkit-transition-delay:0.2s;transition-delay:0.2s;} .business .con .img:before{content:'';position:absolute;right:0;top:0;width:0;height:0;border-left:25rem solid transparent; border-bottom:33rem solid #fff;} .business .con .txt{position:relative;text-align:left;width:45%;height:33rem;float:right;padding-top:4rem;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;-webkit-transition:transform 0.5s, opacity 0.5s;transition:transform 0.5s, opacity 0.5s;} .business .con .txt dl{height:auto;overflow:hidden; margin:0 0 3rem;} .business .con .txt dl dt{font-size:2rem;letter-spacing:-2px;width:15rem;float:left;} .business .con .txt dl dt strong{font-weight:800;} .business .con .txt dl dd{padding-top:0.5rem;float:right;width:calc(100% - 15rem);} .business .con .txt dl dd ul li{padding:0 0 0.3rem;font-size:1rem;} .business .con .more_btn{text-transform:uppercase;margin-top:1rem;} .business .con.txt_right .tit{left:0;} .business .con.txt_right .img{left:-100%;} .business .con.txt_left .tit{right:0;} .business .con.txt_left .img{right:-100%;} .business .con.txt_left .img:before{right:auto;left:0;border-left:none;border-top:33rem solid #fff;border-right:25rem solid transparent;} .business .con.txt_left .txt{float:left;} .business .section6{height:50rem;width: calc(100vw + 1rem);position: relative;left: 50%;transform: translateX(-50%);} .business .section6 h4{font-size:8.25rem;text-align:right;font-family:'play';font-weight:700;letter-spacing:-10px;padding:0 4rem;transform:translateX(10%);-webkit-transform:translateX(10%);opacity:0;transition:all 0.5s;-webkit-transition:all 0.5s;} .business .section6 .bg{position:absolute;left:0;bottom:0;width:100%;height:calc(100% - 8rem);background:url('/images/klic/sub/business_bg5.jpg') no-repeat center / cover;z-index:-1;transform:scale(1.3);-webkit-transform:scale(1.3);opacity:0;transition:all 0.8s;-webkit-transition:all 0.8s; } .business .section6 .request_list{margin:0 -2rem;} .business .section6 .request_list > li{display:block;width:25%;float:left;padding:0 2rem;} .business .section6 .request_list > li dl dt{display:block;border-bottom:3px solid #000;line-height:1.2;} .business .section6 .request_list > li dl dt strong{ font-family:'play';font-size:1.5rem;font-weight:700;} .business .section6 .request_list > li dl dt p{color:#494956;margin-bottom:0.8rem;} .business .section6 .request_list > li dl dd ul li{position:relative;margin-top:1.5rem;padding-left:1.9rem;} .business .section6 .request_list > li dl dd ul li:before{position:absolute;left:0;top:0;font-family:'xeicon';font-size:1.2rem;color:#1414e7;line-height:1;} .business .section6 .request_list > li dl dd ul li.person:before{content:"\e9e6" } .business .section6 .request_list > li dl dd ul li.mail:before{content:"\ea07" } .business .section6 .request_list > li dl dd ul li.phone:before{content:"\e9d3" } .business .section6 .request_list > li dl dd ul li:after{content:'';position:absolute;left:1.5rem;top:0;width:5px;height:5px;background:#1414e7;border-radius:50%;} .business .section1.active .title h4{letter-spacing:0;opacity:1;} .business .section1.active .title p{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .business .section1.active .title p strong:before{width:100%;} .business .active .con.txt_right .tit{opacity:1;left:20%;} .business .active .con.txt_left .tit{opacity:1;right:50%;} .business .section3.active .con.txt_left .tit{right:33%;} .business .active .con.txt_right .img{opacity:1;left:0;} .business .active .con.txt_left .img{opacity:1;right:0;} .business .active .con .txt{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .business .section6.active .bg{transform:scale(1);-webkit-transform:scale(1);opacity:1;} .business .section6.active h4{transform:translateX(0);-webkit-transform:translateX(0);opacity:1;} .business .section4.active .con.txt_left .tit{right:30%;} /*business_infra*/ @keyframes busin_infra{ 0%{transform:translateY(0);-webkit-transform:translateY(0);} 50%{transform:translateY(0.5rem);-webkit-transform:translateY(0.5rem);} 100%{transform:translateY(0);-webkit-transform:translateY(0);} } @-webkit-keyframes busin_infra{ 0%{transform:translateY(0);-webkit-transform:translateY(0);} 50%{transform:translateY(0.5rem);-webkit-transform:translateY(0.5rem);} 100%{transform:translateY(0);-webkit-transform:translateY(0);} } .business_infra .section1 .con_infra{position:relative;width:35.3rem;height:35.3rem;margin:5rem auto;padding:9.5rem 0;} .business_infra .section1 .con_infra:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:100%;height:100%;border-radius:50%;background:url('/images/klic/sub/infra_bg.png');} .business_infra .section1 .con_infra .tit{position:relative;display:table;width:16.15rem;height:16.15rem;border-radius:50%;background:#423ee2;box-shadow:7px 7px 29px rgba(0,0,0,.5);-webkit-box-shadow:7px 7px 29px rgba(0,0,0,.5);margin:0 auto;} .business_infra .section1 .con_infra .tit p{display:table-cell;vertical-align:middle;text-align:center;padding-top:0.5rem;} .business_infra .section1 .con_infra .tit p span{display:block;color:#fff;font-size:1.2rem;padding-top:0.5rem;} .business_infra .section1 .con_infra ul li{position:absolute;font-size:1.75rem;font-weight:bold;letter-spacing:-1px;opacity:0;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;} .business_infra .section1 .con_infra ul li:nth-child(1){color:#0820b2;} .business_infra .section1 .con_infra ul li:nth-child(2){color:#1226eb;transition-delay:0.3s;-webkit-transition-delay:0.3s;} .business_infra .section1 .con_infra ul li:nth-child(3){color:#0820b2;transition-delay:0.6s;-webkit-transition-delay:0.6s;} .business_infra .section1 .con_infra ul li:nth-child(4){color:#2540e3;transition-delay:0.3s;-webkit-transition-delay:0.3s;} .business_infra .section1 .con_infra ul li:nth-child(5){color:#1414d6;transition-delay:0.2s;-webkit-transition-delay:0.2s;} .business_infra .section2 .container2 { position: relative; border-top: 2px solid #383838; padding: 5.8rem 0 5.8rem 3.9rem;} .business_infra .section2 .container2 .spot_img { width: calc(100% - 24.3rem); position: relative; } .business_infra .section2 .container2 .spot_img img { width: 100%; height: auto; } .business_infra .section2 .container2 .con_infra { position: absolute; top: 50%; right: 2.1rem; transform: translateY(-50%); } .business_infra .section2 .container2 .con_infra .tit { position: relative; } .business_infra .section2 .container2 .con_infra .tit::before { position: absolute; content: ""; top: 0; left: 0; width: 55px; height: 5px; background: #433ee2; } .business_infra .section2 .container2 .con_infra .tit h4 { font-size: 3rem; font-weight: 800; padding-bottom: 1.3rem; } .business_infra .section2 .container2 .con_infra .tit a { font-size: 1rem; } .business_infra .section2 .container2 .con_infra .tit div { position: relative; width: 10.5rem; height: 3rem; border: 1px solid #a1a1f9; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.22); text-align: center; margin-top: 2.3rem; background: #fff;} .business_infra .section2 .container2 div span { padding: 0.7rem 0; position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #1717d2; font-size: 1rem;} .business_infra .section3{text-align:center;} .business_infra .section3 .infra_cust_list ul{height:auto;padding:0 1.75rem;border-top:2px solid #383838;overflow:hidden;} .business_infra .section3 .infra_cust_list ul li{width:25%;float:left;margin-top:2rem;padding:0 1.25rem;} .business_infra .section3 .infra_cust_list ul li img{max-width:100%;} .business_infra .section3 .prev_btn{margin:10rem auto 5rem;} .business_infra .section1.active .con_infra ul li{opacity:1;animation:busin_infra 3s infinite ease-out;-webkit-animation:busin_infra 3s infinite ease-out;} .business_infra .section1.active .con_infra ul li:nth-child(1){top:4rem;left:13rem;} .business_infra .section1.active .con_infra ul li:nth-child(2){top:10rem;left:27rem;animation-delay:0.2s;-webkit-animation-delay:0.2s;} .business_infra .section1.active .con_infra ul li:nth-child(3){top:27rem;left:22rem;} .business_infra .section1.active .con_infra ul li:nth-child(4){top:30rem;left:4rem;animation-delay:0.2s;-webkit-animation-delay:0.2s;} .business_infra .section1.active .con_infra ul li:nth-child(5){top:16rem;left:-2rem;animation-delay:0.3s;-webkit-animation-delay:0.3s;} /*layerPop1*/ #layerPop1 { padding-top: 9.25rem; z-index: 3;} #layerPop1 .btn_close_layerPop { position: fixed; top: 6rem; right: auto; left: 50%; width: 4rem; height: 2.5rem; margin-left: -48rem; padding-top: 1rem; background: none; font-family: "Play"; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #000; text-align: center; } #layerPop1 .btn_close_layerPop::before { content: url(/images/klic/sub/popup_btn_list.png); display: block; position: absolute; top: 0; left: 0; animation: layerPop_story_close cubic-bezier(0.1, -0.6, 0.2, 0) infinite 1s; } #layerPop1 .container2 { position: relative; } #layerPop1 sup { color: #0036ff; } .detail_logo{ display: flex; width: 100%; justify-content: space-between; } #layerPop1 .detail_box1 { text-align: center; margin-bottom: 3.5rem; } #layerPop1 .detail_box1 h4 { font-size: 2.5rem; font-weight: 800; margin-bottom: 3.5rem;} #layerPop1 .detail_box1 em { color: #0820b2; } #layerPop1 .detail_box2 { margin-bottom: 6.5rem; } #layerPop1 .detail_box2 em { font-weight: 700; } #layerPop1 .detail_box2 p:nth-child(2) { margin: 2rem 0; } #layerPop1 .detail_box3 .detail_spot01 { position: relative; padding-bottom: 2rem; background: #f9f9f9; border-radius: 1rem; margin-bottom: 2rem;} #layerPop1 .detail_box3 .detail_spot01 img { position: absolute; top: -1.85rem; left: 50%; transform: translateX(-50%); } #layerPop1 .detail_box3 .detail_spot01 ul { padding: 5rem 1rem 0 3rem; } #layerPop1 .detail_box3 .detail_spot01 ul li { position: relative; padding: 0.5rem 0 0.5rem 0.5rem} #layerPop1 .detail_box3 .detail_spot01 ul li::before { content: ""; position: absolute; left: 0; top: 0.9rem; width: 6px; height: 6px; background: #0036ff; border-radius: 50%;} #layerPop1 .detail_box3 .detail_spot02 em { font-weight: 700; } #layerPop1 .detail_box3 .detail_spot02 img { width: 100%; height: auto; } #layerPop1 .detail_box3 .detail_spot02 p { margin-bottom: 1.5rem; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot01 { border: 1px solid #e6e6ed; border-radius: 1.5rem; padding: 1.5rem; margin-bottom: 4rem;} #layerPop1 .detail_box3 .detail_spot02 .sub_spot01 em { color: #0036ff; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 { width: 100%; margin-bottom: 2rem; clear: both;} #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 .sub_left { width: 46.5%; float: left; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 .sub_right { width: 46.5%; float: right; margin-top: -0.35rem; margin-bottom: 2rem;} #layerPop1 .detail_box3 .detail_spot02 .sub_detail { width: 100%; border-radius: 1rem; margin-top: 1.5rem; background: #f5f6fe; padding: 1rem 2.5rem 1rem; } #layerPop1 .detail_box3 .detail_spot02 ul li { overflow: hidden; white-space: nowrap; max-width: 25rem; text-overflow: ellipsis; position: relative; padding:0.3rem 0.5rem; font-size: 0.8rem;} #layerPop1 .detail_box3 .detail_spot02 .sub_spot01 ul li { overflow: hidden; white-space: nowrap; max-width: 100%; text-overflow:ellipsis } #layerPop1 .detail_box3 .detail_spot02 .sub_detail ul li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 6px; height: 6px; background: #0036ff; border-radius: 50%;} #layerPop1 .detail_box3 .detail_spot02 h4 { margin-bottom: 1rem; text-align: center; color: #0036ff; font-size: 1rem;} #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 { clear: both; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 .sub_left { width: 46.5%; float: left; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 .sub_right { width: 46.5%; float: right; margin-top: -0.38rem;} #layerPop1 .detail_box3 .detail_spot02 .finish .blue_em { color: #0036ff; } #layerPop1 .detail_box3 .detail_spot02 .finish { clear: both; margin-bottom: 3rem; padding-top: 5rem;} /*main_client*/ .main_client .container{width:64rem !important;} .main_client h4{display:inline-block;position:relative;font-size:2rem;line-height:1;font-weight:800;padding-right:1rem;} .main_client h4:before{content:'';position:absolute;right:0;bottom:0;width:0.5rem;height:0.5rem;border-radius:50%;background:#1046f5;} .main_client ul{position:relative;height:auto;overflow:hidden;margin:1rem 0 5rem;} .main_client ul:before{content:'';position:absolute;left:0;top:0;width:0;height:4px;background:#000;transition:all 0.5s;-webkit-transition:all 0.5s;} .main_client ul li{display:block;width:14.2%;float:left;margin-top:1.5rem;text-align:center;} .main_client ul li img{max-width:100%;} .main_client .active ul:before{width:100%;} .main_client .prev_btn{margin:0 auto 5rem;} dl.con_box_st{display:block;float:left;text-align:center;opacity:0;transform:translateY(-5%);-webkit-transform:translateY(-5%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;transition-delay:0.2s;-webkit-transition-delay:0.2s;} dl.con_box_st + dl{transition-delay:0.6s;-webkit-transition-delay:0.6s;} dl.con_box_st + dl + dl{transition-delay:1.0s;-webkit-transition-delay:1.0s;} dl.con_box_st dt{position:relative;display:block;text-align:center;margin-bottom:2rem;} dl.con_box_st dt:before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#000;} dl.con_box_st dt span{position:relative;font-size:1.2rem;font-weight:700;padding:0 1rem;background:#fff;} dl.con_box_st dd:after{display:block;clear:both;content:"";} .active dl.con_box_st{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /*business_rd*/ .business_rd .heading2 > p{text-align:left;font-size:1.1rem;margin-bottom:8rem;} .business_rd .heading2 > ul{text-align:left;} .bu_st1, .list_st1 > li{ margin-top:0.5rem;} .business_rd .heading2 > ul li:before{width:8px;height:8px;} .business_rd .section2 dl{width:46%;} .business_rd .section2 dl + dl{margin-left:8%;} .business_rd .section2 dl dd.txt{display:block;color:#1226eb;font-size:1rem;margin-top:2rem;} .business_rd .section2 dl.site_struct1 dd li{height:auto;overflow:hidden;float:left;} .business_rd .section2 dl.site_struct1 dd li:nth-child(n+3){margin-top:2rem;} .business_rd .section2 dl.site_struct1 dd li:nth-child(even){float:right;} .business_rd .section2 dl.site_struct1 dd li span{display:inline-block;width:7rem;border-radius:50%;background:#5555de;text-align:center;line-height:7rem;color:#fff;font-size:1rem;} .business_rd .section2 dl.site_struct1 dd li span:nth-child(2){border:1px solid #5555de;color:#5555de;background:url('/images/klic/sub/bg_ptrn.jpg');} .business_rd .section2 dl.site_struct2 dd > div{position:relative;float:left;} .business_rd .section2 dl.site_struct2 dd > div:before{content:'';position:absolute;top:50%;left:50%;width:216px;height:57px;background:url('/images/klic/sub/site_struct2_arrw.png') no-repeat;transform:translate(30px,-50%);-webkit-transform:translate(30px,-50%);z-index:2;} .business_rd .section2 dl.site_struct2 dd > div p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:table;width:7rem;height:7rem;border-radius:50%;background:#3f3fe3;color:#fff;z-index:2;box-shadow:0 0 10px rgba(0,0,0,.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);} .business_rd .section2 dl.site_struct2 dd > div p span{display:table-cell;vertical-align:middle;} .business_rd .section2 dl.site_struct2 dd ul{position:relative;width:16.75rem;height:16.75rem;border-radius:50%;border:1px solid #b8b8ff;margin:0 auto;} .business_rd .section2 dl.site_struct2 dd ul:before{content:'';position:absolute;left:50%;top:0;width:1px;height:100%;background:#b8b8ff;} .business_rd .section2 dl.site_struct2 dd ul:after{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#b8b8ff;} .business_rd .section2 dl.site_struct2 dd ul li{display:block;width:50%;height:50%;float:left;line-height:8.3rem;color:#1717d2;} .business_rd .section2 dl.site_struct2 dd strong{display:table;width:7rem;height:7rem;float:right;background:#0d0df3;border-radius:50%;color:#fff;margin-top:5rem;} .business_rd .section2 dl.site_struct2 dd strong em{display:table-cell;vertical-align:middle;font-weight:400;} .business_rd .section3{padding:8rem 0;} .business_rd .section3 dl{width:22%;} .business_rd .section3 dl img{max-width:100%;} .business_rd .section3 dl + dl{width:30%;margin:0 6%;} .business_rd .section3 dl + dl + dl{width:36%;margin:0;} .business_rd .section4{padding-bottom:5rem;} .business_rd .section4 h4{font-size:2.5rem;} .business_rd .section4 ul{opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;transition-delay:0.4s;-webkit-transition-delay:0.4s;} .business_rd .section4.active ul{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .business_rd .prev_btn{margin:5rem auto;} /*design*/ @keyframes textBlue{ 0%{color:#000;} 100%{color:#070ede;} } @-webkit-keyframes textBlue{ 0%{color:#000;} 100%{color:#070ede;} } @keyframes lineRot{ 0%{transform:skewX(0);-webkit-transform:skewX(0);} 100%{transform:skewX(-30deg);-webkit-transform:skewX(-30deg);} } @-webkit-keyframes lineRot{ 0%{transform:skewX(0);-webkit-transform:skewX(0);} 100%{transform:skewX(-30deg);-webkit-transform:skewX(-30deg);} } .design .section1 .title{font-size:3rem;font-family:'play';font-weight:700;text-align:center;text-transform:uppercase;line-height:1;padding:2rem 0 5rem;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:opacity 0.8s, transform 0.8s;-webkit-transition:opacity 0.8s, transform 0.8s;} .design .section1 .title strong{display:block;font-size:4rem;} .design .section1 .title strong span{display:inline-block;position:relative;animation:textBounce 0.5s 2s;} .design .section1 .title:before{content:'';position:absolute;left:50%;top:12rem;margin-left:-1.5px;display:block;width:3px;height:0;background:#000;transition:height 0.3s 1.5s;-webkit-transition:height 0.3s 1.5s;animation:lineRot 0.3s 2s forwards;-webkit-animation:lineRot 0.3s 2s forwards;} .design .section1 .title strong em:nth-child(1){animation:textBlue 0.3s 1s ease forwards;-webkit-animation:textBlue 0.3s 1s ease forwards;} .design .section1 .title strong em:nth-child(2){animation:textBlue 0.3s 1.05s ease forwards;-webkit-animation:textBlue 0.3s 1.05s ease forwards;} .design .section1 .title strong em:nth-child(3){animation:textBlue 0.3s 1.15s ease forwards;-webkit-animation:textBlue 0.3s 1.15s ease forwards;} .design .section1 .title strong em:nth-child(4){animation:textBlue 0.3s 1.2s ease forwards;-webkit-animation:textBlue 0.3s 1.2s ease forwards;} .design .section1 .title strong em:nth-child(5){animation:textBlue 0.3s 1.25s ease forwards;-webkit-animation:textBlue 0.3s 1.25s ease forwards;} .design .section1 .title strong em:nth-child(6){animation:textBlue 0.3s 1.3s ease forwards;-webkit-animation:textBlue 0.3s 1.3s ease forwards;} .design .section1 .title strong em:nth-child(7){animation:textBlue 0.3s 1.35s ease forwards;-webkit-animation:textBlue 0.3s 1.35s ease forwards;} .design .section1 .title strong em:nth-child(8){animation:textBlue 0.3s 1.4s ease forwards;-webkit-animation:textBlue 0.3s 1.4s ease forwards;} .design .section1 .title strong em:nth-child(9){animation:textBlue 0.3s 1.45s ease forwards;-webkit-animation:textBlue 0.3s 1.45s ease forwards;} .design .section1 .title strong em:nth-child(10){animation:textBlue 0.3s 1.5s ease forwards;-webkit-animation:textBlue 0.3s 1.5s ease forwards;} .design .section2{padding:3rem 0 8rem;} .design .section2 .title{font-size:4rem;font-weight:800;text-align:center;margin-bottom:3.5rem;letter-spacing:15px;opacity:0;transition:opacity 1s, letter-spacing 1s;-webkit-transition:opacity 1s, letter-spacing 1s; } .design .section2 ul{overflow:hidden;} .design .section2 ul li{display:block;width:33.333%;float:left;padding:0 2rem;opacity:0;transform:translateY(20%);-webkit-transform:translateY(20%);transition:opacity 0.3s, transform 0.3s;-webkit-transition:opacity 0.3s, transform 0.3s;} .design .section2 ul li:nth-child(1){transition-delay:0.5s;} .design .section2 ul li:nth-child(2){transition-delay:0.7s;} .design .section2 ul li:nth-child(3){transition-delay:0.9s;} .design .section2 ul li p{position:relative;display:table;width:12.8rem;height:12.8rem;text-align:center;margin:0 auto;} .design .section2 ul li p.polygon1{border-radius:50%;background:#3036e9;} .design .section2 ul li p.polygon2{background:#360cd5;} .design .section2 ul li p.polygon3{background:url('/images/klic/sub/design_polygon.png') no-repeat center / cover;} .design .section2 ul li p em{display:table-cell;vertical-align:middle;color:#fff;font-family:'play';font-size:1.5rem;line-height:1.2;} .design .section2 ul li p em:before{content:'';position:absolute;width:1.4rem;height:1.4rem;background:#fff;border-radius:50%;border:1px solid #3036e9;box-shadow:3px 3px 7px rgba(0,0,0,.35);-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.35);} .design .section2 ul li p.polygon1 em:before{right:1.4rem;top:1rem;} .design .section2 ul li p.polygon2 em:before{left:3rem;top:-0.7rem;} .design .section2 ul li p.polygon3 em:before{right:0;bottom:3rem;} .design .section2 ul li strong{display:block;text-align:center;font-size:1.2rem;line-height:1.2;margin:2rem 0;} .design .section1.active .title{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .design .section1.active .title:before{height:3rem;} .design .section2.active .title{letter-spacing:-2px;opacity:1;} .design .section2.active ul li{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .design .prev_btn{margin:6rem auto 5rem;} /*edu_management*/ .edu_management .section1{text-align:center;} .edu_management .section1 .title{position:relative;font-size:2.3rem;color:#070ede;font-weight:700;z-index:2;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .edu_management .section1 .data_stand{position:relative;display:block;width:90%;height:16.8rem;background:url('/images/klic/sub/bg_ptrn.jpg');margin:-2rem auto 0;padding-top:4rem;border-radius:16.8rem;font-size:0; } .edu_management .section1 .data_stand:before{content:'';position:absolute;left:-1px;bottom:-1px;width:calc(100% + 2px);height:50%;border-radius:0 0 16.8rem 16.8rem;background:#2f35e3;z-index:-1;} .edu_management .section1 .data_stand li{display:inline-block;width:8.7rem;height:8.7rem;margin:0 1% 0;padding-top:2rem;border-radius:50%;background:#3d3dd8;transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transform:scale(1.1);transform:scale(1.1); opacity:0;} .edu_management .section1 .data_stand li span{display:block;color:#fff;font-size:1rem;} .edu_management .section1 .data_stand li:nth-child(1){transition-delay:0.3s;-webkit-transition-delay:0.3s;} .edu_management .section1 .data_stand li:nth-child(2){transition-delay:0.4s;-webkit-transition-delay:0.4s;} .edu_management .section1 .data_stand li:nth-child(3){transition-delay:0.5s;-webkit-transition-delay:0.5s;} .edu_management .section1 .data_stand li:nth-child(4){transition-delay:0.6s;-webkit-transition-delay:0.6s;} .edu_management .section1 .data_stand li:nth-child(5){transition-delay:0.7s;-webkit-transition-delay:0.7s;} .edu_management .section1 .line{position:relative;display:block;width:1px;height:8rem;margin:-0.3rem auto;z-index:2;} .edu_management .section1 .line:before, .edu_management .section1 .line:after{content:'';position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);width:0.6rem;height:0.6rem;background:#fff;border-radius:50%;border:1px solid #3e48ff;opacity:0;transition:opacity 0.3s, transform0.3s;-webkit-transition:opacity 0.3s, transform0.3s;} .edu_management .section1 .line:before{transition-delay:0.5s;-webkit-transition-delay:0.5s;} .edu_management .section1 .line:after{bottom:0;transition-delay:1.2s;-webkit-transition-delay:1.2s;} .edu_management .section1 .line em{display:block;width:1px;height:0;border-left:1px dotted #3e48ff;transition:height 0.5s 0.8s;-webkit-transition:height 0.5s 0.8s;} .edu_management .section1 .data_stand2{width:90%;height:auto;margin:0 auto;opacity:0;transform:translateY(30%);-webkit-transform:translateY(30%);transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;-webkit-transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;overflow:hidden;} .edu_management .section1 .data_stand2 li{display:block;float:left;width:35.3%;line-height:6rem;border-radius:6rem;text-align:center;color:#fff;font-size:1.25rem;} .edu_management .section1 .data_stand2 li:nth-child(1){background:rgba(27,106,213,0.7);transition-delay:1s;} .edu_management .section1 .data_stand2 li:nth-child(2){background:rgba(7,14,222,0.85);margin:0 -3%;transition-delay:1.2s;} .edu_management .section1 .data_stand2 li:nth-child(3){background:rgba(35,71,226,0.7);transition-delay:1.4s;} .edu_management .section2{padding:8rem 0;} .edu_management .section2 .heading2 > h4{margin-bottom:3rem;} .edu_management .section2 .heading2 > p{font-size:1.1rem;text-align:left;margin:0 0 5rem;} .edu_management .section2 dl{width:48%;} .edu_management .section2 dl + dl{float:right;} .edu_management .section2 dl dd{text-align:left;} .edu_management .section2 dl dd p{min-height:10rem;} .edu_management .section2 dl dd .rsp_img{background:#f5f5f9;padding:2rem;} .edu_management .section1.active .title{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .edu_management .section1.active .data_stand li{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .edu_management .section1.active .line:before, .edu_management .section1.active .line:after{opacity:1;} .edu_management .section1.active .line em{height:8rem;} .edu_management .section1.active .data_stand2{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .edu_management .prev_btn{margin:5rem auto;} /*nforU*/ @keyframes circle_line{ 0%{width:30rem;height:30rem;opacity:0;} 50%{opacity:1;} 100%{width:34.3rem;height:34.3rem;opacity:0;} } @-webkit-keyframes circle_line{ 0%{width:30rem;height:30rem;opacity:0;} 50%{opacity:1;} 100%{width:34.3rem;height:34.3rem;opacity:0;} } .nforU .heading2 > h4{margin-bottom:3rem;} .nforU .heading2 > p{font-size:1.2rem;} .nforU .web_access_wrap{margin:4rem -1rem 0;} .nforU .web_access_wrap:after{content:'';display:block;clear:both;} .nforU section dl{position:relative;width:33.333%;padding:0 1rem;float:left;opacity:0;transform:translateY(10%);-webkit-transform:translateY(10%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .nforU section dl.box1{transition-delay:0.7s;-webkit-transition-delay:0.7s;} .nforU section dl.box2{transition-delay:0.9s;-webkit-transition-delay:0.9s;} .nforU section dl.box3{transition-delay:1.1s;-webkit-transition-delay:1.1s;} .nforU section dl dt{position:relative;text-align:center;margin-bottom:1rem;} .nforU section dl dt:before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#000;} .nforU section dl dt span{position:relative;display:inline-block;background:#fff;padding:0 1rem;font-size:1.2rem;font-weight:700;letter-spacing:-1.5px;} .nforU section dl dd{text-align:center;padding:1.4rem;min-height:15.4rem;border-radius:1rem;} .nforU section dl dd img{max-width:100%;} .nforU .section2 p.blue{position:relative;font-size:1rem;color:#1226eb;text-align:center;z-index:2;margin:6rem 0 2rem; opacity:0;transform:translateX(-10%);-webkit-transform:translateX(-10%);transition:opacity 0.5s 0.3s, transform 0.5s 0.3s;-webkit-transition:opacity 0.5s, transform 0.5s;} .nforU .section2 .nforU_con{position:relative;opacity:0;transition:opacity 0.5s 0.3s;-webkit-transition:opacity 0.5s 0.3s;} .nforU .section2 .nforU_con:after{content:'';display:block;clear:both;} .nforU .section2 .nforU_con:before{content:'';position:absolute;left:50%;top:50%;width:34.3rem;height:34.3rem;border-radius:50%;border:1px solid #d3d3ff;background:#fff;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);animation:circle_line 2s infinite ease-in-out;-webkit-animation:circle_line 2s infinite ease-in-out;} .nforU .section2 .nforU_con .circle{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);display:table;width:10rem;height:10rem;background:#3f3fe3;border-radius:50%;box-shadow:0 0 14px rgba(0,0,0,.4);-webkit-box-shadow:0 0 14px rgba(0,0,0,.4);color:#fff;font-family:'play';font-size:1.4rem;font-weight:700;text-align:center;} .nforU .section2 .nforU_con .circle em{display:table-cell;vertical-align:middle;line-height:1.3;} .nforU .section2 .nforU_con .cms_list{width:33%;float:left;} .nforU .section2 .nforU_con .cms_list:after{content:'';display:block;clear:both;} .nforU .section2 .nforU_con .cms_list li{position:relative;display:block;width:100%;height:6.2rem;border-radius:6.2rem;border:1px solid #3f3fe3;background:#fff;float:left;margin:0.7rem 0;padding:0 1.5rem;} .nforU .section2 .nforU_con .cms_list li:before{content:'';position:absolute;top:50%; width:116px;height:57px;transform:translateY(-50%);-webkit-transform:translateY(-50%);} .nforU .section2 .nforU_con .cms_list li .tit{width:5rem;float:left;text-align:center;color:#0d0df3;font-size:1rem;font-weight:600;margin-top:1.2rem;} .nforU .section2 .nforU_con .cms_list li .tit img{display:block;margin:0 auto;} .nforU .section2 .nforU_con .cms_list li .txt{display:table;width:calc(100% - 5rem);height:100%;float:left;padding:0 0.5rem;} .nforU .section2 .nforU_con .cms_list li .txt span{display:table-cell;vertical-align:middle;font-size:0.8rem;} .nforU .section2 .nforU_con .cms_list.right{float:right;} .nforU .section2 .nforU_con .cms_list.right li:before{left:-130px;background:url('/images/klic/sub/nforU_arrw_right.png') no-repeat;} .nforU .section2 .nforU_con .cms_list.left .tit{float:right;} .nforU .section2 .nforU_con .cms_list.left li:before{right:-130px;background:url('/images/klic/sub/nforU_arrw.png') no-repeat;} .nforU .section2 .cms_list2{position:relative;margin-top:3rem;} .nforU .section2 .cms_list2:after{content:'';display:block;clear:both;} .nforU .section2 .cms_list2 li{position:relative;width:28.333%;margin:0 2.5%;float:left;text-align:center;font-size:1rem;} .nforU .section2 .cms_list2 li:before{content:'';position:absolute;left:0;bottom:0;width:0;height:3px;background:#3f3fe3;transition:width 0.5s 0.8s;-webkit-transition:width 0.5s 0.8s;} .nforU .section2 .cms_list2 li span{display:block;padding:1rem 0;} .nforU .section3{padding:10rem 0;} .nforU .section3 .web_access{position:relative;width:54rem;margin:6rem auto;} .nforU .section3 .web_access:after{content:'';display:block;clear:both;} .nforU .section3 .web_access li{display:table;width:11rem;height:11rem;background:#3f3fe3;border-radius:50%;color:#fff;font-size:1rem;} .nforU .section3 .web_access li:first-child{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:12.9rem;height:12.9rem;border:1px solid #3f3fe3;font-size:1.1rem;color:#2020eb;background:#fff;box-shadow:3px 3px 24px rgba(0,0,0,.2);-webkit-box-shadow:3px 3px 24px rgba(0,0,0,.2);} .nforU .section3 .web_access li:first-child:before, .nforU .section3 .web_access li:first-child:after{content:'';position:absolute;top:50%;width:173px;height:57px;opacity:0;transition:opacity 0.5s 0.6s;-webkit-transition:opacity 0.5s 0.7s;} .nforU .section3 .web_access li:first-child:before{transform:translate(10%,-50%);-webkit-transform:translate(10%,-50%);left:-180px;background:url('/images/klic/sub/web_access_arrw1.png') no-repeat;} .nforU .section3 .web_access li:first-child:after{transform:translate(-10%,-50%);-webkit-transform:translate(-10%,-50%);right:-180px;background:url('/images/klic/sub/web_access_arrw2.png') no-repeat;} .nforU .section3 .web_access li:nth-child(2){float:left;} .nforU .section3 .web_access li:nth-child(3){float:right;} .nforU .section3 .web_access li span{display:table-cell;vertical-align:middle;text-align:center;} .nforU .section3 .web_access li span em{display:block;word-break:keep-all;margin-top:0.5rem;padding:0 2rem;line-height:1.3;} .nforU .section3 dl dd{background:#f9f9f9;} .nforU .section3 dl dd ul > li{text-align:left;font-size:0.8rem;padding-left:6px;} .nforU .section3 dl dd ul > li:before{width:4px;height:4px;} .nforU .section4{padding:0 0 5rem;} .nforU .section4 dl.box3 dt br{display:none;} .nforU .section4 dl dd{border:1px solid #e6e6ed;background:#fff;} .start .nforU section dl{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .nforU .section2.active p.blue{opacity:1;transform:translateX(0);-webkit-transform:translateX(0);} .nforU .section2.active .nforU_con{opacity:1;} .nforU .section2.active .cms_list2 li:before{width:100%;} .nforU .section3.active .web_access li:first-child:before, .nforU .section3.active .web_access li:first-child:after{opacity:1;transform:translate(0,-50%);} .nforU .prev_btn{margin:5rem auto;} /*sso_solution*/ .sso_solution p.circle{position:relative;display:table;width:200px;height:200px;background:#3f3fe3;color:#fff;font-size:1.4rem;text-align:center;line-height:1.2;font-family:'play';border-radius:50%;box-shadow:0 0 14px rgba(0,0,0,.4);-webkit-box-shadow:0 0 14px rgba(0,0,0,.4);} .sso_solution p.circle span{display:table-cell;vertical-align:middle;} .sso_solution .section1 .klogin{opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:opacity 0.5s 0.8s, transform 0.5s 0.8s;-webkit-transition:opacity 0.5s 0.8s transform 0.5s 0.8s;} .sso_solution .section1 .klogin p.circle{margin:5rem auto 0;} .sso_solution .section1 .klogin p.circle span:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:250px;height:250px;border:1px solid #d7d7ff;border-radius:50%;} .sso_solution .section1 .klogin ul{position:relative;} .sso_solution .section1 .klogin ul:after{content:'';display:block;clear:both;} .sso_solution .section1 .klogin ul:before{content:'';position:absolute;left:50%;top:0;width:66%;height:91px;background:url('/images/klic/sub/sso_line.png') no-repeat center / 100% 100%;transform:translateX(-50%);-webkit-transform:translateX(-50%);} .sso_solution .section1 .klogin ul li{position:relative;display:block;width:30.333%;margin:0 1.5%;padding-top:91px;float:left;} .sso_solution .section1 .klogin ul li .dot:after{content:'';position:absolute;display:block;width:12px;height:12px;border-radius:50%;left:50%;top:86px;transform:translateX(-50%);background:#4242e2;} .sso_solution .section1 .klogin ul li .dot:before{content:'';position:absolute;display:block;width:12px;height:12px;border-radius:50%;border:1px solid #4242e2;background:#fff;} .sso_solution .section1 .klogin ul li:nth-child(1) .dot:before{top:-7px;right:0;margin-right:-43%;} .sso_solution .section1 .klogin ul li:nth-child(2) .dot:before{top:20px;left:50%;margin-left:-6px } .sso_solution .section1 .klogin ul li:nth-child(3) .dot:before{top:-7px;left:0;margin-left:-43%;} .sso_solution .section1 .klogin ul li p{display:block;width:100%;background:#fff;border:1px solid #3f3fe3;border-radius:5rem;text-align:center;font-size:1.1rem;line-height:5rem;font-weight:600;} .sso_solution .section1 .sso_con{position:relative;padding:8rem 0;opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:opacity 0.5s 1s, transform 0.5s 1s;-webkit-transition:opacity 0.5s 1s transform 0.5s 1s;} .sso_solution .section1 .sso_con:after{content:'';display:block;clear:both;} .sso_solution .section1 .sso_con:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:680px;height:680px;border:1px solid #d7d7ff;border-radius:50%;} .sso_solution .section1 .sso_con .circle{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%); z-index:2;} .sso_solution .section1 .sso_con .con{position:relative;display:table;width:48%;float:left;height:11rem;border-radius:1rem;border:1px solid #3f3fe3;margin:1rem 0;background:#fff;} .sso_solution .section1 .sso_con .con .tit{position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);text-align:center; color:#0d0df3;font-size:1rem;} .sso_solution .section1 .sso_con .con .tit img{display:block;margin:0 auto;} .sso_solution .section1 .sso_con .con ul{display:table-cell;vertical-align:middle;font-size:0.8rem;} .sso_solution .section1 .sso_con .con ul li{margin-top:0.2rem;padding-left:7px;} .sso_solution .section1 .sso_con .con ul li:before{top:4px;width:4px;height:4px;} .sso_solution .section1 .sso_con .con.left{padding:0 10rem 0 1.5rem;} .sso_solution .section1 .sso_con .con.left .tit{right:4rem;} .sso_solution .section1 .sso_con .con.right{padding:0 1.5rem 0 10rem;float:right;} .sso_solution .section1 .sso_con .con.right .tit{left:4rem;} .sso_solution .section2 .heading2 ul{text-align:left;opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;transition-delay:0.4s;-webkit-transition-delay:0.4s;} .sso_solution .section2 .con > ul{display:table;width:100%;font-size:0;line-height:0;text-align:center;margin-top:5rem } .sso_solution .section2 .con > ul > li{position:relative;display:table-cell;vertical-align:middle;opacity:0;transform:translateX(-10%);-webkit-transform:translateX(-10%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .sso_solution .section2 .con > ul > li:nth-child(1){width:18%;transition-delay:0.6s;-webkit-transition-delay:0.6s;} .sso_solution .section2 .con > ul > li:nth-child(2){width:30%;transition-delay:0.8s;-webkit-transition-delay:0.8s;} .sso_solution .section2 .con > ul > li:nth-child(3){width:30%;transition-delay:1.0s;-webkit-transition-delay:1.0s;} .sso_solution .section2 .con > ul > li:nth-child(4){width:22%;transition-delay:1.2s;-webkit-transition-delay:1.2s;} .sso_solution .section2 .con > ul > li .user{position:relative;} .sso_solution .section2 .con > ul > li .user:before{content:'';position:absolute;right:calc((100% - 7.6rem) / 2);top:3.2rem;width:1px;height:calc(100% - 6.4rem);border-left:1px dotted #3143e8;} .sso_solution .section2 .con > ul > li .user li{position:relative;width:100%;} .sso_solution .section2 .con > ul > li .user li:after{content:'';position:absolute;top:50%;left:7rem;width:calc((100% - 6.4rem) /2);border-top:1px dotted #3143e8;} .sso_solution .section2 .con > ul > li .user li:nth-child(2):after{width:calc(100% - 6.4rem);} .sso_solution .section2 .con > ul > li .user li p{position:relative;display:block;width:6.4rem;height:6.4rem;background:#fff;border:1px solid #3143e8;border-radius:50%; font-size:0.85rem;margin:0.8rem 0;} .sso_solution .section2 .con > ul > li .user li p:before{content:'';position:absolute;top:50%;right:-6px;width:12px;height:12px;border:1px solid #3143e8;border-radius:50%;background:#fff;transform:translateY(-50%);-webkit-transform:translateY(-50%);} .sso_solution .section2 .con > ul > li .user li p img{display:block;margin:1.6rem auto 1rem;} .sso_solution .section2 .con > ul > li:nth-child(2){text-align:left;padding-left:1.5rem;} .sso_solution .section2 .con > ul > li:nth-child(2) img{max-width:50%;} .sso_solution .section2 .con > ul > li .arrw{position:absolute;right:-1rem;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:45%;max-width:193px;height:57px;background:url('/images/klic/sub/arrw_sso.png') no-repeat right / contain;} .sso_solution .section2 .con > ul > li .server{width:80%;max-width:14.5rem;} .sso_solution .section2 .con > ul > li .server img{max-width:60%;} .sso_solution .section2 .con > ul > li:nth-child(3):before{content:'';position:absolute;right:0.6rem;top:50%;width:calc(100% - 13rem);border-top:1px dotted #3143e8;} .sso_solution .section2 .con > ul > li .data{position:relative;width:80%;max-width:14.5rem;} .sso_solution .section2 .con > ul > li .data:before{content:'';position:absolute;left:50%;top:-2rem;width:1px;height:100%;border-left:1px dotted #3c46ff;} .sso_solution .section2 .con > ul > li .data li{position:relative;display:block;width:100%;line-height:3.3rem;border-radius:3.3rem;border:1px solid #3143e8;background:#f7f8ff;font-size:0.8rem;margin:2rem 0 0;} .sso_solution .section2 .con > ul > li .data li img{margin-right:0.4rem;} .sso_solution .section2 .con > ul > li .data li:before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;width:12px;height:12px;background:#fff;border-radius:50%;border:1px solid #3c46ff;} .sso_solution .section2 .con > ul > li .service{position:relative;width:100%;background:#f3f5fe;border:1px solid #3c46ff;border-radius:2rem;padding:2rem 1rem;} .sso_solution .section2 .con > ul > li .service:before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:12px;height:12px;border:1px solid #3c46ff;background:#fff;border-radius:50%;} .sso_solution .section2 .con > ul > li .service p{text-align:center;font-family:'play';font-size:1.2rem;font-weight:800;color:#2e17df;line-height:1.2;} .sso_solution .section2 .con > ul > li .service ul{height:auto;overflow:hidden;} .sso_solution .section2 .con > ul > li .service ul li{width:50%;float:left;font-size:0.7rem;line-height:1.2;margin-top:1.5rem;} .sso_solution .section2 .con > ul > li .service ul li img{display:block;margin:0 auto;} .sso_solution .section3{padding:5rem 0;} .sso_solution .section3 dl{opacity:0;transform:translateY(-10%);-webkit-transform:translateY(-10%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;transition-delay:0.4s;-webkit-transition-delay:0.4s;} .sso_solution .section3 dl dt{position:relative;text-align:center;margin-bottom:1rem;} .sso_solution .section3 dl dt:before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#000;} .sso_solution .section3 dl dt span{position:relative;display:inline-block;background:#fff;padding:0 1rem;font-size:1.2rem;font-weight:700;letter-spacing:-1.5px;} .sso_solution .section3 dl dd{text-align:center;padding:1.4rem;min-height:15.4rem;border-radius:1rem;border:1px solid #e6e6ed;} .sso_solution .section3 dl dd img{max-width:100%;} .sso_solution .section.active .klogin, .sso_solution .section.active .sso_con, .sso_solution .section2.active .heading2 ul, .sso_solution .section2.active .con > ul > li, .sso_solution .section3.active dl{opacity:1;transform:none;-webkit-transform:none;} .sso_solution .prev_btn{margin:5rem auto;} /*groupware*/ .groupware{position:relative;} .groupware:before, .groupware:after{content:'GROUPWARE';position:absolute;font-family:'play';font-size:10rem;font-weight:800;color:#3f3fe3;opacity:0.09;transform:rotate(90deg);-webkit-transform:rotate(90deg);z-index:-1;} .groupware:before{top:50rem;right:50%;margin-right:-1240px;} .groupware:after{bottom:22rem;left:50%;margin-left:-1240px;} .groupware .heading2 > p{font-size:1.1rem;} .groupware .container{width:62rem !important;} .groupware .con{position:relative;margin:7.8rem 0 5rem;height:auto;overflow:hidden;} .groupware .con dl{position:relative;width:calc(100% - 27rem);float:left;opacity:0;transition:opacity 0.5s;-webkit-transition:opacity 0.5s;} .groupware .con .img{display:block;float:right;opacity:0;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;-webkit-transition:transform 1s, opacity 1s;transition:transform 1s, opacity 1s;} .groupware .con dl dt{position:relative;line-height:1.2;font-size:2.5rem;font-weight:800;margin-bottom:2rem;} .groupware .con dl dt:before{content:'';position:absolute;left:0;top:1.5rem;width:0;height:0.2rem;background:#000;transition:width 1s;-webkit-transition:width 1s;} .groupware .con dl dt span{position:relative;display:inline-block;background:#fff;padding:0 2rem 0 0;} .groupware .con.txt_right dl{float:right;text-align:right;} .groupware .con.txt_right .img{float:left;} .groupware .con.txt_right dl dt:before{left:auto;right:0;} .groupware .con.txt_right dl dt span{padding:0 0 0 2rem;} .groupware .active .con dl{opacity:1;} .groupware .active .con dl dt:before{width:100%;} .groupware .active .con .img{opacity:1;transform:none;-webkit-transform:none;} .groupware .prev_btn{margin:0 auto 5rem;} /* story */ .story_wrap{margin-bottom:10rem;} .story_wrap .tit{position:relative;margin-bottom:1.25rem;font-family:"Play";font-size:5rem;line-height:1;color:#0e0e10;text-align:center;} .story_wrap .tit:before{content:"";display:block;position:absolute;bottom:-1.5rem;left:0;right:0;z-index:-1;width:636px;height:171px;margin:0 auto;background:url('/images/klic/sub/story_tit_bg.png') no-repeat;background-size:cover;} .story_wrap .list_box ul{font-size:0;line-height:0;} .story_wrap .list_box ul:after{content:"";display:block;clear:both;} .story_wrap .list_box li{display:none;float:left;width:33.33%;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);-ms-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;vertical-align:top;-webkit-transition:transform 0.5s, opacity 0.5s;-ms-transition:transform 0.5s, opacity 0.5s;transition:transform 0.5s, opacity 0.5s;} .start .story_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;} .story_wrap .list_box li:nth-child(3n+1){clear:both;} .story_wrap .list_box li:nth-child(3n+2){margin-top:10.9rem;} .story_wrap .list_box li a{display:block;} .story_wrap .list_box li a .imgBox{overflow:hidden;position:relative;max-width:366px;margin:0 auto;} .story_wrap .list_box li a:hover .imgBox{-webkit-animation:story_imgbox .8s ease-in-out;-ms-animation:story_imgbox .8s ease-in-out;animation:story_imgbox .8s ease-in-out;} .story_wrap .list_box li a .imgBox[class*="bg_type"]:before{display:inline-block;position:absolute;z-index:1;} @-webkit-keyframes story_imgbox{ 0%, 100%{transform:rotateY(360deg);} 50%{transform:rotateY(180deg);} } @-ms-keyframes story_imgbox{ 0%, 100%{transform:rotateY(360deg);} 50%{transform:rotateY(180deg);} } @keyframes story_imgbox{ 0%, 100%{transform:rotateY(360deg);} 50%{transform:rotateY(180deg);} } .story_wrap .list_box li:nth-child(1) a .imgBox:before, .story_wrap .list_box li:nth-child(8n) a .imgBox:before{content:url('/images/klic/sub/story_bg01.png');position:relative;top:2.5rem;left:0;} .story_wrap .list_box li:nth-child(2) a .imgBox:before, .story_wrap .list_box li:nth-child(3n+2) a .imgBox:before{content:url('/images/klic/sub/story_bg02.png');position:relative;top:3rem;right:0;} .story_wrap .list_box li:nth-child(5n) a .imgBox:before{content:url('/images/klic/sub/story_bg03.png');position:relative;top:2.5rem;right:0;} .story_wrap .list_box li a .imgBox img{max-width:100%;height:auto;} .story_wrap .list_box li a .txt{margin-top:1.25rem;padding:0 3rem;font-size:1.2rem;letter-spacing:-0.025rem;line-height:1.25;color:#0e0e10;word-wrap:break-word;text-align:center;} .story_wrap .list_box li a .txt span{-webkit-transition:box-shadow .2s;-ms-transition:box-shadow .2s;transition:box-shadow .2s;} .story_wrap .list_box li a:hover .txt span{box-shadow:inset #d4daff 0 -0.5em 0 0;} .story_wrap .btn_wrap{margin-top:10rem;text-align:center;} /** 레이어팝업 :story 내용 보기 **/ .layerPop.story{z-index: 3;padding-top:9.25rem;} .header_fixed .layerPop.story{z-index:100;} .layerPop.story:after{content:"";display:block;width:1px;height:12.5rem;} .layerPop.story .btn_close_layerPop{position:fixed;top:6rem;right:auto;left:50%;width:4rem;height:2.5rem;margin-left:-48rem;padding-top:1rem;background:none;font-family:"Play";font-size:1rem;font-weight:700;line-height:1.3;color:#000;text-align:center;} .layerPop.story .btn_close_layerPop:before{content:url('/images/klic/sub/popup_btn_list.png');display:block;position:absolute;top:0;left:0;-webkit-animation:layerPop_story_close cubic-bezier(0.1, -0.6, 0.2, 0) infinite 1s;-ms-animation:layerPop_story_close cubic-bezier(0.1, -0.6, 0.2, 0) infinite 1s;animation:layerPop_story_close cubic-bezier(0.1, -0.6, 0.2, 0) infinite 1s;} @-webkit-keyframes layerPop_story_close{ 0%{left:0;} 100%{left:-0.7rem;} } @-ms-keyframes layerPop_story_close{ 0%{left:0;} 100%{left:-0.7rem;} } @keyframes layerPop_story_close{ 0%{left:0;} 100%{left:-0.7rem;} } .layerPop.story .tit_wrap{text-align:center;} .layerPop.story .tit_wrap .tit{max-width:1020px;margin:0 auto;font-size:3rem;font-weight:700;line-height:1.3;color:#0e0e10;word-wrap:break-word;} .layerPop.story .tit_wrap .date{margin-top:2rem;font-family:"Play";font-size:1rem;letter-spacing:-0.05rem;color:#0e0e10;} .layerPop.story .view{max-width:800px;margin:4rem auto 0;font-weight:200;font-size:0.9rem;color:#0e0e10;text-align:center;} .layerPop.story .view p{margin:2rem 0;} .layerPop.story .view img{max-width:100%;width:100%;height:auto;} .layerPop.story .view img.w_auto{width:auto;} .layerPop.story .view img.w_500{max-width:500px;} .layerPop.story .view img ~ img{margin-top:3.5rem;} .layerPop.story .view img + img{margin-top:0.25rem;} .layerPop.story .view em{font-style:italic;} .layerPop.story .view p [class^=bg_] + br + [class^=bg_]{margin-top:0.25rem;} .layerPop.story .view .img_txt{margin-top:0.5rem;font-size:0.8rem;color:#3e3e3e;} .layerPop.story .view .btn_bl, .layerPop.story .view .btn_gr, .layerPop.story .view .btn_bl2, .layerPop.story .view .btn_green, .layerPop.story .view .btn_grL{width:auto;min-width:213px;padding:0 1rem;} .layerPop.story .view .iframe_box iframe{width:100%;height:auto;min-height:20rem;} .layerPop.story .btn_wrap{margin-top:4rem;text-align:center;} /* system */ .system_wrap{margin-bottom:15rem;} .system_wrap .list_box{border-top:0.25rem solid #0e0e10;} .system_wrap .list_box ul{border-bottom:1px solid #4c4d63;} .system_wrap .list_box li{display:none;width:100%;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);-ms-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;vertical-align:top;-webkit-transition:transform 0.5s, opacity 0.5s;-ms-transition:transform 0.5s, opacity 0.5s;transition:transform 0.5s, opacity 0.5s;} .start .system_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;} .system_wrap .list_box li:hover, .system_wrap .list_box li:focus{background:#f3f5ff;} .system_wrap .list_box li .inner{display:table;position:relative;width:100%;height:7.9rem;padding-left:14.25rem;padding-right:13.5rem;table-layout:fixed;} .system_wrap .list_box li + li .inner{border-top:1px dotted #414259;} .system_wrap .list_box li .item{display:table-cell;vertical-align:middle;} .system_wrap .list_box li .left{position:absolute;top:0;bottom:0;left:2rem;width:auto;height:4rem;margin:auto 0;} .system_wrap .list_box li .type{display:inline-table;width:4rem;height:4rem;margin-right:1.5rem;border-radius:50%;border:1px solid #3f3fe3;font-size:0.9rem;font-weight:200;line-height:1;color:#2024c1;text-align:center;vertical-align:middle;} .system_wrap .list_box li .type span{display:table-cell;vertical-align:middle;} .system_wrap .list_box li .date{display:inline-block;font-family:"Play";font-weight:700;font-size:1rem;letter-spacing:-0.05rem;color:#2024c1;vertical-align:middle;} .system_wrap .list_box li .tit{display:inline-block;font-size:1.5rem;font-weight:700;line-height:1.3;letter-spacing:-0.05rem;color:#0e0e10;vertical-align:middle;} .system_wrap .list_box li .subTit{display:inline-block;position:absolute;top:0;bottom:0;right:2.5rem;width:20%;max-height:1.5rem;margin:auto 0;font-size:0.9rem;line-height:1.3;color:#0e0e10;text-align:right;} .system_wrap .btn_wrap{margin-top:9rem;text-align:center;} /* web */ .web_wrap{margin-bottom:15rem;} #sub_content .web_wrap .container{width:70rem;} .web_wrap .list_box{display:none;} .web_wrap .list_box.on{display:block;} .web_wrap .list_box ul{overflow:hidden;} .web_wrap .list_box li{display:none;float:left;overflow:hidden;position:relative;-webkit-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);-ms-transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);transform:translate(0%, 110%) matrix(1, -.2, 0, 1, 0, 0);opacity:0;line-height:1.6;vertical-align:top;-webkit-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; transition-delay: 0.3s;} .web_wrap .list_box li.img_list{width:23.3rem;height:23.3rem;} .web_wrap .list_box li.txt_list{clear:both;width:100%; padding:1.5rem 2.5rem;border-top:5px solid #0e0e10;} .web_wrap .list_box li.txt_list + li{margin-top:0;border-top:1px dotted #414259;} .web_wrap .list_box li.txt_list:last-of-type{border-bottom:1px solid #4c4d63;} .web_wrap .list_box li.txt_list:hover, .web_wrap .list_box li.txt_list:focus{background:#f3f5ff;} .web_wrap .list_box li.txt_list .inner{position:relative;padding-left:11.5rem;padding-right:11rem;} .web_wrap .list_box li.txt_list .inner .left{position:absolute;top:0;left:0;} .web_wrap .list_box li.txt_list .inner .type, .web_wrap .list_box li.txt_list .inner .date, .web_wrap .list_box li.txt_list .inner .tit{display:inline-block;vertical-align:middle;} .web_wrap .list_box li.txt_list .inner .subTit{position:absolute;top:0;right:0;font-size:0.9rem;color:#0e0e10;} .web_wrap .list_box li.txt_list .inner .type{margin-right:1.75rem;font-weight:200;font-size:0.9rem;color:#2024c1;} .web_wrap .list_box li.txt_list .inner .date{margin-right:3rem;font-weight:700;font-family:"Play";font-size:1rem;color:#2024c1;} .web_wrap .list_box li.txt_list .inner .tit{font-weight:400;font-size:1rem;color:#0e0e10;} .start .web_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1; } .web_wrap .list_box li a{display:block;height:100%;background-repeat:no-repeat;background-size:cover;} .web_wrap .list_box li a.bg_type1{background-image:url(/images/klic/sub/png_bg01.jpg);} .web_wrap .list_box li a.bg_type2{background-image:url(/images/klic/sub/png_bg02.jpg);} .web_wrap .list_box li a.bg_type3{background-image:url(/images/klic/sub/png_bg03.jpg);} .web_wrap .list_box li a.bg_type4{background-image:url(/images/klic/sub/png_bg04.jpg);} .web_wrap .list_box li a.bg_type5{background-image:url(/images/klic/sub/png_bg05.jpg);} .web_wrap .list_box li a.bg_type6{background-image:url(/images/klic/sub/png_bg06.jpg);} .web_wrap .list_box li a.bg_type7{background-image:url(/images/klic/sub/png_bg07.jpg);} .web_wrap .list_box li a.bg_type8{background-image:url(/images/klic/sub/png_bg08.jpg);} .web_wrap .list_box li a > img{position:absolute;top:0;left:0;width:100%;height:100%;image-rendering:-webkit-optimize-contrast;-webkit-transition:transform .3s;-ms-transition:transform .3s;transition:transform .3s;} .web_wrap .list_box li a:hover > img, .web_wrap .list_box li a:focus > img{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);} .web_wrap .list_box li a[class^="bg_type"] > img{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);height:auto;vertical-align:baseline;} .web_wrap .list_box li a .txt{position:absolute;bottom:1.75rem;left:1.5rem;padding-right:2rem;color:#fff;text-shadow:rgba(0,0,0,.23) 0 0 5px;text-align:left;} .web_wrap .list_box li a .txt .subTit{display:block;font-size:0.8rem;text-align:left;} .web_wrap .list_box li a .txt .tit{display:block;font-weight:700;font-size:1.1rem;word-wrap:break-word;} @-ms-keyframes web_item_rotate{ 0%{ transform:translate(-50%, -50%) rotateY(180deg); -webkit-transform:translate(-50%, -50%) rotateY(180deg); } 100%{ transform:translate(-50%, -50%) rotateY(360deg); -webkit-transform:translate(-50%, -50%) rotateY(360deg); } } @-webkit-keyframes web_item_rotate{ 0%{ transform:translate(-50%, -50%) rotateY(180deg); -webkit-transform:translate(-50%, -50%) rotateY(180deg); } 100%{ transform:translate(-50%, -50%) rotateY(360deg); -webkit-transform:translate(-50%, -50%) rotateY(360deg); } } @keyframes web_item_rotate{ 0%{ transform:translate(-50%, -50%) rotateY(180deg); -webkit-transform:translate(-50%, -50%) rotateY(180deg); } 100%{ transform:translate(-50%, -50%) rotateY(360deg); -webkit-transform:translate(-50%, -50%) rotateY(360deg); } } .web_wrap .list_box li a .item{opacity:0;display:table;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) rotateY(0deg);-ms-transform:translate(-50%, -50%) rotateY(0deg);transform:translate(-50%, -50%) rotateY(0deg);width:calc(100% - 1rem);height:calc(100% - 1rem);margin:auto;background:rgba(25,31,238,0.7);letter-spacing:-0.05rem;color:#fff;text-align:center;table-layout:fixed;-webkit-transition:opacity .2s;-ms-transition:opacity .2s;transition:opacity .2s;} .web_wrap .list_box li a.on .item{opacity:1;-webkit-animation:web_item_rotate .8s ease-in-out;-ms-animation:web_item_rotate .8s ease-in-out;animation:web_item_rotate .8s ease-in-out;} .web_wrap .list_box li a .item .inner{display:table-cell;padding:0 0.5rem;vertical-align:middle;} .web_wrap .list_box li a .item .tit{display:block;margin-bottom:2.5rem;font-weight:700;font-size:1.5rem;line-height:1.3;} .web_wrap .list_box li a .item .type{font-family:"Play";font-size:1rem;} .web_wrap .list_box li a .item .desc{font-weight:200;font-size:1.1rem;} .web_wrap .list_box li a .item .subDesc{margin-top:0.3rem;font-weight:200;font-size:0.8rem;} .web_wrap .list_box li a .item .date{margin-top:0.4rem;font-family:"Play";font-size:0.9rem;} .web_wrap .list_box li a .item .btn_site{display:block;overflow:hidden;position:relative;width:4.5rem;height:3.1rem;-webkit-transform:skewX(-40deg);-ms-transform:skewX(-40deg);transform:skewX(-40deg);margin:2rem auto 0;background:#131320;font-size:0.85rem;letter-spacing:0;text-align:center;} .web_wrap .list_box li a .item .btn_site span{display:inline-block;position:relative;-webkit-transform:skewX(40deg);-ms-transform:skewX(40deg);transform:skewX(40deg);margin-top:0.8rem;line-height:1;} .web_wrap .list_box li a .item .btn_site span:after{content:"";display:block;-webkit-transform:skewX(-40deg);-ms-transform:skewX(-40deg);transform:skewX(-40deg);width:3rem;height:2px;margin-top:0.3rem;margin-left:0.4rem;background:#fff;-webkit-transition:all .2s;-ms-transition:all .2s;transition:all .2s;} .web_wrap .list_box li a .item .btn_site:hover span:after, .web_wrap .list_box li a .item .btn_site:focus span:after{margin-left:-0.5rem;} .web_wrap .list_box .btn_wrap{margin-top:9rem;text-align:center;} /* SI 사업분야*/ .business_si .heading2{text-align:left;} .business_si .heading2 > h4{margin-bottom:3rem;text-align:center;} .business_si .heading2 > p{font-size:1.1rem;line-height:1.81;} .business_si .heading2 > p ~ p{margin-top:2.5rem;} @keyframes busin_si{ 0%{transform:translateY(0);-webkit-transform:translateY(0);} 50%{transform:translateY(0.5rem);-webkit-transform:translateY(0.5rem);} 100%{transform:translateY(0);-webkit-transform:translateY(0);} } @-webkit-keyframes busin_si{ 0%{transform:translateY(0);-webkit-transform:translateY(0);} 50%{transform:translateY(0.5rem);-webkit-transform:translateY(0.5rem);} 100%{transform:translateY(0);-webkit-transform:translateY(0);} } .business_si .section1 .con_infra{position:relative;width:35.3rem;height:35.3rem;margin:5rem auto;padding:11rem 0;background:url('/images/klic/sub/si_circle_bg.png') no-repeat 50% 50%/100% 100%;} .business_si .section1 .con_infra:before{content:'';position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:100%;height:100%;border-radius:50%;background:url('/images/klic/sub/infra_bg.png');} .business_si .section1 .con_infra .tit{display:table;width:14rem;height:14rem;border-radius:50%;background:#423ee2;box-shadow:7px 7px 29px rgba(0,0,0,.5);-webkit-box-shadow:7px 7px 29px rgba(0,0,0,.5);margin:auto;} .business_si .section1 .con_infra .tit p{display:table-cell;vertical-align:middle;text-align:center;} .business_si .section1 .con_infra .tit p span{display:block;color:#fff;font-weight:700;font-size:1.65em;} .business_si .section1 .con_infra ul li{position:absolute;font-size:1.5rem;font-weight:700;letter-spacing:-1px;opacity:0;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;} .business_si .section1 .con_infra ul li:nth-child(1){color:#1414d6;} .business_si .section1 .con_infra ul li:nth-child(2){color:#0820b2;transition-delay:0.3s;-webkit-transition-delay:0.3s;} .business_si .section1 .con_infra ul li:nth-child(3){color:#1226eb;transition-delay:0.6s;-webkit-transition-delay:0.6s;} .business_si .section1 .con_infra ul li:nth-child(4){color:#0820b2;transition-delay:0.3s;-webkit-transition-delay:0.3s;} .business_si .section1 .con_infra ul li:nth-child(5){color:#3226d5;transition-delay:0.2s;-webkit-transition-delay:0.2s;} .business_si .section1 .con_infra ul li:nth-child(6){color:#2540e3;transition-delay:0.2s;-webkit-transition-delay:0.2s;} .business_si .section1.active .con_infra ul li{opacity:1;animation:busin_si 3s infinite ease-out;-webkit-animation:busin_si 3s infinite ease-out;} .business_si .section1.active .con_infra ul li:nth-child(1){top:7rem;left:8.5rem;} .business_si .section1.active .con_infra ul li:nth-child(2){top:7rem;left:23rem;animation-delay:0.2s;-webkit-animation-delay:0.2s;} .business_si .section1.active .con_infra ul li:nth-child(3){top:16rem;left:26.5rem;} .business_si .section1.active .con_infra ul li:nth-child(4){top:26rem;left:24rem;animation-delay:0.2s;-webkit-animation-delay:0.2s;} .business_si .section1.active .con_infra ul li:nth-child(5){top:26rem;left:8rem;animation-delay:0.3s;-webkit-animation-delay:0.3s;} .business_si .section1.active .con_infra ul li:nth-child(6){top:16rem;left:1rem;animation-delay:0.3s;-webkit-animation-delay:0.3s;} .business_si .col_box{overflow:hidden;margin-top:2.8rem;margin-bottom:8.5rem;} .business_si .col_box .col_item{float:left;width:50%;} .business_si .process_box{margin-top:3rem;padding:3.25rem;background:#f6f7ff;} .business_si .process_box ol{position:relative;font-size:0;line-height:0;} .business_si .process_box ol > li{display:inline-block;position:relative;width:25%;padding-right:1rem;background:url('/images/klic/sub/si_process_line.png') repeat-x left 0.75rem;font-size:1rem;line-height:1.6;vertical-align:top;} .business_si .process_box ol > li .txtBox{transform:translateY(-30%);-webkit-transform:translateY(-30%);opacity:0;} .business_si .process_box ol > li:nth-child(1) .txtBox{transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .business_si .process_box ol > li:nth-child(2) .txtBox{transition:opacity 0.8s, transform 0.8s;-webkit-transition:opacity 0.8s, transform 0.8s;} .business_si .process_box ol > li:nth-child(3) .txtBox{transition:opacity 1.2s, transform 1.2s;-webkit-transition:opacity 1.2s, transform 1.2s;} .business_si .process_box ol > li:nth-child(4) .txtBox{transition:opacity 1.6s, transform 1.6s;-webkit-transition:opacity 1.6s, transform 1.6s;} .business_si .section3.active .process_box ol > li .txtBox{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .business_si .process_box ol > li:last-child:before{content:"";display:block;position:absolute;top:0.25rem;right:0;width:15px;height:24px;background:url('/images/klic/sub/si_process_arr.png') no-repeat;} .business_si .process_box ol > li .num{display:block;width:1.65rem;height:1.65rem;margin-bottom:1rem;border:1px solid #3143e8;border-radius:50%;font-family:"Play";font-weight:700;font-size:0.7rem;line-height:1.65rem;color:#3f3fe3;text-align:center;background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 4px;} .business_si .process_box ol > li .tit{display:block;font-weight:700;font-size:1.3rem;letter-spacing:-0.05rem;color:#3f3fe3;} .business_si .process_box ol > li ul{margin-top:1rem;margin-left:1.2rem;} .business_si .process_box ol > li ul li{position:relative;padding-left:0.4rem;font-size:0.9rem;color:#232323;} .business_si .process_box ol > li ul li + li{margin-top:0.3rem;} .business_si .process_box ol > li ul li:before{content:"";display:block;position:absolute;top:0.3rem;left:0;width:4px;height:4px;border-radius:50%;background:#2121eb;} .business_si .prev_btn{margin:10rem auto 5rem;} .writeForm_wrap{margin-bottom:3rem;} /*cloud_sc*/ .cloud_sc .heading2 > p{text-align:left;font-size:1.1rem;margin-bottom:2.5rem;} .cloud_sc .heading2 > p.big{margin-bottom:8rem;font-size:1.5rem;font-weight:600;transition-delay:0.6s;-webkit-transition-delay:0.6s;} .cloud_sc .section2{text-align:center;} .cloud_sc .section2 .box_top{display:inline-block;width:10.3rem;height:10.3rem;margin:0 auto;padding-top:2rem;border-radius:50%;background:#fff;border:1px solid #2121eb;box-shadow:3px 0 24px rgba(0,0,0,0.22);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transform:scale(1.1);transform:scale(1.1); opacity:0;} .cloud_sc .section2 .box_top span{display:block;color:#17171f;font-size:1.2rem;font-weight:400;} .cloud_sc .section2 .box_mid{position:relative;padding:3rem 5rem 4.5rem;border:1px dashed #151be0;border-radius:4rem;opacity:0;transition:opacity 0.5s 0.5s;-webkit-transition:opacity 0.5s 0.5s;} .cloud_sc .section2 .title01{position:absolute;top:5.5rem;left:0;width:100%;font-size:1.3rem;color:#17171f;font-weight:700;z-index:2;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .cloud_sc .section2 .title02{position:relative;margin:-2rem auto 7.5rem;font-size:2.3rem;color:#070ede;font-weight:700;letter-spacing:-0.05rem;z-index:2;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .cloud_sc .section2 .title03{position:absolute;bottom:-2rem;left:50%;display:inline-block;padding:0 2.5rem;font-size:2.3rem;color:#17171f;font-weight:900;white-space:nowrap;background:#fff;z-index:2;opacity:0;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, 50%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .cloud_sc .section2 .title03:before, .cloud_sc .section2 .title03:after{content:'';position:absolute; top:50%;margin-top:-5px;width:9px;height:9px;border-radius:50%;background:#2f35e3;z-index:-1;} .cloud_sc .section2 .title03:before{left:10px;} .cloud_sc .section2 .title03:after{right:10px;} .cloud_sc .section2 .data_stand{position:relative;display:block;height:20.5rem;background:url('/images/klic/sub/bg_ptrn.jpg');margin:0 auto;padding-top:6.5rem;border-radius:20.5rem;font-size:0; } .cloud_sc .section2 .data_stand:before{content:'';position:absolute;left:-1px;bottom:-1px;width:calc(32% + 2px);height:50%;border-radius:0 0 0 20.5rem;background:#2f35e3;z-index:-1;} .cloud_sc .section2 .data_stand:after{content:'';position:absolute;right:-1px;bottom:-1px;width:calc(32% + 2px);height:50%;border-radius:0 0 20.5rem 0;background:#2f35e3;z-index:-1;} .cloud_sc .section2 .data_stand li{display:inline-block;width:8.7rem;height:8.7rem;margin:0 1% 0;padding-top:2rem;border-radius:50%;background:#fff;border:1px solid #2121eb;box-shadow:3px 0 24px rgba(0,0,0,0.22);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transform:scale(1.1);transform:scale(1.1); opacity:0;} .cloud_sc .section2 .data_stand li span{display:block;color:#34343b;font-size:1rem;} .cloud_sc .section2 .data_stand li:nth-child(1){transition-delay:0.3s;-webkit-transition-delay:0.3s;} .cloud_sc .section2 .data_stand li:nth-child(2){transition-delay:0.4s;-webkit-transition-delay:0.4s;} .cloud_sc .section2 .data_stand li:nth-child(3){transition-delay:0.5s;-webkit-transition-delay:0.5s;} .cloud_sc .section2 .data_stand li:nth-child(4){transition-delay:0.6s;-webkit-transition-delay:0.6s;} .cloud_sc .section2 .data_stand li:nth-child(5){transition-delay:0.7s;-webkit-transition-delay:0.7s;} .cloud_sc .section2 .line{position:relative;display:block;width:1px;height:3.75rem;margin:0.3rem auto -0.3rem;z-index:2;} .cloud_sc .section2 .line:before, .cloud_sc .section2 .line:after{content:'';position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);width:0.6rem;height:0.6rem;background:#fff;border-radius:50%;border:1px solid #3e48ff;opacity:0;transition:opacity 0.3s, transform0.3s;-webkit-transition:opacity 0.3s, transform0.3s;} .cloud_sc .section2 .line:before{transition-delay:0.5s;-webkit-transition-delay:0.5s;} .cloud_sc .section2 .line:after{bottom:0;transition-delay:1.2s;-webkit-transition-delay:1.2s;} .cloud_sc .section2 .line em{display:block;width:1px;height:0;border-left:1px dotted #3e48ff;transition:height 0.5s 0.8s;-webkit-transition:height 0.5s 0.8s;} .cloud_sc .section2 .data_stand2{position:relative;height:auto;margin:0 auto;opacity:0;transform:translateY(30%);-webkit-transform:translateY(30%);transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;-webkit-transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;} .cloud_sc .section2 .data_stand2:before{position:absolute;top:-3.5rem;left:17.65%;width:64.7%;height:2px;background:#1a26ff;content:"";opacity:0;transform:translateY(30%);-webkit-transform:translateY(30%);transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;-webkit-transition:opacity 0.5s 1.5s, transform 0.5s 1.5s;overflow:hidden;} .cloud_sc .section2 .data_stand2:after{clear:both;display:block;content:"";} .cloud_sc .section2 .data_stand2 li{position:relative;display:block;float:left;width:35.3%;line-height:6rem;border-radius:6rem;text-align:center;color:#fff;font-size:1.25rem;} .cloud_sc .section2 .data_stand2 li:nth-child(1){background:rgba(27,106,213,0.7);transition-delay:1s;} .cloud_sc .section2 .data_stand2 li:nth-child(2){background:rgba(7,14,222,0.85);margin:0 -3%;transition-delay:1.2s;} .cloud_sc .section2 .data_stand2 li:nth-child(3){background:rgba(35,71,226,0.7);transition-delay:1.4s;} .cloud_sc .section2 .data_stand2 li .line2{position:absolute;top:-3.5rem;left:50%;margin-left:-1px;width:2px;height:0;background:#1a26ff;content:"";transition:height 0.3s 2s;-webkit-transition:height 0.3s 2s;} .cloud_sc .section2 .data_stand2 li .line2:before{position:absolute;bottom:-0.15rem;left:50%;margin:0 0 0 -0.3rem;width:0.6rem;height:0.6rem;background:#fff;border:2px solid #1a26ff;border-radius:50%;content:"";opacity:0;transition:opacity 0.3s 2s;-webkit-transition:opacity 0.3s 2s;} .cloud_sc .section2 .data_stand2 li:nth-child(2) .line2{top:-7rem;} .cloud_sc .section2 .data_stand2 li:nth-child(2) .line2:after{position:absolute;top:0;left:50%;margin:0 0 0 -0.3rem;width:0.6rem;height:0.6rem;background:#fff;border:3px solid #1a26ff;border-radius:50%;box-shadow:2px 0 5px rgba(0,0,0,0.35);content:"";opacity:0;transition:opacity 0.3s 2s;-webkit-transition:opacity 0.3s 2s;} .cloud_sc .section2.active .box_top, .cloud_sc .section2.active .box_mid{opacity:1;} .cloud_sc .section2.active .title01{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_sc .section2.active .title02{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_sc .section2.active .title03{opacity:1;transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);} .cloud_sc .section2.active .data_stand li{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .cloud_sc .section2.active .line:before, .cloud_sc .section2.active .line:after, .cloud_sc .section2.active .data_stand2 li .line2:before, .cloud_sc .section2.active .data_stand2 li .line2:after{opacity:1;} .cloud_sc .section2.active .line em, .cloud_sc .section2.active .data_stand2 li .line2{height:3.75rem;} .cloud_sc .section2.active .data_stand2 li:nth-child(2) .line2{height:7rem;} .cloud_sc .section2.active .data_stand2, .cloud_sc .section2.active .data_stand2:before{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_sc .prev_btn{margin:10rem auto 5rem;} /* cloud_msp */ .cloud_msp .logo_img{opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;overflow:hidden;} .cloud_msp .logo_img > li{float:left;width:25%;padding:0 .75rem;} .cloud_msp .logo_img > li img{display:block;margin:auto;max-width:90%;} .cloud_msp .section2 .container2 > p{opacity:0;transform:translateY(30%);-webkit-transform:translateY(30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;padding:3.5rem 0 5.5rem;color:#17171f;text-align:center;font-size:2.25rem;line-height:2;} .cloud_msp .section2 .container2 > p > strong{font-weight:700;} .cloud_msp .section2 .container2 > p > span{font-weight:600;} .cloud_msp .service_lst1{opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;overflow:hidden;margin:-1rem;} .cloud_msp .service_lst1 > li{float:left;width:33.333%;padding:1rem;} .cloud_msp .service_lst1 > li .tit{position:relative;font-size:1.2rem;color:#17171f;text-align:center;} .cloud_msp .service_lst1 > li .tit:before{position:absolute;top:50%;left:0;width:100%;height:1px;background:#000;-webkit-transform:translateY(-50%);transform:translatey(-50%); content:"";} .cloud_msp .service_lst1 > li .tit > span{position:relative;z-index:1;padding:0 1rem;background:#fff;font-weight:700;} .cloud_msp .service_lst1 > li > img{display:block;width:100%;margin-top:1.25rem;} .cloud_msp .service_lst1 > li > span{display:block;margin-top:2rem;text-align:center;color:#17171f;font-size:1.2rem;} .cloud_msp .service_lst1 > li > span > strong{font-weight:700;} .cloud_msp .service_lst2{opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;margin:2rem 0 0;text-align:center;} .cloud_msp .service_lst2 > ul{display:inline-block;width:22rem;margin:-.5rem;} .cloud_msp .service_lst2 > ul > li{float:left;width:50%;padding:.5rem;} .cloud_msp .service_lst2 > ul > li > div{position:relative;float:left;width:100%;height:3rem;border:1px solid #a1a1f9;border-radius:.5rem;box-shadow:0 0 10px rgba(0,0,0,.22);} .cloud_msp .service_lst2 > ul > li > div > span{position:absolute;top:50%;left:50%;width:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#1717d2;font-size:1rem;} .cloud_msp .prev_btn{margin:10rem auto 5rem;} .cloud_msp .section.active .logo_img, .cloud_msp .section2.active .container2 > p, .cloud_msp .section.active .service_lst1, .cloud_msp .section.active .service_lst2{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /* cloud_business */ .cloud_business .title{margin:3.5rem 0 2rem;font-size:1.4rem;font-weight:700;color:#1226eb;opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .cloud_business .sys_box{padding:2.75rem;background:url('/images/klic/sub/cloud_business_box_bg.png') no-repeat center/cover;text-align:center;} .cloud_business .section2{padding-top:5rem;} .cloud_business .system_num{position:relative;} .cloud_business .system_num:before{position:absolute;top:.5rem;left:0;width:0;height:1.2rem;background:url('/images/klic/sub/cloud_business_arr1.png') no-repeat center right/ cover;content:"";opacity:0;-webkit-transition:opacity 0.5s, width 0.5s;transition:opacity 0.5s, width 0.5s;-webkit-transition-delay:1.3s;transition-delay:1.3s;} .cloud_business .system_num > ul{position:relative;z-index:1;} .cloud_business .system_num > ul:after{display:block;clear:both;content:"";} .cloud_business .system_num > ul > li{float:left;width:14.285%;text-align:center;font-family:"Play", 'NotoSans';opacity:0;transform:translateX(1rem);-webkit-transform:translateX(1rem);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transition-delay:.5s;transition-delay:.5s;} .cloud_business .system_num > ul > li:nth-of-type(2){-webkit-transition-delay:.6s;transition-delay:.6s;} .cloud_business .system_num > ul > li:nth-of-type(3){-webkit-transition-delay:.7s;transition-delay:.7s;} .cloud_business .system_num > ul > li:nth-of-type(4){-webkit-transition-delay:.8s;transition-delay:.8s;} .cloud_business .system_num > ul > li:nth-of-type(5){-webkit-transition-delay:.9s;transition-delay:.9s;} .cloud_business .system_num > ul > li:nth-of-type(6){-webkit-transition-delay:1s;transition-delay:1s;} .cloud_business .system_num > ul > li:nth-of-type(7){-webkit-transition-delay:1.1s;transition-delay:1.1s;} .cloud_business .system_num > ul > li > strong{position:relative;display:inline-block;width:5.8rem;background:#fff;text-align:center;line-height:2rem;color:#3143e8;font-size:1.4rem;color:#3f3fe3;border-radius:1.5rem;border:1px solid #3143e8;} .cloud_business .system_num > ul > li.sort > strong{color:#222;font-size:1.2rem;} .cloud_business .system_num > ul > li > span{display:block;margin-top:.25rem;color:#474776;font-size:1.5rem;} .cloud_business .system_num > ul > li.sort > span{color:#222;font-size:1.3rem;} .cloud_business .system_num > ul > li.total > span{color:#3f3fe3;} .cloud_business .system_num > ul > li.difference > strong:before{position:absolute;top:-1.15rem;left:50%;width:8.5rem;height:1.15rem;background:url('/images/klic/sub/cloud_business_arr3.png') no-repeat top center;content:"";} .cloud_business .system_num > ul > li.difference > strong:after{position:absolute;top:-1.15rem;left:110%;font-size:.9rem;color:#3f3fe3;content:"차년";} .cloud_business .sys_box .sys_tit{display:inline-block;margin-top:2.25rem;padding:1.75rem 6rem 1.75rem 1.5rem;background:#fff;border-radius:5rem;opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transition-delay:1.5s;transition-delay:1.5s;} .cloud_business .sys_box .sys_tit > strong{position:relative;display:inline-block;padding-left:5rem;color:#17171f;font-size:1.4rem;font-weight:700;} .cloud_business .sys_box .sys_tit > strong:before{position:absolute;top:-.25rem;left:0;width:3.8rem;height:2.85rem;background:url('/images/klic/sub/cloud_business_arr2.png') no-repeat center/cover;content:"";} .cloud_business .sys_box .sys_tit > strong > em{color:#3f3fe3;} .cloud_business .sys_box p{margin-top:2.5rem;color:#17171f;font-size:1.1rem;opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;-webkit-transition-delay:1.5s;transition-delay:1.5s;} .cloud_business .sys_box img{display:block;margin:auto;max-width:100%;opacity:0;transform:translateY(-30%);-webkit-transform:translateY(-30%);transition:opacity 0.5s, transform 0.5s;-webkit-transition:opacity 0.5s, transform 0.5s;} .cloud_business .sys_box img + p{-webkit-transition-delay:.1s;transition-delay:.1s;} .cloud_business .prev_btn{margin:10rem auto 5rem;} .cloud_business .section.active .title, .cloud_business .section.active .system_num > ul > li, .cloud_business .section.active .sys_tit, .cloud_business .section.active p, .cloud_business .section.active .sys_box img{opacity:1;transform:translate(0);-webkit-transform:translate(0);} .cloud_business .section.active .system_num:before{opacity:1;width:100%;} /* 2022.01.12. SY,CHo 디자인수정 */ .cloud_business .system_num > ul > li.other{position:relative;} .cloud_business .system_num > ul > li.other:before{position:absolute;top:-1.8rem;left:0;width:100%;height:calc(100% + 1.8rem);border:2px dashed rgba(63,63,227,0.5);border-radius:1rem;content:"";} .cloud_business .system_num > ul > li.other:after{position:absolute;top:-1.5rem;left:0;width:100%;height:1rem;text-align:center;font-size:0.9rem;font-weight:600;color:#3f3fe3;content:"전환1차 사업";} /* 개인정보처리방침 241104 추가 */ .privacy { padding: 0 8rem; margin-bottom: 5rem;} .privacy h2 { background: #011747; color: #fff; padding:1.1rem 1.35rem; font-size: 0.9rem; border-radius: 0.5rem;} .privacy .inner { overflow-y: auto; padding: 1.5rem 1.8rem; border: 1px solid #eee; border-radius: 0.5rem; margin-top: 1rem; background: #fff;} /* reponsive */ @media (max-width:1920px){ .left_menu_wrap{left:2%;-webkit-transform:translateY(-7.5rem) translateX(0);transform:translateY(-7.5rem) translateX(0);} .left_menu_wrap.leftMenu_fixed, .left_menu_wrap.leftMenu_fixed_ani{-webkit-transform:translateY(0) translateX(0);transform:translateY(0) translateX(0);} /* story */ /** 레이어팝업 :story 내용 보기 **/ #sub_content .layerPop.story .container{width:96%;} .layerPop.story .btn_close_layerPop{left:2%;margin-left:0;} #layerPop1 .btn_close_layerPop{left:2%;margin-left:0;} } @media (max-width:1850px){ /* Top box */ .sTop_box { width: calc(100% - 2rem); margin-left: 1rem; margin-bottom: 4rem;} .sTop_box .img {width: 19rem;height: 12rem;border-radius: 1.5rem 1.5rem 1.5rem 0;right: 1.5rem;} .sTop_box .txt_box ul { width: calc(100% - 36.5rem);} .sTop_box.si .txt_box ul {width: calc(100% - 32.5rem);} } @media (max-width:1600px){ /*layerPop1*/ #layerPop1 { margin-top: 0; } .sTop_box {width: 100%;margin: 3rem 0;} .sTop_box .img {width: 16rem;height: 10rem;} .sTop_box.si .txt_box h3 { width: 10rem;} .sTop_box.si .txt_box ul {width: calc(100% - 28.5rem);} .left_menu_wrap{-webkit-transform:translateY(-3.5rem) translateX(0);transform:translateY(-3.5rem) translateX(0);} .left_menu_wrap.leftMenu_fixed, .left_menu_wrap.leftMenu_fixed_ani{-webkit-transform:translateY(1.5rem) translateX(0);transform:translateY(1.5rem) translateX(0);} div[class^="tab_st"]{margin-bottom:4rem;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body .heading1{background-size:280px;} /* klic */ .klic_wrap .section5 .org > li > strong:before{height:calc(100% + 3.9rem);} .klic_wrap .section5 .org .depth2 .lst1{-webkit-transform:translateX(+6.25rem) translateX(+3px);transform:translateX(+6.25rem) translateX(+3px);} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type{padding-right:2.5rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type{padding-left:2.5rem;} .klic_wrap .section5 .org .depth2 .lst2 .depth3:before{position:absolute;top:-2.25rem;left: 13.7%;width: 81.6%;height:3px;background:#8a8cc8;content:'';} .klic_wrap .section5 .org > li:nth-child(2) > strong:before{height: calc(100% + 4.7rem);} .klic_wrap .section5 .org .depth3 > li > span {width: 5.4rem; font-size: 0.85rem;} .klic_wrap .section5 .org > li > strong{font-size:1.2rem;padding:1rem 1.5rem;} .klic_wrap .section5 .org .depth4 > li > span, .klic_wrap .section5 .org .depth5 > li > span{width:8rem;padding:.5rem 0;font-size:1rem;} .klic_wrap .section5 .org .depth2 .lst2 .depth5 > li > span, .klic_wrap .section5 .org .lst2 .depth6 > li > span{width:5rem;padding:.5rem 0;font-size:.75rem;} /* 개인정보처리방침 241104 추가 */ .privacy { padding: 0; margin-bottom: 0;} } @media (max-width:1560px){ #sub_content .container{width:100%; } /** 레이어팝업 :인사말 더보기**/ .layerPop.klic .heading1{background-size:280px;} .layerPop.klic .heading1 .txt1{width:auto;} .layerPop.klic .container:after, .layerPop.klic .greeting_body .imgBox{right:-6rem;width:25.5rem;height:29.15rem;} .layerPop.klic .container:before{right:calc(100% - -8.5rem);} .layerPop.klic .container:after{top:22rem;left:calc(100% - 13rem);} /*contact*/ .contact_wrap .section5 .tab_st1_box{left:auto;right:1rem;} /*business_rd*/ .business_rd .section4 ul{width:95%;margin:0 auto;} /*sso_solution*/ .sso_solution .section2 .list_st1{width:95%;margin:0 auto;} /* web */ .web_wrap .list_box ul{text-align:left;} .web_wrap .list_box li.img_list{width:33.33%;} } /* 2024.01.18. CHo,SY Portfolio 좌측메뉴 관련 작업 추가 */ @media (min-width:1025px) and (max-width:1560px){ .web_wrap .list_box li.img_list{height:20rem;} .web_wrap .list_box li a .item .inner {padding: 0 1rem;} .web_wrap .list_box li a .item .tit {margin-bottom: 1.25rem; font-size: 1.25rem;} .web_wrap .list_box li a .item .desc {font-size: 1rem;} } @media (min-width:1025px) and (max-width:1400px){ .left_menu_wrap #leftMenu > li > h2 a {font-size: 2rem;} .left_menu_wrap #leftMenu ul > li > a {font-size: 1.25rem;} .web_wrap .list_box li.img_list{height:15rem;} } @media (max-width:1024px){ #sub_content .web_wrap .container{width:96%;} .klic_wrap .greeting_body .bottom { margin-top: 5rem;} } @media (max-width:1500px){ /*contact*/ .contact_wrap .container{width:96% !important;} .contact_wrap ul[class^="culture"]{text-align:center;} .contact_wrap ul[class^="culture"] > li{display:inline-block;float:none !important;padding:0 2rem;} .contact_wrap ul[class^="culture"] li ul li{padding:0 1rem;} .contact_wrap ul[class^="culture"] li ul li:nth-child(2){padding:0 1rem;} .contact_wrap .section2 ul.culture2{padding-top:8rem;} .contact_wrap .section2 ul.culture2 li{width:auto;max-width:100%;} .contact_wrap .section4 .recruit_wrap .recruit_list{padding:0;} .contact_wrap .section4 .recruit_wrap .recruit_list li{width:50%;margin-bottom:5rem;padding-left:0;text-align:center;} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(n+3){margin-bottom:0;} .contact_wrap .section4 .recruit_wrap .recruit_list li br{display:none;} .contact_wrap .section4 .recruit_wrap .recruit_list li em{position:relative;left:auto;top:auto;} .contact_wrap .section5 .tab_st1_box{position:relative;left:auto !important;right:auto;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li:first-child a{padding:0 2rem;} .contact_wrap .section5 #con_com_box{padding-bottom:0;} .contact_wrap .section5 #con_com_box .con{position:relative;left:auto;bottom:auto;width:100%;height:auto;} .contact_wrap .section5 #con_com_box .con:before{left:0;transform:none;-webkit-transform:none;} .contact_wrap .section5 #con_com_box .con > ul{padding:1.7rem 6rem 1.5rem 6rem } } @media (max-width:1440px){ #sub_content .container2{width:96% !important;} .sTop_box .txt_box h3 { width: 12rem; } .sTop_box .txt_box h3 p { font-size: 2rem; } .sTop_box .txt_box h3 p::before { width: 0.5rem; height: 0.5rem; left: -0.5rem; top: -0.5rem;} .sTop_box .txt_box h3 span {font-size: 1.5rem;font-weight: 600;color: #111;margin-top: 0.5rem;} .sTop_box .txt_box ul {width: calc(100% - 30.5rem);} .sTop_box .txt_box ul li { font-size: 0.9rem; } .sTop_box .txt_box ul li::before { top: 0.8rem; } /*nforU*/ .nforU .section4 dl.box1 dt, .nforU .section4 dl.box2 dt{margin:0.9rem 0 2rem;} .nforU .section4 dl.box3 dt br{display:block;} /* SI 사업분야*/ .business_si .process_box ol > li:last-child:before{top:2.5%;} } @media (max-width:1400px) { /*layerPop1*/ #layerPop1 .detail_box3 .detail_spot01 ul{ padding: 5rem 1rem 0; } /* work platform */ .wk-platform .section7 .data_stand h4 {font-size:1rem;} .wk-platform .section7 .data_stand span {font-size:0.85rem;} } @media (max-width:1300px){ /*business*/ .business .con{margin-bottom:3rem;} .business .con .tit{position:relative;bottom:auto;font-size:6.5rem;} .business .con.txt_right .tit{opacity:1;left:auto !important;} .business .con.txt_left .tit{opacity:1;right:auto !important;} .business .con .img{width:50%;} .business .con .img img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);} .business .con.txt_right .img{opacity:1;left:0;} .business .con.txt_left .img{opacity:1;right:0;} .business .con .img:before{display:none;} .business .con .txt{width:45%; padding-top:1rem;opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .business .section6{height:auto;padding-bottom:10rem;} .business .section6 h4{font-size:6.5rem;} /*business_infra*/ .business_infra .section3 .infra_cust_list ul li{width:33.333%;} /*main_client*/ .main_client .container{width:96% !important;} .main_client ul li{width:16.666%;} /*nforU*/ .nforU .section2 .nforU_con .cms_list{width:38%;} .nforU .section2 .nforU_con .cms_list li:before{display:none;} /*sso_solution*/ .sso_solution .section1 .klogin ul:before, .sso_solution .section1 .klogin ul li .dot:before{display:none;} /*groupware*/ .groupware:before, .groupware:after{display:none;} .groupware .container{width:96% !important;} .groupware .con dl dd br{display:none;} /* work platform */ .wk-platform .section2 dl, .wk-platform .section2 dl + dl, .wk-platform .section2 dl + dl + dl {width:100%;} .wk-platform .section2 .con_box_st:after {width:100%; height:1px; left:0; right:auto; top:auto; bottom:0;} .wk-platform .section2 .con_box_st:last-child:after {display:block;} .wk-platform .func .con_wrap {flex-wrap: wrap;} .wk-platform .func .con_box_st {width:calc(50% - 20px); flex:none;} .wk-platform .title {letter-spacing:5px;} .wk-platform .section7 .data_stand span {font-size:18px;} } @media (max-width:1240px){ #header{ border-bottom: 1px solid rgba(0,0,0,0.1) !important;} .sTop_box { padding: 2.5rem; height:auto;} .sTop_box .txt_box { flex-direction: column;} .sTop_box .txt_box ul, .sTop_box.si .txt_box ul{ margin-top:1.5rem; width:100%;} .sTop_box .txt_box ul li, .sTop_box.si .txt_box ul li{width: 50%; } .sTop_box .img { top:-2.5rem} /* klic */ .klic_wrap .clip_img{display:none;} .klic_wrap .section1 p.txt_p{width:100%;} .klic_wrap .section2 .vision_lst{display:block;} .klic_wrap .section2 .vision_lst > li{padding:0 1.5rem; text-align:center;} .klic_wrap .section2 .vision_lst > li strong{padding-top:2.75rem;font-size:2.5rem;} .klic_wrap .section2 .vision_lst > li strong:before{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);} .klic_wrap .section3 .value_lst > li{font-size:2rem;} .klic_wrap .section4 .slider_wrap > div > h4{position:static;-webkit-transform:rotate(0deg);transform:rotate(0deg);} .klic_wrap .section4 .history_lst .slider_wrap > div{padding:0 2rem 0 0;} .klic_wrap .section4 .history_lst .slider_wrap ul{margin-top:1rem;} .klic_wrap .section4 .history_lst .slick-list{overflow:hidden;} .klic_wrap .section4 .history_lst:before{display:none;} .klic_wrap .section5{padding: 5.5rem 0 8rem;} .klic_wrap .section5 .org .depth2 .lst1{display:block;padding-bottom:2rem;-webkit-transform:translateX(0);transform:translateX(0);} .klic_wrap .section5 .org > li:nth-child(1){ margin-bottom:1.5rem;} .klic_wrap .section5 .org > li > strong:before{height:calc(100% + 5rem);} .klic_wrap .section5 .org > li > strong{font-size: 1rem;padding: 0.5rem 1.5rem;} .klic_wrap .section5 .org > li:nth-child(2) > strong:before{height: calc(100% + 6.35rem);} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li{width:50%;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type{padding:0 1rem;} .klic_wrap .section5 .org .depth3 > li > span{width:75%;padding:.5rem 0;font-size:.9rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type .depth4{padding-left:0;display:block;} .klic_wrap .section5 .org .lst1 .depth4 > li > span{width:100%;margin-top:1.5rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type .depth4 li:before{top:-1.5rem;left:50%;width:1px;height:1.5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type:before{width:100%;right:-50%;} .klic_wrap .section5 .org .lst1 .depth4 > li > span{width:75%;margin-top:.5rem;padding:.25rem 0;} .klic_wrap .section5 .org .depth2 .depth3{display:block;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li{width:50%;} .klic_wrap .section5 .org .depth2 .lst2 .depth3:nth-of-type(3) > li{clear:both;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:last-of-type .depth4 > li{width:100%;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:last-of-type .depth5{display:block;} .klic_wrap .section5 .org .lst2 .depth4 > li{float:none;margin:0;} .klic_wrap .section5 .org .lst2 .depth4 > li + li{margin:1rem 0 0;} .klic_wrap .section5 .org .depth2 .lst2 .depth5 > li > span{width:75%;margin:auto;padding:.3rem 0;font-weight:600;background:rgba(0,0,0,0.2);} .klic_wrap .section5 .org .depth4 > li > span{font-size:.8rem;} .klic_wrap .section5 .org .lst2 .depth6 > li > span{width:75%;margin:auto;padding:.3rem 0;font-size:.75rem;} .klic_wrap .section5 .org .lst2 .depth6{margin-top:.5rem;} .klic_wrap .section5 .org .lst2 .depth5 > li:first-of-type > span:after, .klic_wrap .section5 .org .depth2 .lst2:before, .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li > span:before, .klic_wrap .section5 .org .lst2 .depth6 > li:first-of-type:after{display:none;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:nth-of-type(2){float:left;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:nth-of-type(n+3){margin-top:1.4rem;} .klic_wrap .section5 .org .depth2 .lst2 .depth3 > li:nth-child(6){position: absolute; bottom: -58.5rem;} .klic_wrap .section5 .org .depth2 .lst2{margin-top:0;padding:2rem 0;border:3px solid #8a8cc8;} .klic_wrap .section5 .org .lst2 .depth4{margin-top:0;padding-top:1rem;} .klic_wrap .section5 .org .lst2 .depth5 > li > span:before{position:absolute;top:-.5rem;left:50%;width:3px;height:.5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst1 .depth4 > li > span:before{position:absolute;top:-.5rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:1px;height:.5rem;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth6 > li:first-of-type:before{position:absolute;top:0.5rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:1px;height:1.75rem;background:#8a8cc8;content:'';} .klic_wrap .section5 .org .lst2 .depth5 > li:first-of-type > span:before{top:-1rem;height:1rem;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:first-of-type{padding-right:0;} .klic_wrap .section5 .org .depth2 .lst1 .depth3 > li:last-of-type{padding-left:0;} /* 인사말 */ .klic_wrap .greeting_body .imgBox{ top:0.5rem; width:23rem; border-bottom-right-radius: 5rem;left:0;opacity:1; } .klic_wrap .greeting_body .imgBox .img{ background: url('/images/klic/sub/greeting_img02.png') no-repeat 68% 5%;} .klic_wrap .greeting_body .top { padding-left: 25rem; } .klic_wrap .greeting_body .top .txtBox .sTit { font-size: 1.6rem; } .klic_wrap .greeting_body .top .txtBox .mTit { font-size: 3.1rem; } /*contact*/ .contact_wrap .section5 .tab_st1_box .tab_st1 > li a{border-radius:none;background:none;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a > span{padding:1rem 0;} /*business_rd*/ .business_rd .heading2 > p{margin-bottom:5rem;} .business_rd .section2 dl.site_struct1 dd li{width:100%;} .business_rd .section2 dl.site_struct1 dd li:nth-child(n+2){margin-top:0.5rem;} .business_rd .section2 dl.site_struct2 dd > div{float:none;margin:0 auto;} .business_rd .section2 dl.site_struct2 dd > div:before{top:80%;margin-left:-105px;transform:rotate(90deg);-webkit-transform:rotate(90deg);} .business_rd .section2 dl.site_struct2 dd strong{float:none;margin:5rem auto 1rem;} /*sso_solution*/ .sso_solution .section1 .sso_con{padding:4rem 0;} .sso_solution .section1 .sso_con .circle{position:relative;left:auto;top:auto;border-radius:1rem;transform:none;-webkit-transform:none;width:100%;height:100px;} .sso_solution .section1 .sso_con .con{display:block;margin:1rem 0 0;width:100%;height:auto;padding:1rem 1.5rem 1rem 10rem !important;} .sso_solution .section1 .sso_con .con.left .tit{left:3rem;right:auto;} .sso_solution .section1 .sso_con .con.right .tit{left:3rem;} .sso_solution .section1 .sso_con .con ul{display:block;} /*sub_section2*/ .business_infra .section2 .container2 .spot_img { width: calc(100% - 16.3rem); } .business_infra .section2 .container2 .con_infra .tit h4 { font-size: 2rem; } /* contact */ .contact_wrap .section3{height:auto;} /* 모션 none */ .section .heading2 > h4, .section .heading2 > p{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .klic_wrap .section2 .vision_lst > li{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .klic_wrap .section3:before{-webkit-transform:scale(1) translate(-50%, -50%);transform:scale(1) translate(-50%, -50%);} .klic_wrap .section3 .value_lst > li{opacity:1;} .klic_wrap .greeting_body .top::after { width: 200%;} .klic_wrap .greeting_body .top .txtBox {animation: none;opacity:1; } .greeting_body .imgBox{animation: none;opacity:1; } .klic_wrap .greeting_body .bottom ul li:nth-child(1) {animation: none;opacity:1; } .klic_wrap .greeting_body .bottom ul li:nth-child(2) {animation: none;opacity:1; } .story_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;} .cloud_sc .section2 .box_top, .cloud_sc .section2 .box_mid{opacity:1;} .cloud_sc .section2 .title01{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_sc .section2 .title02{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_sc .section2 .title03{opacity:1;transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);} .cloud_sc .section2 .data_stand li{opacity:1;-webkit-transform:scale(1);transform:scale(1);} .cloud_sc .section2 .line:before, .cloud_sc .section2 .line:after, .cloud_sc .section2 .data_stand2 li .line2:before, .cloud_sc .section2 .data_stand2 li .line2:after{opacity:1;} .cloud_sc .section2 .line em, .cloud_sc .section2 .data_stand2 li .line2{height:3.75rem;} .cloud_sc .section2 .data_stand2 li:nth-child(2) .line2{height:7rem;} .cloud_sc .section2 .data_stand2, .cloud_sc .section2 .data_stand2:before{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_msp .section .logo_img, .cloud_msp .section2 .container2 > p, .cloud_msp .section .service_lst1, .cloud_msp .section .service_lst2{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .cloud_business .section .title, .cloud_business .section .system_num > ul > li, .cloud_business .section .sys_tit, .cloud_business .section p, .cloud_business .section .sys_box img{opacity:1;transform:translate(0);-webkit-transform:translate(0);} .cloud_business .section .system_num:before{opacity:1;width:100%;} .business_si .section3 .process_box ol > li .txtBox{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .nforU section dl{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .story_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;} .system_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1;} .web_wrap .list_box li{-webkit-transform:matrix(1, 0, 0, 1, 0, 0);-ms-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);opacity:1; } .contact_wrap .title em, .contact_wrap .title em{transform:translateY(0);-webkit-transform:translateY(0);} .contact_wrap ul[class^="culture"] > li{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section2 ul.culture2:before{opacity:1;height:101px;} .contact_wrap .section2 .culture_box{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section3 .wlb_list > li{transform:translateX(0);-webkit-transform:translateX(0);opacity:1;} .contact_wrap .section3 .wlb_list::after { content: ''; display: block; clear: both;} .contact_wrap .section4 .recruit_wrap:before{transform:scale(1.2);-webkit-transform:scale(1.2);} .contact_wrap .section4 .recruit_wrap .recruit_list li{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .contact_wrap .section5 #con_com_box .con{left:0;opacity:1;} .contact_wrap .section5 .tab_st1_box{left:30%;opacity:1;} } @media (max-width:1200px){ /*** 레이어팝업 :인사말 더보기***/ .layerPop.klic .heading1 > span{font-size:1.5rem;} .layerPop.klic .heading1 > strong{font-size:4rem;} /*contact*/ .contact_wrap .section5 .tab_st1_box{left:auto;overflow:hidden;width:96%;margin:0 2% 1rem; } .contact_wrap .section5 .tab_st1_box .tab_st1 > li a{padding:0 1rem !important;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a:before{display:none;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li.on a{background:#262ccc;} .contact_wrap .section5 .tab_st1_box .tab_st1 > li a > span{padding:0;} .contact_wrap .section5 .reactTab.tab_st1_box ul > li.on:before{color:#fff;z-index:3;} .contact_wrap .section5 .tab_st1_box .contactMove{display:none !important;} /*business*/ .business .con .txt dl dd{width:100%;} .business .con .txt dl dt{width:100%;} .business .con.txt_left .txt{text-align:right;} /*edu_management*/ .edu_management .section1 .data_stand{width:100%;} .edu_management .section1 .data_stand2{width:100%;} /*nforU*/ .nforU .web_access_wrap{margin:2rem -1rem 0} .nforU .section2 .cms_list2{text-align:center;} .nforU .section2 .cms_list2 li{width:auto;display:inline-block;float:none;} .nforU .section2 .cms_list2 li:before{height:0.8rem;bottom:0.8rem;opacity:0.2;} .nforU .section3 .web_access{width:100%;max-width:45rem;} .nforU .section3 .web_access li:first-child:after, .nforU .section3 .web_access li:first-child:before{display:none;} .nforU .section3 dl{width:50%;} .nforU .section3 dl.box3{width:100%;margin-top:1.5rem;} .nforU .section3 dl.box3 dd{min-height:auto;} .nforU .section4 dl{width:100%; } .nforU .section4 dl dt{margin:2rem 0 1rem !important;} .nforU .section4 dl.box3 dt br{display:none;} /* story */ .story_wrap{margin-bottom:6rem;} .story_wrap .tit{font-size:3rem;} .story_wrap .tit:before{width:508px;height:137px;} .story_wrap .list_box li:nth-child(3n+2){margin-top:7rem;} .story_wrap .list_box li a .imgBox{max-width:260px;} .story_wrap .list_box li a .txt{margin-top:1rem;padding:0 1rem;font-size:1rem;} .story_wrap .btn_wrap{margin-top:6rem;} /** 레이어팝업 :story 내용 보기 **/ .layerPop.story:after{height:4.5rem;} .layerPop.story .tit_wrap .tit{font-size:2.31rem;} /* system */ .system_wrap{margin-bottom:6rem;} .system_wrap .list_box li .tit{font-size:1.2rem;} .system_wrap .btn_wrap{margin-top:6rem;} /* web */ .web_wrap{margin-bottom:6rem;} .web_wrap .list_box li a .item .tit{font-size:1.157894rem; } .web_wrap .list_box .btn_wrap{margin-top:6rem;} /*cloud_sc*/ .cloud_sc .section2 .box_mid{padding:2rem 2rem 3.5rem;border-radius:3rem;} .cloud_sc .section2 .title01{top:4.5rem;} /* cloud_business */ .cloud_business .system_num > ul > li > strong{width:4.8rem;font-size:1.1rem;} .cloud_business .system_num > ul > li.sort > strong{font-size:1rem;} .cloud_business .system_num > ul > li > span{font-size:1rem;} .cloud_business .system_num > ul > li.sort > span{font-size:.9rem;} .cloud_business .system_num > ul > li.difference > strong:before{width:8rem;} .cloud_business .system_num > ul > li.difference > strong:after{top:-2.05rem;left:105%;font-size:.75rem;background:#f7f8fe;padding:0 .5rem;} } @media (max-width:1170px){ } @media (max-width:1024px){ .logo > a > .txt{background:url(/images/layout/logo_txt.png) no-repeat center left;} .heading1 > span{font-size:1.5rem;} .heading1 > strong{font-size:3rem;} .menu_wrap, .left_menu_wrap{display:none;} .section .bg_txt > strong{font-size:6rem; bottom: -2.7rem;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body .top { padding-left: 0; } .klic_wrap .greeting_body .imgBox{display:none;} .klic_wrap .greeting_body .top .txtBox .sTit { font-size: 1.6rem; } .klic_wrap .greeting_body .top .txtBox .mTit { font-size: 2.8rem; } .klic_wrap .greeting_body .top .txtBox .sign { font-size: 0.8rem; } .klic_wrap .greeting_body .top .txtBox .sign span { font-size: 1.1rem; } /** 레이어팝업 :인사말 더보기**/ .layerPop.klic .greeting_body > .top{padding-right:0;} .layerPop.klic .greeting_body .imgBox, .layerPop.klic .container:before, .layerPop.klic .container:after{display:none;} .layerPop.klic .layerPop_tit{margin-bottom:6.5rem;} .layerPop.klic .heading1 > span{font-size:1rem;} .layerPop.klic .heading1 > strong{font-size:2.5rem;} /*contact*/ .contact_wrap .title strong{font-size:2.5rem;} .contact_wrap .title p{font-size:2rem;} .contact_wrap .section3 .wlb_list > li{width:50%;} .contact_wrap .section3 .wlb_list > li:nth-child(n+3){border-top:1px solid #bfc7e9;padding-top:1.5rem;} .contact_wrap .section3 .wlb_list > li:nth-child(2n+1){border-left:none;} /*business*/ .business .section1 .title h4 br{display:block;} .business_infra .heading2 > p br{display:none;} .business .section1 .title h4:before{display:none;} /*business_rd*/ .business_rd .heading2 > p{margin-bottom:2rem;} .business_rd .section3 dl{width:80% !important;float:none;margin:0 auto 1.5rem !important;} /*edu_management*/ .edu_management .section1 .data_stand{height:auto;border-radius:3rem;padding:3rem 0 2rem; } .edu_management .section1 .data_stand:before{border-radius:0 0 3rem 3rem;} .edu_management .section1 .data_stand li{margin:0 3rem 2rem;} .edu_management .section2 dl{width:100%;} .edu_management .section2 dl dd p{min-height:auto;margin-bottom:1rem;} .edu_management .section2 dl + dl{margin-top:1.5rem;} /*design*/ .design .section2 ul li{padding:0 0.8rem;} .design .section2 ul li p{width:11rem;height:11rem;} /*nforU*/ .nforU .section2 p.blue{margin:3rem 0;} .nforU .section2 .nforU_con:before{width:14rem;height:14rem;top:5rem;animation:none;-webkit-animation:none;} .nforU .section2 .nforU_con .circle{position:relative;left:auto;top:auto;transform:none;-webkit-transform:none;margin:0 auto;} .nforU .section2 .nforU_con .cms_list{width:49%;} .nforU .section2 .nforU_con .cms_list li{border-radius:1rem;} /*sso_solution*/ .sso_solution .section2 .con > ul{display:block;} .sso_solution .section2 .con > ul > li{display:block;width:100% !important;} .sso_solution .section2 .con > ul > li .user {padding-bottom:5rem;} .sso_solution .section2 .con > ul > li .user:before{left:18%;top:auto;bottom:2.4rem;width:64%;height:1px;border-top:1px dotted #3143e8;} .sso_solution .section2 .con > ul > li .user li{display:inline-block;width:30%;margin:0 1%;} .sso_solution .section2 .con > ul > li .user li:after{top:7rem;left:50%;width:1px;height:2rem;border-left:1px dotted #3143e8;} .sso_solution .section2 .con > ul > li .user li:nth-child(2):after{width:1px;height:4rem;} .sso_solution .section2 .con > ul > li .user li p{width:100%;border-radius:2rem;margin:0;} .sso_solution .section2 .con > ul > li .user li p:before{right:auto;left:50%;top:auto;bottom:-6px;transform:translateX(-50%);-webkit-transform:translateX(-50%);} .sso_solution .section2 .con > ul > li:nth-child(2){text-align:center;padding:0;} .sso_solution .section2 .con > ul > li .arrw{position:relative;right:auto;top:auto;transform:none;-webkit-transform:none;width:100%;height:101px;max-width:none;background:url('/images/klic/sub/arrw_sso2.png') no-repeat center;margin:1rem 0;} .sso_solution .section2 .con > ul > li .server{max-width:none;width:100%;} .sso_solution .section2 .con > ul > li .data{max-width:none;width:100%;} .sso_solution .section2 .con > ul > li:nth-child(3):before{display:none;} .sso_solution .section2 .con > ul > li .data:before{height:150%;} .sso_solution .section2 .con > ul > li .service{margin-top:2rem;} .sso_solution .section2 .con > ul > li .service:before{top:-6px;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%); } .sso_solution .section2 .con > ul > li .service ul li{width:16.6666%;} /*groupware*/ .groupware .heading2 > p br{display:none;} .groupware .con { margin:0;min-height:18rem;} .groupware .con + .con { margin:4rem 0 0;} .groupware .con dl{width:100%; } .groupware .con dl dd{width:55%;} .groupware .con .img{position:absolute;width:40%;height:250px;right:0;top:4rem;overflow:hidden;} .groupware .con .img img{position:relative;top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);height:100%;} .groupware .con.txt_right dl dd{float:right;} .groupware .con.txt_right .img{right:auto;left:0;} /*cloud_sc*/ .cloud_sc .section2 .data_stand{padding:6.5rem 2rem 2rem 2rem;height:auto;border-radius:3rem;} .cloud_sc .section2 .data_stand:before{border-radius:0 0 0 3rem;} .cloud_sc .section2 .data_stand:after{border-radius:0 0 3rem 0;} .cloud_sc .section2 .data_stand li{margin-bottom:1rem;} /* cloud_msp */ .cloud_msp .section2 .container2 > p{font-size:2rem;} .cloud_msp .service_lst1{margin:-.5rem;} .cloud_msp .service_lst1 > li{padding:.5rem;} .cloud_msp .service_lst1 > li .tit{font-size:1rem;} .cloud_msp .service_lst1 > li > span{font-size:.85rem;} .cloud_msp .service_lst2 > ul > li > div > span{font-size:.8rem;} /* cloud_business */ .cloud_business .system_num{padding:2rem 0 0;overflow:hidden;} .cloud_business .system_num > ul > li{width:20%;} .cloud_business .system_num:before{position:absolute;top:2.5rem;left:0;width:0;height:1.2rem;background:url('/images/klic/sub/cloud_business_arr1.png') no-repeat center left/ cover;content:"";opacity:0;-webkit-transition:opacity 0.5s, width 0.5s;transition:opacity 0.5s, width 0.5s;-webkit-transition-delay:1.3s;transition-delay:1.3s;} .cloud_business .system_num:after{position:absolute;bottom:2.5rem;right:57%;width:0;height:1.2rem;background:url('/images/klic/sub/cloud_business_arr1.png') no-repeat center right/ cover;content:"";opacity:0;-webkit-transition:opacity 0.5s, width 0.5s;transition:opacity 0.5s, width 0.5s;-webkit-transition-delay:1.3s;transition-delay:1.3s;} .cloud_business .system_num:after{opacity:1;width:100%;} .cloud_business .sys_box .sys_tit{margin-top:4.5rem;padding:1rem;} .cloud_business .sys_box .sys_tit > strong{padding:0;margin:0;} .cloud_business .sys_box .sys_tit > strong:before{top:-4.25rem;left:50%;width:2.8rem;height:2.25rem;-webkit-transform:translateX(-50%) rotate(90deg);transform:translateX(-50%) rotate(90deg);} .cloud_business .sys_box p{font-size:.85rem;} } @media (max-width:1000px){ .sTop_box .txt_box ul li, .sTop_box.si .txt_box ul li{ width:100%;} /* web */ .web_wrap .list_box li.img_list{width:50%;} .web_wrap .list_box li a .item .tit{font-size:1.2rem;} .web_wrap .list_box li a .item .desc{font-size:1rem;} .web_wrap .list_box li a .item .btn_site{width:4rem;height:2.5rem;margin-top:0.5rem;} .web_wrap .list_box li a .item .btn_site span{margin-top:0.65rem;} /** 레이어팝업 :인사말 더보기**/ .layerPop.klic .heading1{background:url(/images/klic/sub/greeting_bg02.png) no-repeat right 1.75rem;background-size:220px;} } @media (max-width:900px){ .prev_btn{font-size:1.2rem;} /*layerPop1*/ #layerPop1 .detail_box3 .detail_spot02 .sub_detail { padding: 1rem; } /*contact*/ .contact_wrap .section4 .recruit_wrap .recruit_list li{width:100%;} /*business*/ .business .section6{padding-bottom:0;} .business .section6 .request_list > li{width:100%;margin-bottom:2rem; } /*business_infra*/ .business_infra .section1 .con_infra{transform:scale(0.8);} .business_infra .section3 .infra_cust_list ul{padding:0;} .business_infra .section3 .infra_cust_list ul li{width:50%;} /*main_client*/ .main_client ul li{width:25%;} /*edu_management*/ .edu_management .section1 .data_stand2 li{width:100%;line-height:4rem;} .edu_management .section1 .data_stand2 li:nth-child(2){margin:0.8rem 0;} /*design*/ .design .section2 ul li{width:100%;padding:0;} .design .section2 ul li + li{margin-top:2.5rem; } .design .section2 ul li strong{margin-bottom:1rem;} /*sso_solution*/ .sso_solution .section1 .klogin p.circle{margin:3rem auto;} .sso_solution .section1 .klogin ul li{width:100%;margin:0.5rem 0;padding-top:0;} .sso_solution .section1 .klogin ul li .dot:after{top:-6px;} .sso_solution .section1 .klogin ul li p{line-height:4rem;} /* story */ .story_wrap{margin-bottom:4rem;} .story_wrap .tit{font-size:2rem;} .story_wrap .tit:before{bottom:-0.72rem;width:254px;height:68px;} .story_wrap .list_box li:nth-child(3n+2){margin-top:6rem;} .story_wrap .list_box li a .imgBox{max-width:200px;} .story_wrap .list_box li a .txt{margin-top:0.77rem;padding:0 0.5rem;font-size:0.88rem;} .story_wrap .btn_wrap{margin-top:4rem;} /* system */ .system_wrap{margin-bottom:4rem;} .system_wrap .list_box li .inner{padding-left:13rem;padding-right:1rem;height: 6rem;} .system_wrap .list_box li .tit{font-size:1rem;} .system_wrap .list_box li .subTit{display:block;position:relative;top:auto;bottom:auto;right:auto;width:100%;max-height:none;margin-top:0.277rem;text-align:left;} .system_wrap .btn_wrap{margin-top:4rem;} /* web */ .web_wrap{margin-bottom:4rem;} .web_wrap .list_box .btn_wrap{margin-top:4rem;} /* SI 사업분야*/ .business_si .section1 .con_infra{transform:scale(0.8);} .business_si .process_box{padding:1.25rem;} .business_si .process_box ol > li .num{margin-bottom:0.5rem;} .business_si .process_box ol > li .tit{font-size:1.11rem;} .business_si .process_box ol > li ul{margin-top:0.5rem;} .business_si .process_box ol > li ul li{font-size:0.83rem;} /*cloud_sc*/ .cloud_sc .section2 .box_mid{padding:1rem; margin-bottom: 2rem;} .cloud_sc .section2 .data_stand2 li{width:100%;line-height:4rem;} .cloud_sc .section2 .data_stand2 li:nth-child(2){margin:0.8rem 0;} .cloud_sc .section2 .title02{margin:-1.25rem auto 4.5rem;font-size:1.5rem;} .cloud_sc .section2 .title03{bottom:-1.25rem;padding:0 1.5rem;line-height:1.3;font-size:1.5rem;} .cloud_sc .section2 .data_stand2:before, .cloud_sc .section2 .data_stand2 li .line2{display:none;} .cloud_sc .section2 .data_stand2 li{position:static;} .cloud_sc .section2.active .data_stand2 li:nth-child(2) .line2{display:block;top:-3.5rem;height:3.5rem;} /* cloud_msp */ .cloud_msp .section2 .container2 > p{font-size:1.5rem;} } @media (max-width:860px){ /*sub_section2*/ .business_infra .section2 .container2 .spot_img { width: calc(100% - 12rem); } .business_infra .section2 .container2 .con_infra .tit h4 { font-size: 1.5rem; padding-bottom: 0.5rem;} .business_infra .section2 .container2 .con_infra .tit div { margin-top: 1.5rem; } /* 개인정보처리방침 241104 추가 */ .privacy h2 { padding:0.7rem 1rem; border-radius: 0.5rem;} .privacy .inner { padding: 1rem 1.2rem; } /* work platform */ .section .list2 ul > li {flex-direction:column;} .section .list2 p.tit {width:100%;} .wk-platform .section7 .data_stand {flex-wrap:wrap; gap: 2.5rem 0;} .wk-platform .section7 .data_stand li {width:50%; flex:none;} .wk-platform .func .con_box_st .img_box {margin-top:1rem;} } @media (max-width:767px){ /*layerPop1*/ #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 .sub_left, #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 .sub_right, #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 .sub_left, #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 .sub_right { width: 100%; float: none; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot02 .sub_right, #layerPop1 .detail_box3 .detail_spot02 .sub_spot03 .sub_right { margin-top: 1.5rem; } /*sub_section2*/ .business_infra .section2 .container2 { padding: 3rem 1rem; } .business_infra .section2 .container2 .spot_img { width: 100%; } .business_infra .section2 .container2 .con_infra { position: relative; width: 100%; transform: none; right: 0; top: 0; margin-top: 1rem;} .menu_wrap{max-width:210px;} .menu_wrap #menu > li.on > a{font-size:1.3rem;} .menu_wrap #menu > li.on > a > span:after{bottom:3px;} .heading1 > span{font-size:1rem;} .heading1 > strong{font-size:1.65rem;margin-top:.5rem;} .heading2 > h4{font-size:2rem;} .heading2 > h4.small{font-size:1.65rem;} .heading2 > h4.big{font-size:1.7rem; } .heading2 > p{font-size:1.2rem;} .heading2 > h4, .heading2 > p{opacity:1;transform:translateY(0);-webkit-transform:translateY(0); font-size: 0.9rem;} .txt_p{font-size:.85rem;} .more_btn_black{opacity:1 !important;-webkit-transform:translateX(0) skewX(-35deg) !important;transform:translateX(0) skewX(-35deg) !important;} .more_btn_black:hover > span, .more_btn_black:focus > span{letter-spacing:0;} .more_btn_black:hover > span:before, .more_btn_black:focus > span:before{width:30%;} .more_btn_black{width:13rem;height:3rem;} dl.con_box_st{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /* klic */ .klic_wrap .clip_img{display:none;} .klic_wrap .section1 p.txt_p{margin-top:1.5rem;} .klic_wrap .section2{padding:5rem 0;} .klic_wrap .section2 .vision_lst > li strong{display:inline-block;padding:0;font-size:1.5rem;} .klic_wrap .section2 .vision_lst > li{padding:0 1rem;} .klic_wrap .section2 .vision_lst > li strong:before{display:none;} .klic_wrap .section2 .vision_lst > li .txt_p{min-height:60px; } .klic_wrap .section2 .vision_lst > li .txt_p br{display:none;} .klic_wrap .section3 .value_lst > li{padding:0 1rem;font-size:1.7rem;} .klic_wrap .section4{padding:3rem 0;} .klic_wrap .section4 .history_lst{margin:-.5rem 0;} .klic_wrap .section4 .history_lst .slider_wrap{padding:.5rem 0;} .klic_wrap .section4 .history_lst .slider_wrap + .slider_wrap{border-top:1px solid #eee;} .klic_wrap .section4 .progress-wrap{margin-top:0;opacity:0;visibility:hidden;} .klic_wrap .section5{padding:3rem 0;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body .heading1 > strong{font-size:2.5rem;} /** 레이어팝업 :인사말 더보기**/ .layerPop.klic .heading1{background-size:200px;} .layerPop.klic .heading1 .txt1{font-size:1.1rem;} .layerPop.klic .heading1 > span{font-size:.95rem;} .layerPop.klic .heading1 > strong{font-size:2rem;} /*contact*/ .contact_wrap .title em, .contact_wrap .title em{transform:translateY(0);-webkit-transform:translateY(0);} .contact_wrap .title p em {font-size: 1rem;} .contact_wrap ul[class^="culture"] > li{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section2 ul.culture2:before{opacity:1;height:101px;} .contact_wrap .section2 .culture_box{transform:translateY(0);-webkit-transform:translateY(0);opacity:1;} .contact_wrap .section3 .wlb_list > li{transform:translateX(0);-webkit-transform:translateX(0);opacity:1;} .contact_wrap .section4 .recruit_wrap:before{transform:scale(1.2);-webkit-transform:scale(1.2);} .contact_wrap .section4 .recruit_wrap .recruit_list li{opacity:1;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);transform:matrix(1, 0, 0, 1, 0, 0);} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(n+3){margin-bottom:5rem;} /* 2021.04.13. sehyun oh, 추가 */ .contact_wrap .section4 .recruit_wrap .recruit_list li:last-child{margin-bottom:0;} /* 2021.04.13. sehyun oh, 추가 */ .contact_wrap .section5 #con_com_box .con{left:0;opacity:1;} .contact_wrap .section5 #con_com_box .con > ul{padding:1.7rem 2rem 1.5rem 6rem;} .contact_wrap .section5 .tab_st1_box{opacity:1;} /*business*/ .business .section1 .title h4{letter-spacing:0;opacity:1;font-size:4rem;} .business .section1 .title p{font-size:1.3rem;opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .business .section1 .title p strong:before{width:100%;} .business .section6 .bg{transform:scale(1);-webkit-transform:scale(1);opacity:1;} .business .section6 h4{transform:translateX(0);-webkit-transform:translateX(0);opacity:1;} .business .con .tit{font-size:5rem;} .business .con .img{position:relative;left:auto;top:auto;right:auto;width:100%;max-width:100%;height:10rem;} .business .con .img img{max-width:100%;} .business .con .txt{width:100%;height:auto;} .business .con.txt_left .txt{text-align:left;} .business .con .txt dl dt{width:11rem;font-size:1.5rem; } .business .con .txt dl dd{width:calc(100% - 11rem);} .business_si .heading2 > p { font-size: 1rem;} /*business_infra*/ .business_infra .section1 .con_infra{transform:scale(1);width:100%;height:auto;padding:2rem 0;text-align:center;margin-top:12rem;} .business_infra .section1 .con_infra .tit{width:13rem;height:13rem;margin:-10rem auto 2rem;} .business_infra .section1 .con_infra .tit p img{width:170px;} .business_infra .section1 .con_infra:before{border-radius:0;} .business_infra .section1 .con_infra ul li{position:relative;opacity:1;left:auto !important;top:auto !important;animation:none !important;-webkit-animation:none !important;} /*main_client*/ .main_client ul:before{width:100%;} /*business_rd*/ .business_rd .heading2 > p{font-size:0.9rem;} .business_rd dl{margin:1.5rem 0;} .business_rd .section2 dl{width:100%;} .business_rd .section2 dl + dl{margin-left:0;} .business_rd .section3{padding:4rem 0;} .business_rd .section4 ul{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /*design*/ .design .section1 .title{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);font-size:1.5rem; } .design .section1 .title em{color:#070ede;animation:none !important;-webkit-animation:none !important;} .design .section1.active .title:before{top:auto;bottom:0;animation:none;-webkit-animation:none;transform:skewX(-30deg);-webkit-transform:skewX(-30deg);} .design .section1 .title:before{height:3rem;} .design .section1 .title strong{font-size:2rem;} .design .section2 .title{font-size:2rem;letter-spacing:-2px;opacity:1;} .design .section2 ul li{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /*edu_management*/ .edu_management .section1 .title{opacity:1;transform:translateY(-0.6rem) !important;-webkit-transform:translateY(-0.6rem) !important; font-size: 1.5rem;} .edu_management .section1 .data_stand li{opacity:1;-webkit-transform:scale(1);transform:scale(1); width: 6.5rem; height: 6.5rem; padding-top: 1rem;} .edu_management .section1 .line:before, .edu_management .section1 .line:after{opacity:1;} .edu_management .section1 .line em{height:8rem;} .edu_management .section1 .data_stand2{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .edu_management .section1 .data_stand2 li { font-size: 1.1rem; line-height: 3rem;} .edu_management .section2 .heading2 > p { font-size: 0.9rem;} /*nforU*/ .nforU .heading2 > p{font-size:0.9rem;} .nforU section dl{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .nforU .section2 p.blue{opacity:1;transform:translateX(0);-webkit-transform:translateX(0);} .nforU .section2 .nforU_con{opacity:1;} .nforU .section2 .nforU_con .cms_list{width:100%;} .nforU .section2 .nforU_con .cms_list li{margin:0.3rem 0;} .nforU .section2 .nforU_con .cms_list.left .tit{float:left;} .nforU .section2 .cms_list2 li:before{width:100%;} .nforU .section2 .cms_list2{margin-top:1rem;} .nforU .section3 .web_access{margin:3rem auto;} .nforU .section3 .web_access li:first-child{position:relative;left:auto;top:auto;transform:none;-webkit-transform:none;margin:0 auto;border-radius:50%;} .nforU .section3 .web_access li{width:49%;height:8rem;border-radius:1rem;margin:1rem 0 0;} .nforU .section3{padding:5rem 0;} .nforU .section3 dl{width:100%;} /*sso_solution*/ .sso_solution .section .klogin, .sso_solution .section .sso_con, .sso_solution .section2 .heading2 ul, .sso_solution .section2 .con > ul > li, .sso_solution .section3 dl{opacity:1;transform:none;-webkit-transform:none;} .sso_solution .section2 .heading2 ul li{width:100%;} .sso_solution .section1 .klogin ul li p{line-height:3rem; font-size: 1rem;} /*groupware*/ .groupware .heading2 > p { font-size: 1rem; margin-bottom: 2rem;} .groupware .con dl dt{font-size:2.2rem; margin-bottom: 1rem;} .groupware .con dl{opacity:1;} .groupware .con dl dt:before{width:100%;top:1.2rem;} .groupware .con .img{opacity:1;transform:none;-webkit-transform:none;} /* story */ .story_wrap .list_box li:nth-child(3n+2){margin-top:0;} .story_wrap .list_box li{width:50%;} .story_wrap .list_box li:nth-child(3n+2), .story_wrap .list_box li{margin-top:2.5rem;} .story_wrap .list_box li:nth-child(3n+1){clear:none;} /** 레이어팝업 :story 내용 보기 **/ .layerPop.story .tit_wrap .tit{padding:0 1rem;font-size:1.77rem;} .layerPop.story .tit_wrap .date{margin-top:1.5rem;} .layerPop.story .view{margin-top:3rem;} /* web */ .web_wrap .list_box li.txt_list{padding:1rem 1.5rem;} .web_wrap .list_box li.txt_list .inner{padding-left:0;} .web_wrap .list_box li.txt_list .inner .left { position: relative;} .web_wrap .list_box li.txt_list .inner .type{margin-right:1rem; font-size: 0.8rem;} .web_wrap .list_box li.txt_list .inner .date { font-size: 0.75rem;} .web_wrap .list_box li.txt_list .inner .tit { font-size: 0.9rem} .web_wrap .list_box li.txt_list .inner .subTit{bottom:0;max-height:1.388888rem;margin:auto 0;font-size: 0.8rem;} .web_wrap .list_box li a .txt .tit{font-size:0.95rem;} .web_wrap .list_box li a .item .tit{font-size:1rem;} .web_wrap .list_box li a .item .type{font-size:0.9rem;} .web_wrap .list_box li a .item .desc{font-size:0.9rem;} .web_wrap .list_box li a .item .date{font-size:0.85rem;} .web_wrap .list_box li a .item .btn_site{width:3.5rem;height:2rem;font-size:0.8rem;} .web_wrap .list_box li a .item .btn_site span{margin-top:0.5rem;} /* SI 사업분야*/ .business_si .section1 .con_infra{transform:scale(1);width:100%;height:auto;padding:4.5rem 0 2rem;text-align:center;margin-top:12rem;background:none;} .business_si .section1 .con_infra .tit{width:13rem;height:13rem;margin:-10rem auto 2rem;} .business_si .section1 .con_infra .tit p img{width:170px;} .business_si .section1 .con_infra:before{border-radius:0;} .business_si .section1 .con_infra ul li{position:relative;opacity:1;left:auto !important;top:auto !important;animation:none !important;-webkit-animation:none !important;} .business_si .col_box .col_item{float:none;width:100%;} .business_si .col_box .col_item + .col_item{margin-top:1.5rem;} .business_si .process_box ol > li{width:100%;padding-right:0;background:url("/images/klic/sub/si_process_line02.png") repeat-y 0.7rem top;} .business_si .process_box ol > li:after{content:"";display:block;clear:both;} .business_si .process_box ol > li:last-child:before{top:calc(100% - 0.8rem);bottom:0;right:auto;left:0.15rem;width:24px;height:15px;background-image:url("/images/klic/sub/si_process_arr02.png");} .business_si .process_box ol > li + li{padding-top:1rem;} .business_si .process_box ol > li .num{float:left;margin-right:0.5rem;} .business_si .process_box ol > li ul{margin-left:3rem;} /*cloud_sc*/ .cloud_sc .heading2 > p{margin-bottom:3rem;font-size:.9rem;} .cloud_sc .heading2 > p.big{ font-size:1.1rem; } .cloud_sc .section2 .box_top{width:8rem;height:8rem;} .cloud_sc .section2 .box_top span{margin-top:.25rem;font-size:.9rem;} .cloud_sc .section2 .box_top img{display:block;margin:auto;width:2.5rem;} .cloud_sc .section2 .data_stand li { width: 6.5rem; height: 6.5rem;padding-top: 1.3rem;} .cloud_sc .section2 .title01, .cloud_sc .section2 .title02, .cloud_sc .section2 .title03{font-size:1.2rem;} .cloud_sc .section2 .data_stand2 li{font-size:1rem; line-height: 2.5rem;} .cloud_sc .section2 .data_stand2 { margin-bottom: 1rem;} .cloud_sc .prev_btn{margin:3rem auto 5rem !important;} /* cloud_msp */ .cloud_msp .logo_img{margin:-1rem;text-align:center;} .cloud_msp .logo_img > li{display:inline-block;width:calc(50% - 3px);float:none;padding:1rem;} .cloud_msp .section2 .container2 > p{padding:2rem 0 3rem;} .cloud_msp .service_lst1{margin:0;} .cloud_msp .service_lst1 > li{position:relative;width:100%;min-height:13rem;padding-left:15rem;} .cloud_msp .service_lst1 > li > img{position:absolute;top:0;left:0;width:13rem;margin:1.25rem auto 0;} .cloud_msp .section2 .container2 > p{font-size:1rem;} .cloud_msp .prev_btn{margin:3rem auto 5rem !important;} /* cloud_business */ .cloud_business .prev_btn{margin:3rem auto 5rem !important;} .cloud_business .system_num > ul > li.sort > strong { font-size: 0.9rem;} /* cloud_business */ .cloud_business .sys_box{padding:1.75rem;} .cloud_business .system_num > ul > li{width:25%;} .cloud_business .system_num:after{right:20%; bottom: 2rem;} .cloud_business .title{font-size:1.1rem; margin: 1rem 0;} .cloud_business .sys_box .sys_tit > strong{font-size:1rem;} .cloud_business .system_num > ul > li > strong { font-size: 1rem;} .cloud_business .system_num > ul > li > span { font-size: 0.8rem;} .cloud_business .system_num > ul > li.other:after,.cloud_business .system_num > ul > li.sort > span { font-size: 0.7rem;} } @media (max-width:700px){ .sTop_box { padding: 1.5rem; } .sTop_box .img { display:none;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body .bottom { margin-top: 4rem;} .klic_wrap .greeting_body .bottom ul li { width:100%; } .klic_wrap .greeting_body .bottom ul li + li { margin-left: 0;} .klic_wrap .greeting_body .bottom ul li p{ margin-bottom: 1.3rem;} } @media (max-width:640px){ /*layerPop1*/ #layerPop1 { font-size: 0.8rem; } #layerPop1 .detail_box1 h4 { font-size: 2rem; } #layerPop1 .detail_logo { display: none; } #layerPop1 .detail_box2 { margin-bottom: 4.5rem; } #layerPop1 .detail_box3 .detail_spot01 img { max-width: 10rem; top: -1.5rem; } #layerPop1 .detail_box3 .detail_spot01 ul { padding-top: 4rem; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot01 { padding: 1rem; } .prev_btn{font-size:1rem;} .heading2 > h4{margin-bottom:2rem;font-size:1.5rem;} .heading2 > h4.small{margin-bottom:1.2rem;font-size:1.3rem;} /* klic */ /** 레이어팝업 :인사말 더보기**/ .layerPop.klic .heading1{background-image:none;} /*contact*/ .contact_wrap .title .bul03 { font-size: 1rem;} .contact_wrap .title strong{font-size:1.5rem;} .contact_wrap .title strong br{display:none;} .contact_wrap .title p{font-size:1.5rem;} .contact_wrap .section3{padding:1rem 0 0 ;} .contact_wrap .section3 .wlb_list > li { font-size: 0.8rem;} .contact_wrap .section3 .wlb_list > li strong{font-size:1rem;} .contact_wrap .section4 .recruit_wrap{padding:3rem 0;} .contact_wrap .section4 .recruit_wrap .recruit_list li{font-size:1.2rem;margin-bottom:3rem;} .contact_wrap .section4 .recruit_wrap .recruit_list li:nth-child(3){margin-bottom:3rem;} .contact_wrap .section5{margin-top:4rem;} .contact_wrap ul[class^="culture"] > li{width:100%;} /*business*/ .business .section1 .title h4{margin-bottom:1.5rem;font-size:2.3rem;} .business .section1 .title p br{display:none;} .business_si .heading2 > h4 { margin-bottom: 2rem;} .business_si .section1 .con_infra .tit{width:8rem;height:8rem; font-size: 0.8rem;} .business_si .section1 .con_infra ul li {font-size: 1.1rem;} .business .con .tit{font-size:2.5rem;} .business .section6 h4{font-size:3rem;letter-spacing:-1px;padding:0 2rem;} .business .section6 .bg{height:100%;} /*business_infra*/ .business_infra .section1 .con_infra ul li{font-size:1.1rem;} .business_infra .section1 .con_infra .tit{width:10rem;height:10rem;margin-bottom:1.5rem;} .business_infra .section1 .con_infra .tit p img{width:120px;image-rendering:-webkit-optimize-contrast;} .business_infra .section1 .con_infra .tit p span{font-size:1.1rem;} /*main_client*/ .main_client h4{font-size:1.6rem;} .main_client ul li{width:33.333%;} /*sso_solution*/ .sso_solution .section1 .sso_con .con{padding:1rem !important;} .sso_solution .section1 .sso_con .con .tit{position:relative;left:auto !important;top:auto;transform:none;-webkit-transform:none;} .sso_solution .section2 .con > ul{margin-top:2rem;} .sso_solution .section2 .con > ul > li .user li p{border-radius:1rem;} /*groupware*/ .groupware .con dl dt{font-size:1.3rem;text-align:center;} .groupware .con dl dt:before{display:none;} .groupware .con dl dt br{display:none;} .groupware .con dl dt span{padding:0 !important;} .groupware .con dl dd{width:100%;} .groupware .con.txt_right dl{text-align:left;} .groupware .con.txt_right dl dt span{padding:0 1rem 0 0;} .groupware .con .img{position:relative;width:100%;height:auto;right:auto;top:auto;margin-top:1rem;} .groupware .con .img img{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;-webkit-transform:none;} /* story */ .story_wrap .list_box li{float:none;width:100%;} .story_wrap .list_box li a .imgBox{max-width:320px;} .story_wrap .list_box li a .txt{padding:0 5.5rem;} /* web */ .web_wrap .list_box li.img_list{width:100%;} .web_wrap .list_box li.txt_list .inner{padding-right:0;} .web_wrap .list_box li.txt_list .inner .tit{display:block;margin:0.111111rem 0;} .web_wrap .list_box li.txt_list .inner .subTit{position:relative;top:auto;bottom:auto;right:auto;max-height:none;} /* system */ .system_wrap .list_box li .inner{height:auto;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;text-align:center;} .system_wrap .list_box li .left{position:relative;top:auto;bottom:auto;left:auto;height:auto;margin-bottom:0.19rem;} .system_wrap .list_box li .type{margin-right:0; height: auto; line-height: 1.2rem; border-radius: 1rem; font-weight: 400; font-size: 0.75rem;} .system_wrap .list_box li .date{display:block;text-align:center; font-size: 0.8rem;} .system_wrap .list_box li .tit { font-size: 0.9rem;} .system_wrap .list_box li .subTit{text-align:center; font-size: 0.8rem;} /* cloud_msp */ .cloud_msp .service_lst1{margin:-.5rem 0;} .cloud_msp .service_lst1 > li{padding:.5rem 0;} .cloud_msp .service_lst1 > li > img{position:static;} /* work platform */ .section .list2 p.tit {width:100%;} .wk-platform .func .con_box_st {width:100%;} .wk-platform .section h4.xl-weight {font-size:1.4rem; letter-spacing:0px;} .wk-platform .section4 .con_box_st ul.list, .wk-platform .section5 .con_box_st ul.list {min-height:fit-content;} .wk-platform .func .con_box_st .img_box {margin-top:15px;} .wk-platform .section7 .data_stand li {width:100%;} .wk-platform .down-btn {font-size:0.85rem;} .wk-platform .section2 dl dd {font-size:0.9rem;} .wk-platform h5 {font-size:0.95rem;} .section .list2 p.tit {font-size:1rem; height:auto; padding:1rem 0;} .section .list2 ul li ul li {font-size:1rem;} .wk-platform .func .con_wrap {margin:40px 0 20px;} } @media (max-width:600px){ div[class^="tab_st"]{margin-bottom:2rem;} .sTop_box .txt_box ul li { padding-left: 0.7rem; } .sTop_box .txt_box ul li::before { left: 0;} } @media (max-width:480px){ /*sub_section2*/ .business_infra .section2 .container2 .con_infra .tit div { margin-top: 1rem; } .menu_wrap{top:0.5rem;} .menu_wrap #menu > li.on > a{font-size:1.2rem;} .menu_wrap #menu > li.on > a > span:after{bottom:5px;} .heading2 > h4{margin-bottom:1rem;font-size:1.2rem;} .heading2 > h4.big{margin-bottom:1rem;font-size:1.2rem;} /* klic */ .klic_wrap .section2{padding:3rem 0;} .klic_wrap .section2 .vision_lst > li{float:none;width:100%;padding:0;} .klic_wrap .section2 .vision_lst > li + li{margin-top:1rem;} .klic_wrap .section3{padding:3rem 0;} .klic_wrap .section3 .value_lst > li{font-size:1.3rem;} .klic_wrap .section4 .history_lst{margin-top:2rem;} .klic_wrap .section5 .org .depth3 > li > span, .klic_wrap .section5 .org .depth2 .lst2 .depth5 > li > span, .klic_wrap .section5 .org .lst2 .depth6 > li > span, .klic_wrap .section5 .org .lst1 .depth4 > li > span{width:85%;} /* 기존 인사말 주석, 레이어 팝업 인사말 css 추가 */ .klic_wrap .greeting_body .top .txtBox .sTit { font-size: 1.3rem; } .klic_wrap .greeting_body .top .txtBox .mTit { font-size: 2.1rem; margin-top: 0.5rem; } /*contact*/ .contact_wrap .title .bul03{font-size:1rem;} .contact_wrap .title strong{font-size:1.6rem;} .contact_wrap .title p{font-size:1.4rem;} .contact_wrap .section3 .title{margin-bottom:0;} .contact_wrap .section3 .wlb_list > li{width:100%;border-left:none !important;height:auto;padding:1rem !important;} .contact_wrap .section3 .wlb_list > li:nth-child(2){border-top:1px solid #bfc7e9;} .contact_wrap .section5 #con_com_box .con{padding:1.5rem;} .contact_wrap .section5 #con_com_box .con > p{position:relative;left:auto;top:auto;transform:none;-webkit-transform:none;} .contact_wrap .section5 #con_com_box .con > ul{padding:0;} /*business*/ .business_si .heading2 > h4{margin-bottom:1rem;} .business_si .section1 .con_infra .tit p span{font-size:1.5rem;} .business .section1 .title h4{font-size:1.8rem;} .business .con .txt dl dt{width:100%;} .business .con .txt dl dd{width:100%;} /*main_client*/ .main_client ul li{width:50%;} /*business_rd*/ .business_rd .section3 dl{width:100% !important;} /*edu_management*/ .edu_management .section1 p{font-size:1.8rem;} /*design*/ .design .section1 .title{font-size:1.8rem;} .design .section1 .title strong{font-size:2.6rem;} .design .section2 .title{font-size:1.6rem;line-height:1.4;margin-bottom:1.3rem;} .edu_management .section1 .title{font-size:1.6rem;} /*nforU*/ .nforU .section2 .nforU_con .cms_list li{height:auto;padding:1rem;} .nforU .section2 .nforU_con .cms_list li .tit{margin:0 auto;float:none !important;} .nforU .section2 .nforU_con .cms_list li .txt{width:100%;padding:0;text-align:center;} .nforU .section3 .web_access li{width:100%;} /*sso_solution*/ .sso_solution .section2 .con > ul > li .service ul li{width:50%;} /** 레이어팝업 :story 내용 보기 **/ .layerPop.story .tit_wrap .tit{font-size:1.5rem;} /* SI 사업분야*/ .business_si .section1 .con_infra ul li{font-size:1.3rem;} /* cloud_msp */ .cloud_msp .service_lst2 > ul{width:100%;} /* cloud_business */ .cloud_business .system_num{padding:2rem 0;} .cloud_business .system_num > ul > li{width:100%;} .cloud_business .system_num:before{top:0;left:50%;width:1.2rem;height:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url('/images/klic/sub/cloud_business_arr1_m.png') no-repeat center bottom/ cover;-webkit-transition:all .3s;transition:all .3s;-webkit-transition-delay:1.3s;transition-delay:1.3s;} .cloud_business .section.active .system_num:after{display:none;} .cloud_business .section.active .system_num:before{width:1.2rem;height:100%;opacity:.5;} .cloud_business .system_num > ul > li{padding:.5rem 0;} .cloud_business .system_num > ul > li.difference > strong:after, .cloud_business .system_num > ul > li.difference > strong:before{display:none;} .cloud_business .system_num > ul > li.other{margin-top:2rem;} .cloud_business .system_num > ul > li > strong{width:7rem;} .cloud_business .title{margin:2rem 0 1rem;font-size:1rem;} } @media (max-width:380px){ /*layerPop1*/ #layerPop1 .detail_box1 { margin-bottom: 1.5rem; } #layerPop1 .detail_box1 h4 { font-size: 1.5rem; margin-bottom: 1.5rem; } #layerPop1 .detail_box2 p:nth-child(2) { margin: 1rem 0; } #layerPop1 .detail_box2 { margin-bottom: 3.5rem; } #layerPop1 .detail_box3 .detail_spot02 .sub_spot01 { margin-bottom: 1.5rem; } .menu_wrap #menu > li.on > a{font-size:1.1rem;} .menu_wrap #menu > li.on > a:before{line-height:18px;font-size:13px;} .menu_wrap #menu > li.on > a:after{width:28px;height:18px;} .menu_wrap #menu > li.on > a > span:after{bottom:6px;} /*** 레이어팝업 :인사말 더보기***/ .layerPop.klic .layerPop_tit{margin-bottom:3.5rem;padding-top:3.5rem;} /* story */ .story_wrap .list_box li a .imgBox{max-width:240px;} .story_wrap .list_box li a .txt{padding:0 1rem;} /* web */ .web_wrap .list_box li.img_list{height:18rem;} /*sub_section2*/ .business_infra .section2 .container2 .con_infra .tit h4 { font-size: 1rem; } .business_infra .section2 .container2 .con_infra .tit a { font-size: 0.7rem; } } @media (max-width:320px){ /*business_infra*/ .business_infra .section3 .infra_cust_list ul li{width:100%;} /* story */ .story_wrap .list_box li a .imgBox{max-width:220px;} }