@charset "utf-8";
@import url("modal.css");
@import url("works.css");
#header #logo,#btn-menu{position: fixed}
/* body.on #logo a{background-image: url('/resources/oktomato/img/common/logo_w.png')}
.mv_on #logo a{background-image: url('/resources/oktomato/img/common/logo_w.png')} */
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.woff2') format('woff2'), url('../fonts/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.woff2') format('woff2'), url('../fonts/Pretendard-Bold.woff') format('woff');
}

.ff-serif{font-family: 'Noto Serif KR'}
.ff-pre{font-family: 'Pretendard','Inter','Noto Sans KR', 'Malgun Gothic', 'Dotum'; font-weight: 700;}

.pop_bg .inner{max-width:1400px}
#main{word-break:keep-all}
#main-nav,.scroll-down,.scroll-main{margin-left: -880px;}
/* #header #sub-menu{display: block;} */

.mv_on #headerLine,.mv_on #header:before{background-color:rgba(204,204,204,.2)}
.mv_on #sub-menu,.mv_on .down-ott{border-color:rgba(204,204,204,.2)}

.inner{padding-left: 222px; padding-right: 50px; margin: 0 auto;}

#main-nav{position: fixed; left: 50%; text-align: right; top:230px; z-index: 3; line-height: 1.18;}
#main-nav .nav{color: #ddd; font-weight: 700; white-space: nowrap; line-height: 1.15;}
#main-nav .nav li{position: relative; margin-top: 30px;}
#main-nav .nav li:first-child{margin-top: 0;}
#main-nav .nav .txt{position: absolute;margin-left: 18px; font-weight: 400; color: #999 !important; display: none; font-size: 14px; top: 50%;left: 100%; transform:translateY(-50%); text-align: left;}
#main-nav .nav .active{color: #333}
#main-nav .nav .active .txt{display: block; }
#main-nav .nav .txt br{display: none;}
#main-nav .nav a{font-size: 0;}
#main-nav .nav a strong{display: inline-block; overflow: hidden; position: relative; font-size: 1.125rem}
#main-nav .nav a:hover strong:before{width: 100%}
#main-nav .nav a strong:before{position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: #333;
  overflow: hidden;
  transition: width 275ms ease; width: 0; white-space: nowrap;}

#main .wheel .h100{display: table; width: 100%; height: 100%; table-layout: fixed; max-width:1180px; margin:  auto;}
#main .wheel .v{display: table-cell;vertical-align: middle;; padding-top: 150px;}
#main #mainVisual.wheel .v{padding-top: 0;}

#mainVisual img{display: block; margin: 0 auto;}

