@font-face {
  font-family:Roman;
  src: url(/fonts/ChronicleDisplayRoman.woff) format("woff");
}
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 700;
  src: url(/fonts/HelveticaNeueLTStd-Bd.woff) format("woff");
}
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 500;
  src: url(/fonts/HelveticaNeueLTStd-Md.woff) format("woff"),
  url(/fonts/HelveticaNeueLTStd-Md.woff2) format("woff2");
}
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 400;
  src: url(/fonts/HelveticaNeueLTStd-Roman.woff) format("woff");
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/NotoSansKR-Regular.woff2) format('woff2'),
  url(/fonts/NotoSansKR-Regular.woff) format('woff')
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/NotoSansKR-Medium.woff2) format('woff2'),
  url(/fonts/NotoSansKR-Medium.woff) format('woff')
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/NotoSansKR-Bold.woff2) format('woff2'),
  url(/fonts/NotoSansKR-Bold.woff) format('woff')
}
@font-face {
  font-family: 'JostBook';
  src: url(/fonts/Jost-Book.eot);
  src: url(/fonts/Jost-Book.eot?#iefix) format('embedded-opentype'),
  url(/fonts/Jost-Book.woff2) format('woff2'),
  url(/fonts/Jost-Book.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Jost';
  src: url(/fonts/Jost-Medium.eot);
  src: url(Jost-Medium.eot?#iefix) format('embedded-opentype'),
  url(/fonts/Jost-Medium.woff2) format('woff2'),
  url(/fonts/Jost-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Jost';
  src: url(/fonts/Jost-Mediumitalic.eot);
  src: url(/fonts/Jost-Mediumitalic.eot?#iefix) format('embedded-opentype'),
  url(/fonts/Jost-Mediumitalic.woff2) format('woff2'),
  url(/fonts/Jost-Mediumitalic.woff) format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {  font-family: 'Roboto';  font-style: normal;  font-weight: 100;
  src: url(/font/Roboto-Thin.woff2) format('woff2'),
  url(/font/Roboto-Thin.woff) format('woff'),
  url(/font/Roboto-Thin.otf) format('opentype');}
@font-face {  font-family: 'Roboto';  font-style: normal;  font-weight: 300;
  src: url(/font/Roboto-Light.woff2) format('woff2'),
  url(/font/Roboto-Light.woff) format('woff'),
  url(/font/Roboto-Light.otf) format('opentype');}
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 400;
  src: url(/font/Roboto-Regular.woff2) format('woff2'),
  url(/font/Roboto-Regular.woff) format('woff'),
  url(/font/Roboto-Regular.otf) format('opentype'); }
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 500;
  src: url(/font/Roboto-Medium.woff2) format('woff2'),
  url(/font/Roboto-Medium.woff) format('woff'),
  url(/font/Roboto-Medium.otf) format('opentype'); }
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 700;
  src: url(/font/Roboto-Bold.woff2) format('woff2'),
  url(/font/Roboto-Bold.woff) format('woff'),
  url(/font/Roboto-Bold.otf) format('opentype'); }

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Pretendard-Regular.woff2) format('woff2'),
  url(/fonts/Pretendard-Regular.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Pretendard-Medium.woff2) format('woff2'),
  url(/fonts/Pretendard-Medium.woff) format('woff')
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Pretendard-Bold.woff2) format('woff2'),
  url(/fonts/Pretendard-Bold.woff) format('woff')
}

/*** basic ***/
body{color: #000;}
ul {list-style:none; margin:0; padding:0;}
a, a:focus, a:hover {text-decoration:none; color:inherit;}
button:focus {border:0; outline:none;}
.btn.focus, .btn:focus, .btn:hover, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline:none;  color:inherit;}

/*** bootstrap ***/
.navbar {border-radius:0; margin:0; border:0; min-height:70px;z-index: 32;position: relative;}
.container.sub_container .navbar {min-height: 60px;}
.navbar-brand {height:auto; padding:15px 0px; float:none;}
.navbar-nav > li > a {padding:15px 10px;}
.nav>li>a:focus, .nav>li>a:hover {background:transparent;}

@media (max-width: 375px) {
  .navbar{min-height: 55px;}
  }

