$point-color : #1e3571; $point-color2 : #ffc700; /*일반현황*/ .index_tap { width: 100%; height: 35px; border-bottom : 1px solid #eee; background-color: #ffffff; >p { margin: 0 auto; width: 1000px; font-size: 13px; line-height: 35px; text-align: right; color: #333; >em { padding: 0 3px; font-weight: 900; color: $point-color2; } >span { >a { color: #222; font-weight: 900; &:hover { text-decoration: underline; } } } }//end of p }//end of index_tap @media screen and(max-width : 768px) {/*index_tap 768px 반응형*/ .index_tap { width: 100%; height: 35px; border-bottom : 1px solid #eee; background-color: #ffffff; >p { margin: 0 auto; width: 100%; font-size: 13px; line-height: 35px; text-align: center;//변경 color: #333; >em { padding: 0 3px; font-weight: 900; color: $point-color2; } >span { >a { padding-right: 240px;//추가 color: #222; font-weight: 900; &:hover { text-decoration: underline; } } } }//end of p }//end of index_tap }//index_tap 768px 반응형 .index_tap2 { background-color: transparent; border-bottom: 1px solid #e1e1e1; } #status { width: 100%; margin-bottom: 60px; //background-color: green; height: 1350px; background-color: #fff; >.status { position: relative; width: 1000px; margin: 0 auto 100px; >ul { margin-top: 60px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 20px; font-weight: 700; color: $point-color; margin-bottom: 70px; line-height: 1.3em; &:after { position: absolute; top: 85px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main >em { color: #eee; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >ol { margin-top: 50px; color: #bbb; line-height: 1.4em; >li{ font-size: 13px; &:first-child { font-size: 18px; margin-bottom: 10px; } }//end of li }//end of ol &: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: ''; } }//end of status >.organiz { width: 100%; height: 700px; //background-color: ; >.inner { position: relative; width: 1000px; height: 600px; >h2 { width: 1000px; margin: 0 auto; text-align: left; font-size: 25px; color: $point-color; margin-bottom:0px; } >.orgimg { width: 100%; height: 100%; background-image: url(../images/organiz.jpg); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } &:after { position: absolute; top : 65px; width: 1000px; height: 1px; background-color: #ddd; content: ''; } } >.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; >h2 { width: 1000px; margin: 0 auto; text-align: left; font-size: 25px; color: $point-color; margin-bottom:0px; } &:after { position: absolute; top : 65px; width: 1000px; height: 1px; background-color: #ddd; content: ''; } } }//end of organiz }//end of status @media screen and(max-width : 768px) { //status 768px 반응형 #status { width: 100%; margin-bottom: 0px;//변경 padding-bottom: 60px; //background-color: green; height: auto; background-color: #fff; >.status { position: relative; width: 90%;//변경 padding-bottom: 50px;//c추가 margin: 0 auto 0px;//변경 >ul { margin-top: 60px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 20px; font-weight: 700; color: $point-color; margin-bottom: 70px; line-height: 1.3em; >br { display: none; } &:after { position: absolute; top: 85px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main >em { color: #eee; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >ol { margin-top: 50px; color: #bbb; line-height: 1.4em; >li{ font-size: 13px; &:first-child { font-size: 18px; margin-bottom: 10px; } }//end of li }//end of ol &: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: ''; } }//end of status >.organiz { //display: none; width: 100%; height: 400px; //background-color: ; >.inner { position: relative; width: 350px;//변경 height: 350px;//변경 background-image: none;//추가 >h2 { width: 100%;//변경 margin: 0 auto; text-align: left; font-size: 25px; color: $point-color; margin-bottom:0px; } >.orgimg_kr{ width: 100%; background-image: url(../images/organiz_kor_m.jpg); //background-color: green; background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } >.orgimg_eng{ width: 100%; background-image: url(../images/organiz_m.jpg); //background-color: green; background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; } &:after { //display: none; position: absolute; top : -30px; left: 50%;//추가 transform: translateX(-50%); width: 90%; height: 1px; background-color: #ddd; content: ''; } } >.org_eng { //display: none; width: 100%; height: 400px; //background-color: ; >h2 { width: 100%; margin: 0 auto; text-align: left; font-size: 25px; color: $point-color; margin-bottom:0px; } &:after { position: absolute; top : -25px; width: 90%; height: 1px; background-color: #ddd; content: ''; } } }//end of organiz }//end of status }//status 768px 반응형 /*연혁*/ #since { width: 100%; margin-bottom: 60px; //background-color: green; height: 750px; background-color: #fff; >.since { position: relative; width: 1000px; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 30px; font-weight: 700; color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } /* &: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 */ }//end of ceo_info_main >em { color: $point-color2; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >.since_info { width: 100%; //background-color: orange; >h2 { padding-left: 100px; font-size: 50px; font-weight: 500; font-style : italic; letter-spacing: -4px; color: #eee; } >div { width: 100%; margin: 10px auto 0; border-bottom: 1px dotted #ddd; >ul { padding-left: 150px; width: 100%; >li { float: left; margin-left: 230px; line-height: 2.5em; &:first-child { font-size: 40px; font-weight: 900; color: #ddd; }//end of all li:first-child >dl { padding: 5px 10px; width: 100%; //background-color: red; >dd { position: relative; font-size: 16px; font-weight: 600; &:after { position: absolute; top: 50%; transform: translateY(-50%); left: -20px; width: 10px; height: 10px; border-radius: 15px; background-color: $point-color2; content: ''; } }//end of all dd }//end of all dl }//end of all li }//end of all ul }//end of all div >.january { >ul { //background-color: pink; }//end of ul }//end of january >.february { >ul { //background-color: green; }//end of ul }//end of february >.march { >ul { //background-color: rgb(0, 186, 191); }//end of ul }//end of march }//end of since_info }//end of ceo_info }//end of since @media screen and(max-width : 768px) {/*since 768px 반응형*/ #since { width: 100%; margin-bottom: 0px;//변경 padding-bottom: 80px;//추가 //background-color: green; height: auto;//변경 background-color: #fff; >.since { position: relative; width: 90%; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 22px;//변경 font-weight: 600;//변경 color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } /* &: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 */ }//end of ceo_info_main >em { color: $point-color2; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >.since_info { width: 100%; //background-color: orange; >h2 { padding-bottom: 20px;//추가 padding-left: 0px;//변경 font-size: 50px; font-weight: 500; font-style : italic; letter-spacing: -4px; color: #eee; } >div { width: 100%; margin: 10px auto 0; border-bottom: 1px dotted #ddd; >ul { padding-left: 0px;//변경 width: 100%; >li { float: inherit; margin-left: 0px;//변경 line-height: 1.45em; &:first-child { display: none; font-size: 40px; font-weight: 900; color: #ddd; }//end of all li:first-child >dl { padding: 5px 0px;//변경 width: 100%; //background-color: red; >dd { position: relative; font-size: 14px; font-weight: 500; padding-bottom: 10px;//추가 &:after { position: absolute; top: 11px; transform: translateY(-50%); left: -10px; width: 5px; height: 5px; border-radius: 15px; background-color: $point-color2; content: ''; } }//end of all dd }//end of all dl }//end of all li }//end of all ul }//end of all div >.january { >ul { //background-color: pink; }//end of ul }//end of january >.february { >ul { //background-color: green; }//end of ul }//end of february >.march { >ul { //background-color: rgb(0, 186, 191); }//end of ul }//end of march }//end of since_info }//end of ceo_info }//end of since }//since 768px 반응형 /*보유인증현황*/ #certificate { width: 100%; margin-bottom: 0 auto; //background-color: green; height: 1700px; background-color: #fff; >.certificate { position: relative; width: 1000px; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 30px; font-weight: 700; color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main >em { color: #ddd; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >.certificate_info { width: 100%; //background-color: green; >div { width: 100%; >ul { >li { float: left; margin: 0 47px 50px 0; width: 300px; height: 400px; //background-color: pink; border: 1px dotted #eee; &:last-child { margin-right: 0; } >dl { >dt { width: 300px; height: 350px; text-indent: -99999px; //background-color: orange; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } >dd { font-size: 15px; font-weight: 600; text-align: center; line-height: 50px; } }//end of all dl }//end of all li }//end of all ul }//end of all div >.sect01 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_01.png); } &:nth-child(2) > dl > dt { background-image: url(../images/certificate_02.png); } &:nth-child(3) > dl > dt { background-image: url(../images/certificate_03.png); } }//end of sect01 img >.sect02 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_04.png); } &:nth-child(2) > dl > dt { background-image: url(../images/certificate_05.png); } &:nth-child(3) > dl > dt { background-image: url(../images/certificate_06.png); } }//end of sect02 img >.sect03 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_07.png); } &:nth-child(2) > dl > dt { background-size: contain; background-image: url(../images/certificate_09.png); background-position: 50% 50%; } &:nth-child(3) > dl > dt { background-size: contain; background-image: url(../images/certificate_09.png); background-position: 50% 50%; } }//end of sect03 img }//end of certificate_info--> }//end of ceo_info }//end of certificate @media screen and(max-width : 768px) {/*certificate 768px 반응형*/ #certificate { width: 100%;//변경 //padding-bottom: 60px; margin-bottom: 0 auto 0;//변경 //background-color: green; height: auto;//변경 background-color: #fff; >.index_tap { >p { >span { >a { padding-right: 240px; } } } } >.certificate { position: relative; width: 100%; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { width: 100%;//추가 text-align: center; margin-top: 20px; font-size: 15px; font-weight: 600; color: #333; line-height: 2em; &.status_info_main { position: relative; font-size: 22px; font-weight: 700; color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main >em { color: #ddd; }//end of em >span { font-size: 20px; } }//end of li }//end of ul >.certificate_info { width: 100%; //background-color: green; >div { width: 100%; >ul { width: 100%;//추가 >li { float: inherit; margin: 0 0px 50px 0; width: 100%; height: 400px; //background-color: pink; border: 1px dotted #eee; border-top: none;//추가 border-left: none;//추가 border-right: none;//추가 &:last-child { margin-right: 0; } >dl { >dt { width: 100%; height: 350px; text-indent: -99999px; //background-color: orange; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } >dd { font-size: 15px; font-weight: 600; text-align: center; line-height: 50px; } }//end of all dl }//end of all li }//end of all ul }//end of all div >.sect01 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_01.png); } &:nth-child(2) > dl > dt { background-image: url(../images/certificate_02.png); } &:nth-child(3) > dl > dt { background-image: url(../images/certificate_03.png); } }//end of sect01 img >.sect02 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_04.png); } &:nth-child(2) > dl > dt { background-image: url(../images/certificate_05.png); } &:nth-child(3) > dl > dt { background-image: url(../images/certificate_06.png); } }//end of sect02 img >.sect03 >ul >li { &:nth-child(1) > dl > dt { background-image: url(../images/certificate_07.png); } &:nth-child(2) > dl > dt { background-size: contain; background-image: url(../images/certificate_08.png); background-position: 50% 50%; } }//end of sect03 img }//end of certificate_info--> }//end of ceo_info }//end of certificate }//certificate 768px 반응형 #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: left; 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: 600px; 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: 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: left; line-height: 1.6em; } } }//end of li } }//end of rnd_outside }//end of inner }//end of #research }//end of research 모바일 /*사업영역*/ #business { width: 100%; //height: 2460px; background-color: rgb(255, 255, 255); >.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 >.category { width: 100%; border-bottom: 1px solid #eee; //ackground-color: green; >ul { margin: 0 auto; width: 850px; >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; &:last-child { margin-right: 0; } &:hover { color:#fff; background-color: $point-color; } &.on { color:#fff; background-color: $point-color; } }//end of li }//end of ul }//end of category >.business { padding-top: 130px; width: 100%; background-image: url(../images/bus_bg.jpg); >div { width: 100%; //margin-top: 60px; >ul { //background-color: green; >li { float: left; width: 50%; height: 450px; background-size: contain; background: no-repeat; background-position: 50% 50%; &:first-child { text-indent: -99999px; } &:last-child { height: 240px; margin-top: 120px; //background-color: red; >dl{ padding-left: 100px; >dt { position: relative; font-size: 40px; font-weight: 500; margin-bottom: 30px; color: #333; &:after { position: absolute; top: 60px; left: 0; width: 60px; height: 4px; background-color: $point-color2; content: ''; } >span { padding-left: 4px; font-size: 16px; color: $point-color; font-weight: 500; //letter-spacing: -8px; } }//end of all dt >dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; &:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: $point-color; border-radius: 7px; content: ''; } }//end of dd } }//end of all li:last-child }//end of li }//end of all ul &.business_01 { >ul >li { &:first-child { background-image: url(../images/business_ai2.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of business_01 &.business_02 { >ul >li { &:first-child { background-image: url(../images/bigdata.jpg); background-size: contain; //background-color: green; } }//end of 01 li }//end of business_01 &.business_03 { >ul >li { &:first-child { background-image: url(../images/soc.jpg); background-size: contain; background-repeat: no-repeat; //background-color: orange; } }//end of 01 li }//end of business_01 &.business_04 { padding-bottom: 100px; >ul >li { &:first-child { background-image: url(../images/si.jpg); background-size: cover; background-repeat: no-repeat; background-position: 0 88%; //background-color: pink; } }//end of 01 li }//end of business_01 }//end of all div }//end of class business }//end of #business @media screen and(max-width : 768px) {//business 768px 반응형 #business { width: 100%; //height: 2460px; background-color: rgb(255, 255, 255); >.inner { height: 50px; padding-top: 60px; margin: 0 auto 130px; //background-color: orange; >h2 { position: relative; text-align: center; font-size: 22px;//변경 font-weight: 600; margin-bottom: 50px; &:after { position: absolute; top: 50px;//변경 left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted $point-color2; content: ''; } } p { text-align: center; font-size: 15px; letter-spacing: -1px; color: #999; line-height: 1.45em; } }//end of inner >.category { position: fixed;//추가 bottom: 0;//추가 width: 100%; border-bottom: 1px solid #ddd;//변경 z-index: 99999; //ackground-color: green; >ul { margin: 0 auto; width: 100%;//변경 >li { float: left;//변경 width: 25%;//변경 height: 40px; line-height: 40px; text-align: center; font-weight: 600; margin-right: 0px;//변경 background-color: #eee; //border-bottom: 1px solid #555; color: #555; cursor: pointer; &:last-child { margin-right: 0; border-bottom: none; } &:hover { color:#fff; background-color: $point-color; } &.on { color:#fff; background-color: $point-color; } }//end of li }//end of ul }//end of category >.business { padding-top: 0px;//변경 width: 100%; background-image: url(../images/bus_bg.jpg); >div { width: 100%; margin-top: 30px;//추가 &:first-child { margin-top: 0; } >ul { //background-color: green; >li { float: inherit; width: 100%; height: 550px; background-size: contain; background: no-repeat; background-position: 50% 50%; &:first-child { height: 200px; float: inherit!important;//추가 text-indent: -99999px; } &:last-child { height: auto; margin-top: 20px;//변경 //background-color: red; >dl{ width: 90%;//추기 padding-left: 0px; margin: 0 auto;//추가 >dt { position: relative; font-size: 30px; font-weight: 500; margin-bottom: 30px; color: #333; &:after { position: absolute; top: 50px; left: 0; width: 60px; height: 4px; background-color: $point-color2; content: ''; } >span { padding-left: 4px; font-size: 16px; color: $point-color; font-weight: 500; //letter-spacing: -8px; } }//end of all dt >dd { position: relative; line-height: 2em; padding-left: 20px; color: #aaa; >br { display: none; } &:after { position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background-color: $point-color; border-radius: 7px; content: ''; } }//end of dd } }//end of all li:last-child }//end of li }//end of all ul &.business_01 { >ul >li { &:first-child { background-image: url(../images/business_ai2.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of business_01 &.business_02 { >ul >li { &:first-child { background-image: url(../images/bigdata.jpg); background-size: contain; //background-color: green; } }//end of 01 li }//end of business_01 &.business_03 { >ul >li { &:first-child { background-image: url(../images/soc.jpg); background-size: cover; background-repeat: no-repeat; //background-color: orange; } }//end of 01 li }//end of business_01 &.business_04 { padding-bottom: 40px;//변경 >ul >li { &:first-child { background-image: url(../images/si.jpg); background-size: cover;//변경 background-repeat: no-repeat; background-position: 50% 90%; //background-color: pink; } }//end of 01 li }//end of business_01 }//end of all div }//end of class business }//end of #business }//business 768px 반응형 #faq { position: relative; width: 100%; margin-bottom: 60px; //background-color: green; height: 550px; background-color: #fff; >.inner { width: 1000px; margin: 0 auto; >.faq_info { float: left; width: 450px; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 14px; font-weight: 500; color: #333; line-height: 1.7em; &:last-child { margin-top: 50px; font-size: 17px; color: $point-color; font-weight: 600; } >span { font-size: 20px; font-weight: 600; } >em { color: #eee; } &.faq_info_main { position: relative; font-size: 29px; font-weight: 700; color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main } }//end of ul }//end of ceo_info >.map>iframe { float: right; margin-top: 50px; width : 540px; height : 430px; frameborder : 0; border : 0 allowfullscreen; } }//end of inner }//end of faq @media screen and(max-width : 768px) {//faq768px 반응형 #faq { position: relative; width: 100%; padding-bottom: 60px; margin-bottom: 0px;//변경 //background-color: green; height: auto; background-color: #fff; >.inner { width: 100%;//변경 margin: 0 auto; >.faq_info { float: inherit;//변경 width: 90%; margin: 0 auto; >ul { margin-top: 80px; width: 100%; //background-color: green; >li { margin-top: 20px; font-size: 14px; font-weight: 500; color: #333; line-height: 1.7em; &:last-child { border-top: 1px dotted #ddd;//추가 margin-top: 20px;//변경 padding-top: 10px;//추가 font-size: 14px; color: $point-color; font-weight: 600; } >span { font-size: 17px; font-weight: 600; } >em { color: #eee; } &.faq_info_main { position: relative; text-align: center;//추가 font-size: 22px;//변경 font-weight: 700; color: $point-color; margin-bottom: 55px; line-height: 1.3em; &:after { position: absolute; top: 65px; left: 0; width: 100%; height: 1px; background-color: #ddd; content: ''; } }//end of ceo_info_main } }//end of ul }//end of ceo_info >.map>iframe { float: inherit;//변경 margin-top: 20px; width : 100%; height : 430px; frameborder : 0; border : 0 allowfullscreen; } }//end of inner }//end of faq }//faq 768px 반응형 /*반응형*/ .pos_right { background-color: red; //text-align: right; >dl { >dt { &:after { left: 200px; } } } }//end of pos_right