@charset 'utf-8';

/* 전체 공통 스타일 */
@font-face {
    font-family:'Cormorant';
    src: url(../fonts/CormorantGaramond-Bold.ttf);
}
@font-face {
    font-family:'EB';
    src: url(../fonts/EBGaramond-ExtraBold.ttf);
}
@font-face {
    font-family:'NanumSquareNeo';
    src: url(../fonts/NanumSquareNeoOTF-Rg.otf);
}
@font-face {
    font-family:'Satisfy';
    src: url(../fonts/Satisfy-Regular.ttf);
}
@font-face {
    font-family:'UbuntuSans';
    src: url(../fonts/UbuntuSans-Medium.ttf);
}
@font-face {
    font-family:'UbuntuSans-exb';
    src: url(../fonts/UbuntuSans-ExtraBold.ttf);
}
:root{
    --main-color:#145e50;
    --main-color-40:rgba(20, 94, 80, 0.4);
    --line-color:#808080;
    --header-back-color:rgb(0, 0, 0, 1);
    --back-color:#efefef;
    --tit-text-color:#145e50;
    --stit-text-color:#145e50;
    --xl-txt-color:rgba(128, 128, 128, 0.2);
    --text-color-bk:#000;
    --text-color-wh:#fff;

    font-family:'NanumSquareNeo';
    font-size:24px;
    line-height:1.5;
    color:var(--text-color);
}


body{
    background:var(--back-color);
}
#wrap{
    overflow:hidden;
}
.container{
    max-width:1920px;
    margin:0 auto;
    padding:120px 30px 60px;
}
.fp-watermark{
    display:none;
}
.section h2{
    font-family:'EB';
    font-size:48px;
    color:var(--tit-text-color);
}
.section h3{
    font-family:'EB';
    font-size:28px;
    line-height:1;
    color:var(--stit-text-color);
}
.section h4{
    font-family:'UbuntuSans';
    font-size:28px;
    color:var(--stit-text-color);
}
.section p{
    /* root 기본폰트설정 */
    /* font-size:24px; */
    word-break:keep-all;
}
.section .btn{
    font-family:'UbuntuSans';
    cursor:pointer;
    color:var(--text-color-wh)
}
.section .btn:hover{
    text-decoration:underline;
}
.section .art-tit{
    max-width:100%;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    position:absolute;
    left:10%;
    right:0;
    top:110px;
}
.section .art-tit>h2{
    margin-right:20px;
}
.section .container::before{
    content:'';
    display:block;
    position:absolute;
    left:0;
    top:100px;
    width:15%;
    height:48px;
    background:var(--main-color-40);
}
.section .art-tit>span{
    display:inline-block;
    width:100%;
    height:1px;
    margin-top:30px;
    background:var(--line-color);
}
.section .art-con{
    padding:150px 0 0;
}
.section .swiper-button-next, .section .swiper-button-prev{
    color: var(--main-color);
}
.section .swiper-pagination{
    position: static;
    font-size: 18px;
    color: var(--main-color);
    font-family: 'UbuntuSans';
}



/* header style */
#header{
    position:fixed;
    z-index:100;
    width:100%;
    background:var(--header-back-color);
    color:var(--text-color-wh);
    font-family:'Cormorant';
    font-size:20px;
}
#header .container{
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    align-items: center;
    padding:10px 30px;
    height:inherit;
}
#header h1 a{
    display:block;
    background:url(../images/logo.png) no-repeat left center;
    background-size:26px;
    padding-left:35px;
    text-indent:-999px;
    transition:0.8s;
    overflow:hidden;
}
#header h1 a:hover{
    text-indent:0;
}
#header nav ul{
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-end;
    align-items: center;
}
#header nav ul li{
    margin-left:30px;
}


/* aside.btn-nav */
.btn-nav{
    display:none;
    position:fixed;
    left:30px;
    top:20px;
    width:32px;
    height:32px;
    background:var(--xl-txt-color) url(../images/logo.png) no-repeat center;
    background-size:26px;
    border-radius:30%;
    text-indent:-99999px;
    z-index:100;
    cursor:pointer;
}


