.subBanner { width: 100%; height: 200px; background: url(../images/RND_b.jpg); background-repeat: no-repeat; background-size: cover; background-position: 100% 60%; } .active_fixBtn { overflow: hidden; width: 38px !important; height: 28px !important; background-color: #0061a9 !important; } .trn_anc { transform: rotate(90deg) !important; } .fixMenu { display: none; position: fixed; right: 10px; top: 50%; width: 315px; height: 160px; background-color: rgba(0, 0, 0, 0.4); transition: 0.3s; } .fixMenu > p { cursor: pointer; float: right; margin-right: 5px; padding-top: 10px; width: 30px; height: 20px; transform: rotate(-90deg); background-image: url(../images/anchor.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 50%; transition: 0.2s; } .fixMenu > p:hover { background-position: 50% 100%; } .fixMenu > ul { margin-top: 7px; } .fixMenu > ul > li { overflow: hidden; position: relative; width: 100%; margin-top: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .fixMenu > ul > li:last-child { border-bottom: none; } .fixMenu > ul > li > a { display: block; width: 100%; height: 30px; line-height: 30px; font-size: 13px; padding-left: 25px; color: #fff; transition: 0.2s; } .fixMenu > ul > li > a:hover { background-color: #0061a9; } .fixMenu > ul > li > a:after { position: absolute; top: 0px; left: 10px; width: 30px; height: 30px; transform: translateX(-50%) rotate(-90deg); background-image: url(../images/anchor.png); background-size: 50%; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 30px; display: block; height: 30px; content: ''; } .rndContainer { width: 100%; } .rndContainer > p { display: none; } .rndContainer > ol { display: none; } .rndContainer > ul { width: 1200px; margin: 0px auto; } .rndContainer > ul > li { text-align: center; } .rndContainer > ul > li:nth-child(1) { position: relative; width: 1200px; margin: 80px auto 0; text-align: center; font-size: 50px; font-weight: 600; color: #000; text-transform: uppercase; } .rndContainer > ul > li:nth-child(1):after { position: absolute; bottom: -25px; left: 50%; width: 100px; margin-left: -50px; height: 5px; background-color: #000; content: ""; } .rndContainer > ul > li:nth-child(2) { padding-top: 40px; font-size: 20px; line-height: 2.5em; } .rndContainer > .rndWrapper { height: 1000px; } .rndContainer > .rndWrapper > div { position: relative; width: 100%; height: 800px; background-repeat: no-repeat; background-size: cover; } .rndContainer > .rndWrapper > div > ul { position: relative; width: 1200px; margin: 50px auto 0; } .rndContainer > .rndWrapper > div > ul > li { float: left; } .rndContainer > .rndWrapper > div > ul > li:first-child { overflow: hidden; margin-right: 30px; width: 570px; height: 400px; background-position: 50% 50%; background-repeat: no-repeat; } .rndContainer > .rndWrapper > div > ul > li:first-child > img { width: 100%; height: 100%; } .rndContainer > .rndWrapper > div > ul > li:first-child > video { width: 100%; height: 100%; background-color: #000; } .rndContainer > .rndWrapper > div > ul > li:last-child { width: 600px; height: 400px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl { position: relative; padding-top: 20px; color: #fff; z-index: 0; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl:after { position: absolute; top: 0px; left: -15px; width: 620px; height: 400px; background-color: rgba(0, 0, 0, 0.7); content: ''; z-index: -1; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dt { margin-top: 20px; font-weight: 600; font-size: 23px; z-index: 1; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd { margin: 20px 0 40px; line-height: 1.3em; font-size: 16px; letter-spacing: 1px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li { margin-right: 20px; width: 180px; float: left; height: 120px; box-sizing: border-box; cursor: pointer; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li:first-child { border: 3px solid orange; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li > img { width: 100%; height: 100%; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li > video { cursor: pointer; width: 100%; height: 100%; } .rndContainer > .rndWrapper > div > .rndInfo { width: 1200px; height: 450px; margin: 50px auto 0; background-color: rgba(0, 0, 0, 0.7); overflow-y: scroll; } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar { width: 8px; height: 8px; border: 1px solid #fff; } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar-track { background: #efefef; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll { width: 100%; height: auto; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul { padding: 30px 20px; font-size: 16px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul:first-child { padding-top: 50px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > li { color: #fff; line-height: 1.7em; margin-bottom: 20px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceTitle { margin-bottom: 10px; font-size: 21px; font-weight: 600; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceImg > span { width: 1000px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceImg > span > img { width: 80%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle { width: 1150px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl { margin-right: 30px; width: 350px; float: left; padding-top: 30px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl > dd > img { width: 90%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl > dd:last-child { height: 50px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceChart > dl { margin-top: 10px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceChart > dl > dt { font-weight: 600; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceChart > dl > dd { padding-left: 25px; } .rndContainer > .rndWrapper > .deepLearning { height: 100%; background-image: url(../images/car1_w.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .rndContainer > .rndWrapper > .lunarSystem { height: 100%; background-image: url(../images/moon_w.jpg); background-size: cover; background-position: 50% 30%; } .rndContainer > .rndWrapper > .LiquefactionModule { height: 100%; background-image: url(../images/disaster_w.jpg); background-position: 50% 60%; background-size: cover; } .rndContainer > .rndWrapper > .koreaRoadSign { height: 100%; background-image: url(../images/road_w.jpg); background-position: 50% 30%; } .rndContainer > .rndWrapper > .koreaRoadSign > ul > li:nth-child(2) > dl > dd > a { color: orange; font-weight: 600; } .rndContainer > .rndWrapper > .koreaRoadSign:after { display: none; } @keyframes anchor { from { bottom: 50px; } to { bottom: 15px; } } @media screen and (max-width: 768px) { .subBanner { width: 100%; height: 250px; background: url(../images/RND_m.png); background-repeat: no-repeat; background-size: cover; background-position: 100% 50%; } .fixMenu { display: none; position: fixed; right: 10px; top: inherit; bottom: 50%; width: 315px; height: 160px; background-color: rgba(0, 0, 0, 0.4); transition: 0.3s; } .fixMenu > p { cursor: pointer; float: right; margin-right: 5px; padding-top: 10px; width: 30px; height: 20px; transform: rotate(-90deg); background-image: url(../images/anchor.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 50%; transition: 0.2s; } .fixMenu > p:hover { background-position: 50% 100%; } .fixMenu > ul { margin-top: 7px; } .fixMenu > ul > li { overflow: hidden; position: relative; width: 100%; margin-top: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .fixMenu > ul > li:last-child { border-bottom: none; } .fixMenu > ul > li > a { display: block; width: 100%; height: 30px; line-height: 30px; font-size: 13px; padding-left: 25px; color: #fff; transition: 0.2s; } .fixMenu > ul > li > a:hover { background-color: #0061a9; } .fixMenu > ul > li > a:after { position: absolute; top: 0px; left: 10px; width: 30px; height: 30px; transform: translateX(-50%) rotate(-90deg); background-image: url(../images/anchor.png); background-size: 50%; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 30px; display: block; height: 30px; content: ''; } .rndContainer { position: relative; height: auto; } .rndContainer > p { display: block; } .rndContainer > ol { display: block; } .rndContainer > p { position: absolute; top: 15px; right: 30px; z-index: 9999; } .rndContainer > p > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .rndContainer > ol { position: absolute; top: 15px; right: 20px; z-index: 9999; } .rndContainer > ol > li { float: left; } .rndContainer > ol > li > a { padding: 10px; text-align: center; font-size: 30px; font-weight: 900; color: #333; background-color: #ddd; } .rndContainer > ul { width: 100%; margin: 100px auto; } .rndContainer > ul > li { text-align: center; } .rndContainer > ul > li:nth-child(1) { position: relative; width: 100%; margin: 80px auto 0; text-align: center; font-size: 30px; font-weight: 600; color: #000; text-transform: uppercase; } .rndContainer > ul > li:nth-child(1):after { position: absolute; bottom: -25px; left: 50%; width: 100px; margin-left: -50px; height: 3px; background-color: #000; content: ""; } .rndContainer > ul > li:nth-child(2) { padding-top: inherit; padding: 40px 20px; font-size: 14px; line-height: 2.5em; } .rndContainer > .rndWrapper { height: 1200px; } .rndContainer > .rndWrapper > div { position: relative; height: 1200px; width: 100%; background-repeat: no-repeat; background-size: cover; } .rndContainer > .rndWrapper > div:after { display: none; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background: url(../images/anchor.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; content: ''; animation-name: anchor; animation-duration: 1s; animation-iteration-count: infinite; } .rndContainer > .rndWrapper > div > ul { position: relative; width: 100%; margin: 100px auto 0; } .rndContainer > .rndWrapper > div > ul > li { float: inherit; text-align: center; } .rndContainer > .rndWrapper > div > ul > li:first-child { overflow: hidden; padding-top: 300px; margin-right: 30px; width: 100%; height: 400px; background-position: 50% 50%; background-repeat: no-repeat; } .rndContainer > .rndWrapper > div > ul > li:first-child > img { width: 100%; height: 70%; } .rndContainer > .rndWrapper > div > ul > li:first-child > video { width: 100%; height: 70%; } .rndContainer > .rndWrapper > div > ul > li:last-child { position: absolute; top: -70px; width: 100%; height: 400px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl { position: relative; padding-top: 20px; color: #fff; z-index: 0; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl:after { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 100%; height: 110%; background-color: rgba(0, 0, 0, 0.7); content: ''; z-index: -1; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dt { margin-top: 20px; font-weight: 600; font-size: 19px; z-index: 1; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd { margin: 20px 0 40px; line-height: 1.9em; font-size: 14px; letter-spacing: 1px; text-align: left; padding: 0 20px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd:last-child { position: absolute; bottom: -150px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li { cursor: pointer; margin-left: 0px; margin-right: 0px; width: 33.333333%; float: left; height: 80px; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li > img { width: 100%; height: 100%; } .rndContainer > .rndWrapper > div > ul > li:last-child > dl > dd > ul > li > video { width: 100%; height: 100%; } .rndContainer > .rndWrapper > div > .rndInfo { width: 100%; height: 410px; margin: -80px auto 0; background-color: rgba(0, 0, 0, 0.7); overflow-y: scroll; } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar { width: 8px; height: 8px; border: 1px solid #fff; } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar-track { background: #efefef; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); } .rndContainer > .rndWrapper > div > .rndInfo::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll { width: 100%; height: auto; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul { padding: 50px 20px; font-size: 16px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > li { color: #fff; line-height: 1.7em; font-size: 14px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceTitle { font-size: 17px; font-weight: 600; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceImg > span { width: 100%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceImg > span > img { width: 100%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle { width: 100%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl { margin-right: 30px; width: 350px; float: left; padding-top: 30px; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl > dd > img { width: 90%; } .rndContainer > .rndWrapper > div > .rndInfo > .innerScroll > ul > .techIntroduceHandle > dl > dd:last-child { line-height: 1.2em; } .rndContainer > .rndWrapper > .deepLearning { background: #555; background-position: 50% 30%; } .rndContainer > .rndWrapper > .deepLearning > ul > li:last-child > dl > dd:last-child { bottom: -170px; } .rndContainer > .rndWrapper > .deepLearning > ul > li:last-child > dl > dd:last-child > ul li { height: 100px; } .rndContainer > .rndWrapper > .deepLearning > ul > li:last-child > dl > dd:last-child > ul li > img { height: 100px; } .rndContainer > .rndWrapper > .lunarSystem { background-image: url(../images/moon.jpg); background-position: 50% 30%; } .rndContainer > .rndWrapper > .LiquefactionModule { background-image: url(../images/module.jpg); background-position: 50% 90%; background-size: cover; } .rndContainer > .rndWrapper > .LiquefactionModule > ul > li:nth-child(1) { padding-top: 340px; } .rndContainer > .rndWrapper > .koreaRoadSign { background-image: url(../images/road.jpg); background-position: 50% 30%; } .rndContainer > .rndWrapper > .koreaRoadSign > ul > li:nth-child(1) { padding-top: 370px; } .rndContainer > .rndWrapper > .koreaRoadSign:after { display: none; } } /*# sourceMappingURL=rnd.css.map */