@charset "UTF-8"; /*일반현황*/ .index_tap { width: 100%; height: 35px; border-bottom: 1px solid #eee; background-color: #ffffff; } .index_tap > p { margin: 0 auto; width: 1000px; font-size: 13px; line-height: 35px; text-align: right; color: #333; } .index_tap > p > em { padding: 0 3px; font-weight: 900; color: #ffc700; } .index_tap > p > span > a { color: #222; font-weight: 900; } .index_tap > p > span > a:hover { text-decoration: underline; } @media screen and (max-width: 768px) { /*index_tap 768px 반응형*/ .index_tap { width: 100%; height: 35px; border-bottom: 1px solid #eee; background-color: #ffffff; } .index_tap > p { margin: 0 auto; width: 100%; font-size: 13px; line-height: 35px; text-align: center; color: #333; } .index_tap > p > em { padding: 0 3px; font-weight: 900; color: #ffc700; } .index_tap > p > span > a { padding-right: 240px; color: #222; font-weight: 900; } .index_tap > p > span > a:hover { text-decoration: underline; } } .index_tap2 { background-color: transparent; border-bottom: 1px solid #e1e1e1; } #status { width: 100%; margin-bottom: 60px; height: 1350px; background-color: #fff; } #status > .status { position: relative; width: 1000px; margin: 0 auto 100px; } #status > .status > ul { margin-top: 60px; width: 100%; } #status > .status > ul > li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #status > .status > ul > li.status_info_main { position: relative; font-size: 20px; font-weight: 700; color: #1e3571; margin-bottom: 70px; line-height: 1.3em; } #status > .status > ul > li.status_info_main:after { position: absolute; top: 85px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #status > .status > ul > li > em { color: #eee; } #status > .status > ul > li > span { font-size: 20px; } #status > .status > ol { margin-top: 50px; color: #bbb; line-height: 1.4em; } #status > .status > ol > li { font-size: 13px; } #status > .status > ol > li:first-child { font-size: 18px; margin-bottom: 10px; } #status > .status:after { position: absolute; top: 120px; right: 0; width: 260px; height: 345px; background-image: url(../images/company_3.png); background-repeat: no-repeat; background-position: 0 100%; background-size: contain; content: ''; } #status > .organiz { width: 100%; height: 700px; } #status > .organiz > .inner { position: relative; width: 1000px; height: 600px; } #status > .organiz > .inner > h2 { width: 1000px; margin: 0 auto; text-align: left; font-size: 25px; color: #1e3571; margin-bottom: 0px; } #status > .organiz > .inner > .orgimg { width: 100%; height: 100%; background-image: url(../images/organiz.jpg); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } #status > .organiz > .inner:after { position: absolute; top: 65px; width: 1000px; height: 1px; background-color: #ddd; content: ''; } #status > .organiz > .org_eng { position: relative; width: 1000px; height: 600px; background-image: url(../images/organiz_eng.jpg); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } #status > .organiz > .org_eng > h2 { width: 1000px; margin: 0 auto; text-align: left; font-size: 25px; color: #1e3571; margin-bottom: 0px; } #status > .organiz > .org_eng:after { position: absolute; top: 65px; width: 1000px; height: 1px; background-color: #ddd; content: ''; } @media screen and (max-width: 768px) { #status { width: 100%; margin-bottom: 0px; padding-bottom: 60px; height: auto; background-color: #fff; } #status > .status { position: relative; width: 90%; padding-bottom: 50px; margin: 0 auto 0px; } #status > .status > ul { margin-top: 60px; width: 100%; } #status > .status > ul > li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #status > .status > ul > li.status_info_main { position: relative; font-size: 20px; font-weight: 700; color: #1e3571; margin-bottom: 70px; line-height: 1.3em; } #status > .status > ul > li.status_info_main > br { display: none; } #status > .status > ul > li.status_info_main:after { position: absolute; top: 85px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #status > .status > ul > li > em { color: #eee; } #status > .status > ul > li > span { font-size: 20px; } #status > .status > ol { margin-top: 50px; color: #bbb; line-height: 1.4em; } #status > .status > ol > li { font-size: 13px; } #status > .status > ol > li:first-child { font-size: 18px; margin-bottom: 10px; } #status > .status:after { display: none; position: absolute; top: 120px; right: 0; width: 260px; height: 345px; background-image: url(../images/company_3.png); background-repeat: no-repeat; background-position: 0 100%; background-size: contain; content: ''; } #status > .organiz { width: 100%; height: 400px; } #status > .organiz > .inner { position: relative; width: 350px; height: 350px; background-image: none; } #status > .organiz > .inner > h2 { width: 100%; margin: 0 auto; text-align: left; font-size: 25px; color: #1e3571; margin-bottom: 0px; } #status > .organiz > .inner > .orgimg_kr { width: 100%; background-image: url(../images/organiz_kor_m.jpg); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } #status > .organiz > .inner > .orgimg_eng { width: 100%; background-image: url(../images/organiz_m.jpg); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } #status > .organiz > .inner:after { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 90%; height: 1px; background-color: #ddd; content: ''; } #status > .organiz > .org_eng { width: 100%; height: 400px; } #status > .organiz > .org_eng > h2 { width: 100%; margin: 0 auto; text-align: left; font-size: 25px; color: #1e3571; margin-bottom: 0px; } #status > .organiz > .org_eng:after { position: absolute; top: -25px; width: 90%; height: 1px; background-color: #ddd; content: ''; } } /*연혁*/ #since { width: 100%; margin-bottom: 60px; background-color: #fff; } #since > .since { position: relative; width: 1000px; margin: 0 auto; } #since > .since > ul { margin-top: 80px; width: 100%; } #since > .since > ul > li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #since > .since > ul > li.status_info_main { position: relative; font-size: 30px; font-weight: 700; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; /* &:before { position: absolute; top: 0px; right: 30px; width: 50px; height: 50px; background-image: url(../images/house.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; content: ''; }//house */ } #since > .since > ul > li.status_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #since > .since > ul > li > em { color: #ffc700; } #since > .since > ul > li > span { font-size: 20px; } #since > .since > .since_info { width: 100%; } #since > .since > .since_info > h2 { padding-left: 100px; font-size: 50px; font-weight: 500; font-style: italic; letter-spacing: -4px; color: #eee; } #since > .since > .since_info > div { width: 100%; margin: 10px auto 0; border-bottom: 1px dotted #ddd; } #since > .since > .since_info > div > ul { padding-left: 150px; width: 100%; } #since > .since > .since_info > div > ul > li { float: left; margin-left: 230px; line-height: 2.5em; } #since > .since > .since_info > div > ul > li:first-child { font-size: 40px; font-weight: 900; color: #ddd; } #since > .since > .since_info > div > ul > li > dl { padding: 5px 10px; width: 100%; } #since > .since > .since_info > div > ul > li > dl > dd { position: relative; font-size: 16px; font-weight: 600; } #since > .since > .since_info > div > ul > li > dl > dd:after { position: absolute; top: 50%; transform: translateY(-50%); left: -20px; width: 10px; height: 10px; border-radius: 15px; background-color: #ffc700; content: ''; } @media screen and (max-width: 768px) { /*since 768px 반응형*/ #since { width: 100%; margin-bottom: 0px; padding-bottom: 80px; height: auto; background-color: #fff; } #since > .since { position: relative; width: 90%; margin: 0 auto; } #since > .since > ul { margin-top: 80px; width: 100%; } #since > .since > ul > li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #since > .since > ul > li.status_info_main { position: relative; font-size: 22px; font-weight: 600; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; /* &:before { position: absolute; top: 0px; right: 30px; width: 50px; height: 50px; background-image: url(../images/house.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; content: ''; }//house */ } #since > .since > ul > li.status_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #since > .since > ul > li > em { color: #ffc700; } #since > .since > ul > li > span { font-size: 20px; } #since > .since > .since_info { width: 100%; } #since > .since > .since_info > h2 { padding-bottom: 20px; padding-left: 0px; font-size: 50px; font-weight: 500; font-style: italic; letter-spacing: -4px; color: #eee; } #since > .since > .since_info > div { width: 100%; margin: 10px auto 0; border-bottom: 1px dotted #ddd; } #since > .since > .since_info > div > ul { padding-left: 0px; width: 100%; } #since > .since > .since_info > div > ul > li { float: inherit; margin-left: 0px; line-height: 1.45em; } #since > .since > .since_info > div > ul > li:first-child { display: none; font-size: 40px; font-weight: 900; color: #ddd; } #since > .since > .since_info > div > ul > li > dl { padding: 5px 0px; width: 100%; } #since > .since > .since_info > div > ul > li > dl > dd { position: relative; font-size: 14px; font-weight: 500; padding-bottom: 10px; } #since > .since > .since_info > div > ul > li > dl > dd:after { position: absolute; top: 11px; transform: translateY(-50%); left: -10px; width: 5px; height: 5px; border-radius: 15px; background-color: #ffc700; content: ''; } } /*보유인증현황*/ #certificate { width: 100%; margin-bottom: 0 auto; height: 1700px; background-color: #fff; } #certificate > .certificate { position: relative; width: 1000px; margin: 0 auto; } #certificate > .certificate > ul { margin-top: 80px; width: 100%; } #certificate > .certificate > ul > li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #certificate > .certificate > ul > li.status_info_main { position: relative; font-size: 30px; font-weight: 700; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; } #certificate > .certificate > ul > li.status_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #certificate > .certificate > ul > li > em { color: #ddd; } #certificate > .certificate > ul > li > span { font-size: 20px; } #certificate > .certificate > .certificate_info { width: 100%; } #certificate > .certificate > .certificate_info > div { width: 100%; } #certificate > .certificate > .certificate_info > div > ul > li { float: left; margin: 0 47px 50px 0; width: 300px; height: 400px; border: 1px dotted #eee; } #certificate > .certificate > .certificate_info > div > ul > li:last-child { margin-right: 0; } #certificate > .certificate > .certificate_info > div > ul > li > dl > dt { width: 300px; height: 350px; text-indent: -99999px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } #certificate > .certificate > .certificate_info > div > ul > li > dl > dd { font-size: 15px; font-weight: 600; text-align: center; line-height: 50px; } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_01.png); } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(2) > dl > dt { background-image: url(../images/certificate_02.png); } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(3) > dl > dt { background-image: url(../images/certificate_03.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_04.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(2) > dl > dt { background-image: url(../images/certificate_05.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(3) > dl > dt { background-image: url(../images/certificate_06.png); } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_07.png); } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(2) > dl > dt { background-size: contain; background-image: url(../images/certificate_09.png); background-position: 50% 50%; } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(3) > dl > dt { background-size: contain; background-image: url(../images/certificate_10.png); background-position: 50% 50%; } @media screen and (max-width: 768px) { /*certificate 768px 반응형*/ #certificate { width: 100%; margin-bottom: 0 auto 0; height: auto; background-color: #fff; } #certificate > .index_tap > p > span > a { padding-right: 240px; } #certificate > .certificate { position: relative; width: 100%; margin: 0 auto; } #certificate > .certificate > ul { margin-top: 80px; width: 100%; } #certificate > .certificate > ul > li { width: 100%; text-align: center; margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; } #certificate > .certificate > ul > li.status_info_main { position: relative; font-size: 22px; font-weight: 700; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; } #certificate > .certificate > ul > li.status_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #certificate > .certificate > ul > li > em { color: #ddd; } #certificate > .certificate > ul > li > span { font-size: 20px; } #certificate > .certificate > .certificate_info { width: 100%; } #certificate > .certificate > .certificate_info > div { width: 100%; } #certificate > .certificate > .certificate_info > div > ul { width: 100%; } #certificate > .certificate > .certificate_info > div > ul > li { float: inherit; margin: 0 0px 50px 0; width: 100%; height: 400px; border: 1px dotted #eee; border-top: none; border-left: none; border-right: none; } #certificate > .certificate > .certificate_info > div > ul > li:last-child { margin-right: 0; } #certificate > .certificate > .certificate_info > div > ul > li > dl > dt { width: 100%; height: 350px; text-indent: -99999px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #certificate > .certificate > .certificate_info > div > ul > li > dl > dd { font-size: 15px; font-weight: 600; text-align: center; line-height: 50px; } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_01.png); } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(2) > dl > dt { background-image: url(../images/certificate_02.png); } #certificate > .certificate > .certificate_info > .sect01 > ul > li:nth-child(3) > dl > dt { background-image: url(../images/certificate_03.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_04.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(2) > dl > dt { background-image: url(../images/certificate_05.png); } #certificate > .certificate > .certificate_info > .sect02 > ul > li:nth-child(3) > dl > dt { background-image: url(../images/certificate_06.png); } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(1) > dl > dt { background-image: url(../images/certificate_07.png); } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(2) > dl > dt { background-size: contain; background-image: url(../images/certificate_09.png); background-position: 50% 50%; } #certificate > .certificate > .certificate_info > .sect03 > ul > li:nth-child(3) > dl > dt { background-size: contain; background-image: url(../images/certificate_10.png); background-position: 50% 50%; } } /* #research { width: 100%; height: 3500px; margin-bottom: 0 auto; //background-color: green; background-color: #fff; background-image: url(../images/bus_bg.jpg); background-repeat: repeat-Y; .research { width: 100%; height: 400px; margin-bottom: 40px; background-color: #fff; >.inner { height: 100px; padding-top: 130px; margin: 0 auto 130px; //background-color: orange; >h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; &:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted $point-color2; content: ''; } } p { text-align: center; font-size: 17px; letter-spacing: -1px; color: #999; line-height: 1.45em; } }//end of inner }//end of class research .inner { >.rndSys { width: 100%; //background-color: green; >.camera { margin: 0 auto; width: 900px; height: 600px; background-image: url(../images/camera.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }//end of camera >ul { //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; } &:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//ednd of ul .rndSys_info { padding-top: 10px; line-height: 1.5em; color: #aaa; cursor: default; }//end of rndSys_info }//end of rndSys .strength { margin-top: 150px; width: 100%; >.strength_box1 { float: left; width: 870px; height: 560px; //background-color: orange; >ul { padding: 50px 0 0 30px; //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; } &:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//ednd of ul >.strength_top { margin-top: 50px; padding-left: 30px; width: 870px; height: 200px; //background-color: green; >ul { >li { float: left; width: 415px; height: 200px; &:first-child { >dl>dt>ol>li:first-child { background-image: url(../images/strength_01.png); }//터널 유고영상 빅데이터 확보 아이콘 }//end of ul li:first-child_터널 유고영상 빅데이터 확보 &:last-child { >dl>dt>ol>li:first-child { background-image: url(../images/strength_02.png); }//터널 유고영상 빅데이터 확보 아이콘 }//end of ul li:first-child_현존하는 시스템의 한계극복기능 >dl { width: 100%; >dt { width: 415px; height: 60px; //background-color: gray; >ol { >li { float: left; &:first-child {//아이콘의 공통 스타일 width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }//end of first-child &:last-child {//아이콘 옆 글자 >dl { padding-left: 15px; >dt { font-size: 17px; font-weight: 600; padding : 5px 0 10px 0; cursor: default; } >dd { font-size: 13px; font-weight: 500; cursor: default; }//end of dl_strength >.line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; }//end of line }//end of dl }//end of last-child }//end of dt > ol > li }//end of ol } >dd { padding : 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; }//end of }//end of dl }//end of li }//end of ul }//end of strength_top >.strength_bot { padding-left: 30px; width: 870px; height: 200px; //background-color: green; >ul { >li { float: left; width: 415px; height: 200px; &:first-child { >dl>dt>ol>li:first-child { background-image: url(../images/strength_03.png); }//우수한 경제성 아이콘 }//end of ul li:first-child_우수한 경제성 아이콘 &:last-child { >dl>dt>ol>li:first-child { background-image: url(../images/strength_04.png); }//지속적인 기술력 성장 아이콘 }//end of ul li:first-child_속적인 기술력 성장 아이콘 >dl { width: 100%; >dt { width: 415px; height: 60px; //background-color: gray; >ol { >li { float: left; &:first-child {//아이콘의 공통 스타일 width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }//end of first-child &:last-child {//아이콘 옆 글자 >dl { padding-left: 15px; >dt { font-size: 17px; font-weight: 600; padding : 5px 0 10px 0; cursor: default; } >dd { font-size: 13px; font-weight: 500; cursor: default; }//end of dl_strength >.line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; }//end of line }//end of dl }//end of last-child }//end of dt > ol > li }//end of ol } >dd { padding : 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; }//end of }//end of dl }//end of li }//end of ul }//end of strength_bot }//end of strength_box1 >.strength_box2 { float: left; width: 330px; height: 560px; background-image: url(../images/strength.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 0; }//end of strength_box2 }//end of strength >.rnd_schedule { width: 100%; margin-top: 150px; //background-color: green; >ul { //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; } &:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//end of ul >.schedule_content { margin-top: 30px; >ul { width: 1000px; height: 70px; margin-bottom: 10px; //background-color: orange; >li { float: left; &:first-child { width: 270px; height: 100%; background-color: #1e3571; text-align: center; font-size: 16px; font-weight: 600; line-height: 70px; color: #fff; cursor: default; }//end of 스케쥴 제목 &:last-child { width: 730px; height: 100%; border: 1px solid #1e3571; box-sizing: border-box; padding: 30px; font-size: 16px; font-weight: 600; line-height: 10px; cursor: default; transition-duration: .2s; >em { opacity: 0; } }//end of 스케쥴 제목 }//end of li }//end of ul }//end of schedule_content }//end of rnd_schedule >.rnd_outside { width: 100%; margin-top: 150px; //background-color: green; >ul { //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; } &:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//ednd of ul >ol { margin-top: 30px; width: 100%; >li { float: left; width: 300px; height: 570px; background-repeat: no-repeat; background-size: cover; &:nth-child(1) { background-image: url(../images/thief.png); background-position:24% 50%; } &:nth-child(2) { background-image: url(../images/lamp.jpg); background-position:60% 50%; } &:nth-child(3) { background-image: url(../images/auto_btn.png); background-position:50% 50%; } &:nth-child(4) { background-image: url(../images/hemet.jpg); background-position:45% 50%; } >dl { opacity: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); color: #fff; text-align: center; cursor: default; >dt { position: relative; padding-top: 150px; font-size: 25px; &:after { position: absolute; top: 190px; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background-color: #fff; content: ''; } } >dd { padding: 30px 30px 0 30px; font-size: 14px; text-align: center; line-height: 1.6em; } } }//end of li } }//end of rnd_outside }//end of inner }//end of #research //연구개발 모바일버전 @media screen and(max-width : 768px) { #research { width: 100%; height: auto;//m margin-bottom: 0 auto; //background-color: green; background-color: #fff; background-image: url(../images/bus_bg.jpg); background-repeat: repeat-Y; .research { width: 100%; height: 400px; margin-bottom: 40px; background-color: #fff; >.inner { height: 100px; padding-top: 130px; margin: 0 auto 130px; //background-color: orange; >h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; &:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted $point-color2; content: ''; } } p { text-align: center; font-size: 17px; letter-spacing: -1px; color: #999; line-height: 1.45em; } }//end of inner }//end of class research .inner { >.rndSys { width: 100%; //background-color: green; >.camera { margin: 0 auto; width: 100%;//m height: 300px;//m background-image: url(../images/camera.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;//m }//end of camera >ul { //background-color: orange; >li { float: inherit;//m &:first-child { font-size: 32px; font-weight: 600; padding: 0 10px 0 10px;//m } &:last-child { display: none;//m font-size: 16px; padding-top: 5px;//m padding-left: 10px;//m padding-right: 10px;//m } } }//ednd of ul .rndSys_info { padding-top: 10px; padding: 10px;//m line-height: 1.5em; color: #aaa; cursor: default; }//end of rndSys_info }//end of rndSys .strength { margin-top: 50px;//m width: 100%; >.strength_box1 { float: inherit;//m width: 100%;//m height: 560px; //background-color: orange; >ul { padding: 0px 0 0 0px;//m //background-color: orange; >li { float: inherit;//m &:first-child { font-size: 32px; font-weight: 600; padding: 0 10px 0 10px;//m } &:last-child { display: none;//m font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//ednd of ul >.strength_top { margin-top: 30px;//m padding-left: 0px;//m padding-right: 0px;//m width: 100%;//m height: 170px;//m //background-color: green; >ul { >li { float: left; width: 100%; height: 170px; border-bottom: 1px dashed #ccc; &:first-child { height: 160px;//m >dl>dt>ol>li:first-child { background-image: url(../images/strength_01.png); }//터널 유고영상 빅데이터 확보 아이콘 }//end of ul li:first-child_터널 유고영상 빅데이터 확보 &:last-child { padding-top: 50px;//m height: 200px;//m >dl>dt>ol>li:first-child { background-image: url(../images/strength_02.png); }//터널 유고영상 빅데이터 확보 아이콘 }//end of ul li:first-child_현존하는 시스템의 한계극복기능 >dl { width: 100%; >dt { width: 100%;//m height: 60px; //background-color: gray; >ol { >li { float: left; &:first-child {//아이콘의 공통 스타일 width: 40px; height: 40px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; margin-left: 10px;//m }//end of first-child &:last-child {//아이콘 옆 글자 >dl { padding-left: 10px;//m >dt { font-size: 17px; font-weight: 600; padding : 5px 0 0px 0;//m cursor: default; } >dd { font-size: 13px; font-weight: 500; cursor: default; }//end of dl_strength >.line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; }//end of line }//end of dl }//end of last-child }//end of dt > ol > li }//end of ol } >dd { padding : 0px 0 0 10px;//m font-size: 15px; line-height: 1.45em; color: #333; transition: .3s; cursor: default; }//end of }//end of dl }//end of li }//end of ul }//end of strength_top >.strength_bot { padding-left: 0px;//m padding-right: 0px;//m width: 100%;//m height: 200px; //background-color: green; >ul { >li { float: left; width: 100%; height: 200px; border-bottom: 1px dashed #ccc; &:first-child { padding-top: 50px;//m height: 160px;//m >dl>dt>ol>li:first-child { background-image: url(../images/strength_03.png); }//우수한 경제성 아이콘 }//end of ul li:first-child_우수한 경제성 아이콘 &:last-child { padding-top: 50px;//m height: 160px;//m >dl>dt>ol>li:first-child { background-image: url(../images/strength_04.png); }//지속적인 기술력 성장 아이콘 }//end of ul li:first-child_속적인 기술력 성장 아이콘 >dl { width: 100%; >dt { width: 100%;//m height: 60px; //background-color: gray; >ol { >li { float: left; &:first-child {//아이콘의 공통 스타일 width: 40px; height: 40px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; margin-left: 10px;//m }//end of first-child &:last-child {//아이콘 옆 글자 >dl { padding-left: 10px;//m >dt { font-size: 17px; font-weight: 600; padding : 5px 0 0px 0;//m cursor: default; } >dd { font-size: 13px; font-weight: 500; cursor: default; }//end of dl_strength >.line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; }//end of line }//end of dl }//end of last-child }//end of dt > ol > li }//end of ol } >dd { padding : 0px 0 0 10px;//m font-size: 15px; line-height: 1.45em; color: #333; transition: .3s; cursor: default; }//end of }//end of dl }//end of li }//end of ul }//end of strength_bot }//end of strength_box1 >.strength_box2 { display: none;//m float: left; width: 330px; height: 560px; background-image: url(../images/strength.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 0; }//end of strength_box2 }//end of strength >.rnd_schedule { width: 100%; margin-top: 80px;//m //background-color: green; >ul { //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; padding: 0 10px 0 10px;//m } &:last-child { display: none;//m font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//end of ul >.schedule_content { width: 100%;//m margin-top: 30px; >ul { width: 90%; height: auto;//m //margin-bottom: 10px; margin: 0 auto 10px;//m //background-color: orange; >li { float: inherit;//m &:first-child { width: 100%; height: 100%; background-color: #1e3571; text-align: center; font-size: 16px; font-weight: 600; line-height: 70px; color: #fff; cursor: default; }//end of 스케쥴 제목 &:last-child { width: 100%; height: 100%; border: 1px solid #1e3571; box-sizing: border-box; padding: 30px; font-size: 16px; font-weight: 600; line-height: 1.45em;//m cursor: default; transition-duration: .2s; >em { opacity: 0; } }//end of 스케쥴 제목 }//end of li }//end of ul }//end of schedule_content }//end of rnd_schedule >.rnd_outside { width: 100%; margin-top: 80px;//m //background-color: green; >ul { //background-color: orange; >li { float: left; &:first-child { font-size: 32px; font-weight: 600; padding: 0 10px 0 10px;//m } &:last-child { display: none;//m font-size: 16px; padding-top: 15px; padding-left: 3px; } } }//ednd of ul >ol { margin-top: 30px; width: 100%; >li { float: left; width: 100%;//m height: 200px;//m background-repeat: no-repeat; background-size: cover; &:nth-child(1) { background-image: url(../images/thief.png); background-position:24% 50%; } &:nth-child(2) { background-image: url(../images/lamp.jpg); background-position:60% 50%; } &:nth-child(3) { background-image: url(../images/auto_btn.png); background-position:50% 50%; } &:nth-child(4) { background-image: url(../images/hemet.jpg); background-position:45% 50%; } >dl { opacity: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); color: #fff; text-align: center; cursor: default; >dt { position: relative; padding-top: 50px;//m font-size: 25px; &:after { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background-color: #fff; content: ''; } } >dd { padding: 30px 30px 0 30px; font-size: 14px; text-align: center; line-height: 1.6em; text-align: center;//m } } }//end of li } }//end of rnd_outside }//end of inner }//end of #research }//end of research 모바일 */ #research { width: 100%; background-color: white; } #research > .inner { width: 100%; height: 180px; padding-top: 60px; margin: 0 auto; background-image: url(../images/research_m01.jpg); } #research > .inner > h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; color: #fff; } #research > .inner > h2:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #research > .inner > .threeTap { width: 100%; } #research > .inner > .threeTap ul { width: 960px; margin: 0 auto; } #research > .inner > .threeTap ul > li { display: block; float: left; margin: 0 20px; font-size: 20px; font-weight: 600; color: #fff; cursor: default; } #research > .research { padding-top: 130px; margin-bottom: 100px; width: 100%; } #research > .research > div { width: 100%; } #research > .research > div > ul > li { float: left; width: 50%; height: 450px; background-size: contain; background: no-repeat; background-position: 50% 50%; } #research > .research > div > ul > li:first-child { text-indent: -99999px; } #research > .research > div > ul > li:last-child { height: 240px; margin-top: 120px; } #research > .research > div > ul > li:last-child > dl { padding-left: 100px; } #research > .research > div > ul > li:last-child > dl > dt { position: relative; font-size: 40px; font-weight: 500; margin-bottom: 30px; color: #333; } #research > .research > div > ul > li:last-child > dl > dt:after { position: absolute; top: 60px; left: 0; width: 60px; height: 4px; background-color: #ffc700; content: ''; } #research > .research > div > ul > li:last-child > dl > dt > span { padding-left: 4px; font-size: 16px; color: #1e3571; font-weight: 500; } #research > .research > div > ul > li:last-child > dl > dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; } #research > .research > div > ul > li:last-child > dl > dd:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: #1e3571; border-radius: 7px; content: ''; } #research > .research > div.research_01 > ul > li:first-child { background-image: url(../images/camera.png); background-size: contain; } #research > .research > div.research_02 { width: 100%; height: 100%; background-image: url(../images/bg_2.png); } #research > .research > div.research_02 > ul > li > dl dt { color: #fff; } #research > .research > div.research_02 > ul > li > dl dd { color: #fff; } #research > .research > div.research_02 > ul > li:first-child { background-image: url(../images/crack.png); background-size: contain; } #research > .research > div.research_03 > ul > li:first-child { background-image: url(../images/moon.png); background-size: contain; background-repeat: no-repeat; } @media screen and (max-width: 768px) { #research { width: 100%; background-color: white; } #research > .inner { height: 180px; padding-top: 30px; margin: 0 auto; background-image: url(../images/research_m01.jpg); } #research > .inner > h2 { position: relative; text-align: center; font-size: 22px; font-weight: 600; margin-bottom: 50px; } #research > .inner > h2:after { position: absolute; top: 50px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #research > .inner > .threeTap { width: 100%; height: 100%; } #research > .inner > .threeTap ul { width: 100%; margin: 0 auto; } #research > .inner > .threeTap ul > li { display: block; float: inherit; text-align: center; margin: 10px 20px; font-size: 20px; font-weight: 600; color: #fff; cursor: default; } #research > .category { position: fixed; bottom: 0; width: 100%; border-bottom: 1px solid #ddd; z-index: 99999; } #research > .category > ul { margin: 0 auto; width: 100%; } #research > .category > ul > li { float: left; width: 25%; height: 40px; line-height: 40px; text-align: center; font-weight: 600; margin-right: 0px; background-color: #eee; color: #555; cursor: pointer; } #research > .category > ul > li:last-child { margin-right: 0; border-bottom: none; } #research > .category > ul > li:hover { color: #fff; background-color: #1e3571; } #research > .category > ul > li.on { color: #fff; background-color: #1e3571; } #research > .research { padding-top: 0px; width: 100%; background-image: url(../images/bus_bg.jpg); } #research > .research > div { width: 100%; margin-top: 30px; } #research > .research > div:first-child { margin-top: 0; } #research > .research > div > ul > li { float: inherit; width: 100%; height: 550px; background-size: contain; background: no-repeat; background-position: 50% 50%; } #research > .research > div > ul > li:first-child { height: 200px; float: inherit !important; text-indent: -99999px; } #research > .research > div > ul > li:last-child { height: auto; margin-top: 20px; } #research > .research > div > ul > li:last-child > dl { width: 90%; padding-left: 0px; margin: 0 auto; } #research > .research > div > ul > li:last-child > dl > dt { position: relative; font-size: 30px; font-weight: 500; margin-bottom: 30px; color: #333; } #research > .research > div > ul > li:last-child > dl > dt:after { display: none; position: absolute; top: 50px; left: 0; width: 60px; height: 4px; background-color: #ffc700; content: ''; } #research > .research > div > ul > li:last-child > dl > dt > span { padding-left: 4px; font-size: 16px; color: #1e3571; font-weight: 500; } #research > .research > div > ul > li:last-child > dl > dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; } #research > .research > div > ul > li:last-child > dl > dd > br { display: none; } #research > .research > div > ul > li:last-child > dl > dd:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: #1e3571; border-radius: 7px; content: ''; } #research > .research > div.research_01 > ul > li:first-child { background-image: url(../images/camera.png); background-size: contain; } #research > .research > div.research_02 { width: 100%; height: 100%; background-image: url(../images/bg_2.png); } #research > .research > div.research_02 > ul > li > dl dt { color: #fff; } #research > .research > div.research_02 > ul > li > dl dd { color: #fff; } #research > .research > div.research_02 > ul > li:first-child { background-image: url(../images/crack.png); background-size: contain; } #research > .research > div.research_03 > ul > li:first-child { background-image: url(../images/moon.png); background-size: contain; background-repeat: no-repeat; } } /*사업영역*/ #business { width: 100%; background-color: white; } #business > .inner { height: 100px; padding-top: 130px; margin: 0 auto 130px; } #business > .inner > h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; } #business > .inner > h2:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #business > .inner p { text-align: center; font-size: 17px; letter-spacing: -1px; color: #999; line-height: 1.45em; } #business > .category { width: 100%; border-bottom: 1px solid #eee; } #business > .category > ul { margin: 0 auto; width: 850px; } #business > .category > ul > li { float: left; width: 24%; height: 40px; line-height: 40px; text-align: center; font-weight: 600; margin-right: 3px; background-color: #ddd; color: #555; cursor: pointer; } #business > .category > ul > li:last-child { margin-right: 0; } #business > .category > ul > li:hover { color: #fff; background-color: #1e3571; } #business > .category > ul > li.on { color: #fff; background-color: #1e3571; } #business > .business { padding-top: 130px; width: 100%; background-image: url(../images/bus_bg.jpg); } #business > .business > div { width: 100%; } #business > .business > div > ul > li { float: left; width: 50%; height: 450px; background-size: contain; background: no-repeat; background-position: 50% 50%; } #business > .business > div > ul > li:first-child { text-indent: -99999px; } #business > .business > div > ul > li:last-child { height: 240px; margin-top: 120px; } #business > .business > div > ul > li:last-child > dl { padding-left: 100px; } #business > .business > div > ul > li:last-child > dl > dt { position: relative; font-size: 40px; font-weight: 500; margin-bottom: 30px; color: #333; } #business > .business > div > ul > li:last-child > dl > dt:after { position: absolute; top: 60px; left: 0; width: 60px; height: 4px; background-color: #ffc700; content: ''; } #business > .business > div > ul > li:last-child > dl > dt > span { padding-left: 4px; font-size: 16px; color: #1e3571; font-weight: 500; } #business > .business > div > ul > li:last-child > dl > dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; } #business > .business > div > ul > li:last-child > dl > dd:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: #1e3571; border-radius: 7px; content: ''; } #business > .business > div.business_01 > ul > li:first-child { background-image: url(../images/business_ai2.png); background-size: contain; } #business > .business > div.business_02 > ul > li:first-child { background-image: url(../images/bigdata.jpg); background-size: contain; } #business > .business > div.business_03 > ul > li:first-child { background-image: url(../images/soc.jpg); background-size: contain; background-repeat: no-repeat; } #business > .business > div.business_04 { padding-bottom: 100px; } #business > .business > div.business_04 > ul > li:first-child { background-image: url(../images/si.jpg); background-size: cover; background-repeat: no-repeat; background-position: 0 88%; } @media screen and (max-width: 768px) { #business { width: 100%; background-color: white; } #business > .inner { height: 50px; padding-top: 60px; margin: 0 auto 130px; } #business > .inner > h2 { position: relative; text-align: center; font-size: 22px; font-weight: 600; margin-bottom: 50px; } #business > .inner > h2:after { position: absolute; top: 50px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #business > .inner p { text-align: center; font-size: 15px; letter-spacing: -1px; color: #999; line-height: 1.45em; } #business > .category { position: fixed; bottom: 0; width: 100%; border-bottom: 1px solid #ddd; z-index: 99999; } #business > .category > ul { margin: 0 auto; width: 100%; } #business > .category > ul > li { float: left; width: 25%; height: 40px; line-height: 40px; text-align: center; font-weight: 600; margin-right: 0px; background-color: #eee; color: #555; cursor: pointer; } #business > .category > ul > li:last-child { margin-right: 0; border-bottom: none; } #business > .category > ul > li:hover { color: #fff; background-color: #1e3571; } #business > .category > ul > li.on { color: #fff; background-color: #1e3571; } #business > .business { padding-top: 0px; width: 100%; background-image: url(../images/bus_bg.jpg); } #business > .business > div { width: 100%; margin-top: 30px; } #business > .business > div:first-child { margin-top: 0; } #business > .business > div > ul > li { float: inherit; width: 100%; height: 550px; background-size: contain; background: no-repeat; background-position: 50% 50%; } #business > .business > div > ul > li:first-child { height: 200px; float: inherit !important; text-indent: -99999px; } #business > .business > div > ul > li:last-child { height: auto; margin-top: 20px; } #business > .business > div > ul > li:last-child > dl { width: 90%; padding-left: 0px; margin: 0 auto; } #business > .business > div > ul > li:last-child > dl > dt { position: relative; font-size: 30px; font-weight: 500; margin-bottom: 30px; color: #333; } #business > .business > div > ul > li:last-child > dl > dt:after { position: absolute; top: 50px; left: 0; width: 60px; height: 4px; background-color: #ffc700; content: ''; } #business > .business > div > ul > li:last-child > dl > dt > span { padding-left: 4px; font-size: 16px; color: #1e3571; font-weight: 500; } #business > .business > div > ul > li:last-child > dl > dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; } #business > .business > div > ul > li:last-child > dl > dd > br { display: none; } #business > .business > div > ul > li:last-child > dl > dd:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: #1e3571; border-radius: 7px; content: ''; } #business > .business > div.business_01 > ul > li:first-child { background-image: url(../images/business_ai2.png); background-size: contain; } #business > .business > div.business_02 > ul > li:first-child { background-image: url(../images/bigdata.jpg); background-size: contain; } #business > .business > div.business_03 > ul > li:first-child { background-image: url(../images/soc.jpg); background-size: cover; background-repeat: no-repeat; } #business > .business > div.business_04 { padding-bottom: 40px; } #business > .business > div.business_04 > ul > li:first-child { background-image: url(../images/si.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 90%; } } #faq { position: relative; width: 100%; margin-bottom: 60px; height: 550px; background-color: #fff; } #faq > .inner { width: 1000px; margin: 0 auto; } #faq > .inner > .faq_info { float: left; width: 450px; margin: 0 auto; } #faq > .inner > .faq_info > ul { margin-top: 80px; width: 100%; } #faq > .inner > .faq_info > ul > li { margin-top: 20px; font-size: 14px; font-weight: 500; color: #333; line-height: 1.7em; } #faq > .inner > .faq_info > ul > li:last-child { margin-top: 50px; font-size: 17px; color: #1e3571; font-weight: 600; } #faq > .inner > .faq_info > ul > li > span { font-size: 20px; font-weight: 600; } #faq > .inner > .faq_info > ul > li > em { color: #eee; } #faq > .inner > .faq_info > ul > li.faq_info_main { position: relative; font-size: 30px; font-weight: 700; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; } #faq > .inner > .faq_info > ul > li.faq_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #faq > .inner > .map { float: right; margin-top: 50px; width: 540px; height: 400px; border: 0; } @media screen and (max-width: 768px) { #faq { position: relative; width: 100%; padding-bottom: 60px; margin-bottom: 0px; height: auto; background-color: #fff; } #faq > .inner { width: 100%; margin: 0 auto; } #faq > .inner > .faq_info { float: inherit; width: 90%; margin: 0 auto; } #faq > .inner > .faq_info > ul { margin-top: 80px; width: 100%; } #faq > .inner > .faq_info > ul > li { margin-top: 20px; font-size: 14px; font-weight: 500; color: #333; line-height: 1.7em; } #faq > .inner > .faq_info > ul > li:last-child { border-top: 1px dotted #ddd; margin-top: 20px; padding-top: 10px; font-size: 14px; color: #1e3571; font-weight: 600; } #faq > .inner > .faq_info > ul > li > span { font-size: 17px; font-weight: 600; } #faq > .inner > .faq_info > ul > li > em { color: #eee; } #faq > .inner > .faq_info > ul > li.faq_info_main { position: relative; text-align: center; font-size: 22px; font-weight: 700; color: #1e3571; margin-bottom: 55px; line-height: 1.3em; } #faq > .inner > .faq_info > ul > li.faq_info_main:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } #faq > .inner > .map { float: inherit; margin-top: 20px; width: 100%; height: 400px; border: 0; } } /*반응형*/ .pos_right { background-color: red; } .pos_right > dl > dt:after { left: 200px; } /*# sourceMappingURL=style.css.map */