@charset 'utf-8';
@import url(font.css);

/* reset */
html.is-popup {height: 100vh;overflow: hidden;}
html, body { width: 100%; padding: 0; margin:0; font-size: 10px; } 
html, body { -webkit-touch-callout: none; -webkit-user-select-: none; -webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } 
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; } 
fieldset,img { border: 0 none; vertical-align: middle; } 
dl,ul,ol,menu,li { list-style: none; } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
blockquote,q { quotes: none; } 
blockquote:before,blockquote:after,q:before,q:after { content:''; content: none; } 
input,select,textarea,button { border-radius:0; vertical-align: middle; } 
input, textarea, button {appearance:none; -moz-appearance:none; -webkit-appearance:none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
input::-ms-clear { display: none; } 
button { border:0 none; background-color: transparent; cursor: pointer;} 
body,th,td,input,select,textarea,button { font-size: 13px; line-height: 1.5; font-family:'Pretendard',sans-serif; color: #333; } 
address,caption,cite,code,dfn,em,var { font-style: normal; font-weight: normal; } 

table {width: 100%; padding: 0; margin: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all; background-image: none; }

.blind, caption { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; } 

a { color: #222; text-decoration: none; } 
a:hover { color:#222; text-decoration: none; } 
a:active { background-color: transparent; } 

/* font color */
.fc_red {color:#ff0000 !important; }
.fc_blue {color:#3366cc !important; }
.fc_gray {color:#767676 !important; }
.fc_black {color:#000 !important; }
.fc_white {color:#fff !important; }

/* text align */
.txtL {text-align: left !important; }
.txtR {text-align: right !important; }
.txtC {text-align: center !important; }

/* vertical align */
.vt {vertical-align: top !important; }
.vm {vertical-align: middle !important; }
.vb {vertical-align: bottom !important; }

/* float */
.fl {float: left !important; }
.fr {float: right !important; }

/* etc */
.mobr { display: none; } 
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* common */
.wrap { width: 100%; height: auto; } 
.contents { width: 100%; height: auto; } 
.incont { position: relative; width: auto; max-width: 1200px; margin: 0 auto; }
.title{font-size:48px;font-weight:800} 
.fuzTxtCircle {position:absolute; width:160px; height:160px; background:url(../img/main/fuz_txt_circle.png) no-repeat center center; animation: fuzTxtAni 7s infinite linear;} 

.wrap {
    /* overflow-x: hidden; */
    position: relative;
  }
.wrap .down-brochure {
position: fixed;
top: 50px;
right: 156.5px;
z-index: 100;
}
.wrap .down-brochure img {
    -webkit-animation: brochure 7s linear infinite;
    animation: brochure 7s linear infinite;
}
@-webkit-keyframes brochure {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes brochure {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.brochure.red:after {
    background: url(../img/sub/brochure_arr_red.png) no-repeat 0 center/28px 28px;
}
.brochure {
    position: relative;
}
.brochure:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -14px;
    margin-left: -14px;
    content: '';
    width: 28px;
    height: 28px;
    background: url(../img/sub/brochure_arr.png) no-repeat 0 center/28px 28px;
}

/* header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    /*   background: #fff; */
}
.header.scrOn {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.innerHeader {
    height: 148px;
    margin: 0 106px;
    background: transparent;
    padding: 50px 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.innerHeader .logo {
    width: 70px;
    height: 48px;
    background: url(../images/logo.svg) no-repeat left center;
}
.innerHeader .logo .link-home {
    display: block;
}
.innerHeader .gnb {
    /* font-family: "Pretendard-ExtraBold"; */
    font-weight: 800;
}

.innerHeader .gnb .menu-list {
    display: flex;
    align-items: center;
}
.innerHeader .gnb .menu-list li {
    padding: 0 24px;
    text-align: center;
    position: relative;
    padding-bottom: 0;
    font-size: 22px;
}
.main .innerHeader .gnb .menu-list li a {
    color: #fff;
    font-size: 22px;
}
.main.scr_on .innerHeader .gnb .menu-list li a {
    color: #000;
}
.innerHeader .gnb .menu-list li:hover::after {
    display: none;
    content: '';
    position: absolute;
    background-image: url(../img/header_hover_icon.png);
    width: 7px;
    height: 7px;
    top: -10px;
    transform: translateX(-50%);
    left: 50%;
    display: block;
}



header { width: 100%; position: fixed; z-index: 100; } 
/* header .innerHeader { height: 149px; margin: 0 106px; padding:50px 0; background: transparent; box-sizing: border-box; position:relative;}  */
header .innerHeader .logo { float: left; width: 68px; height: 24px; background:url(../img/logo_red.png) no-repeat left center !important;background-size:68px auto !important; } 
header.main .innerHeader .logo {  width: 68px; height: 24px;background:url(../img/logo.png) no-repeat left center !important;background-size:68px auto !important; } 
header.main.scr_on .innerHeader .logo {background:url(../img/logo_red.png) no-repeat left center !important;background-size:68px auto !important; }
header .innerHeader .logo a { display: block; position: relative; width: 100%; height: 100%; } 
header .link-brochure {float: right;padding: 0 24px;height: 49px;border: 1px solid #fff;border-radius: 24.5px;color: #fff;font-size: 18px;text-align: center;display: flex;align-items: center;justify-content: center;box-sizing: border-box;}
header .link-brochure .txt,
header .link-brochure .ico-down {display: inline-flex;vertical-align: top;}
header .link-brochure .ico-down {text-indent: -9999em;width: 16px;height: 16px;background: url(../img/main/ico_down.svg) no-repeat 0 0 / 16px 16px;margin-left: 8px;}


/* header .menuOpen .mn{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:40px;height:18px}
header .menuOpen i{position:absolute;left:0;display:block;width:100%;height:4px;background-color:#000;transition:all 0.3s ease-in-out}
header .menuOpen i:nth-child(1){top:0}
header .menuOpen i:nth-child(2){top:14px;width:75%}
header .menuOpen:hover i:nth-child(2){width:100%}
header .menuOpen.on{transform:rotate(45deg)}
header .menuOpen.on i{width:40px;background-color:#fff}
header .menuOpen.on i:nth-child(1){top:50%;left:0}
header .menuOpen.on i:nth-child(2){top:50%;left:0;transform:rotate(90deg)} */
#new-gnb {position: absolute;top: 0;left: 50%;transform: translateX(-50%);margin-top: 50px;white-space: nowrap;}
#new-gnb > li {display: inline-block;}
#new-gnb > li > a {display: block;color: #fff;font-size: 22px;font-weight: 800;padding: 0 24px;line-height: 49px;}

header.main .menuOpen i{background-color:#fff}
header.main.scr_on .menuOpen i{background-color:#000}
header.main.scr_on .menuOpen.on i{background-color:#fff}
/* header.scr_on .meunOpen.on, header.main.scr_on .meunOpen.on{top:50px} */

header.scr_on { background: rgba(255, 255, 255, 0.7); } 
header.scr_on:before { position: absolute; top: 0; left: 0; content: "";  width: 100%; height: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: hsla(0,0%,100%,.7); } 
header.scr_on .innerHeader { position: relative; height: 90px; /* line-height: 48px;  */padding:21px 0;} 
header.scr_on .logo, header.main.scr_on .logo { background: url(../img/logo_red.png) no-repeat left center !important;background-size:68px auto !important; } 
header.scr_on #new-gnb {margin-top: 21px;}
header.scr_on #new-gnb > li > a {color: #000;}
header.scr_on .link-brochure {border-color: #000;}
header.scr_on .link-brochure .txt {color: #000;}
header.scr_on .link-brochure .ico-down {background-image: url(../img/main/ico_down_b.svg);}

/* headerBottom */
.headerBottom { position: fixed; bottom: 0; left: 0; width:100%; line-height: 88px; background: #222; } 
.headerBottom .innerHeader { height:88px; line-height: 48px; padding:20px 0;letter-spacing:0;
    justify-content:space-between;align-items:center; 
    display:flex; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; 
    -webkit-box-align:center; -webkit-flex-align:center; -ms-flex-align:center; -webkit-align-items:center;
    -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify;
}
header.scr_on .headerBottom .innerHeader { height: 88px; line-height: inherit; padding:20px 0;}
.headerBottom .with span.text_bg { display:inline-block;width:248px;height:62px;line-height:69px;background:url(../img/main/text_bg.png) no-repeat left top; background-size: 100% auto;font-size:18px;color: #fff;padding-left:40px;box-sizing:border-box;vertical-align:top;animation:blink 5s 1.5s infinite}
.headerBottom .with{position:relative;top:-20px}
.headerBottom .with .img{display:inline-block;animation:swing 2s infinite linear}
.headerBottom .menu {font-size:0;}
.headerBottom .menu li { display:inline-block;position:relative;padding:0 16px 0 24px}
.headerBottom .menu li a{padding-right:24px;font-size:18px;font-weight:800;color:#fff;letter-spacing:0;background-repeat:no-repeat;background-position:right 2px}
.headerBottom .menu li:nth-child(1) a{background-image:url(../img/main/ico_newletter.png)}
.headerBottom .menu li:nth-child(2) a{background-image:url(../img/main/ico_inq.png)}
.headerBottom .menu li:nth-child(3) a{background-image:url(../img/main/ico_down.png)}
.headerBottom .menu li + li:before { display:block;position:absolute;top:50%;left:-1px;content:'';width:1px;height:12px;margin-top:-7px;border-right:1px solid rgba(255, 255, 255, .3)} 
.headerBottom .menu li:last-child { padding-right: 0; } 
.down { background-color:rgba(0,0,0,.8); -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; transition-duration:0.4s; transition-timing-function:ease; }

@keyframes swing {
    0% {transform:rotate(0deg)}
    25% {transform:rotate(-5deg)}
    50% {transform:rotate(5deg)}
    75% {transform:rotate(-5deg)}
    100% {transform:rotate(0deg)}
}
@keyframes blink { 
    0%, 6%, 12%, to {opacity:1} 
    3%, 9% {opacity:0}
}

/* gnb */
.gnb_mobile {display: none; padding: 70px 100px; width: 100%; height: 100vh; background: #000; color: #666; z-index: 200; position: fixed; top: 0; right: -100%; box-sizing: border-box; transition: all 0.8s; } 
.gnb_mobile.on { right: 0; transition: all 0.8s; } 
.gnb_mobile .gnb_logo { position: absolute; top: 62px; left: 106px; width: 68px; height: 24px; } 
.gnb_mobile .close { position: absolute; top: 50px; right: 106px; width: 48px; height: 48px; background: url(../img/btn_gnb_close.png) no-repeat center center } 
/*
.gnb_mobile ul { position: relative; top: 50%; max-width:1200px; margin: -250px auto 0; } 
.gnb_mobile ul li { width: 100%; height: 156px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.gnb_mobile ul li:last-child { border-bottom: 0; }
.gnb_mobile ul li a { display: block; position: relative; width: 100%; height: 100%; box-sizing: border-box; } */
.gnb_mobile ul li strong { position: relative; display:inline-block; height: 156px; line-height: 156px; color: #fff; font-size: 84px; font-weight: 600;  transition: all 0.3s ease; }
.gnb_mobile ul li strong:before { display: none; position: absolute; top: 50%; left: -64px; margin-top: -16px; content: ''; width: 32px; height: 32px; background: url(../img/ico_gnb_m.png) no-repeat 0 center/16px 16px; }
/* .gnb_mobile ul li span { float: right; display: block; line-height: 156px; color: #fff; font-size: 18px; font-weight: 400; opacity: 0.55; text-shadow: 0px 0px 0px; } */
.gnb_mobile ul li a:hover strong { padding-left: 64px; color: #000;}
.gnb_mobile ul li a:hover strong:before { display: block; left: 0; } 

.gnb_mobile ul li a.is-active strong {position: relative; padding-left: 28px; color: #ff0d38;}
.gnb_mobile ul li a.is-active strong:before {display: block; position: absolute; top: 50%; left: 0 ;margin-top: -18px; content: ''; width: 32px; height: 32px; background: url(../img/ico_gnb_m.png) no-repeat 0 center/16px 16px; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    /* gnb menu icon position & text stroke fix  */
    .gnb_mobile ul li strong { line-height: 186px; }
    .gnb_mobile ul li a { display: block; position: relative; width: 100%; height: 100%; box-sizing: border-box; } 
    .gnb_mobile ul li a:hover strong { text-shadow: -1px -1px 0px #ff0d38, 1px -1px 0px #ff0d38, -1px 1px 0px #ff0d38, 1px 1px 0px #ff0d38; }
}
.gnb_mobile .wave_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.gnb_mobile.on .wave_bg_big { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_gnb_big.svg) no-repeat center center; transform: scale(1,1); opacity: 0; transform-origin: 50% 48%; animation: 9s drift 2000ms infinite linear; }
.gnb_mobile.on .wave_bg_medium { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_gnb_medium.svg) no-repeat center center; transform: scale(1,1); opacity: 0; transform-origin: 50% 48%; animation: 9s drift 1000ms infinite linear; }
.gnb_mobile.on .wave_bg_small { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_gnb_small.svg) no-repeat center center; transform: scale(1,1); opacity: 0; transform-origin: 50% 48%; animation: 9s drift 0ms infinite linear; }

@keyframes drift {
    10% {
        opacity: .5;
    }
    50% {
        -webkit-transform: scale(1.33,1.33);
        transform: scale(1.33,1.33);
    }
    90% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.66,1.66);
        transform: scale(1.66,1.66);
        opacity: 0.5;
    }
}

/* footer */
footer { width:100%;background-color:#ff0d38;letter-spacing:0} 
footer .symbol { padding: 40px 0 60px; margin:0 106px;font-size:14px;line-height:21px;color:#fff;background:url(../img/symbol.png) no-repeat right 40px} 
footer.main .symbol { margin: 0 106px 88px; } 
footer .symbol p {margin-top:13px;font-size:12px;color:#feb0b0} 
footer address span + span{margin-left:5px}

/* project */
.project { color: #000; padding: 190px 0; max-width:1200px; margin: 0 auto} 
.project * { position:relative; z-index: 1; } 
.project .top { font-size: 18px; line-height: 28px; color: #666; text-align: center; display:block; margin-bottom: 14px; } 
.project .title { font-size: 48px; line-height: 68px; text-align: center; letter-spacing: -2px; font-weight: 800 } 
.project ul { width: 100%; padding: 88px 0 0; } 
.project ul li, .project.work ul li a { display: flex; justify-content: flex-start; align-items: center; width: 100%; height:152px; margin-right: 30px; border-bottom:1px solid #000; cursor: pointer; transition: all .5s ease-out;box-sizing: border-box; } 
.project ul li:first-child { border-top:1px solid #000; } 
.project ul li.cli01 { background: linear-gradient(to right, #ff0d38 50%, rgba(255, 255, 255, 0) 50%); background-size: 200% 100%; background-position: right bottom; } 
.project ul li.cli02 { background: linear-gradient(to right, #111111 50%, rgba(255, 255, 255, 0) 50%); background-size: 200% 100%; background-position: right bottom; } 
.project ul li.cli03 { background: linear-gradient(to right, #b6b9bf 50%, rgba(255, 255, 255, 0) 50%); background-size: 200% 100%; background-position: right bottom; } 
.project ul li.cli04 { background: linear-gradient(to right, #ff0d38 50%, rgba(255, 255, 255, 0) 50%); background-size: 200% 100%; background-position: right bottom; } 
.project ul li.cli01:hover { border-top: 1px solid #ff0d38; border-bottom: 1px solid #ff0d38 !important; } 
.project ul li.cli02:hover { border-bottom: 1px solid #111 !important; } 
.project ul li.cli03:hover { border-bottom: 1px solid #b6b9bf !important; } 
.project ul li.cli04:hover { border-bottom: 1px solid #ff0d38 !important; } 
.project ul li.cli01:hover .no, .project ul li.cli01:hover .hashtag { color: #ff0d38 }
.project ul li.cli02:hover .no, .project ul li.cli02:hover .hashtag { color: #111 }
.project ul li.cli03:hover .no, .project ul li.cli03:hover .hashtag { color: #b6b9bf }
.project ul li.cli04:hover .no, .project ul li.cli04:hover .hashtag { color: #ff0d38 }
.project ul li div { display: block; position: relative; top: 0; bottom: 0; right: 0; } 
.project ul li .no { width: 172px; height: 72px; line-height: 72px; color:#fff; font-size: 48px; font-weight: 900; letter-spacing: 0; -webkit-text-stroke: 1px #000; } 
.project ul li .cli_ci { width: 210px; height: 48px; } 
.project ul li .cli_txt { width: 338px; line-height:28px; color: #333; font-size:18px; } 
.project ul li .cli_txt span { display: inline-block; width:100%; height: 36px; line-height: 36px; color: #000; font-size: 24px; font-weight: 800; margin-bottom:8px; } 
.project ul li .hashtag { width: 480px;line-height:50px;color:#fff; font-size: 48px; font-weight: 900; letter-spacing: 0; -webkit-text-stroke: 1px #222; text-align: right; } 
.project ul li .over_swap { visibility: hidden; position: relative; object-fit: contain; opacity: 0; } 
.project ul li:hover .no { left: 40px; -webkit-text-stroke: 1px #fff; } 
.project ul li:hover .cli_txt, .project ul li:hover .cli_txt span { color: #fff; transition:all .75s ease; } 
.project ul li:hover .hashtag { right: 40px; -webkit-text-stroke: 1px #fff; }
.project ul li:hover { background-position: left bottom; } 
.project ul li:hover .over_swap { visibility: visible; opacity: 1; transition: opacity 1.5 linear; } 
.project ul li:hover img:first-child { display: none; transition: opacity 1.5 linear; } 
.project .click_mask { display: none; } 

/* ie11 fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    .project ul li .no, .project ul li .hashtag  { line-height: 88px; text-shadow: -1px -1px 0px #222, 1px -1px 0px #222, -1px 1px 0px #222, 1px 1px 0px #222; } 
    .project ul li:hover .no, .project ul li:hover .hashtag  { line-height: 88px; text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, 1px 1px 0px #fff; }
    .project ul li.cli01, .project ul li.cli02, .project ul li.cli03{background-size:201% 100%}
}

/* business */
.business { max-width:1280px; margin: 0 auto; padding: 190px 0; } 
.business * { position:relative; z-index: 1; } 
.business .top, .experience .top, .our .top { font-size: 18px; line-height: 28px; color: #666; font-weight: bold; } 
.business .title, .experience .title, .our .title { line-height: 64px; padding-top: 24px; } 
.business .top, .business .title { margin-left:40px; } 
.business ul {padding:0 40px;display:flex;flex-wrap:wrap} 
.business ul li { padding-top: 85px;float: left; width: 380px; margin-right: 30px} 
.business ul li:nth-child(3n) { margin-right: 0; } 
.business ul li .action { display:block; height:250px; border: 1px solid #ddd; text-align: center; line-height: 250px; position:relative; cursor: pointer; } 
.business ul li .icons { position: absolute; top: 75px; left: 140px; } 
.business ul li .cir,.business ul li .cir2, .business ul li .cir3 { display: block; width:100px; height: 100px; position: absolute; top: 75px; left: 140px; transition: all 1s } 
.business ul li .action01 { position: absolute; top: 4px; left: 22px; z-index:3; width:54px; height:54px; border: 1px solid #000; border-radius: 50%; background: #000 } 
.business ul li .action02 { position: absolute; top: 42px; left: 2px; z-index:2; width:54px; height:54px; border: 1px solid #ff0d38; border-radius: 50%; background: #ff0d38 } 
.business ul li .action03 { position: absolute; top: 42px; left: 44px; z-index:1; transition: all 1s; width:54px; height:54px; border: 1px solid #ddd; border-radius: 50%; background: #ddd } 
.business ul li .action:hover { background: #ff0d38 } 
.business ul li .action.black:hover { background: #000 } 
.business ul li .action:hover .cir { animation: rotate 1s ease; } 
.business ul li .action:hover .action01 { animation: cir 1.5s ease; animation-delay: 1s; } 
.business ul li .action:hover .action02 { animation: cir2 1.5s ease; border: 1px solid #fff; background: #fff; animation-delay: 1s } 
.business ul li .action:hover .action03 { animation: cir3 1.5s ease; animation-delay: 1s } 
.business .otc { opacity: 0; transition: all .5s; position: absolute; top: -10px; left: 0; } 
.business .otc img { width:100%; } 
.business ul li.clnsultion .action:hover .otc, .business ul li.planning .action:hover .otc, .business ul li.design .action:hover .otc, .business ul li.interaction .action:hover .otc, .business ul li.development .action:hover .otc, .business ul li.management .action:hover .otc { animation: motion .1s ease both; transition: all 1s } 
.business ul li.clnsultion .action:hover .otc, .business ul li.clnsultion .action:hover .otc,.business ul li.development .action:hover .otc { animation-delay: 2s; } 
.business ul li .icon { position: absolute; top: 75px; left: 140px; } 
.business ul li.design .icon01 { position: absolute; top: 108px; left: 166px; } 
.business ul li.design .action:hover .icon01 { animation: scale 1s ease infinite } 
.business ul li.design .action:hover .otc { animation-delay: 1s; } 
.business ul li.management .action .animation { position: absolute; top: 154px; left: 145px; background: url(../img/main/man_motion03.png) no-repeat; width:90px; height:14px; } 
.business ul li.management .action:hover .animation { background: url(../img/main/man_motion02.png) no-repeat; top: 115px; animation-delay: 3s; animation: write 3s ease both; z-index: 10; } 
.business ul li.management .action .motion04 { position:absolute; top:50%; left:50%; margin: -5px 0 0 -44px; opacity: 0; } 
.business ul li.management .action .motion05 { position:absolute; top:50%; left:50%; margin: 19px 0 0 -44px; opacity: 0; } 
.business ul li.management .action:hover .motion04 { position:absolute; top:50%; left:50%; margin: -5px 0 0 -44px; opacity: 1; animation: write1 0.5s ease both; } 
.business ul li.management .action:hover .motion05 { position:absolute; top:50%; left:50%; margin: 19px 0 0 -44px; opacity: 1; animation: write2 1.5s ease both; }
.business ul li .text { width:100%; padding: 24px 0 5px; color: #000;box-sizing:border-box;letter-spacing:0} 
.business ul li .text .tit { font-size: 24px; font-weight: bold; } 
.business ul li .text .tit + p{padding-right:10px;}
.business ul li .text p { font-size: 18px; line-height: 28px; color: #333; padding-top: 13px;}
.business ul li .text p .mobr { display:block}  
.business ul li.development .action .icons div { display: block; margin-bottom: 5px; width:90px; height:26px; } 
.business ul li.development .action .icons .animation1 { background: url(../img/main/deve_motion01.png) } 
.business ul li.development .action .icons .animation2 { background: url(../img/main/deve_motion02.png) } 
.business ul li.development .action .icons .animation3 { background: url(../img/main/deve_motion03.png) } 
.business ul li.development .action:hover .icons .animation2 { background: url(../img/main/deve_motion04.png) } 
.business ul li.development .action:hover .icons .animation1 { animation: loll 2s ease-in both; animation-delay: .5s } 
.business ul li.development .action:hover .icons .animation3 { animation: loll2 2s ease-in both; } 
p.typing-txt, p.typing-txt2, p.typing-txt3 { opacity:0; display: inline-block } 
.business ul li.management .action:hover p.typing-txt,.business ul li.management .action:hover p.typing-txt2,.business ul li.management .action:hover p.typing-txt3 { position: absolute; display: inline-block; animation: cursor .3s ease both; animation-delay: .2s; margin: -10px -20px } 
.business ul li.management .action:hover p.typing-txt2 { animation-delay: .3s; margin: -10px -12px } 
.business ul li.management .action:hover p.typing-txt3 { animation-delay: .4s; margin: -10px -2px } 

.business ul li.planning .planCircle { overflow:hidden; position:absolute; top:50%; left:50%; width:100px; height:100px; margin:-50px 0 0 -50px; background-color:#333; border-radius:50%; z-index:1; } 
.business ul li.planning .planCircle [class^=pie] { position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:4; } 
.business ul li.planning .planCircle .pie1 { background-image: linear-gradient(180deg, transparent 50%, #ddd 0); } 
.business ul li.planning .planCircle .pie2 { background-image: linear-gradient(0deg, transparent 50%, #ff0d38 0) } 
.business ul li.planning .planCircle .pie3 { background-image: linear-gradient(225deg, transparent 50%, #333 0); } 
.business ul li.planning .planCircle .pie4 { background-image: linear-gradient(270deg, transparent 50%, #333 0); } 
.business ul li.planning .action:hover .planCircle .pie1 { animation: pie1 1.5s ease; } 
.business ul li.planning .action:hover .planCircle .pie2 { animation: pie2 1.5s ease; } 
.business ul li.planning .action:hover .planCircle .pie3 { animation: pie3 1s ease; background-image: linear-gradient(225deg, transparent 50%, #fff 0); } 
.business ul li.planning .action:hover .planCircle .pie4 { animation: pie4 1.5s ease; background-image: linear-gradient(270deg, transparent 50%, #fff 0); } 

.action .interPolygon { position:absolute; top:50%; left:50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } 
.action .interPolygon span { display: block; width: 42px; height: 42px; } 
.action .interPolygon .path1 { position:absolute; top:0; left:0; background:url(../img/main/inter_motion01_p.png) } 
.action .interPolygon .path2 { position:absolute; top:0; left:50%; background:url(../img/main/inter_motion02_p.png) } 
.action .interPolygon .path3 { position:absolute; top:50%; left:0; background:url(../img/main/inter_motion03_p.png) } 
.action .interPolygon .path4 { position:absolute; top:50%; left:50%; background:url(../img/main/inter_motion04_p.png) } 
.action:hover .interPolygon .path1 { animation: polygon1 1.5s ease; } 
.action:hover .interPolygon .path2 { animation: polygon2 1.5s ease; background:url(../img/main/inter_motion02_on.png) } 
.action:hover .interPolygon .path3 { animation: polygon3 1.5s ease; } 
.action:hover .interPolygon .path4 { animation: polygon4 1.5s ease; background:url(../img/main/inter_motion04_on.png) } 

/* keyframes animation */
@keyframes cursor { 
    0% { opacity: 0 } 
    10% { opacity: .5; } 
    100% { opacity: 1; } 
}
@keyframes cir {
    0% { transform:translate(0); } 
    10% { transform:translate(0, -20px) } 
}
@keyframes cir2 {
    0% { transform:translate(0); } 
    10% { transform:translate(-20px, 25px); } 
}
@keyframes cir3 {
    0% { transform:translate(0); } 
    10% { transform:translate(20px, 25px); } 
}
@keyframes motion {
    20% { opacity:1; transform:scale(.5); } 
    100% { opacity:1; transform:scale(1.1) } 
}
@keyframes rotate {
    0% { transform: rotate(0deg) } 
    100% { transform: rotate(360deg) } 
}
@keyframes scale {
    20% { transform: scale(1.2) } 
    100% { transform: scale(1) } 
}
@keyframes write1 { 
    0% { margin-top: -30px; opacity: 1; } 
    100% { margin-top: -5px; } 
}
@keyframes write2 { 
    0% { margin-top: -30px; opacity: 0; } 
    49% { margin-top: -30px; opacity: 0; } 
    50% { margin-top: -30px; opacity: 1; } 
    100% { margin-top: 19px; } 
}
@keyframes write { 
    0% { transform: rotate(-45deg); opacity: 0; } 
    65% { transform: rotate(-45deg); opacity: 0; } 
    66% { transform: rotate(-45deg); } 
    100% { transform: translate(44px, 0) rotate(-45deg); } 
}
@keyframes loll {
    0% { transform: translate(0,0); } 
    10% { transform: translate(0, 31px); } 
    80% { transform: translate(0, 0px); } 
}
@keyframes loll2 {
    0% { transform: translate(0,0); } 
    10% { transform: translate(0, -31px); } 
    30% { transform: translate(0, -31px); } 
    100% { transform: translate(0, 0px); } 
}

@keyframes pie1 { 
    20% { transform: rotate(90deg); } 
    100% { transform: rotate(360deg); } 
}
@keyframes pie2 { 
    20% { transform: rotate(160deg); } 
    100% { transform: rotate(360deg); } 
}
@keyframes pie3 { 
    0% { transform: rotate(45deg); } 
    100% { transform: rotate(360deg); } 
}
@keyframes pie4 { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

@keyframes polygon1 { 
    0% { transform: translate(0,0); } 
    25% { transform: translate(46px, 0); } 
    50% { transform: translate(46px, 46px); } 
    75% { transform: translate(0, 46px); } 
    100% { transform: translate(0, 0); } 
}
@keyframes polygon2 { 
    0% { transform: translate(0,0); } 
    25% { transform: translate(0, 46px); } 
    50% { transform: translate(-46px, 46px); } 
    75% { transform: translate(-46px, 0); } 
    100% { transform: translate(0, 0); } 
}
@keyframes polygon3 { 
    0% { transform: translate(0,0); } 
    25% { transform: translate(0, -46px); } 
    50% { transform: translate(46px, -46px); } 
    75% { transform: translate(46px, 0); } 
    100% { transform: translate(0, 0); } 
}
@keyframes polygon4 { 
    0% { transform: translate(0,0); } 
    25% { transform: translate(-46px, 0); } 
    50% { transform: translate(-46px, -46px); } 
    75% { transform: translate(0, -46px); } 
    100% { transform: translate(0, 0); } 
}

.ico{ height:32px; display:inline-block; background-repeat:no-repeat; background-position:0 0 }
.ico.i1{ background-image:url(../img/main/ico_i1.png)}
.ico.i2{ background-image:url(../img/main/ico_i2.png)}
.ico.i3{ background-image:url(../img/main/ico_i3.png)}
.ico.i4{ background-image:url(../img/main/ico_i4.png)}

/* layer popup */
.dimm{position:fixed;top:0;right:0;bottom:0;left:0;background-color: rgba(0, 0, 0, 0.24);z-index:100}
.layer_pop{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);width:544px;padding:72px 48px 48px;background-color:#fff;background-repeat:no-repeat;background-position: right -16px top 84px;border:1px solid #000;box-sizing:border-box;z-index:101;}
.layer_pop .mobr{display:block}
.pop_title h2{font-size:32px;font-weight:900;color:#000;line-height: 42px;}
.pop_title em{font-weight:900;color:#fff;-webkit-text-stroke:1px #000}
.pop_title p{margin-top:8px;font-size:14px;line-height:21px;letter-spacing:0;color:#999}
.pop_cont{font-size:18px;letter-spacing:0}
.pop_cont ol{margin-top:62px}
.pop_cont ol li{line-height:36px;color:#333;font-weight: 800;}
.pop_cont ol li span{color:#fff;-webkit-text-stroke: 0.5px #222;font-weight: 900;}
.pop_cont .exp.dash:before{border-left:1px dashed #e4e4e4;top:6px;height:calc(100% - 18px)}
.pop_cont .exp.line{padding-top:10px}
.pop_cont .exp.line:before{border-left:1px solid #000}
.pop_cont .exp:before{content:'';display:block;position:absolute;width:1px;height:100%;top:0;left:2px}
.pop_cont .exp{position:relative;margin-top:64px}
.pop_cont .exp li + li{margin-top:12px}
.pop_cont .exp li:before{content:'';display:block;position:absolute;left:0;top:7px;width:5px;height:5px;background-color:#ff0d38}
.pop_cont .exp li{position:relative;padding-left:24px;font-size:14px;color:#222}
.pop_cont .exp.ty1 li{padding-left:35px}
.pop_cont .exp.ty1:before{left:4px}
.pop_cont .exp.ty1 li:before{width:9px;height:9px;border-radius:50%;top:12px}
.pop_cont .exp.ty1 li + li{margin-top:26px}
.pop_cont .exp.ty1 strong{display:block}
.pop_cont .exp.ty2{padding:15px 0}
.pop_cont .exp.ty2 li:before{top:8px}
.pop_cont .exp.ty2 li:first-child:after{content:'';display:block;position:absolute;left:93px;bottom:-30px;width:71px;height:20px;margin-top:-10px;background:url(../img/main/fuz.png) no-repeat 0 0;z-index:1}
.pop_cont .exp.ty2 li + li{position:relative;margin-top:42px}
.pop_cont .exp + .pop_ex{margin-top:48px}
.pop_ex{margin-top:64px;font-size:18px;line-height:32px;color:#222}
.pop_ex h3:before{content:'';display:block;position:absolute;left:0;top:12px;width:5px;height:5px;background-color:#ff0d38}
.pop_ex h3{position:relative;margin-bottom:5px;padding-left:13px;font-size:18px;font-weight:800;color:#333}
.pop_ex storng{font-weight:800}
.pop_box{margin-top:64px;padding:16px;text-align:center;line-height:34px;color:#222;background-color:#ededed}
.pop_box span{padding-right:28px;background-repeat:no-repeat;background-position:right -2px}
.pop_box strong{font-weight:800;text-decoration:underline}
.layer_pop.pop1{background-image:url(../img/main/pop_bg1.png)}
.layer_pop.pop2{background-image:url(../img/main/pop_bg2.png)}
.layer_pop.pop3{background-image:url(../img/main/pop_bg3.png)}
.layer_pop.pop4{background-image:url(../img/main/pop_bg4.png)}
.layer_pop.pop5{background-image:url(../img/main/pop_bg5.png)}
.layer_pop.pop1 .pop_box span{background-image:url(../img/main/pop_ico1.png)}
.layer_pop.pop2 .pop_box span{background-image:url(../img/main/pop_ico2.png)}
.layer_pop.pop3 .pop_box span{background-image:url(../img/main/pop_ico3.png)}
.layer_pop.pop4 .pop_box span{background-image:url(../img/main/pop_ico4.png)}
.layer_pop.pop5 .pop_box span{background-image:url(../img/main/pop_ico5.png)}
.layer_pop.pop6 {background: url(../img/main/bg_layer_06.png) no-repeat 17px 16.6px #fff;}
.layer_pop.pop6 .pop_title h2 {background: url(../img/main/ico_hand.png) no-repeat 181px 39px / 32px 42px;}
.layer_pop.pop6 .pop_cont {margin-right: -48px;}
.layer_pop.pop6 .pop_box {margin-top: 48px;background-color: transparent;padding: 0;}
.layer_pop.pop6 .pop_box img {vertical-align: top;width: 100%;height: auto;}
.layer_pop.on{display:block;z-index: 1000;}
.pop_btn{margin-top:48px;text-align:center}
/* .pop_btn .btn_more:after{content:'';display:block;position:absolute;top:50%;right: -28px;background:url(../img/main/ico_more.png) no-repeat right center;width:24px;height:24px;margin-top:-13px} */
.pop_btn .btn_more{position:relative;font-size:18px;font-weight:800;color:#222;text-decoration:underline}
.pop_close{position:absolute;top:32px;right:32px;width:22px;height:22px;padding:0;background:url(../img/main/pop_close.png) no-repeat 0 0}

/* 23-04-13 추가 : 뉴스레터 스크롤바, select */
.layer_pop.pop7 { width:100%; max-width:1280px; max-height:900px; height:100%; overflow-y:hidden; padding:0;}
.layer_pop.pop7 .pop_img img{ max-width:100%; width:100%; object-fit:cover; }
.layer_pop.pop7 .pop_title { position:sticky; margin-right:48px; padding:27px 0 26px 48px; line-height:1.4; font-size:3.2rem; font-weight:600; color:#222; }
.layer_pop.pop7 .pop_title em { color:#fff; font-weight:inherit; -webkit-text-stroke:1px #000; }
.layer_pop.pop7 .pop_cont { height:calc(100% - 96px); padding:0 48px 48px; }
.layer_pop.pop7 .pop_close { right:0; left:calc(100% - 78px); top:40px; }
.layer_pop.pop7 .sel-wrap { padding-bottom:32px; display:flex; justify-content:flex-end; display:-webkit-box; display:-moz-box; display:-ms-flexbox; -webkit-box-pack:end; -moz-box-justify-content:flex-end; -ms-flex-pack:end;}
.layer_pop.pop7 .sel_box + .sel_box { margin-left:24px; }
.layer_pop.pop7 .pop_cont .pop_img { width:calc(100% + 10px); height:calc(100% - 112px); overflow-y:auto; }
.layer_pop.pop7 .sel_box:focus { outline:0 none; background-color:transparent; }
.layer_pop.pop7 .sel_box .opt { width:22.6%; padding:0 5px; background-color:#fff; border:1px solid #000; color:#111; font-size:2.4rem; font-weight:500; }
.layer_pop.pop7 .sel_box .opt:hover { background-color:transparent; border:2px solid #f8f8f8; }

.layer_pop.pop7 .pop_cont .pop_img::-webkit-scrollbar { width:10px; }
.layer_pop.pop7 .pop_cont .pop_img::-webkit-scrollbar-track { background-color:transparent; }
.layer_pop.pop7 .pop_cont .pop_img::-webkit-scrollbar-thumb { border-radius:3px; background-color:#f8f8f8; }
.layer_pop.pop7 .pop_cont .pop_img::-webkit-scrollbar-button { width:0; height:0; }

.custom-select { position:relative; width:160px; height:40px; margin-left:24px; }
.custom-select select, .select-hide { display:none; }
.select-selected { position:relative; }
.select-selected:after { content:""; position:absolute; top:50%; right:0; width:20px; height:20px; background:url(../img/icons_arrow.png) no-repeat center right; background-size:20px auto; transform: rotate(0deg) translateY(-50%);}
.select-items button,.select-selected {border-bottom:1px solid #111; color:#000; font-size:2.4rem; font-weight:600; text-align:left; cursor:pointer; user-select:none; box-sizing:border-box;}
.select-items { position:static; padding:10px 16px 10px; margin-top:-1px; box-sizing:border-box; background-color:#fff; border:1px solid #000; }
.select-items button { display:block; padding:10px 0 10px; color:#111; font-size:2.4rem; font-weight:600; border-width:0px; }
.select-selected {padding:1px 0 2px;}
.select-items button:hover /*, .same-as-selected*/ { color:#000; text-decoration:underline; }
.select-items button:disabled, .select-items button.disabled { color:#999; pointer-events:none; }
.select-selected.select-arrow-active:after { transform:rotate(-180deg) translateY(50%); }

.inter-view-wrap {position: fixed;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items:center;justify-content: center;z-index: 1000;display: none;}
.inter-view-wrap.is-active {display: flex;}
.inter-view-wrap .dim {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.7);}
.inter-view-slider {position: relative;width: 100%;max-width: 1280px; max-height: 900px; background-color: #fff;overflow-x: hidden;overflow-y: auto;z-index: 10;}
.inter-view-slider .swiper-slide img {width: 100%;height: auto;}
.inter-view-wrap .swiper-button-next {position: fixed;right: 20px;top: 50%;width: 88px;height: 88px;background: url(../img/main/btn-inter-view-next.jpg) no-repeat 0 0;margin-top: -44px;}
.inter-view-wrap .swiper-button-prev {position: fixed;left: 20px;top: 50%;width: 88px;height: 88px;background: url(../img/main/btn-inter-view-prev.jpg) no-repeat 0 0;margin-top: -44px;}
.btn-inter-view-close {position: fixed;top: 20px;right: 20px;width: 88px;height: 88px;text-indent: -9999em;background: url(../img/main/btn-inter-view-close.jpg) no-repeat 0 0;z-index: 10;}

/* ie11 fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    .pop_title em, .pop_cont ol li span{text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;} 
}

/* .layer_pop.pop7 style  */
@media (max-width: 1280px) {
    .layer_pop.pop7 {width:100%; height:100%; max-height:100%;}
    .layer_pop.pop7 .pop_close {left:calc(100% - 50px); top:40px;}
    .layer_pop.pop7 .select-items {overflow-y:auto; max-height:282px;}
    .layer_pop.pop7 .select-items::-webkit-scrollbar {width:5px;}
    .layer_pop.pop7 .select-items::-webkit-scrollbar-track {background-color:transparent;}
    .layer_pop.pop7 .select-items::-webkit-scrollbar-thumb {border-radius:3px; background-color:#f8f8f8;}
    .layer_pop.pop7 .select-items::-webkit-scrollbar-button {width:0; height:0;}
    .custom-select {height:30px;}
    header .innerHeader { margin: 0 30px;} 
}

/* tablet responsive style  */
@media (max-width: 1220px) {
    .wrap .down-brochure {display: none;}
    /*header*/
/*     header .menuOpen{position:absolute;top:50px;right:0; display:block; width:48px; height:48px;z-index:201} */

    /* footer */
    footer .symbol { margin: 0 30px; } 
    footer.main .symbol { margin: 0 30px 88px; } 

    /* project */
    .project ul { width: calc(100% - 60px); padding: 88px 30px 0; } 
    .project ul li .cli_ci { display: none; } 
    .project ul li .cli_txt{ width:483px }
    .project ul li .hashtag{ width:545px }

    /* bussines */
    .business .top, .business .title { margin-left: 0px; padding: 0 30px; } 
    .business ul li { margin-right: 30px; } 
    .business ul li:nth-child(3n) { margin-right: 30px; } 
    .business ul li:nth-child(2n) { margin-right: 0; } 

    .fuzTxtCircle {width:84px;height:84px;background-image:url(../img/main/fuz_txt_circle_sm.png)} 

    /*뉴스레터*/
    .layer_pop.pop7 {overflow-x:hidden; width:100%; max-height:100%; top:50%; left:50%; transform:translate(-50%,-50%); padding: 0 16px 16px;}
    .layer_pop.pop7 .pop_title {font-size:3rem; padding:12px 0 11px; margin-right:25px;}
    .layer_pop.pop7 .pop_cont {padding:0; margin-bottom:0; height:calc(100% - 16px);}
    .layer_pop.pop7 .sel-wrap {padding:8px 0 16px 0;}
    .layer_pop.pop7 .pop_close {left:auto; right:16px; top:25px;}
    .select-items button, .select-selected {font-size:1.8rem;}

    .inter-view-wrap {align-items:flex-start;justify-content: center;}
    .inter-view-wrap.is-active {display: flex;}
    .inter-view-slider {max-width: 100%; max-height: 100%; background-color: #fff;overflow-x: hidden;overflow-y: auto;z-index: 10;}
    .inter-view-wrap .swiper-button-next {right: 10px;top: 50%;width: 44px;height: 44px;background-size: 44px 44px;margin-top: -22px;}
    .inter-view-wrap .swiper-button-prev {left: 10px;top: 50%;width: 44px;height: 44px;background-size: 44px 44px;margin-top: -22px;}
    .btn-inter-view-close {top: 31px;right: 10px;width: 44px;height: 44px;background-size: 44px 44px;}

    /* gnb */
    .gnb_mobile {display: block; padding: 50px 30px; overflow-y: auto; } 
    .gnb_mobile .gnb_logo { top: 30px; left: 30px; /* width: 36px; height: auto; */ } 
    .gnb_mobile .close { top: 22px; right: 30px; width: 20px; height: 20px; background-size: 20px auto; } 
   
    .gnb_mobile ul { position: relative; top: 40px; margin: 0 auto 0; padding-bottom: 50px; } 
    .gnb_mobile ul li { height: auto; border-bottom:1px solid #292929 }
    .gnb_mobile ul li:last-child {border-bottom:none}
    .gnb_mobile ul li strong { display: block; height: 48px; line-height: 48px; margin: 16px 0 26px; color: #fff; font-size: 32px; }
    .gnb_mobile ul li strong:before { margin-top: -10px; width: 16px; height: 16px; background: url(../img/ico_gnb_m.png) no-repeat center center; background-size: 16px auto; }
    .gnb_mobile ul li span { float: none; width: 100%; padding-bottom: 24px; line-height: 21px; font-size: 14px; }
    .gnb_mobile ul li a {position:relative}
    .gnb_mobile ul li a:hover strong:before { display: block; left: 0; }
    .gnb_mobile ul li a:hover strong { padding-left: 28px; color:#ff0d38;transition: all 0.3s; }
    .gnb_mobile ul li a:hover strong:before {margin-top: -10px; width: 16px; height: 16px; background: url(../img/ico_gnb_m.png) no-repeat center center; background-size: 16px auto; }
    .gnb_mobile.on .wave_bg_big { background: url(../img/bg_gnb_small.svg) no-repeat center center; }
    .gnb_mobile.on .wave_bg_medium { background: url(../img/bg_gnb_medium_m.svg) no-repeat center center; }
    .gnb_mobile.on .wave_bg_small { background: url(../img/bg_gnb_small_m.svg) no-repeat center center; }

    header .innerHeader .brch {display: none;}
}
@media (max-width: 1200px) {
    .innerHeader .gnb {
        display: none;
    }
    .header .m-menu {
        display: block !important;
    }
    .header .m-menu .menuOpen {
        position: absolute;
        top: 22px;
        right: 0;
        display: block;
        width: 48px;
        height: 48px;
        z-index: 201;
    }
    .header .m-menu .menuOpen.on {
        transform: rotate(45deg);
    }
    .header .m-menu .menuOpen:hover i:nth-child(2) {
        width: 100%;
    }
    .header .m-menu .menuOpen.on .icon-menu {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 48px;
        height: 48px;
    }
    .header .m-menu .menuOpen.on .icon-menu i {
        width: 36px;
        background-color: #fff !important;
    }
    .header .m-menu .menuOpen.on .icon-menu i:nth-child(1) {
        top: 50%;
        left: 0;
    }
    .header .m-menu .menuOpen.on .icon-menu i:nth-child(2) {
        top: 50%;
        left: 0;
        transform: rotate(90deg);
    }

    .header .m-menu .menuOpen .icon-menu {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 40px;
        height: 18px;
    }
    .header .m-menu .menuOpen .icon-menu i {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 4px;
        background-color: #000;
        transition: all 0.3s ease-in-out;
    }
    .header.main .m-menu .menuOpen .icon-menu i {
        background-color: #fff;
    }
    .header.scr_on .m-menu .menuOpen .icon-menu i {
        background-color: #000;
    }
    .header.main.scr_on .m-menu .menuOpen .icon-menu i {
        background-color: #000;
    }
    .header .m-menu .menuOpen .icon-menu i:nth-child(2) {
        top: 14px;
        width: 75%;
    }
}
@media (max-width: 1024px) {
    /*header*/
    .header .m-menu .menuOpen {
        position: absolute;
        top: 8px;
        right: 0;
        display: block;
        width: 48px;
        height: 48px;
        z-index: 201;
    }
    .header .innerHeader {
        margin: 0 30px;
        padding: 25px 0;
        height: auto;
    }
    .header .innerHeader .gnb {
        color: #fff;
        /*   display: block;  */
    }
    header { width: 100%; position: fixed; z-index: 100; } 
    header .innerHeader { height: 64px; padding: 21px 0; } 
    header .innerHeader .logo, header.main .innerHeader .logo { width: 68px; height: 24px; background-size:68px auto !important; } 
    header .innerHeader .meunOpen, header.main .innerHeader .meunOpen { width:20px; height:20px;} 
/*     header .meunOpen{top:22px;width: 20px;height: 20px;} */
    header .meunOpen .mn{width:16px;height:8px}
    header .meunOpen i{height:2px;}
    header .meunOpen i:nth-child(2){top:6px}
    header .meunOpen.on i{width:16px}
    header.main.scr_on .meunOpen i{background-color:#000}
    header.main.scr_on .meunOpen.on i{background-color:#fff}

    header.scr_on .innerHeader, header.scr_on .headerBottom .innerHeader{ height: 64px; line-height: 20px; } 
    header.scr_on .logo { background-size:100% auto; } 
    header.scr_on .meunOpen { background-size:100% auto; } 

    footer.main .symbol{margin-bottom:64px}

    
    .project ul li .cli_txt{width:415px}
    .project ul li .hashtag{width:600px;font-size:40px;line-height:42px}
    
}

@media (max-width: 768px) {
    .innerHeader .logo {
        width: 37px;
        height: 14px;
        background: url(../images/header/logo_m.png) no-repeat left center;
    }
    .header .m-menu .menuOpen {
        display: block;
        top: 22px;
        width: 20px;
        height: 20px;
        z-index: 201;
    }
    .gnb_mobile .gnb_logo {
        width: 37px;
        height: auto;
    }
    .header .m-menu .menuOpen.on .icon-menu i {
        width: 13px;
    }
    .header .m-menu .menuOpen .icon-menu {
        display: block;
        width: 16px !important;
        height: 8px !important;
        position: relative;
    }
    .header .m-menu .menuOpen .icon-menu i {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        /*  background-color: #fff; */
        transition: all 0.3s ease-in-out;
    }
    .header .m-menu .menuOpen .icon-menu i:nth-child(2) {
        top: 6px;
        width: 75%;
    }
    .header .innerHeader {
        margin: 0 30px;
        padding: 25px 0;
        height: auto;
    }
    .header .innerHeader .gnb {
        display: none;
    }
    .header.main.scr_on .innerHeader .logo {background:url(../img/logo_red.png) no-repeat left center !important;background-size: 34px 12px !important;}
    .header .innerHeader .logo, header.main .innerHeader .logo { width: 34px; height: 12px; background-size:34px 12px !important; } 
    .headerBottom{line-height:64px}
    .headerBottom .innerHeader{height:64px}
    .headerBottom .with{position: relative; top:-28px; left:0; width:46px; z-index: 1;} 
    .headerBottom .with img{width:46px}
    .headerBottom .with span.text_bg { position: absolute; top:-25px; left:30px; width: 110px; height: 62px; line-height: 21px; background: #000; border-radius: 10px; font-size: 14px; padding: 10px 20px; z-index:-1;} 
    .headerBottom .menu {display:flex; align-items:center;} /*230413 추가*/
    .headerBottom .menu li + li:before { height: 8px;margin-top:-4px}
    .headerBottom .menu li{padding:0 10px 0 13px} /*230413 추가*/
    .headerBottom .menu li:first-child {padding-left:0;} /*230413 추가*/
    .headerBottom .menu li a{padding-right:22px;font-size:14px;font-weight:400;background-position:right 1px}
    footer .symbol{padding:32px 0 80px;font-size:12px;line-height:18px;text-align:center;background-position:left 50% bottom 32px;background-size:20px auto}
    footer .symbol p{margin-top:10px;font-size:10px}
    footer .symbol, footer.main .symbol{margin-left:20px;margin-right:20px}

    /* layer popup */
    .layer_pop{background-size:116px auto;padding:60px 16px 40px;background-position:right -19px top 64px}
    .layer_pop .mobr{display:none}
    .pop_title h2{font-size:20px;line-height:28px}
    .pop_title p{font-size:12px;line-height:18px}
    .pop_cont{font-size:14px}
    .pop_cont ol{margin-top:30px}
    .pop_cont ol li{line-height:28px}
    .pop_box{margin-top:30px;line-height:24px}
    .pop_box span{padding-right:22px;background-size:20px auto}
    .pop_close{background-size:13px auto;top:17px;right:16px;width:13px;height:13px}
    .pop_cont .exp{margin-top:30px}
    .pop_cont .exp:before{left:1px}
    .pop_cont .exp li:before{width:3px;height:3px}
    .pop_cont .exp li{font-size:12px}
    .pop_cont .exp li + li{margin-top:8px}
    .pop_ex{margin-top:40px;font-size:12px;line-height:18px}
    .pop_ex br{display:none}
    .pop_cont .exp + .pop_ex{margin-top:30px}
    .pop_ex h3:before{width:3px;height:3px;top:7px}
    .pop_ex h3{padding-left:9px;font-size:12px}
    .pop_cont .exp.ty1:before{left:2px}
    .pop_cont .exp.ty1 li:before{width:5px;height:5px}
    .pop_cont .exp.ty1 li{padding-left:30px}
    .pop_cont .exp.ty1 li + li{margin-top:16px}
    .pop_cont .exp.ty2{padding:5px 0 3px}
    .pop_cont .exp.ty2 li:before{top:6px}
    .pop_cont .exp.ty2 li:first-child:after{background-size:57px auto;width:57px;height:16px;left:102px;bottom:-13px}
    .pop_cont .exp.ty2 li + li{margin-top:16px}
    .pop_btn{margin-top:32px}
    .pop_btn .btn_more{font-size:14px}
    
    /*뉴스레터*/
    .layer_pop.pop7 .pop_title {font-size:1.8rem;}
    .layer_pop.pop7 .pop_cont {padding:0; height:calc(100% - 48px);}
    .layer_pop.pop7 select.sel_box {font-size:1.4rem; width:28%; height:24px; background-size:14px auto;} 
    .layer_pop.pop7 .sel_box + .sel_box {margin-left:8px;}
    .layer_pop.pop7 .sel_box option {font-size:1.4rem;}
    .layer_pop.pop7 .pop_close {width:16px; height:16px; left:calc(100% - 33px); top:20px; background-size:16px auto;}
    .layer_pop.pop7 .pop_cont .pop_img {height:inherit;}
    .custom-select {width:80px; height:24px; margin-left:8px;}
    .select-items button, .select-selected {font-size:1.4rem;}
    .select-selected {padding:1px 0;}
    .select-items button {padding:6px 0; font-size:1.4rem;}
    .select-selected:after {width:14px; height:14px; background-size:14px auto;}
    .select-items {padding:6px 12px 6px; top:calc(100% - 0px);}


    /* business */
    .business { padding: 120px 0px; } 
    .business .top, .experience .top, .our .top { font-size: 14px; line-height: 21px; } 
    .business .title, .experience .title, .our .title { font-size:32px; line-height: 42px; padding-top: 8px; letter-spacing: -1px; } 
    .business ul { padding:0 30px; margin-top:-30px} 
    .business ul li { padding-top: 40px;flex-grow:1} 
    .business ul li { float: left; width: 48%; margin-right: 2%; } 
    .business ul li:nth-child(3n) { margin-right: 2%; }
    .business ul li:nth-child(2n) { margin-right: 0; }
    .business ul li .action { height:206px; line-height: 206px; } 
    .business ul li .cir,.business ul li .cir2, .business ul li .cir3 { width:100px; height: 100px; position: absolute; top: 50%; left: 50%; margin:-50px 0 0 -50px; } 
    .business ul li.design .icon01 { position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -23px } 
    .business ul li.management .icon { top: 50%; left: 50%; margin: -50px 0 0 -50px; } 
    .business ul li.management .action .animation { top: 50%; left: 50%; margin: 29px 0 0 -45px; } 
    .business ul li.management .action:hover .animation { top: 65px; } 
    .business ul li.management .action .motion04 { margin: -5px 0 0 -45px; } 
    .business ul li.management .action .motion05 { margin: 19px 0 0 -45px; } 
    .business ul li.management .action:hover .motion04 { margin: -5px 0 0 -45px; } 
    .business ul li.management .action:hover .motion05 { margin: 19px 0 0 -45px; } 
    .business ul li .text .tit { font-size: 20px; line-height: 28px; padding-top: 0; } 
    .business ul li .text p { font-size: 14px; line-height: 21px; padding-top: 8px; }
    .business ul li .text p .mobr{display:none}
    .business ul li.development .icons { top: 50%; left: 50%; margin: -45px 0 0 -46px; }

    /*project*/
    .project { position: relative; padding: 120px 0; } 
    .project .top { font-size: 14px; line-height: 21px; margin-bottom: 8px; } 
    .project .title { font-size: 32px; line-height: 42px; } 
    .project ul { width: calc(100% - 60px); padding: 64px 30px 0; } 
    .project ul li { overflow: hidden; height:162px;} 
    .project ul li .no { position:absolute; top: 24px; left:auto; right:0; width: 55px; height: 42px; line-height: 47px; font-size:32px; text-align: right; } 
    .project ul li .no img { height:32px; } 
    .project ul li .cli_txt { position:absolute; top:24px; left:0; right:auto; width: auto; height:55px; line-height:21px; color: #333; font-size:14px; } 
    .project ul li .cli_txt span { height: 30px; line-height: 30px; font-size: 20px; margin-bottom:4px; } 
    .project ul li .hashtag { position: absolute; top: 95px; left: 0px; width: 100%; height:auto; line-height:47px; font-size:32px; text-align: left; animation: txtMove 10s linear infinite;white-space:nowrap;} 
    .project ul li .over_swap { visibility: hidden; position: relative; object-fit: contain; opacity: 0; } 
    .project ul li:hover .no { left:auto; right:10px; } 
    .project ul li:hover .cli_txt { left: 10px; } 
    .project ul li:hover .hashtag { left: 10px; } /***/
    .project ul li:hover .hashtag img { position:absolute; left:10px; right: auto; } 
    .project ul li:hover { background-position: left bottom; } 
    .project ul li:hover .over_swap { visibility: visible; opacity: 1; transition: opacity 1.5 linear; } 
    .project ul li:hover img:first-child { display: none; transition: opacity 1.5 linear; } 
    .project .click_mask { display:block; position:absolute; top:0; left:0; width:100%; height:100%; } 

    @keyframes txtMove { 
        0% { margin-left: 0px; opacity: 0; } 
        15% { margin-left: 0px; opacity: 1; } 
        100% { margin-left: -415px; } 
    }
}


/* mobile responsive style  */
@media (max-width: 415px) { 
    /* br tag mobile */
    .babr { display: none; } 
    .mobr { display: block; } 

    /* business */
    .business ul li { float: none; width: 100%; margin-right: 0px; } 
    .business ul li:nth-child(3n) { margin-right: 0; }
}


@media (max-width: 359px) { 
    /*header*/
    header .innerHeader { margin: 0 20px; } 

    /* project */
    .project ul { width: calc(100% - 40px); padding: 88px 20px 0; } 

    /* bussines */
    .business .top, .business .title { padding: 0 20px; } 
    .business ul { padding: 0 20px; } 

    /* layer popup */
    .layer_pop{ width:calc(100% - 40px); background-size:100px auto; background-position:right -19px top 50px }

    /*뉴스레터*/
    .layer_pop.pop7 .pop_title { font-size:2rem; }
    .layer_pop.pop7 select.sel_box {font-size:1.4rem; width:35%; background-size:14px auto; } 
    .layer_pop.pop7 .sel_box + .sel_box { margin-left:16px; }
    .layer_pop.pop7 .sel_box option { font-size:1.4rem; }
    .layer_pop.pop7 .pop_close { top:15px; right:13%; }

    

}


span.animate__animated, strong.animate__animated{display:block}