@charset "utf-8";

.sub-title{width: 100%;height: 400px;background: url() 50%/cover no-repeat;display: flex;align-items: center;}
.gallery-title{
    background-image: url(../images/sub-title-bg-gallery.png);
}
.news-title{background-image: url(../images/sub-title-bg-news.png);}
.contact-title{background-image: url(../images/sub-title-bg-contact.png);}
.sub-title-text{padding-left: 80px;color: #fff;}
.news-title-text{color: #000;}
.sub-title-text p{font-size: 1rem/* 18 */;margin-top: 4px;font-family: 'Noto Serif KR', serif;}
.sub-title-text p:nth-child(1){margin-top: 0;}
.sub-title-text h4{margin-top: 4px;font-size: 2.875rem/* 46 */;font-weight: 500;}

.madein{padding-bottom: 120px;}
.gallery-con{padding-top: 200px;}
.gallery-con h5{
    text-align: center;
    font-size: 2.25rem/* 36 */;
    font-family: 'Noto Serif KR', serif;
    
}
.gallery-con h5::before{
    content: "";
    display: block;
    width: 1px;
    height: 100px;
    background: #333;
    margin: 0 auto 30px;
}
.gallery-con > p{text-align: center;font-size: 1rem;margin-top: 5px;color: #B47E4C;}
.gallery-con figure{margin-top: 100px;}
.gallery-text{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 50px;
    text-align: left;
}
.gallery-left{width: 32%;}
.gallery-left strong{font-size: 1.625rem/* 26 */;color: #B47E4C;}
.gallery-left p{font-size: 0.9375rem;margin-top: 4px;}
.gallery-right{width: 68%;font-size: 1rem;line-height: 1.8;}
.gallery-right p{margin-top: 10px;}
.gallery-right p:nth-child(1){margin-top: 0;}


.made-con{padding-top: 200px;}
.made-con h5{
    text-align: center;
    font-size: 2.25rem/* 36 */;
    font-family: 'Noto Serif KR', serif;
}
.made-con h5::before{
    content: "";
    display: block;
    width: 1px;
    height: 100px;
    background: #333;
    margin: 0 auto 30px;
}
.made-con > p{text-align: center;font-size: 1rem;margin-top: 5px;color: #B47E4C;}
.made-con table{margin-top: 100px;text-align: center;width: 100%;font-size: 1rem;}
.made-con table thead{background: #B47E4C;border: 1px solid #B47E4C}
.made-con table thead tr th{padding: 16px 4px;color: #fff;}
.made-con table thead tr th:nth-child(2){border-right: 1px solid #fff;border-left: 1px solid #fff;}
.made-con table tbody tr td{padding: 16px 0;border: 1px solid #B47E4C;vertical-align: middle;}
.made-con table tbody tr:nth-child(even) td{background: #F0E9E2;}




.process-icon-wrap{
    width: 100%;
    height: 340px;
    background: url(../images/process-bg.png) 50% 100%/cover no-repeat;
    background-attachment: fixed;
}
.process-icon-wrap > .inner{display: flex;align-items: center;}
.process-icon{width: 100%;}
.process-icon > p{text-align: center;color: #fff;font-size: 1.5rem/* 24 */;}
.process-icon > p::after{
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: #fff;
    margin: 20px auto 0;
}
.process-icon > ul{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
}
.process-icon > ul li{text-align: center;}
.process-icon > ul li p::before{
    content: "";
    display: block;
    width: 94px;
    height: 70px;
    background: url() 50%/cover no-repeat;
    margin: 0 auto 10px;
}
.process-icon > ul li:nth-child(1) p::before{background-image: url(../images/process-icon1.png);}
.process-icon > ul li:nth-child(2) p::before{background-image: url(../images/process-icon2.png);}
.process-icon > ul li:nth-child(3) p::before{background-image: url(../images/process-icon3.png);}
.process-icon > ul li:nth-child(4) p::before{background-image: url(../images/process-icon4.png);}
.process-icon > ul li:nth-child(5) p::before{background-image: url(../images/process-icon5.png);}
.process-icon > ul li:nth-child(6) p::before{background-image: url(../images/process-icon6.png);}

.pro-intro-wrap{padding-top: 100px;}
.pro-intro{display: flex;justify-content: space-between;align-items: flex-start;}
.pro-intro figure{width: 46%;}
.pro-intro-text{width: 50%;}
.pro-intro-text h4{
    font-size: 2rem/* 32 */;
    font-family: 'Noto Serif KR', serif;
}
.pro-intro-text p{
    font-size: 1rem;
    margin-top: 30px;
    line-height: 1.5;
}

.process-hanwool-wrap{padding-top: 100px;padding-bottom: 20px;}
.process-hanwool{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.process-hanwool li{width: 30%;margin-bottom: 60px;}
.process-hanwool li i{
    font-style: normal;
    color: #B47E4C;
    font-weight: 500;
    font-size: 1.375rem/* 22 */;
    display: block;
    margin-bottom: 10px;
}
.process-hanwool li i::before{
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #B47E4C;
    margin-bottom: 10px;
}
.process-hanwool li strong{font-size: 1.75rem/* 28 */;}
.process-hanwool li figure{margin: 20px 0;}
.process-hanwool li p{font-size: 1rem;line-height: 1.5;}

/* news-list */
.hanwool-community{padding: 100px 0 120px;}
.community-wrap > ul{
    border-top: 2px solid #B47E4C;
    border-bottom: 2px solid #B47E4C;
}
.community-wrap > ul li{
    border-bottom: 1px solid #c4c4c4;
    display: flex;
    justify-content: left;
}
.community-wrap > ul li:last-child{border-bottom: none;}
.community-date{padding: 14px 70px;color: #333;font-size: 1rem;text-align: center;}
.community-date p{display: block;margin-bottom: -4px;font-size: 0.875rem;}
.community-date strong{display: block;color: #B47E4C;font-weight: 500;font-size: 2rem/* 32 */;}
.community-date b{display: block;margin-top: -4px;font-size: 0.875rem;}
.community-list{width: 100%;margin-left: 10px;}
.community-list a{display: flex;align-items: center;width: 100%;height: 100%;}
.community-list dl{padding-right: 10%;display: flex;justify-content: flex-start;align-items: center;width: 100%;}
.community-list dl dt{
    font-size: 1.375rem/* 22 */;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 90%;
}
.community-list dl dd{
    font-size: 1rem;
    color: #7C7C7C;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.pagenation{margin-top: 35px;display: flex;justify-content: space-between;align-items: center;margin-left: auto;padding-right: 40px;width: 50%;}
.page{display: flex;justify-content: center;align-items: center;text-align: center;transform: translateX(-50%);}
.page ul{margin: 0 16px;font-size: 1rem;}
.page ul li.on{font-weight: 700;}
.pagenation > a{font-size: 1.125rem;color: #fff;display: flex;justify-content: center;align-items: center;background: #B47E4C;width: 160px;height: 54px;}
.community-wrap > ul li:hover .community-list dt{color: #B47E4C;font-weight: 500;}

/* news */
.community-con{padding: 100px 0 120px;}
.community-box{
    border-top: 2px solid #B47E4C;
    border-bottom: 2px solid #B47E4C;
}
.community-title{border-bottom: 1px solid #c4c4c4;padding: 22px 30px 18px;}
.community-title strong{font-size: 1.75rem/* 28 */;}
.community-info{margin-top: 18px;font-size: 1.125rem/* 18 */;color: #7C7C7C;display: flex;justify-content: space-between;align-items: center;}
.write-date{display: flex;}
.write-date .writer{margin-right: 50px;}
.community-text{padding: 56px;font-size: 1.125rem/* 18 */;}
.community-text figure{text-align: center;margin-bottom: 40px;}
.btn-community-list{margin-left: auto;}

/* contact-list */
#pwdBox {
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 60px;
    border: 2px solid #B47E4C;
    background: white;
    text-align: center;
}
#pwdBox > h3{font-size: 1.125rem;margin-bottom: 16px;}
#pwdBox a {
    font-size: 1.125rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #B47E4C;
    width: 120px;
    height: 40px;
    margin: auto;
    cursor: pointer;
}
    #pwdBox input {
    border: 1px solid #c9c9c9;
    padding: 10px;
    margin-bottom: 10px;
    width: 120px;
    height: 40px;
}

/* contact */
.comment{padding: 100px 0 20px;}

.comment-write{margin-bottom: 40px;}
.comment-write > p{font-weight: 700;margin-bottom: 14px;display: flex;}
.comment-write > p::before{content: "";display: block;width: 6px;height: 22px;background: #B47E4C;margin-right: 4px;}
.comment-write textarea{outline: none;border: 1px solid #c4c4c4;width: 100%;height: 9vw;border-radius: 6px;padding: 20px;font-size: 1rem;}
.comment-write button{background: #B47E4C;padding: 16px 26px;margin-left: auto;display: block;margin-top: 10px;color: #fff;font-size: 1rem;}

.comment > b{font-size: 1.25rem;font-weight: 700;padding-left: 20px;}
.comment-con{margin-top: 10px;font-size: 1rem;border-top: 2px solid #B47E4C;padding: 30px 20px;border-bottom: 1px solid #c4c4c4;}
.comment-con > strong{font-size: 1.125rem;}
.comment-text{margin: 20px 0;}
.comment-date{display: flex;font-size: 0.875rem;}
.comment-date p{margin-right: 20px;color: #c4c4c4;}
.comment-date a{padding: 0 5px;border-right: 1px solid #000;}
.comment-date a:nth-of-type(2){border: none;}

/* admin */
.admin-con-wrap h4{color: #B47E4C;text-align: center;margin-top: 4px;font-size: 2.875rem/* 46 */;font-weight: 500;}
.login{width: 40%;margin: 30px auto 0;}
.login form input[type="text"],[type="password"]{
    width: 100%;
    height: 60px;
    background: #F0E9E2;
    color: #B47E4C;
    padding: 16px;
    outline: none;
    margin-bottom: 29px;
}
.btn-login{
    width: 100%;
    height: 60px;
    background: #B47E4C;
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    cursor: pointer;
}

/* tablet */

@media screen and (max-width: 1024px) {
    /* contact */
    .comment-write textarea{height: 15vw;}
    /* admin */
    .login{width: 50%;}
}

/* 최적화 */

@media screen and (max-width: 820px) {
    .community-list{width: 70%;}
}

@media screen and (max-width: 768px) {
    .sub-title-text{padding-left: 40px;}
    .sub-title-text p{font-size: 1rem;}
    .sub-title-text h4{font-size: 2.625rem/* 42 */;}
    .admin-con-wrap h4{font-size: 2.625rem/* 42 */;}
    .gallery-con{padding-top: 140px;}
    .made-con{padding-top: 140px;}
    .gallery-con > p{font-size: 0.875rem;}
    .made-con > p{font-size: 0.875rem;}
    .gallery-con h5{font-size: 2rem;}
    .made-con h5{font-size: 2rem;}
    .gallery-text{padding: 60px 20px;}
    .gallery-right{width: 64%;}

    .process-icon-wrap{height: 500px;}
    .process-icon > ul{flex-wrap: wrap;}
    .process-icon > ul li{width: 30%;margin: 20px 0;}
    .pro-intro{flex-direction: column;align-items: center;}
    .pro-intro figure{width: 80%;}
    .pro-intro-text{width: 90%;margin-top: 40px;}
    .pro-intro-text h4{text-align: center;}
    .pro-intro-text p:nth-of-type(1){margin-top: 50px;}
    .process-hanwool li{width: 46%;}
    .process-hanwool li strong{font-size: 1.5rem/* 24 */;}
    .process-hanwool li p{font-size: 0.875rem/* 14 */;}

    .community-list dl dt{width: 80%;}
    .community-list dl dd{width: 16%;}

    /* admin */
    .login{width: 60%;}
}

@media screen and (max-width:660px) {
    .community-list{width: 65%;}
    .community-list dl dt{font-size: 1.5rem;}
}

@media screen and (max-width:610px) {
    .community-list{width: 60%;}
    /* admin */
    .login{width: 70%;}
}

@media screen and (max-width: 600px) {
    .gallery-text{flex-direction: column;}
    .gallery-left{width: 100%;}
    .gallery-right{width: 100%;}
    .gallery-right::before{
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #333;
        margin: 60px auto 50px;
    }

    .comment-write textarea{height: 20vw;}
    .comment-write button{padding: 12px 22px;}

    .pagenation{padding-right: 0;flex-direction: column;margin: 50px auto 0;width: 100%;}
    .pagenation > a{width: 120px;height: 50px;margin-top: 30px;margin-left: auto;}
    .page{transform: translateX(0);}
}

@media screen and (max-width:560px) {
    .community-date{padding: 14px 50px;}
    .community-list{width: 65%;}
}

@media screen and (max-width: 500px) {
    .sub-title-text h4{font-size: 2.125rem/* 34 */;}
    .admin-con-wrap h4{font-size: 2.125rem/* 34 */;}

    .process-hanwool li{width: 90%;}

    .community-date{padding: 14px 40px;}
    .community-list dl dd{width: 20%;text-align: right;}
}

/* mobile */

@media screen and (max-width: 425px) {
    .sub-title{height: 340px;}
    .sub-title-text{padding-left: 26px;}
    .gallery-con{padding-top: 100px;}
    .made-con{padding-top: 100px;}
    .gallery-con h5{font-size: 1.625rem/* 26 */;}
    .made-con h5{font-size: 1.625rem/* 26 */;}
    .gallery-con > p{font-size: 0.75rem/* 12 */;}
    .made-con > p{font-size: 0.75rem/* 12 */;}
    .gallery-left strong{font-size: 1.5rem/* 24 */;}
    .gallery-right::before{margin: 50px auto 40px;}
    .gallery-right{font-size: 0.9375rem/* 15 */;}

    .process-icon > ul li p{font-size: 1rem;}
    .pro-intro-text h4{font-size: 1.75rem/* 28 */;}

    .community-wrap > ul li{flex-direction: column-reverse;padding: 20px 8%;}
    .community-date{padding: 0;padding-top: 20px;display: flex;justify-content: flex-start;align-items: center;flex-direction: row-reverse;color: #b0b0b0;}
    .community-date p{margin-bottom: 0;}
    .community-date strong{margin: 0 4px;font-size: 1rem;color: #b0b0b0;font-weight: 400;}
    .community-date b{margin-top: 0;}
    .community-list{width: 100%;margin: 0;}
    .community-list dl{padding: 0;}
    .community-list dl dt{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 1.375rem/* 22 */;
    }
    .community-list dl dd{font-size: 1rem;}
    .write-date .writer{margin-right: 20px;}
    .community-text{padding: 56px 30px 56px;}
    .community-text figure{margin-bottom: 20px;}
    .community-title strong{font-size: 1.5rem;}

    .comment-write textarea{height: 30vw;}
    
    /* admin */
    .login{width: 90%;}
}

/* 최적화 */

@media screen and (max-width: 375px) {
    .sub-title-text{padding-left: 6%;}
    .sub-title-text p{font-size: 0.875rem;}
    .sub-title-text h4{font-size: 1.875rem/* 30 */;}
    .admin-con-wrap h4{font-size: 1.875rem/* 30 */;}

    .pagenation > a{width: 100px;height: 46px;}
}