/* reset */ * { margin: 0; padding:0; font-family:'SCoreDream';} li { list-style:none; } a { text-decoration: none !important; color:inherit; } img { vertical-align: top; } ::selection {background:#f4470285; color:#fff;} ::-moz-selection{background:#f4470285; color:#fff} /* common */ html { overflow-x: hidden; } html.fix { overflow: hidden !important; } .wrap { width:94%; max-width:1200px; margin:0 auto; position: relative; } .wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; } .blind { width:0; height:0; font-size:0; overflow: hidden; } .fl { display: flex; align-items: center; justify-content: center; } .fl:after { display:none; } .dn { display:none !important; } .arr:after { content:""; width:10px; height:10px; display:inline-block; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-left:4px; } #w_header .snb { position: absolute; right: 30px; top:35px; font:18px SCoreDream; display:flex; align-items:center; justify-content:space-between; width: 160px; z-index: 8; } #w_header .snb { top:27px; } /* 기존 디자인 */ #w_header .snb .language { padding:8px 0; border-radius: 4px; background: #eee; position: absolute; left: -18px; top: 36px; color:#999; font:14px/30px SCoreDream; display: none; } #w_header .snb .language .select { color:#333; } #w_header .snb .language li a { display: block; padding:0 14px; transition:0.3s; } #w_header .snb .language li a:hover { background: #fcfcfc; } #w_header .snb .visit { transition:0.1s; } #w_header .snb img { height: 20px; transition:0.3s;} #nav_btn { cursor: pointer; } #nav_btn .line{ width: 30px; height: 2px; background-color: #fff; display: block; margin: 6px auto; transition: 0.3s; } #nav_btn.act .line:nth-child(2){ opacity: 0;} #nav_btn.act .line:nth-child(1){ transform: translateY(8px) rotate(45deg);} #nav_btn.act .line:nth-child(3){ transform: translateY(-8px) rotate(-45deg);} /*#w_header.fix.on #nav_btn .line, #w_header.down #nav_btn .line { background-color:#fff; }*/ #w_header #sitemap { position: fixed; left: 0; top: -101vh; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 5; backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s; } #w_header #sitemap > img { position: absolute; top:40px; left:calc(50% - 51px); } #w_header #sitemap.on { z-index: 5; opacity: 1; top:0;} #w_header #sitemap .gnb { width: 1200px; color:#fff !important; } #w_header #sitemap .gnb > li { border-bottom:1px solid #666; display:flex; align-items:center; justify-content:space-between; padding:24px 0; } #w_header #sitemap .gnb > li:last-child { border-bottom:none; } #w_header #sitemap .gnb > li > a { font:20px SCoreDream; } #w_header #sitemap .gnb ul { width: 800px; display:flex; align-items:center; justify-content:flex-start; } #w_header #sitemap .gnb ul li { width: 25%; font:20px SCoreDream; } #w_header #sitemap .gnb a { position: relative; display: inline-block; } #w_header #sitemap .gnb a:after { display: block; content:""; width: 0; height: 1px; background: #fff; transition: 0.3s; } #w_header #sitemap .gnb a:hover:after { width: 100%; } #w_header #sitemap.on + .snb { color:#fff !important; } /*#w_header #sitemap.on + .snb img { filter: invert(0); }*/ #w_header #sitemap.on + .snb #nav_btn span { background: #fff; } /* 기존 헤더 */ #w_header { height: 80px; position: fixed; width: 100%; z-index:99; overflow: hidden; transition: 0.3s; color:#fff; z-index: 100; background:rgba( 0, 0, 0, 0.5 );} #w_header .wrap { max-width: calc(100% - 120px);} #w_header h1 { position: absolute; left:30px; top: 13px; } /*#w_header .lang { position: absolute; right:168px; top:24px; font-size:32px; }*/ #w_header .bell { width: 160px; height: 32px; border:1px solid #fff; border-radius: 40px; position: absolute; right:0; top:25px; justify-content: space-evenly; } #w_header .bell .xi-bell { font-size:22px; } #w_header .bell span { font:16px SCoreDream; } #w_header .bell .xi-angle-right { font-weight: bold; } #w_header.fix { border-bottom:1px solid #ccc; color:#232323; background:#fff;} #w_header.down { height:310px; color:#232323; background:#fff; } #w_header.down:before { content:""; position: absolute; left: 0; width: 100%; top:80px; border-top:1px solid #ccc; } #w_header.down #w_gnb > li > a {color:#232323;} #w_header.down #w_gnb > li > ul > li > a:hover {color:#e71216;} #w_header.fix .bell, #w_header.down .bell { border-color:#000; } #w_header #w_gnb { display:flex; align-items: flex-start; justify-content: center; padding-top: 30px; margin-right: 80px; } #w_header #w_gnb > li { font:18px SCoreDream; text-align: center; position: relative; } #w_header #w_gnb > li:hover > a {border-bottom:3px solid #e71216;} #w_header #w_gnb > li > a { display: block; font-size:17px; padding-bottom:26px; font-weight : 500;} #w_header #w_gnb > li.select > a { color:#e71216; } #w_header #w_gnb > li:last-child ul { } #w_header #w_gnb ul { font-size:16px; color:#5A5A5A; line-height:30px; padding:15px 0; width: 100%; box-sizing: border-box; height: 200px; } #w_header #w_gnb ul > li {height:25px;} #w_header #w_gnb ul a { position: relative; display: inline-block; color:#232323; font-size:13px;} /*#w_header #w_gnb ul a:after { content:""; border-left:5px solid #e71216; display: block; width: 0; margin:-8px auto 0; transition:0.3s; }*/ #w_header #w_gnb ul a:hover:after { width: 100%; } #w_header #w_gnb > li:hover ul { padding-top:12px; } #w_footer { background: #000; padding:80px 0 0; font:bold 13px/1.6 SCoreDream; color:#999; } #w_footer .wrap { justify-content: space-between; padding-left: 190px; } #w_footer img { position: absolute; left: 0; } #w_footer address { font-style: normal; } #w_footer .fnb { display:flex; flex-direction: column; align-items: flex-end; } #w_footer .fnb ul li { float:left; } #w_footer .fnb ul li:before { content:"|"; margin:0 4px; } #w_footer .fnb ul li:first-child:before { display: none; } #w_footer .fnb select { width: 220px; height: 40px; border:2px solid #fff; border-radius:7px; color:#fff; font:13px SCoreDream; padding:0 10px; box-sizing: border-box; margin-top: 10px; outline:none; background: #000; appearance:none; } #w_footer .fnb i { color:#fff; position: absolute; right:15px; bottom:15px; } #w_footer .line { border-top:1px solid #333; padding:30px 0; margin-top:80px; text-align: center; } #w_footer .wrap, #main .wrap, #prd .wrap, #mng .wrap, #research .wrap, #media .wrap, #recruit .wrap { max-width: 1400px; } /* index */ #main { overflow: hidden; position: relative; } #main:before { content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index:1; } #main .yt { width:2400px; height:140vh; position: absolute; left:calc(50% - 1200px); top:calc(50% - 70vh); } #prd ul { display:flex; align-items: center; justify-content: space-between; margin:0 auto; } #prd ul li { width: 33.3333%; height: 100vh; transition:0.3s; position: relative; cursor: pointer; overflow: hidden; background: #000; top:0; } #prd ul li.select { width: 60%; } #prd ul.on li { width: 15%; } #prd ul.on li.select { width: 70%; } #prd ul li img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0); transition:0.3s; } #prd ul li a { position: absolute; bottom:100px; left: 0; width:100%; text-align: center; color:#fff; } #prd ul li a h2 { font:42px SCoreDream; transition:0.3s; font-weight:bold; } #prd ul li a i { border:1px solid #fff; border-radius: 100%; width: 70px; height: 70px; font-size:40px; display: inline-flex; margin-top: 20px; transition:0.3s; } #prd ul li:hover i { color:#e71216; } #prd ul li:hover i { border-color: #e71216; } #prd ul li:hover img { opacity: 0.5; } #mng { background:url(/images/bg_jisok.jpg) no-repeat center/cover; } #mng h2 { font:42px SCoreDream; color:#fff; padding-top: 80px; font-weight:bold;} #mng ul { justify-content: space-between; align-items: flex-start; padding: 60px 0 0 400px; } #mng ul li { width: 290px; height: 400px; border-radius: 20px; overflow: hidden; position: relative; top:0; } #mng ul li:nth-child(1) { background:url(/images/js1.jpg) no-repeat center/cover; } #mng ul li:nth-child(2) { background:url(/images/js2.jpg) no-repeat center/cover; } #mng ul li:nth-child(3) { background:url(/images/js3.jpg) no-repeat center/cover; } /*#mng ul li:nth-child(4) { background:url(/images/js4.jpg) no-repeat center/cover; }*/ #mng ul li:nth-child(2n) { margin-top: 200px; } #mng ul li:hover { transform: translateY(-20px); transition: 0.3s; } #mng ul li a { background: rgba(0,0,0,0.4); padding:30px 20px; box-sizing: border-box; display: block; height:100%; position: relative; transition:0.3s; color:#fff; } #mng ul li a div { justify-content: space-between; position: absolute; bottom:20px; left: 20px; width: calc(100% - 40px); } #mng ul li a div h3 { font:20px/1.2 SCoreDream; width:calc( 100% - 50px );} #mng ul li a div i { border:1px solid #fff; border-radius: 100%; width: 45px; height: 45px; font-size:30px; display: inline-flex; transition:0.3s; color:#fff; } #mng ul li a p { display: none; } #mng ul li a:hover { background:rgba(255,255,255,0.6); } #mng ul li a:hover div h3 { color:#000; } #mng ul li a:hover div i { color:#e71216; border-color:#e71216; } #research ul { display:flex; justify-content: space-between; } #research ul li { width: 50%; height: 100vh; transition:0.3s; position: relative; cursor: pointer; overflow: hidden; background: #000; top:0; } #research ul li.select { width: 60%; } #research ul.on li { width: 15%; } #research ul.on li.select { width: 70%; } #research ul li img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0); transition:0.3s; } #research ul li a { position: absolute; bottom:100px; left: calc(50% - 190px); width: 380px; color:#fff; } #research ul li a > .fl { justify-content: space-between; width: 300px; } #research ul li a h2 { font:42px SCoreDream; transition:0.3s; font-weight:bold; width:calc( 100% - 75px );} #research ul li a i { border:1px solid #fff; border-radius: 100%; width: 70px; height: 70px; font-size:40px; display: inline-flex; transition:0.3s; } #research ul li p { font:bold 16px/1.6 SCoreDream; margin-top: 30px; color:#fff;} #research ul li:hover i { color:#e71216; } #research ul li:hover i { border-color: #e71216; } #research ul li:hover img { opacity: 0.5; } /* #research { background:url(/images/bg_research.jpg) no-repeat center/cover; } #research .title { width: 300px; justify-content: space-between; } #research .title h3 { font:50px SCoreDream; color:#fff;} #research .title i { border:1px solid #e71216; border-radius: 100%; width: 70px; height: 70px; font-size:40px; display: inline-flex; color:#e71216; } #research p { font:bold 16px/1.6 SCoreDream; margin-top: 30px; color:#fff;} */ #media { background:url(/images/bg_media.jpg) no-repeat center/cover; } #media .wrap { justify-content: space-between; } #media .title { width: 300px; justify-content: space-between; } #media .title h3 { font:42px SCoreDream; color:#fff; font-weight:bold;} #media .title i { border:1px solid #e71216; border-radius: 100%; width: 70px; height: 70px; font-size:40px; display: inline-flex; color:#e71216; } #media p { font:bold 16px/1.6 SCoreDream; margin-top: 30px; color:#fff; padding-right:50px; } #media ul { justify-content: space-between; width: 900px; } #media ul li { width: 270px; height: 430px; } #media ul li a { background: #fff; border-radius: 20px; padding:30px 20px; box-sizing: border-box; display: block; height:100%; position: relative; transition:0.3s; } #media ul li a span { font:18px SCoreDream; color:#e71216; transition:0.3s; font-weight:bold; } #media ul li a div { justify-content: space-between; position: absolute; bottom:40px; left: 20px; width: calc(100% - 40px); } #media ul li a div h3 { font:20px/1.2 SCoreDream; } #media ul li a div i { border:1px solid #e71216; border-radius: 100%; width: 45px; height: 45px; font-size:30px; display: inline-flex; transition:0.3s; color:#e71216; } #media ul li a p { position: absolute; top:320px; left: 20px; width: calc(100% - 40px); font:bold 16px/1.6 SCoreDream; } #media ul li a:hover { background: #e71216; color:#fff; } #media ul li a:hover span { color:#fff; } #media ul li a:hover div i { color:#fff; border-color:#fff; } #recruit { background:url(/images/bg_recruit.jpg) no-repeat center/cover; } #recruit .wrap { justify-content: space-between; } #recruit .title { width: 300px; justify-content: space-between; } #recruit .title h3 { font:42px SCoreDream; color:#fff; font-weight:bold;} #recruit .title i {border:1px solid #e71216; border-radius: 100%; width: 70px; height: 70px; font-size:40px; display: inline-flex; color:#e71216;} #recruit p { font:bold 16px/1.6 SCoreDream; margin-top: 30px; color:#fff; } #recruit ul { justify-content: space-between; width: 900px; } #recruit ul li { width: 270px; height: 430px; } #recruit ul li a { background: #fff; border-radius: 20px; padding:30px 20px; box-sizing: border-box; display: block; height:100%; position: relative; transition:0.3s; } #recruit ul li a div { justify-content: space-between; position: absolute; bottom:40px; left: 20px; width: calc(100% - 40px); } #recruit ul li a div h3 { font:20px/1.2 SCoreDream; } #recruit ul li a div i { border:1px solid #e71216; border-radius: 100%; width: 45px; height: 45px; font-size:30px; display: inline-flex; transition:0.3s; color:#e71216; } #recruit ul li a p { position: absolute; top:320px; left: 20px; width: calc(100% - 40px); font:bold 16px/1.6 SCoreDream; } #recruit ul li a:hover { background: #e71216; color:#fff; } #recruit ul li a:hover span { color:#fff; } #recruit ul li a:hover div i { color:#fff; border-color:#fff; } .logos { overflow: hidden; } .logos div { width: 5190px; position: relative; left: 0; animation: 20s logo linear infinite; } .logos div img { float:left; } @keyframes logo { from { left: 0; } to { left: -2595px; } } /* sub */ .sv { height: 530px; position: relative; overflow: hidden; display:flex; align-items: center; justify-content: center; } .sv:after { content:""; display: block; height:100%; animation:sv 2s; position: absolute; left: 0; top: 0; width: 100%; } .sv h2 { color:#fff; font:53px SCoreDream; font-weight : 500; position: relative; z-index: 5; } #sv1:after { background:url(/images/bg_sub1.png) no-repeat center/cover; } #sv2:after { background:url(/_img/bg_sub2_3.png) no-repeat center/cover; } #sv2.sv2:after { background:url(/_img/bg_sub2_2_1.png) no-repeat center/cover; } #sv2.sv3:after { background:url(/images/bg_sub2_3.png) no-repeat center/cover; } #sv3_1:after { background:url(/images/bg_sub3.png) no-repeat center/cover; } #sv3_2:after { background:url(/images/bg_sub3_2.jpg) no-repeat center/cover; } #sv3_3:after { background:url(/images/bg_sub3_3.jpg) no-repeat center/cover; } #sv3_4:after { background:url(/_img/bg_sub3_4.png) no-repeat center/cover; } #sv4:after { background:url(/_img/bg_sub4_6.png) no-repeat center/cover; } #sv5:after { background:url(/images/bg_sub5.png) no-repeat center/cover; } #sv5_2:after { background:url(/images/bg_sub5_2.png) no-repeat center/cover; } #sv6:after { background:url(/images/bg_sub6.png) no-repeat center/cover; } #sv6.sv2:after { background:url(/images/bg_sub6_2.png) no-repeat center/cover; } #sv6.sv3:after { background:url(/images/bg_sub6_3.png) no-repeat center/cover; } #sv2, #sv3_1, #sv3_2, #sv3_3, #sv3_4, #sv4 { height: 100vh;} @keyframes sv { 0% { transform:scale(1.2); opacity: 0; } 100% { transform:scale(1); opacity: 1; } } .sm { border-bottom: 1px solid #ccc; text-align: center; background: #fff; } .sm_home {background:#e71216; height:50px; line-height:50px; padding:12px; display:inline-block;} .sm h2 { font-size:16px; cursor: pointer; padding:0 20px; text-align:left; color:#232323; width:280px; border-right:1px solid #ccc; height:50px; line-height:50px; background:url('/_img/loc_arrow.png') no-repeat 252px center;} .sm h3 { font-size:16px; cursor: pointer; padding:0 20px; text-align:left; color:#232323; width:370px; border-right:1px solid #ccc; height:50px; line-height:50px; background:url('/_img/loc_arrow.png') no-repeat 342px center;} .sm.fix { position: fixed; width: 100%; left: 0; top: 80px; z-index:99; } .sm .fl { justify-content: flex-start; color:#b3b4b2; text-align: center; height: 50px;} .sm .xi-home { font-size:28px; } .sm .xi-angle-right { margin:0 10px; font-size:16px;} .sm .fl div { min-width: 150px; position: relative; } .sm .fl div ul { position: absolute; width: 100%; background: #fff; top:50px; z-index: 5; display: none; } .sm.fix ~ .cont { padding-top: 150px; } .cont { padding:100px 0 150px; font:18px/1.6 SCoreDream; } .cont .title { font:28px/1.6 SCoreDream; color:#333; } .cont strong { font-family: SCoreDream; color:#333; display: block; } .title h2 { font:45px SCoreDream; font-weight : 500; text-align: center; } .title p { font:18px/1.5 SCoreDream; margin-top: 30px; text-align: center; } .redline:after { content:""; width: 50px; height: 3px; background: #e71216; display: block; margin: 60px auto 0; } .cp { color:#e71216; } /* sub1_1 */ #sub1_1 .cont2 { margin-top: 100px; align-items: stretch;} #sub1_1 .cont2 img { width: 50%; object-fit: cover; } #sub1_1 .cont2 div { width: 50%; padding-left: 40px; box-sizing: border-box; flex-direction: column; justify-content: space-between; align-items: flex-start; } #sub1_1 .cont2 div p {font:17px/1.7 SCoreDream;} #sub1_1 .cont2 div h3 { font:35px SCoreDream; opacity: 0.3; font-weight : 500;} /* sub1_2 */ #sub1_2 .cont2 { margin-top: 100px; } .cont2 .year { font:50px SCoreDream; float: left; } .cont2 .year li { margin-bottom: 30px; opacity: 0.4; transition:0.3s; cursor: pointer; } .cont2 .year li.select { opacity: 1; } .frame { float:right; width:600px; height: 480px; overflow: hidden; position: relative; } .frame .slide { position: absolute; top:0; transition:top 0.3s ease; } .history { position: relative; } .history h2 { font:24px SCoreDream; position: absolute; padding-top: 18px; } .history ul { padding-left: 100px; border-top:1px solid #000; padding-bottom: 80px; } .history ul li { margin-top: 20px; display:flex; align-items: flex-start; justify-content: flex-start; } .history ul li.blue, .history ul li.blue span { color:#0a00d6; } .history ul li strong {display: none; } .history ul li em { width: 100px; font:normal 18px/1.4 SCoreDream; } .history ul li span { font:normal 18px/1.4 SCoreDream; color:#666; width: 100%; word-break: keep-all; } /* sub1_3 */ #sub1_3 .wrap > img { width: 100%; margin-top: 60px; } #sub1_3 .cont2 { margin-top: 100px; } #sub1_3 .cont2 h2 { width: 460px; border-top:1px solid #e71216; float:left; font:20px SCoreDream; color:#333; padding-top:10px; } #sub1_3 .cont2 ul { width: 700px; border-top:1px solid #e71216; float:right; position: relative; } #sub1_3 .cont2 ul li { padding:14px 10px; display:flex; align-items: center; justify-content: space-between; border-bottom:1px solid #ddd; cursor: pointer; font-size:16px;} #sub1_3 .cont2 ul li.select { color:#e71216} #sub1_3 .cont2 ul li figure { position: absolute; left:-320px; top:10px; opacity: 0; cursor: default; transition:0.5s; box-shadow: 4px 4px 10px rgba(0,0,0,0.15);} #sub1_3 .cont2 ul li.select figure { opacity: 1; } #sub1_4 .cont2 { margin-top: 120px; } #sub1_4 .cont2 .left { float:left; width:580px; } #sub1_4 .cont2 .right { float:right; width:580px; margin-top: 164px;} #sub1_4 .cont2 ul { border-top:1px solid #e71216; border-bottom:1px solid #e71216; margin-bottom: 40px; } #sub1_4 .cont2 ul li { border-bottom:1px solid #eee; height:40px; line-height:40px; } #sub1_4 .cont2 ul li:last-child { border-bottom:none; } #sub1_4 .cont2 ul li.tit { font-family: SCoreDream; color:#e71216; } #sub1_4 .cont2 .left ul { width: 270px; } #sub1_4 .cont2 .right ul li { display:flex; position: relative; justify-content: space-between; align-items: center; } #sub1_4 .cont2 .right ul li a { height: 18px; margin-right:30px; } #sub1_4 .cont2 .right ul .arr:after { border-color:#999; transform: rotate(135deg); position: absolute; right:2px; top:13px; } /* sub2_1 */ #sub2_1 .cont2 { margin-top: 60px; } /* #sub2_1 .cont2 { margin-top: 30px; } #sub2_1 .cont2 ul li { width: 48.5%; margin:0 3% 3% 0; } #sub2_1 .cont2 ul li:nth-child(2n) { margin-right: 0; } #sub2_1 .cont2 ul li dt { font-size:18px; padding-top: 20px; } #sub2_1 .cont2 ul li dd { font-size:14px SCoreDream; } #sub2_1 .cont2 ul li figure { height: 140px; } */ /* sub2_1_1 */ .bprd ul { justify-content: space-between; } .bprd ul li:after { content:""; display: block; border-top:2px solid #e9383b; opacity: 0; } .bprd ul li.select:after { opacity: 1; } .bprd ul li a { padding:0 5px; font:16px/46px SCoreDream; opacity: 0.6; } .bprd ul li.select a { opacity: 1; } .bprd ul li a:hover { color:#e71216; opacity: 1; } .bprdList .cont1 h2 { font:50px SCoreDream; text-align: center; } .bprdList .cont1 p { font:18px/1.6 SCoreDream; margin-top: 30px; text-align: center; } .bprdList .cont2 { border-top:1px solid #000; border-bottom:1px solid #000; padding:14px 0; justify-content: space-between; align-items: stretch; margin-top: 60px; } .bprdList .cont2 > figure { padding:15px 0; width: 60%; position: relative; } .bprdList .cont2 > figure img { max-width: 90%; } .bprdList .cont2 > figure p { font:16px SCoreDream; border:1px solid #000; background: #fff; display:flex; align-items: center; justify-content: center; border-radius: 50px; width: 16px; height: 16px; position: absolute; cursor: pointer; } .bprdList .cont2 > figure p span { display: none; white-space: nowrap; position: absolute; left: 20px; } .bprdList .cont2 > figure p.select { background: none; color:#fff; border-color:#fff; z-index:1; } .bprdList .cont2 > figure p.select span { display: block; font-size:17px; text-shadow: 0 0 4px #f00, 0 0 4px #f00, 0 0 4px #f00; } .bprdList .cont2 > figure p.select:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #e9383b; animation: circle 1s infinite; border-radius: 100%; } @keyframes circle { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .bprdList .cont2 ul { width:40%; background: #f3f3f3; } .bprdList .cont2 ul li { display: none; } .bprdList .cont2 ul li.select { display: block; } .bprdList .cont2 ul li figure { padding:20px 10%; border:3px solid #e71216; background-color: #fff;} .bprdList .cont2 ul li figure img { max-width: 100%; max-height:100%; } .bprdList .cont2 ul li div { height: 270px; font:16px/1.6 SCoreDream; padding:3% 3% 5%; border-top:none; background-color: #E2F0D9;} .bprdList .cont2 ul li div p { font:18px SCoreDream; margin-bottom: 10px; } .bprdList .cont3 { margin-top: 200px; } .bprdList .cont3 ul li { float:left; width: 190px; background: #f3f3f3; margin-right:12px; margin-bottom: 12px; overflow: hidden; border-radius:10px;} .bprdList .cont3 ul li:nth-child(6n) { margin-right: 0; } .bprdList .cont3 ul li.select { box-shadow: 0 0 0 3px #e9383b inset;} .bprdList .cont3 ul li figure { height: 150px; position: relative; } .bprdList .cont3 ul li img { max-width: 80%; max-height:80%; } .bprdList .cont3 div { display: none; } .bprdList .cont3 ul li.full img { max-width: 110%; width:110%; height:110%; max-height: 110%; object-fit: cover; } #sub2_1_1 .cont2 > figure p:nth-of-type(1) { left:28%; top:47%; } #sub2_1_1 .cont2 > figure p:nth-of-type(2) { left:41%; top:46%; } #sub2_1_1 .cont2 > figure p:nth-of-type(3) { left:48%; top:47%; } #sub2_1_1 .cont2 > figure p:nth-of-type(4) { left:22%; top:61%; } #sub2_1_1 .cont2 > figure p:nth-of-type(5) { left:52%; top:57%; } #sub2_1_1 .cont2 > figure p:nth-of-type(6) { left:60%; top:60%; } #sub2_1_1 .cont2 > figure p:nth-of-type(7) { left:30%; top:64%; } #sub2_1_1 .cont2 > figure p:nth-of-type(8) { left:38%; top:63%; } #sub2_1_1 .cont2 > figure p:nth-of-type(9) { left:33%; top:46%; } #sub2_1_1 .cont2 > figure p:nth-of-type(10) { left:23%; top:48%; } #sub2_1_1 .cont2 > figure p:nth-of-type(11) { left:45%; top:63%; } #sub2_1_1 .cont2 > figure p:nth-of-type(12) { left:54%; top:63%; } #sub2_1_1 .cont2 > figure p:nth-of-type(1) span {left:-247%;} #sub2_1_1 .cont2 > figure p:nth-of-type(2) span {left:-220%;} #sub2_1_1 .cont2 > figure p:nth-of-type(3) span {left:-155%;} #sub2_1_1 .cont2 > figure p:nth-of-type(4) span {left:-310%;} #sub2_1_1 .cont2 > figure p:nth-of-type(5) span {left:-165%;} #sub2_1_1 .cont2 > figure p:nth-of-type(6) span {left:-242%;} #sub2_1_1 .cont2 > figure p:nth-of-type(8) span {left:-250%;} #sub2_1_1 .cont2 > figure p:nth-of-type(9) span {left:-180%;} #sub2_1_1 .cont2 > figure p:nth-of-type(10) span {left:-130%;} #sub2_1_1 .cont2 > figure p:nth-of-type(11) span {left:-255%;} /* sub2_1_2 */ #sub2_1_2 .cont2 > figure p:nth-of-type(1) { left:49%; top:41%; } #sub2_1_2 .cont2 > figure p:nth-of-type(2) { left:35%; top:60%; } #sub2_1_2 .cont2 > figure p:nth-of-type(3) { left:61%; top:53%; } #sub2_1_2 .cont2 > figure p:nth-of-type(4) { left:28%; top:37%; } #sub2_1_2 .cont2 > figure p:nth-of-type(5) { left:26%; top:60%; } #sub2_1_2 .cont2 > figure p:nth-of-type(6) { left:49%; top:59%; } #sub2_1_2 .cont2 > figure p:nth-of-type(7) { left:61%; top:67%; } #sub2_1_2 .cont2 > figure p:nth-of-type(8) { left:35%; top:48%; } #sub2_1_2 .cont2 > figure p:nth-of-type(9) { left:28%; top:38%; } #sub2_1_2 .cont2 > figure p:nth-of-type(1) span {left:-335%;} #sub2_1_2 .cont2 > figure p:nth-of-type(2) span {left:-193%;} #sub2_1_2 .cont2 > figure p:nth-of-type(3) span {left:-335%;} #sub2_1_2 .cont2 > figure p:nth-of-type(4) span {left:-145%;} #sub2_1_2 .cont2 > figure p:nth-of-type(5) span {left:-124%;} #sub2_1_2 .cont2 > figure p:nth-of-type(6) span {left:-193%;} #sub2_1_2 .cont2 > figure p:nth-of-type(7) span {left:-306%;} #sub2_1_2 .cont2 > figure p:nth-of-type(8) span {left:-205%;} /* sub2_1_3 */ #sub2_1_3 .cont2 > figure p:nth-of-type(1) { left:21%; top:51%; } #sub2_1_3 .cont2 > figure p:nth-of-type(2) { left:33%; top:55%; } #sub2_1_3 .cont2 > figure p:nth-of-type(3) { left:31%; top:30%; } #sub2_1_3 .cont2 > figure p:nth-of-type(4) { left:47%; top:51%; } #sub2_1_3 .cont2 > figure p:nth-of-type(5) { left:63%; top:36%; } #sub2_1_3 .cont2 > figure p:nth-of-type(6) { left:62%; top:57%; } #sub2_1_3 .cont2 > figure p:nth-of-type(7) { left:53%; top:32%; } #sub2_1_3 .cont2 > figure p:nth-of-type(8) { left:42%; top:32%; } #sub2_1_3 .cont2 > figure p:nth-of-type(1) span {left:-186%;} #sub2_1_3 .cont2 > figure p:nth-of-type(2) span {left:-186%;} #sub2_1_3 .cont2 > figure p:nth-of-type(3) span {left:-185%;} #sub2_1_3 .cont2 > figure p:nth-of-type(4) span {left:-257%;} #sub2_1_3 .cont2 > figure p:nth-of-type(5) span {left:-171%;} #sub2_1_3 .cont2 > figure p:nth-of-type(6) span {left:-215%;} #sub2_1_3 .cont2 > figure p:nth-of-type(7) span {left:-148%;} #sub2_1_3 .cont2 > figure p:nth-of-type(8) span {left:-307%;} /* sub2_1_4 */ #sub2_1_4 .cont2 > figure p:nth-of-type(1) { left:60%; top:51%; } #sub2_1_4 .cont2 > figure p:nth-of-type(2) { left:49%; top:58%; } #sub2_1_4 .cont2 > figure p:nth-of-type(3) { left:79%; top:61%; } #sub2_1_4 .cont2 > figure p:nth-of-type(4) { left:73%; top:41%; } #sub2_1_4 .cont2 > figure p:nth-of-type(5) { left:65%; top:40%; } #sub2_1_4 .cont2 > figure p:nth-of-type(6) { left:49%; top:45%; } #sub2_1_4 .cont2 > figure p:nth-of-type(7) { left:69%; top:63%; } #sub2_1_4 .cont2 > figure p:nth-of-type(1) span {left:-237%;} #sub2_1_4 .cont2 > figure p:nth-of-type(2) span {left:-237%;} #sub2_1_4 .cont2 > figure p:nth-of-type(3) span {left:-203%; top:-50px;} #sub2_1_4 .cont2 > figure p:nth-of-type(4) span {left:-171%; top:-50px;} #sub2_1_4 .cont2 > figure p:nth-of-type(5) span {left:-139%;} #sub2_1_4 .cont2 > figure p:nth-of-type(6) span {left:-215%;} #sub2_1_4 .cont2 > figure p:nth-of-type(7) span {left:-236%;} /* sub2_1_5 */ #sub2_1_5 .cont2 > figure p:nth-of-type(1) { left:20%; top:42%; } #sub2_1_5 .cont2 > figure p:nth-of-type(2) { left:50%; top:47%; } #sub2_1_5 .cont2 > figure p:nth-of-type(3) { left:44%; top:48%; } #sub2_1_5 .cont2 > figure p:nth-of-type(4) { left:33%; top:40%; } #sub2_1_5 .cont2 > figure p:nth-of-type(5) { left:59%; top:45%; } #sub2_1_5 .cont2 > figure p:nth-of-type(6) { left:77%; top:48%; } #sub2_1_5 .cont2 > figure p:nth-of-type(7) { left:61%; top:68%; } #sub2_1_5 .cont2 > figure p:nth-of-type(8) { left:68%; top:55%; } #sub2_1_5 .cont2 > figure p:nth-of-type(9) { left:72%; top:45%; } #sub2_1_5 .cont2 > figure p:nth-of-type(10) { left:63%; top:31%; } #sub2_1_5 .cont2 > figure p:nth-of-type(1) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(2) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(3) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(4) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(5) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(6) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(7) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(8) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(9) span {left:-245%;} #sub2_1_5 .cont2 > figure p:nth-of-type(10) span {left:-245%;} /* sub2_1_6 */ #sub2_1_6 .cont2 > figure p:nth-of-type(1) { left:41%; top:65%; } #sub2_1_6 .cont2 > figure p:nth-of-type(2) { left:69%; top:65%; } #sub2_1_6 .cont2 > figure p:nth-of-type(3) { left:74%; top:39%; } #sub2_1_6 .cont2 > figure p:nth-of-type(1) span {left:-115%;} #sub2_1_6 .cont2 > figure p:nth-of-type(2) span {left:-224%;} #sub2_1_6 .cont2 > figure p:nth-of-type(3) span {left:-224%;} /* sub2_1_7 */ #sub2_1_7 .cont2 > figure p:nth-of-type(1) { left:73%; top:45%; } #sub2_1_7 .cont2 > figure p:nth-of-type(2) { left:35%; top:57%; } #sub2_1_7 .cont2 > figure p:nth-of-type(1) span {left:-256%;} #sub2_1_7 .cont2 > figure p:nth-of-type(2) span {left:-279%;} /* sub2_1_8 */ #sub2_1_8 .cont2 > figure p:nth-of-type(1) { left:53%; top:55%; } #sub2_1_8 .cont2 > figure p:nth-of-type(2) { left:59%; top:39%; } #sub2_1_8 .cont2 > figure p:nth-of-type(3) { left:64%; top:48%; } #sub2_1_8 .cont2 > figure p:nth-of-type(4) { left:39%; top:53%; } #sub2_1_8 .cont2 > figure p:nth-of-type(5) { left:32%; top:53%; } #sub2_1_8 .cont2 > figure p:nth-of-type(6) { left:46%; top:40%; } #sub2_1_8 .cont2 > figure p:nth-of-type(7) { left:42%; top:33%; } #sub2_1_8 .cont2 > figure p:nth-of-type(8) { left:28%; top:35%; } #sub2_1_8 .cont2 > figure p:nth-of-type(9) { left:35%; top:29%; } #sub2_1_8 .cont2 > figure p:nth-of-type(10) { left:21%; top:40%; } #sub2_1_8 .cont2 > figure p:nth-of-type(11) { left:24%; top:51%; } #sub2_1_8 .cont2 > figure p:nth-of-type(12) { left:47%; top:60%; } #sub2_1_8 .cont2 > figure p:nth-of-type(1) span {left:-173%;} #sub2_1_8 .cont2 > figure p:nth-of-type(2) span {left:-318%;} #sub2_1_8 .cont2 > figure p:nth-of-type(3) span {left:-318%;} #sub2_1_8 .cont2 > figure p:nth-of-type(11) span {left:-325%;} #sub2_1_8 .cont2 > figure p:nth-of-type(12) span {left:-173%;} /* sub2_1_9 */ #sub2_1_9 .cont2 > figure p:nth-of-type(1) { left:50%; top:46%; } #sub2_1_9 .cont2 > figure p:nth-of-type(2) { left:67%; top:46%; } #sub2_1_9 .cont2 > figure p:nth-of-type(1) span {left:-277%;} #sub2_1_9 .cont2 > figure p:nth-of-type(2) span {left:-69%;} /* sub2_1_10 */ #sub2_1_10 .cont2 > figure p:nth-of-type(1) { left:76%; top:53%; } #sub2_1_10 .cont2 > figure p:nth-of-type(2) { left:41%; top:31%; } #sub2_1_10 .cont2 > figure p:nth-of-type(3) { left:64%; top:60%; } #sub2_1_10 .cont2 > figure p:nth-of-type(4) { left:66%; top:44%; } #sub2_1_10 .cont2 > figure p:nth-of-type(5) { left:42%; top:58%; } #sub2_1_10 .cont2 > figure p:nth-of-type(6) { left:53%; top:65%; } #sub2_1_10 .cont2 > figure p:nth-of-type(7) { left:35%; top:67%; } #sub2_1_10 .cont2 > figure p:nth-of-type(8) { left:24%; top:45%; } #sub2_1_10 .cont2 > figure p:nth-of-type(9) { left:54%; top:38%; } #sub2_1_10 .cont2 > figure p:nth-of-type(10) { left:31%; top:41%; } #sub2_1_10 .cont2 > figure p:nth-of-type(1) span {left:-253%;} #sub2_1_10 .cont2 > figure p:nth-of-type(2) span {left:-270%;} #sub2_1_10 .cont2 > figure p:nth-of-type(3) span {left:-253%;} #sub2_1_10 .cont2 > figure p:nth-of-type(4) span {left:-283%;} #sub2_1_10 .cont2 > figure p:nth-of-type(5) span {left:-270%;} #sub2_1_10 .cont2 > figure p:nth-of-type(6) span {left:-221%;} #sub2_1_10 .cont2 > figure p:nth-of-type(7) span {left:-196%;} #sub2_1_10 .cont2 > figure p:nth-of-type(8) span {left:-260%;} #sub2_1_10 .cont2 > figure p:nth-of-type(9) span {left:-270%;} #sub2_1_10 .cont2 > figure p:nth-of-type(10) span {left:-136%;} /* sub2_1_11 */ #sub2_1_11 .cont2 > figure p:nth-of-type(1) { left:69%; top:44%; } #sub2_1_11 .cont2 > figure p:nth-of-type(2) { left:40%; top:46%; } #sub2_1_11 .cont2 > figure p:nth-of-type(3) { left:35%; top:65%; } #sub2_1_11 .cont2 > figure p:nth-of-type(1) span {left:-226%; top:-50px;} #sub2_1_11 .cont2 > figure p:nth-of-type(2) span {left:-73%;} #sub2_1_11 .cont2 > figure p:nth-of-type(3) span {left:-173%; top:-50px;} /* sub2_1_12 */ #sub2_1_12 .cont2 > figure p:nth-of-type(1) { left:65%; top:66%; } #sub2_1_12 .cont2 > figure p:nth-of-type(2) { left:61%; top:40%; } #sub2_1_12 .cont2 > figure p:nth-of-type(3) { left:52%; top:67%; } #sub2_1_12 .cont2 > figure p:nth-of-type(4) { left:53%; top:43%;} #sub2_1_12 .cont2 > figure p:nth-of-type(5) { left:30%; top:53%;} #sub2_1_12 .cont2 > figure p:nth-of-type(6) { left:40%; top:62%;} #sub2_1_12 .cont2 > figure p:nth-of-type(7) { left:68%; top:58%;} #sub2_1_12 .cont2 > figure p:nth-of-type(1) span {left:-243%;} #sub2_1_12 .cont2 > figure p:nth-of-type(2) span {left:-286%;} #sub2_1_12 .cont2 > figure p:nth-of-type(3) span {left:-243%;} #sub2_1_12 .cont2 > figure p:nth-of-type(4) span {left:-243%;} #sub2_1_12 .cont2 > figure p:nth-of-type(5) span {left:-286%;} #sub2_1_12 .cont2 > figure p:nth-of-type(7) span {left:-286%;} /* sub2_1_13 */ #sub2_1_13 .cont2 > figure p:nth-of-type(1) { left:68%; top:10%; } #sub2_1_13 .cont2 > figure p:nth-of-type(2) { left:66%; top:20%; } #sub2_1_13 .cont2 > figure p:nth-of-type(3) { left:71%; top:21%; } #sub2_1_13 .cont2 > figure p:nth-of-type(4) { left:32%; top:72%;} #sub2_1_13 .cont2 > figure p:nth-of-type(1) span {left:-197%; top:-50px;} #sub2_1_13 .cont2 > figure p:nth-of-type(2) span {left:-197%; top:-50px;} #sub2_1_13 .cont2 > figure p:nth-of-type(3) span {left:-197%;} #sub2_1_13 .cont2 > figure p:nth-of-type(4) span {left:-250%;} /* sub2_1_14 */ #sub2_1_14 .cont2 > figure p:nth-of-type(1) { left:25%; top:49%; } #sub2_1_14 .cont2 > figure p:nth-of-type(2) { left:20%; top:52%; } #sub2_1_14 .cont2 > figure p:nth-of-type(3) { left:57%; top:82%; border:3px solid #232323; color:#232323;} #sub2_1_14 .cont2 > figure p:nth-of-type(4) { left:62%; top:82%; border:3px solid #232323; color:#232323;} #sub2_1_14 .cont2 > figure p:nth-of-type(5) { left:67%; top:82%; border:3px solid #232323; color:#232323;} #sub2_1_14 .cont2 > figure p:nth-of-type(6) { left:72%; top:82%; border:3px solid #232323; color:#232323;} #sub2_1_14 .cont2 > figure p:nth-of-type(7) { left:77%; top:82%; border:3px solid #232323; color:#232323;} #sub2_1_14 .cont2 > figure p:nth-of-type(1) span {left:-242%;} #sub2_1_14 .cont2 > figure p:nth-of-type(2) span {left:-269%;} #sub2_1_14 .cont2 > figure p:nth-of-type(3) span {left:-146%;} #sub2_1_14 .cont2 > figure p:nth-of-type(4) span {left:-146%;} #sub2_1_14 .cont2 > figure p:nth-of-type(5) span {left:-146%;} #sub2_1_14 .cont2 > figure p:nth-of-type(6) span {left:-146%;} #sub2_1_14 .cont2 > figure p:nth-of-type(7) span {left:-146%;} /* sub2_1_15 */ #sub2_1_15 .cont2 > figure p:nth-of-type(1) { left:55%; top:45%; } /* sub2_3_1 */ #sub2_3_1 .cont2 > figure p:nth-of-type(1) { left:61%; top:71%; } #sub2_3_1 .cont2 > figure p:nth-of-type(2) { left:77%; top:72%; } #sub2_3_1 .cont2 > figure p:nth-of-type(3) { left:80%; top:65%; } #sub2_3_1 .cont2 > figure p:nth-of-type(4) { left:19%; top:76%;} #sub2_3_1 .cont2 > figure p:nth-of-type(5) { left:20%; top:42%;} #sub2_3_1 .cont2 > figure p:nth-of-type(6) { left:69%; top:76%;} #sub2_3_1 .cont2 > figure p:nth-of-type(1) span {left:-266%; top:-50px;} #sub2_3_1 .cont2 > figure p:nth-of-type(2) span {left:-269%; top:-50px;} #sub2_3_1 .cont2 > figure p:nth-of-type(3) span {left:-311%; top:-50px;} #sub2_3_1 .cont2 > figure p:nth-of-type(4) span {left:-159%; top:-50px;} #sub2_3_1 .cont2 > figure p:nth-of-type(5) span {left:-185%;} #sub2_3_1 .cont2 > figure p:nth-of-type(6) span {left:-225%; top:-50px;} #sub2_1_1 .cont2 ul li figure { height:420px; } /* k2 전차 부품 figure 높이 */ #sub2_1_2 .cont2 ul li figure { height:420px; } /* k1 전차 부품 figure 높이 */ #sub2_1_3 .cont2 ul li figure { height:420px; } /* 구난전차 전차 부품 figure 높이 */ #sub2_1_4 .cont2 ul li figure { height:420px; } /* 장애물 개척전차 부품 figure 높이 */ #sub2_1_5 .cont2 ul li figure { height:420px; } /* 차륜형장갑차 부품 figure 높이 */ #sub2_1_6 .cont2 ul li figure { height:420px; } /* k9 부품 figure 높이 */ #sub2_1_7 .cont2 ul li figure { height:420px; } /* k10 부품 figure 높이 */ #sub2_1_8 .cont2 ul li figure { height:380px; } /* k21 부품 figure 높이 */ #sub2_1_9 .cont2 ul li figure { height:400px; } /* k200 부품 figure 높이 */ #sub2_1_10 .cont2 ul li figure { height:400px; } /* KAAV 부품 figure 높이 */ #sub2_1_11 .cont2 ul li figure { height:400px; } /* REDBACK 부품 figure 높이 */ #sub2_1_12 .cont2 ul li figure { height:420px; } /* 천무다련장 부품 figure 높이 */ #sub2_1_13 .cont2 ul li figure { height:400px; } /* 미사일 부품 figure 높이 */ #sub2_1_14 .cont2 ul li figure { height:400px; } /* 항공방산 부품 figure 높이 */ #sub2_1_15 .cont2 ul li figure { height:450px; } /* 고속상륙정 부품 figure 높이 */ #sub2_2_1 .cont2 ul li figure { height:360px; } /* GIS(가스절연개폐장치) 부품 figure 높이 */ #sub2_3_1 .cont2 ul li figure { height:450px; } /* 굴삭기 부품 figure 높이 */ /*sub3_1 */ #sub3_1 { padding-bottom: 0; } #sub3_1 .cont2 { margin-top: 20px; } #sub3_1 .cont2 p { font:18px/1.6 SCoreDream; width: 1080px; } #sub3_1 .cont3 { margin-top: 100px; } #sub3_1 .cont3 ul li { float:left; width: calc(50% - 20px); height: 310px; box-sizing: border-box; border-radius: 30px; margin-bottom: 40px; border:1px solid #ddd; box-shadow: 4px 4px 20px rgba(0,0,0,0.05); display:flex; align-items: center; justify-content: flex-start; } #sub3_1 .cont3 ul li:nth-child(2n) { float:right; } #sub3_1 .cont3 ul li dl{width: calc(100% - 260px);} #sub3_1 .cont3 ul li strong { font:135px SCoreDream; color:#e71216; width: 190px; text-align: center; font-weight : 600; } #sub3_1 .cont3 ul li dl dt { font:21px/1.3 SCoreDream; font-weight : 500; letter-spacing:-1px;} #sub3_1 .cont3 ul li dl dd { margin-top: 20px; } a.manual { margin: 40px auto 0; text-align: center; width: 170px; height: 120px; border:1px solid #e71216; color:#e71216; border-radius: 20px; font:24px/1.4 SCoreDream; font-weight : 500; transition: 0.3s; } a.manual:hover { background: #e71216; color:#fff; } #sub3_1 .cont4 { position: relative; padding:170px 0; box-sizing: border-box; color:#fff; margin-top: 200px; } #sub3_1 .cont4:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/images/bg_cer.jpg) no-repeat center/cover; } #sub3_1 .cont4 h2 { font:30px SCoreDream; padding-bottom: 40px; border-bottom:2px solid #fff; } #sub3_1 .cont4 table {width:calc( 100% - 450px ); margin-top: 40px; padding:8px 0; position: absolute; } #sub3_1 .cont4 table th { width: 230px; text-align: left; } #sub3_1 .cont4 table th, #sub3_1 .cont3 table td { vertical-align: top; } #sub3_1 .cont4 img { margin-left: auto; display: block; margin-top: 60px; box-shadow: 5px 5px 15px rgba(255,255,255,0.5); } @media screen and (max-width: 1200px) { #sub3_1 .cont4 table {width:100%;} #sub3_1 .cont4 table th {width:230px !important;} } /* sub3_2 */ #sub3_2 .cont2 { margin-top: 100px; text-align: center; } #sub3_2 .cont3 { justify-content: space-between; margin-top: 200px; } #sub3_2 .cont3 dl { width: 580px; } #sub3_2 .cont3 dl dt { font:24px SCoreDream; } #sub3_2 .cont3 dl dd { margin-top: 20px; padding:40px 0 40px; border-top:1px solid #000; border-bottom:1px solid #000; min-height:280px; word-break: keep-all; } /* sub3_4 */ #sub3_4 .cont3 { margin-top: 40px; } #sub3_4 .cont3 h2 { font:50px SCoreDream; margin-bottom: 30px; text-align: center; } /* sub4_2 */ #sub4_2 .cont2 { margin-top: 100px; } #sub4_2 .cont2 p { font:18px/1.6 SCoreDream; text-align: left;} #sub4_2 .cont2 table { width: 1200px; border-collapse: collapse; } #sub4_2 .cont2 table th { font-family: SCoreDream;} #sub4_2 .cont2 table td { font-family: SCoreDream; } #sub4_2 .cont2 table .blue span{ color:#0a00d6; } #sub4_2 .cont2 table th, #sub4_2 .cont2 table td{ vertical-align: top; padding:20px; border-bottom:1px solid #000; border-top:1px solid #000; text-align: left; } /* sub5_1 */ #sub5_1 .cont1 .title { width: 210px; float:left; } #sub5_1 .cont1 > div { width: 950px; float:right; } /* sub6_3 */ #sub6_3 .cont2 { height: 700px; margin-top: 60px; } #sub6_3 .cont2 img { width: 100%; } #sub6_3 .cont2 p { font:24px SCoreDream; padding:10px 20px 10px; border-bottom:1px solid #000; width: 100%; box-sizing: border-box; text-align: left; } #sub6_3 .cont2 .control { margin-top: 40px; } #sub6_3 .cont2 .control div { width: 60px; height: 60px; border:2px solid #000; border-radius: 60px; font-size:34px; margin:0 20px; cursor: pointer; } #sub6_3 .cont2 .control div:hover { border-color:#e71216; color:#e71216; } /*#w_header { border-bottom:1px solid #ddd; background: #fff; color:#000; } #w_header .bell, #w_header.down .bell { border-color:#000; }*/ /*#w_header .lang img, #w_header.down .lang img { filter:invert(1); }*/ /*.sm { position:fixed; top:80px; width: 100%; left: 0; z-index: 99; }*/ /*.cont { padding-top: 200px !important; }*/ /*#nav_btn .line { background: #000; } @media (max-width:800px) { .sm { top:60px; } } */ /* 신아 사업영역 커스텀 */ .s_tit {margin-bottom:0;} .bprdList .cont2 {position:relative; border:0; min-height:390px;} .bprdList .cont2 > figure {width:100%; text-align:center; transition: all 1s ease;} .bprdList .cont2 ul {position:absolute; right:0; width:100%; max-width:355px; background:none; z-index:1; top:0;} .bprdList .cont2 ul > li { border:1px solid #ccc; border-radius:5px; transition: .3s ease-out; visibility: hidden; opacity: 0; position:absolute; border-radius:10px; overflow:hidden;} .bprdList .cont2 ul > li > p {background:#e8393c; color:#fff; font-size:16px; padding:10px 15px; font-weight:bold;} .bprdList .cont2 ul > li > p > img {float:right; margin-top:3px;} .bprdList .cont2 ul li figure {border:0;} .bprdList .cont2 ul li div {height:auto; min-height:137px; font-size:14.5px; border-top:1px solid #ccc; padding:10px 30px 20px 40px; background:url('/_img/bullet_04.png') no-repeat 17px 15px; background-color:#fff;} .bprdList .cont3 p {display:none;} .gray_box {background:#f5f5f5; border-radius:10px; padding:25px; font-size:16px; color:#232323;} .box_tit {font-size:22px; font-weight:bold; color:#232323; margin-bottom:10px;} .bprdList .cont2 ul li {display:unset;} .bprdList .cont2 ul li.select {transition:0.5s; visibility: visible; opacity: unset; display:unset;} .bprdList .cont2 ul li figure img {max-width:50%; transition:0.5s;} .bprdList .cont2 ul li.select figure img {max-width:100%;} .bprdList .cont2 > figure p.select {background: #e8393c; outline: 10px solid #ffd0d0; transition:0.5s;} .bprdList .cont2 > figure p.select span {font-size: 14px; color: #fff; background: #e8393c; padding: 3px 10px; border-radius: 5px; text-shadow: none; left: -350%; top: -40px;} .bprdList .cont2 > figure p {color:#fff; background:none; border:3px solid #fff; padding:5px; display:inline-block; width:26px; height:26px; border-radius:26px; line-height:12px; text-align:center; z-index:1;} .bprdList .cont2 > figure p.select:before {} @media screen and (max-width:1200px) { .bprdList .cont2 > figure {transform: translateX(0px) !important;} .bprdList .cont2 ul {width: 100%; display: inline-block; position: relative; float: none; max-width:unset;} .bprdList .cont2 ul > li {position:relative; display:none;} } /* 신아 사업영역 커스텀 */