/* sec.home style */
.home{
    background:url(../images/background-gr.jpg) no-repeat center;
    background-size:cover;
}
.home .container{
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    max-width:1200px;
}
.home #typing{
    display:inline-block;
    margin:0 auto;
    font-family:'Cormorant';
    font-size:60px;
    line-height:2;
    color:var(--main-color);
    text-align: center;
    order:2;
    letter-spacing:36px;
}
.home h3{
    font-family:'Cormorant';
    font-size:32px;
    color:var(--line-color);
    text-align: center;
    order:1;
    letter-spacing:18px;
}
.home .container::before{
    display:none;
}
.btn-theme{
    display:flex;
    flex-flow:row nowrap;
    gap:10px;
    position:fixed;
    z-index:100;
    right:100px;
    bottom:50px;
}
.theme-op{
    width:30px;
    height:30px;
    border-radius:20%;
    background:url(../images/heart-gr.svg) no-repeat center;
    background-size:contain;
    opacity:0.8;
    text-indent:-999999px;
}
#brown{
    background-image:url(../images/heart-bw.svg);
}
.theme-op:hover{
    opacity:1;
}


/* sec.about style */
.about h3{
    display:none;
}
.about .profile{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:60px;
}
.about .profile-art01{
    grid-column:1/2;
    grid-row:1/3;
}
.about .profile-art01 .img-box{
    position: relative;
    margin:50px auto 0;
    width:230px;
}
.about .profile-art01 img{
    position:absolute;
    z-index:20;
}
.about .profile-art01 .img-box::after{
    content:'';
    display:block;
    position:absolute;
    right:-60px;
    bottom:-380px;
    width:230px;
    height:180px;
    background:var(--main-color-40);
    z-index:10;
}
.about .profile-art02{
    grid-column:2/-1;
    padding-top:60px;
    position:relative;
}
.about .profile-art02::after{
    content:'PARK CHAEYUN';
    display:block;
    position:absolute;
    left:30px;
    top:-18px;
    font-family:'UbuntuSans-exb';
    font-size:90px;
    color:var(--xl-txt-color);
}
.about .profile-art03{
    grid-column:2/-1;
}
.about .profile-art03 li{
    display:grid;
    grid-template-columns:1fr 3fr;
    margin-bottom:0.5em;
}

.about .inform{
    display:grid;
    grid-template-columns:5fr 3fr;
    column-gap:20px;
    padding:0 180px;
}
.about .inform>article{
    margin-bottom:1em;
}
.about .info-art01{
    grid-row:1/3;
}
.about .inform h4{
    margin-bottom:0.6em;
}
.about .inform p{
    margin-bottom:1em;
}
.about .inform .info-art02 ul li:nth-child(2) p{
    margin-bottom:0.5em;
}
.about .inform li span{
    display:block;
    font-size:16px;
    color:var(--line-color)
}

.about .skills-art01{
    padding:0 60px;
}
.about .skills-art01::after{
    content:'SKILLS';
    display:block;
    position:absolute;
    right:100px;
    top:-150px;
    font-family:'UbuntuSans-exb';
    font-size:80px;
    color:var(--xl-txt-color);
}
.about .skills ul{
    display:flex;
    flex-flow:row wrap;
}
.about .skills ul li{
    position:relative;
    display:flex;
    justify-content:space-between;
    width:40%;
    margin:0 auto 2.5em;
    font-family:'UbuntuSans';
    font-size:22px;
}
.about .skills ul li::before{
    content:'';
    display:block;
    position:absolute;
    left:0;
    bottom:-30px;
    width:100%;
    height:15px;
    background:var(--tit-text-color);
    opacity:0.2;
}  
.about .skills li .after{
    position:absolute;
    left:0;
    bottom:-30px;
    width:0;
    height:15px;
    background:var(--tit-text-color);
}