.tit-main{font-size: 1.875rem; font-weight: 700; color: #000; margin-bottom: 50px; line-height: 1.3; letter-spacing: -0.015em;}
.tit-main.mb{margin-bottom: 30px;}
.tit-main.inc_sel{display: flex;justify-content: space-between; align-items: flex-end;}
.tit-main.inc_sel .sel{font-weight: 400; font-size: 14px; color: #999; display: flex}
.tit-main.inc_sel .sel > li{display: inline-block; width: 200px; vertical-align: middle; margin-left: 5px; height: 45px}
.tit-main.inc_sel .sel > li:first-child{margin-left: 0;}
.tit-main.inc_sel .sel select{width: 100%; height: 100%}
.tit-main.inc_sel .sel select:disabled{background-color: #f1f1f1; color: #333}
.tit-main.inc_sel .sel .sel_w{display: none;}
.tit-main.inc_sel .sel .selA{display: inline-block;}
.tit-refer{font-size: 1rem; color:#444; margin-bottom: 1.25em; line-height: 1.15; font-weight: 400;}
.tit-mid{font-size: 1.25rem; margin-bottom:1.500em; line-height: 1.15;}
.main-txt{font-size: 1rem; font-weight: 400; color: #444; line-height: 1.67; margin-bottom: 70px;}

.tit-main{display: inline-block;}

.main-refer .bg{background: #f4f4f4; padding: 0 60px 0 0;}
.main-refer .dev{display: flex; align-items:center}
.main-refer .r{width: 685px; max-width:74%; padding-top: 45px;}
.main-refer .logo{flex:1}
.main-refer .logo img{display: block; margin: 0 auto; max-width:67%}
.main-refer .sect{margin-top: 80px;}
.main-refer .sect:first-child{margin-top: 0;}

#main .group{padding: 100px 0}
#main .group#mainWorks{padding-bottom: 0;}

.si-dev > ul{display: flex; flex-wrap:wrap; margin-left: -40px;}
.si-dev > ul > li{float: left; width: calc(50% - 40px); margin-left: 40px; display: table; border-bottom: 1px solid #ddd; padding: 25px 0}
.si-dev > ul > li:first-child,.si-dev > ul > li:nth-child(2){border-top: 1px solid #ddd;}
.si-dev .item > *{display: table-cell; vertical-align: middle;}
.si-dev .item .ico{width: 125px;}
.si-dev .item .ico img{display: block;margin: 0 auto;}
.si-dev .item:hover{background: #f7f7f7}
.si-dev .item:hover img{
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

/* .si-dev .item .txt > span{transition: all ease-in-out .18s;box-shadow: inset 0 0 0 rgba(215,63,41,.3);}
.si-dev .item:hover .txt > span{box-shadow: inset 0 -7px 0 rgba(215,63,41,.3);} */


@keyframes shake {
  0%{transform: rotate(0);}
  50%{transform: rotate(10deg);}
  100%{transform: rotate(0);}
}

@keyframes shakeC {
    from,to {transform:rotate(-3deg)}
    50% {transform:rotate(3deg)}
}

.animated {
  opacity: 0;
  transform: translateY(50%);
  transition: all ease 1s;
  transition-delay: .1s;
}

.con-dev{margin: 0 0 -40px -40px; display: flex; flex-wrap:wrap}
.con-dev > li{float: left; width: calc(50% - 40px); margin: 0 0 40px 40px; display: flex; align-items: flex-start;}
/* .con-dev > li > *{display: table-cell; vertical-align: top;} */
.con-dev .img_w{width: 62%; position: relative;}
.con-dev .img{background: #f4f4f4; padding-bottom: 62.5%; overflow: hidden;;}
.con-dev .img_w img{display: block; width: 100%}
.con-dev .txt{padding-left: 30px; word-break:keep-all; line-height: 1.18; flex:1}
.con-dev .txt .add{margin-top: 30px; font-size: 14px;}

.dev-solution{margin-left: -3%; color: #fff}
.dev-solution > li{float: left; width: 30.333%; margin-left: 3%; background: #f4f4f4; position: relative;}
.dev-solution .in{position: relative; padding-bottom: 132.5%; background: #f4f4f4 url('') center center no-repeat; overflow: hidden; background-size:cover}
.dev-solution .bot{position: absolute; left: 0; bottom: 0; padding: 0 1em 30px 30px; font-weight: 500; font-size: 1.25rem; z-index: 4; width: 100%}
.dev-solution .bot .small{display: block; margin-top: 5px; font-weight: 400; font-size: 14px;}
.dev-solution a{display: block;}

.works-dev{margin: -20px -1.5%; display: flex; flex-wrap:wrap; line-height: 1.35;}
.works-dev > li{float: left; width: 33.333%; ; padding: 20px 1.5%;}
/* .works-dev > li:hover{transition:none !important} */

/* .works-dev{margin: 0 0 -20px -3%; display: flex; flex-wrap:wrap; line-height: 1.35;}
.works-dev > li{float: left; width: 30.333%; ; margin: 0 0 20px 2%;} */

.works-dev .logo{background: #f4f4f4; position: relative; padding-bottom: 62.5%; margin-bottom: 1.25rem;}
.works-dev .logo img{position: absolute; left: 0; top:0; right: 0; bottom: 0; margin:auto; max-width: 67%;; transition:all ease-in-out .3s}
.works-dev a{display: block}
.works-dev .txt{display: inline-block;}
.works-dev .active .logo{border:1px solid #d73f29}
/* .works-dev .active .txt{font-weight: 500; border-bottom: 1px solid #777;} */

.scroll-down{position: fixed; left: 50%; color: #ccc; font-size: 12px; bottom: 5%; z-index: 3; animation: scroll 2.5s infinite}
.scroll-down img{display: block; margin: 45px auto 0}
.scroll-down .arrow{position: relative; width: 8px; height: 52px; margin: 18px auto 0}
.scroll-down .arrow:after,.scroll-down .arrow:before{position:absolute; content:''}
.scroll-down .arrow:before{width:1px; height:100%; background:#ccc; left:50%; top:0}
.scroll-down .arrow:after{width:8px; height:8px; border:1px solid #ccc;transform:rotate(-135deg); border-right:0; border-bottom:0; bottom:0;}
.scroll-down .txt{transform: rotate(180deg); display: block; writing-mode: tb-rl; position: relative; white-space: nowrap}

.scroll-down .txt{position: relative; display: inline-block; overflow: hidden;}
.scroll-down .txt span{position: absolute;
  top: 0;
  left: 0;
  color: #333;
  overflow: hidden;  height: 0; white-space: nowrap;}

.scroll-down .arrow.hover:before{background-color: #000}
.scroll-down .arrow.hover:after{border-color: #000}
.scroll-down .arrow.hover{position: absolute; left: 50%; bottom: 0; margin-left: -4px; z-index: 1; height: 0; overflow: hidden}
/* .scroll-down:hover .arrow.hover{height:52px; margin-top:0;} */

.scroll-down.none,.scroll-main.none{opacity:0}

/* .scroll-down .txt:before{top: 0; right: 0; color: #333; transition: all .3s ease; position:absolute; content: attr(data-content); height: 0; overflow: hidden;}
.scroll-down:hover .txt:before{height:100%} */

/* .scroll-down .txt:before{ transition-delay: .19s;}
.scroll-down .on.txt:before{transition-delay: 0s}
.scroll-down .on.hover{transition-delay: .19s} */


.scroll-main{position: fixed; left: 50%; bottom: 3%; transition:border ease-in-out .3s; z-index: 3; border:1px solid #ccc; border-radius:50%; width: 70px; height: 70px;}
.scroll-main img{position: absolute; left: 50%; top:50%; display: block; margin: -12px 0 0 -3px; animation: scroll 2s infinite; transition:all ease-in-out .18s}
.scroll-main:hover{border-color:#aaa}
.scroll-main:hover,
.scroll-main:focus {
	animation: pulse 1s;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #aaa;
  }
}

@keyframes scroll {
  0%,100%{
  bottom:4%
  }
  50% {
  bottom:5%
  }
} 


.nav_none #main-nav,
.nav_none #logo{opacity:0}

/* body.on{overflow: hidden;} */
#mainWorks{transition: background-image 3s ease-in-out; position: relative}
#mainWorks .inner{width: 100%; position: relative; z-index: 1}
#mainWorks .bg{background: #111 url('') center center no-repeat; background-size:cover; position: fixed; left: 0; top:0; width: 100%; height: 100%; display: none;}
#mainWorks .bg.transition{transition: background-image .8s ease-in-out;}

.on #header{background: none;}
.on .works-dev > li{color: #ccc;}
.on .works-dev > li.act{color: #fff}
.on .works-dev .logo{background: none; border:1px solid rgba(255,255,255,.5)}
.on .works-dev .act .logo{background: none; border:1px solid #fff}
.on #header{border-bottom: 0;}
.on #btn-menu > span {background: #fff}
.on #sub-menu{background: none; border-color:gba(255,255,255,.5)}
.on #sub-menu a{color: #999}
.on #sub-menu a:hover,.on #sub-menu a:focus{color: #fff}
.on #sub-menu a:hover:after,.on #sub-menu a:focus:after{background: #fff}
.on #mainWorks select.ab{color: #999; border-color: rgba(255,255,255,.5); background-image: url('../img/common/sel_g.png'); background-color: transparent}
.on #mainWorks .tit-main{color: #fff}
.on #main-nav .nav{color: rgba(255,255,255,.5)}
.on #main-nav .nav .active{color: #fff}
.on #main-nav .nav .txt{color: rgba(255,255,255,.87) !important}

.bbs-news .t{font-size: 1.125rem;}
.bbs-news .cont{padding-left: 40px;}

/* body.loading{overflow-y: hidden;} */
#pageLoad{position: fixed; left: 0; top:0; width: 100%; height: 100%; z-index: 300; background: #f7f7f7}
#pageLoad .in{position: flex;}
#pageLoad .logo{position: absolute; left: 0 ; top:0; right: 0; bottom: 0; margin: auto; background:url('../img/common/loading.png') center center no-repeat; width: 295px; height: 80px; transition:all ease-in-out .3s; background-size:100%; max-width:67%}
.loaded #pageLoad .logo{background-image: url('../img/common/loading_on.png')}

#wrap.works #cont, #wrap.works .m-contact, #wrap.works #cont #footer, #wrap.works #header{display: none;} 

/* .bbs-news .img{padding-bottom: 12.5%;} */


.pop_bg .inner{padding: 0 15px}

#mainVisual{background: #f7f7f7 url('') center center no-repeat; background-size:cover; transition: all ease-in-out .4s; position: relative;}
#mainVisual .vis{background: #f7f7f7 url('') center center no-repeat; background-size:cover; position: absolute; left: 0; top:0; width: 100%; height:100%}
#vis-txt{text-align: center; color: #000; font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-size: 110px;}
#vis-txt .border{; color: #fff; font-weight: 700;
    color: transparent;
    -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;
} /* text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000*/
#vis-txt .i1 > *{display: inline-block; vertical-align: middle;}
#vis-txt .i2_2{font-size: 0.818em;}
#vis-txt .i3_1{display: inline-block; width: 213px}
#vis-txt .i4 .sup{font-size: 12px; color: #888; display: inline-block; letter-spacing: 0; text-align: left; font-weight: 400; position: relative; top:18px; line-height: 1.18;}
#vis-txt .i4  > *{vertical-align: top;}
#vis-txt span,#vis-txt strong{display: inline-block;}
#vis-txt ul{z-index: 3; position: relative;}
#vis-txt .rel{position: relative}
#vis-txt .ico{position: absolute; bottom: 50px; right: 95px; width: 97px; z-index: 1}
#vis-txt .zindex{position: relative; z-index: 3}

.i3{display: flex;    justify-content: center; align-items: center; flex-wrap:wrap;}
.i3_2{text-align: left; position: relative;
      height: 110px; overflow: hidden; line-height: 110px; width: 6.7em; display: inline-block; cursor:pointer; margin-left: 30px; display: block !important; z-index: 5
}
/* .i3_2 .ani{animation: change 4s infinite;}
.i3_2 .ani{display: block; height: 100% !important; position: relative;}
.i3_2 .ani > span{display: block !important; position: relative;} */
.i4{margin-top: -10px;}
/* #mainVisual.on{background-image:url('../img/main/visual.jpg')} */
#mainVisual.on #vis-txt{color: #fff;}
#mainVisual.on #vis-txt,#mainVisual.on #vis-txt .border{text-shadow: 5px 5px 8px rgba(0,0,0,.18)}
#mainVisual.on #vis-txt .border{color: #fff;-webkit-text-stroke-width: 0}
#mainVisual.on #vis-txt .i4 .sup{color: #fff}

#mainVisual.bg1 .vis{background-image: url('../img/main/vis/1.jpg')}
#mainVisual.bg2 .vis{background-image: url('../img/main/vis/2.jpg')}
#mainVisual.bg3 .vis{background-image: url('../img/main/vis/3.jpg')}

.animated {
  opacity: 0;
  transform: translateY(50%);
  transition: all ease .8s;
  transition-delay: .1s;
}
.animated.on{
  transform: translateY(0);
  opacity: 1;
}

#vis-txt.normal .animated{transition-delay:0s !important}

#mainVisual,#vis-txt.normal .animated,
#mainVisual #vis-txt.normal,
#mainVisual #vis-txt.normal .border,
#mainVisual #vis-txt.normal .i4 .sup{transition:all ease-in-out .15s !important;}

/* @keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
} */

@keyframes change {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
}

.m-contact{margin-top: 0;}
  
.works-top{display: flex; margin-bottom: 40px;}
.works-top .t{font-size: 1.25rem; margin-bottom: 1rem; font-weight: 500; color: #111}
.works-top .t span{box-shadow: inset 0 -10px 0 rgba(215,63,41,.5);}
.tabs-works{font-size: 0;}
.tabs-works button{font-size: 1rem; background: #f1f1f1; color: #333; margin-right: 5px; display: inline-block; padding: 5px 10px}
.tabs-works button:last-child{margin-right: 0}
.tabs-works button.active{background: #333; color: #fff; font-weight: 500;}
.works-top .r{margin-left: 30px;}
  
#wrap.works .go_top{position: fixed; right: 75px; bottom: 60px; left: auto; margin-left: 0; top:auto; width: 55px; height: 55px}
.works-dev .dn{display: none;}
.dn_w .dn{top:0; left: 0; width: 0; height: 0}

.img-auto img{display: block; margin: 0 auto;}

.works-dev .hidden{display: none;}
/* .works-dev .item:nth-child(-n+9){display: block;} */

.works_more_w{position: relative; margin-top: 105px;}
#btnWorks{background: rgba(0,0,0,.5); border-radius:50%; display: block; margin: 0 auto; width: 70px; height: 70px}
#btnWorks .circle_w{display: block; width: 100%; font-size: 0;}
#btnWorks .circle_w span{display: inline-block;width: 7px; height: 7px; background: #fff; border-radius:50%; margin: 0 3px;}

.page-loc{border:1px solid #000}
.page-loc .ifr{position: relative; padding-bottom: 33.5%;}
.page-loc .ifr #map{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;}
.page-loc .info{border-top: 1px solid #000; background: #f7f7f7; padding: 55px 60px}
.page-loc .item{display: flex; margin-top: 30px; flex-wrap:wrap; align-items:baseline}
.page-loc .item dt{width: 130px; font-weight: 700; padding-left: 35px; background: url('') left .15em no-repeat; position: relative; margin-right: 17px; color: #333}
.page-loc .item dd{flex:1; font-size: 14px; font-weight: 400;;}
.page-loc .item:first-child{margin-top: 0;}
.page-loc .item .add{background-image: url('../img/sub/ico-add.png')}
.page-loc .item .tel{background-image: url('../img/sub/ico-tel.png')}
.page-loc .item .fax{background-image: url('../img/sub/ico-fax.png')}
.page-loc .item .mail{background-image: url('../img/sub/ico-mail.png')}
.page-loc .item .sub{background-image: url('../img/sub/ico-sub.png')}
.page-loc .item dt:after{position: absolute; right: 0; top:50%; margin-top: -6px; width: 1px; height: 12px; background: #444; content: ''}

.ui-pub{position: relative; text-align: center; font-size: 14px;; background: url('../img/main/bg-uii.png') center center no-repeat}
.ui-pub .circle{border-radius:50%; position: absolute; line-height: 1.15}
.ui-pub .bg-grey{color: #fff}
.ui-pub .bg-red_r{background: #fff}

.ui-pub .circle > span{position: absolute; left: 0; top:0; width: 100%; height: 100%; border-radius:50%; align-items: center; justify-content: center; display: flex; letter-spacing: -0.04em;}

.ui-pub .circle > span:hover:before{width: 100%; height: 100%; opacity:1}
.ui-pub .circle .bg-red_r:before,
.ui-pub .circle .bg-red_r2:before{background: #d73f29; color: #fff}
.ui-pub .circle .bg-grey_r:before{background: #999; color: #fff}
.ui-pub .circle .bg-grey:before{background: #fff; color: #999; border:1px solid #999}  .ui-pub .circle > span{position: absolute; left: 0; top:0; width: 100%; height: 100%; border-radius:50%; align-items: center; justify-content: center; display: flex; letter-spacing: -0.04em;}
.ui-pub .circle > span:before{position: absolute;   content: attr(data-content);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #f33a3a;
  transition: all .5s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; justify-content: center; display: flex; align-items:center; opacity:0; white-space: pre;}
.ui-pub .circle > span:hover:before{width: 100%; height: 100%; opacity:1}
.ui-pub .circle .bg-red_r:before,
.ui-pub .circle .bg-red_r2:before{background: #d73f29; color: #fff}
.ui-pub .circle .bg-grey_r:before{background: #999; color: #fff}
.ui-pub .circle .bg-grey:before{background: #fff; color: #999; border:1px solid #999}

/* .ui-pub .circle span:before{border-color:#aaa; position: absolute; width: 100%; height: 100%; content: ''; border-radius:50%}
.ui-pub .circle span:hover:before{box-shadow: 0 0 0 .85rem rgba(255, 255, 255, 0)}
.ui-pub .circle .bg-red_r:hover:before,.ui-pub .circle .bg-red_r2:hover:before{animation: blink 1s infinite;}
.ui-pub .circle .bg-grey_r:hover:before,.ui-pub .circle .bg-grey:hover:before{animation: blink2 1s infinite;}

@keyframes blink{0%{box-shadow: 0 0 0 0 #d73f29;}}
@keyframes blink2{0%{box-shadow: 0 0 0 0 #ccc;}} */

.ui-pub .s60{width: 5.3%; padding-bottom: 5.3%;}
.ui-pub .s70{width: 6.3%; padding-bottom: 6.3%;}
.ui-pub .s80{width: 7%; padding-bottom: 7%;}
.ui-pub .s90{width: 8%; padding-bottom: 8%;}
.ui-pub .s98{width: 8.7%; padding-bottom: 8.7%;}
.ui-pub .s110{width: 9.7%; padding-bottom: 9.7%;}
.ui-pub .s120{width: 10.7%; padding-bottom: 10.7%;}
.ui-pub .s156{width: 13.9%; padding-bottom: 13.9%;}

.ui-pub .ux1{right: 19.5%; top: 3.5%;}
.ui-pub .ux2{right: 7%; top: 27%;}
.ui-pub .ux3{right: 0; top: 17%;}
.ui-pub .ux4{right: 22%; bottom: 8%;}
.ui-pub .ux5{right: 14%; bottom: 6%;}

.ui-pub .ui1{left: 7%;  top: 20%;}
.ui-pub .ui2{left: 12.6%; top: 31%;}
.ui-pub .ui3{left: 12%; bottom: 16%;}
.ui-pub .ui4{left: 20%; bottom: 7%;}
.ui-pub .ui5{left: 0; bottom: 25%;}

.ui-pub .ttt{display: flex; color: #fff; align-items:center; justify-content: center ; font-weight: 700; font-size: 24px; background: #d73f29; border-radius:50%; position: relative;}
.ui-pub .ttt strong{position: absolute; z-index: 1; left: 50%; top:50%; transform: translate(-50%, -50%)}
.ux-t{width: 25%; padding-bottom: 25%;}
.ui-t{width: 15%; padding-bottom: 15%;}

.uiux-w{display: flex; align-items: center;  justify-content: center; padding: 5.3% 0}
    
.uiux-w .ttt:before,
.ux-t:after{position: absolute;  width:calc(100% + 60px); height:calc(100% + 60px); content: ''; border-radius:50%; 
background: rgba(215,63,41,.5); left:0; top:0; margin: -30px 0 0 -30px;
}
.ux-t:after{width:calc(100% + 140px); height:calc(100% + 140px); margin: -70px 0 0 -70px;}

.ui-t{z-index: 1; margin-left: -29px;box-shadow:5px 0px 5px rgba(0,0,0,.1)}
.ux-t{margin-left: -74px}

.ui-t:before{animation:blink-ui 2.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both}
/* .ux-t:before{animation-delay: .1s;} */
.ux-t:before{animation:blink-ui 2.18s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both}
.ux-t:after{animation:blink-ui 2.15s 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both}

@keyframes blink-ui{
	0% {
    transform: scale(0.5);
    opacity:1
  }
  100% {
    transform: scale(1);
    opacity:0
  }
}

.map-marker{position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd}
.map-marker img{display: block; margin: 0 auto;}

/* .customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
 */
 
#vis-txt .i3 .border span{display: block;}

.pop-ab{position: absolute; left: 0; bottom: 0; width: 100%;}
#mainVisual .pop-ab .m{display: none;}
#mainVisual .pop-ab .pc{display: block;}

.img-hover{position: relative;}
.img-grey{
  filter: saturate(0%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  transition: all 0.4s;
}
.img-filter{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(195,180,141,0.6);
  mix-blend-mode: multiply;
  transition: all 0.4s;
  opacity: 1;}
  
/* 익스ㅠ 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#vis-txt .border{color: #fff;  text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000}
}
/* works */
@media all and (min-height:1180px){
	.works-dev .logo{padding-bottom: 62.5%}
}
@media (min-width:1025px){
	#logo{transition: all ease-in-out .3s;}
	
	.img-hover:hover .img-grey{
	  filter: saturate(100%);
	  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);}
	.img-hover:hover .img-filter{opacity:0}
}

/* max-width 반응형 */
@media (max-width:1800px){
	#main-nav, .scroll-down{left: 14px; margin-left: 0;}
	#main-nav .nav .txt br{display: block;}
	
	.scroll-main{margin-left: 0; left: 14px;}
}
@media (max-width:1580px){
	#main-nav .nav .txt{font-size: 12px; margin-left: 10px;}
	
}

@media (max-width:1450px){
	#wrap.works .go_top{right: 10px; bottom: 10px}
}
@media (max-width:1280px){
	.main-refer .bg{padding-right: 1.8rem;}
	.main-refer .r{padding-top: 1.8rem;}
	#vis-txt{font-size: 100px;}
	
	
	.con-dev .txt, .bbs-news .cont{padding-left: 1.5rem;}
	
	.dev-solution .bot{padding: 1.5rem}
	
	.con-dev .txt br.m{display: none;}
	
	
}
@media (max-width:1024px){
	#cont{padding-top: 0;}
	.scroll-down,.scroll-main{display: none;}
	
	#header #logo{position: absolute;}
	
	#main-nav{width: auto; top:10rem; z-index: 151; display: none;}
	#main-nav .nav a{writing-mode: vertical-rl;}
	#main-nav .nav li{display: none; margin-top: 0;}
	#main-nav .nav li.active{display: block;}
	#main-nav .nav a{}
    #main-nav .nav .txt{margin: 10px 0 0; transform:none; position: static;}
    #main-nav .nav .active .txt{display: inline;}
    #main-nav .nav .txt br{display: none;}
    
    #main-nav .nav a strong{display: inline;}
    #main-nav .nav a strong:before{display: none;}
  
  
    .scroll-down{width: 1rem; white-space: nowrap; display: none;}
    
	#mainVisual{height: auto !important; padding: 150px 1rem 180px}
	.i3{display: block;}
	#vis-txt .border{width: 100%}
	#mainWorks{min-height: auto !important}
	#mainVisual .inner{padding: 150px 15px;}
	.inner{padding: 0 15px}
	
	#main .group{padding: 70px 0}
	
	.tit-main{margin-bottom: 29px;}
	.tit-main{margin-bottom: 25px;}
	.main-txt{margin-bottom: 50px;}
	
	#main .wheel .v{padding-top: 5.5rem;}
	
	.main-refer .sect{margin-top: 50px;}
	
	.si-dev > ul{margin-left: -5%;}
	.si-dev > ul > li{width: 45%; margin-left: 5%;}
	.si-dev .item .ico{width: 5rem}
	.si-dev .item .ico img{max-width:70%}
	
	.con-dev .txt .add{margin-top: 15px;}
	
	#vis-txt{font-size: 80px;}
	
	#vis-txt .i3_1{position: absolute; left:50%; bottom: 0;width: 2.75em; margin-left: -3em;}
	.i4{position: relative;
    padding-left: 3em;}
    .dev-solution .bot{line-height: 1.18;}
    
    .i4{margin-top: -5px;}
    
    .works-dev .logo{padding-bottom: 62.5%;}
    
    #wrap.works .go_top{width: 2.5rem; height: 2.5rem}
    
    .page-loc .info{padding: 2.5rem 1.5rem}
    .page-loc .item{margin-top: 1.5rem;}
    
    #vis-txt .border{margin-left: 0; text-align: center;}
    
	#vis-txt .i4 {text-align: left; margin: -5px 0 0; position: relative; display: inline-block;}
	#vis-txt .i4 > *{display: block !important;}
	#vis-txt .i4 .sup{position: absolute; top: 100%; margin: 5px 0 0 0.3em;}
	#vis-txt .ico{right: .5rem;
    top: 100%;
    width:1em; margin-top: -2.5rem; bottom: auto;    transform: translate(50%);}
    
    #mainWorks .bg{background:#fff !important}
    
    

}
@media (max-width:841px){
	#mainSi .tit-main .block-m2{display: block;}
	
}
@media (max-width:720px){
	.pop-ab{display: none;}
	#main .group{padding: 50px 0}
	
	.main-refer .bg{padding: 1.8rem 1.5rem 0}
	.main-refer .dev{display: block}
	.main-refer .logo img{display: block; margin: 0 auto;}
	.main-refer .small-i img{width:70px}
	.main-refer .r{max-width:none; width: 100%;}
	.main-refer .r img{margin: 0 auto;}
	
	.si-dev{text-align: center;}
	.si-dev > ul > li{padding: 1.5rem 0}
	.si-dev > ul > li,.si-dev .item > *{display: block;}
	.si-dev .item .ico{margin-bottom: 10px; width: 100%}
	.si-dev .item .ico img{display: block; margin: 0 auto; width: 67%; max-width:3.5rem}
	
	
	/* Consulting */
	.con-dev{margin: 0 0 -30px -3%;}
	.con-dev > li{width: 47%; margin: 0 0 30px 3%; display: block;}
	.con-dev .img_w{width: 100%}
	.con-dev .txt{padding: 0; margin-top: 1rem;}
	.con-dev .txt .add{display: none;}
	
	.works-dev{margin: -15px -1.5%;}
	.works-dev > li{width: 50%; padding: 15px 1.5%}
	.works-dev .logo{margin-bottom: 1rem;}
	
	.dev-solution{margin-bottom: -3%;}
	.dev-solution > li{width: 47%; margin-bottom: 3%;}
	
	select.ab{font-size: 13px; height: 35px; width: 140px}
	
    
    .m-contact{margin-top: 40px;}
    
    .bbs-news .cont{padding-left: 1.18rem;}
    
    /* .dev-solution .bot .small{font-size: 13px;} */
    .main-refer .sect{margin-top: 35px;}
    
    .m-contact{margin-top: 0;}
	
	#mainVisual, #vis-txt.normal .animated, #mainVisual #vis-txt.normal, #mainVisual #vis-txt.normal .border, #mainVisual #vis-txt.normal .i4 .sup{
		transition:none !imo
	}
	
	.tit-main.inc_sel .sel > li{height: 40px; width: 150px}
	
	#mainWorks .tit-main.inc_sel{display: block;}
	#mainWorks .tit-main.inc_sel .sel{margin-top: 18px;    justify-content: space-between; }
	#mainWorks .tit-main.inc_sel .sel > li{width: 48.5%}
    .works-dev > li.empty{display: none !important}
    
    
    #mainVisual{padding: 140px 1rem 170px}
    
    
	#vis-txt{font-size: 13vw; line-height: 1.18;}
	.i3_2{height: 13vw;line-height: 13vw;}
	#vis-txt .i1 > *{vertical-align: baseline}
	
	#vis-txt .i1_2{width: 1em}
	
    #vis-txt .i3_1 img{width: 100%}
    
    .works_more_w{margin-top: 50px;}
    #btnWorks{width: 3.18rem; height: 3.18rem}
    #btnWorks .circle_w span{width: 5px; height: 5px; margin: 0 0 0 .3rem}
    #btnWorks .circle_w span:first-child{margin-left: 0;}
    
    .page-loc .item{display: block;}
    .page-loc .item dt{width: 100%; display: block; margin-bottom: 5px; background-size:1.25rem; line-height: 1.25rem;background-position: left top; padding-left: 1.9rem;}
    .page-loc .item dt:after{background: none}
    .page-loc .ifr{padding-bottom: 50%;}
    .page-loc .info{padding: 1.5rem}
}
@media (max-width:640px){
	/* #mainUi, #mainUi2 */
	#mainUi .block-m2,#mainUi2 .block-m2{display: block}
}
@media (max-width:480px){
	.tit-main.inc_sel{align-items: center;}
	
	#mainVisual{padding: 115px 1rem 115px}
	#vis-txt .rel{display: block;}
	#vis-txt .i3_1{width: 2.5em}
	.i4{padding-left: 2.75em;}
	
	/* #main-si */
	.si-dev .block-m2{display: block;}
	
	
	.dev-solution > li{width: 97%}
	
	.bbs-news .in{display: block;}
	.bbs-news .in > *{display: block;}
	.bbs-news .img_w{width: 100%}
	.bbs-news .cont{padding-left: 0; margin-top: 1rem;}
	
	select.ab{width: 115px}
	
	.works-dev{margin: -10px -1.5%;}
	.works-dev > li{width: 100%; padding: 10px 1.5%}
	.con-dev > li{width: 97%}
		
	.tit-main{font-size: 1.67rem; letter-spacing: -0.04em;}
	
	#main .group{padding-bottom: 25px;}
	#mainWorks.group{padding-bottom: 40px;}
	
	.main-refer .bg{padding: 1.8rem 1rem}
	
	.page-loc .ifr{padding-bottom: 67%;}
}

@media (max-width:420px){
	#mainSolution .tit-mid .eng{display: block;}
}


/* work2023 추가 */
#work2023 .item{border-bottom: 1px solid #dfdfdf; word-break:keep-all; line-height: 1.35}
#work2023 .item:nth-child(n+5){display: none;}
/* #work2023 .item.no{display: none; opacity:0; transition:all ease-in-out .3s} */

#work2023 .item:first-child{border-top: 1px solid #dfdfdf;}
#work2023 .item a{display: flex; width:100%; padding: 0 45px; height: 180px; align-items:center;     justify-content: space-between; position: relative;}
#work2023 .item a > *{position: relative; z-index: 3;}
#work2023 .item .t{width:41.5%; padding-right: 50px; font-size: 1.625rem; color:#222; font-weight: 700;}
#work2023 .item .c{flex:1; display: flex; justify-content:space-between; font-size: 1.125rem; font-weight: 500; color:#999; align-items:center}
#work2023 .item .txt{flex:1; line-height: 1.5; font-weight: 500;}
#work2023 .item .date{font-size: 1.125rem; color: #bbb; font-weight: 400; margin: 0 60px;}
#work2023 .arrow{width:21px; height: 14px; background: url('../img/main/works_new/arrow.png') center center no-repeat}
#work2023 .bg_new{position: absolute !important; left: 0; top:0; width:100%; height: 100%; z-index: 1 !important; opacity:0; transition:all ease .3s; overflow: hidden;}
#work2023 .bg_new img{display: block; position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; max-width:none}

#loadWorks{display: block; width: 100%; line-height: 1; font-weight: 500; font-size: 24px; color:#999;  height: 180px; display: flex; align-items:center; justify-content:center;}
#loadWorks span{position: relative; z-index: 3}
#loadWorks:before{position: absolute; left: 0; top:0; width: 100%; height: 100%; content: ''; transition:all ease-in-out .3s}
/* #loadWorks:after{position: absolute; left: 0; top:0; width:100% ; height: 100%; content: ''; background: url('../img/main/works_new/arrow.png') calc(100% - 45px) center no-repeat; z-index: 1} */

@media (min-width:1025px){
	#work2023 a:hover .t{color:#fff}
	#work2023 a:hover .txt{color:#d9d9d9}
	#work2023 a:hover .date{color:#999}
	#work2023 a:hover .arrow{background-image: url('../img/main/works_new/arrow_on.png')}
	
	#work2023 a:hover .bg_new{opacity:1}
	#loadWorks:hover:before{background-color: #f4f4f4}	
}
@media (max-width:1280px){
	#work2023 .item a{padding: 0 30px}
	#loadWorks:after{background-position: calc(100% - 30px) center;}
}

@media (max-width:1024px){
	#work2023 .arrow{background-image: url('../img/main/works_new/arrow3X.png'); background-size:100%}
	
}
@media (max-width:720px){
	#work2023 .item a{    flex-flow: column; align-items: baseline; padding:25px 20px; height: auto}
	#loadWorks{height: 114px}
	#loadWorks:after{background-position: calc(100% - 20px) center;}
	#work2023 .item .t{width: 100%;}
	#work2023 .item .t br{display: none;}
	#work2023 .item .c{margin-top: 10px; width:100%;}
	#work2023 .item .txt br{display: none;}
	#work2023 .item .date{margin: 0 30px;}
	#work2023 .item .date{display: none;}
	
	#work2023 .item a > *{position: static}
	#work2023 .arrow{position: absolute; top:31px; right: 20px}
	
	#work2023 .item .txt{flex:auto; margin-bottom: 0; width:100%}
}
/* @media (max-width:380px){
	#work2023 .item .c{flex-wrap:wrap; align-items:baseline}
	#work2023 .item .txt{flex:auto; margin-bottom: 15px; width:100%}
	#work2023 .item .date{margin: 0;}
	
} */