input:focus, .form-control:focus, select:focus {border-color:#e1e1e1; box-shadow:none; outline:none;}
.input-group .form-control:focus {z-index:1;}
.input-group-addon {background:#fff; border-radius:0; border-color:#e1e1e1; color:#989898;}
.form-control {border-radius:0; border:1px solid #e1e1e1; box-shadow:none; background:#fff; -webkit-appearance: none; height:35px;}

@media (min-width: 1700px) {
  header .container {
  padding-left: 80px;
  padding-right: 80px;
  }
  header .container.sub_container {
    padding-left: 80px;
    padding-right: 80px;
    height:60px;
  }
}

header{position: fixed;top:0;z-index: 32;width: 100%;height:60px;}
header{background: #fff;}
header.active{background:#000;}
header.black{height:55px; background:#000;}
header.black .gnb li{color: #fff;}
header .container.black .gnb li.active a{border-bottom:1px solid #fff;}
article{margin:60px 0 0 0;}

/*** 공통 ***/
.relative {position:relative;}
.absolute {position:absolute;}
.overhidden {overflow:hidden;}
.inline {display:inline-block;}
.block {display:block;}
.bold {font-weight:bold;}

.maskimg {background-repeat:no-repeat; background-size:cover; background-position:center; position:relative;}
.maskimg img {width:100%;}

.block-center {margin: 0 auto;}



/* footer */
footer {font-size:11px; background:#000; color:#fff; text-align:center;letter-spacing: 0.05em; overflow: hidden; position: absolute; width: 100%; z-index: 10;}
footer i.w_hide{display: none;}
footer i.m_hide{display: block;}
@media (max-width: 375px) {
  footer{font-size: 10px;line-height: 12px; padding:12px 15px;font-weight: bold;}
  footer i.w_hide{display: block;}
  footer i.m_hide{display: none;}
}
footer .footer_inner {max-width: 1520px; margin: 0 auto; height: 65px;}
footer .left_txt {float: left; padding-left: 30px;}
footer .left_txt p {line-height: 1.5; margin: 16px 0 0; text-align: left;}
footer .right_txt {float: right; padding-right: 30px;}
footer .right_txt p {line-height: 1.5; margin: 16px 0 0; text-align: right;}

@media screen and (max-width: 1024px){
  footer .footer_inner {height: auto;}
  footer .left_txt {float: none; padding:30px 0 0;}
  footer .right_txt {float: none; padding: 0 0 30px;}
  footer .left_txt p {margin-top: 0; text-align: center;}
  footer .right_txt p {line-height: 1.5; text-align: center;}
}
@media screen and (max-width: 375px){
    footer .left_txt {float: none; padding:0;}
}

.work-list h1 {font-size:100px; font-family:'Roman';line-height: 1em;color: #000;margin-top:15px;}
.work-list h1.h1_01{line-height: 0.8em;margin:0 0 0 0;padding:14px 0 0 0;}
.work-list h1.h1_02{line-height: 1em;margin:0 0 0 0;}
.work-list h1.h1_03{line-height: 1em;margin:0 0 0 0;}
.work-list h1 i.m_hide{display: block;}
.work-list h1 b {color:#4f12ff; font-weight: normal;}

.work-banner-top .maskimg {background-repeat:no-repeat; background-size:cover; background-position:center; width:100%; height:730px;}
.work-banner-top .caption {text-align:center; margin:40px 0 0 0 ;}
.work-banner-top .caption h6 {font-size:18px; font-weight:bold;letter-spacing: 0.03em;margin-bottom:5px;}
.work-banner-top .caption h2 {font-size:55px; font-family:'Roman';letter-spacing: 0.0 17em;margin-top:8px;}
.work-banner-top .caption p {font-size:20px; margin:23px 0 0;font-family: 'Noto Sans KR';letter-spacing: -0.06em;}

.filter h3 {display:none;}

.tab-style {text-align:right; font-size:0; margin:70px 0 20px;}
.tab-style>div {display:inline-block; font-size:11px; color:#000; padding:5px 0; margin:10px; text-transform:uppercase; cursor:pointer; position:relative; font-weight:bold;letter-spacing: 0.04em;}
.tab-style>div:after {content:''; display:inline-block; position:absolute; top:7px; right:-10px; width:1px; height:11px; background:#000;}
.tab-style>div:last-child {margin-right:0; padding-right:0;}
.tab-style>div:last-child:after {display:none;}
.tab-style>div.active {color:#4f12ff; border-bottom:1px solid #4f12ff;}

.grid {margin-left:-15px; margin-right:-15px; padding:60px 0 0 0;}
.grid.bottom{margin-bottom:30px;}
.grid-item {width: 50%;}
.grid-sizer {width: 50%;}

@media (max-width:480px){
  .grid-item {width: 100%; padding:0px;}
  .grid-sizer {width: 100%;}
}

.grid-item>div {padding:15px 15px;}
.grid-item .caption {padding:20px 0; text-align:center;}
.grid-item .caption h6 {font-size:15px; font-weight:bold;margin-top:15px;letter-spacing: 0.03em}
.grid-item .caption h4 {font-size:38px; font-family:'Roman';}
.grid-item .caption p {font-size:18px; margin-top:20px; font-family: 'Noto Sans KR';letter-spacing: -0.06em;}

.grid-item a {display:block; overflow:hidden; position: relative;}
.grid-item a img {transition:transform 1.3s ease;}
.grid-item:hover a > img {transform:scale(1.2);}

/*
** 2018어워드 뱃지추가
*/
.awards {
  position: absolute;
  width:100%;
  top:0;
  left:0;
  text-align: right;
  padding:2% 3%;
}
.awards .awards_badge {
  display: inline-block;
  margin-left:2%;
  width: 72px;
}
.awards .awards_badge > img {
  width:100%;

}


/***********************************2019-09-27 new layout****************************/
/***********************************2019-09-27 new layout****************************/
.container-wrap.new {
  width: 100%;
  padding: 0 ;
}
.container-wrap.monitorGif {
  margin-top: 100px;
  background-color: #e1e1e1;
}
.mt80 {
  margin-top: 80px;
}
.mt120 {
  margin: 120px auto 0 ;
}
.pt80 {
  padding-top: 80px !important;
}
.pt120 {
  padding: 120px 0 0 !important;
}
.p120 {
  padding: 120px 0 !important;
}
img.m-auto {
  margin: 0 auto;
}
img.bx_shadow {
  box-shadow: 20px 10px 70px rgba(0,0,0,.07)
}
img.bx_shadow2 {
  box-shadow: 20px 20px 50px rgba(0,0,0,.2)
}
div.bx_shadow{
  box-shadow: 10px 15px 20px rgba(0,0,0,.2)
}


.main_video {
  text-align: center;
}
.main_video video {
  max-width: 1300px;
  margin: 0 auto;
}
.new .view-detail.less_bottom {
  padding:0;
}

.new .inner_video {
    text-align: center;
}
.new .inner_video video{
    max-width: 100%;
}
.graybg {
    padding-bottom: 40px;
    width: 100%;
    background-color: #f9f9f9;
}
.new .less_bottom {
    margin: 0 auto;
    padding: 0 80px ;
    max-width: 1300px
}
.new .less_bottom.elements {
  padding: 0 10px;
}
.new .less_bottom p {
    font-size: 14px;
    letter-spacing: -0.069em;
}
.new .view-detail.less_bottom p {
    margin-top: 15px;
}
.new .less_bottom .col-sm-7 img {
  width: 100%;
}
.new .less_bottom .col-sm-6:nth-child(2) {
  margin-top: 140px;
}
.view-detail h5 {
  margin-bottom: 40px;
  font-size: 16px;
  letter-spacing: 0.014em;
}
.view-detail h3.newfont {
    position:relative;
    margin-top: 0;
    padding-top: 26px;
    font-size: 24px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.view-detail h3.newfont:before {
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 48px;
    height: 6px;
    background-color: #000;
}
.new .view-detail .less_bottom h5{
    margin: 30px 0 0;
    color:#828282;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.014em;
}
.new .less_bottom .cnt_wrap {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}
.type li{
  margin-top: 30px;
}
.type li>div{
    display: inline-block;
    vertical-align: text-top;
}
.less_bottom .type li>div:first-child {
  min-width:  220px;
}
.less_bottom .type li>div p {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.014em;
}
.less_bottom .type li>div p.title{
    font-size: 24px;
}
.type li div.jostM p{
    font-family: 'Jost',sans-serif;
    font-weight: 600;
}
.type li div.jostB p{
    font-family: 'JostBook',sans-serif;
    font-weight: 500;
}
.type li div.jostB:nth-child(2) p {
   font-size: 16px;
}
.type li div.Roboto p{
    font-family: 'Roboto';
    font-weight: 500;
    line-height:24px;
}

.color_wrap li {
    display: inline-block;
    text-align: center;
    margin-right: 40px;
}
.color_wrap li:last-child {
  margin-right: 0;
}
.color_wrap li div.color {
  margin:35px 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.color_wrap li .color.black { background-color:#000;}
.color_wrap li .color.blue { background-color:#0076cf;}
.color_wrap li .color.white { background-color:#ffffff;}

.color_wrap li span{
  display: block;
  text-align: center;
  font-size: 16px;
}


@media screen and (max-width: 1300px) {
  .new .less_bottom .col-sm-7 .scroll-fix, .new .less_bottom .col-sm-6 .sfix01, .new .less_bottom .col-sm-6 .scroll-fix {
    padding:0 20px;
  }
  .mo_p20 {
    padding: 0 20px;
  }
  .new .less_bottom, .new .view-detail.less_bottom, .new .less_bottom.elements {
    padding: 0 20px;
  }

  .p0 {
    padding-top: 0 !important;
  }
  .new .row h5 {
    margin-left: 15px;
    margin-right: 15px;
    padding:0 20px;
  }
  .new .row .col-sm-6 h5 {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  .new .view-detail p i {
    display: inline-block;
  }
  .new .less_bottom .col-sm-6:nth-child(2) {
    margin-top: 100px;
  }
  .main_video video {

    max-width: 100%;
    padding: 0 30px;

  }
}

@media screen and (max-width: 1024px) {
  .awards .awards_badge {
    width:15%;
  }
  .mt120 {
    margin-top: 60px;
  }
  .view-detail>div.pt120 {
    padding: 60px 0 0;
  }
  .view-detail>div.p120 {
    padding: 60px 0;
  }

}



@media (max-width: 900px) {
  .work-list h1 {font-size:70px;}
  .tab-style>div {width:33.333%; margin:10px 0; text-align:center;}
  .tab-style>div:nth-child(3n):after {display:none;}
  .tab-style>div:after {right:0;}
  .work-banner-top .maskimg {height:500px;}
  .grid-item .caption h4 {font-size:40px;}
  .grid-item .caption p {font-size:16px;}

  .new .view-detail.less_bottom .col-sm-8, .new .less_bottom .col-sm-7 {
    margin-top: 45px;
  }
}

@media (max-width: 768px) {
  .container-wrap.monitorGif {
    margin-top: 60px;
  }
  .row h5 {
    font-size: 20px;
  }


  .new .less_bottom p {
    line-height: 25px;
  }
  .p120 {
    padding: 60px 0 !important;
  }


  .new .less_bottom .cnt_wrap {
    display: block;
  }
v
  .type li>div {
    display: block;
    margin-bottom: 8px;
  }
  .less_bottom .type li>div p.title {
    font-size: 18px;
  }
  .color_wrap {
    text-align: center;
  }
  .color_wrap li {
    width: calc(33% - 40px);
  }
  .color_wrap li div.color {
    width: 95%;
    height: 0;
    padding-bottom: 95%;
  }

  .pt120 {
    padding: 60px 0 0 !important;
  }


}

@media (max-width: 620px) {
  .work-list h1 {font-size:45px;line-height: 43px;}
  .filter {margin:30px 0 30px;}
  .filter h3 {display:block; font-size:14px; text-align:center; border:1px solid #ccc; padding:15px; font-family:'Roman'; cursor:pointer;}
  .tab-style {margin-top: 0; display:none;}
  .tab-style>div {width:100%;}
  .tab-style>div:after {display:none;}
  .work-banner-top .maskimg {height:350px;}
  .work-banner-top .caption h6 {font-size:15px;}
  .work-banner-top .caption h2 {font-size:38px;}
  .work-banner-top .caption p {font-size:16px;}
  .work-banner-top .caption {margin:35px 0;}
  .grid {padding:20px 0;}
  .grid-item .caption h4 {font-size:38px;}
  .grid-item .caption p {font-weight:normal;}
}


@media (max-width: 375px) {
  .navi-btn{top:18px;transition: none;}
  .tnb{top:18px;}
  .work-banner-top .maskimg{height:245px;}
  .filter{margin:30px 0 25px 0 ;}
  .work-banner-top .caption h2{margin-top:10px;font-size: 35px;line-height: 1.05;}
  .tab-style>div{font-size: 12px;margin:5px 0;border-bottom: 1px solid #fff;}
  .work-list h1{margin-top:8px;padding-left: 5px;}
  .grid-item .caption h6{margin-bottom:5px;}
  .grid-item .caption h4{font-size: 35px;margin-top:10px;line-height: 1.05;}
  .work-banner-top .caption p{margin-top:20px;}
  .grid{margin:0;}
}




.view-info .maskimg {background-repeat:no-repeat; background-size:cover; background-position:center; width:100%; height:810px; position:relative;}
.view-info .maskimg.michaa{background-image:url(/images/banner_top_michaa.jpg)}
.view-info .maskimg.sdg_print{background-image:url(/images/banner_top_sdgprint.jpg)}
.view-info .maskimg.citynet{background-image:url(/images/banner_top_citynet.jpg)}
.view-info .maskimg.coming_lookbook{background-image:url(/images/banner_top_cominglookbook.jpg)}
.view-info .maskimg.pizzahut_tracker{background-image:url(/images/banner_top_tracker.jpg)}
.view-info .maskimg.interview{background-image:url(/images/banner_top_interview.jpg)}
.view-info .maskimg.pizzahut{background-image:url(/images/banner_top_pizzahut.jpg)}
.view-info .maskimg.inus{background-image:url(/images/inus_bg.jpg)}
.view-info .maskimg.sdg_report{background-image:url(/images/sdg_report_bg.jpg)}
.view-info .maskimg.brunnen{background-image:url(/images/brunnen_bg.jpg)}
.view-info .maskimg.vunque{background-image:url(/images/vunque_bg.jpg)}
.view-info .maskimg.sdg_trends_report{background-image:url(/images/sdg_trends_report_bg.jpg)}
.view-info .maskimg.neferra{background-image:url(/images/neferra_bg.jpg)}
.view-info .maskimg.michaa_book{background-image:url(/images/michaa_book_bg.jpg)}
.view-info .maskimg.sdg_recipro{background-image:url(/images/sdg_recipro_bg.jpg)}
.view-info .maskimg.global365mc{background-image:url(/images/global365mc_bg.jpg)}
.view-info .maskimg.iqosRental{background-image:url(/images/iqosRental_bg.jpg)}
.view-info .maskimg.wishtrend{background-image:url(/images/wishtrend_bg.jpg)}

.view-caption {position:relative; overflow:inherit;}
.view-info .caption {margin-top:-245px; background:#fff; padding:50px 10px 50px 100px; /*margin-bottom:200px;*/}
.view-info .caption.row{margin-left:0;margin-right:0;}
.view-info .caption h6 {font-weight:bold; font-size:18px;padding:0 0 0 5px;letter-spacing: 0.05em;}
.view-info .caption h1 {font-size:80px; font-family:'Roman'; color:#000;line-height: 80px;margin-top:13px;letter-spacing: 0.009em}
.view-info .caption h4 {font-size:25px; margin:30px 0;font-family: 'Noto Sans KR';letter-spacing: -0.05em;font-weight: normal;}
.view-info .caption p {font-size:15px; word-break:keep-all;font-family: 'Noto Sans KR';}
.view-info .caption p.main_p{line-height: 25px;width:94%;letter-spacing: -0.03em;}
.view-info .caption p.main_p i{display: block;}
.view-info .caption h5 {font-size:15px; font-weight:bold; margin-bottom:20px; line-height:1.8;letter-spacing: 0.02em;}
.view-info .caption h5 p {font-size:13px; font-weight:normal;font-family: 'Helvetica Neue'; letter-spacing: 0.05em;}
.view-info .caption ul {padding-top:68px;}
.view-info .caption ul li {padding:7px 0;}
.view-info .caption ul li a {font-size:13px; border-bottom:1px solid #000; display:inline-block; padding:5px 0; font-weight:bold;letter-spacing: 0.05em}
.view-info .caption ul li a:hover{color: #5635fc;border-bottom: 1px solid #5635fc}

.view-detail>div {padding:30px 0;}
.view-detail .double{width: 100%;}
.view-detail .double li{float: left;width:48.68421%;}
.view-detail .double li:first-child{margin:0 1.31578% 0 0;}
.view-detail .double li:last-child{margin:0 0 0 1.31578%}
.view-detail>div.less_bottom{padding:30px 0 15px 0;}
.view-detail h3 {font-size:33px; font-family:'Roman'; margin-bottom:20px;}
.view-detail h4 {font-size:20px; font-family:'Roman'; margin-bottom:22px;letter-spacing: 0.03em}
.view-detail p {font-size:15px; word-break:keep-all;font-family: 'Noto Sans KR';line-height: 25px;letter-spacing: -0.03em;}
.view-detail p i{display: block;}
.view-related {margin:50px 0;}
.view-related h4 {font-family:'Roman'; font-size:18px; border-bottom:1px solid #000; padding:20px 0; margin-bottom:70px;}
.view-related a {display:block;}
.view-related .caption {text-align:center; margin:40px 0 0 0}
.view-related .caption h6 {font-size:15px; font-weight:bold;letter-spacing: 0.03em;}
.view-related .caption h2 {font-size:45px;line-height: 43px; font-family:'Roman'; margin:20px 0 10px 0;}
.view-related .caption p {font-size:16px;font-family: 'Noto Sans KR';margin:25px 0 35px 0;letter-spacing: -0.04em;}

.scroll_right{margin-bottom:60px;width:100%; }
.scroll_right.border{ }
.scroll-fix.border{ border:1px solid #d1d3d4; }
.scroll_right.last{margin:0;}
.scroll_right video{width: 100%; height:100%;}
.scroll_right video[poster]{height:100%;width:100%;}
.detail_video{max-width: 1260px;width: 100%; height:auto; margin:0 auto;}
.detail_video video{width: 100%;}
.detail_video.sdg_print{max-width: 1080px;width: 100%; height:auto ; margin:0 auto;}
.detail_video.citynet01{width:100%;max-width: 1520px;}
.detail_video.citynet02{width:100%;background: #e0e0e0;margin:30px auto;}
.detail_video.citynet02 .inner_video{max-width:960px;width: 100%; padding:30px 0 30px 0;margin:0 auto}
.detail_video.michaa{width:100%;background: #000;max-width: 1520px;margin:30px 0;}
.detail_video.michaa .inner_video{max-width:1080px;width: 100%;padding:30px 0 30px 0;margin:0 auto}
.detail_video.tracker01{width:100%;max-width: 1520px;}
.detail_video.tracker02{width:100%;max-width: 1520px;}
.detail_video.interview01{width:100%;max-width: 1520px;background: #ebebeb;margin:30px 0;}
.detail_video.interview01 .inner_video{max-width: 750px;width: 100%;margin:0 auto;padding:100px 0;}
.detail_video.interview02{width:100%;max-width: 1520px;}
.detail_video.pizzahut{width:100%;max-width: 1520px;}
.detail_video .video365 {position:relative;}
.detail_video .video365 iframe {position:absolute;left:0;top:0;width:100%;height:100%;outline:none;}
.detail_video .global365mc01 {padding-bottom:42%}
.detail_video .global365mc02 {padding-bottom:56.25%}

@media (max-width: 1024px) {
  .view-info .caption p.main_p i{display: none;}
  .view-detail p i{display: none;}
  .detail_video.citynet02 .inner_video{padding:0 20px;}
  .detail_video.michaa .inner_video{padding:0 20px;}
  .detail_video.citynet02{margin:20px auto;}
  .detail_video.interview01{margin:10px 0;}
  .detail_video.interview01 .inner_video{max-width: 960px;width: 100%;margin:0 auto;padding: 0 10px;}
}
@media (max-width: 375px) {
  .scroll-fix{padding:20px 0 0 0;}
}

.sfix.fixed {position:fixed; width:31%;}
.sfix.fixed.absBottom {position:absolute; bottom:350px;}



@media (max-width: 900px) {
  .view-info .maskimg {height:500px;}
  .view-info .caption {margin-top:0; padding:30px 30px;}
  .view-info .caption>div {margin:30px 0;}
  .view-info .caption h1 {font-size:50px;line-height: 50px;}
  .view-info .caption h4 {font-size:23px;}
  .view-info .caption ul {padding-top:15px;}
  .view-info .caption ul li{}
  .view-info .caption ul li a{}
  .scroll_right{margin-bottom:50px;}
  .scroll_right.last{margin:0;}
  .detail_video{}
}
@media (max-width: 620px) {
  .view-info .caption>div{}
  .view-info .maskimg {height:300px;}
  .view-info .caption {padding:0 5px;}
  .view-info .caption h6 {font-size:15px;}
  .view-info .caption h1 {font-size:30px;line-height: 30px;}
  .view-info .caption h4 {font-size:16px; line-height:1.4; }
  .view-info .caption p {font-size:14px;}
  .view-info .caption h5 {font-size:15px; margin-bottom:15px;}
  .view-info .caption h5 p {font-size:12px;}
  .view-info .caption ul li a{}
  .view-info .caption ul {padding:0;}
  .view-info .caption ul li{}
  .view-detail>div {padding:20px 0;}
  .view-detail h3 {font-size:23px; margin-top:0;}
  .view-detail h4 {font-size: 17px;}
  .view-detail h4.photography {margin-left: 13px;}
  .view-detail p {font-size:13px;}
  .view-related h4 {font-size:16px; text-align:center; padding:0; margin-bottom:30px;}
  .view-related .caption {margin:30px 0;}
  .view-related .caption h6 {font-size:14px;}
  .view-related .caption h2 {font-size:28px;}
  .view-related .caption p {font-size:15px;}
  .scroll_right{margin-bottom:40px }
  .scroll_right.last{margin:0;}
  .detail_video{}
}
@media (max-width: 375px) {
  .view-info .caption>div{}
  .view-info .caption h6{padding:0;margin:0 0 0 2px;}
  .view-info .caption h1{font-size: 40px;line-height: 38px;}
  .view-info .caption h4{font-size: 20px;margin:10px 0 15px 0;display: inline-block;line-height: 1.4}
  .view-info .caption h4 i{display: block;}
  .view-detail h3{margin-bottom:15px;}
  .view-detail>div.less_bottom{padding:20px 0 10px 0;}
  .view-info .caption p.main_p{line-height: 24px;}
  .view-detail p{line-height: 23px;font-size: 13px;}
  .view-info .caption h5{}
  .view-info .caption ul{}
  .view-info .caption ul li{}
  .view-info .caption ul li a{}
  .view-info .caption h5 p{}
  .view-detail>div {padding:10px 0;}
  .work-banner-top .maskimg{height:245px;}
  .work-banner-top .caption{margin:0;padding:20px 0 26px 0;}
  .work-banner-top .caption h6{margin-top:15px;}
  .filter{margin:30px 0 25px 0 ;}
  .work-banner-top .caption h2{margin-top:10px;font-size: 35px;line-height: 1.05;}
  .work-banner-top .caption h2 i{display: block;}
  .tab-style>div{font-size: 12px;margin:5px 0;border-bottom: 1px solid #fff;}
  .work-list h1{margin-top:8px;padding-left: 5px;padding-top:5px;}
  .grid-item .caption h6{margin-bottom:5px;}
  .grid-item .caption h4{font-size: 35px;margin-top:10px;line-height: 1.05;}
  .grid-item .caption h4 i {display: block;}
  .work-banner-top .caption p{margin-top:13px;}
  .scroll_right{margin-bottom:20px }
  .scroll_right.last{margin:0;}
  .detail_video{}
  .view-related h4{}
  .view-related .caption h2{font-size: 35px;line-height: 33px;}
  .view-related .caption h6{font-size: 15px;}
  .view-related .caption p{letter-spacing: -0.07em;padding:0 0 6px ;margin:20px 0 33px;}
  .view-related{margin:50px 0 10px 0;}


  /* 동영상 margin */
  .detail_video.michaa{margin:15px 0;}
}















/* menu wrap */
body{
  position: relative;
}
.menu_wrapper{
  background: #000;
  width:100%;
  height:100%;
  position: fixed;
  top:0;
  left: 0;
  z-index: 31;
  -webkit-transform: translateX(-101%);
  -moz-transform: translateX(-101%);
  -ms-transform: translateX(-101%);
  -o-transform: translateX(-101%);
  transform: translateX(-101%);
  -webkit-transition: transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: transform 0.3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.menu_wrapper.on {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.inner_menu{
  max-width: 1520px;width:100%;height:550px; margin:198px auto 0;
  animation-name: inner_menu;
  animation-delay: 0.2s;
  animation-duration:0.3s;
  transform-origin: left top;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes inner_menu{
  from{
    opacity: 0;
  }
  40%{
    opacity: 0
  }
  to{
    opacity: 1;
  }
}
.inner_menu{max-width: 1520px;width:100%;height:550px; margin:198px auto 0;}
.menu_section{float:left;width: 50%;height:100%;}
.menu_section .menu{}
.menu_section .menu li{padding:0;margin:0; font-family:Roman;}
.menu_section .menu li a{color:#fff;font-size: 104px;line-height: 120px;display: inline-block;outline:none;}
.menu_section .menu li a:after{content: '';display: block;width: 0;height: 21px;background: #4e30f9;margin-top:-70px; transition: width .3s cubic-bezier(1, 0, 0, 1);;z-index: 15;position: relative;}
.menu_section .menu li a:hover::after {width: 100%;transition: width .3s ;}
.menu_copyright{font-size: 13px;color: #fff;text-align: left;position: absolute;bottom:57px;}
.contact_section{float: right;width: 50%;height:100%; color: #fff;margin:121px 0 0 0;padding:0 0 0 16%;}
.contact_section .contact{margin:0 0 55px 0;}
.contact_section .contact:after{clear: both;display: block;content: '';}
.contact_section .contact .noto{font-family: 'Noto Sans KR';letter-spacing: -0.02em}
.contact_section .contact li{padding:2px 0;}
.contact_section .contact .helve{font-family: 'Helvetica Neue';letter-spacing: 0.04em}
.contact_section .contact b{margin:0 0 10px 0;display: block;letter-spacing: 0.05em;font-size: 15px;}
.contact_section .contact .left{width: 50%;float:left;font-size: 14px;}
.contact_section .contact .right{width: 31%;float:right;}
.contact_section .view_map{font-size:21px;border-bottom: 1px solid #fff; display: inline-block;font-family:Roman;margin-bottom: 115px;}
.contact_section .n_blog{font-family: 'Helvetica Neue';letter-spacing: 0.04em}
.contact_section .n_blog a:before{content: '';width:31px;height:31px;background: url(/images/n_logo.jpg);display: inline-block;background-size: 100% 100%;vertical-align: middle;margin-right:10px;}

@media (max-width: 840px) {
  .inner_menu{max-width: 840px;width:100%;padding:0 15px; margin:74px auto 0;}
  .menu_section{float:none;height:auto;width:100%;}
  .contact_section{float:none;width:100%;padding:0 0 0 1px;margin:0;}
  .contact_section .contact{margin: 28px 0 -9px 0;}
  .contact_section .contact li{padding:0;}
  .contact_section .contact .left{padding:0 4% 0 0 ;font-size: 12px;width: 53%;}
  .contact_section .contact .right{font-size: 12px;width: 41%;}
  .menu_section .menu li a{color:#fff;font-size: 52px;line-height: 54px;display: inline-block;}
  .menu_section .menu li a:after{content: '';display: block;width: 0;height: 11px;background: #4e30f9;margin-top:-34px; transition: width .3s;z-index: 15;position: relative;}
  .menu_section .menu li a:hover::after {width: 100%;transition: width .3s cubic-bezier(1, 0, 0, 1);}
  .contact_section .view_map{margin: -5px 0 50px 0;font-size: 14px;}
  .menu_copyright{right:15px;bottom: 13px;font-size: 12px;}
  .contact_section .n_blog{position: absolute;left: 15px;bottom:13px;font-size:12px;}
  .contact_section .n_blog a:before{content: '';width:17px;height:17px;background: url(/images/n_logo.jpg);display: inline-block;background-size: 100% 100%;vertical-align: middle;margin-right:5px;margin-top:-3px;}
}

@media (max-width: 375px) {
  .inner_menu{max-width: 375px;width:100%;padding:0 15px; margin:74px auto 0;}
  .menu_section{float:none;height:auto;width:100%;}
  .contact_section{float:none;width:100%;padding:0 0 0 1px;margin:0;}
  .contact_section .contact{margin: 28px 0 -9px 0;}
  .contact_section .contact li{padding:0;}
  .contact_section .contact .left{padding:0 4% 0 0 ;font-size: 12px;width: 53%;}
  .contact_section .contact .right{font-size: 12px;width: 41%;}
  .menu_section .menu li a{color:#fff;font-size: 52px;line-height: 54px;display: inline-block;}
  .menu_section .menu li a:after{content: '';display: block;width: 0;height: 11px;background: #4e30f9;margin-top:-34px; transition: width .3s;z-index: 15;position: relative;}
  .menu_section .menu li a:hover::after {width: 100%;transition: width .3s;}
  .contact_section .view_map{margin: -5px 0 50px 0;font-size: 14px;}
  .menu_copyright{right:15px;bottom: 13px;font-size: 12px;}
  .contact_section .n_blog{position: absolute;left: 15px;bottom:13px;font-size:12px;}
  .contact_section .n_blog a:before{content: '';width:17px;height:17px;background: url(/images/n_logo.jpg);display: inline-block;background-size: 100% 100%;vertical-align: middle;margin-right:5px;margin-top:-3px;}
}

/************************************************************** contact.html ******************************************************************************/
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0,0,0,0);}


.blue_box {background: #5f24fb !important;}
.blue_box h3 {font-family: 'Roman'; font-size: 28px; letter-spacing: -0.00em !important;}

#main.contact {max-width: 1520px; margin: 0 auto;}

#main.contact section {padding: 55px 0 150px;}
#main.contact .section1 .contact_box .input_box:after {content: ''; display: block; clear: both;}

/* input */
#main.contact .section1 .contact_box .input_wrap {float: left; width: 33.33%; }

#main.contact .section1 .contact_box .input_wrap:nth-child(3n) {width: 33.34%; padding-left: 4.21%;}
#main.contact .section1 .contact_box .input_wrap:nth-child(3n-2) {padding-right: 4.21%;}
#main.contact .section1 .contact_box .input_wrap:nth-child(3n-1) {padding: 0 2.105%;}
#main.contact .section1 .contact_box .input_wrap:nth-child(n+4) {margin-top: 20px;}
#main.contact .section1 .contact_box .input_wrap input {width: 100%; border:1px solid #8d8d8d; height: 66px; font-family: 'Noto Sans KR'; padding: 0 20px; color: #000; font-weight: bold; background: none; position: relative;
  opacity: 0;
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
#main.contact .section1 .contact_box .input_wrap input.on {opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);}

#main.contact .section1 .contact_box .input_wrap:nth-child(5) input {font-family: 'Noto Sans KR'; font-weight: 400;}
#main.contact .section1 .contact_box .input_wrap:nth-child(6) input {font-family: 'Noto Sans KR'; font-weight: 400;}

#main.contact .section1 .contact_box .input_wrap:nth-child(2) input {
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;}
#main.contact .section1 .contact_box .input_wrap:nth-child(3) input {
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;}
#main.contact .section1 .contact_box .input_wrap:nth-child(4) input {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;}
#main.contact .section1 .contact_box .input_wrap:nth-child(5) input {
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;}
#main.contact .section1 .contact_box .input_wrap:nth-child(6) input {
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay:0.5s;}

#main.contact .section1 .contact_box .input_wrap input::-webkit-input-placeholder { /* 크롬 4–56 */
  color: #000;
}
#main.contact .section1 .contact_box .input_wrap input:-moz-placeholder { /* 파이어폭스 4–18 */
  color: #000;
  opacity:  1;
}
#main.contact .section1 .contact_box .input_wrap input::-moz-placeholder { /* 파이어폭스 19–50 */
  color: #000;
  opacity:  1;
}
#main.contact .section1 .contact_box .input_wrap input:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */
  color:  #000;
}
#main.contact .section1 .contact_box .input_wrap input::placeholder { /* 파이어폭스 51+, 크롬 57+ */
  color: #000;
  opacity:  1;
}
#main.contact .section1 .contact_box .input_wrap input::-ms-clear {display: none; /* 익스에서 X버튼 제거 */}

#main.contact .section1 .contact_box .text_area_box {margin-top: 50px;}
#main.contact .section1 .contact_box .text_area_box:after {position: absolute; content: ''; clear: both;}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap {float: left; width: calc(100% - 260px); transition: all 0.6s;}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap {float: right; width: 220px; position: relative; height: 230px;
  opacity: 0;
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transition-delay: 0.7s;
  -moz-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  transition-delay:0.7s;
}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap.on {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea {width: 100%; height: 230px; border: 1px solid #8d8d8d; padding: 20px; font-family: "Noto Sans KR"; font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea.on {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.6s;
  -moz-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea::-webkit-input-placeholder { /* 크롬 4–56 */
  color: #000;
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea:-moz-placeholder { /* 파이어폭스 4–18 */
  color: #000;
  opacity:  1;
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea::-moz-placeholder { /* 파이어폭스 19–50 */
  color: #000;
  opacity:  1;
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */
  color:  #000;
}
#main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea::placeholder { /* 파이어폭스 51+, 크롬 57+ */
  color: #000;
  opacity:  1;
}

#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .btn_send {width: 100%; height: 66px; border: 3px solid #5b21fc; line-height: 62px; text-align: center; background: #fff; padding: 0; font-size: 16px; font-weight: bold; transition: background 0.5s;  }
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .btn_send:hover {background: #5b21fc; color: #fff;}

#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap {position: absolute; bottom: 0;}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap input {position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0,0,0,0);}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap input + label {font-size: 16px; font-family: "Noto Sans KR"; padding-left: 29px; letter-spacing: -0.13em; position: relative; cursor: pointer;}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap input + label span {border-bottom: 1px solid #000; margin-left: 5px;}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap input + label:before {content:''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 2px solid #8d8d8d; transition: all 0.3s;}
#main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap input:checked + label:before {background: #999;}

#main.contact .section2>h2 {font-size: 72px; color: #5b21fc; font-family: Roman; margin: 0; line-height: 1em; padding-top:50px; position: relative; transition: all 0.6s;}
#main.contact .section2>h2:nth-child(1):after {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 5px; background: #5b21fc;}
#main.contact .section2>h2:nth-child(2) {padding: 0;}

#main.contact .section2 .contact_us_wrap {margin-top: 80px; transition: all 0.6s;}
#main.contact .section2 .contact_us_wrap>h4 {margin: 0; font-size: 14px; color: #000;}

#main.contact .section2 .contact_us_wrap .content_wrap {width: 100%; margin-top: 30px;}
#main.contact .section2 .contact_us_wrap .content_wrap:after {content: ''; display: block; clear: both;}
#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap {float: left; width: calc(100% - 220px); transition: all 0.6s;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2_wrap {float: right; width: 220px;}

#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap:after {content: ''; display: block; clear: both;}
#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .img_wrap {float: left; background: url('/images/image_contact_company.jpg') no-repeat left center; background-size: cover;}
#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .map_wrap {float: right;}
#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .con1 {width: 47.5%; margin-right: 2.5%; padding-top: 31.5%;}
/*#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .con1.article5 {padding: 0;}*/
#main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .map_wrap .here_map {position:absolute; left:0; top: 0; width: 100%; height: 100%; background: #5b21fc;}

#main.contact .section2 .contact_us_wrap .content_wrap .con2 {position: relative;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2 .address_txt h5 {color: #000; font-family: "Noto Sans KR"; font-size: 16px; margin: 0; padding: 10px 0; font-weight: bold;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2 .address_txt p {margin: 0; color: #000; font-size: 14px; font-weight: bold;}

#main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num {position: absolute; left: 0; bottom: 0;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num p {font-size: 15px; color: #000; font-weight: bold; margin: 0;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num p span {font-family: Roman; margin-right: 10px; font-weight: 400; font-style: italic;}
#main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num p.letter_spacing {letter-spacing: -0.04em;}

@media screen and (max-width: 1024px){
  #main.contact .section1 .contact_box .input_wrap {width: 50% !important; transition: width 0.6s;}
  #main.contact .section1 .contact_box .input_wrap:nth-child(3n) {padding-left: 0;}
  #main.contact .section1 .contact_box .input_wrap:nth-child(3n-2) {padding-right: 0;}
  #main.contact .section1 .contact_box .input_wrap:nth-child(3n-1) {padding: 0;}
  #main.contact .section1 .contact_box .input_wrap:nth-child(n+3) {margin-top: 20px;}

  #main.contact .section1 .contact_box .input_wrap:nth-child(2n-1) {padding-right: 1.5%;}
  #main.contact .section1 .contact_box .input_wrap:nth-child(2n) {padding-left: 1.5%;}

  #main.contact .section1 .contact_box .text_area_box .text_area_wrap {width: calc(100% - 245px);}

  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap {float: none; width: 100%;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con2_wrap {float: none; width: 100%;}

  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .con1 {width: 48.75%;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .img_wrap {margin-right: 1.25%;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .map_wrap {margin-right: 0; margin-left: 1.25%;}

  #main.contact .section2 .contact_us_wrap .content_wrap .con2 {margin-top: 20px; }
  #main.contact .section2 .contact_us_wrap .content_wrap .con2 .address_txt {display: inline-block;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num {display: inline-block; position: static; bottom: auto; left: auto; margin-left: 30px; vertical-align: sub;}

  #main.contact .section2>h2 {font-size: 48px;}

  #main.contact .section2 .contact_us_wrap .content_wrap .con2 {height: auto !important;}
}

@media screen and (max-width: 768px){
  #main.contact .section1 .contact_box .input_wrap {width: 100% !important; padding: 0 !important; margin-top: 15px !important;}
  #main.contact .section1 .contact_box .input_wrap input {height: 50px; padding: 0 15px;}

  #main.contact section {padding: 25px 0 100px;}

  #main.contact .section1 .contact_box .text_area_box {margin-top: 40px;}
  #main.contact .section1 .contact_box .text_area_box .text_area_wrap {float: none; width: 100%;}
  #main.contact .section1 .contact_box .text_area_box .text_area_wrap textarea {height: 180px;}
  #main.contact .section1 .contact_box .text_area_box .right_btn_wrap {float: none; width: 100%; margin-top: 20px; height: auto;}
  #main.contact .section1 .contact_box .text_area_box .right_btn_wrap .clause_wrap {position: static; bottom: auto; margin-top: 20px;}

  #main.contact .section2 .contact_us_wrap {margin-top: 30px;}

  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .img_wrap {margin: 0; width: 100%;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .map_wrap {margin: 0; width: 100%; margin-top: 20px;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con1_wrap .con1 {padding-top: 67.21%;}

  #main.contact .section1 .contact_box .text_area_box .right_btn_wrap .btn_send {height: 50px; line-height: 46px;}

}

@media screen and (max-width: 650px) {
  #main.contact .section2>h2 {font-size: 28px;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num {display:block; margin: 20px 0 0 0;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con2 .address_txt p {font-size: 14px;}
  #main.contact .section2 .contact_us_wrap .content_wrap .con2 .phone_num p {font-size: 15px;}
}

#main.contact .script_article {
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -ms-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: opacity 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#main.contact .script_article.on {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


/************************************************************** about.html ******************************************************************************/
/************************************************************** about.html ******************************************************************************/
/************************************************************** about.html ******************************************************************************/

/* 메인비주얼 */
#about .img_wrap > img {
  width:100%;
}
#about .main_visual,
#about .main_visual .swiper-container,
#about .main_visual .swiper-wrapper,
#about .main_visual .swiper-slide {
  height:100vh;
}
.__about.navi-icn,
.__about.navi-icn:before,
.__about.navi-icn:after,
.__about.active
.__about.navi-icn:before,
.__about.active .navi-icn:after {
  background-color: #fff;
}
#about .main_visual {
  margin-top: -60px;
}
#about .main_visual .swiper-slide {
  background-size:cover;
  background-position: center center;
  text-align: center;
}
#about .main_visual .visual_inner {
  position: absolute;
  width:100%;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#about .main_visual .visual_inner > div {
  display: inline-block;
  color: #fff;
  vertical-align: middle;
}
#about .main_visual .visual_inner .title h2 {
  display: inline-block;
  font-size: 65px;
  letter-spacing: 0.006em;
  font-family: 'Roman', sans-serif;
  border-bottom:1px solid #fff;
  margin: 0;
}
#about .main_visual .visual_inner .body {
  max-width: 650px;
  margin-left:250px;
}
#about .main_visual .visual_inner .body p {
  font-size: 16px;
  margin:0;
  word-break: keep-all;
  font-family:'Noto Sans KR', sans-serif;
  text-align: left;
  line-height: 1.5em;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#about .main_visual .swiper-container-vertical>.swiper-pagination-bullets {
  right:5%;
}
#about .main_visual .swiper-container-vertical>.swiper-pagination-bullets span {
  width: 12px;
  height: 12px;
  background: #fff;
  margin: 12px 0;
}


/* 어바웃 섹션1 */
#about .section1 {
  padding: 120px 0;
  overflow: hidden;
}
#about .section1 .section1_inner {
  max-width: 1520px;
  margin: 0 auto;
}
#about .section1 .s1_sl .swiper-slide {
  padding-right:6%;
}
#about .section1 .s1_sl .img_wrap {
  width: 82%;
  margin-left:auto;
}
#about .section1 .s1_sl .text {
  position: absolute;
  left: 0;
  top: 21%;
  z-index: 10;
}
#about .section1 .s1_sl .text > div {
  margin-bottom:10px;
}
#about .section1 .s1_sl .text h2 {
  font-size: 46px;
  color: #000;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: bold;
  margin:0;
  border-bottom:2px solid #000;
  display: inline-block;
}
#about .section1 .s1_sl_next {
  width:24px;
  height:27px;
  background: url("../images/about/s1_sl_next.png") no-repeat center center;
  background-size:cover;
  bottom:6px;
  right: 0;
  top:auto;
  margin: 0;
}

#about .section1 .s1_sl .s1_sl_pg {
  position: absolute;
  right:76%;
  bottom:0;
  transform-origin: left center;
  -webkit-transform: rotate(-90deg) translateY(-100%);
  -moz-transform: rotate(-90deg) translateY(-100%);
  -ms-transform: rotate(-90deg) translateY(-100%);
  -o-transform: rotate(-90deg) translateY(-100%);
  transform: rotate(-90deg) translateY(-100%);
  z-index:10;
}
#about .section1 .s1_sl .s1_sl_pg > div {
  display: inline-block;
  vertical-align: middle;
  line-height: 100%;
}
#about .section1 .s1_sl .s1_sl_pg .fraction {
  width:80px;
  height:1px;
  background: #000;
  margin: 0 5px;
}
#about .section1 .s1_sl .num_wrap span {
  font-size: 20px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: bold;
  color: #000;
  line-height: 100%;
}


/* 어바웃 섹션2 */
#about .section2 {
  background: #fafafa;
  padding: 80px 0;
}
#about .section2_inner {
  max-width:1520px;
  margin:0 auto;
}
#about .section_title h3 {
  font-size: 15px;
  color: #000;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  margin:0;
}
#about .section2 .work_list_wrap {
  margin-top: 80px;
}
#about .section2 .work_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 150px;
}
#about .section2 .work_list .list {
  position: relative;
}
#about .section2 .work_list .list .title {
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#about .section2 .work_list .list .title h2 {
  font-size: 34px;
  font-family: "Roman", sans-serif;
  font-style: italic;
  color: #000;
  margin:0;
}
#about .section2 .work_list .list .info_wrap {
  margin: 50px 0 0 90px;
  position: relative;
}
#about .section2 .work_list .list .info_wrap:after {
  width:1px;
  height:100px;
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  background: #000;
}
#about .section2 .work_list .list .info_wrap ul {
  padding-top: 15px;
}
#about .section2 .work_list .list .info_wrap li {
  font-size: 16px;
  color: #000;
  font-family: 'Helvetica Neue', 'Noto Sans KR', sans-serif;
  line-height: 1.5em;
  white-space: nowrap;
}



/* 어바웃 섹션3 */
#about .section3 {
  padding: 150px 0;
  overflow: hidden;
}
#about .section3_inner {
  max-width: 1520px;
  margin:0 auto;
}
#about .section3_inner .awards_wrap {
  margin-top: 60px;
}
#about .section3_inner .awards_sl {
  overflow: visible;
}
#about .section3_inner .awards_sl .rwd_wrap {
  padding-bottom:100%;
  position: relative;
}
#about .section3_inner .awards_sl .rwd_wrap .wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fafafa;
}
#about .section3_inner .awards_sl .rwd_wrap .wrapper .con {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
} 
#about .section3_inner .awards_sl .rwd_wrap .wrapper .con .img_wrap {
  width: 25.7142%;
  margin:0 auto;
}
#about .section3_inner .awards_sl .rwd_wrap .wrapper .con .img_wrap.n {
  width: 53.7142%;
}
#about .section3_inner .awards_sl .rwd_wrap .wrapper .con .text_wrap {
  text-align: center;
  margin-top: 25px;
}
#about .section3_inner .awards_sl .rwd_wrap .wrapper .con .text_wrap > p {
  font-size: 16px;
  color: #000;
  font-family: 'Noto Sans KR', sans-serif;
  margin:0;
}