/* sec.design style */
.design{
    /* background:var(--main-color); */
    background:url(../images/background-gr.jpg) no-repeat right center;
    background-size:cover;
}
.design .container::before{
    background:var(--text-color-wh);
    opacity:0.4;
}
.design h3{
    color:var(--text-color-wh);
    font-size:0.9em
}
.design p{
    color:var(--text-color-wh);
    opacity:0.7;
    font-size:0.8em;
}
.design .btn{
    font-size:0.9em;
}
.design .art-tit>span{
    background:var(--text-color-wh);
}
.design h2{
    color:var(--text-color-wh)
}

.desSwiper .swiper-slide{
    width:300px;
    height:450px;
    margin-right:10px;
    border-radius:15px;
    overflow:hidden;
    background:var(--text-color-wh) url(../images/img-design01-thum.png) no-repeat center top;
    background-size:cover;
    box-shadow:2px 10px 10px -8px var(--text-color-bk);
}
.desSwiper .swiper-slide:nth-child(2){
    background-image:url(../images/img-design02-thum.png);
}
.desSwiper .swiper-slide:nth-child(3){
    background-image:url(../images/img-design03-thum.png);
}
.desSwiper .swiper-slide:nth-child(4){
    background-image:url(../images/img-design04-thum.png);
}
.desSwiper .swiper-slide:nth-child(5){
    background-image:url(../images/img-design05-thum.png);
}

.desSwiper .contents{
    display:none;
    flex-flow:column nowrap;
    justify-content: space-between;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:48px 36px;
    background:rgba(0, 0, 0, 0.4);
    color:var(--text-color-wh);
    text-align: center;
}
.desSwiper .swiper-slide:hover .contents{
    display:flex;
}

.des-modal {
    display:none;
    position:absolute;
    z-index:90;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.7);
}
.des-modal .modal-popup{
    position:absolute;
    z-index:90;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:10%;
    width:auto;
    height:auto;
    margin:auto;
}
#modal-img{
    width: 100%;
    height:100%;
    object-fit:contain;
}
.des-modal .btn-close{
    position:absolute;
    z-index:91;
    left:50%;
    top:80px;
    cursor:pointer;
    font-family:'UbuntuSans';
    /* font-weight:700; */
    font-size:32px;
    color:var(--text-color-wh);
    /* text-shadow: -1px 0px white, 0px 1px white, 1px 0px white, 0px -1px white; */
}
.desSwiper .swiper-pagination{
    margin-top:80px;
}


/* sec.publishing style */
.pubSwiper .swiper-slide{
    display:grid;
    grid-template-columns: repeat(6,1fr);
    gap:40px;
    justify-content:space-between;
    align-items:center;
    padding:0 40px;
}
.pubSwiper .pub-thumbnail{
    grid-column:1/5;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    gap:30px;
}
.pubSwiper .pub-contents{
    grid-column:5/-1;
}

.pubSwiper .swiper-slide .img-box{
    border-radius:15px;
    overflow:hidden;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    box-shadow:10px 10px 10px var(--xl-txt-color);
    transition:3s linear;
}
/* 01 포트폴리오 */
.pubSwiper .slide01 .desk-box{
    background-image:url(../images/img-publishing01-d.jpg);
    transition:0.5s linear;
}
.pubSwiper .slide01 .mob-box{
    background-image:url(../images/img-publishing01-m.jpg);
    transition:0.5s linear;
}
/* 02 디자인페이지 */
.pubSwiper .slide02{
    display:none;
}
.pubSwiper .slide02 .desk-box{
    background-image:url(../images/img-publishing02-d.jpg);
}
/* 03 SNS */
.pubSwiper .slide03 .desk-box{
    background-image:url(../images/img-publishing03-d.jpg);
}
.pubSwiper .slide03 .mob-box{
    background-image:url(../images/img-publishing03-m.jpg);
}
/* 04 메가박스*/
.pubSwiper .slide04 .desk-box{
    background-image:url(../images/img-publishing04-d.jpg);
}
.pubSwiper .slide04 .mob-box{
    background-image:url(../images/img-publishing04-m.jpg);
}
/* 05 빽다방 */
.pubSwiper .slide05 .desk-box{
    background-image:url(../images/img-publishing05-d.jpg);
}
.pubSwiper .slide05 .mob-box{
    background-image:url(../images/img-publishing05-m.jpg);
}
/* 06 할리스 */
.pubSwiper .slide06 .desk-box{
    background-image:url(../images/img-publishing06-d.jpg);
}
/* 07 한솔제지 */
.pubSwiper .slide07 .desk-box{
    background-image:url(../images/img-publishing07-d.jpg);
}

