/* ---- ¸ÞÀÎºñÁê¾ó---- */
.flickity-enabled { position: relative;}
.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.gif) no-repeat 0 0;  width:38px; margin-left:0;margin-top:-0; }
.flickity-page-dots {position:absolute;top:50%;left:50%;list-style: none;text-align: center;z-index: inherit; overflow:hidden; margin-left:-84px; margin-top:-220px;width:167px;height:96px; background:url(../../img/rect_bg.png) no-repeat 0 0; }
/*¸ÞÀÎÀÌ¹ÌÁö Æ÷ÀÎÆ® À§Ä¡*/
.flickity-page-dots .dot:nth-child(1){top:50px;left:4px;}
.flickity-page-dots .dot:nth-child(2){top:50px;left:44px;}
.flickity-page-dots .dot:nth-child(3){top:50px;left:84px; }
.flickity-page-dots .dot:nth-child(4){top:50px;left:124px;}
.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;}
.slides .box h2{font-size:51px;color: #fff; letter-spacing:-0.04em; font-weight:200; text-align:center; line-height:100%; font-family:'GongGothicLight';}
.slides .box h2 span {font-size:51px;color: #fff; line-height:140%;  font-family:'GongGothicBold';}
.slides .box .textBox{line-height:130%; padding:10px 0;  font-size: 18px;  text-overflow:ellipsis; display:-webkit-box; word-wrap:break-all; -webkit-line-clamp:3; -webkit-box-orient: vertical; /*overflow: hidden;*/ color:#fff; opacity:0.7; font-family:'GongGothicLight';}
.slides .box .textBox2{line-height:130%; padding:10px 10px;  font-size: 25px; font-family:'GongGothicMedium'; color:#ffd53e;}
.slides .box .textBox2 a {color:#ffd53e;}
.slides .box .textBox2 a:hover {color:#6c00ff;}
.slides .box .textBox3{line-height:130%; padding:10px 10px;  font-size: 25px; font-family:'GongGothicMedium'; color:#ffd53e;}
.slides .box .textBox3 a {color:#ffd53e;}
.slides .box .textBox3 a:hover {color:#a55d5d;}

.slides .box { width:760px; height:300px; position:absolute; left:50%; position:absolute; margin-left:-380px; top:43%; margin-top:-20px; text-align:center;  opacity:0.8; z-index:999; }


@media screen and (min-width:200px) and (max-width:669px) {
.slides .box { width:300px;  margin-left:-150px; top:41%; }
.slides .box h2,.slides .box h2 span{font-size:31px;}
.slides .box .textBox{font-size: 13px;}
.TopScroll { right:20px; width:38px; height:38px; background-size:15px;}
.TopScroll:hover {background-size:15px;}
.TopScroll a { width:38px; height:38px;}
.slider .downBtn img{ width:50px;}
.slider .downBtn { margin-left:-25px;}
.flickity-page-dots {top:65%;}
.slides .box {top:45%;}
}

/*º»¹®ÀÌµ¿¹öÆ°*/
.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:31px;   line-height:100%; letter-spacing:-1px;}
/* title */
.container01  {width:100%; background:url(../../img/mpattern_bg.jpg) no-repeat center bottom; }
.container01 .box01{ padding:150px 0; margin:0 auto;  max-width:1200px;  }
.container01 .Tit { background:url(../../img/mquick_icon_tit.png) no-repeat 10px  7px; padding-left:60px;   background-size:45px;  margin-bottom:30px; margin:0 auto;  max-width:1200px;}
.container01 h2{color: #12120F; border-left:1px solid #D0D1D1; padding-left:20px; font-family:'GongGothicBold';}
.container01 h2 span { display:block; font-size:13px;   color:#000; font-weight:200; opacity:0.7; margin-top:10px; font-family:'GongGothicLight';}


/* -------- ¹è³Ê1: Äü¾ÆÀÌÄÜ -------- */
.container01 .box01 ul:after {content:"";display:block;clear:both;}
.container01 .box01 ul li { float:left; width:16%; display:inline-blcok; margin:0 2%; background:url(../../img/mquick_bg.png) no-repeat center 20px; text-align:center;}
.container01 .box01 ul li.mb_01 div h3 {background:url(../../img/mquick_icon1.png) no-repeat center 55px; background-size:41px;}
.container01 .box01 ul li.mb_02 div h3 {background:url(../../img/mquick_icon2.png) no-repeat center 55px; background-size:41px;}
.container01 .box01 ul li.mb_03 div h3 {background:url(../../img/mquick_icon3.png) no-repeat center 55px; background-size:41px;}
.container01 .box01 ul li.mb_04 div h3 {background:url(../../img/mquick_icon4.png) no-repeat center 55px; background-size:41px;}
.container01 .box01 ul li.mb_05 div h3 {background:url(../../img/mquick_icon5.png) no-repeat center 50px; background-size:55px;}
.container01 .box01 ul li a div {margin:0 auto;}
.container01 .box01 ul li a:hover div {opacity: 0.7; filter:alpha(opacity=70);}
.container01 .box01 ul li a div h3 {margin:0 auto; padding-top:150px; font-size:17px;  font-family:'GongGothicBold';  color: #2C2C2A; font-weight:600; line-height:normal; }
.container01 .box01 ul li a div span { font-size:13px;color: #2C2C2A; padding-top:10px;  line-height:140%; width:95%; margin:0 auto; display:block;  font-family:'GongGothicLight';}
 
@media screen and  (max-width:669px) {
.container01 .Tit { background-size:35px;}
.content h2{font-size:19px;}
.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;  background-size:55px;}
.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,
.container01 .box01 ul li.mb_05 div h3
 {background-size:30px; background-position:center 35px;}
.container01 .box01 ul li a div h3 {   padding-top:85px;  }
}
 


 
/* ¹è³Ê2 portfolio */
.container05  {background:#000 url(../../img/mbanner_bg.jpg) no-repeat center top; width:100%;}
.container05 .box01{ padding:80px 0 200px 0; text-align:center; overflow:hidden; max-width:1403px; height:480px;   margin:0 auto; }
.subText {color:#fff; margin-left:2%; font-family:'GongGothicLight';}
.container05 h2{color: #fff; margin-left:3%; letter-spacing:2px; font-family:'GongGothicBold';}
.container05 .banner_wrap {padding-top:30px;}
.container05 .box01 .item {float:left;  width:705px;  display:inline-block; margin-right:5px; background:#fff;   }
.container05 .box01 .mc_01 {background:url(../../img/mclass_01.jpg) no-repeat left 0px; background-size:100%;}
.container05 .box01 .mc_02 {background:url(../../img/mclass_02.jpg) no-repeat left 0px; background-size:100%;}
.container05 .box01 .mc_03 {background:url(../../img/mclass_03.jpg) no-repeat left 0px; background-size:100%;}
.container05 .box01 .ml .txt {padding:410px 20px 10px 20px; text-align:left; }
.container05 .box01 .ml .txt  h3 { margin:10px auto; font-size:17px; color: #fff; font-weight:600; background:#000; padding:15px;}
.container05 .box01 .ml .txt span { font-size:14px;color: #2C2C2A; }
.container05 .box01 .ml .txt  h3 span  { margin-right:6px; font-size:21px; color:#000;  display:inline; padding:15px 5px 0 20px; line-height:100%; background:#fff; }  
.carousel-control { position:absolute; top:0;  margin-top:-70px; right:50%;  }
.right {margin-right:-160px; }
.left {margin-right:120px;}
@media screen and (max-width:1250px) {
.container05 .box01{ padding:100px 0;  max-width:1052px; }
}
@media screen and (max-width:1070px) {
.container05 .box01{ max-width:701px; }
}
@media screen and (max-width:770px) {
.container05 .box01{ max-width:300px; }
.container05 h2 {padding:0;}
.container05 .box01 .item { margin-right:0px;}
.container05 .box01 .item {width:300px; }
.container05 .box01 .ml .txt {padding:200px 20px 10px 20px; text-align:left; }
.container05 .box01 .ml .txt  h3 { margin:20px auto; }
.carousel-control {margin-top:-70px; }
.right {margin-right:-145px; }
.left {margin-right:130px;}
.right img,
.left img {width:15px;}
}
 

/* ¹è³Ê3 news contact */
.container03 h2{background: url(../../img/titleBar04.png) no-repeat center 60px;color: #fff; padding-top:0; padding-bottom:20px; letter-spacing:3px; }
.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%; position:relative; z-index:2; }
.container03 ul > li .over_bg {opacity:0; filter:alpha(opacity=0); background:#000; 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{ vertical-align:middle; } /*¿À·ù ½Ã ³Ö±â display:inline-block;*/
.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; }

/* ¹è³Ê4  ¿Â¶óÀÎ¹®ÀÇ*/
.project_btn { width:100%; text-align:center; background:#000;}
.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-size:17px; color:#fff; }
.project_btn a p { padding-top:10px; font-size:13px; color:#fff; 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:#eee;}
.project_btn a:hover h3 ,.project_btn a:hover p { color:#eee;}
@media screen and (min-width:960px) and (max-width:1280px) {
.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;}
.container03 ul > li { height:350px;}
}


@media screen and (min-width:670px) and (max-width:959px) {
.wArea { width:100%; }
.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 */
.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;}
}

@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 h2 { font-size:28px;  padding-top:0px; background-size:30px 2px; line-height:32px;}
/* ¹è³Ê4 news contact */
.container03 ul > li { width:100%; float:none !important; height:170px;}
.container03 h2 {background-size:30px 2px; background-position: center 90%; }
}