@charset "utf-8";

/* 공통 - 컬러 */
.color-red{color: #d73f29}
.color-black{color: #000}
.color-white{color: #fff}

/* 공통 - bg 컬러 */
.bg-red{background: #d73f29}
.bg-red_r{border:1px solid #d73f29; color: #d73f29}
.bg-red_r2{border:1px solid #d73f29; color: #d73f29; background: #fbebe9}
.bg-black{background: #000}
.bg-black_r{border:1px solid #000; color: #000}
.bg-grey{background: #ccc}
.bg-grey_r{background: #fff; color: #999; border:1px solid #ccc}

/* 공통 - 폰트 굵기 */
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw700{font-weight: 700;}

/* 공통 - 폰트 사이즈 (기본 - 16px) */
.f13{font-size: 13px;}
.f14{font-size: 14px;}
.f15{font-size: .938rem;}
.f16{font-size: 1rem;}
.f17{font-size: 1.0634em;}
.f18{font-size: 1.125rem;}
.f20{font-size: 1.125rem;}

/* 공통 - display */
.d-f{display: flex}


/* 공통 버튼 */
.btn-more{width: 9.375rem; height: 2.813rem;  border-radius:100px; border:1px solid #666; color: #666; display: block; text-align: center; background: transparent}
.btn-more:hover,.btn-more:focus{background: #333; color: #fff}
.btn-more{transition:all ease-in-out .18s}
a.btn-more{line-height: 2.75rem;}

.bbs-recruit .btn-more{position: absolute; right: 0; top:0}

/* transition 공통  */
.si-dev .item:hover,.down-ott span{transition: all ease-in-out .15s}
#main-nav{transition: all ease-in-out .3s}
#sub-menu{transition: background ease-in-out .3s}
.btn-list,.page-team .item,.page-team .in > *,
.close-pop_t,.close-pop_t:before,.close-pop_t:after{transition: all ease-in-out .15s}

.nav_none #sub-menu{opacity:0}

/* #header{height: 150px; position: fixed; left: 50%; top:0; width: 100%; padding: 60px; z-index: 150; padding-left: 0; max-width:1760px; transform:translateX(-50%)}
 */
#header #logo{margin-left: -880px; top:60px; position: relative; width: 185px; height: 50px}
#footer .logo{margin: 0 0 0 -880px; top:0; position: absolute; left: 50%; padding: 0}
#header #logo a{display: block;width: 100%; height: 100%}
#header #logo object{position: absolute; left: 0; top:0; width: 100%; height: 100%}
#headerLine{position: fixed;top:150px; left: 50%; width: 100%; height: 1px; z-index: 3;max-width:1760px; transform:translateX(-50%); background: #ccc; transition:all ease-in-out .3s}
.fixed #headerLine{opacity:0;}

/* #header #logo{width: 185px; height: 50px}
#header #logo a{background: url('/resources/oktomato/img/common/logo.png') left top no-repeat; white-space: nowrap; overflow: hidden; text-indent: -999px} */

#header #logo,#btn-menu,#sub-menu{left: 50%; z-index: 150}
#btn-menu,#sub-menu{position: fixed}

#btn-menu{width: 2.5rem; height: 14px; margin-left: 840px; top:75px}
#btn-menu > span{position: absolute; right: 0; width: 100%; height: 2px; background: #000; top:0;}
#btn-menu > span.bot{width: calc(100% - 10px); top: auto; bottom: 0}
#sub-menu{top:150px; width: 80px; font-size: 14px; background: transparent; color: #999; border:1px solid #ccc; margin-left: 800px; height: 414px}
#sub-menu ul{height: calc(100% - 79px);     display: flex;
    flex-flow: column;
    justify-content: space-between;    padding: 25px 0;}
#sub-menu li{}
#sub-menu li a{ display: block;writing-mode: tb-rl; line-height: 80px; position: relative;}
#sub-menu li a:hover,#sub-menu li a:focus,#sub-menu .active li a{color: #111}
#sub-menu li a:hover:after,
#sub-menu li a:focus:after,
#sub-menu .active a:after{left: -1px; top:50%; width: 2px; height: 30px; background: #d73f29; content: ''; margin-top: -15px; position: absolute;}

.down-ott{border-top: 1px solid #ccc; width: 100%; height: 79px; display: block; transition:all ease-in-out .3s; position: relative; text-align: center;}
.down-ott:hover{background: #d73f29 url('') center center no-repeat !important;}
.down-ott .txt{opacity:0; color: #fff; line-height: 1.15; left: 0; bottom: -5px; width: 100%; font-size: 13px;}
.down-ott:hover .txt{opacity:1; bottom: 7px}
.down-ott span{position: absolute;}
.down-ott:hover .ico{margin-top: -15px; background-image: url('../img/common/btn-down_on.png')}
.down-ott .ico{background: url('../img/common/btn-down.png') center center no-repeat; width: 100%; height: 23px;display: block; margin: 0 auto; top:50%; transform:translateY(-50%)}
.sub .down-ott .ico{background: url('../img/common/btn-down_on.png') center center no-repeat;}
.sub #sub-menu li a:hover,.sub #sub-menu li a:focus{color: #d73f29}
.img-auto{margin: 0 auto; display: block;}


/* 불릿 스타일 */
.bul-dash > li,.bul-dash > dd{position: relative; padding-left: .67em; margin-top: .55em;}
.bul-dash > li:before,.bul-dash > dd:before{position: absolute; left: 0; top:0; content: '-'}

.bul-decimal{margin-left: 1.3em;}
.bul-decimal > li{list-style:decimal; margin-top: 10px;}

.bul-no > li{position: relative; padding-left: 1.45em; margin-top: 10px;}
.bul-no .no{position: absolute; left: 0; top:0}

.bul-mark > li,.bul-mark.b{position: relative; padding-left: .95em; margin-top: .3em;}
.bul-mark > li:before,.bul-mark.b:before{position: absolute; left: 0; top:0; content: '※'}

.bul-dash > li:first-child,.bul-decimal > li:first-child,.bul-no > li:first-child,.bul-mark > li:first-child{margin-top: 0;}

.bul-dot > li,.bul-dot > dd{position: relative;padding-left: .74em;margin-top: .3em;}
.bul-dot > li:before,.bul-dot > dd:before{position: absolute;left: 0;top:.7em;width: 3px;height: 3px;;content: '';background: #d73f29}
.bul-dot > li:first-child{margin-top: 0}


#footer{position: relative; border-top: 1px solid #ccc; padding: 95px 0 100px;}
#footer .rel{position: relative;}
/* #footer .logo{position: absolute; left: 80px; top:0} */
#footer .go_top{position: absolute; left: 50%; top:-1px; border:1px solid #ccc; background: rgba(255,255,255,.4) url('../img/common/go_top.png') center center no-repeat; width: 80px; height: 80px; z-index: 151; margin-left: 620px}
#footer .top{margin-bottom: 50px; display: flex; flex-wrap:wrap}
#footer .top li{font-size: 0; display: inline-block; font-size: 1.125rem; font-weight: 700; color: #333; margin-right: 55px;}
#footer .top li:last-child{margin-right: 0;}

.foot_info{display: flex; font-size: 14px;     flex-wrap: wrap;    justify-content: space-between; letter-spacing: -0.03em; font-weight: 400; word-break:keep-all}
.foot_info .l{flex:1}
.foot_info span{position: relative; display: inline-block; margin-right: 1em; padding-right: 1em;}
.foot_info span:last-child{margin-right: 0; padding-right: 0;}
.foot_info span:after{width: 1px; height: 12px; background: #999; content: ''; margin-top: -6px; right: 0; position: absolute; top:50%}
.foot_info span:last-child:after{background: none}
.foot_info .etc li{margin-top: 5px;}
.foot_info .etc li:first-child{margin-top: 0;}
.foot_info dl{margin-top: 30px;}
.foot_info dl:first-child{margin-top: 0;}
.foot_info dt{font-weight: 700; margin-bottom: 10px; line-height: 1; letter-spacing: 0;}
.foot_info .r{margin-left: 30px;}

.foot_info .link{margin-top: 30px; color: #444; font-size: 0;}
.foot_info .link span{font-size: 14px;}
.foot_info .link span:first-child{font-weight: 500;}
#footer .copy{margin-top: 70px; color: #999; font-weight: 400;}


.tit-main{font-size: 1.875rem; font-weight: 700; color: #000; margin-bottom: 50px; line-height: 1.15;}
.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;}

.tit-st1{font-size: 1.875rem; font-weight: 700; color: #000; line-height: 1.15; display: inline; box-shadow: inset 0 -10px 0 rgba(215,63,41,.4);}
.tit-st1:after{display: block; position: relative; content: ''; margin-bottom: 50px}
.tit-st2{padding-left: 1rem; font-size: 1.5rem; color: #333; line-height: 1.15; font-weight: 500; margin-bottom: 35px; position: relative; letter-spacing: -0.07em; position: relative;}
.tit-st2:before{position: absolute; left: 0 ;top: .24em; width: .35rem; height: 1rem; background: #999; content: ''; border-radius:10px;;}

.m-contact .effect_w{overflow: hidden; position: relative;}
.m-contact{margin-top: 95px; padding: 95px 0; border-top: 1px solid #ccc; line-height: 1.35;}
/* .m-contact .more{font-size: 14px; border:1px solid #666; width: 9.375rem; height: 2.813rem; line-height: 2.750rem; border-radius:100px; text-align: center;} */
.m-contact .box{border:5px solid #f4f4f4; padding: 50px}
.m-contact .dev{display: flex; justify-content:center; align-items:center; letter-spacing: -0.03em;}
.m-contact .l{font-size: 40px; font-weight: 900; letter-spacing: -0.03em;}
.m-contact .r{color: #999; font-size: 1.25rem; font-weight: 400; position: relative; padding-left: 50px; margin-left: 50px; letter-spacing: -0.07em;}
.m-contact .r:before{position: absolute; left: 0; top:50%; width: 1px; height: 2em; margin-top: -1em;; background: #ccc; content: ''}
.m-contact .con-txt{font-size: 14px; font-weight: 400; color: #444; line-height: 1.67; padding-right: 180px; margin-bottom: 70px;} /* margin-bottom: 70px; */

.m-contact .slide-up{transform: translateY(200%); transition: all cubic-bezier(.215,.61,.355,1) 1s;}
.m-contact .on .slide-up{transform: translateY(0);}

.rel{position: relative;}
.rel .ab{position: absolute; right: 0; top:0}
select.ab{width: 200px; height: 45px; font-size: 14px; color: #999;}

#sitemap{position: fixed; left: 0; top:0; width: 100%; height: 100%; background: #fff; z-index: 155; padding: 60px 0; display: none}
#sitemap:before{position: absolute; left: 50%; top:0; width: 1px; height: 100%; content: ''; border-right:1px solid #ccc; content: ''}
#sitemap .in{position: relative; height: 100%; padding-top: 115px;}
#sitemap .top{position: absolute; height: 70px; top:0; left: 0; width: 100%; display: flex;    align-items: baseline; justify-content:space-between; max-width:1760px; left: 50%; transform:translateX(-50%)}
#sitemap .top a{display: block; height: 100%}
#sitemap .close{width:50px;height: 50px; position: relative;}
#sitemap .close:before, #sitemap .close:after {position: absolute;left: 50%;content:' ';height: 100%;width: 2px;background-color: #000; margin-left: -1px; top:0}
#sitemap .close:before {transform: rotate(45deg);}
#sitemap .close:after {transform: rotate(-45deg);}
#sitemap .bot{max-width:1400px; margin: 0 auto; height:100%;  overflow-y: auto;}
#sitemap .all_menu{display: flex; line-height: 1;}
#sitemap .all_menu > li{width: 50%}
#sitemap .l{font-size: 48px; font-weight: 700; color: #111; line-height: 1.15;}
#sitemap .l li{margin-top: 1em;}
#sitemap .l li:first-child{margin-top: 0;}
#sitemap .l button:hover,#sitemap .l button:focus{text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000; color: #fff}
#sitemap .l button{display: block; position: relative;}
#sitemap .l button:before{position: absolute; left:0 ; top:50%; width: 3.250rem; height: 1.625rem; content: ''; background: url('../img/common/sitemap_hover.png') left top no-repeat; background-size:100%; transform:translateY(-50%); opacity:0; left:-4.375rem; background-size:100%}
#sitemap .l button,
#sitemap .l button:before,
#sitemap .menu_sub a{transition:all ease-in-out .4s}
#sitemap .l button:hover,#sitemap .l button:focus{padding-left: 4.375rem}
#sitemap .l button:hover:before,#sitemap .l button:focus:before{opacity:1; left: 0}
#sitemap .r{padding: 0 0 0 70px;}
#sitemap .menu_sub{font-weight: 700; font-size: 1.25rem; color: #333}
#sitemap .menu_sub > li > a{display: inline-block; position: relative; padding: 12px 0; transition: top .3s ease; top:0}
#sitemap .menu_sub > li >  a:hover span,#sitemap .menu_sub > li >  a:focus span{border-bottom: 1px solid #000;}
#sitemap .menu_sub > li >  a:hover,#sitemap .menu_sub > li >  a:focus{top:-5px}
#sitemap .tomato_det{font-size: 14px; line-height: 1.15; margin-top: 50px;}
#sitemap .tomato_det dl{margin-bottom: 30px;}
#sitemap .tomato_det dt{font-weight: 700; margin-bottom: 10px;}
#sitemap .tomato_det dd{letter-spacing: -0.03em; line-height: 1.5;}
#sitemap .tomato_det span{position: relative; display: inline-block; margin-right: 1em; padding-right: 1em; display: inline-block; margin-bottom: 10px;}
#sitemap .tomato_det span:last-child{margin-right: 0; padding-right: 0;}
#sitemap .tomato_det span:after{width: 1px; height: 12px; background: #999; content: ''; margin-top: -6px; right: 0; position: absolute; top:50%}
#sitemap .tomato_det span:last-child:after{background: none}
#sitemap .copy{margin-top: 35px; color: #999; letter-spacing: 0;}
#sitemap .copy_m{display: none;}

#sitemap .tomato_det .link,#sitemap .tomato_det dl{font-size: 0;}
#sitemap .tomato_det dt,
#sitemap .tomato_det dd,
#sitemap .tomato_det span{font-size: 14px;}
#sitemap .address{word-break:keep-all}


#sitemap .menu_main{display: flex; height: calc(100% - 8px); flex-flow: column; justify-content: space-between; margin-top: 8px;}

#sitemap .link{line-height: 1; color: #444; font-size: 0; margin-bottom: 35px;}
#sitemap .top .link{position: absolute; right: 100px; top: 50%; transform: translateY(-50%); }
#sitemap .link span{font-size: 14px; position: relative; padding-right: 1em; margin-right: 1em; display: inline-block;}
#sitemap .link span:first-child{font-weight: 500;}
#sitemap .link span:last-child{margin-right: 0; padding-right: 0;}
#sitemap .link span:after{width: 1px; height: 12px; background: #999; content: ''; margin-top: -6px; right: 0; position: absolute; top:50%}
#sitemap .link span:last-child:after{background: none}
#sitemap .link a:hover,#sitemap .link a:focus{border-bottom: 1px solid #999;}

#sitemap .menu_sub .dep_w{display: flex; align-items:center;}
#sitemap .menu_sub .dep_w > a{width: 130px}
/* .menu_sub > li:not(:first-child) .dep{display: none;} */
.menu_sub .dep{display: flex; font-size: 14px; font-weight: 400; letter-spacing: -0.03em; flex-wrap:wrap; margin-bottom: -10px;}
.menu_sub .dep li{margin: 0 35px 10px 0;}
.menu_sub .dep li:last-child{margin-right: 0;}
.menu_sub .dep a{position: relative; line-height: 1.15; padding-bottom: 5px;}
.menu_sub .dep a:after{position: absolute; left: 0; bottom: 0; width: 0; height: 1px; content: ''; background: #d73f29; transition:all ease-in-out .3s}
.menu_sub .dep a:hover,.menu_sub .dep a:focus{color: #d73f29}
.menu_sub .dep a:hover:after,.menu_sub .dep a:focus:after{width: 100%}

#footer a{position: relative;}
#footer a:before{position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: #333; content: ''; transition:all ease-in-out .3s}
#footer a:hover:before{width: 100%}

.btn-acc{position:absolute;top:-999px;right:0px; background: #333; color: #fff; padding: 10px 15px; font-size: 14px;}
.btn-acc:focus,.btn-acc:active{top:0px;}

/* 익스ㅠ 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#sub-menu{font-size: 0 !important;}
	#sub-menu a{display: inline-block !important; font-size: 14px !important}
}

.page-load_w{position: fixed; left: 0; top: 0;  width: 100%; height: 100%;  z-index: 151; background: rgba(255,255,255,.75)}
.page-load{position: fixed; left: 50%; top: 50%;  transform: translate(-50%,-50%);}
.page-load .ring{
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  border: 4px solid rgba(215,63,41,.75);
  border-radius: 100%;
}

.page-load .holder {
  position: absolute;
  width: 12px;
  height: 45px;
  left: 17px;
  top: 0px;
  animation: loadAni 1.3s linear infinite;
}

.page-load .circle {
  position: absolute;
  top: -11px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: rgba(215,63,41,1);
}

@keyframes loadAni {
  0 {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading #cursor{display: block;}
#cursor{
position: absolute;
  top: 0;
  left: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 3px solid rgba(215,63,41,.5);
  border-top-color: rgba(215,63,41,1);
  z-index: 300;
  animation: spin .9s linear infinite; display: none;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* #subVisual{top:15px; opacity:0} */
.sub-t .t,.sub-t .add,#sub-tabs,.sub #sub-menu{opacity:0}
.sub-t .t{top:10px}
.sub-t .add{top:10px}
.sub-t .t, .sub-t .add{position: relative;}
#sub-tabs{bottom:-30px}

/* .go_top{transition:opacity 1s ease; opacity:0}
.go_top.on{opacity:1} */