.pub-thumbnail .img-box:hover{
    background-position-y:bottom;
}
.pub-thumbnail .desk-box{
    width:480px;
    height:320px;
}
.pub-thumbnail .mob-box{
    width:320px;
    height:480px;
}
.pubSwiper .swiper-pagination{
    margin-top:80px;
}
.pubSwiper .pub-contents h3{
    margin-bottom:0.5em;
}
.pubSwiper .pub-contents>p{
    margin-bottom:1em;
}
.pubSwiper .pub-contents ul{
    margin-bottom:1em;
}
.pubSwiper .pub-contents li{
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    gap:20px;
    margin-bottom:6px;
}
.pubSwiper .pub-contents li>p{
    padding-top:0.3em;
}
.pubSwiper .btn-more{
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
    align-items:center;
    gap:30px;
}
.pubSwiper .btn-more .btn{
    padding:3px 12px;
    border-radius:12px;
    background:var(--main-color-40);
}
.pubSwiper .btn:hover{
    background:var(--main-color);
}


/* footer.contact style */
.contact{
    background:var(--main-color);
    color:var(--text-color-wh);
}
.contact .container{
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
}
.contact .container::before{
    left:50%;
    top:155px;
    transform:translateX(-50%);
    width:22%;
    background:var(--text-color-wh);
    opacity:0.4;
}
.contact .art-tit{
    left:0;
}
.contact .art-tit>span{
    background:var(--text-color-wh);
    margin:0;
}
.contact .art-tit>h2{
    color:var(--text-color-wh);
    margin:0 20px;
}
.contact h3{
    display:none;
}
.contact h4{
    color:var(--text-color-wh);
    margin-bottom:1em;
}
.contact-con ul{
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-evenly;
    align-items:flex-start;
    margin-bottom:15%;
}
.contact-con li{
    display:flex;
    flex-flow:column nowrap;
    align-items: center;
}
.contact-con ul img{
    width:100px;
    padding:6px;
    border-radius:10px;
    background:var(--text-color-wh);
}
.contact address{
    display:flex;
    flex-flow:column nowrap;
    gap:1em;
    align-items:center;
    text-align:center;
    font-family:'Cormorant';
    word-break:keep-all;
    font-size:18px;
}
.contact address p:first-child{
    font-family:'NanumSquareNeo';
    font-size:18px;
}
.contact address .img-box{
    width:40px;
    margin-top:2em;
}

@media (max-width:1280px){
    /* 전체 스타일 */
    .section .container{
        padding-top:180px 20px 20px;
    }
    .section h2{
        font-size:38px;
    }
    .section h3{
        font-size:24px;
    }
    .section h4{
        font-size:24px;
    }
    .section p{
        font-size:16px;
    }
    .section .btn{
        font-size:18px;
    }
    .section .art-tit{
        top:80px;
    }
    .section .container::before{
        top:70px;
        height:38px;
    }
    .section .art-con{
        padding:0;
    }
    .section .swiper-button-next:after, .section .swiper-button-prev:after {
        font-size:32px;
    }
    .section .swiper-pagination{
        font-size: 14px;
        margin-top:40px;
    }

    /* header */
    #header{
        font-size:16px;
    }

    /* home */
    .home .container{
        max-width:900px;
    }
    .home #typing{
        font-size:48px;
        letter-spacing:24px;
    }
    .home h3{
        font-size:24px;
        letter-spacing:12px;
    }


    /* about */
    .about .profile-art01 .img-box{
        width:200px;
    }
    .about .profile-art01 .img-box::after{
        bottom:-300px;
        width:180px;
        height:100px;
    }
    .about .profile-art02::after{
        font-size:60px;
        top:8px;
    }
    .about .inform li span{
        font-size:14px;
    }
    .about .skills ul li{
        font-size:18px;
    }
    .about .skills ul li::before,
    .about .skills li .after{
        bottom:-20px;
        height:10px;
    }

    /* design */
    .desSwiper .swiper-slide{
        width:220px;
        height:330px;
    }
    .desSwiper .contents{
        padding:24px 18px
    }

    /* publishing */
    .pubSwiper .swiper-slide{
        gap:30px;
    }
    .pubSwiper .desk-box{
        width:300px;
        height:200px;
    }
    .pubSwiper .mob-box{
        width:200px;
        height:300px;
    }
    .des-modal .btn-close{
        font-size:30px;
    }


    /* contact */
    .contact .container::before{
        top:106px;
        width:22%;
    }
    .contact address{
        font-size:16px;
    }
    .contact address p{
        font-size:16px;
    }

}