/* 어바웃 섹션4 */
#about .section4 {
  padding-bottom: 130px;
}
#about .section4_inner {
  max-width: 1520px;
  margin:0 auto;
}
#about .section4 .clients_wrap {
  margin-top: 20px;
}
#about .section4 .clients_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#about .section4 .clients_list li {
  padding-bottom:70%;
  position: relative;
}
#about .section4 .clients_list .rwd_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#about .section4 .clients_list .rwd_wrap .img_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/*** 어바웃 중단점(1) 1200px ***/
@media screen and (max-width: 1200px) {
  #about .main_visual .visual_inner {
    max-width: 650px;
  }
  #about .main_visual .visual_inner > div {
    display: block;
    text-align: left;
  }
  #about .main_visual .visual_inner .body {
    max-width: none;
    margin: 50px auto 0;
  }

  #about .section2 .work_list .list .info_wrap {
    margin-left: 50px;
  }

  #about .section4 .clients_list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/*** 어바웃 중단점(2) 1024px ***/
@media screen and (max-width: 1024px) {
  #about .section1 .s1_sl .text {
    top:0;
  }

  #about .section2 .work_list {
    grid-template-columns: 1fr 1fr;
  }

  #about .section3_inner .awards_sl .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    width: 100% !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
  }
  #about .section3_inner .awards_sl .swiper-wrapper .swiper-slide {
    margin: 0 !important;
    width:100% !important;
  }
}

