$point-color : #263d78; $point-color2 : #ffc700; #contact { width: 100%; height: 750px; background-color: $point-color; >h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #fff; text-transform: uppercase; &:after { position: absolute; bottom: -20px; left: 50.2%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #111; letter-spacing: 4px; content: "How to come"; }//end of :after }//end of h3 >.mapContainer { width: 600px; height: 300px; margin: 60px auto 200px; >.map { width : 600px; height : 450px; background-image: url(../images/map_eng_18.08.06.jpg); background-position: 50% 50%; background-size: cover; border : 0; >a { display: block; width: 100%; height: 100%; text-indent: -99999px; } }//end of map }//end of mapContainer >.mapInfo { position: relative; width: 100%; text-align: center; &:after { position: absolute; top: 0; left: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: 0 50%; content: ''; }//end of :after &:before { position: absolute; bottom: 0; right: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: -35px 50%; content: ''; }//end of :after >.inner { >ul { >li { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.8em; >span { color: #111; font-weight: 900; }//end of span }//end of li }//end of ul }//end of inner }//end of mapInfo }//end of #contact @media screen and(max-width : 768px) {/*contact 768px 반응형*/ #contact { width: 100%;//변경 height: auto;//변경 background-color: $point-color; >h3 { position: relative; padding: 50px 0 0; font-weight: 600; text-align: center; color: #fff; text-transform: uppercase; &:after { position: absolute; bottom: -20px; left: 50.2%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: #111; letter-spacing: 4px; content: "How to come"; }//end of :after }//end of h3 >.mapContainer { width: 90%;//변경 height: 450px; margin: 60px auto 40px; >.map { width : 100%; height : 450px; background-image: url(../images/map_eng_18.08.06.jpg); background-position: 10% 50%; background-size: cover; border : 0; >a { display: block; width: 100%; height: 100%; text-indent: -99999px; } }//end of map }//end of mapContainer >.mapInfo { position: relative; width: 100%; text-align: center; padding-bottom: 50px;//추가 &:after { display: none;//추가 position: absolute; top: 0; left: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: 0 50%; content: ''; }//end of :after &:before { display: none;//추가 position: absolute; bottom: 0; right: 20%; width: 35px; height: 30px; background-image: url(../images/bg_quote.png); background-position: -35px 50%; content: ''; }//end of :after >.inner { >ul { >li { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.8em; >span { display: block; color: #111; font-weight: 900; }//end of span }//end of li }//end of ul }//end of inner }//end of mapInfo }//end of #contact }//contact 768px 반응형 @media screen and(max-width : 768px) { #status > .status > ul > li.status_info_main:after { display: none; } } #since_eng { width: 100%; margin-bottom: 60px; //background-color: green; height: 850px; 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.2em; &: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: 15px; 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 eng 768px --반응형때 #since_eng { 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 eng 768px 반응형 /*certificate*/ #certificate_eng { width: 100%; padding-bottom: 20px; margin-bottom: 0px; //background-color: green; height: auto; background-color: #fff; >.certificate_eng { 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_eng { 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 { padding-top: 5px; font-size: 15px; font-weight: 600; text-align: center; line-height: 20px; } }//end of all dl }//end of all li }//end of all ul }//end of all div >.sect01_eng >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_eng >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_eng >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_10.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_eng { width: 100%;//변경 margin-bottom: 0 auto 0;//변경 //background-color: green; height: auto;//변경 background-color: #fff; >.index_tap { >p { >span { >a { padding-right: 240px; } } } } >.certificate_eng { 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_eng { 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_eng >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_eng >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_eng >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_10.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: 2460px; background-color: rgb(255, 255, 255); >.inner { width: 100%; height: 180px; padding-top: 60px; margin: 0 auto; background-image: url(../images/research_m01.jpg); >h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; color: #fff; &:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted $point-color2; content: ''; } } >.threeTap { width: 100%; //height: 40px; //background-color: green; ul { width: 1370px; margin: 0 auto; //background-color: pink; >li { display: block; float: left; margin: 0 10px; font-size: 20px; font-weight: 600; color: #fff; cursor: default; } } }//end of threetap }//end of inner >.research { padding-top: 130px; margin-bottom : 100px; 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: 30px; 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 &.research_01 { >ul >li { &:first-child { background-image: url(../images/camera.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of research_01 &.research_02 { width: 100%; height: 100%; background-image: url(../images/bg_2.png); >ul >li { >dl{ dt{ color: #fff; } dd { color: #fff; } } &:first-child { background-image: url(../images/crack.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of research_02 &.research_03 { >ul >li { &:first-child { background-image: url(../images/moon.png); background-size: contain; background-repeat: no-repeat; //background-color: orange; } }//end of 01 li }//end of research_03 }//end of all div }//end of class business }//end of #research @media screen and(max-width : 768px) {//research 768px 반응형 #research { width: 100%; //height: 2460px; background-color: rgb(255, 255, 255); >.inner { height: 250px; padding-top: 30px; margin: 0 auto; background-image: url(../images/research_m01.jpg); //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: ''; } } >.threeTap { width: 100%; height: 100%; //background-color: green; ul { width: 100%; margin: 0 auto; //background-color: pink; >li { display: block; float: inherit;//변경 text-align: center;//추가 margin: 10px 20px;//변경 font-size: 20px; font-weight: 600; color: #fff; cursor: default; } } }//end of threetap }//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 >.research { 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 { display: none; 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 &.research_01 { >ul >li { &:first-child { background-image: url(../images/camera.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of research_01 &.research_02 { width: 100%; height: 100%; background-image: url(../images/bg_2.png); >ul >li { >dl{ dt{ color: #fff; } dd { color: #fff; } } &:first-child { background-image: url(../images/crack.png); background-size: contain; //background-color: green; } }//end of 01 li }//end of research_02 &.research_03 { >ul >li { &:first-child { background-image: url(../images/moon.png); background-size: contain; background-repeat: no-repeat; //background-color: orange; } }//end of 01 li }//end of research_03 }//end of all div }//end of class business }//end of #business }//research 768px 반응형 /*business*/ #business_eng { 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: 50px; >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; } >dl > dd{ &:nth-child(3) { &:after { top: 50%; } } &:nth-child(4) { &:after { top: 50%; } } } }//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_eng 768px 반응형 #business_eng { 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;//변경 line-height: 1.3em; font-weight: 600; margin-bottom: 50px; >span {//추가 display: block; } &:after { position: absolute; top: 80px;//변경 left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted $point-color2; content: ''; } } p { width: 90%;//추가 margin: 0 auto;//추가 text-align: center; font-size: 15px; letter-spacing: -1px; color: #999; line-height: 1.45em; >br { display: none; } } }//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; } &:last-child { >dl>dt{ &:after { position: absolute; top: 80px; left: 0; width: 60px; height: 4px; background-color: $point-color2; content: ''; } } } }//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; } &:last-child {//추가 >dl>dt{ &:after { position: absolute; top: 80px; left: 0; width: 60px; height: 4px; background-color: $point-color2; content: ''; } } } }//end of 01 li }//end of business_01 }//end of all div }//end of class business }//end of #business }//business_eng 768px 반응형 /*contact*/ #faq_eng { position: relative; width: 100%; margin-bottom: 60px; //background-color: green; height: 600px; 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 { float: right; margin-top: 50px; width : 540px; height : 400px; border : 0; }// end of mobile map }//end of inner }//end of faq @media screen and(max-width : 768px) {//faq 768px 반응형 #faq_eng { 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 { float: inherit; width : 100%; height : 450px; background-image: url(../images/map_eng_18.08.06.jpg); background-position: 10% 50%; background-size: cover; border : 0; }//end of map }//end of inner }//end of faq }//faq 768px 반응형 footer { width: 100%; height: 170px; background-color: #333; >.inner { //background-color: pink; position: relative; padding-top: 20px; >h1 { float: left; margin-left: 40px; width: 120px; height: 40px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }//end of h1 >address { float: left; margin-top: 0px; margin-left: 30px; width: 350px; //background-color: green; >ul { width: 350px; // background-color: red; > li { margin-left: 0px; width: 320px; //background-color: pink; text-align: center; &:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } &:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } &:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } >dl { >dt { margin: 0 auto; width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }//end of dt >dd { text-align: left; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; &:nth-child(2) { font-weight: 700; } &:nth-child(3) { color: #909090; } >a { font-size: 13px; color: #909090; &:hover { text-decoration: underline; } } }//end of dd }//end of dl }//end of li }//end of ul }//end of address >.f_nav { float: right; margin-top: 0px; width: 200px; //background-color: blue; >ul { >li { float: left; margin-right: 9px; padding-right: 11px; background-image: url(../images/f_right.png); background-repeat: no-repeat; background-position: 100% 73%; &:last-child { margin-right: none; background-image: none; } >a { font-size: 13px; color: #fff; } } } } >.copyright { position: absolute; top: 120px; right: -140px; transform: translateX(-50%); width: 315px; font-size: 13px; letter-spacing: 1px; color: #fff; }//end of copyright &:after { position: absolute; top: 30px; left: 180px; transform: translateX(-50%); width: 1px; height: 120px; background-color: #fff; content: ''; }//end of inner:after }//end of inner }//end of footer @media screen and(max-width : 768px) {/*footer 768px 반응형*/ footer { width: 100%; height: auto; background-color: #333; >.inner { //background-color: pink; position: relative; padding-top: 20px; >h1 { float: inherit; //margin-left: 0px;제거 margin: 0 auto 180px;//추가 width: 120px; height: 40px; text-indent: -99999px; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }//end of h1 >.f_left { float: inherit; // margin-left: 50px; margin: 0 auto; width: 100%;//추가 //background-color: pink; >ul { width: 100%;//변경 //background-color: red; > li { width: 100%;//변경 //background-color: pink; //text-align: center; &:nth-child(1) dl dt { // background-image: url(../images/f_icon_mail.png); } &:nth-child(2) dl dt { //background-image: url(../images/f_icon_tel.png); } &:nth-child(3) dl dt { //background-image: url(../images/f_icon_location.png); } >dl { >dt { display: none; margin: 0 auto; width: 100%; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }//end of dt >dd { padding-left: 20px;//추가 text-align: left;//변경 margin-top: 8px; font-size: 16px;//변경 font-weight: 500; line-height: 1.2em; color: #fff; >em { color: #909090; } &:nth-child(2) { font-weight: 700; } &:nth-child(3) { color: #909090; } >a { font-size: 13px; color: #909090; &:hover { text-decoration: none;//변경 } } }//end of dd }//end of dl }//end of li }//end of ul }//end of f_left >address { border-top: 1px solid #666; float: inherit;//변경 // margin-top: 0px; // margin-left: 30px; margin: 10px 0; width: 100%;//변경 //background-color: green; >ul { width: 100%; // background-color: red; > li { width: 100%; //background-color: pink; text-align: center; &:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } &:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } &:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } >dl { >dt { display: none; }//end of dt >dd { padding-left: 25px;//변경 text-align: left;//변경 margin-top: 6px;//변경 font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; &:nth-child(2) { font-weight: 700; } &:nth-child(3) { color: #909090; } >a { font-size: 13px; color: #909090; >span { display: block; >span { display: block; } } &:hover { text-decoration: underline; } } }//end of dd }//end of dl }//end of li }//end of ul }//end of address >.f_nav { position: absolute; top: 75px; float: inherit;//변경 margin-top: 0px; width: 100%;//변경 //background-color: blue; >ul { >li { width: 100%;//추가 text-align: center;//추가 float: inherit;//변경 margin-right: 0px;//변경 padding-right: 0px;//변경 background-image: none;//변경 background-repeat: no-repeat; background-position: 100% 73%; border-top: 1px solid #666; &:last-child { margin-right: none; background-image: none; border-bottom: 1px solid #666; } >a { display: block; height: 50px; line-height: 50px; font-size: 16px; color: #fff; //background-color: orange; } } } } >.copyright { border-top: 1px solid #666 ;//추가 position: static; padding: 20px 0; top: 10px;//변경 right: 50%;//변경 transform: translateX(0); width: 100%; font-size: 13px; letter-spacing: 1px; text-align: center; color: #fff; //background-color: green; }//end of copyright &:after { display: none; }//end of inner:after 하단 1자 선(상호) }//end of inner }//end of footer }//footer 768px 반응형