@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Nanum+Myeongjo:wght@400;700&display=swap&family=Outfit:wght@400;700&display=swap&family=Montserrat:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');


*, *:before, *:after {padding: 0; margin: 0; box-sizing: border-box;}
body {font-family: 'Montserrat','Noto Sans KR', sans-serif; font-size: 15px; line-height: 1.5; color: #000;}
h1, h2, h3, h4, h5, h6 {}
h1 {font-size: 3em;}
h2 {font-size: 5.5em;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.5rem;}
img {vertical-align: top;}
a {text-decoration: none; color: #000;}
button {border: 0; background-color: transparent; cursor: pointer;}


/* 공용클래스 */
.wrap {width: 96%; max-width:1580px; margin: auto;}
.wrap2 {width: 96%; max-width:870px; margin: auto;}
.clearfix:after {content: ''; display: block; clear: both;}
.blind {position: absolute; left: -9999em;}
.ltsp {letter-spacing: -1px;}
.center {text-align: center;}
.btn {border: 0; background-color: transparent;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.relative-position {position: relative;}
.center-position {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}


/* 해상도별 */
.mo-only, .tb-only, pc-only {display: none;}
.mo-tb-only, tb-pc-only {display: none;}

/* 글자 관련 */
.wh, .wh:hover, .wh a {color: #fff !important;}
.grey, .grey:hover, .grey a {color: #999 !important;}
.gr, .gr:hover, .gr a {color: #b1ee69 !important;}
.or, .or:hover, .or a {color: #E47E11 !important;}
.beg, .beg:hover, .beg a {color: #A38B78 !important;}
.upcase {text-transform: uppercase;}
.nm {font-family: 'Nanum Myeongjo','Batang', serif;}
.of {font-family: 'Outfit', sans-serif;}
.nt {font-family: 'Noto Sans KR', sans-serif;}

.btn-line-wh {display: inline-block; padding: 0.8em 2em; border: 1px solid #fff;  transition: 0.3s;}
.btn-line-wh:hover {background-color: #fff; color: #000 !important;}


/* 헤더 영역 */
#hc-hd {position: absolute; left: 0; top: 0; width: 100%; height: 60px; z-index: 1; background-color: rgba(0, 0, 0, 0.1 );}
.fp-viewing-section-1 #hc-hd {height: 110px;}
.fp-viewing-section-1 .hc-logo {padding: 15px 0;}
.fp-viewing-section-1 .hc-logo a {width: 580px; height: 80px;  }
.fp-viewing-section-1 .side-menu-btn {margin-top: 30px;}

.hc-logo {float: left; padding: 5px 0; transition: 0.3s;}
.hc-logo a {display: block; width: 400px; height: 55px; background: url('../images/hc_logo.png') no-repeat left center / contain; transition: 0.3s;}
.side-menu-btn {position: relative; float: right; display: block; margin-top: 5px; width: 50px; height: 50px; padding: 10px; z-index: 100;  transition: 0.3s;}
.side-menu-btn:before, .side-menu-btn:after {content: '';}
.side-menu-btn:before, .side-menu-btn:after, .line {display: block; width: 100%; height: 4px; background-color: #fff; transform-origin: right top; transition: 0.3s 0.2s;}
.line {margin: 5px 0; transform: scaleX(0.7);}
.side-menu-btn:after { transform: scaleX(0.85); transform-origin: right bottom;}
.side-menu-btn.side-menu-close:before {transform: rotate(-45deg) scaleX(1);}
.side-menu-btn.side-menu-close:after {transform:translateY(2px) rotate(45deg) scaleX(1);}
.side-menu-btn.side-menu-close .line {opacity: 0;}
.modal {position: fixed; opacity: 0; right: -50%; top: 0; width: 50%; height: 100%; background-color: #000; z-index:1;}
.modal-menu {padding: 10em 3em 0;}
.modal-menu li {height: 6em;}
.modal-menu a{position: relative; float: left; display: block; color: #fff; font-size: 4em; line-height: 0.8;}
.modal-menu a:before {position: absolute; left: 0; bottom: 0; content: ''; display: block; width: 0; height: 24px; background-color: #ab3b0f; z-index: -1; transition: 0.3s 0.1s;}
.modal-menu a:hover:before {width: 100%;}


/*메인 콘텐츠*/
#main-contents {}
.main-visual {position: relative; background: url('../images/main_visual_img.jpg') no-repeat 50% / cover;}
.mv-txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: -60px;}
.mv-txt1 {font-size: 7em; line-height: 1em; color: #fff; font-weight: bold;}
.mv-txt2 {position: relative; font-size: 3em; color:#fff; font-weight: bold; padding-top: 0.5em;}
.v-txt2 {position: relative; padding: 0 0.3em;}
.v-txt2:before {position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; content: ''; display: block;  background-color: #ab3b0f; z-index: -1;}
.mv-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/main_visual_img_blur.jpg') no-repeat 50% / cover; animation: mv-img-blur 2s 0.2s both;} 
@keyframes mv-img-blur {
    0% {opacity: 1;}
    100% {opacity: 0;}
}


/*프로젝트*/

.hc-project {position: relative; background-color: #fff;}
.hc-project .h2-group {float: left; width: 33.33%;}
.h2-group {font-weight: bold;}
.h2-desc {font-size: 24px; font-weight: normal; margin-bottom: 2em;}
.h2-group li {font-size: 20px; line-height: 2em;}
.hc-project1 .pj-wrap {float: left; width: 33.33%;}
.pj-img {width: 380px; background: no-repeat 50% / cover;}
.pj-img:before {content: ''; display: block; padding-top: 133%;}
.pj-img1 {background-image: url('../images/hy-img.jpg');}
.pj-img2 {background-image: url('../images/ka-img.jpg');}
.pj-txt {font-size: 20px; font-weight: normal; line-height: 3em;}
.pj-more {position: absolute; left: 66.66%; top: 0; width: 100%; height: 100%; background-color: #111; transition: 0.5s;}
.pj-more.slide {left: 0;}
.pj-more-container {width: 100%; height: 100%; opacity: 0.3; transition: 0.5s;}
.pj-more.slide .pj-more-container {opacity: 1;}
.pj-more-img, .pj-more-overview {float: left; width: 50%; height: 100%;}
.pj-more-img {background: url('../images/hy.jpg') no-repeat 50% /cover; text-align: center;}
.pj-more-overview {}
.pj-more-arrow-wrap{position: absolute; left: 60px; top: 50%; width: 64px; height: 36px; margin-top: -18px;}
.pj-more-arrow {/*화살표 버튼*/ position: relative; width: 64px; height: 36px; opacity: 0.3; transition: 0.3s 0.1s;}
.pj-more-arrow:before, .pj-more-arrow:after {position: absolute; left: 0; top: 50%; content: ''; }
.pj-more-arrow:before {left: 2px; width: 24px; height: 24px; border: 2px solid #fff; border-width: 0 0 2px 2px; transform: translateY(-50%) rotate(45deg);}
.pj-more-arrow:after {width: 100%; height: 2px; margin-top: -1px; background-color: #fff;}
.pj-more-arrow:hover {opacity: 0.8; margin-left: -20px;}
.pj-more-arrow-wrap.hide {transform: scaleX(-1);}
.pj-more-title {display: block; margin-bottom: 0.3em; font-size: 4em;}

.hc-project2 .pj-wrap {position: absolute; left: 66.66%; top: 0; width: 33.33%; height: 100%;}
.hc-project2 .pj-more {left: -33.33%;}
.hc-project2 .pj-more.slide {left: 0; opacity: 1;}
.hc-project2 .pj-more-img, .hc-project2 .pj-more-overview {float: right;}
.hc-project2 .pj-more-img {background-image: url('../images/ka.jpg')}
.hc-project2 .pj-more-arrow-wrap {left: 100%; margin-left: -124px; transform: scaleX(-1);}
.hc-project2 .pj-more-arrow-wrap.hide {transform: scaleX(1);}


/*about me*/
.hc-about {height: 960px;}
.about {width: 90%; min-width: 1300px; margin: auto;}
.about-list {font-weight: 300;}
.about {padding-left: 1.125%; margin-top: 100px;}
.about .li {float: left;  padding: 2em 0 0 2em; width: 22.75%; height: 350px; margin-right: 2.25%; border-top: 3px solid #000; border-left: 3px solid #000;}
.list-tit {font-weight: bold; font-size: 18px;}
.list-sub {padding-top: 1em; line-height: 2em; font-size: 20px;}
.list-sub > div {position: relative;}
.skill-dots {position: absolute; right: 30px; top: 50%; margin-top: -3px; line-height: 0;}
.skill-dots li {display: inline-block; width: 6px; height: 6px; border-radius: 100%; margin-right: 5px; background-color: #000; overflow: hidden; text-indent: -9999em; font-size: 0; line-height: 0;}
.skill-dots .blank {opacity: 0.1;}

/* contact */
.hc-contact {background-color: #2D3A40;}
.contact {width: 80%; margin: auto; padding: 5em; background-color: #fff;22;}

/*푸터 영역*/
#hc-ft {padding: 5em 0; color: #999; font-size: 0.9em; line-height: 1.8; background-color: #222;}
#hc-ft strong {font-weight: bold;}