/* ---- ¸ÞÀκñÁê¾ó---- */
.flickity-enabled { position: relative;  overflow:hidden;}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {overflow: hidden; position: relative; height: 100%;}
.flickity-slider {position: absolute; width: 100%; height: 100%;}
.flickity-enabled.is-draggable {-webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none;}
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab;}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing;cursor: grabbing;}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width:66px; height:100px; cursor: pointer;}
.flickity-prev-next-button{display: none;}
.flickity-viewport{width: 100%;}
.flickity-page-dots .dot{opacity: 1; position:absolute;z-index:999; }
.flickity-page-dots .dot.is-selected{ background:url(../../img/dotA.png) no-repeat 0 0; width:66px; height:100px;margin-left:0;margin-top:-0; }
.flickity-page-dots {position:absolute; right:4%; list-style: none;text-align: center;z-index:inherit;  margin-top:-150px; top:50%; width:50px;height:289px;background:url(../../img/rect_bg.png) no-repeat 0 0; }

/*¸ÞÀÎÀ̹ÌÁö Æ÷ÀÎÆ® À§Ä¡*/
.flickity-page-dots .dot:nth-child(1){top:-10px;left:0px;}
.flickity-page-dots .dot:nth-child(2){top:70px;left:0px;}
.flickity-page-dots .dot:nth-child(3){top:150px;left:0px;}
.flickity-page-dots .dot:nth-child(4){top:230px;left:0px;}
.slides {margin:0; padding:0; zoom:1;height: 100%;background-size: 100% 100%;}
.slides > li {height:100%;position: relative; z-index:2; }
.slides .cont{width: 100% !important; background-size: cover; display:block; height:100%; background-position:50%; z-index: inherit;}
 
