@charset "utf-8";
/*-------------------------------------------------
common Style Sheet
Version : 1.0
Author :  Webping
Create date : 2019. 12. 04.
-------------------------------------------------*/

@import url('/css2/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');




/* ------------------------------------------------------------ */

body {
  min-width: 320px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.5px;
  word-spacing: -0.5px;
  color: #0a0a0b;
  line-height: 1.75;
  word-break: keep-all;
  opacity: 0;



}

body.loaded {
  opacity: 1;
  transition: opacity 0.5s ease
}
.load-bg {
  position: fixed;
  z-index: 99999;
  background: #000;
  transition: all 0.8s ease;
  height: 0;
  width: 100%;
  left: 0;
  top: 0;

  opacity: 1;
}
.load-bg.active {
  height: 100%;
  opacity: 1;
}


.navigation {position: fixed; top: 0; left: 0; width: 100%; padding: 0px 90px; z-index: 999; transition: all 0.5s ease; height: 100px}
.navigation:hover {background: #fff; }
.logo {float: left;}
.logo a {display: block; width: 202px; height: 26px; background: url(/images/logo.png) no-repeat 0 0; background-size: cover; transition: all 0.5s ease; margin-top: 34px}
.drop-menu {position: absolute; bottom: 20px; left:0px; width: 320px; z-index: 10; }
.drop-bar {width: 100%; height: 50px; position: absolute; /*background: #ededec;*/ bottom:-50px; left: 0;background:#fff;opacity:92%;}
.navigation .drop-menu > a {font-size: 14px; display: inline-block; margin-right: 40px; }

#header.acting .logo a {background: url(/images/logo-b.png) no-repeat 0 0; background-size: cover; }
.navigation:hover .logo a {background: url(/images/logo-b.png) no-repeat 0 0; background-size: cover; }

.navigation .top-menu {float: right;}
.navigation .top-menu li {float: left; padding-left:54px; position: relative; z-index: 10; height: 160px}
.navigation .top-menu li > a {font-size: 18px; color: #fff; display: block; transition: all 0.1s ease; line-height: 100px; box-sizing: border-box}
.navigation:hover .top-menu li > a {color: #0a0a0b;}
.navigation .top-menu li:hover > a {color: #e57200 !important; border-bottom: solid 4px #e57200; line-height: 96px}
#header.acting .navigation .top-menu li > a {font-size: 18px; color: #0a0a0b; display: block}
#header.acting .navigation{background:#fff;}


.pager-navigator {position: fixed; right: 90px; top:50%; transform: translateY(-50%); z-index: 999; }
.pager-navigator li {margin-bottom: 6px; overflow: hidden}
.pager-navigator a {display: inline-block; color: #0a0a0b; bbackground: #fff; padding:12px 24px; font-size: 12px; border-radius: 50px; line-height: 1; font-weight: 400; float: right; position: relative; margin-right:16px; transition: all 0.5s ease;height:36px;}
.pager-navigator a::after {width: 6px; height: 6px; background: #fff; content: ""; display: inline-block; position: absolute; right: -16px; top: 14px; border-radius: 50%}

.pager-navigator a.active, .pager-navigator a:hover {bbackground: #e57200; color: #fff;}
.pager-navigator a.active::after, .pager-navigator a:hover::after {background: #e57200;}

.pager-navigator.acting  a {bbackground: #0a0a0b; color: #fff;}
.pager-navigator.acting  a::after {background: #0a0a0b;}
.pager-navigator.acting a.active, .pager-navigator.acting a:hover {bbackground: #e57200; color: #fff;}
.pager-navigator.acting a.active::after, .pager-navigator.acting a:hover::after {background: #e57200;}

.scroll-icon {color: #fff; position: absolute; width: 100%; text-align: center; bottom: 20px; left: 0;}
.scroll-icon span {display: block; font-size: 12px;}


.main-tit {font-size: 18px; display: inline-block; margin: 0 auto 50px}
.main-tit::after {content: ""; background: #e57200; height: 2px; margin-top: 16px; width: 100%; display: block}
.sub-tit {font-size: 56px; font-weight: 300;}
.sub-tit2 {font-size: 40px; font-weight: 300;}
.article-01 {background: url(/images/main-bg.png) no-repeat top center; background-size: cover;width: 100%; height: 940px; position: relative; }
.article-01-img {text-align: center; width: 100%;}
.article-01-img::after {content: ""; width: 100px; height: 2px; background: #fff; margin: 50px auto; display: block;}
.article-01-img img {display: inline-block; max-width: 100%;}

.article-01 .content-wrap {position: absolute; width: 100%; top:50%; transform: translateY(-50%); left: 0;}
.article-01 p {color: #fff; font-size: 22px;}

.article-02 {padding: 168px 0 100px; overflow: hidden; width: 100%; height: 1080px}
.article-02 .text-area h2 {font-size: 40px; font-weight: 300; line-height: 1.4}
.article-02 img {display: block; max-width: 100%;}

.apt-area {position: relative}
.apt-area::before {content: "SENSATION"; opacity: .14; position: absolute; top:-50px; right: -70px; font-size: 160px; font-weight: bold; line-height: 1; color: #e57200;font-family: 'Poppins', sans-serif; z-index: 10}

.apt-area2 {position: relative}
.apt-area2 img {width:39px;}
/*.apt-area2::before {content: "ALL"; opacity: .14; position: absolute; top:10px; right: -46px; font-size: 160px; font-weight: bold; line-height: 1; color: #e57200;font-family: 'Poppins', sans-serif; z-index: 10; letter-spacing: 30px}*/

.article-03 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #f6f4f1;height: 1080px}
.article-03 img {display: inline-block; max-width: 100%}
.article-03 .img-tit {display: inline-block; position: relative; margin-top: 80px}
.article-03 .img-tit p {font-size: 26px;position: relative ; z-index: 2}
.article-03 .img-tit::after {width: 100%; height: 16px; content: ""; position: absolute; z-index: 0; left: 0; bottom: 0; background:#f2dac1 }

.article-04 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #fff;height: 1080px}
.article-04 img {display: inline-block; max-width: 100%}

.article-05 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #fff; position: relative; z-index: 2;}
.article-05::before {content: ""; z-index: 0; position: absolute; width: 100%; top: 0; left: 0; height: 480px; background: #f6f4f1;}
.article-05 .container {z-index: 2; position: relative}
.article-05 .ptit{opacity: .14;position: absolute;top:-120px;right:-32px;font-size: 160px;font-weight: bold;line-height:80%;color: #e57200;font-family: 'Poppins', sans-serif;z-index:1;letter-spacing: 30px;text-align:right;}

.tab-menu {margin-bottom: 60px; overflow: hidden}

.tab-menu li {float: left; margin-right: 40px}
.tab-menu li a {display: inline-block; font-weight: 400; font-size: 18px; }
.tab-menu li a.active {color:#e57200 }
.tab-menu li a:hover{color:#e57200;}
.tab-menu li a.active::after {content:""; width: 100%; height: 2px; background:#e57200; display: block; margin-top: 8px}


.article-05 .item {background: #fff; width: 100%; height: 465px; text-align: center; overflow: hidden }
.article-05 .item .pic {width: 100%; overflow: hidden; height: 300px}
.article-05 .item .pic img {display: block; width: 100%; height: 100%; object-fit: cover;}
.article-05 .item .info {padding:40px; text-align: center}
.article-05 .item .info h2 {font-size: 18px; font-weight: bold; margin-bottom: 4px}
.article-05 .item .info p {font-size:16px; color: #7e7e7e; }

.article-06 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: url(/images/article-06-bg.png) no-repeat center; background-size: cover;height: 1080px}
.article-06 img {display: inline-block; max-width: 100%}

.video-area {background: #000; width: 100%; max-width:1050px; margin: 50px auto; overflow: hidden; height: 590px; box-shadow: rgba(0,0,0,0.5) 10px 30px 40px; }
.article-07 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #f6f4f1; height: 1080px}

.box-area {display: flex; }
.box-area li {width: 100%; margin-right: 15px; margin-bottom: 15px;}
.box-area li:last-child {margin-right: 0;}
.box-area .acting-wrap {width: 100%;  background: #fff; padding: 50px 20px; height: 494px }
.box-area .acting-wrap h2 {margin-bottom:70px }
.box-area .acting-wrap h2 img {display: inline-block; max-width: 100%}
.box-area .acting-wrap h4 {text-transform: uppercase; font-weight: bold; font-size: 22px; margin-bottom: 16px}
.box-area .acting-wrap p {font-size: 18px; line-height: 1.5}


.article-08 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #fff;height: 1080px}

.office-slider {width: 100%; max-width: 1060px; margin: 0px auto; background: #000; position: relative; z-index: 2; height: 660px}
.office-slider .item {width:100%; background: #fff; height: 660px; position: relative; z-index: 4; outline: 0}
.office-slider .item img {width: 100%; height: 100%; /*object-fit: cover*/}
.office-slider::after {content: ""; width: 100%; max-width: 1060px; right:-40px; bottom: -40px; background: url(/images/slide-back.png); display: block; z-index: -1; height: 660px; position: absolute; background-size: cover}
.slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 68px; height: 68px; text-indent: -9999px; outline: 0 !important; z-index: 10; }
.slick-arrow.slick-prev {background: url(/images/slick-left.png) no-repeat; background-size: cover; left: 20px;}
.slick-arrow.slick-next {background: url(/images/slick-right.png) no-repeat; background-size: cover; left: auto; right: 20px;}

.slick-dots {display: flex; width: 100%; margin-top: 80px}
.slick-dots li {width: 100%;}
.slick-dots li button {width: 100%; height: 1px; background:#c5c5c5; outline: 0; text-indent: -9999px; padding: 0; }
.slick-dots li.slick-active button {width: 100%; height: 1px; background:#000 }


.article-09 {padding: 168px 0 100px; overflow: hidden; width: 100%; background: #fff;height: 1080px}

.article-09 strong {font-size: 22px}
.btn {border-radius: 0; font-size:18px; height: auto; padding: 20px}
.input-group-text {color: #fff; background: #7e7e7e; border-radius: 0; font-weight: 300; font-size: 18px; border: 0; padding: 20px 50px}


.footer-wrap {background: #f6f4f1; padding:42px 0; overflow: hidden }
.fnb {margin-bottom: 16px; padding-bottom: 16px; border-bottom: solid 1px #000}
.address {font-size: 16px}
.address li {display: inline-block}
.address li::after {content: ""; width: 1px; height: 14px; background: #000; margin-left: 8px; margin-right: 8px; display: inline-block}
.address li:last-child::after {content: none}
.address p {color: #777; margin-top: 32px}

.pic-slider .item {margin: 0 15px}
.pic-slider .item img {max-width: 100%}

.pic-slider .slick-dots {display: block; width: 100%; margin-top: 24px; text-align: center}
.pic-slider .slick-dots li {width: auto; display: inline-block; margin: 0 4px}
.pic-slider .slick-dots li button {width: 12px; height: 12px; background-color: transparent; outline: 0; text-indent: -9999px; padding: 0; border-radius: 50%; border: solid
1px #e57200}
.pic-slider .slick-dots li.slick-active button {width: 12px; height: 12px; background:#e57200 }
.custom-select {display: inline-block; background-color: transparent; border: 0; border-radius: 0; border-bottom: solid 1px #222; color: #e57200; width: auto; padding: 0 !important; font-size: 12px; background:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0 center/8px 10px; display: none}


.navbar-toggle {display: none; position: absolute; top:4px; right: 15px; padding: 0px;  margin-top: 8px;  margin-right: 0px;  margin-bottom: 8px;	border:none;  border-radius: 4px;}
.navbar-toggle, .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color:transparent; outline: 0}
.navbar-toggle svg {
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
	transition:all 0.3s ease;
}
.navbar-toggle svg:hover {
-webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);

}




.hamburger {position:relative; z-index:999}
.hamburger .line{
  width: 30px;
  height: 3px;
  background-color: #fff;
  display: block;
  margin: 7px auto;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}


#hamburger-6.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-6.is-active .line:nth-child(2){
  width: 0px;
}

#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#hamburger-6.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}

#hamburger-6.is-active .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(90deg);
  -ms-transform: translateY(-7px) rotate(90deg);
  -o-transform: translateY(-7px) rotate(90deg);
  transform: translateY(-7px) rotate(90deg);
}

.navigation:hover .hamburger .line {  background-color: #222;}
#header.acting .hamburger .line {  background-color: #222;}

.mobile-nav.active {height: 100vh}
.mobile-nav {background: #fff; height: 0; overflow: hidden; margin: 0 -15px; transition: all 0.5s ease}
.mobile-nav li {border-bottom: solid 1px #ddd; padding: 16px 0;}
.mobile-nav ul {border-top: solid 1px #ddd; margin-top: 40px}
.mobile-nav li > a {font-size: 18px; display: block; text-align: center;  font-weight: bold; text-transform: uppercase}
.mobile-nav li .mo-drop-menu a {display: block; text-align: center; color: #777; font-weight: bold; font-size: 16px; margin-top: 4px}

.mask_privacy {background-color:#222;position:fixed;top:0px;left:0px;z-index:1000;opacity:0.7;display:none;width:100%;height:200%;}
.yak_div{width:90%; position:fixed; left:50%; top:10%; margin:0px 0px 0px -450px; border:10px solid #1f2246; background:#fff; z-index:3000;display:none;max-width:900px;}
.yak_div .yak_pop{height:600px; padding:30px; border:1px solid #323337;background:#fafafb; overflow:auto; color:#161616; line-height:160%;font-size:14px;max-width:900px;text-align:initial;}
.yak_div .yak_pop strong{font-size:16px;}
.yak_div .yak_pop p{font-size:14px;}
.yak_div .close{display:block; position:absolute; right:-30px; top:0px;color:#fff;opacity:1;}

@media (max-width: 1200px) {
    #header.acting .navigation  {background: #fff}
     .pager-navigator {display: none}
    body {font-size: 14px}
    .navigation {padding: 0 15px; height: auto}
    .navigation .top-menu {display: none}
    .logo {text-align: center; float: none}
    .logo a {margin: 24px     auto; width: 156px; height: 20px}
    .article-01 {padding: 0 15px; height: 815px}
    .article-01-img img {max-width: 80%;}
    .article-01 p {font-size: 16px; padding: 0 72px}
    .col-md-6.at-first {display: block;
    position: static;
    -ms-flex-order: 2;
    -webkit-order: 2;
    -webkit-box-ordinal-group: 3;
        order: 2;}
    .navbar-toggle {display: block}
} 
    
@media (max-width:850px) {
	.article-02 {padding: 60px 0 40px; height: auto}
	.main-tit {margin-bottom: 40px; font-size: 16px;}
	.main-tit::after {margin-top: 8px}
	.article-02 .text-area h2 {font-size: 24px}
	.apt-area::before {font-size: 48px; left: 0; top: -25px; right: auto}
	.sub-tit {font-size: 36px}
	.article-03  {padding: 60px 0 40px; height: auto}
	.article-03 p {padding: 0 30px}
	.article-03 .img-tit {margin-top: 40px}
	.article-03 .img-tit p {font-size: 14px}
	.article-03 .img-tit::after {content: none}
	.article-03 .img-tit .m-underline {background:url(/images/underline.png) repeat-x;}
	.article-04  {padding: 60px 0 40px; height: auto}
	.sub-tit2 {font-size: 24px; line-height: 1.5}
	.tab-menu {display: none}
	.article-05  {padding: 60px 0 40px; height: auto}
	.apt-area2 img {width:20px;}
	/*.apt-area2::before {font-size: 72px; letter-spacing: 12px; right: -30px; top:130px}*/
	.article-05 .ptit{opacity: .14;position: absolute;top:-44px;right:0px;font-size:4.2em;font-weight: bold;line-height:80%;color: #e57200;font-family: 'Poppins', sans-serif;z-index:1;letter-spacing: 0px;text-align:right;}
	.article-05 .item {height: 330px}
	.article-05 .item .pic {height: 200px}
	.article-05 .item .info p {font-size: 12px}
	.article-05 .item .info h2 {font-size: 16px; margin: 0}
	.article-05 .item .info {padding: 30px 15px;}
	.article-06  {padding: 60px 0 40px; height: auto; background: #f6f4f1}
	.article-06 img {max-width: 70%}
	.video-area {height: 240px; margin: 24px -15px 0px -15px; width: auto; max-width: none; box-shadow: none}
	.article-07 {padding: 0px 0 40px; height: auto; padding-top: 0}
	.box-area .acting-wrap h2 {margin-bottom: 40px}
	.box-area .acting-wrap h2 img {max-width: 80%}
	.box-area .acting-wrap h4 {font-size: 18px}
	.box-area .acting-wrap p {font-size: 1.1em; color: #0a0a0b; padding: 0px;}
	.box-area .acting-wrap {height: auto}
	.slick-arrow.slick-next {right: 10px; width: 20px; height: 20px}
	.slick-arrow.slick-prev {left: 10px;  width: 20px; height: 20px}
	.article-08 {padding: 60px 0px; height: auto;}
	.article-08 .container{padding-right:0px;}
	.article-08 .slick-arrow.slick-next {right: -6px; width: 30px; height: 30px}
	.article-08 .slick-arrow.slick-prev {left: 10px;  width: 30px; height: 30px}
	.article-08 .slick-dots {margin:59px 0px 0px 15px;padding-right:15px;}
	.article-09 {padding: 60px 0 40px; height: auto}
	.article-09 .sub-tit2 {margin: 0 0 40px     !important}
	.article-09 .text-area  {text-align: center !important}
	.form-control {padding: 14px    }
	.input-group-text {padding: 14px 20px}
	.btn {padding: 14px}
	.article-01 p {font-size: 14px}
	.sub-tit {font-size: 24px}
	.pic-slider .item {width: 400px}
	.pic-slider {margin: 0px -20px 0px 0px;}
	.sub-tit2 {font-size: 24px}
	.box-area {display: block; padding-top: 0 !important}
	.box-area .acting-wrap {max-height: 374px}
	.office-slider {height: 240px;margin:0px -15px 0px -15px;}
	.office-slider .item {height: 240px}
	.office-slider::after {height: 200px; bottom: -24px}
	.slick-dots {margin-top: 50px}
	.address {font-size: 12px}
	.custom-select {display: block}
	.yak_div{width:100%; position:fixed; left:0%; top:0%;margin:0px;border:1px solid #b7b7b7; background:#fff; z-index:3000;display:none;max-width:850px;}
	.yak_div .yak_pop{height:600px; padding:30px; border:10px solid #1f2246;background:#fafafb; overflow:auto; color:#161616; line-height:160%;font-size:14px;max-width:900px;text-align:initial;}
	.yak_div .close{display:block; position:absolute; right:5%; top:15px;color:#000;opacity:1;}
}    

@media (max-width:640px) {
     .pic-slider .item {width: 300px}
}

.phcolor::placeholder {
  color: #e57200;
}
.hide-div{display:none;}
.more-btn{text-align:center;display:none;cursor:pointer;}