/* sub */
.sub_page {padding:8rem 0 16rem 0;}
.sub_title {line-height:1.3; font-size:5rem; text-align:center; padding:10rem 0;}


/* main */
.main_wrap > section {min-height:calc(var(--vh, 1vh) * 100); display:flex; align-items:center; justify-content:center;}


/* about01 */
.about01 {text-align:center; position:relative; color:#fff;}
.about01 .inner {padding-top:8rem; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.about01 .btn_box {margin-top:4rem;}
.about01_swiper .swiper-slide {width:100vw; height:calc(var(--vh, 1vh) * 100); background-repeat:no-repeat; background-position:center; background-size:cover;}
.about01_swiper .swiper-slide.bg_01 {background-image:url("/img/main/about01_bg01.jpg");}
.about01_swiper .swiper-slide.bg_02 {background-image:url("/img/main/about01_bg02.jpg");}
.about01_swiper .swiper-slide.bg_03 {background-image:url("/img/main/about01_bg03.jpg");}
.about01_pagination {position:absolute; z-index:1; top:auto; bottom:7.5rem !important;}
.about01_pagination .swiper-pagination-bullet {width:1rem; height:1rem; background-color:#c4c4c4; margin:0 1.1rem !important; opacity:1; transition:0.1s ease-in-out;}
.about01_pagination .swiper-pagination-bullet-active {width:1.3rem; height:1.3rem; background-color:#fff;}
.about01_pagination .swiper-pagination-bullet:hover {background-color:rgba(255,255,255,0.5);}

/* about02 */
.about02 {background:#000 url("/img/main/about02_bg01.jpg") no-repeat center left/cover; color:#fff;}
.about02_container {display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.about02 .inner {display:flex; justify-content:end;}
.about02 .txt_box {width:50%; min-width:720px;}

/* about03 */
.about03 {background-color:#eee;  overflow:hidden;}
.about03_container {position:relative; width:100%;}
.about03 .inner {display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
.about03 .logo_list_wrap {height:calc(var(--vh, 1vh) * 100); position:relative; overflow:hidden;}
.about03 .logo_list_wrap::before,
.about03 .logo_list_wrap::after {content:""; width:100%; height:56%; position:absolute; left:0; z-index:1;}
.about03 .logo_list_wrap::before {background-image:linear-gradient(
        to top,
			rgba(237, 237, 237, 0) 10%,
			rgba(237, 237, 237, 0.25) 25%,
			rgba(237, 237, 237, 0.5) 50%,
			rgba(237, 237, 237, 0.75) 75%,
			rgba(237, 237, 237, 1) 100%
		); top:0;}
.about03 .logo_list_wrap::after {background-image:linear-gradient(
        to bottom,
			rgba(237, 237, 237, 0) 10%,
			rgba(237, 237, 237, 0.25) 25%,
			rgba(237, 237, 237, 0.5) 50%,
			rgba(237, 237, 237, 0.75) 75%,
			rgba(237, 237, 237, 1) 100%
		); bottom:0;}
.about03 .logo_list {display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:4rem 8rem; gap:8rem;}
.about03 .logo_list img:not(.type_png) {filter:invert(52%) sepia(0%) saturate(0%) hue-rotate(88deg) brightness(96%) contrast(90%);}
.about03 .bg_deco {position:absolute; top:0; left:0; width:100%; height:100%;}
.about03 .bg_deco .line {display:block; width:1px; height:100%; background-color:#ddd; position:absolute; top:0;}
.about03 .bg_deco .line01 {left:25%;}
.about03 .bg_deco .line02 {left:50%;}
.about03 .bg_deco .line03 {right:25%;}

.about03 .logo_list:nth-child(1) {animation:25s linear 0s infinite normal forwards running rolling01;}
.about03 .logo_list:nth-child(2) {animation:25s linear 0s infinite normal none running rolling02;}
@keyframes rolling01  {
	0% {transform:translateY(0);}
    50% {transform:translateY(-100%);}
    50.01% {transform:translateY(100%);}
    100% {transform:translateY(0);}
}
@keyframes rolling02  {
	0% {transform:translateY(0);}
	100% {transform:translateY(-200%);}
}

/* about04 */
.about04 {display:flex; align-items:center; justify-content:center; background-color:#000; background-repeat:no-repeat; background-position:center; color:#fff; text-align:center; position:relative;}
.about04 .bg_video {position:absolute; width:100%; height:100%; top:0; left:0; opacity:1; transition:.8s ease-in-out; transition-delay:0.5s;}
.about04 .bg_video::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);}
.about04 .bg_video video {width:100%; height:100%; object-fit:cover; opacity:0.1;}
.about04.type_default .bg_video {opacity:0; transition:.4s ease-in-out;}
.about04 > .inner {position:relative; z-index:1;}
.about04.type_default .title_box:not([data-item="default"]),
.about04.type_default .mark_box:not([data-item="default"]),
.about04.type_korail .title_box:not([data-item="korail"]),
.about04.type_korail .mark_box:not([data-item="korail"]),
.about04.type_kdn .title_box:not([data-item="kdn"]),
.about04.type_kdn .mark_box:not([data-item="kdn"]) {opacity:0; height:0; visibility:hidden;}
.about04 .animation_container {overflow:hidden;}
.about04 .animation_container .pc {display:inline-block;}
.about04 .animation_container .mo {display:none;}
.about04 .animation_item {transform:translateY(100%); opacity:0; transition:.8s ease-in-out;}
.about04.type_default [data-item="default"] .animation_item {transition:none;}
.about04.type_default [data-item="default"] .animation_item,
.about04.type_korail [data-item="korail"] .animation_item,
.about04.type_kdn [data-item="kdn"] .animation_item {transform:translateY(0); opacity:1;}
/* .about04 .main_title_desc {transition-delay:0.3s;} */
.about04 .logo_box {display:flex; align-items:center; justify-content:center; gap:7rem; margin-top:4rem; margin-bottom:2.5rem;}
.about04 .logo_item {display:inline-flex; align-items:center; justify-content:center; width:30rem; height:30rem; padding:3rem; border-radius:50%; background-color:rgba(255,255,255,0.15); transition:.2s ease;}
.about04 .logo_item:hover,
.about04.type_korail .logo_item[data-name=korail],
.about04.type_kdn .logo_item[data-name=kdn] {background-color:rgb(79,56,244); background:linear-gradient(90deg, rgba(79,56,244,1) 0%, rgba(79,56,244,1) 31%, rgba(25,101,255,1) 100%);}
.about04 .mark_box {height:11.4rem;}


/* portfolio */
.portfolio {background-color:#191b23; color:#fff; text-align:center; display:flex; align-items:center; justify-content:center;}
.portfolio_list {display:flex; gap:3.5rem; text-align:left; margin-top:7rem;}
.portfolio_list .click-button {cursor: pointer;}
.portfolio_item {flex-shrink:0; width:37rem;}
.portfolio_list.type_wrap {flex-wrap:wrap;}
.portfolio_list.type_wrap .portfolio_item {width:calc(33.33% - 2.333rem);}
.portfolio_list.type_wrap .title .txt {color:#000;}
.portfolio_list.type_wrap .thum::before {display:block; content:""; width:100%; position:absolute; top:0; left:0; right:0; bottom:0; height:100%; background-color:rgba(0,0,0,0.05); pointer-events :none; z-index:1;}
.portfolio_item > a {display:block;}
.portfolio_item .thum {width:100%; height:0; padding-bottom:100%; overflow:hidden; position:relative;}
.portfolio_item .thum img {transition:.4s ease; width:100%; position:absolute; top:0; left:0; right:0; bottom:0; height:100%; object-fit:cover;}
.portfolio_item .thum .no_image {width:100%; height:100%; background-color:#eee; text-align:center; display:flex; align-items:center; justify-content:center; font-size:2rem; position:absolute; top:0; left:0; right:0; bottom:0;}
.portfolio_item .top_area {display:flex; justify-content:space-between; margin-bottom:1rem; height:2rem; align-items:center;}
.portfolio_item .year {display:block; font-size:1.8rem; color:#a7a7a7;}
.portfolio_item .title {margin-top:1.5rem; display:flex; align-items:center; color:#fff;}
.portfolio_item .title .badge {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:0.5rem 1rem 0.4rem 1rem; border-radius:2rem; background-color:#1852f8; line-height:1; height:2.8rem;}
.portfolio_item .title .txt {margin-left:0.5rem; font-size:1.9rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all;}
.portfolio_item.view_more .thum {background-color:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;}
.portfolio_item.view_more .thum .ico {transform:rotate(0); transition:.3s ease-in-out; position:absolute; top:calc(50% - 3.75rem); width:7.5rem; height:7.5rem;}
.portfolio_item.view_more:hover .thum .ico {transform:rotate(90deg);}
.portfolio_item .detail {display:none;}


/* contact */
#contact_mark {position:absolute; top:-6rem; left:0;}
.contact {background-color:#e9edf5; text-align:center; position:relative;}
.contact .form_box {text-align:left; max-width:80rem; margin:4rem auto 0 auto;}
.contact .form_box > .row {display:flex; margin-bottom:2.5rem;}
.contact .form_box dl {width:50%; padding:0 1rem;}
.contact .form_box dt {font-size:1.9rem; font-weight:700; margin-bottom:1.5rem;}
.contact .note {color:#333;}
.contact .note a {font-weight:700; text-decoration:underline;}
.contact .btn_box {margin-top:2.5rem;}





@media all and (max-width:1280px) {
    .about02 .txt_box {text-align:center; width:100%; min-width:auto;}
}





@media all and (max-width:1024px) {
	.about04 .animation_container .pc {display:none;}
	.about04 .animation_container .mo {display:inline-block;}
    .portfolio {padding-top:15rem; padding-bottom:11rem;}
    .portfolio_list {flex-wrap:wrap;}
    .portfolio_item {width:calc(33.33% - 2.333rem);}
    .portfolio_item.view_more {width:100% !important; margin-top:2rem; text-align:center;}
    .portfolio_item.view_more > a {display:inline-block;}
    .portfolio_item.view_more .thum {background-color:transparent; height:auto; padding:0;}
    .portfolio_item.view_more .thum .ico {position:relative; top:auto;}
    .portfolio_item.view_more .top_area {height:0;}
}





@media all and (max-width:768px) {.main_wrap > section {min-height:auto;}
    .sub_page {padding:11rem 0 16rem 0;}
    .about01 .inner {padding-top:11rem;}
    .about01_pagination .swiper-pagination-bullet {width:1.6rem; height:1.6rem;}
    .about01_pagination .swiper-pagination-bullet-active {width:2.1rem; height:2.1rem;}
    .about01_swiper .swiper-slide.bg_01 {background-image:url("/img/main/about01_bg01_mb.jpg");}
    .about01_swiper .swiper-slide.bg_02 {background-image:url("/img/main/about01_bg02_mb.jpg");}
    .about01_swiper .swiper-slide.bg_03 {background-image:url("/img/main/about01_bg03_mb.jpg");}
    .about02 {height:82rem; background-image:url("/img/main/about02_bg01_mb.jpg");}
    .about03 {padding-top:15rem; padding-bottom:15rem;}
    .about03 .txt_box {background-color:#eee; padding-bottom:6rem;}
    .about03 .inner {flex-wrap:wrap; justify-content:center; text-align:center;}
    .about03 .logo_list_wrap {height:40vh; padding:10rem 0; display:flex; flex-direction:column;}
    .about03 .logo_list_wrap::before, 
    .about03 .logo_list_wrap::after {height:30%;}
    .about03 .logo_list {padding:3rem 8rem; gap:6rem;}
    .about04 {padding:15rem 0;}
    .about04 .logo_box {gap:3rem;}    
    .portfolio_item .year {font-size:2.2rem;}
    .portfolio_item .title .badge {font-size:2rem; height:auto;}
    .portfolio_list .portfolio_item:not(.view_more) {width:calc(50% - 1.75rem) !important;}
    .portfolio_list .title .txt {font-size:2.3rem;}
    .portfolio_item.view_more .thum .ico {width:5.4rem; height:5.4rem;}
    .contact {padding-top:15rem; padding-bottom:15rem;}
    .contact .form_box > .row {flex-direction:column;}
    .contact .form_box dl {width:100%; padding:2rem 0;}
    .contact .form_box dt {font-size:2.8rem; margin-bottom:2rem;}
    .contact .btn_box {margin-top:4.5rem;}
}





@media all and (max-width:425px) {
	.about04 .logo_item {width:28rem; height:28rem;}
}





@media all and (max-width:360px) {
	.about04 .logo_item {width:23rem; height:23rem;}
}