@import url("./normalize.css");
@import url("./reset.css");
@import url("./font.css");
@import url("./plugins.css");
@import url("./animate.css");

html.off,
html.off body{position: fixed;top: 0;left: 0px;right: 0px;margin-top: 0px;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
body, html{position:relative;overflow-x:hidden;width:100%;}
img{display:block;width:100%;max-width:100%;}
body{font-family:"NotoSansKR", "Roboto", sans-serif;font-size:14px;color:#000;}

#wrap,
#wrap #container{overflow:hidden; min-width:280px; font-weight:400;}
#wrap, #container{width:100%; max-width:100%; overflow:hidden;}
#header {width:100%; position:fixed; z-index:2; height:60px; transform:translateY(0); opacity:1; transition:ease-in-out .3s;}
#header.on {transform:translateY(-20px); opacity:0; transition:ease-in-out .3s;}
#header .header_bg {background:#fff; opacity:.3; width:100%; height:60px; position:fixed; top:0;} 
#header .header_box {padding:15px 20px; position:relative; z-index:1;}
#header .header_box::after {display:block; content:''; clear:both;}
#header .header_box .logo {width:65px; height:30px; float:left;}
#header .header_box .logo a {display:block;}
#header .header_box .logo a img {width:100%;}
#header .header_box .hinner {float:right;}
#header .header_box .hinner::after {display:block; content:''; clear:both;}
#header .header_box .hinner .m_gnb {float:right; width:25px; height:25px; text-indent:-9999px; background:url('../images/menu.png')no-repeat; background-size:25px; margin:2px 0 3px;}
#header .header_box .hinner .recruit {float:left; margin:8px 20px 0 0; vertical-align:bottom;}
#header .header_box .hinner .recruit a { display:block; font-size:15px; line-height:25px; font-weight:600; font-family:'Roboto'; color:#000;}



/* award */
#header .m_award{}
#header .m_award ul{position: fixed; top: 452px; right: 20px;width: 20%;}
#header .m_award > ul > li{width: 100%;margin-bottom: 10px;}


/* drawer_nav */
.drawer_nav{position:fixed; top:0; right:-1000px; z-index:200; background:#ffffff ; width:0; height:100%; padding:40px 0 60px; -webkit-transition: all 0.8s; transition: all .8s;}
.drawer_nav.on {-webkit-transition: all 0.5s; transition: all 0.5s; width:100%;}
.drawer_nav.on .logo {display:block;}
.drawer_nav .logo {display:none; position:fixed; left:5px;z-index:1;  width:65px; height:30px; top:15px; left:20px;}

.drawer_nav .drawer_close{}
.drawer_nav .drawer_close a{position:absolute;top:10px;right:12px;z-index:30;width:41px;height:41px;}
.drawer_nav .drawer_close a img{width:25px;height:25px; margin:8px;}
/* .drawer_nav .red_dot{position:absolute;top:11.84%;left:10.8%;border-radius:50%;-webkit-border-radius:50%;width:9px;height:9px;background:#e60012;} */
.drawer_nav .drawer_nav_list{/* position:absolute; top:195px; left:0; z-index:10; */  /* margin:calc((100vh - 351px)/ 2 ) 0; */ margin-top:calc((100vh - 505px) /2); width:100%;}
.drawer_nav .drawer_nav_list ul {text-align: center;}
.drawer_nav .drawer_nav_list ul li {padding-bottom: 50px;}
.drawer_nav .drawer_nav_list ul li a{display:inline-block;font-size:45px;font-weight:600;color:#000;}
.drawer_nav .drawer_nav_list ul li a:hover {color:#df262b;}
.drawer_nav .drawer_nav_list ul li a.on::after {content: ''; display: inline-block; width: 8px;height: 8px;border-radius: 50%;background:#df262b;vertical-align: top;position: absolute;margin-left: 5px;}
.drawer_nav .drawer_nav_list ul li:last-child a span{display:inline-block;border-top:1px solid #353737;padding-top:11px;font-size:18px;}
.drawer_nav .drawer_nav_list .drawer_nav_line {width:57.6%; height: 1px; background-color: #d6d6d6; margin:0 auto 0;}
.drawer_nav .brochure {margin-top:60px;}
.drawer_nav .brochure a {display: block; width: 260px; font-size: 20px; background-color: #df262b; border-radius: 100px; color: #fff;font-weight:600;}
/* .drawer_nav .brochure a::before {content: ''; display: inline-block; background: url("../images/brochure.png") no-repeat center; width: 25px; height: 25px; position: absolute;left: 36px;top: 19px;} */

/* .drawer_nav .draw_btn_wrap{display:none;position:absolute;top:73.61%;left:10.8%;z-index:1;}
.drawer_nav .draw_btn_wrap a{display:inline-block;font-size:12px;font-weight:600;border:1px solid #ccc;padding:0 20px;height:40px;line-height:40px;margin-left:7px;}
.drawer_nav .draw_btn_wrap a span{color:#ccc;}
.drawer_nav .draw_btn_wrap a:first-child{margin-left:0;}
.drawer_nav .draw_copyright{position:absolute;bottom:26px;left:10.8%;z-index:1;}
.drawer_nav .draw_copyright span.draw_logo{display:block;width:51px;}
.drawer_nav .draw_copyright span{color:rgba(255,255,255,0.3);font-size:8px;}

@media screen and (min-width:568px) and (max-width:736px) and (orientation:landscape) {
    .drawer_nav .red_dot{left:5.8%;}
    .drawer_nav .drawer_nav_list{}
    .drawer_nav .drawer_nav_list ul li a{padding:5px 5.8%;font-size:17px;}
    .drawer_nav .draw_btn_wrap{top:70.61%;left:5.8%;}
    .drawer_nav .draw_copyright{bottom:10px;left:5.8%;}
}*/

@media screen and (max-width:320px) {
    .drawer_nav .drawer_nav_list {margin-top:50px;}
    .drawer_nav .drawer_nav_list ul li {padding-bottom:20px;}
    .drawer_nav .drawer_nav_list ul li a {font-size:40px;}
    .drawer_nav .drawer_nav_list .drawer_nav_line {margin-top:40px;}
    /* .drawer_nav .draw_btn_wrap{top:70.61%;} */
    /* .drawer_nav .draw_copyright{bottom:10px; left:5.8%;} */
}



/* NEWS */
.n_title{text-align:center;font-weight:600; font-size:30px;padding:18px 0;}
.news_nav{text-align:center;padding:25px 15px 35px;}
.news_nav ul{}
.news_nav ul li{display:inline-block;}
.news_nav ul li a{position:relative;display:block;color:#ccc;font-size:14px;padding:10px 7px;font-weight:600;}
.news_nav ul li.on a{color:#000;}
.news_nav ul li.on a span:after{content:'';position:absolute;top:5px;left:50%;margin-left:-2px;border-radius:50%;-webkit-border-radius:50%;width:4px;height:4px;background:#e60012;}
.news_list{}
.news_list .news_box{display:none;padding:15px;}
.news_list .news_box:first-child{padding-top:0;}
.news_list .news_box .thumb{}
.news_list .news_box .info{padding-top:10px;}
.news_list .news_box .info span{display:block;font-size:16px;font-weight:600;color:#000;}
.news_list .news_box .info span.date{font-size:10px;font-weight:600;color:#cccccc;}
.news_load_more{text-align:center;padding:50px 15px 50px;}
.news_load_more a{font-weight:600;display:inline-block;padding:0 25px;border:2px solid #333333;height:33px;line-height:30px;font-size:12px;}
.news_load_more a span.view_cnt,
.news_load_more a span.tot{font-size:12px;color:#999999;font-weight:600;}

.news_view_wrap{padding:30px 15px;margin:60px 0 15px 0;}
.news_view_wrap .news_title p.title{font-family:"NanumSquare",sans-serif;font-size:20px;color:#000;line-height:1.2;}
.news_view_wrap .news_title p.date{font-size:12px;color:#999;padding-top:11px;}
.news_view_wrap .news_body{border-top:3px solid #000;border-bottom:3px solid #000;padding:30px 0 40px;margin-top:15px;}
.news_view_wrap .news_body p{padding-top:15px;font-family:"NotoSansKR",sans-serif;text-align:justify;}
.news_view_wrap .news_body p:first-child{padding-top:0;}
.news_view_wrap .btn_wrap{padding:30px 0 0;text-align:center;}
.news_view_wrap .btn_wrap a{display:inline-block;min-width:120px;height:38px;line-height:38px;background:#e60012;color:#fff;}

/*html.about,
html.about body{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;z-index:1;}
html.about #wrap,
html.about #container{position:relative;width:100%;height:100%;}
html.about #header .m_gnb{}
html.about #header .m_gnb a{}
html.about #header .m_gnb a span.line{background:#fff;}
html.about.about1 body{background:url("../images/bg_about_1.jpg") center center fixed no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
html.about.about1 #contents .about_nm{position:absolute;top:27.586%;left:11%;z-index:1;}
html.about.about1 #contents .about_nm span{font-size:50px;color:#fefefe;font-weight:600;letter-spacing:-4px;}
html.about.about1 #contents .about_nm span + span{font-weight:normal;}
html.about.about1 #contents .red_dot{position:absolute;top:40.629%;left:11.86%;border-radius:50%;-webkit-border-radius:50%;width:9px;height:9px;background:#e60012;}
html.about.about1 #contents .about_desc{position:absolute;top:50.149%;left:11%;font-size:11px;color:#91969d;}
html.about.about1 #contents .about_desc p + p{padding-top:18px;}
html.about.about2 body{background:url("../images/bg_about_2.jpg") center center fixed no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
html.about.about2 #contents .about_nm{position:absolute;top:22.863%;left:11%;z-index:1;}
html.about.about2 #contents .about_nm span{font-size:35px;color:#fefefe;font-weight:600;letter-spacing:0;}
html.about.about2 #contents .red_dot{position:absolute;top:18.36%;left:67.333%;border-radius:50%;-webkit-border-radius:50%;width:9px;height:9px;background:#e60012;}
html.about.about2 #contents .about_desc{position:absolute;top:31.555%;left:11%;font-size:11px;color:#91969d;}*/

/* contact */
.scroll_circle{position:absolute;top:-200px;left:50%;z-index:1;-webkit-transform: rotate(0deg);width:133%;margin-left:-66.5%;}
.contact_box{position:relative;z-index:10;padding-top:300px;}
.contact_tit{position:relative;font-size:37px;font-weight:600;color:#000;text-align:center;padding-bottom:18px;}
.contact_tit .red_dot{position:absolute;top:48;left:50%;margin-left:-2px;border-radius:50%;-webkit-border-radius:50%;width:5px;height:5px;background:#e60012;}
.contact_addr{font-size:10px;color:#000;padding:0 15px;text-align:center;}
.contact_info{width:145px;margin:30px auto;}
.contact_info ul{}
.contact_info ul li{overflow:hidden;clear:both;text-align:center;}
.contact_info ul li span{float:left;font-size:14px;color:#ee0009;font-weight:600;}
.contact_info ul li:last-child span{letter-spacing:-1.5px;}
.contact_info ul li span + span{color:#000;padding-left:15px;}
.contact_map{min-height:380px;background:#eee;filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');-webkit-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);}
.contact_map .gm-fullscreen-control{display:none;}
.map_box{position:relative;}
.map_box .map_overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0);}
.map_box .marker{position:absolute;top:46%;left:48%;width:22px;height:32px;}

/* ABOUT */
html.about #header{position:fixed;top:0;left:0;width:100%;}
html.about #header .m_gnb{}
html.about #header .m_gnb a{}
html.about #header .m_gnb a span.line{background:#fff;}


.enfont{font-family:'Roboto' !important;}
.red_point{display:block;width:5px;height:5px;background-color:#e60012;border-radius:50%;}

/* WORK */
.part1 {min-height:667px}
.part2 {background:#fff; position:relative;}
.work_list.swiper-container {width:100%; position:fixed; top:0; z-index:0; min-width:280px; height:677px;}
.work_list ul {position:relative;}
.work_list ul li {}
.work_list ul li a {display:block; width:100%; height:100%;}
.work_list ul li a .visual_img {min-width:375px;}
.work_list ul li a .visual_img img {display:block; height:100%; min-height:677px;}
.work_list ul li a .visual_text {position:absolute; bottom:102px; left:0; margin-left:20px;}
.work_list ul li a .visual_text p {font-size:40px; line-height:50px; color:#ffffff; font-weight:300;}
.work_list ul li a .visual_text p:first-child {font-weight:600;}
.work_list.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {left:20px; bottom:50px;}
.work_list.swiper-container-horizontal> .swiper-pagination-bullets { width:calc(100% - 40px); display:flex;}
.work_list.swiper-container-horizontal> .swiper-pagination-bullets .swiper-pagination-bullet {margin:0; border-radius:0; width:100%; height:2px;}
.work_list.swiper-container-horizontal> .swiper-pagination-bullets .swiper-pagination-bullet-active {background:#ffffff;}
/* .work_list .swiper-pagination-bullets .swiper-pagination-bullet {} */

/*motion_text*/
.scroll_ef {position:relative; display: block; padding:30px 20px 0;}
.scroll_ef li {text-align: left;}
.scroll_ef li {font-size:35px; font-weight:600; overflow:hidden;/*  width:100%; */ z-index: 1; white-space: nowrap; font-family:'Roboto'; }
.scroll_ef li.trigger1 {transition: ease 1.5s; transform:translateX(120%);}
.scroll_ef li.trigger2 {transition: ease 1.5s; transform:translateX(-110%);}
.scroll_ef li.trigger3 {transition: ease 1.5s; transform:translateX(150%);}

@media (max-width:280px){

  .scroll_ef li {letter-spacing:-1px; font-size:32px;}
}
/* .motion_text ul.move li.trigger1 {transform:translateX(0); transition:all .6s;}
.motion_text ul.move li.trigger2 {transform:translateX(0); transition:all .5s;}
.motion_text ul.move li.trigger3 {transform:translateX(0); transition:all .3s;} */
.motion_text p {font-size: 18px; line-height: 28px; color: #555; font-weight: 300; padding:25px 20px 60px; font-family:'Roboto';}

/* mail_slider */
.main_slider_wrap{overflow:hidden;}
.main_slider_wrap p.tit{padding:0 0 20px 20px; text-transform: uppercase; font-size:20px; color:#000; font-weight:600;}
.main_slider_wrap div.item{width:153px; margin:0 auto;}
.main_slider_wrap div.item .thumb{width:153px; margin:0 auto;}
.main_slider_wrap div.item span{display:block; font-size:15px; font-weight:500; padding-top:5px; text-align:center; font-family:'Roboto';}
.main_slider_wrap .main_slider{position:relative;left:10px;}
.main_slide_more{padding:25px 45px 73px;}
.main_slide_more a{font-weight:600;display:inline-block;padding:0 10px;border:2px solid #333333;height:24px;line-height:22px;font-size:12px;}
.main_slide_more a:after{content:'';display:inline-block;width:12px;height:8px;background:url("../images/bg_more_arr.png") 0 0 no-repeat;background-size:12px auto;margin-left:22px;}

.movie1 {/* position:absolute; *//* width:100%; *//* margin:0 auto; */}
/* .movie1 .video1{position:absolute; top:0; left:0;}
.movie1 .txt img{position:relative;width:100%;z-index:10;}

.main .movie {position:relative; width:1614px; margin:0 auto; margin-top:200px;}
.main .movie .video{position:absolute; top:232px; left:66px;}
.main .movie .txt{position:absolute; top:63px; left:50%; margin-left:-282px;} */

/*featured*/
.featured {padding: 60px 20px 0 20px;}
.featured::after {clear: both; content: ''; display: block;}
.featured .tit {padding: 0 0 20px 0; text-transform: uppercase; font-size: 20px; font-weight: 600;}
.featured div img {width: 100%;}
.featured .featured_img {width: 247px;}
.featured .featured_item01 {margin-bottom: 50px;}
.featured .featured_item02 {margin-bottom: 50px; text-align: right;}
.featured .featured_item02 .right {display: inline-block;}
.featured .featured_item02 .featured_img  {}
.featured .featured_item02 .featured_text {text-align: left;}
.featured .featured_item03 .featured_img {width: 212px;}
.featured .featured_text p {font-size:28px; font-family:'NotoSansKR'; line-height:34px; margin-left:20px;}
.featured .featured_text p:nth-child(1) {font-weight:600; margin-top:-16px; letter-spacing: -1.4px;}
.featured .featured_text p:nth-child(2) {letter-spacing: -1.4px;}
.featured .featured_text p:nth-child(2)::after {content: ''; display: inline-block; width: 6px; height: 6px; background-color: #df262b; border-radius: 50%; margin-left: 5px;     position: relative; top: 3px;}
.featured .featured_text p:nth-child(3){font-size:14px; color: #a8a8a8; line-height: 19px; margin-top: 10px; font-weight:500; font-family:'Roboto';}
.featured .featured_more {text-align: right;}
.featured .featured_more a {width: 50px; height: 50px; display: inline-block; margin-right: 21px;}

/*awards*/
.awards {padding: 60px 20px 0 20px;}
.awards .tit {padding: 0 0 20px 0; text-transform: uppercase; font-size: 20px; font-weight: 600;}
.awards dl {font-family: 'NotoSansKR';}
.awards dl dt {font-size: 15px; letter-spacing: -1.5px; font-weight: 600; margin-bottom: 3px;}
.awards dl dd {font-size: 14px; letter-spacing: -0.75px; color: #555555; margin-bottom: 25px;}
.awards .arrow {text-align: center; padding-top: 15px;}
.awards .arrow_more {}
.awards .arrow a {display: inline-block; width: 40px; height: 40px;}
.showstep1{max-height: 420px;overflow: hidden;}
.hide {display: none;}
.text_opacity {opacity: 0.4;}


/*main_about*/
.main_about {font-family: 'NotoSansKR'; padding: 60px 20px 0 20px;}
.main_about .title {margin-bottom: 30px;}
.main_about .title p {font-size: 30px; line-height: 40px; letter-spacing: -1.5px; font-weight: bold;} 
.main_about .title p::after {content: ''; display: inline-block; width: 6px; height: 6px; background-color: #df262b; border-radius: 50%; position: relative; top: 3px; margin-left: -5px;}
.main_about .cont {text-align: right;}
.main_about .cont p {width: 264px; font-weight: 400; font-size: 15px; line-height: 26px; letter-spacing: -1.5px; color: #555555; display: inline-block; margin-bottom: 30px; text-align: left;}

/* bg_text */
.bg_text {padding: 20px 0 60px 0;}
.bg_text p {font-size:60px; line-height:62px; letter-spacing:-1.2px; color:rgba(0, 0, 0, .05); font-weight:600; white-space:nowrap;}
.bg_text p:last-child {margin-left: 59px;}

/*metaverse*/
.metaverse {padding: 0 20px; margin-bottom:60px;}
.metaverse .title {}
.metaverse p.title {font-size: 33px;line-height: 40px; font-weight: bold;} 
.metaverse .meta_cont {font-family: 'NotoSansKR'; margin-top:40px;}
.metaverse .meta_cont .tit p:nth-child(1) {font-size: 20px; line-height: 30px; letter-spacing: -1.5px; font-weight: 600;}
.metaverse .meta_cont .tit p:nth-child(2) {font-size: 16px; letter-spacing: -0.85px; font-weight: 400; margin-bottom: 15px;}
.metaverse .meta_cont .txt {margin-top: 20px;}
.metaverse .meta_cont .txt p {font-size: 14px;  word-break: keep-all; line-height: 25px; letter-spacing: -0.75px; color: #555;}
.metaverse .meta_cont .txt .meta_list {padding: 15px 0 30px 0; margin-left: 35px;}
.metaverse .meta_cont .txt .meta_list li {font-size: 14px; line-height: 25px; letter-spacing: -0.75px;}
.metaverse .meta_cont .txt .meta_list li::before {display: inline-block; font-size: 18px; color: #df262b; font-weight: bold; margin-right: 15px;}
.metaverse .meta_cont .txt .meta_list li:nth-child(1):before {content: '01';}
.metaverse .meta_cont .txt .meta_list li:nth-child(2):before {content: '02';}
.metaverse .meta_cont .txt .meta_list li:nth-child(3):before {content: '03';}
.metaverse .meta_cont .txt .meta_list li:nth-child(4):before {content: '04';}
.metaverse .meta_cont .txt .meta_list li span {content: ''; display: inline-block; width: 21px; margin-right: 14px;}

@media (max-width: 360px) { 
  .metaverse .meta_cont .txt p {word-break: normal;}
  .metaverse .meta_cont .txt .meta_list {margin-left: 20px;}
  .metaverse .meta_cont .txt .meta_list li {font-size: 13px; letter-spacing: -1px;}
}

/*clients*/
.clients {background: #000; padding: 0 20px;}
.clients p.tit {font-weight: bold; text-transform: uppercase; font-size: 20px; padding: 50px 0 20px 0; color: #fff; }
.clients p.sub_tit {font-weight:500; font-size:17px; line-height: 30px; letter-spacing: -1px; color: #d6d6d6; font-family: 'NotoSansKR'}
.clients .clients_list {text-align: center; padding: 20px 0 50px 0;}
.clients .clients_list::after {display:block; content:''; clear:both;}
.clients .clients_list li { width:calc(50% - 17px);  float:left; display:block; margin-bottom: 10px;}
.clients .clients_list li:nth-child(2n+1) {margin-right: 17px;}

@media (max-width: 360px) {
  .clients p.sub_tit {font-size: 16px; letter-spacing: -1.2px;}
}


/*contact*/
.contact {position: relative; padding-bottom:100px;}
.contact p.tit {font-weight: bold; text-transform: uppercase; font-size: 20px; padding: 50px 20px 20px;}
.contact .contact_con {width:220px; margin:0 auto; font-family: 'NotoSansKR'; font-size: 15px; line-height: 26px; letter-spacing: -0.8px;}
.contact .contact_con:nth-of-type(2) {margin-top:25px;}
.contact .contact_con dt {font-weight: bold; margin-bottom: 5px;}
.contact .contact_con dd {color: #555;}
.contact .tel {width:220px; margin:30px auto 0;}
.contact .tel li {font-size: 15px; font-family:'Roboto'; line-height: 26px; color: #333; margin-bottom: 8px;}
.contact .tel li::before {display: inline-block; font-size: 18px; color: #df262b; font-weight: bold; margin-right: 20px;}
.contact .tel li:nth-child(1)::before {content: 'T';}
.contact .tel li:nth-child(2)::before {content: 'F';}
.contact .tel li:nth-child(3)::before {content: 'E';}
.contact .brochure a {margin-top:50px;}
/* .contact .brochure a span::before {top:0;} */
.brochure a {margin: 0 auto; display:block; width: 260px;  padding: 17px 34px; background:#df262b; border-radius:100px; }
.brochure a span {padding-left:30px; letter-spacing:-.5px; position:relative; font-size:20px; color:#fff; font-weight:600; font-family:'Roboto';}
.brochure a span::before {content: ''; display:block; background: url("../images/brochure.png") no-repeat center; width:25px; height:25px; position:absolute; left:0; top:0;}

/* @media (max-width: 360px) {
  .contact .contact_con dd {font-size: 14px;}
  .contact .contact_con { padding: 0 0 25px 51px;}
  .contact .tel {padding: 0 0 60px 51px;}
} */

.work_load_more{text-align:center;padding:50px 15px;}
.work_load_more a{font-weight:600;display:inline-block;padding:0 25px;border:2px solid #333333;height:33px;line-height:30px;font-size:12px;}
.work_load_more a span.view_cnt,
.work_load_more a span.tot{font-size:12px;color:#999999;font-weight:600;}

html.portfolio{}
html.portfolio #header{position:fixed;top:0;left:0}
html.portfolio #header .logo{display:none;}
.portfolio_box{padding:25px 14.666%;}
.portfolio_box dl{margin-top:28px;}
.portfolio_box dl:first-child{margin-top:0;}
.portfolio_box dl dt{display:block;font-weight:600;font-size:14px;border-bottom:1px solid #252525;padding-bottom:6px;}
.portfolio_box dl dd{display:block;font-family:"NanumSquare",sans-serif;font-size:14px;padding-top:6px;}
.portfolio_box .site_btn{margin-top: 30px; text-align: center;}
.portfolio_box .site_btn a{display:block;background-color:#252525;border:1px solid #000;width:50%;height:40px;margin: 0 auto; color:#fff;font-size:14px;text-align:center;line-height:40px;}

/*works_detail*/
.works_detail{position:relative;}
.works_detail .works_visual{width:100%; z-index:1; position:absolute;}

.works_detail .works_con_wrap{margin:0 5%;width:90%;height:auto; position:relative; z-index:2; padding-top:36%;}
.works_detail .works_con_wrap .works_con{background-color:#fff;padding-bottom:20px;}
.works_detail .works_con_wrap .works_con .works_title{padding:15px 5.666%;}
.works_detail .works_con_wrap .works_con .works_title p{font-size:18px;font-weight:bold;}
.works_detail .portfolio_box{padding:25px 5.666%;}
.works_detail .works_con_wrap .works_con ul{overflow:hidden;width:90%;margin:0 5%;}
.works_detail .works_con_wrap .works_con ul li{float:none;}
.works_detail .works_con_wrap .works_con ul li p{font-size:14px;font-weight:bold;padding-bottom:8px;width:100%;border-bottom:1px solid #000;}
.works_detail .works_con_wrap .works_con ul li span{display:block;font-size:14px;padding:10px 0 30px;line-height:20px;}
.works_detail .works_con_wrap .works_con ul li .site_btn{width:220px;height:60px;background-color:#252525;border:1px solid #000;}
.works_detail .works_con_wrap .works_con ul li .site_btn a{display:block;width:100%;height:100%;color:#fff;font-size:16px;text-align:center;line-height:60px;}
.works_screen {width:100%;}
.works_screen .works_view{overflow:hidden;width:320px;height:280px;margin:0 auto;padding:20px 10px;position:relative;}
.works07 .works_screen .works_view{top:-130px;}
.works08 .works_screen .works_view{top:-130px;}
.works10 .works_screen .works_view{top:-130px;}
.works11 .works_screen .works_view{top:-130px;}
.works13 .works_screen .works_view{top:-130px;}
.works_screen .works_view .works_pc{position:absolute;top:15px;left:50%;width:300px;margin-left:-50%;height:auto;}
.works_screen .works_view .works_mobile{position:absolute;top:50px;right:10px;width:103px;height:auto;}
.works_screen .works_view01{padding-right:0;padding-left:0;}
.works_screen .works_view01{overflow:hidden;}
.works_screen .works_view01 div{float:left;width:100px;height:auto;}
.works_screen .works_view01 div.works_mobile02{margin:0 10px;}

.works01 .works_screen{background-color:#242a2e;}
.works02 .works_screen{background-color:#ffc0ca;}
.works03 .works_screen{background-color:#ff787a;}
.works04 .works_screen{background-color:#000;}
.works05 .works_screen{background-color:#d4f0fd;}
.works06 .works_screen{background-color:#000;}
.works07 .works_screen{background-color:#e51937;}
.works08 .works_screen{background-color:#ee3430;}
.works09 .works_screen{background-color:#ed252f;}
.works10 .works_screen{background-color:#00a6ed;}
.works11 .works_screen{background-color:#4b5459;}
.works12 .works_screen{background-color:#820c58;}
.works13 .works_screen{background-color:#bacf00;}
.works14 .works_screen{background-color:#ff6666;}
.works15 .works_screen{background-color:#dcd6cd;}
.works16 .works_screen{background-color:#dfcebf;}
.works17 .works_screen{background-color:#000;}
.works18 .works_screen{background-color:#000;}
.works19 .works_screen{background-color:#000;}

html.ux_method{}
html.ux_method body{background:url("../images/bg_ux_method.jpg");-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
html.ux_method #header .m_gnb{}
html.ux_method #header .m_gnb a{}
html.ux_method #header .m_gnb a span.line{background:#fff;}
html.ux_method .ux_method{color:#fff;padding:0 15px 50px;}
html.ux_method .ux_method p{padding-top:15px;font-family:"NanumSquare",sans-serif;text-align:justify;}
html.ux_method .ux_method p:first-child{padding-top:0;}
html.ux_method .ux_method p.tit{font-family:"Montserrat", "Noto Sans KR", sans-serif;text-align:center;font-weight:600;font-size:26px;}

.portfolio .btn_wrap{padding:30px 0;text-align:center;}
.portfolio .btn_wrap a{display:inline-block;min-width:120px;height:38px;line-height:38px;background:#e60012;color:#fff;}


/*footer  : 2017-07-18 추가*/ 
.footer {padding:0 0 0 20px;box-sizing:border-box;position:relative;}
.footer .draw_copyright {padding-bottom: 20px;}
.footer .draw_copyright .draw_logo img{display:block;width:65px; margin-bottom: 10px;}
.footer .draw_copyright span{font-size:13px;color:#a8a8a8;}

.footer01{padding-top:50px;}
.footer02{padding-bottom:20px;position:fixed;bottom:0;left:0;z-index:100;width:100%;}
.footer .familyGroup{display:none; position:absolute;right:20px;left:20px;bottom:30px;height:35px;}
.footer .familyGroup>a{display:block;max-width:100%;height:100%;}
.footer .familyGroup>a>p{font-family:'Roboto'; border:1px solid #ccc;background-color:#fff;font-size:15px;color:#333;line-height:35px;padding-left:15px;font-weight:bold;}
.footer .familyGroup>a em{position:absolute;top:13px;right:11px;width:11px;height:6px;}
.footer .familyGroup>a em img{vertical-align:top}
.footer .familyGroup>a em.ico_up{display:block;}
.footer .familyGroup>a em.ico_down{display:none;}
.footer .familyGroup.active>a>p{border-color:#000;color:#000;}
.footer .familyGroup.active>a em.ico_up{display:none;}
.footer .familyGroup.active>a em.ico_down{display:block;}

.footer .familyGroup .famList {display:none;position:absolute;bottom:35px;left:0;width:100%;height:auto;border-bottom:none;background-color:#f2f2f2;z-index:10;}
.footer .familyGroup .famList ul{padding-top:10px;}
.footer .familyGroup .famList li{float:none;height:30px;}
.footer .familyGroup .famList li:before {display:none;}
.footer .familyGroup .famList li>a{display:block;padding:0 35px 5px 12px;color:#999;font-size:14px;line-height:25px;font-weight:600;}
.footer .familyGroup .famList li>a:hover{color:#000;}
.footer .familyGroup .famList-closeBtn{position:absolute;top:0;right:0;width:33px;height:33px;}
.footer .familyGroup .famList-closeBtn>a{display:block;height:100%;}
.footer .familyGroup .famList-closeBtn>a>img{position:absolute;top:12px;right:10px;width:9px;height:9px;}

@media (max-width: 360px) {
  .footer .draw_copyright span {font-size: 12px;}
}

/* go top */
.go_top {width:44px; height:44px; background-color:#000; border:0; border-radius:50%; text-align:center; cursor:pointer; position:fixed; right:-64px; bottom:30px; z-index:1; box-shadow:0 0 0; display:inline-block; transition:box-shadow 0.2s, transform 0.3s, right 0.2s ease-in-out;}
.go_top:hover {box-shadow:3px 3px 5px rgb(0, 0, 0,0.2); transform:translateY(-3px);}
.go_top em {margin-top:6px; color:#fff; font-size:11px; position:absolute; top:50%; left:50%; z-index:1; display:inline-block; transform:translate(-50%, -50%);}
.go_top:after {width: 0; height: 0; margin-top: -11px; border-top: 5px solid #fff; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; content: ''; position: absolute; top: 50%; left: 50%; display: inline-block; transform: translate(-50%, -50%) rotate(180deg);}

/*popup newyear*/

#showimage a:link{color:#d9d9d9; text-decoration:none;}
#showimage a:visited{color:#d9d9d9; text-decoration:none;}
#showimage a:hover{color:#060;text-decoration:underline;}
#showimage a:active{color:#666;text-decoration:none;}
#showimage input{width: 18px;height: 18px;margin-right: 10px;}