$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 .index_tap2 { background-color: transparent; border-bottom: 1px solid #e1e1e1; } #status { width: 100%; margin-bottom: 60px; //background-color: green; height: 1300px; 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: 700px; background-image: url(../images/organiz.jpg); background-size: contain; background-position: 50% 20%; background-repeat: no-repeat; >h2 { width: 1000px; margin: 0 auto; text-align: left; font-size: 35px; color: $point-color; margin-bottom: 0px; } &:after { position: absolute; top : 60px; width: 1000px; height: 1px; background-color: #ddd; content: ''; } } }//end of organiz }//end of status /*연혁*/ #since { width: 100%; margin-bottom: 60px; //background-color: green; height: 1050px; 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 { font-size: 50px; font-weight: 900; font-style : italic; letter-spacing: -4px; color: #444; } >div { width: 100%; margin: 50px auto 0; border-bottom: 1px dotted #ddd; >ul { padding-left: 150px; width: 100%; >li { float: left; margin-left: 130px; line-height: 2.5em; &:first-child { font-size: 40px; font-weight: 900; color: #ddd; }//end of all li:first-child >dl { padding: 35px 0; 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 /*보유인증현황*/ #certificate { width: 100%; margin-bottom: 60px; //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: 100%; 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_08.png); background-position: 50% 50%; } }//end of sect03 img }//end of certificate_info--> }//end of ceo_info }//end of status #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: 600; 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: 50%; 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 #faq { width: 100%; margin-bottom: 60px; //background-color: green; height: 500px; background-color: #fff; >.faq_info { position: relative; width: 1000px; 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; >span { font-size: 20px; font-weight: 600; } >em { color: #eee; } &.faq_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 } }//end of ul &:after { position: absolute; top: 115px; right: 50px; width: 130px; height: 130px; background-image: url(../images/q_icon.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; content: ''; } }//end of ceo_info }//end of faq /*반응형*/ .pos_right { background-color: red; //text-align: right; >dl { >dt { &:after { left: 200px; } } } }//end of pos_right