@media (max-width:768px){
    /* 전체 스타일 */
    .section .container{
        padding:20px 16px 16px;
    }
    .section h2{
        font-size:32px;
    }
    .section h3{
        font-size:20px;
    }
    .section h4{
        font-size:20px;
    }
    .section p{
        font-size:16px;
    }
    .section .btn{
        font-size:16px;
    }
    .section .art-tit{
        top:60px;
        left:20%;
    }
    .section .container::before{
        top:60px;
        width:25%;
        height:24px;
    }
    .section .art-tit>span{
        margin-top:16px;
    }
    .section .art-con{
        padding:0;
    }
    .section .swiper-button-next:after, .section .swiper-button-prev:after {
        font-size:24px;
    }
    .section .swiper-pagination{
        font-size: 14px;
        margin-top:60px;
    }


    /* header */   
    #header{
        transform:translatex(-1000px);
        transition:0.5s;
        width:auto;
        height:100vh;
        font-size:14px;
    }
    #header .container{
        display:block;
        padding:50px 0;
    }
    #header.active{
        transform:translatex(0px);
    }
    #header h1 a:hover{
        text-indent:-999px;
    }
    .btn-nav{
        display:block;
    }
    #header h1 a{
        background-image:none;
    }
    #header nav ul{
        flex-flow:column nowrap;
        justify-content:flex-start;
        align-items:flex-start;
        padding:0 40px 0 30px;
    }
    #header nav ul li{
        margin-bottom:16px;
        margin-left:0;
        padding:0;
    }


    /* home */
    .home{
        background-position:right center;
    }
    .home .container{
        max-width:700px;
    }
    .home #typing{
        font-size:32px;
        letter-spacing:16px;
    }
    .home h3{
        font-size:20px;
        letter-spacing:10px;
    }
    .home .btn-theme{
        right:30px;
        bottom:40px;
    }


    /* about */
    .about .profile{
        gap:20px;
        display:flex;
        flex-flow:column nowrap;
    }
    .about .profile-art01 .img-box{
        position:static;
        margin:0 auto;
        width:24%;
        height:36%;
    }
    .about .profile-art01 img{
        position:static;
    }
    .about .profile-art01 .img-box::after{
        display:none;
    }
    .about .profile-art02{
        grid-area:auto;
        text-align: center;
        padding-top:30px;
    }
    .about .profile-art02::after{
        left:0;
        right:0;
        top:0;
        text-align: center;
        font-size:50px;
        line-height:1;
    }
    .about .profile-art03 li{
        grid-template-columns:repeat(6,1fr);
    }
    .about .profile-art03 li h4{
        grid-column:2/3;
    }
    .about .profile-art03 li p{
        grid-column:3/-1
    }

    .about .inform{
        padding:0 90px;
        display:flex;
        flex-flow:column nowrap;
    }
    .about .inform h3{
        margin-bottom:16px;
    }
    .about .inform p{
        margin-bottom:18px;
    }
    .about .inform li span{
        font-size:12px;
    }

    .about .skills-art01{
        padding:0 80px;
    }
    .about .skills-art01::after{
        font-size:50px;
        right:50px;
        top:-80px;
    }
    .about .skills ul li::before {
        bottom: -20px;
    }
    .about .skills ul li .after {
        bottom: -20px;
    }
    .about .skills ul li{
        width:80%;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size:20px;
    }


    /* design */
    .desSwiper .swiper-slide{
        width:260px;
        height:390px;
    }
    .desSwiper .contents{
        padding:20px 16px
    }
    .des-modal .btn-close{
        top:100px;
        font-size:24px;
    }


    /* publishing */
    .pubSwiper .pub-thumbnail{
        grid-column:1/-1;
    }
    .pubSwiper .pub-contents{
        grid-column:1/-1;
        padding-left:20px;
    }


     /* contact */
     .contact .container::before{
        top:86px;
        width:22%;
    }
    .contact .art-tit{
        left:0;
    }
    .contact .art-tit>span{
        margin:0;
    }
    .contact-con ul{
        margin-bottom:50%;
    }
    .contact address{
        font-size:14px;
    }
    .contact address p:first-child{
        font-size:14px;
    }
    .contact-con ul img{
        width:80px;
    }
}


