@charset "utf-8"; /***************** 공지사항 메뉴네비게이션 **********************/ .user-guide { } .user-guide .header_toggle span { background: #121212; } .user-guide .header_toggle.is-active span { background: #fff; } .user-guide .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } .user-guide .langArea > a { color: #121212; transition: .2s ease-in-out; } .user-guide #logo a.logo { background: url(../images/common/logo.svg) left top no-repeat; background-size: 100% auto } .user-guide .menu-container.active #logo a.logo { background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto } .user-guide #header { border-bottom: 1px solid rgba(0, 0, 0, .1) } .user-guide #gnb > ul li a { color: #121212; font-weight: 500; transition: .3s; } .user-guide #gnb > ul li a:hover { color: #fff; } .user-guide #gnb > ul li .on { color: #fff; } .user-guide #gnb > ul > li:hover > a { color: #121212 } .user-guide #gnb > ul > li:hover > a:active { color: #fff } .user-guide #gnb > ul > li > a:after { background-color: #fff; } .user-guide #gnb > ul > li:hover > a { color: #121212 } .user-guide #gnb > ul > li:hover ul li a { color: #ccc; } .user-guide #gnb > ul > li ul li a:active { color: #666; } .user-guide #gnb > ul > li:hover ul li a:hover { color: #fff } .user-guide #gnb.active ul li a { color: #ccc } .user-guide #gnb ul li.active a { color: #ccc } .user-guide #gnb ul li ul li a { color: #ccc; } .user-guide #gnb ul li ul li a em { background: rgba(255, 255, 255, 0); } .user-guide #gnb ul li ul li a em::after { background: rgba(255, 255, 255, 0); } .user-guide #gnb ul li ul li a:hover em::after { background: rgba(255, 255, 255, .7); } .user-guide #gnb ul li ul li.active a { color: #666; } .user-guide #gnb ul li ul li a:hover, .user-guide #gnb ul li ul li a:focus { color: #666; } /***************서브하단스크롤 헤더 버튼 색상변경*********************/ body.active .header_toggle span { background: #121212; } body.active .header_toggle.is-active span { background: #fff; } body.active .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } body.active .langArea > a { color: #121212; transition: .2s ease-in-out; } /******************************* footer-guide ************************************/ .user-guide #subArea-wrap .subArea { top: 0px; } .user-guide #subArea-wrap { background: #fff } .user-guide #subArea-wrap .subArea .contents-area { width: 100%; padding: 260px 0 160px } .user-guide #subArea-wrap .subArea { top: 0px; box-shadow: none } .user-guide #subArea-wrap .subArea .title_area { display: flex; justify-content: space-between; align-items: flex-end; padding: 0px 0 60px; border-bottom: 2px solid #121212; margin-bottom: 60px; } .user-guide #subArea-wrap .subArea .title_area p { font-size: 48px; font-weight: 600; line-height: 110%; display: flex; align-items: flex-end; } .user-guide #subArea-wrap .subArea .title_area p > span { margin-right: 30px } .user-guide #subArea-wrap .subArea .title_area p > em { display: block; font-weight: normal; font-size: 17px; color: #666; line-height: 130%; } .user-guide #subArea-wrap .subArea .title_area ul { font-size: 17px; display: flex; } .user-guide #subArea-wrap .subArea .title_area ul li { } .user-guide #subArea-wrap .subArea .title_area ul li::after { content: "/"; font-size: 14px; margin: 0 6px; color: #999 } .user-guide #subArea-wrap .subArea .title_area ul li:last-child::after { content: none } .user-guide #subArea-wrap .subArea .title_area ul li > a { color: #666 } .user-guide #subArea-wrap .subArea .title_area ul li > a:hover { color: #121212 } .user-guide #subArea-wrap .subArea .title_area ul li > em { color: #121212 } /******************************** recruit ***************************************/ .user-guide #subArea-wrap.recruit .subArea .title_area { padding: 0px 0 0px; border-bottom: none; margin-bottom: 60px; } /******************************** notice ***************************************/ #subArea-wrap.notice { } /******************************** email-collcet ***************************************/ #subArea-wrap.email-collect { } #subArea-wrap.email-collect .contents .prg { } #subArea-wrap.email-collect .subArea .contents-area .cont { } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-header { margin-bottom: 50px } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-header em { font-size: 32px; padding: 24px 0; font-weight: 600; display: block; line-height: 150% } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-header span { font-size: 24px; line-height: 140% } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body { background-color: #f8f9fa; padding: 100px 130px; line-height: 160% } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl { line-height: 160% } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dt { font-weight: 600; font-size: 24px; padding-bottom: 50px } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dd { font-size: 20px; margin-bottom: 30px } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dd p { padding: 10px 0 } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dd span { display: inline-block; padding-left: 20px } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dd ol { padding-left: 20px } #subArea-wrap.email-collect .subArea .contents-area .cont .cont-body dl dd ol li { margin-bottom: 6px } /****************************** sub_footer *********************************/ #footer { position: relative; width: 100%; background: #3c3f43 } #footer .ft_area { position: relative; width: 1560px; margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; align-items: center; } #footer .ft_area .ft_menu { } #footer .ft_area .ft_menu dl { display: flex; } #footer .ft_area .ft_menu dl dt { width: 108px; margin-right: 40px; } #footer .ft_area .ft_menu dl dt > a { width: 108px; margin-right: 40px; } #footer .ft_area .ft_menu dl dt img { width: 100%; max-width: 100%; } #footer .ft_area .ft_menu dl dd { display: flex; align-items: center; position: relative; margin-right: 16px; padding-right: 16px; } #footer .ft_area .ft_menu dl dd::after { content: ""; position: absolute; top: 3px; right: 0; width: 1px; height: 16px; background: rgb(189, 193, 198, .5); } #footer .ft_area .ft_menu dl dd:last-child::after { content: none } #footer .ft_area .ft_menu dl dd a { color: #bdc1c6; font-size: 20px; } /*#footer .ft_area .ft_menu dl dd:nth-child(3) a { font-weight: 600 }*/ #footer .ft_area .ft_menu dl dd a:hover { color: #eee; } #footer .ft_area .ft_sns { } #footer .ft_area .ft_sns ul { display: flex } #footer .ft_area .ft_sns ul li { margin-left: 10px } #footer .ft_area .ft_sns ul li a { } #footer .ft_area .ft_sns ul li a.sns { display: inline-block; width: 48px; height: 48px; text-indent: -9999px; background-size: 100% auto !important; transition: all 0.2s ease-out; } #footer .ft_area .ft_sns ul li a.sns.face { background: url("../images/common/sns_face.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.spacemagic { background: url("../images/common/sns_space.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.meet { background: url("../images/common/sns_meet.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.instar { background: url("../images/common/sns_instar.svg") left top no-repeat } #footer .ft_area .ft_sns ul li a.sns.naver { background: url("../images/common/sns_naver.svg") left top no-repeat } #footer .ft_area .ft_sns ul li a.sns.youtube { background: url("../images/common/sns_youtube.svg") left top no-repeat } #footer .ft_area .ft_sns ul li a.sns.spacemagic:hover { background: url("../images/common/sns_space_.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.meet:hover { background: url("../images/common/sns_meet_.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.face:hover { background: url("../images/common/sns_face_.svg") left top no-repeat; } #footer .ft_area .ft_sns ul li a.sns.instar:hover { background: url("../images/common/sns_instar_.svg") left top no-repeat } #footer .ft_area .ft_sns ul li a.sns.naver:hover { background: url("../images/common/sns_naver_.svg") left top no-repeat } #footer .ft_area .ft_sns ul li a.sns.youtube:hover { background: url("../images/common/sns_youtube_.svg") left top no-repeat } #footer .copyright { position: relative; width: 100%; background: #323437 } #footer .copyright p { position: relative; width: 1560px; margin: 0 auto; text-align: center; color: #80858b; font-size: 20px; padding: 30px 0 } /*****************************************************/ #subArea-wrap { width: 100%; min-height: 600px; background: #f8f9fa } #subArea-wrap .spotArea { width: 100%; height: 630px; } #subArea-wrap .spotArea .spot { width: 1560px; height: 630px; margin: 0 auto; display: flex; align-items: center; } #subArea-wrap .spotArea .spot .txt { width: 1280px; margin: 0 auto 14px; text-shadow: 0 0 10px rgba(255, 255, 255, .6); transition: .2s ease-in-out; } #subArea-wrap .spotArea .spot .txt h1 { font-size: 48px; padding: 0px 0 40px; line-height: 150%; letter-spacing: 2px; } #subArea-wrap .spotArea .spot .txt p { font-size: 24px; line-height: 160% } #subArea-wrap.product .spotArea .spot .txt { color: #121212; display: flex; align-items: flex-start; flex-direction: column; } #subArea-wrap.product .spotArea .spot h1 { font-size: 42px; line-height: 100%; letter-spacing: 0px; } #subArea-wrap.product .spotArea .spot .txt p { font-size: 22px; line-height: 160%; text-align: left; } #subArea-wrap.product .spotArea .spot .txt { width: 1120px; } #subArea-wrap .subArea { width: 1560px; margin: 0 auto; position: relative; top: -100px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) } #subArea-wrap .subArea .tab-menu { margin: 0 auto; width: calc(100% - 60px); height: 100px; border-bottom: 1px solid #e5e5e5; position: static; top: 110px; z-index: 1; background: rgba(255, 255, 255, .9); } #subArea-wrap .subArea .tab-menu ul { display: flex; align-items: center; justify-content: center; font-size: 22px } #subArea-wrap .subArea .tab-menu li { } #subArea-wrap .subArea .tab-menu li a { display: block; color: #BDC1C6; padding: 40px 2vw 0; position: relative } #subArea-wrap .subArea .tab-menu li a.on { color: #121212 } #subArea-wrap .subArea .tab-menu li a:hover { color: #121212 } #subArea-wrap .subArea .tab-menu li a em { display: block; position: relative; padding-bottom: 40px; } #subArea-wrap .subArea .tab-menu li a em:after { transition: .2s ease-in-out; } #subArea-wrap .subArea .tab-menu li a em:after { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; content: ''; background-color: #333; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); } #subArea-wrap .subArea .tab-menu li a:hover > em:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); } #subArea-wrap .subArea .tab-menu li a.on em:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); } #subArea-wrap .subArea .tab-menu.tab-sticky { position: sticky; top: 80px; height: 72px; width: 100%; } #subArea-wrap .subArea .tab-menu.tab-sticky li a { padding: 26px 2vw 0; font-size: 18px; } #subArea-wrap .subArea .tab-menu.tab-sticky li a em { padding-bottom: 26px; } #subArea-wrap .subArea .contents-area { width: 100%; padding: 100px 0; min-height: 400px; overflow-y: hidden; } #subArea-wrap .subArea .contents { width: 82%; margin: 0 auto } #subArea-wrap .subArea .contents .prg { display: flex; margin-bottom: 130px; width: 100% } #subArea-wrap .subArea .contents .prg h2 { font-size: 32px; min-width: 20%; line-height: 150% } #subArea-wrap .subArea .contents .prg h3 { font-size: 24px; min-width: 20%; width: 20%; line-height: 150%; position: relative; top: -4px } #subArea-wrap .subArea .contents .prg > p { font-size: 24px; line-height: 160% } #subArea-wrap .subArea .contents .prg > div { font-size: 20px; width: 100%; } #subArea-wrap .subArea .contents .prg > div > p { } #subArea-wrap .subArea .contents .prg > div dl { display: flex; margin: 40px 0 26px; } #subArea-wrap .subArea .contents .prg > div dl dt { min-width: 16%; padding-top: 12px; } #subArea-wrap .subArea .contents .prg > div dl dd { width: 100%; margin-left: 20px; display: flex; align-items: center; } #subArea-wrap .subArea .contents .prg > div dl dd.file { width: 100%; margin-left: 20px; display: block; } #subArea-wrap .subArea .contents .prg > div dl dd.col { flex-direction: column; flex-grow: 1 } #subArea-wrap .subArea .contents .prg > div dl dd > span { display: inline-block; width: 100%; text-align: left; padding: 20px 0; color: #BDC1C6; } #subArea-wrap .subArea .contents .prg > div dl dd > span.filecomt { font-size: 17px } #subArea-wrap .subArea .contents .prg > div dl dd > span.filecomt > em { color: #999; } #subArea-wrap .subArea .contents .prg > div dl dd > span.filecomt > em::after { content: "|"; color: #ddd; margin: 0 10px; } #subArea-wrap .subArea .contents .prg > div dl dd ul { display: flex; align-items: center } #subArea-wrap .subArea .contents .prg > div dl dd ul li { margin-right: 30px } #subArea-wrap .subArea .contents .prg > div ol { } #subArea-wrap .subArea .contents .prg > div ol li { margin-bottom: 10px; } #subArea-wrap .subArea .contents .prg i { font-style: normal; display: inline-block; vertical-align: sub; height: 100%; margin-left: 8px; color: #20DD99; } #subArea-wrap .contents .head > p { line-height: 150%; } /******************************** recruit ***************************************/ #subArea-wrap.recruit .confirm-area { width: 100%; margin: 0 auto 60px; text-align: center; } /******************************** Contact_US ***************************************/ #contact_us #gnb > ul > li:hover > a { color: #fff } #contact_us #gnb > ul > li:hover > a:active { color: #fff } #contact_us #gnb > ul > li:hover > a { color: #fff } #subArea-wrap.contact_us { } #subArea-wrap.contact_us .spotArea { background: url("../images/common/topImg_contact_us.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.contact_us .spotArea .spot .txt { text-align: center; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .1); } #subArea-wrap.contact_us .contents .prg { } #subArea-wrap.contact_us .subArea .contents .prg > div { border-top: 2px solid #121212; } #subArea-wrap.contact_us .subArea .contents .prg p.txt { padding-top: 30px; line-height: 140% } #subArea-wrap.contact_us .subArea .contents .prg > div dl.email dd:last-child { flex-basis: 40% } #subArea-wrap.contact_us .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } #subArea-wrap.contact_us .confirm-area { width: 100%; margin: 0 auto 60px; text-align: center } #subArea-wrap.contact_us .contents .prg .check_style input { position: relative; top: -3px } #subArea-wrap.contact_us .contents .map { display: flex; margin-bottom: 60px; width: 100%; height: 330px; background: #eee } #subArea-wrap.contact_us .subArea .contents .prg > div > p { padding: 4px 0 30px } #subArea-wrap.contact_us .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } /* #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li { font-size: 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7ea; padding: 30px 0; } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > span { font-weight: 600; flex-basis: 20%; } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div { font-weight: 600; flex-basis: 20%; } */ #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li { font-size: 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7ea; padding: 30px 0; } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > span { font-weight: 600; flex-basis: 20%; } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p { padding: 10px 0; } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p span { display: inline-block; min-width: 100px; margin-right: 30px } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p em { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.mtr { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m01 > span { color: #8936e0 } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m02 > span { color: #be6830 } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m03 > span { color: #15bd44 } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.bus { } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.bus.b01 > span { color: #145fe5 } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.bus.b02 > span { color: #15bd44 } #subArea-wrap.contact_us .subArea .contents .prg.location > div > ul li > div > p.bus.b03 > span { color: #fb5852 } #subArea-wrap.contact_us .contents .prg { display: flex; margin-bottom: 130px; width: 100% } #subArea-wrap.contact_us .contents .prg:first-child { margin-bottom: 40px; } #subArea-wrap.contact_us .contents .prg h2 { font-size: 32px; min-width: 25%; line-height: 150% } #subArea-wrap.contact_us .contents .prg h3 { font-size: 24px; min-width: 20%; width: 20%; line-height: 150%; position: relative; top: -4px } #subArea-wrap.contact_us .contents .prg > p { font-size: 24px; line-height: 160% } #subArea-wrap.contact_us .contents div.pic { position: relative; flex-basis: 35%; height: auto; margin-bottom: 130px } #subArea-wrap.contact_us .contents div.pic > img { position: relative; margin-top: 50px; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } #subArea-wrap.contact_us .subArea .contents .prg > div { padding-top: 50px; width: 80%; border-top: 2px solid #121212 } #subArea-wrap.contact_us .subArea .contents .prg > div > p { padding: 4px 0 30px } #subArea-wrap.contact_us .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } #subArea-wrap.contact_us .subArea .contents .prg > div > ul { } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li { font-size: 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7ea; padding: 30px 0; } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li span { font-weight: 600; flex-basis: 20%; } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li em { width: 80%; line-height: 150% } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li:first-child { padding: 0 0 30px } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li a.outlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-position: under; text-decoration-color: #999; } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li a.outlink > i { color: #333; position: relative; top: -2px } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li a.outlink:hover { text-decoration-color: #369; color: #369; } #subArea-wrap.contact_us .subArea .contents .prg > div > ul li a.outlink:hover > i { color: #369; } /*0510*/ #subArea-wrap.about_us .confirm-area { width: 100%; margin: 0 auto 60px; text-align: center } #subArea-wrap.about_us .contents .prg .check_style input { position: relative; top: -3px } #subArea-wrap.about_us .contents .map { display: flex; margin-bottom: 60px; width: 100%; height: 330px; background: #eee } #subArea-wrap.about_us .subArea .contents .prg > div > p { padding: 4px 0 30px } #subArea-wrap.about_us .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul { } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li { font-size: 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7ea; padding: 30px 0; } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > span { font-weight: 600; flex-basis: 20%; } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div { } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p { padding: 10px 0; } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p span { display: inline-block; min-width: 100px; margin-right: 30px } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p em { } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.mtr { } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m01 > span { color: #8936e0 } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m02 > span { color: #be6830 } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.mtr.m03 > span { color: #15bd44 } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.bus { } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.bus.b01 > span { color: #145fe5 } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.bus.b02 > span { color: #15bd44 } #subArea-wrap.about_us .subArea .contents .prg.location > div > ul li > div > p.bus.b03 > span { color: #fb5852 } /******************************** Portfolio ***************************************/ #portfolio #gnb > ul > li:hover > a { color: #fff } #portfolio #gnb > ul > li:hover > a:active { color: #fff } #portfolio #gnb > ul > li:hover > a { color: #fff } #subArea-wrap.portfolio { } #subArea-wrap.portfolio .spotArea { background: url("../images/common/topImg_portfolio.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.portfolio .spotArea .spot .txt { text-align: center; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .2); } #subArea-wrap.portfolio .contents .prg { } #subArea-wrap.portfolio .subArea .contents-area { width: 100%; padding: 50px 0; } #subArea-wrap.portfolio .subArea .contents .prg > div { border-top: 2px solid #121212 } #subArea-wrap.portfolio .subArea .contents .prg > div dl.email dd:last-child { flex-basis: 40% } #subArea-wrap.portfolio .subArea .contents .prg > div > p { padding: 4px 0 30px } #subArea-wrap.portfolio .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } #subArea-wrap.portfolio .confirm-area { width: 100%; margin: 0 auto 60px; text-align: center } #subArea-wrap.portfolio .contents .prg .check_style input { position: relative; top: -3px } #subArea-wrap.portfolio .search-area { text-align: center; margin: 60px 0 20px } #subArea-wrap.portfolio .search-box { width: auto; display: inline-block; margin: 0 auto; text-align: center; background: #eee; border-radius: 50px; padding: 10px 10px 10px 10px } .search-box:hover > input { width: 300px; padding: 6px 0 0 20px } .search-box:hover > .icon { background: #ddd; color: #121212; } .search-box > .icon { background: #eee; float: right; font-size: 30px; border-radius: 100%; color: #666; display: flex; justify-content: center; align-content: center; transition: .4s; padding: 10px } .search-box > input { width: 0px; border: none; outline: none; padding: 6px 0 0 0px; background: none; font-size: 24px; transition: .5s ease; line-height: 40px; color: #121212 } .search-box > input::placeholder { color: #666; } /*****************************************/ #subArea-wrap.portfolio .subArea .port-menu { display: flex; align-items: center; margin: 0 auto; width: calc(100% - 60px); height: 100px; border-bottom: 1px solid #e5e5e5; justify-content: space-between; } #subArea-wrap.portfolio .subArea .port-menu { position: sticky; top: 0; z-index: 999; background: #fff } #subArea-wrap.portfolio .subArea .port-menu .check_style input[type="checkbox"] + label { line-height: 110%; white-space: nowrap; } #subArea-wrap.portfolio .subArea .port-menu dl { display: flex; align-items: center; justify-content: center; font-size: 24px } #subArea-wrap.portfolio .subArea .port-menu dt { margin-right: 30px; } #subArea-wrap.portfolio .subArea .port-menu dt a { display: flex; align-items: center; position: relative; width: 130px; } #subArea-wrap.portfolio .subArea .port-menu dt a > img { margin-right: 10px } #subArea-wrap.portfolio .subArea .port-menu dt a::after { content: ""; position: absolute; right: 0; top: 6px; height: 20px; width: 1px; background-color: #eee; } #subArea-wrap.portfolio .subArea .port-menu dd { } #subArea-wrap.portfolio .subArea .port-menu dd a { display: block; color: #BDC1C6; padding: 28px 18px; position: relative; line-height: 120% } #subArea-wrap.portfolio .subArea .port-menu dd a.on { color: #121212 } #subArea-wrap.portfolio .subArea .port-menu dd a:hover { color: #121212 } #subArea-wrap.portfolio .subArea .port-menu dd .check_style { position: relative; top: 3px } #subArea-wrap.portfolio .subArea .port-menu dd .input_search { position: relative; width: 300px; height: 50px; border: 1px solid #E5E7EA; border-radius: 50px; background: #F8F9FA; margin-left: 30px } #subArea-wrap.portfolio .subArea .port-menu dd .input_search input { position: absolute; left: 18px; top: 2px; font-size: 20px; width: 200px; background-color: transparent; border: none; } #subArea-wrap.portfolio .subArea .port-menu dd .input_search a { position: absolute; right: 0px; top: 0; text-indent: -9999px; width: 76px; display: inline-block; height: 50px; padding: 0px; background: url(../images/common/ico_magnify.svg) center center no-repeat; background-size: 32px auto; } #subArea-wrap.portfolio .subArea .port-menu dl:first-child { width: 100%; flex-basis: fit-content; } #subArea-wrap.portfolio .subArea .port-menu dl:first-child dd { margin-right: 20px; white-space: nowrap; } #subArea-wrap.portfolio .subArea .port-menu dl { } #subArea-wrap.portfolio .contents { width: 100%; } #subArea-wrap.portfolio ul.port-list { display: flex; align-content: flex-start; flex-wrap: wrap; width: calc(100% - 40px); margin: 0 auto } #subArea-wrap.portfolio ul.port-list li { display: flex; flex-basis: 33.33%; width: 33.3%; flex-direction: column; padding: 10px } #subArea-wrap.portfolio ul.port-list li a { display: inline-block; transition: all 0.2s ease-out; } #subArea-wrap.portfolio ul.port-list .card-area { position: relative; top: 0; border: 1px solid #bdc1c6; transition: all 0.2s ease-out; } #subArea-wrap.portfolio ul.port-list .card-area > p { position: relative; width: 100%; height: 420px; overflow: hidden } #subArea-wrap.portfolio ul.port-list .card-area > p img { position: relative; width: 100%; height: 100%; object-position: 20% 10%; max-width: 100%; object-fit: fill; transition: all 0.3s ease-out; } #subArea-wrap.portfolio ul.port-list .card-area > dl { padding: 24px 0px; text-align: center } #subArea-wrap.portfolio ul.port-list .card-area > dl dt { font-size: 24px; padding: 2px 0 12px; color: #121212; display: inline-block; width: 96%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } #subArea-wrap.portfolio ul.port-list .card-area > dl dt em { } #subArea-wrap.portfolio ul.port-list .card-area > dl dt span { } #subArea-wrap.portfolio ul.port-list .card-area > dl dt span::after { content: "-"; margin: 0 6px } #subArea-wrap.portfolio ul.port-list .card-area > dl dd { } #subArea-wrap.portfolio ul.port-list .card-area > dl dd span { } #subArea-wrap.portfolio ul.port-list .card-area > dl dd span::after { content: "-"; margin: 0 6px } #subArea-wrap.portfolio ul.port-list .card-area > dl dd span:last-child::after { content: none } #subArea-wrap.portfolio ul.port-list .card-area > dl dd span em { } #subArea-wrap.portfolio ul.port-list .card-area > dl dd span:first-child { } #subArea-wrap.portfolio ul.port-list .card-area.soon { } #subArea-wrap.portfolio ul.port-list .card-area.soon > p::before { position: absolute; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 1 } #subArea-wrap.portfolio ul.port-list .card-area.soon > p::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 30px; font-weight: 600; content: "Comming Soon"; z-index: 2 } #subArea-wrap.portfolio ul.port-list .card-area.soon > dl dd span:last-child { color: #ccc } #subArea-wrap.portfolio ul.port-list .card-area > p { position: relative; width: 100%; height: 340px; line-height: 160%; text-align: center; } #subArea-wrap.portfolio ul.port-list li a:hover .card-area { top: 0; box-shadow: 6px 6px 10px #eee, -6px -6px 10px #f5f5f5; } #subArea-wrap.portfolio ul.port-list li a:hover .card-area { top: 0; box-shadow: 6px 6px 10px #eee, -6px -6px 10px #f5f5f5; } /*#subArea-wrap.portfolio ul.port-list li a:hover .card-area > p img { height: 102%; width: 102% }*/ #subArea-wrap.portfolio ul.port-list li a:hover .card-area > p img { -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1.06); -moz-transform: scale(1.06); transform: scale(1.06); } #subArea-wrap.result { } #subArea-wrap.result .spotArea { background: url("../images/common/topImg_portfolio.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.result .spotArea .spot .txt { text-align: center; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .2); } /*#subArea-wrap.portfolio .contents { width: 100%; }*/ #result .subArea .title_area { display: flex; justify-content: space-between; align-items: flex-end; padding: 0px 0 50px; } #result .subArea .title_area p { font-size: 48px; font-weight: 600; line-height: 110%; display: flex; align-items: flex-end; } #result .subArea .title_area p > span { margin-right: 30px } #result .subArea .title_area p > em { display: block; font-weight: normal; font-size: 17px; color: #666; line-height: 130%; } #result .subArea .title_area ul { font-size: 17px; display: flex; } #result .subArea .title_area ul li { } #result .subArea .title_area ul li::after { content: "/"; font-size: 14px; margin: 0 6px; color: #999 } #result .subArea .title_area ul li:last-child::after { content: none } #result .subArea .title_area ul li > a { color: #666 } #result .subArea .title_area ul li > a:hover { color: #121212 } #result .subArea .title_area ul li > em { color: #121212 } /******************************** about_us ***************************************/ #about_us { } #about_us .header_toggle span { background: #121212; } #about_us .header_toggle.is-active span { background: #fff; ; } #about_us .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } #about_us .langArea > a { color: #121212; transition: .2s ease-in-out; } #about_us #logo a.logo { background: url(../images/common/logo.svg) left top no-repeat; background-size: 100% auto } #about_us .menu-container.active #logo a.logo { background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto } #about_us #header { border-bottom: 1px solid rgba(0, 0, 0, .1) } #about_us #gnb > ul li a { color: #121212; font-weight: 500; transition: .3s; } #about_us #gnb > ul li a:hover { color: #fff; } #about_us #gnb > ul li .on { color: #fff; } #about_us #gnb > ul > li:hover > a { color: #121212 } #about_us #gnb > ul > li:hover > a:active { color: #fff } #about_us #gnb > ul > li > a:after { background-color: #121212; } #about_us #gnb > ul > li:hover > a { color: #121212 } #about_us #gnb > ul > li:hover ul li a { color: #ccc; } #about_us #gnb > ul > li ul li a:active { color: #666; } #about_us #gnb > ul > li:hover ul li a:hover { color: #fff } #about_us #gnb.active ul li a { color: #ccc } #about_us #gnb.active > ul > li > a:after { background-color: #fff; } #about_us #gnb ul li.active a { color: #ccc } #about_us #gnb ul li ul li a { color: #ccc; } #about_us #gnb ul li ul li a em { background: rgba(255, 255, 255, 0); } #about_us #gnb ul li ul li a em::after { background: rgba(255, 255, 255, 0); } #about_us #gnb ul li ul li a:hover em::after { background: rgba(255, 255, 255, .7); } #about_us #gnb ul li ul li.active a { color: #666; } #about_us #gnb ul li ul li a:hover, #about_us #gnb ul li ul li a:focus { color: #666; } #subArea-wrap.about_us { } #subArea-wrap.about_us .spotArea { width: 100%; height: 800px; } #subArea-wrap.about_us .spotArea { background: #fff url("../images/common/topImg_about.png") center 226px repeat-x; } #subArea-wrap.about_us .spotArea .spot .txt { text-align: center; color: #fff } #subArea-wrap.about_us .contents .prg { } #subArea-wrap.about_us .subArea .contents .prg:nth-last-of-type(2) { margin-bottom: 30px; } #subArea-wrap.about_us .subArea .contents .prg > div { padding-top: 50px; width: 80%; border-top: 2px solid #121212 } #subArea-wrap.about_us .subArea .contents .prg > div dl.email dd:last-child { flex-basis: 40% } #subArea-wrap.about_us .subArea .contents .prg > div > p { padding: 4px 0 30px } #subArea-wrap.about_us .subArea .contents .prg > div > div > div.pre { padding: 30px; line-height: 150%; background: #edeff1; margin-bottom: 20px } #subArea-wrap.about_us .subArea .contents .prg > div > ul { } #subArea-wrap.about_us .subArea .contents .prg > div > ul li { font-size: 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7ea; padding: 30px 0; } #subArea-wrap.about_us .subArea .contents .prg > div > ul li span { font-weight: 600; flex-basis: 20%; } #subArea-wrap.about_us .subArea .contents .prg > div > ul li em { width: 80%; line-height: 150% } #subArea-wrap.about_us .subArea .contents .prg > div > ul li:first-child { padding: 0 0 30px } #subArea-wrap.about_us .spotArea .spot .txt { text-align: left; color: #121212; } #subArea-wrap.about_us .spotArea .spot .txt { text-shadow: 0 0 10px rgb(255 255 255 / 10%); } #subArea-wrap.about_us .spotArea .spot .txt h1 { font-size: 80px; padding: 0px 0 40px; line-height: 150%; letter-spacing: 2px; } #subArea-wrap .spotArea .spot .txt p { font-size: 24px; line-height: 160%; } #subArea-wrap.about_us .subArea .contents .prg h2.logo > img { width: 170px } #subArea-wrap.about_us .subArea .contents .prg > div > ol { width: 100%; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li { list-style: none; margin-left: 0px; border-bottom: 1px solid #ddd; margin-bottom: 30px; padding-bottom: 30px } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a { display: flex; width: 100%; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.img > p > img { transform: scale(1); transition: .2s ease-in-out; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a:hover { } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a:hover > div.img > p > img { transform: scale(1.04); } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div { } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.img { padding-right: 30px; width: 40% } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.img > p { position: relative; width: 370px; height: 240px; overflow: hidden } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.img > p > img { position: relative; width: 100%; height: 100%; object-position: 20% 10%; max-width: 100%; object-fit: cover; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont { position: relative; width: 60% } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p { line-height: 150% } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p:first-child { font-size: 17px } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p:first-child span { } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p:first-child span::after { content: "|"; font-size: 14px; color: #ccc; margin: 0 10px; position: relative; top: -1px } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p:first-child em { } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p.title { position: relative; font-size: 24px; font-weight: 600; color: #121212; width: 630px; padding: 20px 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p.title::after { content: ""; width: 0%; height: 1px; background-color: #fff; position: absolute; bottom: 8px; left: 0; transition: .2s ease-in-out; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a:hover > div.cont > p.title::after { content: ""; width: 98%; height: 1px; background-color: #eee; position: absolute; bottom: 8px; left: 0 } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a:hover > div.cont > p.title { color: #000; } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > p.txt { overflow: hidden; height: 90px; text-align: justify; word-break: break-all } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > span { } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > span.outlink_img { position: absolute; bottom: 0; right: 0 } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > span.outlink_img > i { color: #333; font-size: 16px; position: relative; top: -3px; left: -9px; display: none } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > span.outlink_img > img { border-radius: 4px; margin-right: 4px; width: 16px; height: 16px } #subArea-wrap.about_us .subArea .contents .prg > div > ol li a > div.cont > span.outlink_img > em { font-size: 17px } #subArea-wrap.about_us .confirm-area { width: 100%; margin: 0 auto 60px; text-align: center } /**************************** mission *********************************************/ #subArea-wrap.about_us { } #subArea-wrap.about_us .mission { width: 100%; position: relative; display: flex; margin-bottom: 280px; } #subArea-wrap.about_us .mission::after { position: absolute; bottom: -136px; right: 100px; content: ""; width: 813px; height: 157px; background: url("../images/common/pic_mission_txt.png") left top no-repeat; z-index: -1; } #subArea-wrap.about_us .mission div.cont { flex-basis: 65%; padding-right: 100px; } #subArea-wrap.about_us .mission div.cont h2 { font-size: 24px; padding: 0 0 60px 0; color: #333 } #subArea-wrap.about_us .mission div.cont h3 { } #subArea-wrap.about_us .mission div.cont h3 em { font-size: 40px; position: relative; display: inline-block; line-height: 110%; } #subArea-wrap.about_us .mission div.cont h3 em::after { content: ""; position: absolute; top: 50%; right: -94%; width: 90%; height: 2px; background-color: #333; z-index: 1; } #subArea-wrap.about_us .mission div.cont h3 span { display: block; font-size: 28px; margin-top: 20px; line-height: 150% } #subArea-wrap.about_us .mission div.cont > p { margin-top: 50px; line-height: 160%; font-size: 24px; color: #333; text-align: justify; } #subArea-wrap.about_us .mission div.pic { position: relative; flex-basis: 35%; height: auto; margin-top: 40px; } #subArea-wrap.about_us .mission div.pic > img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: cover; box-shadow: 16px 16px 0 rgb(0 0 0 / 10%); } /**************************** vision *********************************************/ #subArea-wrap.about_us .vision { width: 100%; position: relative; display: flex; margin-bottom: 280px; } #subArea-wrap.about_us .vision::after { position: absolute; bottom: -216px; right: 0px; content: ""; width: 793px; height: 256px; background: url("../images/common/pic_vision_txt.png") left top no-repeat; z-index: -1; } #subArea-wrap.about_us .vision div.pic { position: relative; flex-basis: 32%; height: auto; margin-top: 100px; } #subArea-wrap.about_us .vision div.pic > img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: contain; } #subArea-wrap.about_us .vision div.cont { flex-basis: 68%; padding-left: 90px; } #subArea-wrap.about_us .vision div.cont h2 { font-size: 24px; padding: 0 0 60px 0; color: #333; text-align: right; } #subArea-wrap.about_us .vision div.cont h3 { text-align: right; } #subArea-wrap.about_us .vision div.cont h3 em { font-size: 36px; position: relative; display: inline-block; line-height: 140%; } #subArea-wrap.about_us .vision div.cont h3 em::after { content: ""; position: absolute; top: 50%; right: 110%; width: 130%; height: 2px; background-color: #333; z-index: 1; } #subArea-wrap.about_us .vision div.cont h3 span { display: block; font-size: 26px; margin-top: 20px; line-height: 120%; } #subArea-wrap.about_us .vision div.cont > p { margin-top: 50px; line-height: 160%; font-size: 24px; color: #333; text-align: justify; } /**************************** values *********************************************/ #subArea-wrap.about_us .values { width: 100%; position: relative; margin-bottom: 280px; } #subArea-wrap.about_us .values::after { position: absolute; bottom: -110px; left: 0px; content: ""; width: 821px; height: 101px; background: url("../images/common/pic_values_txt.png") left top no-repeat; z-index: 1; } #subArea-wrap.about_us .values div.head { display: flex } #subArea-wrap.about_us .values div.head h2 { font-size: 24px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.about_us .values div.head h3 { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.about_us .values div.head h3 em { display: block; padding: 60px 0 26px 0; font-size: 40px; line-height: 130%; } #subArea-wrap.about_us .values div.head h3 span { display: block; font-size: 28px; line-height: 130%; } #subArea-wrap.about_us .values div.cont { margin-top: 90px; } #subArea-wrap.about_us .values div.cont .values_list { width: 100%; position: relative; overflow: hidden } #subArea-wrap.about_us .values div.cont .values_list .swiper-slide { width: 100%; height: 680px; } #subArea-wrap.about_us .values div.cont .values_list .item { width: 100%; height: 100%; position: relative; background: #fff } #subArea-wrap.about_us .values div.cont .values_list .item .inner { position: absolute; width: 100%; } #subArea-wrap.about_us .values div.cont .values_list .item .inner h4 { position: absolute; top: 28%; left: 10%; z-index: 2; font-size: 64px; color: #fff; line-height: 110%; text-shadow: 0 0 6px rgba(0, 0, 0, .2) } #subArea-wrap.about_us .values div.cont .values_list .item .inner h4 span { font-size: 32px; display: block } #subArea-wrap.about_us .values div.cont .values_list .item .inner > div.pic { width: 100%; height: 480px; overflow: hidden } #subArea-wrap.about_us .values div.cont .values_list .item .inner > div.pic > img { position: relative; width: 100%; height: 100%; object-position: 0% 15%; max-width: 100%; object-fit: cover; } #subArea-wrap.about_us .values div.cont .values_list .item .inner > div.pic::before { content: ''; display: block; background-color: rgba(0, 0, 0, 0.3); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; /* -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); */ } #subArea-wrap.about_us .values div.cont .values_list .item .txt { position: absolute; top: 580px; right: 0; line-height: 150%; font-size: 24px; width: 60% } #subArea-wrap.about_us .values div.cont .values_list .pageing-area { position: absolute; top: 580px; left: 0; width: 400px; } #subArea-wrap.about_us .values div.cont .values_list .pageing-area .swiper-pagination-bullet { width: 80px; height: 4px; display: inline-block; border-radius: 0; background-color: #000; margin-right: 10px; position: relative; text-align: left } #subArea-wrap.about_us .values div.cont .values_list .pageing-are .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: #121212 } #subArea-wrap.about_us .values div.cont .values_list .pageing-area .swiper-pagination-bullet > em { font-size: 20px; font-weight: 600; position: absolute; top: -30px; padding: 0 100% 0 0 } /**************************** vision *********************************************/ #subArea-wrap.about_us .partners { width: 100%; position: relative; margin-bottom: 130px; } #subArea-wrap.about_us .partners div.head { display: flex } #subArea-wrap.about_us .partners div.head h2 { font-size: 24px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.about_us .partners div.head h3 { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.about_us .partners div.head h3 em { display: block; padding: 60px 0 26px 0; font-size: 40px; line-height: 150%; } #subArea-wrap.about_us .partners div.head h3 span { display: block; font-size: 28px; line-height: 150%; } #subArea-wrap.about_us .partners div.banner_list { margin-top: 40px; } #subArea-wrap.about_us .partners div.banner_list > p { font-size: 20px; padding: 80px 0 20px; font-weight: 600 } #subArea-wrap.about_us .partners div.banner_list ul { display: flex; flex-wrap: wrap; align-items: center } #subArea-wrap.about_us .partners div.banner_list ul li { margin: 6px 8px 6px 0; border: 1px solid #eee; text-align: center } #subArea-wrap.about_us .partners div.banner_list ul li img { width: 160px; height: 100%; max-width: 100%; object-fit: cover; } #subArea-wrap.about_us .partners div.banner_wrap { display: flex } #subArea-wrap.about_us .partners div.banner_wrap div.h2 { min-width: 20%; } #subArea-wrap.about_us .partners div.banner_wrap div.h3 { width: 100%; } /**************************** history *********************************************/ #subArea-wrap.about_us .history { display: flex } #subArea-wrap.about_us .history .history_year { flex-basis: 20% } #subArea-wrap.about_us .history .history_year a { font-size: 28px; display: block; color: #bdc1c6; line-height: 160%; margin-bottom: 20px } #subArea-wrap.about_us .history .history_year a.on { font-size: 28px; display: block; color: #121212; font-weight: 600 } #subArea-wrap.about_us .history .history_list { flex-basis: 80%; } #subArea-wrap.about_us .history .history_list.on { display: block } #subArea-wrap.about_us .history .history_list { display: none } #subArea-wrap.about_us .history .history_list dl { margin-top: 8px; float: left; width: 100%; flex-basis: 80%; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #eee } #subArea-wrap.about_us .history .history_list dl dt { float: left; width: 14%; font-size: 20px; font-weight: 600; line-height: 160%; } #subArea-wrap.about_us .history .history_list dl dd { float: right; width: 86%; font-size: 20px; margin-bottom: 20px } #subArea-wrap.about_us .history .history_list dl dd span { margin-right: 30px } #subArea-wrap.about_us .history .history_list dl dd em { line-height: 150% } #subArea-wrap.about_us .history .history_year #old_year { font-size: 25px } /**************************** awards_old *********************************************/ #subArea-wrap.about_us .awards { display: flex } #subArea-wrap.about_us .awards .awards_year { flex-basis: 20% } #subArea-wrap.about_us .awards .awards_year a { font-size: 28px; display: block; color: #bdc1c6; line-height: 160%; margin-bottom: 20px } #subArea-wrap.about_us .awards .awards_year a.on { font-size: 28px; display: block; color: #121212; font-weight: 600 } #subArea-wrap.about_us .awards .awards_list { flex-basis: 80%; } #subArea-wrap.about_us .awards .awards_list.on { display: block } #subArea-wrap.about_us .awards .awards_list { display: none } #subArea-wrap.about_us .awards .awards_list dl { width: 100%; margin-top: 8px; float: left; flex-basis: 80%; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #eee } #subArea-wrap.about_us .awards .awards_list dl dt { float: left; width: 14%; font-size: 20px; font-weight: 600; line-height: 160%; } #subArea-wrap.about_us .awards .awards_list dl dd { float: right; width: 86%; font-size: 20px; margin-bottom: 20px } #subArea-wrap.about_us .awards .awards_list dl dd span { margin-right: 30px } #subArea-wrap.about_us .awards .awards_list dl dd em { line-height: 150% } #subArea-wrap.about_us .awards .awards_list dl dd em > a { font-size: 17px; } #subArea-wrap.about_us .awards .awards_list dl dd em > a:hover { text-decoration: underline; text-underline-position: under; } #subArea-wrap.about_us .awards .awards_year #old_year { font-size: 26px } /**************************** awards *********************************************/ #subArea-wrap.media .awards { display: flex } #subArea-wrap.media .awards .awards_year { flex-basis: 20% } #subArea-wrap.media .awards .awards_year a { font-size: 28px; display: block; color: #bdc1c6; line-height: 160%; margin-bottom: 20px } #subArea-wrap.media .awards .awards_year a.on { font-size: 28px; color: #121212; font-weight: 600 } #subArea-wrap.media .awards .awards_list { flex-basis: 80%; } #subArea-wrap.media .awards .awards_list.on { display: block } #subArea-wrap.media .awards .awards_list { display: none } #subArea-wrap.media .awards .awards_list dl { width: 100%; margin-top: 8px; float: left; flex-basis: 80%; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #eee } #subArea-wrap.media .awards .awards_list dl dt { float: left; width: 14%; font-size: 20px; font-weight: 600; line-height: 160%; } #subArea-wrap.media .awards .awards_list dl dd { float: right; width: 86%; font-size: 20px; margin-bottom: 20px } #subArea-wrap.media .awards .awards_list dl dd span { margin-right: 30px } #subArea-wrap.media .awards .awards_list dl dd em { line-height: 150% } #subArea-wrap.media .awards .awards_list dl dd em > a { font-size: 17px; } #subArea-wrap.media .awards .awards_list dl dd em > a:hover { text-decoration: underline; text-underline-position: under; } /*#subArea-wrap.media .awards .awards_year #old_year { font-size: 26px }*/ /******************************** business ***************************************/ #business { } #business .header_toggle span { background: #121212; } #business .header_toggle.is-active span { background: #fff; ; } #business .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } #business .langArea > a { color: #121212; transition: .2s ease-in-out; } #business #logo a.logo { background: url(../images/common/logo.svg) left top no-repeat; background-size: 100% auto } #business .menu-container.active #logo a.logo { background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto } #business #header { border-bottom: 1px solid rgba(0, 0, 0, .1) } #business #gnb > ul li a { color: #121212; font-weight: 500; transition: .3s; } #business #gnb > ul li a:hover { color: #fff; } #business #gnb > ul li .on { color: #fff; } #business #gnb > ul > li:hover > a { color: #121212 } #business #gnb > ul > li:hover > a:active { color: #fff } #business #gnb > ul > li > a:after { background-color: #121212; } #business #gnb > ul > li:hover > a { color: #121212; } #business #gnb > ul > li:hover ul li a { color: #ccc; } #business #gnb > ul > li ul li a:active { color: #666; } #business #gnb > ul > li:hover ul li a:hover { color: #fff } #business #gnb.active ul li a { color: #ccc } #business #gnb.active > ul > li > a:after { background-color: #fff; } #business #gnb ul li.active a { color: #ccc } #business #gnb ul li ul li a { color: #ccc; } #business #gnb ul li ul li a em { background: rgba(255, 255, 255, 0); } #business #gnb ul li ul li a em::after { background: rgba(255, 255, 255, 0); } #business #gnb ul li ul li a:hover em::after { background: rgba(255, 255, 255, .7); } #business #gnb ul li ul li.active a { color: #666; } #business #gnb ul li ul li a:hover, #about_us #gnb ul li ul li a:focus { color: #666; } /******************************** business ***************************************/ #subArea-wrap.business { } #subArea-wrap.business .spotArea { background: url("../images/common/topImg_business.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.business .spotArea .spot .txt { text-align: center; color: #121212 } #subArea-wrap.business .business_area { width: 100%; position: relative; display: flex; flex-direction: column; margin-bottom: 180px; } #subArea-wrap.business .business_area div.cont { display: flex } #subArea-wrap.business .business_area div.cont > div { flex-basis: 50%; padding-right: 100px; } #subArea-wrap.business .business_area div.cont > div h2 { font-size: 24px; padding: 0 0 30px 0; color: #333 } #subArea-wrap.business .business_area div.cont > div h3 { } #subArea-wrap.business .business_area div.cont > div h3 em { font-size: 40px; position: relative; display: inline-block; line-height: 120% } #subArea-wrap.business .business_area div.cont > div h3 span { display: block; font-size: 28px; margin-top: 20px } #subArea-wrap.business .business_area div.cont > p { margin-top: 50px; line-height: 160%; font-size: 24px; color: #333; text-align: justify; } #subArea-wrap.business .business_area div.pic { position: relative; flex-basis: 35%; height: auto; margin-top: 40px; } #subArea-wrap.business .business_area div.pic > img { position: relative; margin-top: 50px; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } /******************************** service_group ***************************************/ #subArea-wrap.business .service_group { width: 100%; position: relative; margin-bottom: 160px; display: flex } #subArea-wrap.business .service_group h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .service_group > div { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .service_group > div p.txt { font-size: 24px; margin-top: 80px; margin-bottom: 60px; line-height: 160% } #subArea-wrap.business .service_group > div ul { display: flex; justify-content: center; } #subArea-wrap.business .service_group > div ul li { flex-wrap: wrap; margin-left: 16px } #subArea-wrap.business .service_group > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .service_group > div ul li > div { } #subArea-wrap.business .service_group > div ul li > div > img { width: 100%; max-width: 100%; } #subArea-wrap.business .service_group > div ul li > p { text-align: center; padding: 16px; font-size: 20px; } #subArea-wrap.business .service_group > div ul li > p > span { font-size: 17px; } /******************************** service_platform ***************************************/ #subArea-wrap.business .service_platform { width: 100%; position: relative; margin-bottom: 200px; display: flex } #subArea-wrap.business .service_platform h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .service_platform > div { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .service_platform > div p.txt { font-size: 24px; margin-top: 80px; margin-bottom: 60px; line-height: 160% } #subArea-wrap.business .service_platform > div ul { display: flex; justify-content: center; } #subArea-wrap.business .service_platform > div ul li { flex-wrap: wrap; margin-left: 16px } #subArea-wrap.business .service_platform > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .service_platform > div ul li > div { } #subArea-wrap.business .service_platform > div ul li > div > img { width: 100%; max-width: 100%; } #subArea-wrap.business .service_platform > div ul li > p { text-align: center; padding: 16px; font-size: 20px; } #subArea-wrap.business .service_platform > div ul li > p > span { font-size: 17px; } #subArea-wrap.business .service_platform > div ul { display: flex; flex-wrap: wrap; align-items: flex-start; } #subArea-wrap.business .service_platform > div ul li { background-color: #F0F8FF; border-radius: 6px; flex-basis: 24%; margin-left: 10px; margin-bottom: 10px; min-height: 380px; } #subArea-wrap.business .service_platform > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .service_platform > div ul li > div { width: 100%; padding: 14px; } #subArea-wrap.business .service_platform > div ul li > div > p { width: 100%; } #subArea-wrap.business .service_platform > div ul li > div > p > img { width: 100%; max-width: 100%; } #subArea-wrap.business .service_platform > div ul li > div > span { font-weight: 600; display: block; color: #333; font-size: 22px; width: 100%; text-align: center; padding: 20px 0; line-height: 140%; } #subArea-wrap.business .service_platform > div ul li > div > em { display: inline-block; text-align: center; font-size: 17px; line-height: 140%; } /******************************** cloud_platform ***************************************/ #subArea-wrap.business .cloud_platform_area { width: 100%; position: relative; display: flex; flex-direction: column } #subArea-wrap.business .cloud_platform_area div.pic { position: relative; flex-basis: 35%; height: auto; margin-bottom: 120px; } #subArea-wrap.business .cloud_platform_area div.pic > img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } #subArea-wrap.business .cloud_platform { width: 100%; position: relative; margin-bottom: 160px; display: flex } #subArea-wrap.business .cloud_platform h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .cloud_platform > div { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .cloud_platform > div p.txt { font-size: 24px; margin-top: 80px; margin-bottom: 60px; line-height: 160% } #subArea-wrap.business .cloud_platform > div ul { display: flex; justify-content: center; } #subArea-wrap.business .cloud_platform > div ul li { flex-wrap: wrap; margin-left: 16px } #subArea-wrap.business .cloud_platform > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .cloud_platform > div ul li > div { } #subArea-wrap.business .cloud_platform > div ul li > div > img { width: 100%; max-width: 100%; } #subArea-wrap.business .cloud_platform > div ul li > p { text-align: center; padding: 16px; font-size: 20px; } #subArea-wrap.business .cloud_platform > div ul li > p > span { font-size: 17px; } #subArea-wrap.business .cloud_platform > div ul { display: flex; flex-wrap: wrap; align-items: flex-start; } #subArea-wrap.business .cloud_platform > div ul li { background-color: #F0F8FF; border-radius: 6px; flex-basis: 24%; margin-left: 10px; margin-bottom: 10px; min-height: 420px; } #subArea-wrap.business .cloud_platform > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .cloud_platform > div ul li > div { width: 100%; padding: 14px; } #subArea-wrap.business .cloud_platform > div ul li > div > p { width: 100%; } #subArea-wrap.business .cloud_platform > div ul li > div > p > img { width: 100%; max-width: 100%; } #subArea-wrap.business .cloud_platform > div ul li > div > span { font-weight: 600; display: block; color: #333; font-size: 22px; width: 100%; text-align: center; padding: 20px 0; line-height: 140%; } #subArea-wrap.business .cloud_platform > div ul li > div > em { display: inline-block; text-align: center; font-size: 17px; line-height: 140%; } /******************************** service_group ***************************************/ #subArea-wrap.business .service_component { width: 100%; position: relative; margin-bottom: 160px; display: flex } #subArea-wrap.business .service_component h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .service_component > div { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .service_component > div p.txt { font-size: 24px; margin-top: 80px; margin-bottom: 60px; line-height: 160% } #subArea-wrap.business .service_component > div ul { display: flex; justify-content: center; } #subArea-wrap.business .service_component > div ul li { flex-wrap: wrap; margin-left: 16px; width: 50%; } #subArea-wrap.business .service_component > div ul li:first-child { margin-left: 0 } #subArea-wrap.business .service_component > div ul li > div { } #subArea-wrap.business .service_component > div ul li > div > img { width: 100%; max-width: 100%; } #subArea-wrap.business .service_component > div ul li > p { text-align: left; padding: 24px 0; font-size: 24px; font-weight: 600 } #subArea-wrap.business .service_component > div ul li > span { font-size: 20px; line-height: 150% } /******************************** service_point ***************************************/ #subArea-wrap.business .service_point { width: 100%; position: relative; margin-bottom: 160px; display: flex } #subArea-wrap.business .service_point h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .service_point > div { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .service_point > div ol { margin-top: 80px } #subArea-wrap.business .service_point > div ol li { font-size: 24px; margin-bottom: 50px; line-height: 160% } #subArea-wrap.business .service_point > div ol li p { font-weight: 600; margin-bottom: 20px } #subArea-wrap.business .service_point > div ol li span { } /******************************** process ***************************************/ #subArea-wrap.business .process { width: 100%; position: relative; margin-bottom: 160px; } #subArea-wrap.business .process div.head { display: flex } #subArea-wrap.business .process div.head h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .process div.head em { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .process div.cont { padding-top: 160px; position: relative } #subArea-wrap.business .process div.cont::before { position: absolute; top: 0; left: 0px; content: ""; width: 100%; height: 500px; background: url("../images/common/pic_process_01.png") left top no-repeat; background-size: 100% auto; z-index: -1; } #subArea-wrap.business .process div.cont ul { margin-top: 80px; display: flex; } #subArea-wrap.business .process div.cont ul li { font-size: 24px; line-height: 150%; flex: 1; margin: 0 2.5% } #subArea-wrap.business .process div.cont ul li:first-child { margin: 0 2.5% 0 0 } #subArea-wrap.business .process div.cont ul li:last-child { margin: 0 0 0 2.5% } #subArea-wrap.business .process div.cont ul li p { font-weight: 600; margin-bottom: 10px; } #subArea-wrap.business .process div.cont ul li:nth-child(1) p { color: #00cb6d } #subArea-wrap.business .process div.cont ul li:nth-child(2) p { color: #2576e1 } #subArea-wrap.business .process div.cont ul li:nth-child(3) p { color: #3426de } #subArea-wrap.business .process div.cont ul li:nth-child(4) p { color: #8811ed } #subArea-wrap.business .process div.cont ul li:nth-child(5) p { color: #d90fa2 } #subArea-wrap.business .process div.cont ul li:nth-child(even) { margin-top: 140px } #subArea-wrap.business .process div.cont ul li span { display: inline-block; font-size: 20px; line-height: 160%; text-align: justify; word-break: break-all; } /******************************** benefit ***************************************/ #subArea-wrap.business .benefit { width: 100%; position: relative; margin-bottom: 160px; } #subArea-wrap.business .benefit div.head { display: flex } #subArea-wrap.business .benefit div.head h2 { font-size: 32px; padding: 0 0 60px 0; min-width: 20%; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .benefit div.head em { width: 100%; border-top: 2px solid #121212; } #subArea-wrap.business .benefit div.cont { position: relative } #subArea-wrap.business .benefit div.cont .pic { position: relative; width: 100%; } #subArea-wrap.business .benefit div.cont .pic > span { position: absolute; font-size: 80px; color: #edeff1; line-height: 110% } #subArea-wrap.business .benefit div.cont .pic > img { position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } #subArea-wrap.business .benefit div.cont ol { display: flex; flex-wrap: wrap; margin: 50px 0 100px } #subArea-wrap.business .benefit div.cont ol li { font-size: 24px; flex-basis: 44%; line-height: 160%; margin-right: 4%; margin-bottom: 30px } #subArea-wrap.business .benefit div.cont ol li p { } /******************************** product_list ***************************************/ #subArea-wrap.business .product_list { width: 100%; position: relative; margin-bottom: 160px; display: flex } #subArea-wrap.business .product_list div.head { flex-basis: 20%; } #subArea-wrap.business .product_list div.head h2 { font-size: 32px; padding: 0 30px 0px 0; line-height: 150%; position: relative; top: -4px; } #subArea-wrap.business .product_list div.head h3 { font-size: 20px; padding: 30px 0; line-height: 150%; font-weight: normal; width: 77%; word-break: break-all; text-align: justify; } #subArea-wrap.business .product_list > section { flex-basis: 80%; border-top: 2px solid #121212; } #subArea-wrap.business .product_list > section > p.comment { margin-left: calc(10% + 90px); } #subArea-wrap.business .product_list > section > p.comment > i { font-size: 14px } #subArea-wrap.business .product_list > section > p.comment > a { color: #000 } #subArea-wrap.business .product_list > section > p.comment > a:hover { text-decoration: underline; text-underline-position: under; } #subArea-wrap.business .product_list > section ul { margin-top: 80px; margin-left: 100px; display: flex; flex-wrap: wrap } #subArea-wrap.business .product_list > section ul li { font-size: 36px; padding: 20px 0; margin-bottom: 50px; line-height: 160%; width: 40%; margin-left: 10%; border-bottom: 2px solid #333; } #subArea-wrap.business .product_list > section ul li > a { display: flex; justify-content: space-between; align-items: center } #subArea-wrap.business .product_list > section ul li p { font-weight: 600; } #subArea-wrap.business .product_list > section ul li span { } /******************************** product_list ***************************************/ #subArea-wrap.business .business_area.project { margin-bottom: 100px; } #subArea-wrap.business .project { width: 100%; position: relative; margin-bottom: 160px; overflow: hidden } #subArea-wrap.business .project ul { } #subArea-wrap.business .project ul li { position: relative; height: 640px; margin-bottom: 180px } /*#subArea-wrap.business .project ul li::before { position: absolute; top: 0; left: 0px; content: ""; width: 100%; height: 500px; background: url("../images/common/pic_project_01.png") left top no-repeat; background-size: 100% auto; z-index: 0; }*/ #subArea-wrap.business .project ul li::before { } #subArea-wrap.business .project ul li::after { } #subArea-wrap.business .project ul li p.pic { position: absolute; width: 900px; height: 460px; top: 0; left: 0; text-indent: -9999px } #subArea-wrap.business .project ul li:nth-child(1) p.pic { background: url("../images/common/pic_project_01.png") left top no-repeat; background-size: 100% auto; } #subArea-wrap.business .project ul li:nth-child(2) p.pic { background: url("../images/common/pic_project_02.png") right top no-repeat; background-size: 100% auto; } #subArea-wrap.business .project ul li:nth-child(3) p.pic { background: url("../images/common/pic_project_03.png") left top no-repeat; background-size: 100% auto; } #subArea-wrap.business .project ul li:nth-child(4) p.pic { background: url("../images/common/pic_project_04.png") right top no-repeat; background-size: 100% auto; } #subArea-wrap.business .project ul li section { position: absolute; width: 70%; bottom: 0; right: 0; height: auto; } #subArea-wrap.business .project ul li section div.title { position: absolute; top: -52px; left: 57%; width: 100% } #subArea-wrap.business .project ul li section div.title > p { position: relative; } #subArea-wrap.business .project ul li section div.title > p em { display: inline-block; font-size: 200px; color: #edeff1; letter-spacing: -10px } #subArea-wrap.business .project ul li section div.title > p span { display: inline-block; font-size: 40px; font-weight: 600; position: absolute; left: 13.5% } #subArea-wrap.business .project ul li section div.txt { background: #f8f9fa; padding: 80px 120px; line-height: 160%; } #subArea-wrap.business .project ul li section div.txt p { font-size: 24px; padding-bottom: 30px; font-weight: 600; } #subArea-wrap.business .project ul li section div.txt span { font-size: 20px; word-break: break-all; display: inline-block; text-align: justify; } #subArea-wrap.business .project ul li:nth-child(even) { } #subArea-wrap.business .project ul li:nth-child(even) p.pic { left: auto; right: 0 } #subArea-wrap.business .project ul li:nth-child(even) section { left: 0; right: auto; } #subArea-wrap.business .project ul li:nth-child(even) section div.title { left: 0; right: auto; } #subArea-wrap.business .project ul li:nth-child(2) section div.title > p span { left: 14% } /******************************** product ***************************************/ #product { } #product .header_toggle span { background: #121212; } #product .header_toggle.is-active span { background: #fff; ; } #product .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } #product .langArea > a { color: #121212; transition: .2s ease-in-out; } #product #logo a.logo { background: url(../images/common/logo.svg) left top no-repeat; background-size: 100% auto } #product .menu-container.active #logo a.logo { background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto } #product #header { border-bottom: 1px solid rgba(0, 0, 0, .1) } #product #gnb > ul li a { color: #121212; font-weight: 500; transition: .3s; } #product #gnb > ul li a:hover { color: #fff; } #product #gnb > ul li .on { color: #fff; } #product #gnb > ul > li:hover > a { color: #121212 } #product #gnb > ul > li:hover > a:active { color: #fff } #product #gnb > ul > li > a:after { background-color: #121212; } #product #gnb > ul > li:hover > a { color: #121212 } #product #gnb > ul > li:hover ul li a { color: #ccc; } #product #gnb > ul > li ul li a:active { color: #666; } #product #gnb > ul > li:hover ul li a:hover { color: #fff } #product #gnb.active ul li a { color: #ccc } #product #gnb.active > ul > li > a:after { background-color: #fff; } #product #gnb ul li.active a { color: #ccc } #product #gnb ul li ul li a { color: #ccc; } #product #gnb ul li ul li a em { background: rgba(255, 255, 255, 0); } #product #gnb ul li ul li a em::after { background: rgba(255, 255, 255, 0); } #product #gnb ul li ul li a:hover em::after { background: rgba(255, 255, 255, .7); } #product #gnb ul li ul li.active a { color: #666; } #product #gnb ul li ul li a:hover, #product #gnb ul li ul li a:focus { color: #666; } #subArea-wrap.product { } #subArea-wrap.product .spotArea { background: url("../images/common/topImg_product.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.product .spotArea .spot .txt { text-align: center; color: #121212 } #subArea-wrap.product .contents .head { line-height: 160%; width: 100%; text-align: center; margin-bottom: 100px } #subArea-wrap.product .contents .head > h2 { font-size: 42px; padding-bottom: 20px } #subArea-wrap.product .contents .head > p { font-size: 22px } #subArea-wrap.product .product_list { width: 100%; position: relative; margin-bottom: 160px; } #subArea-wrap.product .product_list .video-area { width: 100%; margin-top: 100px } #subArea-wrap.product .product_list .video-area > p { padding: 20px 0; text-align: center; color: #666 } #subArea-wrap.product .product_list .video-area > video { object-fit: cover; width: 100%; height: 100%; min-width: 100%; min-height: 380px; } #subArea-wrap.product .product_list ul { float: left; width: 100%; } #subArea-wrap.product .product_list > ul > li { position: relative; margin-bottom: 20px; float: left; width: 100%; min-height: 480px; height: auto; } #subArea-wrap.product .product_list ul li section { float: left; width: 100%; height: 480px } #subArea-wrap.product .product_list ul li section .txt { line-height: 160%; float: left; width: 46%; height: 100%; display: flex; flex-direction: column; justify-content: center; } #subArea-wrap.product .product_list ul li section .txt p { font-size: 38px; font-weight: 600; padding-bottom: 30px; line-height: 130% } #subArea-wrap.product .product_list ul li section .txt p > em { font-size: 28px; } #subArea-wrap.product .product_list ul li section .txt span { width: 100%; padding-right: 10%; font-size: 20px; line-height: 160%; display: inline-block; text-align: justify; word-break: break-all } #subArea-wrap.product .product_list ul li::before { } #subArea-wrap.product .product_list ul li::after { } #subArea-wrap.product .product_list ul li section p.pic { float: right; width: 49%; height: 480px; overflow: hidden; background: #ECEFF3; align-content: center; } #subArea-wrap.product .product_list ul li section p.pic img { position: relative; width: 100%; height: 100%; object-position: 50% 0; max-width: 100%; object-fit: cover; transition: all 0.2s ease-out; } #subArea-wrap.product .product_list ul li:nth-child(even) section { } #subArea-wrap.product .product_list ul li:nth-child(even) section .txt { float: right; } #subArea-wrap.product .product_list ul li:nth-child(even) section .txt span { padding-left: 0; padding-right: 0; } #subArea-wrap.product .product_list ul li:nth-child(even) section p.pic { float: left } /******************************************/ #subArea-wrap.product .product_list ul li section .txt a.more { display: block; position: relative; font-size: 17px; float: right; margin-top: 20px; overflow: hidden; padding: 10px 32px 10px 0px; color: #333; } #subArea-wrap.product .product_list ul li section .txt a.more::after { content: ""; position: absolute; bottom: 0px; left: -15px; line-height: 120%; width: 100px; height: 30px; background: url(../images/common/btn_arrow_right_2px.svg) -15px bottom no-repeat; background-size: 100px 15px; transition: .2s ease-in-out; } #subArea-wrap.product .product_list ul li section .txt a.more:hover { color: #121212 } #subArea-wrap.product .product_list ul li section .txt a.more:hover::after { right: -10px; } /******************************************/ .cate_wrap { display: flex; justify-content: center; gap: 10px; padding: 60px 0px 40px; /* border-bottom: 1px solid #eee; */ } #subArea-wrap.product .contents ul.cate { display: flex; flex-wrap: wrap; padding: 20px 10px 20px; border: 1px solid #eee; border-radius: 20px; gap: 4px; justify-content: center; align-items: flex-start; position: relative; } #subArea-wrap.product .contents ul.cate:first-of-type::before { position: absolute; content: '플랫폼'; padding: 10px; background: #fff; color: #61637B; top: -22px; left: 50%; transform: translateX(-50%); } #subArea-wrap.product .contents ul.cate:nth-child(2):before { position: absolute; content: '솔루션'; padding: 10px; background: #fff; color: #61637B; top: -22px; left: 50%; transform: translateX(-50%); } #subArea-wrap.product .contents ul.cate:nth-child(3):before { position: absolute; content: '시스템'; padding: 10px; background: #fff; color: #61637B; top: -22px; left: 50%; transform: translateX(-50%); } #subArea-wrap.product .contents ul.cate li { } #subArea-wrap.product .contents ul.cate li a { display: flex; flex-direction: column; justify-content: space-between; align-items: center; max-width: 82px; line-height: 100%; gap: 10px; position: relative; top: 0; transition: .1s ease-in-out; } #subArea-wrap.product .contents ul.cate li a figure { width: 68px; height: 68px; background: #Eff0f1; display: flex; align-items: center; justify-content: center; border-radius: 22px; } #subArea-wrap.product .contents ul.cate li a figure img { width: 32px; } #subArea-wrap.product .contents ul.cate li:nth-child(odd) a figure { background: #EBEFF6 } #subArea-wrap.product .contents ul.cate li a span { font-size: 14px; color: #54575f } #subArea-wrap.product .contents ul.cate li a:hover { top: -3px; } #subArea-wrap.product .contents ul.cate li a:hover span { color: #121212 } /******************************************/ /******************************** media ***************************************/ #subArea-wrap.media { } #subArea-wrap.media .spotArea { background: url("../images/common/topImg_media.png") center top repeat-x; background-attachment: fixed } #subArea-wrap.media .spotArea .spot .txt { text-align: center; color: #121212 } #media .header_toggle span { background: #121212; } #media .header_toggle.is-active span { background: #fff; } #media .langArea { color: #121212; background: url("../images/common/ico_lang02.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; } #media .langArea > a { color: #121212; transition: .2s ease-in-out; } #media #logo a.logo { background: url(../images/common/logo.svg) left top no-repeat; background-size: 100% auto } #media .menu-container.active #logo a.logo { background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto } #media #header { border-bottom: 1px solid rgba(0, 0, 0, .1) } #media #gnb > ul li a { color: #121212; font-weight: 500; transition: .3s; } #media #gnb > ul li a:hover { color: #fff; } #media #gnb > ul li .on { color: #fff; } #media #gnb > ul > li:hover > a { color: #121212 } #media #gnb > ul > li:hover > a:active { color: #fff } #media #gnb > ul > li > a:after { background-color: #121212; } #media #gnb > ul > li:hover > a { color: #121212 } #media #gnb > ul > li:hover ul li a { color: #ccc; } #media #gnb > ul > li ul li a:active { color: #666; } #media #gnb > ul > li:hover ul li a:hover { color: #fff } #media #gnb.active ul li a { color: #ccc } #media #gnb.active > ul > li > a:after { background-color: #fff; } #media #gnb ul li.active a { color: #ccc } #media #gnb ul li ul li a { color: #ccc; } #media #gnb ul li ul li a em { background: rgba(255, 255, 255, 0); } #media #gnb ul li ul li a em::after { background: rgba(255, 255, 255, 0); } #media #gnb ul li ul li a:hover em::after { background: rgba(255, 255, 255, .7); } #media #gnb ul li ul li.active a { color: #666; } #media #gnb ul li ul li a:hover, #about_us #gnb ul li ul li a:focus { color: #666; } #media .subArea .title_area { display: flex; justify-content: space-between; align-items: flex-end; padding: 0px 0 50px; } #media .subArea .title_area p { font-size: 48px; font-weight: 600; line-height: 110%; display: flex; align-items: flex-end; } #media .subArea .title_area p > span { margin-right: 30px } #media .subArea .title_area p > em { display: block; font-weight: normal; font-size: 17px; color: #666; line-height: 130%; } #media .subArea .title_area ul { font-size: 17px; display: flex; } #media .subArea .title_area ul li { } #media .subArea .title_area ul li::after { content: "/"; font-size: 14px; margin: 0 6px; color: #999 } #media .subArea .title_area ul li:last-child::after { content: none } #media .subArea .title_area ul li > a { color: #666 } #media .subArea .title_area ul li > a:hover { color: #121212 } #media .subArea .title_area ul li > em { color: #121212 } /* spec */ .pd05 #subArea-wrap.product .product_list ul li section { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; gap: 40px; } .pd05 #subArea-wrap.product .product_list ul li section .txt p { font-size: 32px; padding-bottom: 20px; } .pd05 #subArea-wrap.product .product_list ul li section .txt span { font-size: 18px; } .pd05 #subArea-wrap.product .product_list ul li section p.pic { height: 560px; } .pd05 #subArea-wrap.product .product_list ul li:nth-child(even) section { display: flex; flex-direction: row-reverse; } .pd05 #subArea-wrap.product .product_list ul li:nth-child(even) section .txt p { padding-left: 0; } .pd05 #subArea-wrap.product .product_list ul li section .txt a.more { text-align: right; } .pd05 #subArea-wrap.product .product_list ul li section .txt a.more::after { right: 0; left: unset; } .pd05 #subArea-wrap.product .product_list ul li section .txt a.more:hover::after { right: 0; text-align: right; } .pd05 #subArea-wrap.product .product_list ul li section .txt span a.more { text-align: right; } .pd05 #subArea-wrap.product .product_list ul li section .txt span a.more::after { right: 0; } .pd05 #subArea-wrap.product .product_list ul li section .txt { height: fit-content; } .pd05 .pop-layer .pop_box.productArea .body .cont .product_component > div ul li div.spec-img-wrap { width: 100%; display: flex; grid-template-columns: 1fr 1fr; gap: 20px; } .pd05 .pop-layer .pop_box.productArea .body .cont .product_component > div ul li div.spec-img-wrap { height: 280px; } .pd05 .pop-layer .pop_box.productArea .body .cont .product_component > div ul li div.spec-img-wrap img:only-child { width: auto; object-fit: contain; } /* img가 두 개 이상이면 100% */ .pd05 .pop-layer .pop_box.productArea .body .cont .product_component > div ul li span { position: relative; display: block; padding-left: 18px; text-indent: 0; word-break: auto-phrase; } .pd05 .product_component .product_spec .spec-con > span { padding-left: 0 !important; white-space: nowrap; } .pd05 .pop-layer .pop_box.productArea .body .cont .product_component > div ul li > span:before { position: absolute; content: ''; width: 4px; height: 4px; background: #666; border-radius: 4px; top: 12px; left: 6px; } .product_list .spec-wrap { margin-top: 20px; } .product_list .spec-con { padding: 10px 20px; display: flex; border-top: 1px solid #DDD; } .product_list .spec-con:last-of-type { border-bottom: 1px solid #DDD; } .product_list .spec-con > span { width: 160px !important; flex-shrink: 0; font-size: 18px; padding-right: 0 !important; } .product_list .spec-con ul { flex-grow: 1; } .product_list .spec-con ul li { font-size: 15px; margin-bottom: 0px; line-height: 1.6; padding-left: 10px; position: relative; } .product_list .spec-con ul li::before { content: ''; width: 4px; height: 4px; background: #323437; position: absolute; top: 9px; left: -6px; border-radius: 6px; } /* spec modal */ .pop-layer .pop_box.productArea .body .cont .product_component > .product_spec > ul { grid-template-columns: unset; } .product_component .product_spec .spec-wrap { margin-top: 24px; } .product_component .product_spec .spec-con { padding: 10px 20px; display: flex; border-top: 1px solid #DDD; } /*.product_component .product_spec .spec-con:last-of-type { border-bottom: 1px solid #DDD; }*/ .product_component .product_spec .spec-con > span { width: 160px !important; } .product_component .product_spec .spec-con ul { width: calc(100% - 280px); margin-top: 8px; } .product_component .product_spec .spec-con ul li { font-size: 17px !important; line-height: 1.6; padding-left: 10px; position: relative; margin-bottom: 2px !important; } .product_component .product_spec .spec-con ul li::before { content: ''; width: 4px; height: 4px; background: #323437; position: absolute; top: 9px; left: 0; border-radius: 6px; } /* 25.03.25 추가 */ .product_component .product_spec .spec-con { flex-wrap: wrap; } .product_component .product_spec .spec-con ul { width: 100%; } .pd05 .pop-layer .product_component .product_spec .spec-con > span { font-size: 20px !important; font-family: 'Pretendard-Bold' !important } .pd05 .pop-layer .product_component .product_spec .spec-con { padding: 30px 20px } /* 하드웨어 컨텐츠 */ .hwCon-area { width: 100%; padding: 60px 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-content: center; } .hwCon-area .hw-con { margin: 0 auto; width: fit-content; padding: 36px; position: relative; display: none; } .hwCon-area .hw-con.on { display: block; } .hwCon-area .hw-con:nth-child(1) { border-radius: 16px 0 0 16px; } .hwCon-area .hw-con:nth-child(2) { border-radius: 0; } .hwCon-area .hw-con:nth-child(3) { border-radius: 0 16px 16px 0; } .hwCon-area .hw-con > p { width: 100%; display: flex; flex-direction: column; color: #333; font-size: 32px; margin-bottom: 64px; } .hwCon-area .hw-con p em { line-height: 1; color: #585858; font-size: 14px; margin-top: 8px; } .hwCon-area .hw-con a.hwMore-btn { position: absolute; bottom: 36px; right: 24px; font-size: 14px; color: #369; letter-spacing: -1px; } .hwCon-area .con_wrap { padding-top: 16px; } .hwCon-area .con_wrap .toggle ul li a { font-size: 16px; margin-left: 4px; color: #787878; width: 100%; padding: 6px 44px; } .hwCon-area .con_wrap .toggle ul li a.on { border-bottom: 2px solid #2D68F8; color: #2D68F8; } .hwCon-area .con_wrap .toggle ul li a:hover { color: #2576e1; border-bottom: 2px solid #2576e1; } .hwCon-area .con { width: 100%; } .hwCon-area .con:not(:last-of-type) { margin-bottom: 128px; } .hwCon-area .con > p { font-size: 26px; margin-left: 4px; color: #333333; text-align: left; position: relative; padding-left: 16px; margin-bottom: 56px; text-align: center; } .hwCon-area .con > p::before { position: absolute; top: 13px; left: 0; content: ''; width: 100%; height: 1px; background: #ededed; z-index: -1; } .hwCon-area .con > p span { background: #fff; padding: 2px 16px; } .hwCon-area .con p.subtit { margin-bottom: 28px; border-bottom: 1px solid #ededed; } .hwCon-area .con p.subtit span { padding: 6px 12px; border-radius: 32px; font-size: 22px; line-height: 1; } .hwCon-area .con ul { width: 100%; display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); padding-top: 2px; } .hwCon-area .con ul.fr3 { grid-template-columns: repeat(3, 1fr); } .hwCon-area .con ul li a { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 346px; border-radius: 6px; font-size: 13px; line-height: 1.4; white-space: wrap; padding: 30px 20px; color: #333; letter-spacing: -.5px; gap: 12px; transition: .2s ease-in-out; border: 1px solid #fff; position: relative; top: 0; margin-bottom: 18px; } .hwCon-area .con ul li a:hover { border-radius: 16px; border: 1px solid #ededed; box-shadow: 2px 2px 15px 0px rgba(97, 99, 123, 0.15); top: -6px; } .hwCon-area .con ul li a img { width: auto; height: 127px; width: 100%; height: 127px; object-fit: contain; } .hwCon-area .con ul li a p { font-size: 18px; transition: .1s ease-in-out; } .hwCon-area .con ul li a > div { display: flex; flex-direction: column; width: 100%; gap: 10px; } .hwCon-area .con ul li a > div > span { font-size: 15px; color: #797979; line-height: 140%; transition: .1s ease-in-out; } .hwCon-area .con ul li a:hover p { color: #000; } .hwCon-area .con ul li a:hover > div > span { color: #121212; } .hwCon-area .con ul li a .modal-btn { color: #2D68F8; font-size: 14px; display: flex; line-height: 1; align-items: center; gap: 6px; margin-top: 8px; } /* 3.31 추가 */ .contents.con100 { width: 100% !important; } .qcMenu { width: 100%; margin: 60px 0 0; position: relative; } .qcMenu-container { display: flex; padding: 58px 36px; margin-top: 36px; max-width: 1240px; margin: 0 auto; } .qcMenu::before { content: ''; width: 100%; height: 270px; background: #F9FAFC; position: absolute; z-index: -1; top: 0; left: 0; } .qcMenu .txt { width: 478px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .qcMenu .txt p { color: #61637B; font-size: 38px; } .qcMenu .txt em { font-size: 16px; color: #666468; } .qcMenu .cont-area { display: flex; flex: 1; gap: 30px; } .qcMenu .con { width: 100%; height: 138px; } .qcMenu .con a { background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .1); position: relative; } .qcMenu .con a:hover { border: 1px solid rgba(0, 0, 0, .1); box-shadow: 2px 2px 15px 0px rgba(97, 99, 123, 0.15); } .qcMenu .con a.on { background: #61637b; box-shadow: 2px 2px 15px 0px #36384d; /* transition: .1s ease-in-out;*/ } .qcMenu .con span.smtoffi-icon { width: 114px; height: 50px; content: ''; background: url(../images/common/smartoffiice.svg) center center no-repeat; background-size: 40px auto; } .qcMenu .con a.on p { color: #fff; } .qcMenu .con a.on span.smtoffi-icon { width: 114px; height: 50px; content: ''; background: url(../images/common/smartoffiice_.svg) center center no-repeat; background-size: 40px auto; } .qcMenu .con span.aiot-icon { width: 114px; height: 50px; content: ''; background: url(../images/common/aiot.svg) center center no-repeat; background-size: 60px auto; } .qcMenu .con a.on span.aiot-icon { width: 114px; height: 50px; content: ''; background: url(../images/common/aiot_.svg) center center no-repeat; background-size: 60px auto; } .qcMenu .con p { color: #383a57; } .qcMenu .con a.on::after { content: ""; display: block; width: 10px; height: 10px; background: #61637b; transform: rotate(45deg); position: absolute; bottom: -6px; border-right: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); transition: .1s ease-in-out; } .about_us .qcMenu .con a.on::after { content: ""; display: block; width: 10px; height: 10px; background: #2576e1; transform: rotate(45deg); position: absolute; bottom: -6px; border-right: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); transition: .1s ease-in-out; } /******************************************/ /******* 2025.09.24 about CI BI ***********************/ #subArea-wrap.identity-page .subArea .contents-area { width: 100%; padding: 100px 0 0 } #subArea-wrap.identity-page .subArea .contents { width: 100%; } #subArea-wrap.identity-page .subArea .contents .identity { } #subArea-wrap.identity-page .subArea .contents .identity > article { margin: 0 auto; width: 82% } #subArea-wrap.identity-page .subArea .contents .identity > article h2 { font-size: 38px; min-width: 100%; width: 100%; line-height: 160%; text-align: center; } #subArea-wrap.identity-page .subArea .contents .identity > article h3 { font-size: 28px; line-height: 44px; text-align: center; } #subArea-wrap.identity-page .subArea .contents .identity > article em { font-size: 20px; min-width: 100%; line-height: 150%; text-align: center; display: block; } /******************************************/ #subArea-wrap.identity-page .subArea .contents .identity > article .qcMenu { width: 100%; margin: 60px 0 0; position: relative; } #subArea-wrap.identity-page .identity .qcMenu-container { max-width: 100%; display: flex; flex-direction: row; padding: 0px; margin: 0px; gap: 0px; font-size: 26px; } #subArea-wrap.identity-page .identity .qcMenu::before { content: none } #subArea-wrap.identity-page .identity .qcMenu .con { width: 100%; height: 64px; } #subArea-wrap.identity-page .identity .qcMenu .con a { background: #ffffff; flex-direction: column; border-radius: 0px; box-shadow: 0px 0px #251111; border: 1px solid rgba(0, 0, 0, .1); } #subArea-wrap.identity-page .identity .qcMenu .con a:hover { background: #2576e1; color: #fff; box-shadow: 0px 0px #36384d; border: 1px solid rgba(0, 0, 0, .1); } #subArea-wrap.identity-page .identity .qcMenu .con a:hover > p { color: #fff } #subArea-wrap.identity-page .identity .qcMenu .con a.on { background: #2576e1; color: #fff; box-shadow: 0px 0px #36384d; border: 1px solid rgba(0, 0, 0, .1); } /******************************************/ #subArea-wrap.identity-page .subArea .contents .identity .cicontainer .herocon h2 { font-size: 38px; min-width: 100%; width: 100%; line-height: 160%; text-align: center; } #subArea-wrap.identity-page .subArea .contents .identity .cicontainer .herocon em { font-size: 20px; min-width: 100%; line-height: 150%; text-align: center; display: block; } #subArea-wrap.identity-page .subArea .contents .identity .cicontainer .herocon strong { font-size: 52px; color: #EDEFF1; letter-spacing: 1px; line-height: 50px; } /******************************************/ #subArea-wrap.identity-page .cicontainer { } #subArea-wrap.identity-page .cicontainer .herocon { text-align: center; display: flex; flex-direction: column; font-size: 22px; gap: 40px; margin: 60px auto 100px; width: 82%; word-break: keep-all } #subArea-wrap.identity-page .cicontainer .herocon h3 { font-size: 28px; line-height: 160%; text-align: center; } #subArea-wrap.identity-page .cicontainer .herocon p { } #subArea-wrap.identity-page .cicontainer .herocon > figure { width: 100%; height: 300px; background: url(../images/common/ci_visual_man.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; } #subArea-wrap.identity-page .cicontainer .herocon > figure img { width: 210px } #subArea-wrap.identity-page .cicontainer .herocon .into { font-size: 30px; line-height: 160%; margin: 0px 0px 100px 0px; } /******************************************/ #subArea-wrap.identity-page .cicontainer .ci-colors { display: flex; flex-direction: column; } #subArea-wrap.identity-page .cicontainer .ci-colors > article { display: flex; margin-bottom: 60px; gap: 20px; } #subArea-wrap.identity-page .cicontainer .ci-colors > article > h3 { width: 66%; text-align: left; line-height: 160%; } #subArea-wrap.identity-page .cicontainer .ci-colors > article > p { display: flex; font-size: 20px; text-align: left; line-height: 160%; } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: nowrap; } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li { border: 1px solid #ddd; width: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li img { } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li p { line-height: 160% } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li p span { } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li:first-child p span { color: #3a86c7; } #subArea-wrap.identity-page .cicontainer .ci-colors > ul.imgbox li:last-child p span { color: #e83819; } /******************************************/ #subArea-wrap.identity-page .bicontainer .herocon p { max-width: min-content; min-width: 50%; font-size: 22px; line-height: 34px; text-align: left; } #subArea-wrap.identity-page .bicontainer .herocon .info { max-width: min-content; min-width: 50%; font-size: 18px; line-height: -0.2px; text-align: left; } /******************************************/ #subArea-wrap.identity-page .default_downcuwrapper h3 { min-width: 100%; font-size: 26px; line-height: 44px; text-align: left; letter-spacing: -0.8px; } #subArea-wrap.identity-page .default_downcuwrapper p { max-width: min-content; min-width: 50%; font-size: 18px; letter-spacing: -0.2px; line-height: 32px; text-align: left; padding: 0px 0px 60px; } #subArea-wrap.identity-page .default_downcuwrapper { background-color: #F3F5F8; padding: 20px 0 60px; } #subArea-wrap.identity-page .default_downcuwrapper > article { width: 82%; margin: 0 auto 30px } #subArea-wrap.identity-page .default_downcuwrapper > article h3 { font-size: 26px; padding: 20px 0; } #subArea-wrap.identity-page .default_downcuwrapper > article .imgbox { height: 300px; max-width: 100%; object-fit: contain; margin: 0px auto 30px; border: 1px solid #e2e2e2; background-color: #fff; display: flex; align-items: center; justify-content: center; } #subArea-wrap.identity-page .default_downcuwrapper > article .imgbox > img { width: 290px } #subArea-wrap.identity-page .default_downcuwrapper > article .confirm-area { width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin: 0 } #subArea-wrap.identity-page .default_downcuwrapper > article .confirm-area .btn.confirm { background: #028be0; width: 450px; color: #fff; font-size: 22px; border: 0px; line-height: 1.2em; display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 100%; } #subArea-wrap.identity-page .default_downcuwrapper > article .confirm-area .btn.confirm:hover { background: #167dd9; color: #fff; box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff; } #subArea-wrap.identity-page .default_downcuwrapper > article .confirm-area .btn.confirm > img { } /******************************************/ #subArea-wrap.identity-page .bicontainer { } #subArea-wrap.identity-page .bicontainer .brand-concept { text-align: center; display: flex; flex-direction: row; font-size: 22px; gap: 40px; margin: 60px auto 100px; width: 82%; word-break: keep-all; justify-content: space-between; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname { width: 58%; text-align: left; line-height: 150%; display: flex; flex-direction: column; gap: 10px; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname h3 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname h3 strong { font-size: 52px; color: #EDEFF1; line-height: 100%; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname h3 span { font-size: 26px; color: #028be0; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname h4 span { } #subArea-wrap.identity-page .bicontainer .brand-concept .biname p { font-size: 22px; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname p span { } #subArea-wrap.identity-page .bicontainer .brand-concept .biname .down { margin-top: 50px; display: flex; justify-content: flex-start; } #subArea-wrap.identity-page .bicontainer .brand-concept .biname a.btn { background: #028be0; min-width: 370px; color: #fff; font-size: 22px; border: 0px; display: flex; align-items: center; height: 72px; gap: 10px; justify-content: center; transition: .1s ease-in-out } #subArea-wrap.identity-page .bicontainer .brand-concept .biname a.btn:hover { background: #167dd9; color: #fff; box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff; } #subArea-wrap.identity-page .bicontainer .brand-concept figure { width: 40%; height: 580px; background: url(../images/common/bi_visual_hand.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; } #subArea-wrap.identity-page .bicontainer .brand-concept figure img { width: 210px } #subArea-wrap.identity-page .bicontainer .logo-type { background-color: #F3F5F8; } #subArea-wrap.identity-page .bicontainer .logo-type > article { margin: 0 auto; width: 82%; padding: 60px 0 80px; } #subArea-wrap.identity-page .bicontainer .logo-type > article > div { display: flex; gap: 30px; margin-bottom: 60px; } #subArea-wrap.identity-page .bicontainer .logo-type > article > div > h3 { display: flex; flex-direction: column; width: 40%; gap: 14px; } #subArea-wrap.identity-page .bicontainer .logo-type > article > div > h3 strong { font-size: 52px; color: #d2d7db; line-height: 100%; } #subArea-wrap.identity-page .bicontainer .logo-type > article > div > h3 span { font-size: 26px; color: #028be0; line-height: 100%; } #subArea-wrap.identity-page .bicontainer .logo-type > article > div > p { font-size: 20px; line-height: 160%; width: 60%; } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area { display: flex; background: #fff; padding: 80px 60px; align-items: center; justify-content: space-around; } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area li { display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: center; } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area li figure { min-height: 72px; } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area li figure img { } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area li a { background: #028be0; min-width: 360px; color: #fff; font-size: 22px; border: 0px; display: flex; align-items: center; height: 72px; gap: 10px; justify-content: center; transition: .1s ease-in-out } #subArea-wrap.identity-page .bicontainer .logo-type > article > .brand-area li a:hover { background: #167dd9; color: #fff; box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff; } #subArea-wrap.identity-page .bicontainer .color-system { width: 82%; margin: 60px auto 80px } #subArea-wrap.identity-page .bicontainer .color-system > div { display: flex; gap: 30px; margin-bottom: 60px; } #subArea-wrap.identity-page .bicontainer .color-system > div > h3 { line-height: 100%; display: flex; flex-direction: column; width: 40%; gap: 14px; } #subArea-wrap.identity-page .bicontainer .color-system > div > h3 strong { font-size: 52px; color: #d2d7db; line-height: 100%; } #subArea-wrap.identity-page .bicontainer .color-system > div > h3 span { font-size: 26px; color: #028be0; line-height: 100%; } #subArea-wrap.identity-page .bicontainer .color-system > div > p { font-size: 20px; line-height: 160%; width: 60%; } #subArea-wrap.identity-page .bicontainer .color-system div.chips { display: flex; gap: 80px; margin-bottom: 60px; flex-direction: row; width: 100%; } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section { width: 40% } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section:first-child { width: 60% } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section > h3 { font-size: 26px; padding: 10px 0 40px; } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section > article { display: flex; gap: 40px; align-items: flex-start; } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section > article > div.chip-item { line-height: 160%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; flex-grow: 1; } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section > article > div.chip-item img { } #subArea-wrap.identity-page .bicontainer .color-system div.chips > section > article > div.chip-item p { } /******************************************/ /******************************************/ .work-o { } .work-o #subArea-wrap .subArea .contents-area { padding: 34px 0; } .work-o #subArea-wrap .subArea .contents { width: calc(100% - 60px); margin: 0 auto; } .work-o #subArea-wrap.product { } /*.work-o #subArea-wrap .subArea { top: -8px; }*/ .work-o #subArea-wrap.product .contents .head { background: #f9f9f9; height: 306px } .work-o #subArea-wrap.product .spotArea { background: url("../images/common/topImg_product.png") center top repeat-x; background-attachment: fixed } .work-o #subArea-wrap.product .spotArea .spot .txt { color: #121212; display: flex; align-items: flex-start; flex-direction: column; } .work-o #subArea-wrap.product .spotArea .spot h1 { font-size: 42px; line-height: 100%; letter-spacing: 0px; } .work-o #subArea-wrap.product .spotArea .spot .txt p { font-size: 22px; line-height: 160%; text-align: left; } .work-o #subArea-wrap.product .spotArea .spot .txt { width: 1120px; } .work-o #subArea-wrap.product .contents .head { line-height: 160%; width: 100%; text-align: center; margin-bottom: 40px; display: flex; } .work-o #subArea-wrap.product .contents .head > article { text-align: left; padding: 0px 40px 50px 60px; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 16px; word-break: keep-all; flex-grow: 1; } .work-o #subArea-wrap.product .contents .head > article > h2 { letter-spacing: -1px; font-size: clamp(22px, 2vw, 30px); } .work-o #subArea-wrap.product .contents .head > article > p { font-family: 'Pretendard-Light'; font-size: clamp(16px, 1.05vw, 19px); line-height: 150%; } .work-o #subArea-wrap.product .contents .head > article:nth-child(1) { width: 34% } .work-o #subArea-wrap.product .contents .head > article:nth-child(2) { width: 70%; padding: 60px 42px; display: flex; align-content: flex-end; justify-content: space-between; align-items: flex-end; background: #e9eff4 url("../images/common/topImg_product_01.png") left top no-repeat; } /*********************************************************************/ .work-o.smartoffice #subArea-wrap.product .contents .head > article:nth-child(2) { background: #e9eff4 url("../images/common/topImg_product_01.png") center center no-repeat; background-size: cover; justify-content: flex-end; align-items: flex-end; } .work-o.smartoffice #subArea-wrap.product .contents .head > article:nth-child(2) > img { transform: translateY(30px); } .work-o.workation #subArea-wrap.product .contents .head > article:nth-child(2) { background: #f1f8ff url(../images/common/topImg_product_02.png) center center no-repeat; background-size: cover; justify-content: flex-end; align-items: flex-end; } .work-o.care #subArea-wrap.product .contents .head > article:nth-child(2) { background: #fde3c2 url(../images/common/topImg_product_03.png) center center no-repeat; background-size: cover; justify-content: flex-end; align-items: flex-end; } .work-o.fms #subArea-wrap.product .contents .head > article:nth-child(2) { background: #caebe7 url(../images/common/topImg_product_04.png) center center no-repeat; background-size: cover; justify-content: flex-end; align-items: flex-end; } .work-o.add-on #subArea-wrap.product .contents .head > article:nth-child(2) { background: #ebf4ff url(../images/common/topImg_product_05.png) center center no-repeat; background-size: cover; justify-content: flex-end; align-items: flex-end; } .work-o.workation #subArea-wrap.product .contents .head > article:nth-child(2) > img, .work-o.care #subArea-wrap.product .contents .head > article:nth-child(2) > img, .work-o.fms #subArea-wrap.product .contents .head > article:nth-child(2) > img, .work-o.add-on #subArea-wrap.product .contents .head > article:nth-child(2) > img { transform: translateY(30px); } /*********************************************************************/ /*********************************************************************/ .work-o #subArea-wrap.product .contents .head > article > span { width: 54%; color: rgba(0, 0, 0, .6); line-height: 160%; font-family: 'Pretendard-Light'; font-size: 16px } .work-o #subArea-wrap.product .contents .head > article > img { width: 120px } .work-o .new_product_list { padding: 0 30px; } .work-o .new_product_list > ul { display: flex; flex-direction: column; margin-bottom: 60px; } .work-o .new_product_list > ul > li { display: flex; border-top: 1px solid #E9E9E9; } .work-o .new_product_list > ul > li:first-child { border-top: none } .work-o .new_product_list > ul > li > article { width: 20%; min-width: 210px; padding: 60px 40px 0 0px; display: flex; flex-direction: column; gap: 20px; height: 100%; line-height: 140%; } .work-o .new_product_list > ul > li > article > span { font-family: 'Pretendard-Light'; font-size: 14px; color: #9199a3; line-height: 130% } .work-o .new_product_list > ul > li > article > em { font-family: 'NanumSquareEB'; font-size: 22px; line-height: 140% } .work-o .new_product_list > ul > li > article > p { font-family: 'Pretendard-Light'; font-size: 16px; color: #5e6977 } .work-o .new_product_list > ul > li > section { width: 80%; border-left: 1px solid #E9E9E9; padding: 60px 0 60px 40px; } .work-o .new_product_list > ul > li > section > ul { display: flex; gap: 40px; flex-wrap: wrap; } .work-o .new_product_list > ul > li > section > ul > li { width: calc((100% - 80px) / 3); } .work-o .new_product_list > ul > li > section > ul > li > a { border: 1px solid #eee; display: flex; flex-direction: column; transition: .1s ease-in-out; border-radius: 6px; overflow: hidden } .work-o .new_product_list > ul > li > section > ul > li > a > figure { height: 150px; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; position: relative; } .work-o .new_product_list > ul > li > section > ul > li > a > figure img { width: 100%; object-fit: cover; max-width: 100%; transition: .3s ease-in-out; } .work-o .new_product_list > ul > li > section > ul > li > a:hover { box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.05); } .work-o .new_product_list > ul > li > section > ul > li > a:hover > figure img { transform: scale(1.1); } .work-o .new_product_list > ul > li > section > ul > li > a:hover > article > p > span { color: #0043ff; } .work-o .new_product_list > ul > li > section > ul > li > a > article { padding: 20px 30px; display: flex; flex-direction: column; gap: 10px; } .work-o .new_product_list > ul > li > section > ul > li > a > article > p { display: flex; justify-content: space-between; margin-bottom: 6px; } .work-o .new_product_list > ul > li > section > ul > li > a > article > p > span { font-size: 18px; color: #128DEE; font-family: 'NanumSquareB'; width: 92%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .1s ease-in-out; } .work-o .new_product_list > ul > li > section > ul > li > a > article > p > i { } .work-o .new_product_list > ul > li > section > ul > li > a > article > em { font-size: 18px; font-family: 'NanumSquareB'; width: 98%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .work-o .new_product_list > ul > li > section > ul > li > a > article > span { font-size: 15px; font-family: 'Pretendard-Light'; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: keep-all; line-height: 160%; min-height: 50px; color: #5e6977 } .work-o .new_product_list > ul > li > section > ul > li > a.none_link { /*pointer-events: none;*/ cursor: auto } /******************************************/ .addon-hot-section { margin: 0 0 78px; padding: 26px 0px 20px; border-bottom: 1px solid #e9edf3; } .addon-hot-section h3 { font-size: 26px; font-family: 'NanumSquareEB'; letter-spacing: -0.2px; padding: 26px 30px 20px; display: block } .addon-hot-list { display: flex; gap: 24px; padding: 8px 30px 30px; overflow: hidden; position: relative } /*.addon-hot-list::before { content: ""; position: absolute; left: 0; top: 0; z-index: 10; width: 30px; height: 100%; background: linear-gradient(270deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);}*/ .addon-hot-list::after { content: ""; position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%); } .addon-hot-list .swiper-slide { height: auto } .addon-hot-list a { display: block; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e5eaf1; box-shadow: 0 6px 18px rgba(16, 24, 40, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .addon-hot-list a:hover { transform: translateY(-6px); border-color: #d6e0ec; box-shadow: 0 16px 32px rgba(16, 24, 40, .10); } .addon-hot-list a:hover figure img { transform: scale(1.04); } .addon-hot-list .swiper-slide a > figure { height: 150px; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; position: relative; } .addon-hot-list .swiper-slide a > figure img { width: 100%; height: 100%; object-fit: cover; max-width: 100%; transition: .3s ease-in-out; } .addon-hot-list article { padding: 20px 30px; display: flex; flex-direction: column; gap: 10px; } .addon-hot-list article > p { display: flex; justify-content: space-between; margin-bottom: 6px; } .addon-hot-list article > p > span { font-size: 18px; color: #121212; font-family: 'NanumSquareB'; width: 92%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .1s ease-in-out; } .addon-hot-list article > p > i { } .addon-hot-list article > em { font-size: 18px; font-family: 'NanumSquareB'; width: 98%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .addon-hot-list article > span { font-size: 15px; font-family: 'Pretendard-Light'; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: keep-all; line-height: 160%; min-height: 50px; color: #5e6977 } .addon-hot-list a:hover > article > p > span { color: #0043ff; } .addon-hot-list a.none_link { /*pointer-events: none;*/ cursor: auto } .badge-hot { position: absolute; top: 12px; left: 12px; background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 7px 9px; border-radius: 999px; box-shadow: 0 6px 14px rgba(255, 77, 79, .28); z-index: 2; } /******************************************/ /******************************************/ /******************************************/