@charset "utf-8";
@import url("portfolio_com.css");


@font-face {
    font-family: 'Cera Pro';
    src: local('Cera Pro Regular Italic'), local('Cera-Pro-Regular-Italic'),
        url('./font/CeraPro-RegularItalic.woff2') format('woff2'),
        url('./font/CeraPro-RegularItalic.woff') format('woff'),
        url('./font/CeraPro-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }

.rb-section {background:#011926 !important;}

.portfolio-05 .work-box h2 {font-family:var(--Montserrat); font-size:var(--font-24);}

.portfolio-05 .sec-1 h2 {font-family: 'Pretendard';}

.portfolio-05 .sec-2 {background: rgb(0,11,35); background: linear-gradient(180deg, rgba(0,11,35,1) 0%, rgba(0,102,255,1) 100%); position:relative; color:#fff;}
.portfolio-05 .sec-2 > .inner {padding-top:var(--gap-60);}
.portfolio-05 .sec-2 .sec-conts {padding-top:0;}
.portfolio-05 .sec-2 .sec-conts .img-box {width:100%;}
.portfolio-05 .sec-2 .sec-conts .img-box img {display:block; margin:0 auto; max-width:100%;}
.portfolio-05 .sec-2 .sec-conts .main-conts {margin-top:var(--gap-24);}
.portfolio-05 .sec-2 .sec-conts .main-conts .round-box em {padding-bottom:10px; position:relative;}
.portfolio-05 .sec-2 .sec-conts .main-conts .round-box em:after {content:""; width:32px; height:2px; background:#00EFFB; position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
.portfolio-05 .sec-2 .sec-conts .conts {margin-top:var(--gap-60);}

@media screen and (max-width:480px) {
	.portfolio-05 .sec-2 .sec-conts .main-conts .round-box em:after {width:24px;}
}

.portfolio-05 .sec-3 > .inner {padding:var(--gap-32) 0;}
.portfolio-05 .sec-3 h2 {color:#002C8A;}
.portfolio-05 .sec-3 .sec-title .tlt-txt {margin-top:var(--gap-32);}
.portfolio-05 .sec-3 .sec-conts {margin-top:var(--gap-80);}
.portfolio-05 .sec-3 .img-wrap {width:100%; display:flex; gap:var(--gap-24) 100px; flex-wrap:wrap; justify-content:center;}
.portfolio-05 .sec-3 .img-wrap .img-box {width:calc((100% - 200px) / 3);}
.portfolio-05 .sec-3 .img-wrap .img-box img {max-width:100%; display:block; margin:0 auto;}

@media screen and (max-width:1280px) {
	.portfolio-05 .sec-3 .img-wrap {gap:var(--gap-24) 50px;}
	.portfolio-05 .sec-3 .img-wrap .img-box {width:calc((100% - 100px) / 3);}
}

@media screen and (max-width:600px) {
	.portfolio-05 .sec-3 .img-wrap {gap:var(--gap-24) 30px;}
	.portfolio-05 .sec-3 .img-wrap .img-box {width:calc((100% - 60px) / 3);}
}

@media screen and (max-width:480px) {
	.portfolio-05 .sec-3 .img-wrap {gap:16px;}
	.portfolio-05 .sec-3 .img-wrap .img-box {width:calc((100% - 32px) / 3);}
}


.portfolio-05 .sec-4 {max-height:100%; background:url(/img/portfolio/005/sec4_bg.png) center no-repeat; background-size:cover;}
.portfolio-05 .sec-4:before {content:""; width:100%; height:100%; background: rgb(0,48,101); background: linear-gradient(180deg, rgba(0,48,101,1) 0%, rgba(0,64,139,1) 100%); position:absolute; left:0; top:0; z-index:0;}
.portfolio-05 .sec-4 .img-wrap {width:75%; margin:0 auto; padding-bottom:calc(var(--gap-80) * 4); position:relative; z-index:10;}
.portfolio-05 .sec-4 .img-wrap .img-box {position:relative;}
.portfolio-05 .sec-4 .img-wrap .img-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-05 .sec-4 .img-wrap .img-box .img-inner {position:relative; z-index:1;}
.portfolio-05 .sec-4 .img-wrap .img-box .obj-box .obj {position:absolute; z-index:10;}
.portfolio-05 .sec-4 .img-wrap .img-box .obj-box .obj span {display:block; width:100%; height:0; position:relative;}
.portfolio-05 .sec-4 .img-wrap .img-box .obj-box .obj img {max-width:100%; max-height:100%; display:block; position:absolute; left:0; top:0;}
.portfolio-05 .sec-4 .img-wrap .img-box .obj-box .obj.bg {z-index:0;}

.portfolio-05 .sec-4 .img-wrap .img-box.box-1 .obj-box .obj-1 {width:14%; max-width:196px; left:-9%; top:50%; transform:translateY(-50%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-1 .obj-box .obj-1 span {padding-bottom:calc(230 / 196 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-1 .obj-box .obj-2 {width:23%; max-width:294px; right:-11%; top:2%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-1 .obj-box .obj-2 span {padding-bottom:calc(272 / 294 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-2 .obj-box .obj-3 {width:12%; max-width:166px; right:-4.5%; top:10%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-2 .obj-box .obj-3 span {padding-bottom:calc(154 / 166 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-3 .obj-box .obj-4 {width:15%; max-width:208px; left:-10%; top:50%; transform:translateY(-50%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-3 .obj-box .obj-4 span {padding-bottom:calc(377 / 208 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-3 .obj-box .obj-5 {width:21%; max-width:270px; right:-8.5%; bottom:1%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-3 .obj-box .obj-5 span {padding-bottom:100%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-4 .obj-box .obj-6 {width:26%; max-width:320px; left:-12%; top:50%; transform:translateY(-50%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-4 .obj-box .obj-6 span {padding-bottom:calc(276 / 320 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-5 .obj-box .obj-7 {width:19%; max-width:238px; right:-7%; top:5%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-5 .obj-box .obj-7 span {padding-bottom:calc(226 / 238 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-6 .obj-box .obj-8 {width:8%; max-width:96px; left:-2%; top:37%; transform:translateY(-50%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-6 .obj-box .obj-8 span {padding-bottom:calc(138 / 96 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-6 .obj-box .obj-9 {width:25%; max-width:328px; left:-11%; bottom:-20%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-6 .obj-box .obj-9 span {padding-bottom:calc(332 / 328 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-7 .obj-box .obj-10 {width:32%; max-width:409px; right:-17%; top:0;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-7 .obj-box .obj-10 span {padding-bottom:calc(234 / 409 * 100%);}
.portfolio-05 .sec-4 .img-wrap .img-box.box-7 .obj-box .obj-11 {width:27%; max-width:355px; left:11%; bottom:-12%;}
.portfolio-05 .sec-4 .img-wrap .img-box.box-7 .obj-box .obj-11 span {padding-bottom:calc(204 / 355 * 100%);}


.portfolio-05 .sec-5 {padding:0 !important; margin-top:-20%; background:transparent;}
.portfolio-05 .sec-5:before {content:""; width:100%; height:100%; background:#A1C2E8; position:absolute; left:0; top:6%; z-index:0;}
.portfolio-05 .sec-5:after {content:""; width:100%; height:55%; background:#011E57; position:absolute; left:0; bottom:0; z-index:1;}
.portfolio-05 .sec-5 .img-area {width:100%; position:relative; z-index:10;}
.portfolio-05 .sec-5 .img-area .section-01 .img-wrap {width:150%; margin-top:var(--gap-60); display:flex; gap:var(--gap-60);}
.portfolio-05 .sec-5 .img-area .section-01 .img-wrap.wrap-1 {margin-top:0; margin-left:-5%;}
.portfolio-05 .sec-5 .img-area .section-01 .img-wrap.wrap-2 {margin-left:-27%;}
.portfolio-05 .sec-5 .img-area .section-02 {width:80%; max-width:1320px; margin:0 auto; margin-top:var(--gap-80); display:flex; gap:var(--gap-60);}
.portfolio-05 .sec-5 .img-area .section-02 .img-wrap {flex-grow:1;}
.portfolio-05 .sec-5 .img-area .section-02 .img-wrap:nth-child(2) {margin-top:20%;}
.portfolio-05 .sec-5 .img-area .section-02 .img-wrap:nth-child(3) {margin-top:5%;}

@media screen and (max-width:1280px) {
	.portfolio-05 .sec-5 .img-area .section-02 {gap:40px;}
}

@media screen and (max-width:768px) {
	.portfolio-05 .sec-5 .img-area .section-02 {gap:20px;}
}

@media screen and (max-width:480px) {
	.portfolio-05 .sec-5 .img-area .section-01 .img-wrap {margin-top:var(--gap-40); gap:var(--gap-40);}
	.portfolio-05 .sec-5 .img-area .section-02 {gap:10px;}
}


.portfolio-05 .sec-6 {background:#011926; color:#fff; max-height:100%;}
.portfolio-05 .sec-6:after {content:""; width:100%; height:100%; background:url(/img/portfolio/005/sec6_bg.png) center bottom no-repeat; background-size:100% auto; position:absolute; left:0; bottom:0; z-index:0;}
.portfolio-05 .sec-6 > .inner {padding:var(--gap-80) 0; z-index:10;}
.portfolio-05 .sec-6 .sec-title .tlt-txt {margin-top:var(--gap-32);}
.portfolio-05 .sec-6 .sec-conts {margin-top:var(--gap-80); padding-bottom:calc((1955 / 1920 * 100%) - (var(--gap-80) * 3));}
.portfolio-05 .sec-6 .color-wrap {width:100%; max-width:1320px; margin:0 auto; display:flex; gap:var(--gap-80) var(--gap-16);}
.portfolio-05 .sec-6 .color-wrap .conts-box {flex-grow:1; width:calc((100% - var(--gap-16)) / 2);}
.portfolio-05 .sec-6 .color-wrap .conts-box .tlt {width:100%; margin-bottom:var(--gap-80);}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner {width:100%; position:relative;}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box {display:flex; align-items:center; justify-content:center; border-radius:50%;}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box span {display:block; font-size:var(--font-16); font-weight:600;}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="002C8A"] {width:500px; height:500px; background:#002C8A; margin:0 auto;}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="005FCE"] {width:340px; height:340px; background:#005FCE;}
.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="00EFFB"] {width:190px; height:190px; background:#00EFFB; margin-left:auto; margin-top:-8%;}
.portfolio-05 .sec-6 .color-wrap .conts-box:last-child .color-inner {max-width:540px; margin:0 auto;}
.portfolio-05 .sec-6 .main-txt {width:100%; margin-top:calc(var(--gap-80) * 4); font-size:80px; letter-spacing:-2px; font-weight:700;}

@media screen and (max-width:1440px) {
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="002C8A"] {width:360px; height:360px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="005FCE"] {width:245px; height:245px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="00EFFB"] {width:137px; height:137px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box:last-child .color-inner {max-width:400px;}
}

@media screen and (max-width:1280px) {
	.portfolio-05 .sec-6 .main-txt {font-size:60px;}
}

@media screen and (max-width:1024px) {
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="002C8A"] {width:280px; height:280px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="005FCE"] {width:190px; height:190px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="00EFFB"] {width:106px; height:106px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box:last-child .color-inner {max-width:320px;}
	.portfolio-05 .sec-6 .main-txt {font-size:42px;}
}


@media screen and (max-width:768px) {
	.portfolio-05 .sec-6 .color-wrap {flex-wrap:wrap;}
	.portfolio-05 .sec-6 .color-wrap .conts-box {width:100%;}
	.portfolio-05 .sec-6 .main-txt {font-size:32px;}
}

@media screen and (max-width:768px) {
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="002C8A"] {width:220px; height:220px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="005FCE"] {width:150px; height:150px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box .color-inner .color-box[data-code="00EFFB"] {width:84px; height:84px;}
	.portfolio-05 .sec-6 .color-wrap .conts-box:last-child .color-inner {max-width:220px;}
	.portfolio-05 .sec-6 .main-txt {font-size:24px;}
}

/* e : ��Ÿ�ý��� */