/*** 어바웃 중단점(3) 768px ***/
@media screen and (max-width: 768px) {
  #about .main_visual .visual_inner {
    max-width: 100%;
    padding: 0 26px;
  }
  #about .main_visual .visual_inner .title h2 {
    font-size: 25px;
  }
  #about .main_visual .visual_inner .body p {
    font-size: 12px;
  }

  #about .main_visual .swiper-container-vertical>.swiper-pagination-bullets {
    right: 3%;
  }
  #about .main_visual .swiper-container-vertical>.swiper-pagination-bullets span {
    width: 8px;
    height: 8px;
  }

  #about .section1 {
    /*height: 100vh;*/
    padding: 0;
    position: relative;
  }
  #about .section1 .section1_inner {
    /*position: absolute;*/
    width:100%;
    /*top: 50%;*/
    /*left: 0;*/
    /*-webkit-transform: translateY(-50%);*/
    /*-moz-transform: translateY(-50%);*/
    /*-ms-transform: translateY(-50%);*/
    /*-o-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    padding: 50px 15px;
  }
  #about .section1 .s1_sl .swiper-wrapper {
    padding-top: 21%;
  }
  #about .main_visual .swiper-slide:nth-child(1) {
      background-position: center bottom;
  }
  #about .main_visual .swiper-slide:nth-child(2) {
      background-position: 93% bottom;
  }
  #about .section1 .s1_sl .text h2 {
    font-size: 25px;
  }
  #about .section1 .s1_sl_next {
    top:5%;
    bottom: auto;
  }
  #about .section1 .s1_sl .swiper-slide {
    padding:0;
  }
  #about .section1 .s1_sl .s1_sl_pg {
    right: auto;
    left: 0;
    -webkit-transform: rotate(-90deg) translateY(100%);
    -moz-transform: rotate(-90deg) translateY(100%);
    -ms-transform: rotate(-90deg) translateY(100%);
    -o-transform: rotate(-90deg) translateY(100%);
    transform: rotate(-90deg) translateY(100%);
  }
  #about .section1 .s1_sl .num_wrap span {
    font-size: 12px;
  }
  #about .section1 .s1_sl .s1_sl_pg .fraction {
    width:30px;
  }


  #about .section2_inner {
    padding:0 15px;
  }
  #about .section_title h3 {
    font-size: 13px;
  }
  #about .section2 .work_list_wrap {
    margin-top: 50px;
  }
  #about .section2 .work_list {
    grid-template-columns: 1fr;
    grid-row-gap: 60px;
  }
  #about .section2 .work_list .list .title h2 {
    font-size: 22px;
  }
  #about .section2 .work_list .list .info_wrap li {
    font-size: 12px;
  }
  #about .section2 .work_list .list .info_wrap {
    margin-top: 30px;
  }
  #about .section2 .work_list .list .info_wrap ul {
    padding-top: 10px;
  }
  #about .section2 .work_list .list .info_wrap:after {
    height: 60px;
  }

  #about .section3 {
    padding: 50px 0;
  }
  #about .section3_inner {
    padding:0 15px;
  }
  #about .section3_inner .awards_wrap {
    margin-top: 30px;
  }
  #about .section3_inner .awards_sl .swiper-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #about .section3_inner .awards_sl .rwd_wrap .wrapper .con .text_wrap {
    margin-top: 15px;
  }
  #about .section3_inner .awards_sl .rwd_wrap .wrapper .con .text_wrap > p {
    font-size: 11px;
  }

  #about .section4 {
    padding-bottom: 50px;
  }
  #about .section4_inner {
    padding: 0 15px;
  }
  #about .section4 .clients_list {
    grid-template-columns: 1fr 1fr;
  }
  #about .section4 .clients_list li {
    padding-bottom: 40%;
  }
}











.green_box {max-width: 1520px; height: 266px; background: #38dbce; position: relative; margin: 0 auto;}
.green_box h3 {color: #fff; font-weight: 100; margin: 0; position: absolute; top:50%; left: 50%; letter-spacing: 0.05em;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
.green_box h3:after {content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: -8px; background: #fff;}
.green_box h3 img {margin-left: 10px; width: 112px;}

.green_box{
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

@media screen and (max-width: 850px){
.green_box h3 {font-size: 18px;}
.green_box h3 img {width: 92px;}
.green_box h3:after {height: 1px; bottom: -6px;}
}

@media screen and (max-width: 768px){
  .green_box h3 {font-size: 16px; text-align: center; white-space: nowrap;}
  .green_box h3 img {width: 80px;}
  .green_box {height: 160px;}
}


/********************************************************************** careers.jsp *************************************************************************************/
/********************************************************************** careers.jsp *************************************************************************************/
/********************************************************************** careers.jsp *************************************************************************************/
.careers_wrap {
  max-width:1520px;
  margin: 0 auto 200px;
  font-family: 'Helvetica Neue', 'Noto Sans KR', sans-serif;
}
.careers_wrap .expansion_panel_wrap {
  padding:0 90px;
}
.careers_wrap .career_title {
  margin-top: 60px;
  padding-left: 40px;
}
.careers_wrap .career_title h2 {
  color: #000000;
  font-size: 36px;
  font-weight: bold;
}
.careers_wrap .career_title p {
  color: #000000;
  font-size: 26px;
  letter-spacing:-0.069em;
}
.careers_wrap .panels {
  margin-top: 60px;
}
.careers_wrap .panels .list {
  padding:0 40px;
  border-bottom: 1px solid #000;
  position: relative;
}
.careers_wrap .panels .list:first-child {
  border-top: 1px solid #000;
}
.careers_wrap .panels .list > h3 {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  color: #000;
  margin: 0;
  padding: 25px 0;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.careers_wrap .panels .list:hover > h3 {
  opacity:0.7;
}
.careers_wrap .panels .list.on > h3 {
  color: #5b21fc;
  opacity:1;

}
.careers_wrap .panels .list .depth2_wrap:after {
  display: block;
  content: '';
  clear: both;
}
.careers_wrap .panels .list .depth2_wrap {
  margin-top: 10px;
  display: none;
  padding-bottom: 60px;
  position: relative;
}
.careers_wrap .panels .list .apply {
  position: absolute;
  right: 0;
  bottom: 40px;
}
.careers_wrap .panels .list .apply a {
  color: #5b21fc;
  font-size: 20px;
  font-weight: bold;
  border-bottom:1px solid #5b21fc;
}
.careers_wrap .panels .list .apply a:hover {
  opacity: 0.7;
}
.careers_wrap .panels .list .depth2 {
  width: 25%;
  float: left;
}
.careers_wrap .panels .list .depth2 > h4 {
  font-size: 18px;
  font-weight: bold;
  letter-spacing:-0.069em;
  margin: 0 0 20px;
}
.careers_wrap .panels .list .depth2 li {
  font-size: 14px;
  letter-spacing:-0.069em;
  margin-bottom: 10px;
  text-indent: 12px;
}
.careers_wrap .panels .list .ico_pm {
  position: absolute;
  width: 18px;
  height: 18px;
  right: 0;
  top:50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.careers_wrap .panels .list .ico_pm span {
  position: absolute;
  left:50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #000;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.careers_wrap .panels .list .ico_pm span:nth-child(1) {
  width:100%;
  height:2px;
}
.careers_wrap .panels .list .ico_pm span:nth-child(2) {
  width:2px;
  height:100%;
}
.careers_wrap .panels .list.on .ico_pm {
  -webkit-transform: rotate(-180deg) translateY(50%);
  -moz-transform: rotate(-180deg) translateY(50%);
  -ms-transform: rotate(-180deg) translateY(50%);
  -o-transform: rotate(-180deg) translateY(50%);
  transform: rotate(-180deg) translateY(50%);
}
.careers_wrap .panels .list.on .ico_pm span {
  background-color: #5b21fc;
}
.careers_wrap .panels .list.on .ico_pm span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  -moz-transform: translate(-50%, -50%) rotate(-90deg);
  -ms-transform: translate(-50%, -50%) rotate(-90deg);
  -o-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.careers_wrap .apply_form_wrap {
  margin-top: 170px;
  padding: 70px 90px;
  background: #f9f9f9;
  position: relative;
}
.careers_wrap .apply_form_wrap .bg_text {
  position: absolute;
  left: -30px;
  top:50%;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  font-size: 40px;
  color: #c2c2c2;
  letter-spacing: 0;
  font-weight: bold;
}
.careers_wrap .apply_form {
  width: 1080px;
  margin-left:auto;
}
.careers_wrap .apply_form .input_wrap {
  width: 520px;
  display: inline-block;
  position: relative;
  margin: 20px 18px 0 0;
  overflow: hidden;
}
.careers_wrap .apply_form .input_wrap input {
  width:100%;
  height: 60px;
  background: none;
  border:none;
  color: #000;
  font-size: 16px;
  padding-top: 15px;
}
.careers_wrap .apply_form .input_wrap input[type=text] + label {
  position: absolute;
  left: 0;
  top:50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #000;
  font-size: 16px;
  font-weight: bold;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.careers_wrap .apply_form .input_wrap:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}
.careers_wrap .apply_form .input_wrap span {
  display: block;
  width:100%;
  height: 1px;
  left: -100%;
  bottom: 0;
  position: absolute;
  background: #5b21fc;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.careers_wrap .apply_form .input_wrap span.on {
  left:0;
}
.careers_wrap .apply_form input[type=text] + label.on {
  top: 0;
  font-size: 12px;
  color: #5b21fc;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.careers_wrap .apply_form .apply_position_wrap {
  margin-top: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid #000;
}
.careers_wrap .apply_form .apply_position_wrap > h3 {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.careers_wrap .apply_form .position_wrap {
  margin-top: 30px;
}
.careers_wrap .apply_form .position_wrap .position_name p {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 15px;
}
.careers_wrap .apply_form .position_wrap .chk_box_wrap {
  display: inline-block;
  width: 200px;
  position: relative;
}
.careers_wrap .apply_form .position_wrap .chk_box_wrap:nth-child(2) {
  margin-left: 15px;
}
.careers_wrap .apply_form .position_wrap input[type=checkbox] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}
.careers_wrap .apply_form .position_wrap input[type=checkbox] + label {
  position: absolute;
  width: 14px;
  height: 14px;
  left:0;
  top: 50%;
  margin-top: 1px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid #000;
  cursor: pointer;
}
.careers_wrap .apply_form .position_wrap input[type=checkbox]:checked + label {
  background: #000;
}
.careers_wrap .apply_form .position_wrap span {
  padding-left: 20px;
  font-size: 16px;
  cursor: pointer;
}

.careers_wrap .agreement {
  padding: 40px 0;
  text-align: right;
}
.careers_wrap .agreement .agr_box_wrap {
  position: relative;
  display: inline-block;
}
.careers_wrap .agreement .agr_box_wrap input[type=checkbox] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}
.careers_wrap .agreement .agr_box_wrap input[type=checkbox] + label {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 1px solid #000;
  margin-top: 2px;
  cursor: pointer;
}
.careers_wrap .agreement .agr_box_wrap input[type=checkbox] + label:hover {
  border:  2px solid #5b21fc;
}
.careers_wrap .agreement .agr_box_wrap input[type=checkbox]:checked + label {
  background: #000;
  border: 2px solid #5b21fc;
}
.careers_wrap .agreement .agr_box_wrap span {
  font-size: 16px;
  color: #000;
  padding-left: 25px;
  cursor: pointer;
}
.careers_wrap .agreement .agr_box_wrap span strong {
  border-bottom: 1px solid #000;
}
.careers_wrap .agreement .agr_box_wrap span strong:hover {
  color: #5b21fc;
}

.careers_wrap .btn_submit_wrap {
  text-align: right;
}
.careers_wrap .btn_submit_wrap .btn_wrap {
  display: inline-block;
  margin-left: 15px;
}
.careers_wrap .btn_submit_wrap .btn_wrap button {
  width:250px;
  height:50px;
  line-height:48px;
  border: 1px solid #000;
  font-weight: bold;
  font-size:16px;
  background: #fff;
  color: #000;
  padding: 0;
  margin: 0;
}
.careers_wrap .btn_submit_wrap .btn_wrap button.submit {
  color: #fff;
  background: #000;
}

.careers_wrap .layer__wrap {
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  height: 100%;
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: -0.069em;
  display: none;
  z-index: 1000;
}
.careers_wrap .layer__wrap .bg {
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, .4);
}
.careers_wrap .layer__wrap .private_info_clause {
  position: absolute;
  max-width: 800px;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  background: #fff;
  padding: 50px 40px;
}
.careers_wrap .private_info_clause .title h2 {
  margin:0;
  display: inline-block;
  border-bottom:1px solid #000;
  line-height: 1.9em;
}
.careers_wrap .private_info_clause .body {
  max-height: 65vh;
  overflow: auto;
  margin-top: 10px;
}
.careers_wrap .private_info_clause .article_title h3 {
  font-size: 18px;
  font-weight: bold;
}
.careers_wrap .private_info_clause .article_body p {
  font-size: 16px;
  -ms-word-break: keep-all;
  word-break: keep-all;
}
.careers_wrap .private_info_clause .btn_close {
  position: absolute;
  right: 40px;
  top: 50px;
  cursor: pointer;
}


