@charset "UTF-8";
@import url('reset.css');
@import url('fontfamily.css');

/* ---------------- 단순기능클레스 ---------------- */
.bold {font-weight: bold;}
.container {width:1200px; margin:0 auto;}
.mgb20 {margin-bottom:20px;}
.fx {display: flex; display : -webkit-flex; display:-ms-flex;}
.fx_center {align-items: center; }
.fx_between {justify-content: space-between;}
.transperant {opacity: 0;}

.ham {border:none; background: none; text-indent: -99999em; width:32px; height:30px; background: url("/img/icon/ham_white.png") no-repeat center / cover;}

.wrap {overflow-x:hidden}
section.section {position: relative;}
header {position: fixed; top: 0; left: 0; right: 0; padding:20px 40px; box-sizing: border-box; border-bottom:1px solid #ccc;  z-index: 100; transition: 0.3s;}
header ul.connect {display: -webkit-flex; display: -ms-flex; display: flex;}
header li {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; margin: 0 10px;}
header li a {color:#fff;}
header.white {background: #fff;}
header.white a {color:#444;}
/* ---------------- section 1 / 슬라이드 ---------------- */

.sec2,.sec3:not(.ani5),.sec4:not(.ani5) {padding:108px 0;}
.sec1 .logo a {text-indent: -999999em; display: inline-block; background: url('/img/logo/emalln3.png') no-repeat center / cover; background-size:200px; width: 200px; height: 60px; }
.scroll {position: absolute; bottom:20px; left:50%; transform:translateX(-50%); animation: scroll 1s infinite; }
.scroll a {display: inline-block; text-align: center;}
.scroll a img {width:50%;}

@keyframes scroll {
    0% {transform:translate(-50%,-10px)}
    50% {transform:translate(-50%,0)}
    100% {transform:translate(-50%,-10px)}
}

.slide_list {width:100%; height:100vh; }
.slide_list:before {content:""; position:absolute; top: 0; bottom: 0; left: 0; right: 0;  z-index: -2;}
.slide_list:after {content:""; position:absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.2); z-index: -1;}
.slide_list.list1:before {background: url("/img/slide1.png") no-repeat center; background-size: auto 120%;}
.slide_list.list2:before {background: url("/img/slide2.png") no-repeat center; background-size: auto 120%;}
.slide_bg_typo {font-size: 180px; color:rgba(255,255,255,0.1); text-align: center; font-weight: 900; margin-top:200px; }
.slide_list h4 {color:#fff; font-size: 45px; line-height: 65px; width:1000px; margin:-50px auto 20px;font-family: 'NanumBarunGothic'; font-weight: 700;}
.slide_list .list_desc {color: #ebebeb; font-size: 20px; width: 1000px; margin: 30px auto 80px; font-family: 'NanumBarunGothic'; line-height: 35px;}

.slick-slide.slick-active:before {animation: bgSlowSmaller 4.5s forwards; }
.slick-slide.slick-active h4 {animation:showBottom 1s forwards; }
.slick-slide.slick-active .list_desc {animation:showBottom 1.2s forwards;}
.slick-dotted.slick-slider {margin-bottom: 0;}
.slick-dots { bottom: 10rem; width:1000px; text-align: left; left: 50%; transform: translateX(-50%);}
.slick-dots li {width:auto; height:auto;}
.slick-dots li button {width:100px; height:6px; background: rgba(255,255,255,0.5); position: relative; padding:0;}
.slick-dots li button:before {content:"";position: absolute; left: 0; top:0; bottom: 0; background:#E83200; width:0px; height:6px; }
.slick-active button:before {animation: progressbar 4s forwards linear; }

@keyframes bgSlowSmaller {
    0% {background-size: auto 140%; }
    100% {background-size: auto 130%; }
}
@keyframes showBottom {
    0% {transform: translateY(100px); opacity: 0;}
    100% {transform : translateY(0); opacity: 1;}
}

@keyframes progressbar {
	0% {width:0px; }
	100% {width:100%}
}

/* ---------------- section 2 / about ---------------- */
.bg_typo {font-size: 180px; color:#FAFAFA; text-align: center; font-weight: 900; position: absolute; left: -10px;     z-index: -1; top: 100px; }
.sec2 .text_area {width:53%; }
.sub_tit {color:#D1380E; font-size: 25px; margin-bottom: 20px; text-transform: uppercase;}
.tit {font-size: 50px; font-weight: bold; margin-bottom: 30px; font-family: "NanumBarunGothic";}
.text_area .desc {font-family:'S-CoreDream-4Regular'; color:#666666; font-size: 25px; line-height: 40px; margin-bottom: 20px; word-break: break-word ;}
.sec2 .desc {margin-bottom: 40px;}
.sec2 ul {width:600px; height:300px;}
.sec2 li {border:1px solid #EAEAEA; padding:20px 30px 30px; text-align: center; box-sizing: border-box;width:49%; flex-direction: column;}
.sec2 li span {font-weight: bold; font-size: 16px; display: block;text-align:left; text-transform: uppercase; width:100%; }
.sec2 li p {font-size: 14px; line-height: 20px; font-weight: bold;}
.sec2 .image_area {background: url("/img/sec2_img.jpg") no-repeat center / cover; position: relative; font-family: "nanumbarungothic", sans-serif; width:40%;}
.sec2 .image_area .address {background: #444; color:#fff; width:85%; padding:40px 20px; box-sizing: border-box; position: absolute; bottom:100px; left:0; }
.sec2 .image_area .address p {line-height: 22px;}
.sec2 .image_area .address a {color:#fff; font-size: 25px; display: inline-block; margin-top: 20px; }
.sec2 .go_map {border: 0;font-size: 16px; text-align: right; width: 200px; line-height: 50px; color: #fff; background: linear-gradient(93.85deg, #D1380E 4.26%, #DD8303 92.79%);    position: absolute; right: -100px; top: 26px; padding-right:20px; box-sizing: border-box; cursor: pointer; transition:0.3s;}
.sec2 .go_map:hover {transform:translateX(10px); opacity: 0.9;}

/* ---------------- section 3 / business ---------------- */
.sec3 .bg_typo {left:305px; top:15px; font-size: 200px; color:#F3F3F3;}
.sec3 .text_area .desc { margin-bottom: 30px;}
.sec3 .text_area {width:53%; }
.sec3 .image_area {background: url("/img/sec3_img.jpg") no-repeat center / cover; width:40%;}
.tit_md {font-size: 35px; margin-bottom: 18px; font-weight: normal;}
.sec3 ul li {flex-direction: column;}
.sec3 ul li .icon {width:165px; height:165px; border:1px solid #e1e1e1; border-radius: 50%; line-height: 165px; text-align: center; margin-bottom: 10px;}
.sec3 ul li .icon img {vertical-align: middle;}
.sec3 ul li p {line-height: 27px; font-size: 22px;  color:#888; text-align: center; }

/* ---------------- section 4 / business ---------------- */
.sec4 .bg_typo {left:835px; top:15px; font-size: 200px; color:#F3F3F3;}
.sec4 .image_area {background: url("/img/sec4_img.jpg") no-repeat center / cover; width:40%; margin-right:100px;}
.sec4 .text_area {width:32%; }

/* ---------------- section 5 / contact ---------------- */
.sec5 .bg_typo { left:auto; top:50px; color:#FAFAFA; right:-50px;}
.sec5 .container {margin-top: 130px;}
.sec5 ul li {text-align: center; width:17%; align-items: center;}
.sec5 ul li a {display: block; width:100%; text-align: center; margin-top: 10px;}
.sec5 .tit {margin-bottom: 60px;}
#map { height:350px;}
.sec5 .fp-tableCell {vertical-align: top;}
.sec5 .container {margin-bottom: 150px;}
/* ---------------- section 6 / footer ---------------- */
.sec6 .logo {text-indent: -999999em; background: url('/img/logo/emalln4.png') no-repeat; width: 200px; height: 100px; background-size:200px;}
.sec6 {background: #fff; }
.sec6 footer {color:#666; padding:40px 20px; line-height: 22px; font-size: 14px; box-sizing: border-box;}
.hr {border:none; border-top:1px solid #ccc; margin:20px 0;}
.sec6 address {width:calc(100% - 250px);}
.gotop a {position: absolute; right:30px; top:30px; width:60px; height:60px; border-radius: 50%; border:2px solid #666; text-indent: -99999em; cursor: pointer;}
.gotop a:after {content: ""; border-left: 2px solid #666; border-top: 2px solid #666; width: 20px; height: 20px; display: inline-block; position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%) rotate(45deg);}
.fp-viewing-sixthPage #myMenu {display: none;}
.scroll2 {display: none;}

/* ---------------- 각 구역별 등장 에니메이션 ---------------- */
.sec2.active .sub_tit {animation:moveLeftToRight 1.2s forwards ease;}
.sec2.active .tit {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.5s;}
.sec2.active .desc {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.7s;}
.sec2.active ul {animation:moveLeftToRight 0.5s forwards ease; animation-delay: 1s;}
.sec2.active .image_area {animation:moveRightToLeft 0.5s forwards ease; animation-delay: 1s;}

.ani3.active .sub_tit {animation:moveLeftToRight 1.2s forwards ease;}
.ani3.active .tit {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.5s;}
.ani3.active .desc {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.7s;}
.ani3.active ul,
.ani3.active .tit_md  {animation:moveLeftToRight 0.5s forwards ease; animation-delay: 1s;}
.ani3.active .image_area {animation:moveRightToLeft 0.5s forwards ease; animation-delay: 1s;}

.ani4.active .sub_tit {animation:moveRightToLeft 1.2s forwards ease;}
.ani4.active .tit {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.5s;}
.ani4.active .desc {animation:moveBottomToTop 0.5s forwards ease; animation-delay: 0.7s;}
.ani4.active ul,
.ani4.active .tit_md  {animation:moveRightToLeft 0.5s forwards ease; animation-delay: 1s;}
.ani4.active .image_area {animation:moveLeftToRight 0.5s forwards ease; animation-delay: 1s;}

body:not(.none_ani) .ani5.active .sub_tit {animation:moveLeftToRight 1.4s forwards ease;}
body:not(.none_ani) .ani5.active .tit {animation:moveLeftToRight 0.9s forwards ease; animation-delay: 0.5s;}
body:not(.none_ani) .ani5.active ul li {animation:moveBottomToTop 0.9s forwards ease; animation-delay: 1s;}
body:not(.none_ani) .ani5.active ul li:nth-child(2) {animation-delay: 1.3s;}
body:not(.none_ani) .ani5.active ul li:nth-child(3) {animation-delay: 1.6s;}
body:not(.none_ani) .ani5.active ul li:nth-child(4) {animation-delay: 1.7s;}

.none_ani .ani5 .sub_tit,
.none_ani .ani5 .tit,
.none_ani  ul li {
    opacity: 1 !important;}


@keyframes moveLeftToRight {
    0% {opacity: 0; transform:translateX(-50px);}
    100% {opacity: 1; transform:translateX(0);}
}
@keyframes moveRightToLeft {
    0% {opacity: 0; transform:translateX(50px);}
    100% {opacity: 1; transform:translateX(0);}
}
@keyframes moveBottomToTop {
    0% {opacity: 0; transform:translateY(50px);}
    100% {opacity: 1; transform:translateX(0);}
}

/* ---------------- 반응형 ---------------- */
@media screen and (max-width:1200px) {
    .container {width:100%; }
    .slide_bg_typo, .sec5 .bg_typo {font-size: 9em;}
    #myMenu {top:86%; right:50px;}
    .slide_list .list_desc, .slide_list h4 {text-align: center;}
    .slide_list h4 {margin:-42px auto 20px;}
    .slick-dots {bottom:225px; text-align: center; width:100%; }
    .bg_typo {top:50px;}
    .tit {font-size: 3em;}
    .sub_tit {font-size: 1.2em;}
    .text_area .desc {font-size: 1.3em;}
    .sec2 ul {width:100%;}
    .sec2 .container.fx, .sec3 .container.fx, .sec4 .container.fx {justify-content: center;}
    .text_area {margin-right: 20px;}
    .sec2 .go_map {right:0;}
    .sec3 .bg_typo {left:10px; top:100px;}
    .sec4 .bg_typo {left:500px;}
    .sec4 .text_area {width:67%;}
    .sec4 .image_area {margin-right: 20px;}
    .sec5 .container {margin-top:30px; padding:0 30px; box-sizing: border-box;}
}
@media screen and (max-width:1000px) {
    .slide_list .list_desc,.slide_list h4 {width:100%; }

}
@media screen and (max-width:768px) {
    .sec2 .container.fx, .sec3 .container.fx, .sec4 .container.fx {justify-content: space-between;}
    .tit {font-size: 2em;}
    .slide_bg_typo {margin-top: 100px;}
    .tit_md {font-size: 1.5em;}
    .text_area .desc {font-size: 1.2em; line-height: 1.5em;}
    .sec3 ul li .icon {width:9rem; height:9rem; line-height: 9rem;}
    .sec3 ul li .icon img {width:60%;}
    .sec3 ul li:nth-child(2) .icon img {width:50%;}
    .sec3 ul li:nth-child(3) .icon img {width:34%;}
    .sec3 ul li p {font-size: 1em; line-height: 1.3em;}
    .sec4 ul {justify-content: space-around;}
    .sec4 ul li:nth-child(1) .icon img {width:49%;}
    .sec4 ul li:nth-child(2) .icon img {width:50%;}
    .sec4 ul li:nth-child(3) .icon img {width:48%;}
    .sec4 .bg_typo {top: 0; left: 0; }
    .sec5 ul {flex-wrap:wrap;}
    .sec5 ul li {width:42%; margin-bottom: 20px;}
    #myMenu {display: none;}
    .slide_bg_typo {position: absolute; top:19%; font-size: 8.5em; text-align: center; width:100%; }
    .slide_list .list_desc, .slide_list h4 {position: absolute; top:42%}
    .slick-slide.slick-active:before {animation: none;}
    .scroll {bottom:100px;}
    /* .scroll2 {display: block; bottom:10px;} */
    .slick-dots {bottom:200px;}
    .response {flex-direction: column; padding:60px 40px; box-sizing: border-box; height:100%; justify-content: space-between;}
    .response > div {width:100% !important;}
    .sec2 .image_area,.sec3 .image_area,.sec4 .image_area {height:400px;}
    .sec2 .image_area .address {top: 0; width:50%; left:0; height:150px; padding:10px;}
    .sec2 .go_map {top: 0; right: 0; transform: translateX(0)}
    .response.reverse {flex-direction: column-reverse;}
    .sec2 .text_area {margin-bottom: 20px;}
}
@media screen and (max-width:500px) {
    .sec5 .container {margin-bottom: 40px;;}
    header {width:100vw;}
    .sec1 .container {width:100%; justify-content: center;}
    .sec2, .sec3:not(.ani5), .sec4:not(.ani5) {padding:54px 0;}
    .response {padding:0 20px;}
    .scroll {display: none;}
    /* .sec1 .logo {width:100px; height:30px; background-size: auto 30px;} */
    .sec1 header {padding:15px 10px;}
    .sec1 header ul.connect {display: none;}
    .slide_bg_typo {margin-top: 120px; font-size: 4em; opacity: 0;}
    .slide_list {height:700px;}
    .slide_list h4 {margin: -42px auto 20px; font-size: 2em;}
    .slide_list .list_desc {font-size: 1.1em; padding:0 20px; box-sizing: border-box; line-height: 1.5em;}
    .slick-dots {bottom:200px;}
    .slick-dots li button {width:50px;}
    .sec3 ul li .icon {width:100px; height:100px; line-height: 100px;}
    .scroll {text-align: center;}
    .scroll img {width:60%;}
    .text_area {margin-right: 0;}
    .sec2 .bg_typo,.sec5 .bg_typo {display: none;}
    .sub_tit {margin-bottom: 10px; font-size: 0.95em;}
    /* .tit {margin-bottom: 15px;} */
    .text_area .desc {font-size: 1em; margin-bottom: 50px;;}
    .sec2 .image_area, .sec3 .image_area {display: none;}
    .sec2 ul {flex-direction: column; height:100%; }
    .sec2 li {width:100%; margin-bottom:30px; position: relative; flex-direction: initial;}
    .sec2 li:first-child img {height:80px;}
    .sec2 li:last-child img {height:100px;}
    .sec2 li span {position: absolute; top:-20px; left:0; }
    .sec2 li p {width:60%;}
    .sec5 .tit {margin-bottom: 50px;}
    .sec5 ul {flex-wrap:wrap;}
    .sec5 ul li {width:100%; flex-direction: initial; line-height: 35px;}
    .sec5 ul li .icon {display: none;}
    .sec5 ul li p {width:35%; text-align: left;}
    .sec5 ul li a {text-align: left; margin-top: 0;}
    .sec6 footer {flex-direction: column; box-sizing: border-box; padding:20px;}
    .sec6 .logo {width:100%; height:100px; text-align: left;  background-size: auto 100px;}
    .sec6 address {width:100%;}
    .gotop a {width:40px; height:40px; top: 20px; right: 20px; }
    .gotop a:after {width:15px; height:15px;}
}