#header section{max-width:1640px; margin:0 auto;}
.slides .box {width:1540px; height:680px; position:absolute; right:50%;  margin-right:-770px;  z-index:99; top:50%; margin-top:-360px;}
.slides .box .box_img { width:100%; }
.slides .box .box_img img {width:100%;}
.slides .box .box_txt {position:absolute; left:0; top:0; width:50%; opacity:0.9; background:#FFE300;  display:table; height:100%; }
.slides .box .box_txt .inner { display:table-cell; vertical-align:middle; padding-left:80px; }
.slides .box h2 span {font-size:120px; color: #000; display:block; font-weight:400; letter-spacing:-0.03em; text-align:left; line-height:90%;  font-family:"Metropolis-ExtraBold", 'NotoSansKR'; font-weight:900; }
.slides .box p { font-weight:400; padding-top:10px; color: #000; font-size: 20px;}
.slides .box .m_btn { text-align:center; padding:8px; width:150px;   background:#fff;   display:inline-block; margin-top:25px; box-shadow:10px 10px 10px #C5AF01;}
.slides .box .m_btn a {color:#000; }
.slides .box .m_btn a:hover {color:#A1A1A1; }


.m_count {position:absolute; bottom:65px; left:0; width:100%; z-index:99;}
.m_count ul {max-width:1540px; margin:0 auto;}
.m_count ul li {float:left; width:25%; background:url(../../img/line.png) repeat-y right 0px; }
.m_count ul li:last-child { background:none;}
.m_count ul li dl {padding-left:70px; margin-left:30px;}
.m_count ul li dl.count_1 {background:url(../../img/mcount_1.png) no-repeat 0 10px; }
.m_count ul li dl.count_2 {background:url(../../img/mcount_2.png) no-repeat 0 10px; }
.m_count ul li dl.count_3 {background:url(../../img/mcount_3.png) no-repeat 0 10px; }
.m_count ul li dl.count_4 {background:url(../../img/mcount_4.png) no-repeat 0 10px; }
.m_count ul li dl dt {color:#fff;}
.m_count ul li dl dd b.counter {color:#FFE300; font-size:47px; font-family:"Metropolis-ExtraBold"; line-height:110%; }



@media screen  and (max-width:1700px) {
.flickity-page-dots {right:30px;} 
#header section{max-width:1500px;}
.slides .box {width:1400px; height:618px; margin-right:-700px; margin-top:-330px;}
.m_count ul {max-width:1460px;}
}

@media screen  and (max-width:1500px) {
#header section{max-width:1300px;}
.slides .box {width:1200px; height:530px; margin-right:-600px; margin-top:-275px;}
.slides .box h2 span {font-size:90px;}
.slides .box p {font-size:19px;}
.m_count ul {max-width:1260px;}

}

@media screen  and (max-width:1400px) {
#header section{max-width:1060px;}
.flickity-page-dots {right:10px;} 
.slides .box {width:960px; height:424px; margin-right:-480px; margin-top:-212px;}
.slides .box h2 span {font-size:80px; }
.slides .box .box_txt .inner {padding-left:40px; }
.slides .box p {font-size: 17px;}
.m_count ul {max-width:1000px;}
.m_count ul li dl dd b.counter  {font-size:37px;  }

}

@media screen  and (max-width:1000px) {
.slides .box {width:600px; height:auto;   margin-right:-300px;   top:150px; margin-top:0;;}
.slides .box .box_txt {position: relative; width:100%; opacity:1;  background:none; }
.slides .box .box_txt .inner { padding:30px 0 0 0 ; }
.slides .box h2 span {font-size:55px; color: #FFE300; display:inline-block; padding-right:10px;}
.slides .box p {color: #FFE300;}
.slides .box .m_btn {padding:3px; width:100px;   margin-top:10px;}
.slides .box .m_btn a{font-size:9px;}
.m_count ul {max-width:670px;}
.m_count ul li dl {padding-left:37px; margin-left:20px;}
.m_count ul li dl.count_1,
.m_count ul li dl.count_2,
.m_count ul li dl.count_3,
.m_count ul li dl.count_4 {background-size:30px;}
.m_count ul li dl dd b.counter  { font-size:25px; }
}
 
 


 @media screen  and (max-width:680px) {
.slides .box {width:90%; height:auto;   margin-right:5%;  right:0;  top:100px;;}
.slides .box h2 span {font-size:45px;}

.m_count ul {width:90%;}
.m_count ul li {background:none; width:48.6%; border:1px solid #969193; padding:5px 0; margin:1px 0.3%;}

.flickity-page-dots .dot.is-selected{ background-size:30px; width:30px; height:50px; }
.flickity-page-dots { right:2%;   margin-top:-70px; width:30px;  background-size:30px; }
/*¸ÞÀÎÀ̹ÌÁö Æ÷ÀÎÆ® À§Ä¡*/
.flickity-page-dots .dot:nth-child(1){top:-13px;left:-1px;}
.flickity-page-dots .dot:nth-child(2){top:35px;left:-1px;}
.flickity-page-dots .dot:nth-child(3){top:83px;left:-1px;}
.flickity-page-dots .dot:nth-child(4){top:131px;left:-1px;}
}
 






/*º»¹®À̵¿¹öÆ°*/
.taBox{top: 50%;left: 50%;position: absolute; display:none;}
.taBox p { position:absolute;}
.taBox p img{position:absolute; z-index:10; top: 0;left: 0; }

/* ¼­ºê·¹À̾ƿô */
.wArea{width:1280px; margin: 0 auto; }
.content {position: relative; max-width:1920px; margin:0 auto; width:100%;}
.content h2{font-size:50px;padding-top:0px; padding-bottom:10px;  letter-spacing:-1px; line-height:100%; font-weight:900;}
.content .subText{font-size:15px;padding-bottom:20px; color:#000; font-weight:400; }

/* business title */
.container01 .box01{background:#FFE300; padding:80px 0; text-align:center;}
.container01 h2{color:#000;   font-family: 'Permanent Marker', 'NotoSansKR';}
.subText p a {  font-size:16px; text-decoration:underline; margin-top:10px; display:block; font-weight:bold; }
 
 








/* -------- ¸ÞÀÎÄÁÅÙÃ÷ ::   ·Î°í¹è³Ê ·Ñ¸µ -------- */
#mcount { position:relative;  text-align:center; overflow:hidden; height:430px;   }
#mcount .mcount_txt {position:absolute; z-index:10; top:0; left:0; width:100%; text-align:center; }
#mcount .mcount_txt h3 {padding-top:100px; color:#000; font-size:37px; font-weight:300; letter-spacing:-0.05em;  }
#mcount .mcount_txt h3 b {   font-weight:500; font-size:37px;  }
#mcount .mcount_txt h3 span {padding-top:10px; color:#fff; display:block; font-size:25px;   font-family:"Metropolis-ExtraBold"; }
#mcount .mcount_txt p {font-weight:300;  line-height:180%; color:#000; font-size:17px;}
.gb_arlim {position:relative;}
.gb_arlim .prev,.gb_arlim .next,.gb_arlim .pause,.gb_arlim .play {bottom:20px;}
.popup_li {position:inherit; padding:50px 0 75px;}
.popup_li .slick-slide { margin:0 10px; box-sizing: border-box;}
.popup_li .slick-slide img {width:100%; border-radius:7px; box-shadow:3px 3px 3px rgba(0,0,0,.2)}
.slick-slider{ position: relative;display: block;box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none; -ms-user-select: none; user-select: none;  -webkit-touch-callout: none; -khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus{ outline: none;}
.slick-list.dragging{ cursor: pointer;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track{ position: relative;top: 0; left: 0;display: block; margin-left: auto; margin-right: auto;}
.slick-track:before,
.slick-track:after{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{ visibility: hidden;}
.slick-slide{display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{ display: block;}
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{ pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{ visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden { display: none;}
.slick-arrow,.slick-dots li button {  cursor:pointer;}
.prev,.next,.pause,.play {position:absolute; width:30px; height:30px; display:block; text-indent:-9999px; cursor:pointer; z-index:10; background-repeat: no-repeat; background-color:transparent; border:none; bottom:0px; }
.prev {background-image:url('../../img/prev.png'); left:50%; margin-left:-45px;}
.next {background-image:url('../../img/next.png'); left:50%; margin-left:15px;}
.pause {background-image:url('../../img/pause.png'); left:50%; margin-left:-15px; }
.play {background-image:url('../../img/play.png'); left:50%; margin-left:-15px; display:none;}
.slick-dots {display:none !important;}

@media all and (max-width:1023px){
.prev,.next,.pause,.play {bottom:5px; }
#mcount .mcount_txt p { font-size:15px;}
.popup_li .slick-track {height:auto;}
}

@media all and (max-width:880px){
.popup_li {padding:10px 0 70px;}
.popup_li {padding:20px 0 60px;}
}

@media all and (max-width:600px){
#mcount { height:250px;}
#mcount .mcount_txt h3 {padding-top:50px; font-size:17px;}
#mcount .mcount_txt h3 b {font-size:17px}
#mcount .mcount_txt h3 span {font-size:15px;}
#mcount .mcount_txt p { font-size:13px;}
}

#mcount .mcount_bg  {background:url(../../img/mcount_bg.gif) repeat-y 0 0; width:100%;  position: relative; z-index:1; height:100%; vertical-align:bottom; 
 animation:motion 3s ease 1; -moz-animation:motion 3s ease 1; -webkit-animation:motion 3s ease 1; -o-animation:motion 3s ease 1; }
@keyframes motion
{0%{height:1px;}  100%{height:100%;}}
@-moz-keyframes motion
{0%{height:1px;}  100%{height:100%;}}
@-webkit-keyframes motion
{0%{height:1px;}  100%{height:100%;}}
@-o-keyframes motion
{0%{height:1px;}  100%{height:100%;}}







/* ¹è³Ê2 portfolio */
.container02 {background:url(../../img/mclass_bg.jpg) no-repeat center top;  padding:0 0 100px 0; text-align:center;}
.container02 h2{color:#FFE300; font-size:70px;  font-family: 'Permanent Marker', 'NotoSansKR'; padding-top:90px;}
.container02 .subText{color:#fff;  margin-bottom:0px; padding-top:10px;}
.container02 .subText p a {color:#fff;}
.container02 li{width: 25%;height: 250px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover; background-position:50%; position:relative; overflow:hidden;}
.container02 li:hover{overflow: hidden;}
.container02 li .hover{font-size:13px;text-align: left;position: relative; position:absolute; left:0px; top:250px; background:#FFE300; opacity: 0.9; filter:alpha(opacity=90); height: 100%;padding:30px 20px;box-sizing:border-box; }
.container02 li .hover h4{font-family: 'Permanent Marker', cursive; font-size: 25px; color: #000; padding-top: 20px;background: url(../../img/titlebar03.gif) no-repeat 0 0px; font-weight:400; }
.container02 li .hover .sum{color:#fff; background:#2C2C2A;  padding:6px 4px 1px 4px; font-size:13px; display:inline-block; line-height:100%;}
.container02 li a .hover .descrip{padding-top:20px;color: #000; height:60px; width:100%; display:block; text-overflow:ellipsis; display:-webkit-box; word-wrap:break-all; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; }



/* ¹è³Ê3 our company */
.container04 .box01{background:#F6F6F6; padding:80px 0; text-align:center; }
.container04 h2{color: #12120F;  font-family: 'Permanent Marker', cursive;   }
.content .subText a { color: #2C2C2A;  font-size:16px; text-decoration:underline; margin-top:10px; display:block; font-weight:bold; }
.container04 .box01 ul{display: inline-block; max-width:1260px;height:560px; width:96%; margin:30px 2%;  background:#fff; }
.container04 .box01 ul li { float:left; width:33.333%; height:560px; display:inline-block; }
.container04 .box01 ul li.mc_01 {background:url(../../img/mclass_01.jpg) no-repeat center 280px; background-size:420px;}
.container04 .box01 ul li.mc_02  {background:url(../../img/mclass_02.jpg) no-repeat center 0; background-size:420px;}
.container04 .box01 ul li.mc_03   {background:url(../../img/mclass_03.jpg) no-repeat center 280px; background-size:420px;}
.container04 .box01 ul li a div {padding:30px 20px 20px 30px; text-align:left;  }
.container04 .box01 ul li a div h3 { margin:30px auto; font-size:17px; color: #000; letter-spacing:-0.03em; font-weight:600; }
.container04 .box01 ul li a div span { font-size:14px;color: #2C2C2A; font-weight:400; line-height:140%;}
.container04 .box01 ul li a div h3 span  { margin-right:6px; font-size:33px;color: #FFE300;font-family: 'Permanent Marker', cursive; display:inline; padding:15px 5px 0 25px; line-height:100%;background:#2C2C2A; }  
.container04 .box01 ul li.mc_02 a div {padding-top:310px;}



/* ¹è³Ê4 news contact */
.container03 h2{background: url(../../img/titleBar04.png) no-repeat center 60px;color: #fff; padding-top:0; padding-bottom:20px;  font-family: 'Permanent Marker', cursive;}
.container03 p { color:#fff; opacity:0.7; filter:alpha(opacity=70); }
.container03 ul > li{width: 50%;position:relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:449px; display:inline-block; text-align:center; }
.container03 ul > li a{ display:block; width:100%; height:100%; position:relative; z-index:2; }
.container03 ul > li .over_bg {opacity:0; filter:alpha(opacity=0); background:#FFE300; width:100%; height:100%; position:absolute; left:0px; top:0; transition:all .5s; -moz-transition:all .5s}
.container03 ul > li:hover .over_bg{opacity:0.7; filter:alpha(opacity=70); }
.container03 .bg01 { background:url(../../img/news_bg.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;}
.container03 .bg02 { background:url(../../img/contact_bg.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;}
.container03 .box_line{ display:inline-block; vertical-align:middle; }
.container03 .bg01 a:before { width:1px; height:100%; content:' '; vertical-align:middle; margin-left:-1px; display:inline-block; }
.container03 .bg02 a:before { width:1px; height:100%; content:' '; vertical-align:middle; margin-left:-1px; display:inline-block; }



/* ¹è³Ê5  ¿Â¶óÀι®ÀÇ*/
.project_btn { width:100%; text-align:center; background:#FFE300;}
.project_btn a { padding:40px 0 20px 0; display:block; transition:all 200ms linear; -webkit-transition:all 200ms linear; cursor:pointer; -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; }
.project_btn a h3 {background:url(../../img/icon_online.png) no-repeat center top; padding-top:60px; font-family:'Archivo Narrow',sans-serif; font-size:17px; color:#2C2C2A; font-weight:600;}
.project_btn a p { padding-top:10px; font-size:13px; color:#2C2C2A; opacity:0.8; filter:alpha(opacity=80);}
.project_btn a:after { content:''; display:inline-block; width:26px; height:13px;  margin-left:15px; }
.project_btn a:hover { background:#161615; color:#2C2C2A;}
.project_btn a:hover h3 {background:url(../../img/icon_online2.png) no-repeat center top; color:#FFE300; }
.project_btn a:hover p { color:#FFE300;}


@media screen and (min-width:960px) and (max-width:1280px) {
/*1280~1024*/
.content { width:100%; }
.wArea { width:960px; margin:auto; position:relative; }
.content .linear { transition:all 200ms linear; -webkit-transition:all 200ms linear; -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear;}
.content .work_more a:hover {background:#FFE300 url(../../img/more_work.png) center no-repeat;}
/* ¹è³Ê1 webfactory art */
.container01 .box01 ul{ max-width:960px;}
.container03 ul > li { height:350px;}
/* ¹è³Ê3 class */
.container04 .box01 ul li a div {padding:20px 10px 10px 20px;  }
.container04 .box01 ul li a div h3 { margin:20px auto; font-size:15px;  }
.container04 .box01 ul li a div span { font-size:13px; }
.container04 .box01 ul li a div h3 span  { font-size:30px; padding:10px 5px 0 20px;}  
}

@media screen and (min-width:670px) and (max-width:959px) {
/*960~670*/
.wArea { width:100%; }
.container02 ul {max-width:640px; margin:0 auto;}
.container02 li { width:50%;}
.container02 .subText { margin-bottom:30px;}
.container01 .box02 ul li { width:50%; margin:10px 0;}
.container03 ul > li { height:350px;}
.taBox { display:none; }
.content .subText { padding:0 20px;}
/* ¹è³Ê1 webfactory art */
.container01 .box01 ul{ max-width:670px;}
.container03 ul > li { width:100%; float:none !important; height:280px;}
/* ¹è³Ê4 news contact */
.contact .ff > li li{min-height: 60px;padding: 10px 0;margin-right: 30px;border-bottom: 1px solid #d5333a; margin-left:10px;}
.mapBox .map_wrapper{height:400px;}
.contact .send_from { margin-right:10px;}
/* ¹è³Ê3 class */
.container04 .box01 ul li a div {padding:10px;  }
.container04 .box01 ul li a div h3 { margin:20px auto; font-size:15px;  }
.container04 .box01 ul li a div span { font-size:12px; line-height:120%;}
.container04 .box01 ul li a div h3 span  { font-size:25px;   } 
}

@media screen and (min-width:200px) and (max-width:669px) {
.content { width:100%; }
.wArea { width:100%; margin:auto; position:relative; }
.container01 .box01 { padding:30px 0;}
.taBox { display:none;}
.content .subText { padding:0 15px; }
.content .subText br{ display:none;}
.content h2 { font-size:28px; padding-bottom:20px; padding-top:0px; background-size:30px 2px; line-height:32px;}
/* ¹è³Ê1 webfactory art */
.container01 .box01 ul{ max-width:420px; width:90%; margin:0 auto; }
.container01 .box01 ul li { float:none; width:100%; height:auto; display:blcok; margin:20px 0; }
.container01 .box01 ul li.mb_01 div h3,
.container01 .box01 ul li.mb_02 div h3,
.container01 .box01 ul li.mb_03 div h3,
.container01 .box01 ul li.mb_04 div h3 {background-size:50px;}
.container01 .box01 ul li a div h3 {   padding-top:80px;  }
.container01 .box01 ul li a div span { font-size:12px;  width:100%;}
/* ¹è³Ê2 portfolio */
.container02 .subText { margin-bottom:20px; font-size:11px; line-height:140%;}
.container02 { padding:30px 0 50px 0;}
.container02 li { width:50%; height:170px;}
.container02 li .hover{ padding:10px; transition: all 0.4s ease-out 0.0s; -moz-transition: all 0.4s ease-out 0.0s; -webkit-transition: all 0.4s ease-out 0.0s;}
.container02 li a .hover .descrip{padding-top:10px; height:40px; -webkit-line-clamp:2; }
.container02 li .hover h4 { font-size:16px; margin-top:10px; font-weight:normal; background-position:0 10px; background-size:20px 2px;}
/* ¹è³Ê4 news contact */
.container03 ul > li { width:100%; float:none !important; height:170px;}
.container03 h2 {background-size:30px 2px; background-position: center 90%; }
/* ¹è³Ê3 class */
.container04 .box01{ padding:40px 0;  }
.container04 .box01 ul{  max-width:300px; height:auto;margin:10px 2%;    }
.container04 .box01 ul li { float:none; width:100%; height:auto; display:block; }
.container04 .box01 ul li.mc_01, 
.container04 .box01 ul li.mc_02,
.container04 .box01 ul li.mc_03 {background-position: center 0px; background-size:300px; }
.container04 .box01 ul li a div,.container04 .box01 ul li.mc_02 a div  {padding:220px 20px 20px 20px; }
.container04 .box01 ul li a div h3 { margin:20px auto;  }
.container04 .box01 ul li a div span { font-size:12px;}
.container04 .box01 ul li a div h3 span  {  font-size:28px; padding:10px 5px 0 20px;  }  
}