@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {text-align:center; font-family:"Roboto",sans-serif; font-size:50px; line-height:1em; margin-bottom:55px;}
.doc-tit:after {content:""; display:block; width:120px; height:2px; background:#000; margin:30px auto 0;}
.doc-tit.type2 {margin-bottom:70px;}
.doc-tit.type2:after {width:60px;}

.hr-line {border-bottom:1px solid #e5e5e5; margin:140px 0;}

.about-cnt1 {text-align:center; margin-bottom:155px;}
.about-cnt1 .top-txt {margin-bottom:40px; font-size:30px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.about-cnt1 .top-txt .lg {color:#475471; font-size:70px; line-height:1.3em; letter-spacing:-.05em;}
.about-cnt1 .row {display:flex;}
.about-cnt1 .row .col {flex:1; padding:0 15px;}
.about-cnt1 .row dl {margin-top:30px;}
.about-cnt1 .row dt {font-family:"Roboto",sans-serif; font-size:26px; font-weight:700; line-height:1.3em; margin-bottom:7px;}
.about-cnt1 .row dd {font-size:18px; font-weight:300; line-height:1.3em;}

.about-cnt2 {padding:140px 0 225px; text-align:center; color:#fff; background:url("../images/sub/about_cnt2_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.about-cnt2 h2 {font-size:44px; font-weight:200; line-height:1.3em; letter-spacing:-.025em; margin-bottom:80px;}
.about-cnt2 h2 .round {display:inline-flex; align-items:center; padding:11px 55px; margin:0 5px; font-size:35px; font-weight:700; background:rgba(0,0,0,.3); border:2px solid #fff; border-radius:50px;}
.about-cnt2 h2 .round img {vertical-align:middle; margin:0 29px;}
.about-cnt2 .img {margin-bottom:70px;}
.about-cnt2 .txt1 {display:inline-block; width:100%; max-width:1022px; text-align:center; padding:24px 55px; font-size:30px; font-weight:200; line-height:1.3em; letter-spacing:-.025em; background:#1a343e; border-radius:50px;}
.about-cnt2 .txt2 {margin-top:30px; font-size:20px; font-weight:200; line-height:1.5em; letter-spacing:-.01em;}

.about-cnt3 {position:relative; text-align:center; margin:-95px 0 -90px}

.about-cnt4 {padding:145px 0 140px; text-align:center; color:#fff; background:url("../images/sub/about_cnt4_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.about-cnt4 .row {display:flex;}
.about-cnt4 .col {width:50%; padding:0 20px;}
.about-cnt4 dt {font-family:"Roboto",sans-serif; font-size:24px; font-weight:700; line-height:1.3em; margin-bottom:25px;}
.about-cnt4 dd {font-size:28px; font-weight:200; line-height:1.429em; letter-spacing:-.025em;}

.about-cnt5 {padding:140px 0;}
.about-cnt5 .row {display:flex; margin:0 -20px;}
.about-cnt5 .col {width:50%; padding:0 20px;}
.about-cnt5 .box {display:flex; padding:20px; box-shadow:0 0 20px rgba(0,0,0,.1);}
.about-cnt5 .box .cnt {flex:1 1 auto; min-width:0; width:1%; padding:0 20px;}
.about-cnt5 .box .cnt dl {min-height:222px; padding:28px 0;}
.about-cnt5 .box .cnt dt {font-size:30px; font-weight:700; line-height:1.3em; letter-spacing:-.05em; margin-bottom:8px;}
.about-cnt5 .box .cnt dd {font-size:20px; font-weight:300; line-height:1.5em; letter-spacing:-.025em;}
.about-cnt5 .box .cnt .btn {display:flex; align-items:center; justify-content:center; width:95%; max-width:220px; height:60px; color:#fff; font-size:20px; font-weight:300; line-height:1.5em; letter-spacing:-.025em;}
.about-cnt5 .box .cnt .btn.type1 {background:#ea5350}
.about-cnt5 .box .cnt .btn.type2 {background:#475471}
.about-cnt5 .box .img {width:300px;}

.contact-cnt1 {color:#475471; font-size:70px; font-weight:300; line-height:1.286em; letter-spacing:-.08em; margin-bottom:70px;}

.contact-cnt2 {padding-bottom:270px; overflow:hidden;}
.contact-cnt2 .group {margin-bottom:130px; display:flex; align-items:center;}
.contact-cnt2 .group:last-child {margin-bottom:0;}
.contact-cnt2 .img {position:relative; width:600px;}
.contact-cnt2 .img:before {content:""; position:absolute; top:45px; width:100vw; height:100%; background:#f8f8f8;}
.contact-cnt2 .img img {position:relative;}
.contact-cnt2 .cnt {flex:1 1 auto; min-width:0; width:1%;}
.contact-cnt2 .cnt p {font-size:20px; font-weight:300; line-height:1.5em; letter-spacing:-.025em;}
.contact-cnt2 .cnt .en {color:#fff; font-family:"Roboto",sans-serif; font-size:100px; font-weight:900; line-height:1em; -webkit-text-stroke:.25px #aaa; margin-bottom:5px;}
.contact-cnt2 .cnt h3 {font-size:30px; line-height:1.3em; margin-bottom:10px;}
.contact-cnt2 .cnt .btn {display:flex; align-items:center; justify-content:center; margin-top:45px; width:220px; height:60px; color:#fff; font-size:20px; font-weight:300; line-height:1.5em; letter-spacing:-.025em;}
.contact-cnt2 .cnt .btn.type1 {background:#ea5350}
.contact-cnt2 .cnt .btn.type2 {background:#475471}
.contact-cnt2 .type1 .img:before {right:-45px;}
.contact-cnt2 .type1 .cnt {margin-left:110px;}
.contact-cnt2 .type2 .img {order:2;}
.contact-cnt2 .type2 .img:before {left:-45px;}
.contact-cnt2 .type2 .cnt {margin:0 75px;}

.artwork-list {padding:0 50px;}
.artwork-list .items {margin:0 -15px;}
.artwork-list .items:after {content:""; display:block; clear:both;}
.artwork-list .item-sizer,
.artwork-list .item {float:left; width:20%;}
.artwork-list .item {padding:0 15px 60px; transition:ease .3s; transform:scale(.9); opacity:0;}
.artwork-list .item.active {transform:scale(1); opacity:1;}
.artwork-list .item a {display:block;}
.artwork-list .thumb {margin-bottom:22px; max-height:700px; overflow:hidden;}
.artwork-list .thumb img {display:block; width:100%;}
.artwork-list .info {padding:0 5px;}
.artwork-list .txt1 {font-family:"Roboto",sans-serif; color:#999; font-size:18px; font-weight:700; line-height:1.3em; margin-bottom:3px;}
.artwork-list .txt2 {font-size:26px; font-weight:400; line-height:1.385em; letter-spacing:-.03em; margin-bottom:10px;}
.artwork-list .txt3 {font-family:'Playfair Display', serif; font-style:italic; color:#999; font-size:24px; font-weight:400; line-height:1.3em;}

.pop-page-prev,
.pop-page-next {position:fixed; top:50%;  margin-top:-30px; width:60px; height:60px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.pop-page-prev {left:50%; margin-left:-580px; background-image:url("../images/sub/page_prev.png");}
.pop-page-next {right:50%; margin-right:-580px; background-image:url("../images/sub/page_next.png");}

.artwork-view-wrap {padding:50px; width:100%;}
.artwork-view-head {display:flex; align-items:center; margin:-6px 0 40px;}
.artwork-view-head .img {width:140px; height:140px; margin-right:17px; text-align:center; position:relative; border-radius:100%; overflow:hidden;}
.artwork-view-head .txt1 {font-family:"Roboto",sans-serif; color:#999; font-size:18px; font-weight:700; line-height:1.3em;}
.artwork-view-head .txt2 {font-size:34px; font-weight:500; line-height:1.385em; letter-spacing:-.03em; margin-bottom:5px;}
.artwork-view-head .txt3 {font-family:'Playfair Display', serif; font-style:italic; color:#999; font-size:24px; font-weight:400; line-height:1.3em;}

.artwork-view-content {font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.025em;}
.artwork-view-content .slider {position:relative; margin-bottom:23px;}
.artwork-view-content .slider .swiper-container .swiper-wrapper .swiper-slide img {width:100%; height:auto;}
.artwork-view-content .swiper-pagination {position:absolute; bottom:17px; left:0; width:100%; text-align:center; z-index:50;}
.artwork-view-content .swiper-pagination-bullet {width:10px; height:10px; background:#fff; margin:0 4px; opacity:.5; border-radius:10px; transition:.2s;}
.artwork-view-content .swiper-pagination-bullet-active {width:30px; opacity:1;}
.artwork-view-content .hash-tag {display:flex; flex-wrap:wrap; margin:22px 0 0 -18px; color:#ea5350;}
.artwork-view-content .hash-tag span {margin:5px 0 0 18px;}
.artwork-view-content .copyright {margin-top:115px; color:#999; font-size:14px; line-height:1em; letter-spacing:0;}

.artist-list {padding:0 50px;}
.artist-list .items {margin:0 -15px;}
.artist-list .items:after {content:""; display:block; clear:both;}
.artist-list .item-sizer,
.artist-list .item {float:left; width:20%;}
.artist-list .item {padding:0 15px 60px; transition:ease .3s; transform:scale(.9); opacity:0;}
.artist-list .item.active {transform:scale(1); opacity:1;}
.artist-list .item a {display:block;}
.artist-list .thumb {position:relative; margin-bottom:22px;}
.artist-list .thumb img {display:block; width:100%;}
.artist-list .thumb:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); transition:.4s; opacity:0;}
.artist-list .thumb span {position:absolute; top:50%; left:50%; margin-top:10px; transform:translate(-50%,-50%); color:#fff; font-family:"Roboto",sans-serif; font-size:18px; line-height:1.3em; transition:.4s; opacity:0; z-index:2;}
.artist-list .info {padding:0 5px;}
.artist-list .txt1 {color:#999; font-size:18px; font-weight:700; line-height:1.3em;}
.artist-list .txt2 {font-size:36px; font-weight:500; line-height:1.385em; letter-spacing:-.03em; margin-bottom:5px;}
.artist-list .txt3 {font-family:'Playfair Display', serif; font-style:italic; color:#999; font-size:24px; font-weight:400; line-height:1.3em;}
.artist-list a:hover .thumb:after {opacity:1;}
.artist-list a:hover .thumb span {opacity:1; margin-top:0;}

.artist-slider {position:relative; margin-bottom:130px;}
.artist-slider .swiper-slide img {width:100%;}
.artist-slider .swiper-pagination {position:absolute; bottom:17px; left:0; width:100%; text-align:center; z-index:50;}
.artist-slider .swiper-pagination-bullet {width:10px; height:10px; background:#fff; margin:0 4px; opacity:.5; border-radius:10px; transition:.2s;}
.artist-slider .swiper-pagination-bullet-active {width:30px; opacity:1;}
.artist-slider .txt-wrap {position:absolute; top:19%; left:0; width:100%; color:#fff; z-index:50;}
.artist-slider .txt1 {display:inline-block; min-width:182px; text-align:center; padding:7px 20px; font-size:20px; font-weight:500; line-height:1.3em; background:rgba(0,0,0,.8); margin-bottom:10px;}
.artist-slider .txt2 {font-family:"Roboto",sans-serif; font-size:100px; font-weight:700; line-height:1em; margin-bottom:3px;}
.artist-slider .txt3 {font-family:'Playfair Display', serif; font-style:italic; font-size:60px; font-weight:400; line-height:1.3em;}

.artist-view {padding:15px 0 0 0; display:flex;}
.artist-view .img {width:50%; padding-right:19px;}
.artist-view .cnt {width:50%; padding-left:25px; font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.025em;}
.artist-view .tit-area {display:flex; align-items:center; justify-content:space-between; margin-bottom:25px;}
.artist-view .tit-area .tit {display:flex; flex-wrap:wrap; align-items:center; margin-top:-3px;}
.artist-view .tit-area .tit h3 {font-size:40px; font-weight:500; line-height:1.1em; letter-spacing:-.025em; margin-right:15px;}
.artist-view .tit-area .tit p {font-family:'Playfair Display', serif; font-style:italic; color:#999; font-size:24px; font-weight:400; line-height:1.3em; letter-spacing:0; margin-top:8px;}
.artist-view .tit-area .sns {display:flex;}
.artist-view .tit-area .sns a {margin-left:18px;}
.artist-view .tit-area .sns a:hover {opacity:.5}
.artist-view .career {margin-top:65px;}
.artist-view .career h4 {font-family:"Roboto",sans-serif; font-size:26px; font-weight:500; line-height:1.3em; margin-bottom:25px;}
.artist-view .career ul li {padding-left:.6em; text-indent:-.6em; margin-bottom:8px;}
.artist-view .career ul li:last-child {margin-bottom:0;}

.project-slider {padding:120px 0 105px; margin-bottom:80px; background:url("../images/sub/project_bg.jpg") 50% 50% no-repeat; background-size:cover; overflow:hidden;}
.project-slider .contain {position:relative;}
.project-slider h2 {position:absolute; top:105px; left:calc(50% + 30px); font-family:"Roboto",sans-serif; font-size:50px; line-height:1.3em; z-index:50;}
.project-slider .swiper-slide {opacity:0 !important;}
.project-slider .swiper-slide-active {opacity:1 !important;}
.project-slider .wrap {display:flex;}
.project-slider .left {width:50%; padding-right:20px;}
.project-slider .right {width:50%; padding:200px 30px 0 30px;}
.project-slider .img {max-width:540px; margin:0 auto;}
.project-slider .img img {width:100%;}
.project-slider .name {font-family:"Roboto","Noto Sans KR",sans-serif; font-size:24px; line-height:1.3em; letter-spacing:-.025em;}
.project-slider .tit {font-size:50px; font-weight:500; line-height:1.3em; letter-spacing:-.025em; margin-bottom:10px;}
.project-slider .txt {font-size:18px; font-weight:200; line-height:1.667em; letter-spacing:-.025em;}
.project-slider .more {margin-top:45px; display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-size:14px; font-weight:500; line-height:1.5em;}
.project-slider .more:after {content:""; margin-left:10px; width:24px; height:9px; background:url("../images/sub/btn_arrow.png") 50% 100% no-repeat; transition:.2s;}
.project-slider .more:hover::after {transform:translateX(5px)}
.project-slider .arrows {position:absolute; top:110px; right:75px; display:flex; z-index:50;}
.project-slider .slide-btn {margin-left:12px; width:50px; height:50px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%;}
.project-slider .slide-btn.prev {background-image:url("../images/sub/slide_prev.png");}
.project-slider .slide-btn.next {background-image:url("../images/sub/slide_next.png");}

.project-list {padding:0 50px;}
.project-list .items {margin:0 -15px;}
.project-list .items:after {content:""; display:block; clear:both;}
.project-list .item-sizer,
.project-list .item {float:left; width:20%;}
.project-list .item {padding:0 15px 60px; transition:ease .3s; transform:scale(.9); opacity:0;}
.project-list .item.active {transform:scale(1); opacity:1;}
.project-list .item a {display:block;}
.project-list .thumb {margin-bottom:22px;}
.project-list .thumb img {display:block; width:100%;}
.project-list .info {padding:0 5px;}
.project-list .txt1 {font-family:"Roboto",sans-serif; color:#999; font-size:18px; font-weight:700; line-height:1.3em; margin-bottom:3px;}
.project-list .txt2 {font-size:26px; font-weight:400; line-height:1.385em; letter-spacing:-.03em; margin-bottom:10px;}
.project-list .txt3 {font-family:"Roboto",sans-serif; color:#999; font-size:18px; font-weight:300; line-height:1.3em;}

.collabo-list .items {margin:0 -20px;}
.collabo-list .items:after {content:""; display:block; clear:both;}
.collabo-list .item-sizer,
.collabo-list .item {float:left; width:33.33333333%;}
.collabo-list .item {padding:0 20px 60px; transition:ease .3s; transform:scale(.9); opacity:0;}
.collabo-list .item.active {transform:scale(1); opacity:1;}
.collabo-list .item a {display:block;}
.collabo-list .thumb {position:relative; margin-bottom:22px;}
.collabo-list .thumb img {display:block; width:100%;}
.collabo-list .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #e5e5e5;}
.collabo-list .info {padding:0 5px;}
.collabo-list .txt1 {font-family:"Roboto",sans-serif; color:#999; font-size:18px; font-weight:700; line-height:1.3em; margin-bottom:3px;}
.collabo-list .txt2 {font-size:26px; font-weight:400; line-height:1.385em; letter-spacing:-.03em; margin-bottom:10px;}
.collabo-list .txt3 {font-family:'Playfair Display', serif; font-style:italic; color:#999; font-size:24px; font-weight:400; line-height:1.3em;}