@charset "UTF-8"; .clearfix { *zoom: 1; } .clearfix:after { clear: both; display: block; content: ""; } .hidden { text-indent: -99999px; width: 0; height: 0; } #wrap { width: 100%; } /*기본 세팅*/ section > .mainBanner { overflow: hidden; position: relative; width: 100%; height: 300px; background-position: 50% 80%; background-size: cover; background-repeat: no-repeat; } section > .mainBanner > .mainBannerCont { width: 100%; } section > .mainBanner > .mainBannerCont > .inner { width: 100%; height: 510px; } section > .mainBanner > .mainBannerCont > .inner > ul > li { position: absolute; top: 0; left: 0; float: left; height: 300px; width: 100%; text-align: center; } section > .mainBanner > .mainBannerCont > .inner > ul > li:nth-child(1) { background-image: url(../images/banner_01.png); background-position: 50% 0%; } section > .mainBanner > .mainBannerCont > .inner > ul > li:nth-child(2) { background-image: url(../images/car2.png); background-position: 50% 40%; background-size: 50% cover; } section > .mainBanner > .mainBannerCont > .inner > ul > li:nth-child(3) { background-image: url(../images/dbnt.jpg); background-position: 50% 0%; background-repeat: no-repeat; background-size: cover; } section > .mainBanner > .mainBannerCont > .inner > ul > li:nth-child(3) > dl dt { margin-top: -90px; text-indent: -99999px; width: 100%; height: 390px; background-image: url(../images/dbnt_text.png); background-position: 50% 80%; background-repeat: no-repeat; background-size: cover; } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl { margin-top: 0px; color: #fff; width: 100%; padding: 10px 0; background-color: rgba(0, 0, 0, 0.5); } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl > dt { margin-bottom: 0px; font-size: 40px; font-weight: 600; } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl > dd { line-height: 3.5em; font-size: 20px; font-weight: normal; } section > .mainIndustries { width: 1200px; margin: 0 auto 60PX; } section > .mainIndustries > p { position: relative; padding-top: 40px; text-align: center; font-size: 22px; color: #000; } section > .mainIndustries > p:after { position: absolute; bottom: -20px; left: 50%; margin-left: -50px; width: 100px; height: 3px; background-color: #000; content: ""; } section > .mainIndustries ul { padding-top: 40px; } section > .mainIndustries ul > li { overflow: hidden; float: left; width: 230px; height: 230px; margin-left: 125px; border-radius: 300px; } section > .mainIndustries ul > li > a { display: block; height: 230px; transition: 0.3s; } section > .mainIndustries ul > li > a > dl { height: 100%; transform: translateY(50%); text-align: center; color: #fff; } section > .mainIndustries ul > li > a > dl > dt { margin-top: -10px; font-size: 30px; } section > .mainIndustries ul > li > a > dl > dd { margin-bottom: 20px; line-height: 1.9em; transition: 0.3s; } section > .mainIndustries ul > li > a > dl > dd:nth-child(2) { position: absolute; top: -170px; width: 100%; height: 350px; background-position: 50% 50%; z-index: 0; } section > .mainIndustries ul > li:nth-child(1) { background: url(../images/btn_main01.jpg); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; } section > .mainIndustries ul > li:nth-child(2) { background: url(../images/asd_01.jpg); background-position: 10% 100%; background-repeat: no-repeat; background-size: cover; } section > .mainIndustries ul > li:nth-child(3) { background: url(../images/tt.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } section > .mainOverView { margin-top: 100px; padding: 60px 0; background-color: #efefef; } section > .mainOverView > .inner { width: 1200px; margin: 0 auto; } section > .mainOverView > .inner > ul > li { float: left; } section > .mainOverView > .inner > ul > li:nth-child(2) { position: relative; float: right; margin-top: 90px; margin-right: 80px; background-color: lightblue; width: 300px; text-align: center; } section > .mainOverView > .inner > ul > li:nth-child(2):after { position: absolute; top: -100px; left: -100px; width: 100px; height: 100px; content: ''; background: url(../images/dot_l.PNG); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; } section > .mainOverView > .inner > ul > li:nth-child(2):before { position: absolute; top: -100px; left: 300px; width: 100px; height: 100px; content: ''; background: url(../images/dot_r.PNG); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; } section > .mainOverView > .inner > ul > li:nth-child(2) > a { display: block; font-size: 16px; padding: 15px 50px; background-color: #0061a9; color: #fff; } section > .mainOverView > .inner > ul > li > dl > dt { position: relative; margin-bottom: 50px; font-size: 25px; } section > .mainOverView > .inner > ul > li > dl > dt::after { position: absolute; top: 40px; left: 0; width: 400px; border: 1px solid #0061a9; content: ''; } section > .mainOverView > .inner > ul > li > dl > dd { line-height: 1.5em; font-size: 35px; } section > .mainOverView > .inner > ul > li > dl > dd:nth-child(3) { font-size: 15px; color: #666666; } section .mainRND { position: relative; margin-bottom: 0px; width: 100%; height: 190px; background: url(../images/www.jpg); background-attachment: fixed; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0; } section .mainRND > h2:after { position: absolute; top: 0; left: 0; width: 100%; height: 190px; background-color: #707070; opacity: 0.4; content: ''; z-index: -1; } section .mainRND > ul { width: 1200px; margin: 50px auto 0; text-align: center; color: #fff; z-index: 10 !important; } section .mainRND > ul > li { font-size: 30px; z-index: 10; } section .mainRND > ul > li:last-child { margin-top: 20px; } section .mainRND > ul > li:last-child > a { padding: 10px 60px; background-color: #777; font-size: 15px; color: #fff; z-index: 9999; transition: 0.3s; } section .mainRND > ul > li:last-child > a:hover { background-color: #0061a9; } /* ******************************************** **************index.html의 css************** ******************************************** */ /*서브 페이지 레이아웃*/ .subBanner { width: 100%; height: 200px; background: url(../images/company_b.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .subBanner > .inner { width: 1200px; margin: 0 auto; } .subBanner > .inner > .subBannerInfo > ul { margin-top: 90px; float: right; text-align: right; width: 600px; } .subBanner > .inner > .subBannerInfo > ul > li { color: #fff; line-height: 1.9em; cursor: default; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(1) { font-size: 28px; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(2) { position: relative; font-size: 15px; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(2):after { position: absolute; top: -10px; right: 0; width: 200px; border: 1px solid #fff; content: ""; } .siteIndex { padding: 7.5px 0; border-bottom: 1px solid #dddddd; } .siteIndex > .inner { width: 1200px; margin: 0 auto; } .sitemapContainer { width: 1200px; margin: 0 auto; } .sitemapContainer > ul { width: 100%; margin-top: 100px; } .sitemapContainer > ul > li { float: left; } .sitemapContainer > ul > li:nth-child(1) { width: 300px; } .sitemapContainer > ul > li:nth-child(1) > dl { text-align: right; } .sitemapContainer > ul > li:nth-child(1) > dl > dt { font-size: 50px; color: #0061a9; } .sitemapContainer > ul > li:nth-child(1) > dl > dd { font-size: 25px; color: #666; } .sitemapContainer > ul > li:nth-child(2) { margin-bottom: 90px; width: 900px; } .sitemapContainer > ul > li:nth-child(2) > dl { position: relative; float: left; padding-left: 90px; width: 300px; height: 150px; padding-bottom: 80px; } .sitemapContainer > ul > li:nth-child(2) > dl:after { position: absolute; bottom: 40px; left: 90px; content: ""; width: 300px; height: 4px; background-color: #ddd; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(1) > dt:after { position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Company"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(2) > dt:after { position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Business"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(3) > dt:after { position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Reference"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(4) > dt:after { position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Contact Us"; } .sitemapContainer > ul > li:nth-child(2) > dl dt { position: relative; margin-bottom: 20px; font-size: 25px; font-weight: 600; color: #000; } .sitemapContainer > ul > li:nth-child(2) > dl dt:after { font-weight: 500; } .sitemapContainer > ul > li:nth-child(2) > dl dt:before { position: absolute; top: 30px; left: 0px; width: 300px; height: 3px; background-color: #0061a9; font-size: 50px; content: ""; } .sitemapContainer > ul > li:nth-child(2) > dl dd { position: relative; margin-left: 35px; line-height: 2em; } .sitemapContainer > ul > li:nth-child(2) > dl dd > a { color: #000; } @media screen and (max-width: 768px) { section > .mainBanner { width: 100%; height: 280px; background: url(../images/mvisual_02.jpg); background-position: 50% 15%; background-size: cover; background-repeat: no-repeat; } section > .mainBanner > .mainBannerCont { width: 100%; } section > .mainBanner > .mainBannerCont > .inner { width: 100%; margin: 0; } section > .mainBanner > .mainBannerCont > .inner > ul { margin-top: 0px; } section > .mainBanner > .mainBannerCont > .inner > ul > li { float: inherit; height: 100%; width: 100%; text-align: center; } section > .mainBanner > .mainBannerCont > .inner > ul > li:nth-child(3) > dl dt { margin-top: -40px; text-indent: -99999px; width: 100%; height: 160px; background-image: url(../images/dbnt_m.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 80%; } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl { margin-top: -50px; color: #fff; width: 100%; padding: 10px 0px; background-color: rgba(0, 0, 0, 0.5); } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl > dt { margin-bottom: 10px; font-size: 23px; font-weight: 600; } section > .mainBanner > .mainBannerCont > .inner > ul > li > dl > dd { line-height: 1.7em; font-size: 13px; font-weight: normal; padding: 0 10px; } section > .mainIndustries { width: 100%; margin: 0 auto 0PX; } section > .mainIndustries > p { position: relative; padding-top: 80px; text-align: center; font-size: 18px; color: #000; } section > .mainIndustries > p:after { position: absolute; bottom: -20px; left: 50%; margin-left: -50px; width: 100px; height: 3px; background-color: #000; content: ""; } section > .mainIndustries ul { padding-top: 80px; } section > .mainIndustries ul > li { overflow: hidden; float: inherit; width: 100%; height: 200px; margin-left: 0px; border-radius: 0px; } section > .mainIndustries ul > li > a { display: block; height: 200px; transition: 0.3s; } section > .mainIndustries ul > li > a > dl { height: 100%; transform: translateY(50%); text-align: center; color: #fff; } section > .mainIndustries ul > li > a > dl > dt { margin-top: -10px; font-size: 20px; } section > .mainIndustries ul > li > a > dl > dd { margin-bottom: 20px; line-height: 1.9em; transition: 0.3s; } section > .mainIndustries ul > li > a > dl > dd:nth-child(2) { position: absolute; top: -170px; width: 100%; height: 350px; background-position: 50% 50%; z-index: 0; } section > .mainIndustries ul > li:nth-child(1) { background: url(../images/btn_main01.jpg); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; } section > .mainIndustries ul > li:nth-child(2) { background: url(../images/asd_01.jpg); background-position: 10% 100%; background-repeat: no-repeat; background-size: cover; } section > .mainIndustries ul > li:nth-child(3) { background: url(../images/tt.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } section > .mainOverView { margin-top: 100px; padding: 60px 0; background-color: #efefef; } section > .mainOverView > .inner { width: 1200px; margin: 0 auto; } section > .mainOverView > .inner > ul > li { float: left; } section > .mainOverView > .inner > ul > li:nth-child(2) { position: relative; float: right; margin-top: 90px; margin-right: 80px; background-color: lightblue; width: 300px; text-align: center; } section > .mainOverView > .inner > ul > li:nth-child(2):after { position: absolute; top: -100px; left: -100px; width: 100px; height: 100px; content: ''; background: url(../images/dot_l.PNG); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; } section > .mainOverView > .inner > ul > li:nth-child(2):before { position: absolute; top: -100px; left: 300px; width: 100px; height: 100px; content: ''; background: url(../images/dot_r.PNG); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; } section > .mainOverView > .inner > ul > li:nth-child(2) > a { display: block; font-size: 16px; padding: 15px 50px; background-color: #0061a9; color: #fff; } section > .mainOverView > .inner > ul > li > dl > dt { position: relative; margin-bottom: 50px; font-size: 25px; } section > .mainOverView > .inner > ul > li > dl > dt::after { position: absolute; top: 40px; left: 0; width: 400px; border: 1px solid #0061a9; content: ''; } section > .mainOverView > .inner > ul > li > dl > dd { line-height: 1.5em; font-size: 35px; } section > .mainOverView > .inner > ul > li > dl > dd:nth-child(3) { font-size: 15px; color: #666666; } section .mainRND { position: relative; margin-bottom: 0px; width: 100%; height: 200px; background: url(../images/www.jpg); background-attachment: fixed; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0; } section .mainRND > h2:after { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-color: #707070; opacity: 0.4; content: ''; z-index: -1; } section .mainRND > ul { width: 100%; margin: 60px auto 0; text-align: center; color: #fff; z-index: 10 !important; } section .mainRND > ul > li { font-size: 20px; z-index: 10; } section .mainRND > ul > li:last-child { margin-top: 20px; } section .mainRND > ul > li:last-child > a { padding: 10px 60px; background-color: #777; font-size: 15px; color: #fff; z-index: 9999; transition: 0.3s; } section .mainRND > ul > li:last-child > a:hover { background-color: #0061a9; } .subBanner { width: 100%; height: 250px; background: url(../images/company.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .subBanner > .inner { width: 100%; margin: 0; } .subBanner > .inner > .subBannerInfo > ul { margin-top: 60px; float: inherit; text-align: center; width: 100%; } .subBanner > .inner > .subBannerInfo > ul > li { color: #fff; line-height: 1.9em; cursor: default; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(1) { font-size: 30px; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(2) { position: relative; font-size: 15px; padding: 0 90px; } .subBanner > .inner > .subBannerInfo > ul > li:nth-child(2):after { position: absolute; top: -10px; right: 50%; transform: translateX(50%); width: 200px; border: 1px solid #fff; content: ""; } .siteIndex { padding: 7.5px 0; text-align: center; border-bottom: 1px solid #dddddd; font-size: 13px; } .siteIndex > .inner { width: 100%; margin: 0; } .sitemapContainer { width: 100%; margin: 0; } .sitemapContainer > ul { width: 100%; margin-top: 100px; } .sitemapContainer > ul > li { float: inherit; } .sitemapContainer > ul > li:nth-child(1) { width: 100%; margin: 100px 0; } .sitemapContainer > ul > li:nth-child(1) > dl { text-align: center; } .sitemapContainer > ul > li:nth-child(1) > dl > dt { font-size: 50px; color: #0061a9; } .sitemapContainer > ul > li:nth-child(1) > dl > dd { font-size: 25px; color: #666; } .sitemapContainer > ul > li:nth-child(2) { margin-top: 50px; margin-bottom: 90px; width: 100%; } .sitemapContainer > ul > li:nth-child(2) > dl { position: relative; float: left; padding-left: 0px; width: 100%; height: 150px; padding-bottom: 80px; } .sitemapContainer > ul > li:nth-child(2) > dl:after { position: absolute; bottom: 40px; left: 0px; content: ""; width: 100%; height: 4px; background-color: #ddd; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(1) > dt:after { display: none; position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Company"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(2) > dt:after { display: none; position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Business"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(3) > dt:after { display: none; position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Research and Development"; } .sitemapContainer > ul > li:nth-child(2) > dl:nth-child(4) > dt:after { display: none; position: absolute; top: 10px; left: 100px; font-size: 13px; color: #777; content: "Contact Us"; } .sitemapContainer > ul > li:nth-child(2) > dl dt { position: relative; text-align: center; margin-bottom: 20px; font-size: 25px; font-weight: 600; color: #000; } .sitemapContainer > ul > li:nth-child(2) > dl dt:after { font-weight: 500; } .sitemapContainer > ul > li:nth-child(2) > dl dt:before { position: absolute; top: 30px; left: 0px; width: 100%; height: 3px; background-color: #0061a9; font-size: 50px; content: ""; } .sitemapContainer > ul > li:nth-child(2) > dl dd { position: relative; margin-left: 0px; text-align: center; line-height: 2em; border-bottom: 1px solid #ddd; } .sitemapContainer > ul > li:nth-child(2) > dl dd > a { color: #000; } } /*# sourceMappingURL=style.css.map */