/* 미래형 스마트 소재부품 연구단 */ #Shbk-dia1{position:relative; font-size:17px;} #Shbk-dia1 .Shdia1_wr{display: flex; justify-content: space-between; align-items:flex-start; gap: 1%;} #Shbk-dia1 .con{width: 20%; display: flex; flex-direction: column;} #Shbk-dia1 .con img{width: 100%; max-width:120px; margin:0 auto;} #Shbk-dia1 .con span.in-t{font-size: 1.5em; font-weight: 600; color: #fff;} #Shbk-dia1 .con > p{width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 5px;} #Shbk-dia1 .con p.top{height: 55px; font-size:1.35em; font-weight: 600; color:#fff; border-radius:5px 5px 0 0;} #Shbk-dia1 .con p.bot{height: 45px; font-size: 1.25em; color: #555; border:2px solid #555; border-radius:0 0 5px 5px;} #Shbk-dia1 .con ul{width: 100%; display: flex; align-items: center; justify-content: space-between; margin:6px 0;} #Shbk-dia1 .con ul li{width: 100%; height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 0 30px; word-break:keep-all;} #Shbk-dia1 .con.s1{width: 40%; display: flex; flex-wrap: wrap;align-items: start;} #Shbk-dia1 .con.s1 ul li{width: 48%;} #Shbk-dia1 .con.s1 ul > li:first-child{background-color:var(--Shbk-red);} #Shbk-dia1 .con.s1 ul > li:last-child{background-color:var(--Shbk-pink);} #Shbk-dia1 .con.s1 .top{background:var(--Shbk-red); background: linear-gradient(90deg, var(--Shbk-red) 18%, var(--Shbk-pink) 100%); } #Shbk-dia1 .con.s2 ul li, #Shbk-dia1 .con.s2 .top{background-color:var(--Shbk-brown);} #Shbk-dia1 .con.s3 ul li, #Shbk-dia1 .con.s3 .top{background-color:var(--Shbk-green);} #Shbk-dia1 .con.s4 ul li, #Shbk-dia1 .con.s4 .top{background-color:var(--Shbk-blue);} #Shbk-dia1 .con.s2 .bot{border-color:var(--Shbk-brown); color:var(--Shbk-brown);} #Shbk-dia1 .con.s3 .bot{border-color:var(--Shbk-green); color:var(--Shbk-green);} #Shbk-dia1 .con.s4 .bot{border-color:var(--Shbk-blue); color:var(--Shbk-blue);} /* @media screen and (max-width:1430px){ #Shbk-dia1 .Shdia1_wr{font-size: 16px;} p span{display: block;} } @media screen and (max-width:1024px){ #Shbk-dia1 .Shdia1_wr{font-size: 14px; padding: 0 16px;} #Shbk-dia1 .con.s1 ul li,.con .img{height: 250px;} #Shbk-dia1 .top{margin-bot: 14px; padding: 6px 0;} #Shbk-dia1 .con .bot{height: 40px; margin-top: 14px;} #Shbk-dia1 .con.s2 .bot{border: 2px solid #dcb888;} #Shbk-dia1 .con.s3 .bot{border: 2px solid #41c9b2;} #Shbk-dia1 .con.s4 .bot{border: 2px solid #3d809b;} } @media screen and (max-width:800px){ #Shbk-dia1 .Shdia1_wr{font-size: 12px;} #Shbk-dia1 .con.s1 ul li,.con .img{height: 200px; border-radius: 11px;} #Shbk-dia1 .top{font-weight: 500; height: 50px; padding: 4px 0;} #Shbk-dia1 .con .bot {height: 45px;} } @media screen and (max-width:530px){ #Shbk-dia1 .Shdia1_wr{font-size: 10px; padding: 0 6px;} #Shbk-dia1 .top{margin-bot: 6px;} #Shbk-dia1 .con.s1 ul li,.con .img{height: 140px; border-radius: 8px;} #Shbk-dia1 .con .bot{margin-top: 6px;} } */ @media(max-width: 1500px) { #Shbk-dia1 .con ul li {height: 220px;} #Shbk-dia1 .con img {max-width: 100px;} } @media(max-width: 1120px) { #Shbk-dia1 .con span.in-t { font-size: 1.2em;} #Shbk-dia1 .con p.top {font-size: 1.15em; padding: 2.9%;} #Shbk-dia1 .con p.bot { font-size: 1.15em;} } @media(max-width: 980px) { #Shbk-dia1 .con ul li { height: 170px; } #Shbk-dia1 .con p.top { font-size: 1em;} #Shbk-dia1 .con span.in-t { font-size: .9em; } #Shbk-dia1 .con p.bot { font-size: 1em; } #Shbk-dia1 .con p.bot {border: 2px solid #dcb888;} } @media(max-width: 760px) { #Shbk-dia1 .Shdia1_wr {flex-wrap: wrap; justify-content: flex-start;} #Shbk-dia1 .con.s1 { width: 63.5%;} #Shbk-dia1 .con {width: 31.5%; margin-top: 16px;} #Shbk-dia1 .con ul {margin: 6px 0;} #Shbk-dia1 .con ul li {height: 180px;} #Shbk-dia1 .con.s1 ul li {width: 49.2%;} #Shbk-dia1 .con span.in-t {font-size: 1.1em;} } @media(max-width: 580px) { #Shbk-dia1 .con.s1 {width: 64%;} #Shbk-dia1 .con.s1 ul li {width: 49.2%;} #Shbk-dia1 .con {width: 35%;} #Shbk-dia1 .con span.in-t {font-size: 1em;} #Shbk-dia1 .con ul li { padding: 0 16px; height: 170px;} } /* 비전 및 목표 */ #Shbk-dia2 .art1 .art1_wr{width: 100%; position: relative; margin:100px 0;} #Shbk-dia2 .art1 .art1_wr .inner{width: 500px; height: 500px; margin: 0 auto; border: 2px dotted #cccccc; border-radius: 50%; position: relative;} #Shbk-dia2 .art1 .art1_wr .inner .circle{ width: 270px; height: 270px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border: 6px solid #8b0029; border-radius: 50%; box-shadow: 4px 0px 26px 10px #ddd; } #Shbk-dia2 .art1 .art1_wr .inner .circle > p{font-family: 'Frank Ruhl Libre', sans-serif; font-size: 100px; font-weight: 900; color:#8b0029; text-align: center; line-height: 0.95;} #Shbk-dia2 .art1 .art1_wr .inner .circle > p > span{display: block; font-size: 40px;} #Shbk-dia2 .art1 .art1_wr > ul{width: 100%; height:100%; position: absolute; top: 0;} #Shbk-dia2 .art1 .art1_wr > ul li{width: fit-content; padding: 1% 2%; line-height: 140%; text-align: center; font-size: 20px; font-weight: 600; border-radius: 5px; color: #fff; position: absolute;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(1){background-color:var(--Shbk-red); top: -10%; left: 42.5%; } #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(2){background-color:var(--Shbk-pink); top: 90%; left: 39.5%; } #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3){background-color:var(--Shbk-brown); top: 19%; left: 62.5%; } #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4){background-color:var(--Shbk-gray); top: 59%; left: 63%; } #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5){background-color:var(--Shbk-green); top: 19%; left: 20%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6){background-color:var(--Shbk-blue); top: 59%; left: 21%;} #Shbk-dia2 .art2{position:relative; padding-top:80px;} #Shbk-dia2 .art2 .art2_wr{position:relative; display: flex; flex-wrap:wrap; justify-content: space-between; align-items: stretch; margin-top:30px; overflow:hidden;} #Shbk-dia2 .art2 .art2_wr .box{position:relative; width: 49.5%; border: 2px solid var(--Shbk-red); padding:35px 50px 60px 50px; overflow: hidden;} #Shbk-dia2 .art2 .art2_wr .box > h4{font-size: 30px; font-weight:800; color:var(--Shbk-red); margin-bottom:20px;} #Shbk-dia2 .art2 .art2_wr .box > h4 strong{display: inline-block; font-size: 31px; font-family: 'Frank Ruhl Libre', sans-serif; font-weight: 700; transform: translateY(2px);} #Shbk-dia2 .art2 .art2_wr .box .gray-point{ position:absolute; display: inline-block; font-family: 'Frank Ruhl Libre', sans-serif; font-size: 80px; color: #eee; font-weight: 700; line-height: 1; white-space: nowrap; z-index:-1; right:20px; bottom:-5px; } #Shbk-dia2 .art2 .art2_wr .box dl{position:relative;} #Shbk-dia2 .art2 .art2_wr .box dl + dl{margin-top:25px;} #Shbk-dia2 .art2 .art2_wr .box dl dt{display: inline-block; width: fit-content; color: #fff; padding:5px 10px; font-size: 20px; font-weight: 600; border-radius:5px; background-color: var(--Shbk-red); margin-bottom:8px;} #Shbk-dia2 .art2 .art2_wr .box dl dd{position:relative; font-size: 20px; font-weight: 500; color:#333; padding-left:12px;} #Shbk-dia2 .art2 .art2_wr .box dl dd::before{position:absolute; content:''; display:block; width:5px; height:5px; background:#bbb; border-radius:50%; left:0; top:7px;} #Shbk-dia2 .art2 .art2_wr .box dl dd + dd{margin-top:8px;} #Shbk-dia2 .art2 .art2_wr .box:nth-child(2){border-color: var(--Shbk-blue);} #Shbk-dia2 .art2 .art2_wr .box:nth-child(2) > h4{color:var(--Shbk-blue);} #Shbk-dia2 .art2 .art2_wr .box:nth-child(2) dt{background-color: var(--Shbk-blue);} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(1).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(1).ani.in-view{opacity:1; top: -7%; left: 50%; transform: translate(-50%, 0%);} /* 실행 후 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(2).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(2).ani.in-view{opacity:1; top: 90%; left: 50%; transform: translate(-50%, 0%);} /* 실행 후 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3).ani.in-view{opacity:1; top: 19%; left: 71%; transform: translate(-50%, 0%);} /* 실행 후 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4).ani.in-view{opacity:1; top: 59%; left: 70%; transform: translate(-50%, 0%);} /* 실행 후 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5).ani.in-view{opacity:1; top: 19%; left: 29%; transform: translate(-50%, 0%);} /* 실행 후 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6).ani{opacity:0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s;}/* 실행 전 */ #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6).ani.in-view{opacity:1; top: 59%; left: 29%; transform: translate(-50%, 0%);} /* 실행 후 */ @media(max-width: 1300px) { #Shbk-dia2 .art1 .art1_wr .inner { width: 450px; height: 450px;} #Shbk-dia2 .art1 .art1_wr .inner .circle { width: 220px; height: 220px;} #Shbk-dia2 .art1 .art1_wr .inner .circle > p {font-size: 70px;} #Shbk-dia2 .art1 .art1_wr .inner .circle > p > span {font-size:35px;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3).ani.in-view {left: 72%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4).ani.in-view {left: 72%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5).ani.in-view {left: 26%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6).ani.in-view {left: 26%;} } @media(max-width: 1120px) { #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3).ani.in-view {left: 75%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4).ani.in-view {left: 75%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5).ani.in-view {left: 24%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6).ani.in-view {left: 24%;} #Shbk-dia2 .art2 .art2_wr .box dl dt {border-radius: 3px;} #Shbk-dia2 .art2 .art2_wr .box .gray-point {font-size: 60px;} } @media(max-width: 980px) { #Shbk-dia2 .art1 .art1_wr {margin: 44px 0;} #Shbk-dia2 .art1 .art1_wr .inner { width: fit-content; height: fit-content; border: none; border-radius: 0; position: relative; } #Shbk-dia2 .art1 .art1_wr .inner .circle { width: fit-content; height: fit-content;position: relative; top: 0; left: 50%; border: none; border-radius: 0; box-shadow:none;} #Shbk-dia2 .art1 .art1_wr .inner .circle > p { font-size: 50px; } #Shbk-dia2 .art1 .art1_wr .inner .circle > p > span{ font-size: 50px; display: inline;} #Shbk-dia2 .art1 .art1_wr > ul {position: relative;} #Shbk-dia2 .art1 .art1_wr > ul > li {width: 100%; position: relative; border-radius: 50px; margin-bottom:16px; line-height: 1.3; padding: 1.5% 2%;} #Shbk-dia2 .art1 .art1_wr > ul li:nth-child(3).ani.in-view,#Shbk-dia2 .art1 .art1_wr > ul li:nth-child(4).ani.in-view,#Shbk-dia2 .art1 .art1_wr > ul li:nth-child(5).ani.in-view,#Shbk-dia2 .art1 .art1_wr > ul li:nth-child(6).ani.in-view {left:0; transform: translate(0%, 0%);} #Shbk-dia2 .art2 .art2_wr { margin-top: 16px;} #Shbk-dia2 .art2 .art2_wr .box {width:100%; margin-bottom: 16px; } } @media(max-width: 760px) { .sub-txt h2 b { font-size: 30px; } #Shbk-dia2 .art1 .art1_wr .inner .circle > p {font-size: 40px;} #Shbk-dia2 .art1 .art1_wr .inner .circle > p > span{font-size: 40px;} #Shbk-dia2 .art1 .art1_wr > ul li {font-size:18px; margin-bottom: 8px;} #Shbk-dia2 .art2 {padding-top: 16px;} #Shbk-dia2 .art2 .art2_wr .box {padding: 24px 39px 35px 29px;} #Shbk-dia2 .art2 .art2_wr .box > h4 { font-size: 26px;} #Shbk-dia2 .art2 .art2_wr .box dl dt {font-size:18px;} #Shbk-dia2 .art2 .art2_wr .box dl dd {font-size: 18px;} #Shbk-dia2 .art2 .art2_wr .box .gray-point {font-size: 50px;} } /* 교육 */ #Shbk-dia3 .Shdia3_wr{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit{width:280px; height: 330px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background-color:#8b0029; display: flex; align-items: center; justify-content: center; position: relative;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit p > span{display:block;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit::before { content: ''; display: block; position: absolute; background: url('images/shbk/Shbk-dia1_edu1.png') no-repeat center; width: 260px; height:100%; background-size: contain;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit .Shdia3_tit_in { width: 85%; height: 85%; background-color: #fff; text-align: center; font-size: 30px; font-weight: 600; line-height: 140%; display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); position: relative; } #Shbk-dia3 .Shdia3_wr > ul {position: relative; width:calc(100% - 280px); padding-left:80px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; row-gap:20px;} #Shbk-dia3 .Shdia3_wr > ul li { position:relative; width:48%; padding:25px 20px 30px; box-sizing: border-box; background: #fdfdfd; border: 1px solid #efefef; border-top: 2px solid #8b0029; overflow:hidden; } #Shbk-dia3 .Shdia3_wr > ul li .num{position:absolute; width:60px; height:60px; padding: 0 7px 7px 7px; background:#8b0029; left:20px; top:-10px;} #Shbk-dia3 .Shdia3_wr > ul li .num p{ border:1px solid #eee; border-top:0; font-size:22px; font-family:'Frank Ruhl Libre', sans-serif; font-weight:600; color:#fff; text-align:center; height:53px; padding-top:18px; } #Shbk-dia3 .Shdia3_wr > ul li p.cont{padding-left:90px; font-size: 20px; font-weight:400; color:#333; line-height: 1.3; word-break: keep-all;} @media(max-width: 1500px) { #Shbk-dia3 .Shdia3_wr .Shdia3_tit { width: 100%; height: fit-content; clip-path: none; background-color: transparent; } #Shbk-dia3 .Shdia3_wr .Shdia3_tit .Shdia3_tit_in {clip-path: none;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit p{color:var(--Shbk-red); font-size: 36px; font-weight: 900; margin-bottom: 16px;} #Shbk-dia3 .Shdia3_wr .Shdia3_tit p > span{display:inline;} #Shbk-dia3 .Shdia3_wr > ul {width: 100%; padding-left: 0;} } @media(max-width: 1120px) { #Shbk-dia3 .Shdia3_wr > ul li { height: 108px;} } @media(max-width: 980px) { #Shbk-dia3 .Shdia3_wr > ul li { width: 100%; height: auto;} } @media(max-width: 760px){ #Shbk-dia3 .Shdia3_wr .Shdia3_tit p{font-size: 28px;} #Shbk-dia3 .Shdia3_wr > ul li {padding: 23px 20px 23px;} #Shbk-dia3 .Shdia3_wr > ul li p.cont {font-size: 18px;} } /* 연구 */ #Shbk-dia4 .con{margin:50px 0; color:#333} #Shbk-dia4 .Ctop{position:relative; text-align: center;} #Shbk-dia4 .Ctop > dl + dl{margin-top:40px;} #Shbk-dia4 .Ctop > dl > dt{padding-bottom:14px 0; font-size: 30px; font-weight:700; color:#8b0029; margin-bottom:8px;} #Shbk-dia4 .Ctop > dl > dd {font-size:20px; font-weight: 500;} #Shbk-dia4 .Ctop::after{ content: ""; display: block; width: 100px; height: 100px; clip-path: polygon(69% 0%, 97% 50%, 69% 100%, 61% 100%, 89% 50%, 61% 0); background-color:#8b0029; rotate: 90deg; margin: 0 auto; opacity:.9; } #Shbk-dia4 .Ccen{display: flex; align-items: center; justify-content: space-between;} #Shbk-dia4 .Ccen > dl{width: 50%; text-align:left; padding: 3% 0;} #Shbk-dia4 .Ccen > dl:first-of-type{text-align: right; padding-right:30px; border-right: 2px solid #8b0029; } #Shbk-dia4 .Ccen > dl:last-of-type{padding-left:30px;} #Shbk-dia4 .Ccen > dl > dt{display: inline-block; font-size: 22px; font-weight: 600; color: #fff; padding: 5px 12px; border-radius: 4px; background-color: var(--Shbk-red); margin-bottom:25px;} #Shbk-dia4 .Ccen > dl > dd{font-size:20px; font-weight: 400;} #Shbk-dia4 .Ccen > dl > dd + dd{margin-top:10px;} #Shbk-dia4 .Ccen > dl:last-of-type > dt{background-color: var(--Shbk-blue);} #Shbk-dia4 .Cbtm{display:flex; flex-wrap: wrap; justify-content: space-between;} #Shbk-dia4 .Cbtm > dl{width: 24.2%; border: 2px solid; padding:35px 35px 50px 35px; position: relative; } #Shbk-dia4 .Cbtm > dl:nth-of-type(1){border-color: var(--Shbk-brown);} #Shbk-dia4 .Cbtm > dl:nth-of-type(2){border-color: var(--Shbk-blue);} #Shbk-dia4 .Cbtm > dl:nth-of-type(3){border-color: var(--Shbk-pink);} #Shbk-dia4 .Cbtm > dl:nth-of-type(4){border-color: var(--Shbk-green);} #Shbk-dia4 .Cbtm > dl::after{display:block; position: absolute; bottom: -10px; right: 8px; font-size: 60px; font-weight: 700; font-family: 'Frank Ruhl Libre', sans-serif; color: #eee;} #Shbk-dia4 .Cbtm > dl:nth-of-type(1)::after{content:"01";} #Shbk-dia4 .Cbtm > dl:nth-of-type(2)::after{content:"02";} #Shbk-dia4 .Cbtm > dl:nth-of-type(3)::after{content:"03";} #Shbk-dia4 .Cbtm > dl:nth-of-type(4)::after{content:"04";} #Shbk-dia4 .Cbtm> dl > dt{font-size: 22px; font-weight: 700; margin-bottom: 16px; color:#111; word-break:keep-all;} #Shbk-dia4 .Cbtm> dl > dd{position:relative;font-size:20px; font-weight: 400; line-height: 1.25; word-break:keep-all; padding-left: 13px; } #Shbk-dia4 .Cbtm> dl > dd + dd{margin-top:10px;} #Shbk-dia4 .Cbtm> dl > dd:before{position: absolute; content: ""; display:block; width: 4px; height: 4px; border-radius: 50%; background-color: #bbb; left:0; top:10px;} @media(max-width: 1500px) { #Shbk-dia4 .Cbtm {gap:24px 0;} #Shbk-dia4 .Cbtm > dl {width: 49%;} } @media(max-width: 980px) { #Shbk-dia4 .Ccen {flex-wrap: wrap;} #Shbk-dia4 .Ccen > dl {width: 100%; box-sizing: border-box; background: #fdfdfd; border: 1px solid #efefef; padding: 25px 20px 30px;} #Shbk-dia4 .Ccen > dl:first-of-type { text-align: left; border-right: none; border-top: 2px solid #8b0029; margin-bottom:16px} #Shbk-dia4 .Ccen > dl:last-of-type { text-align: left; border-right: none; border-top: 2px solid var(--Shbk-blue);} #Shbk-dia4 .Ccen > dl > dt {width: 100%; color: var(--Shbk-red); background-color: transparent; font-size: 24px; margin-bottom: 12px;padding:0; } #Shbk-dia4 .Ccen > dl:last-of-type > dt{color: var(--Shbk-blue); background-color: transparent;} #Shbk-dia4 .Ccen > dl > dd{padding-left:24px; position: relative;} #Shbk-dia4 .Ccen > dl > dd::before{content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; position: absolute; top: 12px; left: 13px; transform: translate(-50%, -50%); background-color:var(--Shbk-red);} #Shbk-dia4 .Ccen > dl:last-of-type dd::before{background-color:var(--Shbk-blue);} #Shbk-dia4 .Cbtm > dl {width: 100%;} } @media(max-width: 760px) { #Shbk-dia4 .Ctop > dl > dt {font-size: 24px;} #Shbk-dia4 .Ctop > dl > dd { font-size: 18px;} #Shbk-dia4 .Ctop::after {width: 60px; height: 60px;} #Shbk-dia4 .Ccen > dl{padding: 20px 25px ;} #Shbk-dia4 .Ccen > dl > dt,#Shbk-dia4 .Cbtm> dl > dt{font-size: 20px;} #Shbk-dia4 .Ccen > dl > dd,#Shbk-dia4 .Cbtm> dl > dd{font-size: 18px;} #Shbk-dia4 .Cbtm > dl {padding: 20px 25px 40px 25px;} #Shbk-dia4 .Cbtm > dl::after {font-size: 50px;} } /* 산업·사회 문제 해결 기여 */ #Shbk-dia5 > h3{width: 100%; font-size: 42px; text-align: center; margin-bottom: 24px; color:#111;} #Shbk-dia5 .con_wrap{display: flex; width: 100%; overflow: hidden; flex-wrap: wrap; justify-content: space-between;} #Shbk-dia5 .con{width:49%; display:flex; justify-content: space-between; padding: 1.8% 0; overflow: hidden; color:#333;} #Shbk-dia5 .con .conL{width:30%; position: relative;} #Shbk-dia5 .con .conL:after{content: ''; display: inline-block; width: 2px; height: 80px; position: absolute;top: 12px; right:0; } #Shbk-dia5 .con1 .conL:after{background-color:var(--Shbk-red);} #Shbk-dia5 .con2 .conL:after{background-color:var(--Shbk-brown);} #Shbk-dia5 .con3 .conL:after{background-color:var(--Shbk-blue);} #Shbk-dia5 .con4 .conL:after{background-color:var(--Shbk-pink);} #Shbk-dia5 .con5 .conL:after{background-color:var(--Shbk-green);} #Shbk-dia5 .con6 .conL:after{background-color:var(--Shbk-gray);} #Shbk-dia5 .con .conL > i{ font-family: 'Frank Ruhl Libre', sans-serif; font-size: 3.5em; font-weight: 700; margin-top: -5px; position: absolute; top: -21px; z-index: -1; /* opacity:.5; */} #Shbk-dia5 .con1 .conL > i{color:var(--Shbk-red);} #Shbk-dia5 .con2 .conL > i{color:var(--Shbk-brown);} #Shbk-dia5 .con3 .conL > i{color:var(--Shbk-blue);} #Shbk-dia5 .con4 .conL > i{color:var(--Shbk-pink);} #Shbk-dia5 .con5 .conL > i{color:var(--Shbk-green);} #Shbk-dia5 .con6 .conL > i{color:var(--Shbk-gray);} #Shbk-dia5 .con .conL > img{width: 32%; position: absolute; left: 90px; top: 16px;} #Shbk-dia5 .con .conR{width: 64%; line-height: 1.25; font-size: 20px; font-weight: 500;} #Shbk-dia5 .con .conR > li{width:fit-content;word-break:keep-all;} #Shbk-dia5 .con .conR > li + li{margin-top:5px;} @media(max-width: 1500px) { #Shbk-dia5 > h3{font-size:36px;} #Shbk-dia5 .con .conL:after{display:none;} #Shbk-dia5 .con .conL > img {width: 40%;} } @media(max-width: 1120px) { #Shbk-dia5 .con .conL > i {font-size: 40px;} #Shbk-dia5 .con .conL > img {width: 50%; left: 50px; top: 13px;} #Shbk-dia5 .con .conR {height: 120px;} } @media(max-width: 980px) { #Shbk-dia5 .con { width: 47%; padding: 4% 0;} #Shbk-dia5 .con .conL { width: fit-content;} #Shbk-dia5 .con .conL > img {display:none;} #Shbk-dia5 .con .conL > i {font-size: 60px; margin-top: 0px;} #Shbk-dia5 .con .conR { width: 75%;height: auto;} } @media(max-width: 760px) { #Shbk-dia5 > h3{font-size:30px;} #Shbk-dia5 .con { width: 100%; justify-content: center; } #Shbk-dia5 .con .conL {width: 35%;} #Shbk-dia5 .con .conL:after{display:block; left: 84%;} #Shbk-dia5 .con .conL > i {font-size: 50px;} #Shbk-dia5 .con .conL > img {display:block; width: 34%; left: 76px;} #Shbk-dia5 .con .conR {width: 50%;} } @media(max-width: 580px) { #Shbk-dia5 > h3{font-size:28px;} #Shbk-dia5 .con .conL {width: 40%;} #Shbk-dia5 .con .conL > i {top: -14px;} #Shbk-dia5 .con .conL:after{display:none;} #Shbk-dia5 .con .conR {width: 60%;} #Shbk-dia5 .con .conR li {font-size: 18px;} } /* 국제화 */ #Shbk-dia6{color:#333} #Shbk-dia6 .con{display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #Shbk-dia6 .con h3{width: 100%; margin: 6px 0; text-align: center; font-size:26px; margin-top:16px; color: var(--Shbk-red);} #Shbk-dia6 .con dl{width:32%; margin:6px 0; box-sizing: border-box; background: #fdfdfd; border: 1px solid #efefef; border-top: 2px solid var(--Shbk-red); padding: 19px 30px;} #Shbk-dia6 .con dl>dt{font-size:20px; font-weight: 700; margin-bottom: 16px;} #Shbk-dia6 .con dl>dd{ color: var(--Shbk-red); font-weight: 700; font-family: 'Frank Ruhl Libre', 'Pretendard', sans-serif; font-size:22px; font-weight: 700;} #Shbk-dia6 .con dl>dd>span{ color:#333; font-size: 18px; font-weight: 500; margin-top: 14px; margin-left:44px; position: relative;font-family: 'Pretendard', sans-serif; } #Shbk-dia6 .con dl>dd>span::before{ display: inline-block; content:""; width:10px; height:12px; background-color: var(--Shbk-red); clip-path: polygon(100% 50%, 0 100%, 0 0); position: absolute; top: 4px; left: -23%; animation: clip_left 0.6s alternate infinite ease; } @keyframes clip_left{ from{left: -23%;} to{left: -20%;} } #Shbk-dia6 .con2{ margin-top: 24px; } #Shbk-dia6 .con2 dl{width:24%} #Shbk-dia6 .con3 h3{margin-top:42px; color: var(--Shbk-red);} #Shbk-dia6 .con3 .img_wrap{width: 100%; height: 737px; background-image: url('../images/shbk/Shbk-dia6_International01.jpg'); background-size: contain; background-repeat: no-repeat; position: relative; margin-top:36px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con{width: 40%; height: fit-content; position:absolute; display:flex; align-items: center; gap: 3%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con p{ font-size: 18px; font-weight: 700; text-align: center; line-height: 1.2; word-break: keep-all; width: 150px; height: 150px; background-color: #fff; border: 3px solid; border-radius: 50%; display: flex;flex-direction: column; align-items: center; justify-content: center; position: relative; } #Shbk-dia6 .con3 .img_wrap .img_conW_con p::before{ content: ""; display: inline-block; width: 130px; height: 130px; border-radius: 50%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);border: 1px dashed; } #Shbk-dia6 .con3 .img_wrap .img_conW_con ul{width:calc(100% - 150px);} #Shbk-dia6 .con3 .img_wrap .img_conW_con ul li{font-size: 17px; line-height: 1.4; font-weight: 600; word-break: keep-all; position: relative; padding-left: 18px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con ul li span{display:block;} #Shbk-dia6 .con3 .img_wrap .img_conW_con ul li::before{ content: ""; width: 5px; height: 5px; display: inline-block; background-color: #333; border-radius: 50%; position: absolute; top:6px; left:2px; } #Shbk-dia6 .con3 .img_wrap .img_conW_con1{top: 9%; left: 8%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con1 ul li::before{ background-color: var(--Shbk-pink);} #Shbk-dia6 .con3 .img_wrap .img_conW_con1 p{color: var(--Shbk-pink);} #Shbk-dia6 .con3 .img_wrap .img_conW_con2{top: 15%; right: 3%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2 ul li::before{ background-color: var(--Shbk-blue);} #Shbk-dia6 .con3 .img_wrap .img_conW_con2 p{color: var(--Shbk-blue);} #Shbk-dia6 .con3 .img_wrap .img_conW_con3{top: 46%; left: 26%; } #Shbk-dia6 .con3 .img_wrap .img_conW_con3 ul li::before{ background-color: var(--Shbk-green);} #Shbk-dia6 .con3 .img_wrap .img_conW_con3 p{color: var(--Shbk-green);} #Shbk-dia6 .con3 .img_wrap .img_conW_con4{top: 60%; right: -4%; } #Shbk-dia6 .con3 .img_wrap .img_conW_con4 ul li::before{ background-color: var(--Shbk-brown);} #Shbk-dia6 .con3 .img_wrap .img_conW_con4 p{color: var(--Shbk-brown);} @media(max-width: 1500px) { #Shbk-dia6 .con2 dl {width: 49%; } #Shbk-dia6 .con3 .img_wrap .img_conW_con{width:100%; position:relative; gap: 2%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2{right:0; top:3%; left: 50%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con3{top:6%; left: 22%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con4{top:0; left: 60%;} } @media(max-width: 1120px) { #Shbk-dia6 .con3 .img_wrap .img_conW_con1{top: -3%; left: 5%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2{top: -8%; left: 42%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con3{top: -8%; left: 5%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con4{top: -12%; left: 42%;} } @media(max-width: 980px) { #Shbk-dia6 .con1 dl {width: 49%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con1{top: -3%; left: 0%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2{top: -6%; left: 26%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con3{top: -7%; left: 0%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con4{top: -9%; left: 26%;} } @media(max-width: 760px) { #Shbk-dia6 .con1 dl, #Shbk-dia6 .con2 dl {width: 100%;} #Shbk-dia6 .con3 .img_wrap .img_conW_con p {font-size:14px; width: 100px; height: 100px; border: 2px solid;} #Shbk-dia6 .con3 .img_wrap .img_conW_con p::before {width: 90px; height: 90px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2, #Shbk-dia6 .con3 .img_wrap .img_conW_con4{flex-direction: row-reverse; left: 0%; text-align: right; padding-left: 0;padding-right: 14px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con{top:-1%; margin-bottom:12px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con ul{width:calc(100% - 100px);} #Shbk-dia6 .con3 .img_wrap .img_conW_con ul li {font-size: 14px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2 ul li, #Shbk-dia6 .con3 .img_wrap .img_conW_con4 ul li{padding-left:0; padding-right:14px;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2 ul li::before , #Shbk-dia6 .con3 .img_wrap .img_conW_con4 ul li::before{padding-left:0; display:none;} #Shbk-dia6 .con3 .img_wrap .img_conW_con2 ul li::after , #Shbk-dia6 .con3 .img_wrap .img_conW_con4 ul li::after{ content: ""; width: 5px; height: 5px; display: inline-block; background-color: #333; border-radius: 50%; position: absolute; top:6px; right:2px; } #Shbk-dia6 .con3 .img_wrap .img_conW_con2 ul li::after{background-color:var(--Shbk-blue);} #Shbk-dia6 .con3 .img_wrap .img_conW_con4 ul li::after{background-color:var(--Shbk-brown);} } /* 기술협력 */ #Shen-dia2{position:relative; margin-top:150px; padding-top:80px;} #Shen-dia2{position:relative;} #Shen-dia2 .cent {position: absolute; z-index: -1; display: flex; justify-content: center; align-items: center; width: 100%; height: 560px;} #Shen-dia2 .cent p{color:#121212; font-size:36px; font-weight:600; text-align:center ;z-index: 1;} #Shen-dia2 .cent img.arrow_ani{height:100%; position: absolute; animation:circleRot 30s infinite} @keyframes circleRot { from {transform:rotate(0deg);} to {transform:rotate(-360deg);} } #Shen-dia2 ul{height: 560px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;} #Shen-dia2 ul li{width:38%; opacity: 0; transition:all .8s ease-out .4s;} #Shen-dia2 ul.in-view li{opacity: 1; transform:translate(0,0) !important;} #Shen-dia2 ul li:nth-child(1){transform:translate(40px, 40px); margin-top: -150px; width:100%;} #Shen-dia2 ul li:nth-child(2){transform:translate(-40px, 40px); margin-top: 110px; margin-left:10%; transition-delay: .8s;} #Shen-dia2 ul li:nth-child(3){transform:translate(40px, -40px); margin-top: 110px; margin-right:10%; transition-delay: 1.2s;} #Shen-dia2 ul li .cBox{ position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: 260px; height: 260px; border-radius: 50%; background:#b70036; z-index: 1; overflow: hidden; box-shadow:0px 5px 15px 5px rgb(0 0 0 / 5%); } #Shen-dia2 ul li .Ctxt{margin-top:20px; display: block;} #Shen-dia2 ul li .Ctxt p{font-size:19px; color: #f8f8f8; letter-spacing: -0.02em; line-height: 1.35;} #Shen-dia2 ul li .Ctxt p.tit{font-size:28px; font-weight: 700; color: #fff;} #Shen-dia2 ul li:nth-child(1) .cBox{background-color:#881d3d;} #Shen-dia2 ul li:nth-child(2) .cBox{background-color:#727070;} #Shen-dia2 ul li:nth-child(3) .cBox{background-color:#8e745a;} #Shen-dia2 ul li .Cico img{width:45px; } @media (max-width: 991px) { #Shen-dia2 {padding-top: 0px;} #Shen-dia2 .cent img.cen_logo {max-width: 180px;} #Shen-dia2 ul {justify-content: space-between;} } @media (max-width: 767px) { #Shen-dia2 {margin-top: 0px;} #Shen-dia2 .cent {display: none;} #Shen-dia2 ul {height: auto;} #Shen-dia2 ul li .cBox {width: 100%; border-radius: 0; height: 210px;} #Shen-dia2 ul li {align-items: flex-start; width: 100%; margin-bottom: 10px; margin-top: 0 !important;} #Shen-dia2 ul li:nth-child(2){margin-left:0;} #Shen-dia2 ul li:last-child {margin-bottom: 0; margin-right:0;} }