@charset "UTF-8";

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

html, body {height: 100%; min-height: 100vh; margin:0; padding:0; }
body {font-family: 'Spoqa Han Sans Neo', '맑은 고딕'; font-weight:400; font-size: 1.2em;}
body * {box-sizing: border-box}

/* header style */
header {background: #161616; position: sticky; top: 0; z-index: 99}
.head-wrap {font-size: 1.1em; width:96%; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;}
header a {color: rgb(255, 255, 255); text-decoration: none;}
.hd-logo a {font-weight: 700; flex: 0 0 380px;  line-height:60px; display: inline-block; transition: all 0.2s ease-in}
.hd-logo a:hover {text-shadow: 0 0 8px rgba(255, 255, 255, 1); transition: all 0.2s ease-out}

header .nav {display: flex; justify-content: end; align-items: center; flex: 1 1; margin: 0; padding: 0; list-style: none; gap: 0 4%}
header .nav li {padding: 0; margin: 0;  }
header .nav li a {display: inline-block; padding: 0 36px; height: 60px; line-height: 60px;}
header .nav li a:hover {background: rgba(255, 255, 255, 0.1);}
header .nav li.usdh-link a {border-radius: 30px; background: #2d2d2d;height:40px; line-height:40px; padding:0 24px; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9); border:1px solid rgba(255,255,255, 0.1); transition:all 0.3s ease-in-out}
header .nav li.usdh-link a:hover {background:#3d3d3d; color:#f0f0f0;}

.main-wrap main {height: 100%; min-height: 100vh ; }
.content-wrap {width: 96%; max-width: 1280px; margin: 0 auto;}
.main-slide .slide {height: calc(100vh - 60px); background-size:cover; background-position: center center; background-repeat:no-repeat}
.main-slide .slick-slide {height:100%; background: #f0f0f0;}
.slide .slick-slide {overflow: hidden; position: relative;}


div.empty {display:block; width:100%; overflow:hidden; clear:both;}
.h30 {height: 30px;}
.h80 {height: 80px;}

p {line-height:160%; padding: 0; margin: 0;}
p.sub-title {padding: 0; margin: 0;}
h2 { font-weight:700; padding: 0 0 24px 0; margin: 0; font-size: 2em;}
h3 { font-weight:500; padding: 0; margin: 0;}

.list-wrap {display: flex; justify-content: space-between; align-items: stretch; }
.list-wrap .plan-wrap {flex:0 0 49%; border:1px solid #dfdfdf; background:#f6f6f6; padding:24px; border-radius:16px;}
.list-wrap .notice-wrap {flex:0 0 49%;border:1px solid #dfdfdf; background:#f6f6f6; padding:24px; border-radius:16px;}

.list-wrap h3 {padding-bottom:8px; border-bottom:1px solid #dfdfdf;}
.list-wrap h3 .btn {float:right;}

.intro ul {padding: 16px 0; margin: 0;}
.intro ul li {padding: 4px 0; margin: 0 0 0 0; list-style: none; width:100%; overflow:hidden; display:flex; justify-content: start; align-items: center; flex-wrap:wrap; }
.intro ul li strong {
    flex:0 0 160px;
    font-weight: 500;
    border-radius: 19px;
    background: #161616;
    color: #ffffff;
    text-align: center;
    font-size: 0.85em;
    line-height: 36px;
    height: 36px;
    padding: 0;
    margin: 0 0 0 0;
}
.intro ul li span {padding:0 4px; height:36px; line-height:36px;}
.intro ul li span.content i {padding-right:8px;}
.intro ul li span.content {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; vertical-align:middle; flex: 1 1 ;}
.intro ul li span.btn-del {flex: 0 0 30px;}
.intro ul li .detail {display: none; flex: 0 0 100%; padding:8px; }
.intro ul li .detail.view {display:block;}

table {padding: 0; border-spacing: 0; border-collapse: collapse; width:100%;}
table tr:first-child th, table tr:first-child {border-top:1px solid #dfdfdf;}
table th {background: #f6f6f6; padding: 8px 24px; text-align: left; border-bottom: 1px solid #dfdfdf; font-weight:500}
table td {padding: 8px; text-align: left; border-bottom: 1px solid #dfdfdf;}

.sample-wrap {display:flex; justify-content: space-between; align-items: stretch; }
.sample-wrap .preview {border:1px solid #dfdfdf; flex: 0 1 48%;line-height:0; background-color:#f6f6f6; background-size: contain; background-repeat:no-repeat; height:450px; background-position:center center; }
.sample-wrap .preview img {width:100%;}
.sample-wrap .info {flex: 0 1 48%;}
.sample-wrap .info .boxes {display: flex; justify-content: space-around; align-items: stretch; ; padding:16px 0; }
.sample-wrap .info .boxes .box {flex:0 0 24%; border:1px solid #dfdfdf; background:#f6f6f6; }
.sample-wrap .info .boxes .box img {width:100%;display:block; cursor:pointer}

.floor-wrap h3 { padding: 40px 0 8px 0;}
.floor-wrap ul {list-style: none; padding: 0; margin: 0;}
.floor-wrap ul li {padding: 8px 0; margin: 0;}
.floor-image {display:flex; flex-wrap: wrap; justify-content: space-between; padding: 0px; margin: -1px 0 0 0; border:1px solid #efefef;}
.floor-image .img {flex:0 0 49%; padding:1%;overflow: hidden; position:relative; cursor:move}
.floor-image .img img {width: 100%; max-width: 100%;}
.floor-wrap h4 {font-weight:500; vertical-align: middle; border: 1px solid #efefef; padding:8px 10px 6px 10px; margin:0}
.floor-wrap h4 strong {background: #161616; color: #fff; border-radius:3px; font-size: 0.7em; margin:0 4px 4px 0;display:inline-block; padding:2px 4px; font-weight:500; vertical-align: middle}
.floor + .btn {float:right; margin-top:2px;}
h2 .btn {float: right;}

.work-wrap ul {list-style: none; padding: 0; margin: 24px 0 0 0;}
.work-wrap ul li {position: relative;}
.work-item h3 {border-bottom: 1px solid #dfdfdf; }
.work-item strong.work-label {background: #161616; color:#fff; display:inline-block; height: 40px; line-height: 40px; padding: 0 24px;font-weight: 500}

.work-wrap .img-list {display: flex; justify-content: start; align-items: stretch; flex-wrap: wrap; border: 1px solid #dfdfdf; border-top: 0; width:100%; padding:16px;}
.work-wrap .img-list .img {flex: 0 0 23%; margin: 1%; border: 1px solid #dfdfdf; min-height:200px; text-align:center; border-radius: 8px; position: relative;overflow: hidden; cursor: move}
.work-wrap .img-list .img img {width:100%;}
.img .btn-add-image, .img .btn-work-image {width: 100%; height: 100%; border:1px solid #efefef; font-size:1.2em; color: #aeaeae;}

.btn {display: inline-block; border-radius:8px; cursor:pointer}

.btn-basic {border:1px solid #11a35c; background: #11a35c; color:#fff;}
.btn-gray {border:1px solid #dfdfdf; background: #efefef; color:#000;}

.btn-large {font-size:1.1em; line-height:48px; height:48px;}

.btn-middle {line-height:32px; height:32px; padding: 0 24px;}
.btn-square {line-height:20px; height:20px; width:20px; text-align: center; border-radius: 12px; padding:0; font-size:12px; vertical-align: middle}
.btn-close {background: transparent;border:none; }
.btn-close i {font-size:1.8em;}
.btn-work-delete {background:#ffffff; position: absolute; border:1px solid #ffffff; color:#ff253a; top:0; right:0;}
.btn-image-delete {background:#ff253a; position: absolute; border:1px solid #ff253a; color:#ffffff; top:0; right:0; width: 18px; height: 18px;line-height:12px; border-bottom-left-radius: 8px; cursor:pointer}
.btn-image-delete i {font-size:0.7em;}

footer {padding: 0; background: #f6f6f6}
.footer-wrap {width: 96%; max-width: 1280px; margin: 0 auto; line-height: 32px; height: 32px;}
.hide {display: none !important; }

#frmProcess {border: 0px solid #dfdfdf; width: 0; height:0; overflow: hidden;}
.modal {width:100%; height:100vh; background: rgba(0, 0, 0, 0.8); position: fixed; display:none; top:0; left: 0; justify-content: center; align-items: center; z-index:999}
.modal.show {display: flex;}
.modal .con-wrap {width:80%; max-width:600px; background:#ffffff; border-radius: 15px; box-shadow:0 0 8px rgba(0, 0, 0, 0.9); overflow: hidden;}
.modal .con-wrap h2 {padding: 16px; font-size:1.1em; border-bottom: 1px solid #dfdfdf;  margin:0;}
.modal .con-wrap h2 strong {font-weight:500;}

.modal .con-wrap .content-main {padding: 24px; overflow-y: auto; height:300px}
.modal .con-wrap .content-footer {padding: 12px; text-align: center; box-shadow:0 0 8px rgba(0, 0, 0, 0.2)}
.animate__animated.animate__bounceInDown {--animate-duration:0.7s}

.form-wrap {list-style: none; padding: 0; margin: 0;}
.form-wrap li {padding: 8px 0;}
.form-wrap label {font-size: 0.7em; }
.form-wrap input[type="text"], .form-wrap input[type="date"], .form-content {border: 1px solid #dfdfdf; padding:8px; border-radius: 3px; font-family:'Spoqa Han Sans Neo', '맑은 고딕' }
.form-wrap input[type="text"]:focus, .form-wrap input[type="date"]:focus, .form-content:focus {outline:none; border:1px solid #11a35c}

.full {width:100%;}
.btn-del {color:#ff253a; cursor:pointer;}
.pc {display: inline-block !important; }
.mobile {display: none !important;}

.file-box {width: 0; height: 0; overflow: hidden; }
.floor-image-file, .work-img-input {width: 0; height: 0; overflow: hidden; padding: 0; margin: 0; position: absolute;}
.faq-wrap ul {list-style: none; padding: 0 0 20px 0; margin: 0;}
.faq-wrap ul li {margin: 0;border: 1px solid #dfdfdf; padding: 8px 16px;}
.faq-wrap ul li .question { font-weight: 500; }
.faq-wrap ul li .question span {float: right;}
.faq-wrap ul li .answer { height:0; overflow:hidden;padding:0; background:#fff;  }
.faq-wrap ul li .answer.show {height: auto;padding: 16px; background:#f6f6f6; border-radius:8px; margin:8px 0 16px 0;}

.fullscreen {flex:0 0 80%; max-width:500px;}
.login-form {background:#fff; border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 24px; }
.login-form h1 {text-align: center; font-size:1.4em;}
.login-form .row {padding: 12px 0 0 0;}
.login-form .row label {display: block; font-size: 0.7em;}
.login-form .row span {display: block;}
.login-form input {border: 1px solid #dfdfdf; width:100%; padding: 12px 8px; border-radius:3px}
.ar {text-align: right;}
.logout {position: absolute; top: 17px; right:10px;}

.video-container {
    position:relative;
    height:0;
    padding-bottom:56.25%;
}

@media (max-width: 1024px) {
    body {font-size:1em;}
    .main-slide .slide {height:600px}

    .slide .slick-slide img { width:100%; height:auto; left: 0; top: 0; transform: translate(0, 0); position: relative; }
}
@media (max-width: 890px) {
    body { font-size: 0.9em; }
    header .nav li a { padding:0 8px; }

    .pc { display: none !important; }
    .mobile { display: inline-block !important; }

    .main-slide .slide { height: 450px }

    .list-wrap {flex-wrap:wrap;}
    .list-wrap .plan-wrap {flex: 1 1 100%; margin:1%}
    .list-wrap .notice-wrap {flex: 1 1 100%; margin:1%}


    .sample-wrap {
        flex-wrap:wrap;
    }
    .sample-wrap .preview {flex: 1 1 100%}
    .sample-wrap .info {flex: 1 1 100%; padding-top: 20px}
}
@media (max-width: 570px) {
    body {font-size: 0.8em;}
    header .nav li a {padding:0 4px;}

    .main-slide .slide {height: 300px}

    .intro ul li strong {flex: 0 0 120px; line-height: 28px; height:28px;}
    .work-wrap .img-list .img {
        flex: 0 0 48%;
        min-height:120px;
    }
}
@media (max-width: 480px) {

    body {font-size: 0.8em;}
    .head-wrap {flex-wrap:wrap;}
    .hd-logo {flex: 0 0 100%; text-align:center; border-bottom:1px solid rgba(255, 255, 255, 0.1)}
    header .nav li a {padding:0 4px;}
    header .nav {flex:1 1 100%; justify-content: center;}
    div.empty.h80 {height:40px;}


    .intro ul li {flex-wrap:wrap}
    .intro ul li span.content {flex: 1 1 90%; }

    .intro ul li span.btn-del {flex: 1 1 10%;}
    .sample-wrap .info .boxes {flex-wrap: wrap;}
    .sample-wrap .info .boxes .box {flex: 0 0 48%;}


}
@media (max-width: 290px) {
    header .nav li a  {padding: 0 2px;}

}