@media (max-width:520px){
    /* 전체스타일 */
    .section .container{
        padding:80px 16px 16px;
    }
    .section h2{
        font-size:22px;
    }
    .section h3{
        font-size:14px;
    }
    .section h4{
        font-size:14px;
    }
    .section p{
        font-size:11px;
    }
    .section .btn{
        font-size:11px;
    }
    .section .art-tit{
        top:31px;
    }
    .section .art-tit>h2{
        margin-right:10px;
    }
    .section .container::before{
        top:28px;
        height:22px;
    }
    .section .swiper-button-next:after, .section .swiper-button-prev:after {
        font-size:20px;
    }
    .section .swiper-pagination{
        font-size: 11px;
    }


    /* home */
    .home #typing{
        font-size:32px;
        letter-spacing:10px;
    }
    .home h3{
        font-size:20px;
        letter-spacing:5px;
    }


    /* about */
    .about .profile{
        gap:16px;
    }
    .about .profile-art01 .img-box{
        width:30%;
        height:45%;
    }
    .about .profile-art02{
        padding-top:20px;
    }
    .about .profile-art02::after{
        top:0;
        font-size:36px;
    }
    .about .profile-art03 li{
        grid-template-columns:repeat(6,1fr);
    }
    .about .profile-art03 li h3{
        grid-column:2/3;
    }
    .about .profile-art03 li p{
        grid-column:3/-1
    }

    .about .inform{
        padding:0 60px;
    }
    .about .inform>article{
        margin-bottom:0.8em;
    }
    .about .inform li span{
        font-size:8px;
    }
    .about .inform p{
        margin-bottom:0.8em;
    }
    
    .about .skills-art01{
        padding:0 40px;
    }
    .about .skills-art01::after{
        display:none;
    }
    .about .skills ul li{
        width:90%;
        margin:0 auto 2em;
        font-size:14px;
    }
    .about .skills ul li::before,
    .about .skills ul li .after{
        bottom:-10px;
        height:8px;
    }


    /* design */
    .desSwiper .swiper-slide{
        width:180px;
        height:270px;
    }
    

    /* publishing */
    .pubSwiper .swiper-slide{
        padding:0;
    }
    .pubSwiper .pub-thumbnail{
        gap:10px;
    }
    .pubSwiper .img-box{
        box-shadow:4px 4px 4px var(--xl-txt-color);
    }
    .pubSwiper .desk-box{
        width:180px;
        height:120px;
    }
    .pubSwiper .mob-box{
        width:120px;
        height:180px;
    }


    /* contact */
    .contact .container{
        padding:16px;
    }
    .contact .container::before{
        top:50px;
        width:34%;
    }
    .contact-con ul img{
        width:60px;
        padding:3px;
        border-radius:4px;
    }
    .contact address{
        font-size:10px;
    }
    .contact address p:first-child{
        font-size:10px;
    }
    .contact address .img-box{
        width:25px;
    }
}


@media (orientation: portrait){
    .des-modal .modal-popup{
        padding:5%;
    }
}