@media screen and (max-width: 1520px) {
  .careers_wrap .apply_form_wrap .bg_text {
    opacity:0.3;
  }
}
@media screen and (max-width: 1200px) {
  .careers_wrap .apply_form {
    width:100%;
  }
  .careers_wrap .apply_form .input_wrap {
    display: block;
    width: 100%;
  }
  .careers_wrap .apply_form .position_wrap .chk_box_wrap {
    display: block;
    width:100%;
    margin: 15px 0 0 15px;
  }
  .careers_wrap .apply_form_wrap .bg_text {
    left:auto;
    right:0;
  }
  .careers_wrap .apply_form_wrap {
    padding:4% 5%;
  }
  .careers_wrap .apply_form .apply_position_wrap {
    margin-top: 60px;
  }
  .careers_wrap .apply_form .position_wrap {
    margin-top: 30px;
  }
  .careers_wrap .btn_submit_wrap .btn_wrap {
    margin-left:-4px;
    width:50%;
  }
  .careers_wrap .btn_submit_wrap .btn_wrap:nth-child(1) {
    padding-right:2%;
  }
  .careers_wrap .btn_submit_wrap .btn_wrap:nth-child(2) {
    padding-left:2%;
  }
  .careers_wrap .btn_submit_wrap .btn_wrap button {
    width: 100%;
  }
  .careers_wrap .layer__wrap .private_info_clause {
    width: 80vw;
  }
}
@media screen and (max-width: 1024px) {
  .careers_wrap .career_title {
    padding:0;
    text-align: center;
  }
  .careers_wrap .career_title h2 {
    font-size: 34px;
  }
  .careers_wrap .career_title p {
    font-size: 16px;
  }
  .careers_wrap .panels .list {
    padding: 0 5%;
  }
  .careers_wrap .panels .list > h3 {
    padding: 5% 0;
    font-size: 18px;
  }
  .careers_wrap .apply_form_wrap {
    margin-top: 60px;
  }
  .careers_wrap .apply_form_wrap .bg_text {
    display: none;
  }
  .careers_wrap {
    margin: 0 auto 50px;
  }
  .careers_wrap .expansion_panel_wrap {
    padding: 0 5%;
  }
  .careers_wrap .panels .list .depth2 {
    float: none;
    width: 100%;
    margin-top: 30px;
  }
  .careers_wrap .layer__wrap .private_info_clause {
    width: 90vw;
    padding: 30px;
  }
}