@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; height: 750px; 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_09.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_08.png); background-position: 50% 50%; } } #research { width: 100%; height: 3500px; margin-bottom: 0 auto; background-color: #fff; background-image: url(../images/bus_bg.jpg); background-repeat: repeat-Y; } #research .research { width: 100%; height: 400px; margin-bottom: 40px; background-color: #fff; } #research .research > .inner { height: 100px; padding-top: 130px; margin: 0 auto 130px; } #research .research > .inner > h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; } #research .research > .inner > h2:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #research .research > .inner p { text-align: center; font-size: 17px; letter-spacing: -1px; color: #999; line-height: 1.45em; } #research .inner > .rndSys { width: 100%; } #research .inner > .rndSys > .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; } #research .inner > .rndSys > ul > li { float: left; } #research .inner > .rndSys > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner > .rndSys > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner > .rndSys .rndSys_info { padding-top: 10px; line-height: 1.5em; color: #aaa; cursor: default; } #research .inner .strength { margin-top: 150px; width: 100%; } #research .inner .strength > .strength_box1 { float: left; width: 870px; height: 560px; } #research .inner .strength > .strength_box1 > ul { padding: 50px 0 0 30px; } #research .inner .strength > .strength_box1 > ul > li { float: left; } #research .inner .strength > .strength_box1 > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner .strength > .strength_box1 > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner .strength > .strength_box1 > .strength_top { margin-top: 50px; padding-left: 30px; width: 870px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li { float: left; width: 415px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li:first-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_01.png); } #research .inner .strength > .strength_box1 > .strength_top > ul > li:last-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_02.png); } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl { width: 100%; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt { width: 415px; height: 60px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li { float: left; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:first-child { /*아이콘의 공통 스타일*/ width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child { /*아이콘 옆 글자*/ } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl { padding-left: 15px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > dt { font-size: 17px; font-weight: 600; padding: 5px 0 10px 0; cursor: default; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > dd { font-size: 13px; font-weight: 500; cursor: default; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > .line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dd { padding: 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot { padding-left: 30px; width: 870px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li { float: left; width: 415px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li:first-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_03.png); } #research .inner .strength > .strength_box1 > .strength_bot > ul > li:last-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_04.png); } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl { width: 100%; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt { width: 415px; height: 60px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li { float: left; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:first-child { /*아이콘의 공통 스타일*/ width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child { /*아이콘 옆 글자*/ } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl { padding-left: 15px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > dt { font-size: 17px; font-weight: 600; padding: 5px 0 10px 0; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > dd { font-size: 13px; font-weight: 500; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > .line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dd { padding: 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; } #research .inner .strength > .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; } #research .inner > .rnd_schedule { width: 100%; margin-top: 150px; } #research .inner > .rnd_schedule > ul > li { float: left; } #research .inner > .rnd_schedule > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner > .rnd_schedule > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner > .rnd_schedule > .schedule_content { margin-top: 30px; } #research .inner > .rnd_schedule > .schedule_content > ul { width: 1000px; height: 70px; margin-bottom: 10px; } #research .inner > .rnd_schedule > .schedule_content > ul > li { float: left; } #research .inner > .rnd_schedule > .schedule_content > ul > li: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; } #research .inner > .rnd_schedule > .schedule_content > ul > li: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; } #research .inner > .rnd_schedule > .schedule_content > ul > li:last-child > em { opacity: 0; } #research .inner > .rnd_outside { width: 100%; margin-top: 150px; } #research .inner > .rnd_outside > ul > li { float: left; } #research .inner > .rnd_outside > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner > .rnd_outside > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner > .rnd_outside > ol { margin-top: 30px; width: 100%; } #research .inner > .rnd_outside > ol > li { float: left; width: 300px; height: 570px; background-repeat: no-repeat; background-size: cover; } #research .inner > .rnd_outside > ol > li:nth-child(1) { background-image: url(../images/thief.png); background-position: 24% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(2) { background-image: url(../images/lamp.jpg); background-position: 60% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(3) { background-image: url(../images/auto_btn.png); background-position: 50% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(4) { background-image: url(../images/hemet.jpg); background-position: 45% 50%; } #research .inner > .rnd_outside > ol > li > dl { opacity: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; cursor: default; } #research .inner > .rnd_outside > ol > li > dl > dt { position: relative; padding-top: 150px; font-size: 25px; } #research .inner > .rnd_outside > ol > li > dl > dt:after { position: absolute; top: 190px; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background-color: #fff; content: ''; } #research .inner > .rnd_outside > ol > li > dl > dd { padding: 30px 30px 0 30px; font-size: 14px; text-align: left; line-height: 1.6em; } /*연구개발 모바일버전*/ @media screen and (max-width: 768px) { #research { width: 100%; height: auto; margin-bottom: 0 auto; background-color: #fff; background-image: url(../images/bus_bg.jpg); background-repeat: repeat-Y; } #research .research { width: 100%; height: 400px; margin-bottom: 40px; background-color: #fff; } #research .research > .inner { height: 100px; padding-top: 130px; margin: 0 auto 130px; } #research .research > .inner > h2 { position: relative; text-align: center; font-size: 35px; font-weight: 600; margin-bottom: 50px; } #research .research > .inner > h2:after { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 4px; border: 3px dotted #ffc700; content: ''; } #research .research > .inner p { text-align: center; font-size: 17px; letter-spacing: -1px; color: #999; line-height: 1.45em; } #research .inner > .rndSys { width: 100%; } #research .inner > .rndSys > .camera { margin: 0 auto; width: 100%; height: 600px; background-image: url(../images/camera.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #research .inner > .rndSys > ul > li { float: inherit; } #research .inner > .rndSys > ul > li:first-child { font-size: 32px; font-weight: 600; padding: 0 10px 0 10px; } #research .inner > .rndSys > ul > li:last-child { display: none; font-size: 16px; padding-top: 5px; padding-left: 10px; padding-right: 10px; } #research .inner > .rndSys .rndSys_info { padding-top: 10px; padding: 10px; line-height: 1.5em; color: #aaa; cursor: default; } #research .inner .strength { margin-top: 150px; width: 100%; } #research .inner .strength > .strength_box1 { float: left; width: 870px; height: 560px; } #research .inner .strength > .strength_box1 > ul { padding: 50px 0 0 30px; } #research .inner .strength > .strength_box1 > ul > li { float: left; } #research .inner .strength > .strength_box1 > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner .strength > .strength_box1 > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner .strength > .strength_box1 > .strength_top { margin-top: 50px; padding-left: 30px; width: 870px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li { float: left; width: 415px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li:first-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_01.png); } #research .inner .strength > .strength_box1 > .strength_top > ul > li:last-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_02.png); } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl { width: 100%; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt { width: 415px; height: 60px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li { float: left; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:first-child { /*아이콘의 공통 스타일*/ width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child { /*아이콘 옆 글자*/ } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl { padding-left: 15px; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > dt { font-size: 17px; font-weight: 600; padding: 5px 0 10px 0; cursor: default; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > dd { font-size: 13px; font-weight: 500; cursor: default; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dt > ol > li:last-child > dl > .line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; } #research .inner .strength > .strength_box1 > .strength_top > ul > li > dl > dd { padding: 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot { padding-left: 30px; width: 870px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li { float: left; width: 415px; height: 200px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li:first-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_03.png); } #research .inner .strength > .strength_box1 > .strength_bot > ul > li:last-child > dl > dt > ol > li:first-child { background-image: url(../images/strength_04.png); } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl { width: 100%; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt { width: 415px; height: 60px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li { float: left; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:first-child { /*아이콘의 공통 스타일*/ width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child { /*아이콘 옆 글자*/ } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl { padding-left: 15px; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > dt { font-size: 17px; font-weight: 600; padding: 5px 0 10px 0; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > dd { font-size: 13px; font-weight: 500; cursor: default; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dt > ol > li:last-child > dl > .line { margin-top: 7px; width: 0px; height: 7px; background-color: orange; } #research .inner .strength > .strength_box1 > .strength_bot > ul > li > dl > dd { padding: 10px 0 0 65px; font-size: 15px; line-height: 1.45em; color: #d1d1d1; transition: .3s; cursor: default; } #research .inner .strength > .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; } #research .inner > .rnd_schedule { width: 100%; margin-top: 150px; } #research .inner > .rnd_schedule > ul > li { float: left; } #research .inner > .rnd_schedule > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner > .rnd_schedule > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner > .rnd_schedule > .schedule_content { margin-top: 30px; } #research .inner > .rnd_schedule > .schedule_content > ul { width: 1000px; height: 70px; margin-bottom: 10px; } #research .inner > .rnd_schedule > .schedule_content > ul > li { float: left; } #research .inner > .rnd_schedule > .schedule_content > ul > li: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; } #research .inner > .rnd_schedule > .schedule_content > ul > li: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; } #research .inner > .rnd_schedule > .schedule_content > ul > li:last-child > em { opacity: 0; } #research .inner > .rnd_outside { width: 100%; margin-top: 150px; } #research .inner > .rnd_outside > ul > li { float: left; } #research .inner > .rnd_outside > ul > li:first-child { font-size: 32px; font-weight: 600; } #research .inner > .rnd_outside > ul > li:last-child { font-size: 16px; padding-top: 15px; padding-left: 3px; } #research .inner > .rnd_outside > ol { margin-top: 30px; width: 100%; } #research .inner > .rnd_outside > ol > li { float: left; width: 300px; height: 570px; background-repeat: no-repeat; background-size: cover; } #research .inner > .rnd_outside > ol > li:nth-child(1) { background-image: url(../images/thief.png); background-position: 24% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(2) { background-image: url(../images/lamp.jpg); background-position: 60% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(3) { background-image: url(../images/auto_btn.png); background-position: 50% 50%; } #research .inner > .rnd_outside > ol > li:nth-child(4) { background-image: url(../images/hemet.jpg); background-position: 45% 50%; } #research .inner > .rnd_outside > ol > li > dl { opacity: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; cursor: default; } #research .inner > .rnd_outside > ol > li > dl > dt { position: relative; padding-top: 150px; font-size: 25px; } #research .inner > .rnd_outside > ol > li > dl > dt:after { position: absolute; top: 190px; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background-color: #fff; content: ''; } #research .inner > .rnd_outside > ol > li > dl > dd { padding: 30px 30px 0 30px; font-size: 14px; text-align: left; line-height: 1.6em; } } /*사업영역*/ #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 > iframe { float: right; margin-top: 50px; width: 540px; height: 430px; frameborder: 0; border: 0 allowfullscreen; } @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 > iframe { float: inherit; margin-top: 20px; width: 100%; height: 430px; frameborder: 0; border: 0 allowfullscreen; } } /*반응형*/ .pos_right { background-color: red; } .pos_right > dl > dt:after { left: 200px; } /*# sourceMappingURL=style_eng.css.map */