<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* common */

.title {font-size: 20px; font-weight: 600; font-weight: bold; margin-bottom: 8px;}

/* main logo */
.cypressads {height:146px;}
.zcar_platform {height:160px;}
.cypressads.fadeInUp {transition: all 1200ms ease-out;
    -moz-transform: translate3d(50px, 200px, 0px);
    -webkit-transform: translate3d(50px, 200px, 0px);
    -o-transform: translate3d(50px, 200px, 0px);
    -ms-transform: translate3d(50px, 200px, 0px);
    transform: translate3d(50px, 200px, 0px);
}
.zcar_platform.fadeInUp {transition: all 1200ms ease-out;
    -moz-transform: translate3d(-50px, 200px, 0px);
    -webkit-transform: translate3d(-50px, 200px, 0px);
    -o-transform: translate3d(-50px, 200px, 0px);
    -ms-transform: translate3d(-50px, 200px, 0px);
    transform: translate3d(-50px, 200px, 0px);
}


/* award popup */
.award2023kcga {z-index: 99999;height: 90%;min-width: 300px;position: fixed;left: 10%;top: 50%;transform: translateY(-50%);border: 5px solid #ac9f87;}
.award2023kcga a {display:block;width: 100%;height: 100%;}    
.award2023kcga img {height:100%;}
.award2023kcga .btn-close {font-size: 12px;position: absolute;right: 8px;bottom: 8px;color: #fff;padding: 8px 10px;border-radius: 18px;background-color: rgba(255, 255, 255, 0.2);}
.award2023kcga .btn-close:hover {background-color: rgba(255, 255, 255, 0.3);}
.award2023kcga .btn-close:active {background-color: rgba(255, 255, 255, 0.4);}

/* video */
.monitor-wrap {display: flex; align-items: center; justify-content: center; padding: 0px 48px;}
.monitor-frame {width: 640px; margin: 30px 25px;}
.monitor-frame iframe {position:relative;z-index: 1;width: 100%;border-radius: 4px;}

.sub_text_editor img{width:100%!important;}

.w100 {width: 100% !important;}

.section_inner h2 span.blue_txt {
    display: inline-block;
    width: auto;
    color: #086cfd;
    padding: 0;
}

strong.point_txt {
    position: relative;
}

strong.point_txt:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left:-2px;
    /*transform: translate(-50%);-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);*/
    width: 4px;
    height: 4px;
    background: #086cfd;
    border-radius: 50%;    
}

.fadeInUp.in-view strong.point_txt:after {animation: bounce-sm 0.5s ease-in-out;animation-iteration-count: 3;}
.fadeInUp.in-view strong.point_txt:nth-child(2):after {animation-delay: .35s;}



.point_txt.white:after {
    background: #fff;
}


.gray_bk {
    background: #f6f6f6
}

.blue_txt {
    color: #086cfd;
}



.header.header_sc {
    background: #000c;
}



/* ï¿½ë–Šæ´¹ï¿½ ï§Žë¶¿ì”¤ è«›ê³Œê¼ */

.jb-box {
    height: 100%;
    overflow: hidden;
    margin: 0px auto;
    position: relative;
}

/* .jb-box video {
    height: 124%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
} */

.jb-text {
    position: absolute;
    top: 50%;
    width: 100%;
}

.jb-text p {
    margin-top: -24px;
    text-align: center;
    font-size: 32px;
    color: #ffffff;
    line-height: 48px;
    padding: 0 16px;

}



/* 2020 ï¿½ëœ²ï¿½ì”&nbsp;ï¿½ê½£ è«›ë¶¿ìŠ¦ï§£ï¿½ è€Œâ‘¦ë€—ï§¥ï¿½ */
.data_voucher2020 {
    margin: 0 auto;
    width: fit-content;
}

.data_voucher2020 li a {
    color: #086cfd;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 32px;
    text-align: center;
    font-weight: bold;
    background: #fff;
    padding: 16px 24px;
    border-radius: 24px
}


.data_voucher ul.inner_box {
    margin-top: 64px;
    margin-bottom: 64px;
}

.data_voucher ul.inner_box li {
    position: relative;
    float: left;
    height: 64px;
    width: 33.33%;
}

.data_voucher ul.inner_box.fadeInUp.in-view li {animation: bounce-md 1.2s ease-in-out;}
.data_voucher ul.inner_box.fadeInUp.in-view &gt; li:nth-child(2) {animation-delay: .35s;}
.data_voucher ul.inner_box.fadeInUp.in-view &gt; li:nth-child(3) {animation-delay: .65s;}

.data_voucher ul.inner_box li img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);

}

.data_voucher .browser {
    width: 540px;
    margin: auto;
    margin-bottom: 24px;
}

.data_voucher .browser img {
    width: 100%;
}


.data_voucher_txt {
    width: 540px;
    margin: auto;
    margin-bottom: 64px;
}

.data_voucher_txt li {
    float: left;
    color: #717171;
}

.data_voucher_txt li:nth-child(1),
.data_voucher_txt li:nth-child(2) {
    width: 50%;
    text-align: center
}

.data_voucher_txt li:nth-child(3) {
    margin-top: 16px;
    text-align: center;
    line-height: 24px
}

.data_voucher .plus_btn {
    display: block;
    width: 240px;
    margin: 0 auto;
    background: #086cfd;
    color: #fff;
    padding: 16px 0;
    text-align: center
}



/* lnb */
#lnb {
    width: 100%;
    z-index: 10;
    height: 100%;
}

#lnb ul {
    width: 90%;
    margin: 0 auto;
}

#lnb &gt; ul &gt; li {
    border-bottom: 1px solid #e5e5e5;
}

#lnb &gt; ul &gt; li &gt; a {
    display: block;
    padding: 24px 35px 24px 15px;
    color: inherit;
    font-size: 18px;
    background: #fff url(https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225) no-repeat 95% 24px;
}

#lnb &gt; ul &gt; li a:hover {
    color: #049cbe;
}

#lnb &gt; ul &gt; li.on &gt; a {
    color: #049cbe;
    background: #fff url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 24px;
}

#lnb &gt; ul &gt; li ul {
    display: none;
}

#lnb &gt; ul &gt; li &gt; ul &gt; li &gt; a {
    display: block;
    padding: 0 25px 14px 14px;
    color: inherit;
    font-size: 14px;
    background: #fff url('https://t1.daumcdn.net/cfile/tistory/2417E04D570C5C0225') no-repeat 95% 1px;
}

#lnb &gt; ul &gt; li &gt; ul &gt; li &gt; a {
    color: #049cbe;
}

#lnb &gt; ul &gt; li &gt; ul &gt; li.on a {
    color: #049cbe;
    background: #fff url('https://t1.daumcdn.net/cfile/tistory/257B794F570C5C0D1A') no-repeat 95% 3px;
}

#lnb &gt; ul &gt; li &gt; ul li ul {
    display: none;
    padding-bottom: 8px;
}

#lnb &gt; ul &gt; li &gt; ul li li a {
    display: block;
    padding: 0 25px 10px 22px;
    color: #666;
    font-size: 14px;
}

#lnb &gt; ul &gt; li &gt; ul &gt; li li a:hover {
    color: #049cbe;
}

#lnb &gt; ul li.noDepth a {
    background-image: none !important;
}

/*================================================================
                cypressADS+ 2020.09.22
==================================================================*/

.cypress_intro.plus {background: #086CFD;}
.cypressplus * {line-height: 1.5;}

.cypress_intro.plus .intro_content {
    background-image: none;
}

.plus_box {display: flex; color:#111111; font-weight: bold;}

.plus_box.col-2 li {max-width: 50%; flex: 1 1 50%;}
.plus_box.col-2 li:first-of-type {padding-right: 4%;}
.plus_box.col-2 li:nth-of-type(2) {padding-left: 4%;}


.plus_box.col-3 li {max-width: 33.3333%; flex: 1 1 33.3333%;}
.plus_box.col-3 li:nth-of-type(2) {margin-right: 4%; margin-left: 4%;}

.plus_box li {padding: 5px 0;}

.plus_box .box {height: 100%; font-size: 18px; background: none; border: 4px solid #EAEAEA; border-radius:14px; padding: 20px;}
.plus_box .box.blue {border-color: #086CFD;}

.overview_tit {font-size:20px; font-weight: bold; color: #ffffff; background-color: #086CFD; margin: 5px 0 40px; padding: 20px; 
    border-radius: 14px 14px 0 0; box-shadow: 0px 4px 4px 0px #00000040;}

.plus_circle {display: flex; color:#111111; font-weight: bold;}
.plus_circle * {line-height: 2;}
.plus_circle &gt; li {max-width: 36%; flex: 1 1 36%;}
.plus_circle &gt; li:first-of-type {margin-right: -1.2%;}
.plus_circle &gt; li:nth-of-type(2) {margin: 0 -1.2% 0;}
.plus_circle &gt; li:nth-of-type(3) {margin-left: -1.2%;}
.plus_circle &gt; li ul {display: inline-grid; justify-content: center; text-align: left;}
.plus_circle ul {padding: 0 20px;}
.plus_circle ul li {padding-left: 10px; position: relative;}
.plus_circle ul li:before {content: "â€¢"; position: absolute; left: 0;}

.overview_circle {display: flex; align-items: center; justify-content: center; color: #086CFD; font-size: 22px; 
    width: 100%; height: auto; aspect-ratio: 1 / 1; border: 4px solid #086CFD; border-radius: 50%; margin-bottom: 40px;}



/*================================================================
                birdEye 2020.09.17
==================================================================*/

.birdEye {position: fixed; top: 28px; right: 50px; z-index: 999;}

.birdEye span:after {
    content: '';
    display: block;
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid #086cfd;
    border-right: 18px solid transparent;
}

.birdEye a {
    color: #f5f5f5;
    font-weight: bold;
    position: relative;
    display: block;
}

.birdEye span {
    position: absolute; font-size: 13px; white-space: nowrap;
    top: 50%; right: 100px;
    display: none;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background: #086cfd;
    padding: 4px 12px;
    border-radius: 4px;
    line-height: 1.5;
}


.birdEye_circle {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -80px;
    height: 46px;
    width: 46px;
}

.birdEye_circle img {
    width: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}




/*================================================================
                HEADER
==================================================================*/
.header {
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 100;
}

.header.bg-white {background-color:rgba(255, 255, 255, 0.9);}

.logo {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.logo a img {
    height: 32px;
    transition: all .1s;
    /*display: none;*/
}

.logo a img:last-child {
    display: none;
}

.menu_icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.menu_button {
    padding: 11px;
    display: inline-block;
    cursor: pointer;
}

.menu_lineBox {
    width: 38px;
    height: 22px;
    display: inline-block;vertical-align: middle;
    position: relative;
    transition: all .4s;
}

.menu_line,
.menu_line::before,
.menu_line::after {
    width: 38px;
    height: 2px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    transition: all .4s;
}

.menu_line.white,
.menu_line.white::before,
.menu_line.white::after {background: #fff;}

.menu_line {
    display: block;
    top: 50%;
    right: 0;
    margin-top: -1px;
}

.menu_line::before,
.menu_line::after {
    content: "";
    display: block;
    right: 0;
    width: 80%
}

.menu_line::before {
    top: -10px;
}

.menu_line::after {
    bottom: -10px;
}

.menu_icon:hover .menu_line::before {
    /*transform: rotateY(-180deg)*/
    width: 120%;
}

.menu_icon:hover .menu_line::after {
    /*transform: rotateY(180deg);*/
    width: 120%;
}

/* SCROLL DOWN HEADER */
/*
.header.header_sc .logo a img:first-child{
    display: none;
}
.header.header_sc .logo a img:last-child{
    display: block;
}
.header.header_sc .menu_line,
.header.header_sc .menu_line::before,
.header.header_sc .menu_line::after{
    background: #333;
}*/

/*================================================================
                GNB
==================================================================*/
#gnb_bg {
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
}

#gnb {
    /*display: none;*/
    width: 370px;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    right: -370px;
    z-index: 999;
    transition: all .6s;    
}

.close_gnb.close_gnb {
    position: absolute;
    top: 20px;
    right: 26px;
}

.close_gnb .menu_line,
.close_gnb .menu_line::before,
.close_gnb .menu_line::after {
    width: 38px;
    height: 2px;
    background: #333;
    border-radius: 3px;
    position: absolute;
}

.close_gnb .menu_lineBox {
    transform: rotate(45deg);
}

.close_gnb .menu_line::before {
    display: none;
}

.close_gnb .menu_line::after {
    top: 0;
    transform: rotate(-90deg)
}

.close_gnb:hover .menu_lineBox {
    transform: rotate(135deg);
}

#gnb .menu {
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0;
    font-size: 21px;
    line-height: 28px;
}

#gnb .menu &gt; ul {
    padding: 0 40px;
}

#gnb .menu &gt; ul &gt; li {
    margin-top: 5px;
}

#gnb .menu &gt; ul &gt; li &gt; a {
    display: block;
    padding: 18px 38px 18px 0;
    color: #555;
}

.menu_ect {

    width: auto;
    margin: 0px 20px 0;
    border-left: 1px solid #ccc;

}

.menu_ect ul {
    padding: 26px 0 0;
}

.menu_ect li {
    padding: 0 12px;
}

.menu_ect li &gt; a {
    display: block;
    font-size: 17px;
    line-height: 30px;
    color: #666;
    transition: all .2s;

}

.menu ul li a::after {

    border-top: 1px solid #083959;
    content: "";
    display: block;
    transform: scaleX(0);
    transition: transform 500ms ease-in-out 0s;
}

#gnb .menu ul li a:hover {
    color: #083959;
}

.menu ul li:hover::after {
    transform: scaleX(1);
    transform-origin: 0 100%;
}



.pdf_download {
    display: block;
    width: 70%;
    max-width: 240px;
    position: relative;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
    padding: 12px;
    text-align: center;
    color: #777;
    transition: all .4s;
}

.pdf_download:hover {
    color: #222;
}

.introduce .pdf_download:hover {
    color: #fff;
}

.pdf_download:hover .trT,
.pdf_download:hover .trB {
    width: 100%;
}

.pdf_download:hover .trR,
.pdf_download:hover .trL {
    height: 100%;
}

.border_tr {
    background: #083959;
    position: absolute;
    transition: width 0.8s ease 0s;
    z-index: 1000;
}

.introduce .border_tr {
    background: #049cbe;
}

.trT {
    width: 0;
    height: 1px;
    top: -1px;
    left: 0;
}

.trB {
    width: 0;
    height: 1px;
    bottom: -1px;
    right: 0;
}

.trR {
    width: 1px;
    height: 0;
    top: 0px;
    right: -1px;
    transition: height 0.8s ease 0s;
}

.trL {
    width: 1px;
    height: 0;
    bottom: 0px;
    left: -1px;
    transition: height 0.8s ease 0s;
}

.clien .inquires_submit:hover .trT,
.inquires_submit:hover .trB,
.pdf_download:hover .trT,
.pdf_download:hover .trB {
    width: 100%;
}

.inquires_submit:hover .trR,
.inquires_submit:hover .trL,
.pdf_download:hover .trR,
.pdf_download:hover .trL {
    height: 100%;
}

/*================================================================
                OMQIORES
==================================================================*/
.inquires {
    width: 500px;
    height: 100%;
    position: fixed;
    top: 0;
    right: -500px;
    z-index: 999;
    padding: 0 40px;
    background: #fff;
    transition: all .8s;
}

.inquires_inner {
    position: relative;
    top: 10%;
}

.inquires_title {
    padding: 18px 0 38px;
    font-size: 28px;
}

.inquires_cont ul li {
    padding: 15px;
}

.inquires_cont ul li p {
    position: relative;
}

.inquires_cont ul li p `,
.inquires_cont ul li p textarea {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 7px 0 7px 5px;
    outline: none;
}

.border_tr.yc {
    width: 0;
    height: 1px;
    bottom: 0;
    background: #fbaf3f;
}

.bg_c_y {
    background: #fbaf3f;
}

.inquires_cont ul li p:hover .border_tr.yc {
    width: 100%;
}

.inquires_submit {
    width: 80%;
    position: relative;
    margin: 30px auto 0;
    border: 1px solid #e2e2e2;
    text-align: center;
    transition: all .2s;
}

.inquires_submit input {
    display: none;
}

.inquires_submit label {
    display: block;
    width: 100%;
    height: 100%;
    padding: 18px;
    font-size: 16px;
    font-weight: 400;
    color: #777;
    outline: none;
    transition: all .1s;
}

.inquires_submit:hover label {
    color: #333;
}

/*================================================================
                CONTENTS
==================================================================*/

#contents {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

#intro {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: fixed;
}


.index_intro {
    width: 100%;
    height: 100%;
    background-color: #086cfd;
}

.intro_content {
    max-width: 1000px;
    width: 75%;
    height: 100%;height:100vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.intro_content.main {max-width: 1300px; display: flex; align-items: center; justify-content: space-between;}
.intro_content.main a {max-width: calc(50% - 50px); margin: 50px 0;}

.main_text {
    width: auto;
    height: auto;
    position: absolute;
    top: 48%;
    left: 50%;
    margin-left: -500px;
    color: #fff;
    font-size: 16px;

    /*text-align: center;*/
    padding-left: 7%;
    cursor: default;
    transition: all .4s;
    text-align: right;
    animation: fadeInUp 2s ease-in-out;
}

.main_text.cypress_title img {height: 100px;}
.main_text.cypress_title p {font-size: 18px;}
.main_text.cypressplus_title p {font-size: 1.33rem; text-align: center; font-weight: 500; opacity: 1; letter-spacing: -0.5px; margin-left: 20px; padding: 0;}
.main_text img {height: 60px;}



.main_text p {
    padding-top: 15px;
    opacity: 0.8;
    line-height: 24px;
    font-weight: 100;
    letter-spacing: 0.2em;
    text-align: right;
}

.main_text span {position: relative;top: 26px;margin-right: 8px;opacity:0;animation: 3s swift-up ease-in-out forwards;}

.main_text span i {position: relative;font-style: normal;}
.main_text span i:before {content:"";z-index: -1;position:absolute;margin-top:-10px;left:5px;width:5px;height:5px;background-color:rgba(255, 255, 255, 0.4); border-radius:50%;
    opacity:0;animation: 3s swift-deco ease-in-out forwards;animation-delay: 0.2s;}

.main_text span i:after {content:"";z-index: -1;position:absolute;top: 8px;left:5px;width:3px;height:3px;background-color:transparent; 
    border-width:1px;border-style:solid; border-radius:50%;
    opacity:0;animation: 3.5s swift-bubble ease-in-out forwards;}

.main_text span em {z-index: -1;position:absolute;top:4px;left:5px;width:4px;height:4px;background-color: transparent;border-width: 1px;
    border-style: solid;border-radius: 50%;opacity:0;animation: 4.0s swift-bubble ease-in-out forwards;animation-delay: 0.4s;}

.main_text span:nth-of-type(2) {animation-delay:0.5s;}
.main_text span:nth-of-type(3) {animation-delay:0.7s;}
.main_text span:nth-of-type(4) {animation-delay:1.1s;}

.main_text i.deco1:before {animation-delay:0.2s;background-color:rgba(5, 191, 219, 1.0);}
.main_text i.deco2:before {animation-delay:0.3s;background-color: rgba(82, 198, 215, 0.8);}
.main_text i.deco3:before {animation-delay:0.4s;background-color: rgba(82, 198, 215, 0.6);}
.main_text i.deco4:before {animation-delay:0.6s;background-color: rgb(255 153 0);}
.main_text i.deco5:before {animation-delay:0.8s;background-color: rgb(255 200 0);}
.main_text i.deco6:before {animation-delay:0.9s;background-color: rgba(255, 200, 0, 0.8);}
.main_text i.deco7:before {animation-delay:1.0s;background-color: rgba(255, 200, 0, 0.6);}
.main_text i.deco8:before {animation-delay:1.2s;background-color: rgba(5, 191, 219, 1.0);}
.main_text i.deco9:before {animation-delay:1.3s;background-color: rgba(82, 198, 215, 0.8);}
.main_text i.deco10:before {animation-delay:1.4s;background-color: rgba(82, 198, 215, 0.7);}
.main_text i.deco11:before {animation-delay:1.5s;background-color: rgba(82, 198, 215, 0.5);}

.main_text i.deco1:after {animation-delay:0.5s;border-color:rgba(5, 191, 219, 0.9);}
.main_text i.deco2:after {animation-delay:0.6s;border-color: rgba(82, 198, 215, 0.7);}
.main_text i.deco3:after {animation-delay:0.7s;border-color: rgba(82, 198, 215, 0.5);}
.main_text i.deco4:after {animation-delay:0.9s;border-color: rgba(255, 153, 0, 0.9);}
.main_text i.deco5:after {animation-delay:1.1s;border-color: rgba(255, 200, 0, 0.9);}
.main_text i.deco6:after {animation-delay:1.2s;border-color: rgba(255, 200, 0, 0.7);}
.main_text i.deco7:after {animation-delay:1.3s;border-color: rgba(255, 200, 0, 0.5);}
.main_text i.deco8:after {animation-delay:1.5s;border-color: rgba(5, 191, 219, 0.9);}
.main_text i.deco9:after {animation-delay:1.6s;border-color: rgba(82, 198, 215, 0.7);}
.main_text i.deco10:after {animation-delay:1.7s;border-color: rgba(82, 198, 215, 0.6);}
.main_text i.deco11:after {animation-delay:1.8s;border-color: rgba(82, 198, 215, 0.5);}

.main_text i.deco1 em {animation-delay:1.0s;border-color:rgba(5, 191, 219, 0.8);}
.main_text i.deco2 em {animation-delay:1.1s;border-color: rgba(82, 198, 215, 0.6);}
.main_text i.deco3 em {animation-delay:1.2s;border-color: rgba(82, 198, 215, 0.5);}
.main_text i.deco4 em {animation-delay:1.4s;border-color: rgba(255, 153, 0, 0.8);}
.main_text i.deco5 em {animation-delay:1.5s;border-color: rgba(255, 200, 0, 0.8);}
.main_text i.deco6 em {animation-delay:1.7s;border-color: rgba(255, 200, 0, 0.6);}
.main_text i.deco7 em {animation-delay:1.8s;border-color: rgba(255, 200, 0, 0.5);}
.main_text i.deco8 em {animation-delay:2.0s;border-color: rgba(5, 191, 219, 0.8);}
.main_text i.deco9 em {animation-delay:2.1s;border-color: rgba(82, 198, 215, 0.6);}
.main_text i.deco10 em {animation-delay:2.2s;border-color: rgba(82, 198, 215, 0.5);}
.main_text i.deco11 em {animation-delay:2.3s;border-color: rgba(82, 198, 215, 0.5);}

.main_title {
    position: relative;
    font-size: 70px;
    letter-spacing: 20px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 62px;
    padding: 4px 0 10px;
    background-color: #083959;
}

.main_title &gt; span {
    display: inline-block;
    position: relative;
    height: 100%;
}

.and_txt {
    display: inline-block;
    transform: rotate(-90deg);
    position: absolute;
    top: 25px;
    right: -36px;
    font-size: 20px;
    letter-spacing: 5px;
}

.sub_title_ {
    display: inline-block;
    font-size: 20px;
    line-height: 36px;
    color: #FBAF3F;
    font-weight: bold;
    background-color: #083959;
}

.scroll_down {
    width: 100px;
    position: absolute;
    z-index: 9;
    bottom: 10px;
    left: 50%;
    margin: 0 0 0 -50px;
}

.scroll_down_mouse {
    height: 52px;
    /* background: url(../img/mouse.png) no-repeat center center;*/
}

.scroll_down_arrow {
    height: 30px;
    background: url(../img/mus_m.png) no-repeat center center;
    cursor: pointer;
}

.main_img.img_sc {
    width: 200px;
    right: 10px;
    top: -120px;
}

/*================================================================
                SECTION
==================================================================*/

.section {

    width: 100%;
    height: auto;
    background: #fff;
    position: relative;
    z-index: 9;
}

.section_inner {
    margin: 0 auto;
    padding: 56px 0;
    /*padding-bottom: 50px;*/
}

.border_none {
    border: none;
}

.inner_box {
    max-width: 1000px;
    width: 80%;
    margin: 0 auto;
}
.inner_box.w1200 {max-width: 1200px;width: calc(100% - 40px);}

.inner_box.big {
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
}

.section_inner.inner_video {
    background: #2b3745;
}



.section_inner h2 {
    width: 100%;
    margin: 0 auto;
    font-size: 25px;
    color: #000;
    padding-bottom: 16px;
    text-align: center;    
}

.section_inner h2 span {
    display: block;
    padding: 0 10px 10px;
}

.innerBox {
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
}

.who_we {
    padding-top: 60px
}

ul:after {
    display: block;
    content: '';
    clear: both;
}


.who_we_are &gt; li {
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    text-align: center;
    font-size: 21px;
    padding: 40px;
    font-weight: 300;
    margin: 0 auto; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%;
}

.who_we_are.in-view &gt; li {animation: Bounce 2.6s ease-in-out;}

.who_we_are.in-view &gt; li:nth-child(2) {animation-delay: .35s;}
.who_we_are.in-view &gt; li:nth-child(3) {animation-delay: .65s;}
.who_we_are.in-view &gt; li:nth-child(5) {animation-delay: .95s;}
.who_we_are.in-view &gt; li:nth-child(7) {animation-delay: 1.25s;}

.who_we_are &gt; li:nth-child(6) {
    display: none;
}

.who_we_are &gt; li:nth-child(4) {
    width: 16.66%;

}

.who_we_are &gt; li:nth-child(7) {
    width: 33.33%;
}

.who_we_are &gt; li:nth-child(8) {
    width: 16.66%;
    border: none;
}


.who_we_are &gt; li &gt; strong {
    display: block;
    font-size: 46px;
    padding-top: 30px;
    color: #2c3846;
}

ul.conter_box {
    display: inline-block;
    position: relative
}

.conter_box li {
    float: left;
}

.conter_box li:nth-child(1) {
    text-align: right;
}

.conter_box li:nth-child(2) {
    text-align: left;
    line-height: 25px;
    padding-left: 2px;
    font-size: 17px;
    position: absolute;
    right: -20px;
    bottom: -2px;
}

.conter_box.decimal-add {margin-left: -26px;}
.conter_box.decimal-add li {right: -30px;}
.conter_box.decimal-add li .decimal-num {font-weight: bold;color: #086cfd;}


#counter1,
#counter2,
#counter3,
#counter4,
#counter5,
#counter6 {
    font-size: 25px;
    font-weight: bold;
    color: #086cfd;
    line-height: 25px;
}


.who_we_are &gt; li &gt; img {
    display: block;
    width: 64px;
    margin: 0 auto;
    padding-bottom: 16px;
}

.who_we_are &gt; li &gt; p {
    margin-bottom: 16px;
    font-size: 23px;
    color: #717171;
}




.introduce {

    position: relative;
    background: #f00;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100 100%;
    width: 100%;
    height: 950px;
    border: none;
}

.introduce_content {
    position: absolute;
    z-index: 10;
}

.introduce_bk {
    position: relative;
}


.introduce .pdf_download {
    color: #fff;
    width: 70%;
    max-width: 240px;
    margin-top: 80px;
}


.introduce p.p_title {
    color: #fff;
    background: #2b3745;
    width: 340px;
    margin: 0 auto;
    border: 10px double #fff;
    padding: 40px 20px;
}

.introduce p.p_title img {
    width: 210px;
}




p.p_txt {
    width: 100%;
    font-size: 15px;
    color: #505050;
    line-height: 26px;
    padding: 5px;
    word-break: keep-all;


}

p.p_title {
    width: 100%;
    font-size: 17px;
    color: #8e8e8e;
    padding: 10px;
    font-weight: 300;
    word-break: keep-all;
    text-align: center;
    line-height: 26px
}


.inner_video h2 {
    color: #f1f1f1;
}


.business {
    padding-top: 60px;
    margin: 0 auto 35px;

}

.business ul {
    text-align: center;
}

.business ul li {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

.business ul li a {transition: all 500ms ease-out;}
.business ul li.cf_box a {transition: all 200ms ease-out;}


.business ul li ul li img {
    height: 80px;
    padding: 20px 0;
}


.business ul li ul li h3 {
    font-size: 15px;
    padding: 10px 0 0px 0;
    font-weight: 100;
    color: #666;

}

.business ul li ul li h3:after {
    margin: 20px auto;
    content: "";
    display: block;
    width: 12px;
    border-bottom: 1px solid #ccc;
}

.business ul li ul li p {
    line-height: 24px;
    font-size: 14px;
    padding: 0 15px;
}

.business ul li ul li {
    width: 100%;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    padding: 40px 10px;
    border: 1px solid #eee;
}

.business ul li ul li p {
    height: 100px;

}


.business ul li ul li input {
    display: block;
    margin: 0px auto;
    padding: 10px 40px;
    margin-top: 40px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.border_tr {
    background: #083959;
    position: absolute;
    transition: width 0.8s ease 0s;
    z-index: 1000;
}

.trT {
    width: 0;
    height: 1px;
    top: -1px;
    left: 0;
}

.trB {
    width: 0;
    height: 1px;
    bottom: -1px;
    right: 0;
}

.trR {
    width: 1px;
    height: 0;
    top: 0px;
    right: -1px;
    transition: height 0.8s ease 0s;
}

.trL {
    width: 1px;
    height: 0;
    bottom: 0px;
    left: -1px;
    transition: height 0.8s ease 0s;
}

.client {
    width: 12.5%;
    height: 110px;
    float: left;
    margin: 0 0 0px;
}

.client_logo {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: all .2s;
}

.baemin {
    background-image: url(../img/client/baemin.svg);
}

.kakao {
    background-image: url(../img/client/kakao.svg);
}

.bnk {
    background-image: url(../img/client/bnk.svg);
}

.dgb {
    background-image: url(../img/client/dgb.svg);
}

.ebay {
    background-image: url(../img/client/ebay.svg);
}

.gongmu {
    background-image: url(../img/client/gongmu.svg);
}

.gwangjubank {
    background-image: url(../img/client/gwangjubank.svg);
}

.hangugsuchul {
    background-image: url(../img/client/hangugsuchul.svg);
}

.hyundai {
    background-image: url(../img/client/hyundai.svg);
}

.International_officials {
    background-image: url(../img/client/International_officials.svg);
}

.jbbank {
    background-image: url(../img/client/jbbank.svg);
}

.kdb {
    background-image: url(../img/client/kdb.svg);
}

.keb_hana {
    background-image: url(../img/client/keb_hana.svg);
}

.korea_maritime {
    background-image: url(../img/client/korea_maritime.svg);
}

.koreahousing {
    background-image: url(../img/client/koreahousing.svg);
}

.lg {
    background-image: url(../img/client/lg.svg);
}

.lotte {
    background-image: url(../img/client/lotte.svg);
}

.lotte2 {
    background-image: url(../img/client/lotte2.svg);
}

.mg {
    background-image: url(../img/client/mg.svg);
}

.nh {
    background-image: url(../img/client/nh.svg);
}

.sh {
    background-image: url(../img/client/sh.svg);
}

.url {
    background-image: url(../img/client/url.svg);
}

.ministry {
    background-image: url(../img/client/ministry.svg);
}

.koreasecurities {
    background-image: url(../img/client/koreasecurities.svg);
}

.samsung {
    background-image: url(../img/client/samsung.svg);
}

.sc {
    background-image: url(../img/client/sc.svg);
}

.thek {
    background-image: url(../img/client/thek.svg);
}

.kwater {
    background-image: url(../img/client/kwater.svg);
}

.bank_of {
    background-image: url(../img/client/bank_of.svg);
}

.Shinhan {
    background-image: url(../img/client/Shinhan.svg);
}

.ipet {
    background-image: url(../img/client/ipet.svg);
}

.sk {
    background-image: url(../img/client/sk.svg);
}

.lg_cns {
    background-image: url(../img/client/lg_cns.svg);

}

.hyundai_marine {
    background-image: url(../img/client/hyundai_marine.svg);
}

.heungkuk_life {background-image: url(../img/client/heungkuk_life.svg);}

.heungkuk_fire {background-image: url(../img/client/heungkuk_fire.svg);}

.pps {background-image: url(../img/client/pps.svg);}

.kb {background-image: url(../img/client/kb.svg);}

.nonghyup {background-image: url(../img/client/nonghyup.svg);}

.kb_card {background-image: url(../img/client/kb_card.svg);}

.konkuk_univ {background-image: url(../img/client/konkuk_univ.svg);}

.posid {background-image: url(../img/client/posid.svg);}

.gmarket {background-image: url(../img/client/gmarket.svg);}

.sk_telecom {background-image: url(../img/client/sk_telecom.svg);}

.shinhan_card {background-image: url(../img/client/shinhan_card.svg);}

.kakaopay_stock {background-image: url(../img/client/kakaopay_stock.svg);}

.kakaopay_ins {background-image: url(../img/client/kakaopay_ins.svg);}



.updating {
    display: none;
    background-image: url(../img/client/updating.svg);
}

.up {
    display: none;
}

.client_none {
    display: none;
}

#daumRoughmapContainer1547442562662 {
    width: 100%;
    margin: 0 auto;
    background: #ccc;
}


.footer_inner {
    border: none;
}

.footer_inner h2 {
    color: #333;
}

.pure-group {
    float: left;
    width: 50%;
    padding: 20px;
}

.group_three {
    width: 100%;
}

.pure-group label {
    display: block;
    width: 100%;
    padding-bottom: 20px;
    font-size: 16px;
}

.pure-group input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px
}

.group_three textarea {
    display: block;
    height: 150px;
    margin-bottom: 40px;
    width: 100%;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px
}

.form-elements::after {
    display: block;
    content: '';
    clear: both;
}

.form-elements button {
    display: block;
    background: #ffff;
    margin: 0px auto;
    padding: 10px 40px;
    background: #086cfd;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    width: 240px;
}


/*================================================================
                Footer
==================================================================*/
#footer {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 10;
    background: #f6f6f6;
    padding: 30px 100px;
    color: #777;
    font-size: 13px;
    cursor: default;
}

.copy_logo {
    width: 150px;
    height: 40px;
    margin: 0 20px 0 0;
    font-size: 0;
    text-indent: -999em;
    background: url(../img/logo_footer.png) no-repeat center center/contain;
}

.address {
    padding-top: 7px;
}

.address span {
    padding-right: 7px;
    line-height: 24px;
}

.footer_right {
    padding-top: 60px;
    font-size: 12px;
}

/*================================================================
                Back To Top Button
==================================================================*/
.backToTopButton {position:fixed;right:28px;bottom:28px;width:50px;height:50px;font-size:0;z-index: 100;	
    transform: translate(200%, 0);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;}
.backToTopButton.show {transform: translateX(0%);}
.backToTopButton:before {content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	/*animation: bounce-sm 1.5s ease-in-out infinite;*/
	border-radius:50%;border: 1px solid #cccccc;background: rgba(255, 255, 255, 1.0) url(../img/ic_arr_top.svg) no-repeat center 13px;background-size: 18px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;box-sizing: border-box;}

/*================================================================
                 Kakaotalk
==================================================================*/

    .kakao-btn {position:fixed;right:28px;bottom:90px;width:50px;height:50px;font-size:0;z-index: 100;}
        .kakao-btn:before {content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
        /*animation: bounce-sm 1.5s ease-in-out infinite;*/
        border-radius:50%;border: 1px solid solid	#FFEB2A; background: rgba(255, 235, 42) url(../img/ic_kakao_ch.svg) no-repeat center 13px;background-size: 25px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;box-sizing: border-box;}

/*================================================================
                 Pine RegTech
==================================================================*/
.pine_regtech_product_2 &gt; ul &gt; li:nth-child(1) &gt; ul &gt; li:nth-child(1) {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-right: 2px solid #049dbf;
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;

}

.pine_regtech_product_2 &gt; ul &gt; li:nth-child(2) &gt; ul &gt; li:nth-child(1) {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-right: 2px solid #049dbf;
    border-bottom: 2px solid #049dbf;
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;
}

.pine_regtech_product_2 &gt; ul &gt; li:nth-child(3) &gt; ul &gt; li:nth-child(1) {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid #049dbf;
    border-bottom: 2px solid #049dbf;
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;

}

.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(2),
.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(3),
.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(4),
.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(5),
.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(6),
.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li:nth-child(7) {
    background: #f5f5f5;
    margin: 10px 0;
    padding: 10px;
    line-height: 24px;
    color: #888;
    font-size: 15px;
}



.pine_regtech_product_2 &gt; ul &gt; li {
    width: 33.33%;
    float: left;
    padding: 2%;
}

.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li &gt; stong {
    font-size: 24px;
    font-weight: bold;
    color: #049dbf;
}


.pine_regtech_product_2 &gt; ul &gt; li &gt; ul &gt; li &gt; p {
    line-height: 24px;
    color: #888;
    font-size: 15px;
    font-weight: 300px;
    padding-top: 10px;
}


.pine_regtech_product_0 {
    border-bottom: 2px dashed #049dbf;
    padding-bottom: 30px;
}



.pine_regtech_product {
    padding-top: 0;
}


.pine_regtech_intro {
    background-color: #049dbf;
}



.pine_regtech_intro .intro_content {
    /*background-image: url(../img/cypress_bk.gif);*/
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 500px 900px;

}

.pine_regtech_product_0 &gt; ul &gt; li {
    width: 33.33%;
    float: left;
    padding: 2%;
}



.pine_regtech_product_0 &gt; ul:nth-child(2) &gt; li {
    width: 100%;
    padding: 2%;
}


.pine_regtech_product_0 &gt; ul &gt; li &gt; img {
    width: 75px;
}

.pine_regtech_product_0 &gt; ul &gt; li &gt; p {
    line-height: 24px;
    color: #888;
    font-size: 15px;
    font-weight: 300px;
    padding-top: 10px;
}



.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(1),
.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(2),
.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(3),
.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(4) {
    width: 24.2%;
    float: left;
    background: #f5f5f5;
    margin-right: 1%;
    margin-bottom: 1%;
    padding: 20px 10px;
    min-height: 210px;
    max-height: 300px;

}

.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(5),
.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(6) {
    color: #fff;
}



.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(4) {
    margin-right: 0;
}


.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(5) {

    clear: both;
    background: #049dbf;
    opacity: 0.6;
    width: 100%;
    margin-top: 1%;
    padding: 20px 10px;
    box-sizing: border-box;
}


.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li:nth-child(6) {
    background: #049dbf;
    opacity: 0.6;
    width: 100%;
    margin-top: 1%;
    padding: 20px 10px;
}

.pine_regtech_product &gt; ul &gt; li &gt; ul {
    border: 1.5px solid #b9b9b9;
    padding: 1%;
}


.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li &gt; img {
    width: 60px;
}

.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; p {
    line-height: 24px;
    color: #888;
    font-size: 15px;
    font-weight: 300px
}

.pine_regtech_product &gt; ul &gt; li &gt; ul &gt; li &gt; p &gt; strong {
    padding-top: 10px;
    padding-bottom: 5ox;
    display: block;
    color: #049dbf;
    font-size: 17px;
}



.pine_regtech_product &gt; ul &gt; li:nth-child(2) {
    background: #049dbf;
    opacity: 0.8;
    width: 100%;
    margin-top: 1%;
    padding: 20px 10px;
    color: #fff;
}

.pine_regtech_product &gt; ul &gt; li:nth-child(3) {
    background: #049dbf;
    width: 100%;
    margin-top: 1%;
    padding: 20px 10px;
    color: #fff;
}


.pine_regtech_product &gt; ul:nth-child(2) &gt; li &gt; p {
    color: #fff;
}

.pine_regtech_point &gt; ul &gt; li {
    width: 33.33%;
    float: left;
}


.pine_regtech_point &gt; ul &gt; li &gt; img {
    width: 60px;
}


.pine_regtech_point &gt; ul &gt; li &gt; p {
    line-height: 24px;
    color: #888;
    font-size: 15px;
    font-weight: 300px
}

.pine_regtech_point &gt; ul &gt; li &gt; p &gt; strong {
    padding-top: 10px;
    padding-bottom: 5ox;
    display: block;
    color: #049dbf;
    font-size: 17px;
}


.pine_title {
    text-align: center;
    background: #b9b9b9;
    margin-top: 40px;
    padding: 20px;
    color: #fff;
}

/*================================================================
                 cypress
==================================================================*/
.cypress_intro {background-color: #008998;}

.cypress_intro .intro_content {
    max-width: 1200px;
    display: flex; justify-content: space-between;
    align-items: center; padding: 0 68px;
    background-image: url(../img/cypress_bk.gif);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 600px 1080px;
}

.cypress_intro .main_text {position: static; padding-left: 0; margin-left: 0;}


.product {
    position: relative;
    min-height: 650px;display: grid;margin-top: 50px;
    padding: 0;    
}

.product.in-view {animation: rotate 8.0s ease-in-out;}
.product.in-view img.center-cube.core {animation: rotate-reverse 8.0s ease-in-out;}
.product.in-view .cube-title, .product.in-view .cube_itme {animation: rotate-reverse 8.0s ease-in-out;}

.product img.center-cube {position: absolute;top: 50%;left: 50%;height: 400px;margin: -200px 0 0 -200px;}

.product .cube-title {position: relative;color:#049CBE;font-size:30px;font-weight:bold;margin: auto;}


.product img {
    width: 400px;
}

.product ul {
    display: none;
}

.product p {
    line-height: 24px;
    padding-top: 10px;
    width: 160px;
}

.cube_itme {position: absolute; color: #289E9E; font-size: 13px; font-weight: 500;}
.cube_itme p {line-height: 1.4;}
.cube_itme img {width: 60px;}

.cube_itme .img_box {width: 60px;height: 60px;margin: 0 auto;}
.cube_itme .img_box img {top:0;left:0;}

.cube1 {
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -320px;
}

.cube2 {
    top: 0;    
    left: 50%;
    margin-left: -80px;    
}

.cube3 {
    top: 50%;
    right: 50%;
    margin-top: -180px;
    margin-right: -320px;
}

.cube4 {
    bottom: 50%;
    left: 50%;
    margin-bottom: -240px;
    margin-left: -320px;
}

.cube5 {
    bottom: 50%;
    right: 50%;
    margin-bottom: -240px;
    margin-right: -320px;
}

.cube6 {
    bottom: 0;    
    left: 50%;
    margin-left: -80px;    
}

.architecture img {
    width: 100%;
}

.point &gt; ul &gt; li {
    float: left;
    width: 50%;
    height: 300px;
    padding: 20px 0 40px 0;    
}

.point.big_data &gt; ul &gt; li {height:auto;}

.point.cypress-form &gt; ul &gt; li &gt; .img_box {width: 100px; height: 100px; background-color: #ECF5FF; margin: 0 auto 24px;border-radius:50%;}

.point.in-view .img_box {animation: scale 2.0s ease-in-out;}
.point.in-view &gt; ul &gt; li:nth-child(2) &gt; .img_box {animation-delay: .5s;}
.point.in-view &gt; ul &gt; li:nth-child(3) &gt; .img_box {animation-delay: 1.0s;}

.point.col-3 &gt; ul &gt; li {width: 33.33333%;}

.point.in-view &gt; ul &gt; li {animation: bounce-md 2.0s ease-in-out;}
.point.in-view &gt; ul &gt; li:nth-child(2) {animation-delay: .5s;}
.point.in-view &gt; ul &gt; li:nth-child(3) {animation-delay: 1.0s;}
.point.in-view &gt; ul &gt; li:nth-child(4) {animation-delay: 1.5s;}
.point.in-view &gt; ul &gt; li:nth-child(5) {animation-delay: 2.0s;}

.point.in-view &gt; ul &gt; li &gt; img {animation: scale 2.0s ease-in-out;}
.point.in-view &gt; ul &gt; li:nth-child(2) &gt; img {animation-delay: .5s;}
.point.in-view &gt; ul &gt; li:nth-child(3) &gt; img {animation-delay: 1.0s;}
.point.in-view &gt; ul &gt; li:nth-child(4) &gt; img {animation-delay: 1.5s;}
.point.in-view &gt; ul &gt; li:nth-child(5) &gt; img {animation-delay: 2.0s;}

.point &gt; ul &gt; li.in-view &gt; .img_box {animation: scale 2.0s ease-in-out;}
.point &gt; ul &gt; li:nth-child(2).in-view &gt; .img_box {animation-delay: .5s;}
.point &gt; ul &gt; li:nth-child(3).in-view &gt; .img_box {animation-delay: 1.0s;}
.point &gt; ul &gt; li:nth-child(4).in-view &gt; .img_box {animation-delay: 1.5s;}
.point &gt; ul &gt; li:nth-child(5).in-view &gt; .img_box {animation-delay: 2.0s;}

.point &gt; ul {display: flex;flex-wrap: wrap;}
.point &gt; ul &gt; li &gt; img {
    height: 120px;
    display: block;
    margin: 0 auto;
    padding-bottom: 40px;
}

.point &gt; ul &gt; li &gt; .img_box {width: 80px;height: 80px;margin: 0 auto 40px auto;}

.point.big_data &gt; ul &gt; li &gt; img {height: 132px; padding-bottom: 32px;}


.point_txt li {
    line-height: 24px;
    font-size: 14px;
    color: #505050;
    max-width: 400px;
    text-align: center;
    margin: 0 auto;
}


.point &gt; ul &gt; li &gt; strong {
    display: block;
    padding-bottom: 20px;
    font-size: 16px;
}


.point ul::after {
    display: block;
    content: '';
    clear: both;
}

.clientcard {max-width: 1280px; letter-spacing: -0.5px;}
.clientcard ul {display: flex;flex-wrap: wrap;}
.clientcard li {display: flex; flex: 0 0 25%;padding: 16px;}
.clientcard .card {flex: 1 1 auto; border-radius: 15px; overflow: hidden; background-color: #F9F9F9; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);}
.clientcard .img_card {display: flex; align-items: center; justify-content: center;min-height: 100px; background-color: #ffffff; padding: 12px;}
.cardcnts {display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70px;padding: 12px;}
.cardcnts p {font-size: 14px; font-weight: 600; line-height: 1.3;}
.cardcnts span {color: #484848; font-size: 12px; font-weight: 500; line-height: 1.5;}

.maintain.in-view &gt; ul &gt; li {animation: bounce-md 2.0s ease-in-out;}
.maintain.in-view &gt; ul &gt; li:nth-child(2) {animation-delay: .5s;}
.maintain.in-view &gt; ul &gt; li:nth-child(3) {animation-delay: 1.0s;}
.maintain.in-view &gt; ul &gt; li:nth-child(4) {animation-delay: 1.5s;}

.maintain.in-view .manpower.lightbulb {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;animation-delay: .5s;}
.maintain.in-view .manpower.cloud {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;animation-delay: 1.0s;}
.maintain.in-view .manpower.circle {animation: rotate 2.0s linear;animation-iteration-count: 3;}

.maintain.in-view .service.arrow1, 
.maintain.in-view .service.arrow2, 
.maintain.in-view .service.arrow3 {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;} 
.maintain.in-view .service.cloud {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;}
.maintain.in-view .service.balloon {animation: scale 2.0s linear;animation-iteration-count: 3;}
.maintain.in-view .service.gear {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.maintain.in-view .report.user {animation: scale-lg 2.0s linear;animation-iteration-count: 3;animation-delay: .5s;}
.maintain.in-view .report.cloud1 {animation: bounce-md 2.0s linear;animation-iteration-count: 3;animation-delay: 1.0s;}
.maintain.in-view .report.cloud2 {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;animation-delay: 1.5s;}
.maintain.in-view .report.bar {animation: scale-lg 2.0s linear;animation-iteration-count: 3;animation-delay: 2.0s;}
.maintain.in-view .report.thumb {animation: scale-lg 2.0s linear;animation-iteration-count: 3;animation-delay: 2.2s;}
.maintain.in-view .service.arrow1 {animation-delay: 0.5s;}
.maintain.in-view .service.arrow2 {animation-delay: 1.0s;}
.maintain.in-view .service.arrow3 {animation-delay: 1.5s;}
.maintain.in-view .service.cloud {animation-delay: 2.0s;}

.maintain.in-view .consulting.frame,
.maintain.in-view .consulting.arrow1, 
.maintain.in-view .consulting.arrow2, 
.maintain.in-view .consulting.arrow3 {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;} 
.maintain.in-view .consulting.cloud {animation: bounce-sm 2.0s linear;animation-iteration-count: 3;}
.maintain.in-view .consulting.people {animation: rotate 2.0s linear;animation-iteration-count: 3;}

.maintain.in-view .consulting.arrow1 {animation-delay: 0.5s;}
.maintain.in-view .consulting.arrow2 {animation-delay: 1.0s;}
.maintain.in-view .consulting.arrow3 {animation-delay: 1.5s;}
.maintain.in-view .consulting.cloud.bottom {animation-delay: 2.0s;}
.maintain.in-view .consulting.cloud.top {animation-delay: 2.5s;}

.img_box {position: relative;}
.img_box img {position: absolute;top: 0;left: 0;}
.maintain ul li .img_box {position: relative;width: 80px;height: 120px;margin: 0 auto 40px auto;}
.maintain ul li .img_box img {padding:0;position: absolute;}
.maintain ul li .manpower.lightbulb {width: 32px;top: 0;left: 0;}
.maintain ul li .manpower.circle {width: 55px;top: 40px;left: 12px;}
.maintain ul li .manpower.cloud {width: 44px;top: 16px;right : 0px;left: auto;}
.maintain ul li .service.arrow1 {width: 17px;top:14px;left:0;}
.maintain ul li .service.arrow2 {width: 20px;top:2px;left:31px;}
.maintain ul li .service.arrow3 {width: 23px;top:34px;right:0;left: auto;}
.maintain ul li .service.cloud {width: 71px;top:16px;left:8px;}
.maintain ul li .service.balloon {width: 42px;top:38px;left:10px;}
.maintain ul li .service.gear {width: 42px;bottom:2px;right:0;top: auto;left: auto;}
.maintain ul li .report.user {width: 15px;top:14px;left:42px;}
.maintain ul li .report.cloud1 {width: 13px;top:54px;left:0px;}
.maintain ul li .report.cloud2 {width: 45px;top:44px;right:0px;left: auto;}
.maintain ul li .report.thumb {width: 34px;top:56px;left:1px;}
.maintain ul li .report.bar {width: 37px;top:80px;left:27px;}

.maintain ul li .consulting.arrow1 {width: 16px;top: 33px;left: 0px;}
.maintain ul li .consulting.arrow2 {width: 19px;top: 4px;left: 8px;}
.maintain ul li .consulting.arrow3 {width: 23px;top: 0px;left: 54px;}
.maintain ul li .consulting.cloud.bottom {width: 17px;top: 58px;left: 0px;}
.maintain ul li .consulting.cloud.top {width: 15px;top: 25px;left: 51px;}
.maintain ul li .consulting.people {width: 56px;top: 33px;left: 20px;}

.maintain ul li {
    float: left;
    width: 25%;
    padding: 20px 0 40px 0;
    line-height: 27px;
    font-size: 14px;
    color: #505050;
}

.maintain ul li img {
    width: 80px;
    display: block;
    margin: 0 auto;
    padding-bottom: 40px;
}

.maintain ul li strong {
    display: block;
    padding-bottom: 20px;
    font-size: 16px;
}


.maintain ul::after {
    display: block;
    content: '';
    clear: both;
}

.function_img {display: flex;flex-wrap: wrap;}

.function_img &gt; li {position:relative;
    float: left;
    width: 50%;
    padding: 10px;
    font-size: 14px;
    line-height: 21px
}

.function_img .tit-center {position:absolute;top:50%;left:50%;color: #000000;font-size: 22px;font-weight: 700;transform:translate(-50%, -50%);padding: 0;}
.function_img .tit-center.fadeInUp {transform: translate3d(-50%, 80px, 0);}
.function_img .tit-center.in-view {transform: translate3d(-50%, -50%, 0);}



.function_img.col-2 {margin-left: -10px;margin-right: -10px;}

.w100 &gt; li {
    width: 100%;
    text-align: left;
}

.function_img &gt; li &gt; ul &gt; li {
    text-align: left;
    padding-bottom: 12px;
    font-size: 13px;
}


.function_img::after {
    display: block;
    content: '';
    clear: both;
}

.function_img span {
    display: block;
    padding-bottom: 12px;
    font-weight: bold;
    color: #f88d3e;
}

.function_img li:nth-child(3) span,
.function_img li:nth-child(4) span {
    padding-top: 40px;
}

.main_function, .architecture_ads {padding-bottom: 60px;}

.main_function p, .architecture_ads p {
    font-size: 15px;
    text-align: left;
    padding-bottom: 40px;
    color: #000000;
    line-height: 28px;
}

.main_function.form p {line-height: 1.5;}

.main_function strong, .architecture_ads strong {
    display: block;
    padding-bottom: 8px;
    font-size: 20px; font-weight: bold; 
    /* font-weight: 600; */
}


.main_function &gt; img {
    display: block;
    width: 100%;
    border: 0px solid #888888;

}

.function_img &gt; img {
    display: block;
    width: 100%;
    border: 0px solid #888888;
    box-shadow: 5px 5px 10px 0px #e5e5e5;
    border-radius: 10px
}


.function_img &gt; li &gt; img {
    display: block;
    width: 100%; height: 100%;
    border: 0px solid #888888;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 10px;
}

.function_img .img_box {width: 100%;height: 100%;box-shadow: 5px 5px 10px 0px #e5e5e5;border-radius: 10px;background-color: #D2EDFC;}
.img_box .dummy, .img_box .img_bx {opacity: 0;transition: all 1.0s ease-out;}
.img_box .img_bx {position: absolute; display: block;}
.dummy.frame {position: relative;}
.dummy.center {transform: translate3d(0px, 200px, 0px);}
.dummy.gear.one {width: 5%;left: 38%;top: 6%;}
.dummy.gear.two {width: 6%;left: 73%;top: 77%;}
.dummy.gear.three {width: 3%;left: 77%;top: 71%;}
.dummy.round.one {width: 4%;left: 17%;top: 54%;}
.dummy.round.two {width: 4.8%;left: 29.2%;top: 52%;}
.dummy.round.three {width: 6.6%;left: 27.2%;top: 82.5%;}
.dummy.round.four {width: 4.2%;left: 77.6%;top: 54.6%;}
.dummy.top_docu {transform: translate3d(-100%, 0, 0);}
.dummy.top_graph {transform: translate3d(100%, 0, 0);}


.img_bx.dummy_top_man {width: 5.6%;top: 9.4%;left: 51%;transform: translate3d(0, -100%, 0px);}

.img_bx.dummy_btm_man {width: 5.3%;top: 65.9%;left: 35.2%;transform: translate3d(0, 300%, 0px);}


.dummy.btm_globe {transform: translate3d(-100%, 100%, 0);}
.dummy.side {transform: translate3d(100%, 0, 0px);}
.dummy.paperplane {transform: translate3d(100%, -100%, 0);}
.dummy.btm_monitor {transform: translate3d(0, 100%, 0);}



.img_box.in-view .dummy, .img_box.in-view .img_bx {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.img_box.in-view .dummy.center {}
.img_box.in-view .dummy.frame {animation: rotate 3.0s linear;animation-iteration-count: 2;}
.img_box.in-view .dummy.gear {animation: rotate-reverse 3.0s linear;animation-iteration-count: 3;}
.img_box.in-view .dummy.round {animation: rotate-reverse 3.0s linear;animation-iteration-count: 3;}

.img_box.in-view .dummy.top_docu {transition-delay:0.5s}
.img_box.in-view .dummy.top_graph {transition-delay:1.0s}

.img_box.in-view .img_bx.dummy_top_man {transition-delay:1.5s;}
.img_box.in-view .dummy.top_man {animation: bounce-md 2s ease-in-out;animation-iteration-count: 4;animation-delay:0.8s;}

.img_box.in-view .dummy.btm_globe {transition-delay:2.0s}

.img_box.in-view .img_bx.dummy_btm_man {transition-delay:2.5s;}
.img_box.in-view .dummy.btm_man {animation: bounce-md 2s ease-in-out;animation-iteration-count: 4;animation-delay:1.6s;}
.img_box.in-view .dummy.side {transition-delay:3.0s}
.img_box.in-view .dummy.paperplane {transition-delay:4.0s}
.img_box.in-view .dummy.btm_monitor {transition-delay:5.0s}




/*================================================================
                  cypressForm
==================================================================*/
/* .cypress_intro .img-device-bundle {position: absolute; top: 50%; right: 0; width: 460px; height: 460px; margin-top: -230px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2) url(../img/device_bundle.svg) no-repeat center; background-size: 75%;
    animation: coin-flip 5s infinite linear;} */

.cypress_intro .img-device-bundle {width: 440px; height: 300px;
    animation: fadeInUp-sm 2.5s ease-in-out;animation-delay:0.6s;background: url(../img/device_bundle.svg) no-repeat center;filter: drop-shadow(3px 5px 5px rgba(0,0,0,0.3));}

.cypress_intro.form {background-color: #049cbe;}
.cypress_intro.form .intro_content {justify-content: space-between; background-image: none;}
.cypress_form.diagram {display: flex;flex-wrap: wrap;color: #333333;font-size: 15px;}
.cypress_form.diagram &gt; [class*="col_"] {display: flex;flex-direction: column;padding: 5px;}
.cypress_form.diagram &gt; .col_sm {flex: 0 0 18%;max-width:18%;}
.cypress_form.diagram &gt; .col_lg {flex: 0 0 62%;max-width:62%;}
.cypress_form.diagram &gt; .col_md {flex: 0 0 20%;max-width:20%;}

.cypress_form.diagram &gt; .col_lg.in-view {transition-delay: 0.5s;}
.cypress_form.diagram &gt; .col_md.in-view {transition-delay: 1.0s;}

.cypress_form.diagram &gt; [class*="col_"] .diagram_box {flex: 1 1 auto;}
.cypress_form.diagram &gt; [class*="col_"] .diagram_box.flat {flex: 0 0 auto;}
.cypress_form.diagram img {/*max-width:300px;*/max-height: 200px;}
.cypress_form.diagram img.img_internet_mobile {max-height: 120px;margin: auto;padding: 20px;}

.diagram_box {border:3px solid #049cbe;border-top: 0;}
.diagram_box.bg_gray {background-color: #eeeeee;}
.diagram_box.flex {display:flex;flex-wrap: wrap;}
.diagram_box.flex.align_center {flex-direction: column;}
.diagram_box .icon {display:inline-block;font-weight:500;background-color:#eeeeee;border-radius:10px;background-repeat:no-repeat;padding: 10px 0px 60px;white-space: nowrap;}
.col_half.icon {width: calc(50% - 5px);float: left;}
.col_half.icon:nth-of-type(odd) {margin-right: 5px;}
.col_half.icon:nth-of-type(even) {margin-left: 5px;}
.icon.doc_print {background-image: url(../img/doc_print.svg);background-position:center bottom 8px;}
.icon.post {background-image: url(../img/post.svg);background-position:center bottom 16px;}
.icon.ecm {background-image: url(../img/ecm.svg);background-position:center bottom 12px;}
.icon.edms {background-image: url(../img/edms.svg);background-position:center bottom 6px;}

.diagram_box ~ .diagram_box {margin:10px 0 0 0;}
.diagram_title {color: #ffffff;min-width: 100%;min-height: 42px;font-size: 20px;background-color: #049cbe;padding: 10px 4px 10px 4px;}
.diagram_box .diagram_innerbx {display: flex;flex-wrap: wrap;padding:10px;border-radius:6px;}
.diagram_innerbx:after, .diagram_innerbx .inner:after {content:"";display:block;width:100%;clear:both;}
.diagram_innerbx.col_half {padding: 10px 10px 5px 10px;}
.diagram_box.bg_gray .diagram_innerbx {background-color: #ffffff;}
.diagram_innerbx &gt; ul {min-width:100%;}
.diagram_innerbx &gt; ul &gt; li ~ li {margin:10px 0 0 0;}
.diagram_innerbx .inner.iconbx {min-width: 100%;margin:0 0 15px 0;}
.diagram_listbx {border-radius:6px;background-color:#eeeeee;padding:10px 10px 6px;overflow: hidden;}
.diagram_listbx ~ .diagram_listbx {margin:10px 0 0 0;}
.diagram_detailbx {position:relative;min-width: 100%;border:1px dashed #0098FF;margin: 0 0 5px 0;padding: 6px 6px 3px 6px;clear: both;}
.diagram_detailbx:after {content:"";display:block;width:100%;clear:both;}
.diagram_detailbx .tit {position:absolute;top: -10px;left: 7px;background-color: #ffffff;padding: 0 3px;color: #0098FF;font-size: 14px;font-weight: 500;}


.diagram_innerbx .diagram_sub_title, .diagram_listbx p, .diagram_listbx p span {opacity: 0;transition: all 1.0s ease-out;}
.diagram_listbx p span {transform: translate3d(150px, 0, 0);}

.diagram_innerbx .diagram_sub_title, .diagram_listbx .diagram_sub_title {transform: translate3d(50%, 0, 0);}

.diagram_listbx.in-view p, .diagram_listbx.in-view p span {opacity: 1;transform: translate3d(0, 0, 0);}

.diagram_listbx.in-view p:nth-of-type(2) .tit {transition-delay:0.2s;}
.diagram_listbx.in-view p:nth-of-type(2) span {transition-delay:0.4s;}
.diagram_listbx.in-view p:nth-of-type(3) .tit {transition-delay:0.6s;}
.diagram_listbx.in-view p:nth-of-type(3) span {transition-delay:0.8s;}
.diagram_listbx.in-view p:nth-of-type(4) .tit {transition-delay:1.0s;}
.diagram_listbx.in-view p:nth-of-type(4) span {transition-delay:1.2s;}
.diagram_listbx.in-view p:nth-of-type(5) .tit {transition-delay:1.4s;}
.diagram_listbx.in-view p:nth-of-type(5) span {transition-delay:1.6s;}


.col_lg_inner {flex:0 0 60%;padding:5px 0px 5px 5px;}
.col_lg_inner &gt; ul {height: 100%;}
.col_lg_inner ul &gt; li {height: 50%;padding:5px;}
.col_lg_inner ul &gt; li .diagram_innerbx {height:100%;}

.col_sm_inner {flex:0 0 40%;padding:5px 5px 5px 0px;}
.col_sm_inner &gt; ul {height: 100%;display: flex;flex-direction: column;}
.col_sm_inner ul &gt; li {flex: 0 0 auto;padding:5px;}
.col_sm_inner ul &gt; li:last-of-type {flex:1 1 auto;}
.col_sm_inner ul &gt; li .diagram_innerbx {height:100%;}


.diagram_sub_title {min-width: 100%;font-weight: 500;margin-bottom: 10px;}

.col_half .diagram_chip {float:left;width:calc(50% - 3px);max-width: calc(50% - 3px);text-align:center}
.col_half .diagram_chip:nth-of-type(odd) {margin: 3px 3px 3px 0;}
.col_half .diagram_chip:nth-of-type(even) {margin: 3px 0px 3px 3px;}


.flat .diagram_chip {display: inline-flex;justify-content: center; align-items: center;color: #333333;font-size: 12px;padding: 6px 4px;background-color: #dddddd;}
.flat .diagram_chip span {height:auto;background-color:transparent;padding:0;opacity: 0;transition: all 1.0s ease-out;}

.flat .diagram_chip:nth-of-type(odd) span {transform: translate3d(-50px, 0, 0);}
.flat .diagram_chip:nth-of-type(even) span {transform: translate3d(-50px, 0, 0);}


.flat .in-view .diagram_sub_title, .flat .in-view .diagram_chip span {opacity: 1;transform: translate3d(0, 0, 0);}

.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(1) span {transition-delay:0.2s;}
.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(2) span {transition-delay:0.4s;}
.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(3) span {transition-delay:0.6s;}
.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(4) span {transition-delay:0.8s;}
.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(5) span {transition-delay:1.0s;}
.flat ul li:nth-of-type(1) .in-view .diagram_chip:nth-of-type(6) span {transition-delay:1.2s;}

.flat ul li:nth-of-type(2) .in-view .diagram_sub_title {transition-delay:0.4s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(1) span {transition-delay:1.2s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(2) span {transition-delay:1.4s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(3) span {transition-delay:1.6s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(4) span {transition-delay:1.8s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(5) span {transition-delay:2.0s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(6) span {transition-delay:2.2s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(7) span {transition-delay:2.4s;}
.flat ul li:nth-of-type(2) .in-view .diagram_chip:nth-of-type(8) span {transition-delay:2.6s;}

.flat ul li:nth-of-type(3) .in-view .diagram_sub_title {transition-delay:0.6s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(1) span {transition-delay:1.6s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(2) span {transition-delay:1.8s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(3) span {transition-delay:2.0s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(4) span {transition-delay:2.2s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(5) span {transition-delay:2.4s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(6) span {transition-delay:2.6s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(7) span {transition-delay:2.8s;}
.flat ul li:nth-of-type(3) .in-view .diagram_detailbx .diagram_chip:nth-of-type(8) span {transition-delay:3.0s;}

.flat ul li:nth-of-type(3) .in-view &gt; .diagram_chip:nth-of-type(1) span {transition-delay:1.8s;}
.flat ul li:nth-of-type(3) .in-view &gt; .diagram_chip:nth-of-type(2) span {transition-delay:2.0s;}
.flat ul li:nth-of-type(3) .in-view &gt; .diagram_chip:nth-of-type(3) span {transition-delay:2.2s;}
.flat ul li:nth-of-type(3) .in-view &gt; .diagram_chip:nth-of-type(4) span {transition-delay:2.4s;}

.col_half.in-view .diagram_chip:nth-of-type(1) span {transition-delay:1.0s;}
.col_half.in-view .diagram_chip:nth-of-type(2) span {transition-delay:1.2s;}
.col_half.in-view .diagram_chip:nth-of-type(3) span {transition-delay:1.4s;}
.col_half.in-view .diagram_chip:nth-of-type(4) span {transition-delay:1.6s;}



.diagram_detailbx .diagram_chip {color:#ffffff;font-size: 12px;background-color:#0098FF;}
.diagram_chip {display: inline-block;width: 100%;color:#ffffff;font-size:13px;border-radius:4px;margin: 5px 0;text-align: left; background-color: #049cbe;overflow: hidden;}
.diagram_chip span {display:inline-block;height: 35px;padding: 10px 0px 10px 0px;background-color: #049cbe;border-radius:0px 4px 4px 0px;vertical-align: middle;}
.diagram_chip .tit {background-color:#005F74;margin:0 8px 0 0;padding:10px 8px;border-radius:4px 0px 0px 4px;transform: translate3d(-50px, 0, 0);}
.diagram_chip.full {padding:0;border-radius:4px 4px 4px 4px;text-align:center;}



/*================================================================
                  ABOUT
==================================================================*/
.about_intro {
    /* width: 100%;
    height: 100%; */
    background-color: #2c3846;
    background-image: url(../img/background.jpg);
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.about_intro .main_text {display:none; animation:none;}

.strategy &gt; ul &gt; li {
    float: left;
    width: 33.33%;
    line-height: 31px;
}

.strategy.fadeInUp {transition: all 1000ms ease-out;}

.strategy.fadeInUp.in-view &gt; ul &gt; li {animation: bounce-sm 2.0s ease-in-out;animation-iteration-count: 1;}
.strategy.fadeInUp.in-view &gt; ul &gt; li:nth-child(2) {animation-delay: 1.0s;}
.strategy.fadeInUp.in-view &gt; ul &gt; li:nth-child(3) {animation-delay: 2.0s;}
.strategy.fadeInUp.in-view &gt; ul &gt; li &gt; p {animation: scale 2.0s ease-in-out;}
.strategy.fadeInUp.in-view &gt; ul &gt; li:nth-child(2) &gt; p {animation-delay: 1.0s;}
.strategy.fadeInUp.in-view &gt; ul &gt; li:nth-child(3) &gt; p {animation-delay: 2.0s;}

.strategy &gt; ul &gt; li &gt; p {
    width: 190px;
    height: 190px;
    border: 5px outset #049cbe;
    border-radius: 50%;
    line-height: 31px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 35px;
    background: #fff;
}

.strategy &gt; ul &gt; li &gt; p &gt; img {
    width: 70px;
    display: block;
    margin: 0 auto;
    padding-bottom: 15px;
}

.strategy &gt; ul &gt; li strong {
    color: #666;
    font-size: 24px;
}

.strategy .img_box {display: block;width: 70px;height: 70px;margin: 0 auto 15px auto;}
.strategy .img_box img {opacity: 0;transition: all 1.0s ease-out;}

.img_box .challenge.arrow {transform: translate3d(0, 200%, 0);}
.img_box .challenge.cloud {transform: translate3d(0, -100%, 0);}
.img_box .challenge.side {transform: translate3d(0, -200%, 0);}
.img_box .challenge.side_left {transform: translate3d(-200%, 0, 0);}
.img_box .challenge.side_right {transform: translate3d(200%, 0, 0);}
.img_box .challenge.flag {transform: translate3d(0, -200%, 0);}

.img_box .revenue.coin {width:27px;top:auto;left:auto;right:0;bottom:0;}
.img_box .revenue.drum1, 
.img_box .revenue.drum2, 
.img_box .revenue.drum3 {transform: translate3d(0, -200%, 0);}
.img_box .revenue.side1 {transform: translate3d(-200%, 0, 0);}
.img_box .revenue.side2 {transform: translate3d(0, -200%, 0);}
.img_box .revenue.side3 {transform: translate3d(200%, 0, 0);}
.img_box .revenue.arrow1, 
.img_box .revenue.arrow2, 
.img_box .revenue.arrow3 {transform: translate3d(0, 200%, 0);}
.img_box .revenue.cloud {transform: translate3d(0, -100%, 0);}

.img_box .grow.ground {transform: translate3d(0, 100%, 0);}
.img_box .grow.arrow {transform: translate3d(0, 200%, 0);}
.img_box .grow.side1 {transform: translate3d(-200%, 0, 0);}
.img_box .grow.side2 {transform: translate3d(0, -200%, 0);}
.img_box .grow.side3 {transform: translate3d(200%, 0, 0);}
.img_box .grow.stem, .img_box .grow.leaf {transform: translate3d(0, 200%, 0);}


.strategy .img_box.in-view img {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.strategy .in-view img {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.strategy .in-view .challenge.arrow.one {transition-delay: 0.1s;}
.strategy .in-view .challenge.arrow.two {transition-delay: 0.2s;}
.strategy .in-view .challenge.arrow.three {transition-delay: 0.3s;}
.strategy .in-view .challenge.cloud {transition-delay: 0.4s;}
.strategy .in-view .challenge.side_left {transition-delay: 0.5s;}
.strategy .in-view .challenge.side_right {transition-delay: 0.6s;}
.strategy .in-view .challenge.side {transition-delay: 0.7s;}
.strategy .in-view .challenge.flag {transition-delay: 0.8s;}

.strategy .in-view .revenue.coin {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
/* .strategy .in-view .revenue.arrow1, 
.strategy .in-view .revenue.arrow2, 
.strategy .in-view .revenue.arrow3 {animation: bounce-sm 2.0s linear; animation-iteration-count: 3;} */
.strategy .in-view .revenue.drum2 {transition-delay: 0.1s;}
.strategy .in-view .revenue.drum3 {transition-delay: 0.2s;}
.strategy .in-view .revenue.drum1 {transition-delay: 0.3s;}
.strategy .in-view .revenue.side1 {transition-delay: 0.4s;}
.strategy .in-view .revenue.arrow1 {transition-delay: 0.5s;}
.strategy .in-view .revenue.side2 {transition-delay: 0.6s;}
.strategy .in-view .revenue.arrow2 {transition-delay: 0.7s;}
.strategy .in-view .revenue.side3 {transition-delay: 0.8s;}
.strategy .in-view .revenue.arrow3 {transition-delay: 0.9s;}
.strategy .in-view .revenue.cloud {transition-delay: 1.0s;}

.strategy .in-view .grow.twinkle {animation: bounce-sm 2.0s linear; animation-iteration-count: 3;}
.strategy .in-view .grow.twinkle.two {animation-delay: 0.1s;}
.strategy .in-view .grow.ground {transition-delay: 0.2s;}
.strategy .in-view .grow.arrow.one {transition-delay: 0.3s;}
.strategy .in-view .grow.side1 {transition-delay: 0.4s;}
.strategy .in-view .grow.arrow.two {transition-delay: 0.5s;}
.strategy .in-view .grow.side2 {transition-delay: 0.6s;}
.strategy .in-view .grow.arrow.three {transition-delay: 0.7s;}
.strategy .in-view .grow.side3 {transition-delay: 0.8s;}
.strategy .in-view .grow.stem {transition-delay: 0.9s;}
.strategy .in-view .grow.leaf.one {transition-delay: 1.0s;}
.strategy .in-view .grow.leaf.two {transition-delay: 1.1s;}
.strategy .in-view .grow.leaf.three {transition-delay: 1.2s;}


.strategy_text li {
    background: #fff;
    padding: 18px 0;
    border-radius: 5px;
    margin: 0 20px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;overflow:hidden;
}

.strategy_text li:nth-last-child(1) {
    margin-bottom: 0px;
}

.strategy_text li p {opacity: 0;transform: translate3d(-100%, 0, 0);transition: all 1.0s ease-out;}
.strategy_text.second li p {transform: translate3d(100%, 0, 0);}
.strategy_text.third li p {transform: translate3d(100%, 0, 0);}
.strategy_text.in-view li p {opacity: 1;transform: translate3d(0, 0, 0);}

.strategy_text.in-view.first li:nth-of-type(2) p {transition-delay: 0.3s;}
.strategy_text.in-view.second li:nth-of-type(1) p {transition-delay: 0.6s;}
.strategy_text.in-view.second li:nth-of-type(2) p {transition-delay: 0.9s;}
.strategy_text.in-view.second li:nth-of-type(3) p {transition-delay: 1.2s;}
.strategy_text.in-view.second li:nth-of-type(4) p {transition-delay: 1.5s;}
.strategy_text.in-view.third li:nth-of-type(1) p {transition-delay: 1.8s;}
.strategy_text.in-view.third li:nth-of-type(2) p {transition-delay: 2.1s;}

.group img {
    width: 90%;
}

.org_chart {text-align:center;margin:0 auto;}
.org_chart ul {display: flex;flex-wrap: wrap;}
.org_chart .badge {display: inline-block;position:relative;font-size: 20px;font-weight: 700;padding: 12px 0 5px;}
.org_chart .indiv_box {display: flex; align-items: center; justify-content: center; height: calc(50% - 12px); min-height: 64px;  
    border: 4px solid #049cbe; border-radius: 16px; background-color: #ffffff; padding: 16px;}
.org_chart .indiv_box:first-child {margin-bottom: 24px; }
.org_chart .num {display:inline-block;font-family: Roboto;font-size: 18px;}


/* animation transition effect ëª¨ì…˜ íš¨ê³¼ */
.org_chart .ceo {transform: translate3d(0, 0px, 0);}
.ceo .badge {opacity: 0;transform: translate3d(0, -100px, 0);transition: all 1s ease-out;}
.org_chart .ceo:after {transition: all 2.0s ease-out;}
.ceo.in-view .badge {opacity: 1;transform: translate3d(0, 0px, 0);}
.org_chart .ceo.in-view:after {bottom: -349px;}
.org_chart .ceo {width:100%;}
.org_chart .ceo:after {content:"";position: absolute;top:79px;bottom:300%;left: calc(50% - 1px);width:0;height:auto;border-left:2px dotted #049cbe;}
.ceo .badge {width: 50%;min-width:200px;font-size:24px;font-weight: 700;padding:16px;border: 4px solid #049cbe;border-radius: 12px;}

.org_chart .dept {position: relative;padding: 16px 16px;}
.org_chart .dept.sub {width:50%;}
.org_chart .dept.col4 {width:25%;}
.org_chart .dept &gt; ul {padding: 5px; border: 4px solid #049cbe;border-radius: 16px;background-color:#ffffff;}
.org_chart .quarter1 {padding-right: 12px;}
.org_chart .quarter2 {padding-left: 12px;}
.org_chart .dept ul {position:relative;}
.org_chart .head {width:100%; display: flex; align-items: center; justify-content: center;} 
.org_chart .team {width:50%;padding: 5px;} 
.org_chart .team.col1 {width:100%;} 
.org_chart .team.col3 {width:33.333%;} 
.org_chart .item {display:inline-block;position:relative;color:#ffffff;width:100%;font-weight:500;margin:8px 0 0 0;padding: 10px 0 12px 0;background-color:#049cbe;}
.org_chart .item.chief {color:#000000;font-weight:700;border:4px solid #049cbe;background-color:#ffffff;padding: 6px 0 8px 0;border-radius: 16px 16px 0 0;}

.org_chart .hasgap-left {padding-left:24px;}
.org_chart .hasgap-right {padding-right:24px;}
.org_chart .hq_second {padding-right:0px;}

.org_chart .hasgap-left:before {content:"";position:absolute;width:24px;top:49%;left:0;border-top:2px dotted #049cbe;}
.org_chart .hasgap-right:before {content:"";position:absolute;width:24px;top:49%;right:0;border-top:2px dotted #049cbe;}


.graph::after {
    display: block;
    content: '';
    clear: both;
}

.graph {
    border-radius: 10px;
    background: #f8f8f8;
    padding: 40px 40px;
    color: #333333;
    margin-top: 60px;
    width: 90%;
}

.circles {
    text-align: left;
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding-right: 40px;
}

.circle {
    float: left;
    margin-top: 10px;
    width: 50%;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    text-align: center;
}

.circle canvas {
    vertical-align: top;
    width: 100px;
}

.circle strong {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
}

.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}

.circle span {
    display: block;
    color: #666;
    margin-top: 24px;
    font-weight: 300;
    font-size: 14px;
    height: 60px;
    box-sizing: border-box;
}

.graph table {
    float: left;
    width: 50%;
    border-left: hidden;
    border-right: hidden;
}

.graph tr,
td {
    border: 1px solid #e5e5e5;
    padding: 18px 0px;
}

.graph tr:nth-child(1) td {
    border-bottom: 1px solid #049cbe;
    border-top: 1px solid #049cbe;
}

.graph tr td {
    border-left: hidden;
    border-right: hidden;
    text-align:center;
}

.blue {
    background: repeating-linear-gradient(-45deg, #303c49, #303c49 10px, #2c3846 0, #2c3846 20px);
    padding: 0;
    border-bottom: none;
}

.greet {
    padding: 80px 0 0px 0;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    background-image: url(../img/greetings.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 350px;
}

.greet h2 {
    color: #f4f4f4;
}

.greetings {
    width: 72%;
    float: left;
}

.greetings p {
    text-align: left;
    line-height: 31px;
    color: #f5f5f5;
    z-index: 1;
    padding-bottom: 140px;
    font-weight: 200;
}

.greetings span {
    text-align: right;
    display: block;
    padding-top: 20px;
    line-height: 24px;
    font-size: 14px;
}

.greetings strong {
    display: block;
    font-size: 34px;
    padding: 40px 0;
    line-height: 52px;
}

.history_box::after {
    display: block;
    content: '';
    clear: both;
}

.history_box {
    margin-bottom: 40px;
    border-top: 1px solid #049cbe;
}

.history_content {
    float: left;
}

.history_content li {
    padding: 10px 0 15px 0;
    text-align: left;
    line-height: 26px;
}


.history_content li strong {
    font-size: 300;
    padding-right: 10px;
}

.histoy_left {
    width: 15%;
}

.histoy_left li {
    font-size: 24px;
    color: #049cbe;
}

.histoy_right {
    width: 85%;
}

.histoy_right li {
    padding-left: 15px;
}





.inner_box::after {
    display: block;
    content: '';
    clear: both;
}


.ci::after {
    display: block;
    content: '';
    clear: both;
}

.ci_left {
    float: left;
    width: 50%;
}

.ci_right {
    float: left;
    width: 50%;
}


.ci_left &gt; li:nth-child(1) {
    text-align: left;
    padding: 10px;
    font-size: 16px;
}

.ci_left &gt; li:nth-child(2) {
    text-align: center;
    padding: 0 10px;
    padding-bottom: 20px;

}

.ci_left &gt; li:nth-child(2) p {
    background: #fff;
    background-image: radial-gradient(#f5f5f5 10%, transparent 0), radial-gradient(#e5e5e5 10%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.ci_left &gt; li:nth-child(2) img {
    padding: 92.5px 0;
}


.ci_left &gt; li:nth-child(3) {
    text-align: center;
    padding: 0 10px;
    padding-bottom: 20px;

}

.ci_left &gt; li:nth-child(3) p {
    background: #fff;
    background-image: radial-gradient(#f5f5f5 10%, transparent 0), radial-gradient(#e5e5e5 10%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.ci_left &gt; li:nth-child(3) img {
    padding: 92.5px 0;
}



.ci_right &gt; li:nth-child(1) {
    text-align: left;
    padding: 10px;
}

.ci_right &gt; li:nth-child(2) {
    text-align: left;
    padding: 0 10px;
    padding-bottom: 20px;
}

.ci_right &gt; li:nth-child(3) {
    text-align: left;
    padding: 0 10px;
}

.color_set li p {
    height: 70px;
    background: #fff;
    line-height: 24px;
    padding-left: 20px;
    padding-top: 10px;
}

.color_set li:nth-child(1),
.color_set li:nth-child(2) {
    padding-bottom: 15px;
}

.color_set li:nth-child(1) p {
    border-left: 60px solid #1f4b68;
}

.color_set li:nth-child(2) p {
    border-left: 60px solid #049cbe;
}

.color_set li:nth-child(3) p {
    border-left: 60px solid #aaaaaa;
}




.application li:nth-child(2) p,
.application li:nth-child(3) p {
    background: #fff;
    text-align: center;
    padding: 22px 0;
}

.application li:nth-child(2) p {
    background: #1F4b68;
}

.application li:nth-child(3) p {
    background: #049cbe;
}

.application li:nth-child(1) {
    padding-bottom: 10px;
}

.application li:nth-child(2),
.application li:nth-child(3) {
    padding-bottom: 15px;
}





/*================================================================
                  Big Data
==================================================================*/
.bigdata_product {
    width: 100%;
}

.bigdata_product img {
    width: 100%;
}

.bigdata_intro {
    width: 100%;
    height: 100%;
    background-color: #4b6580;
}

.bigdata_intro .intro_content {
    background-image: url(../img/bigdata_bk.gif);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: contain;
}



/*================================================================
                  abacus
==================================================================*/

.abacus_intro {
    width: 100%;
    height: 100%;
    background-color: #1c3768;
}

.abacus_intro .intro_content {
    /* background-image: url(../img/abacus_bk.gif);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 500px 900px; */
}

.abacus_intro .img_box {position: absolute;right: 0;top: 50%;width: 420px;height: 338px;margin-top: -140px;transition: all 2.0s ease-out;}
.abacus_intro .img_box.fadeInUp {transform: translate3d(0px, 100px, 0px);}
.abacus_intro .img_box.fadeInUp.in-view {transform: translate3d(0px, 0px, 0px);}

.abacus_main {opacity: 0;transition: all 1.0s ease-out;}
.abacus_main.side1 {transform: translate3d(0, 200%, 0);}
.abacus_main.side2 {transform: translate3d(0, 200%, 0);}
.abacus_main.side3 {transform: translate3d(0, 200%, 0);}
.abacus_main.twinkle {transform: translate3d(0, -200%, 0);}
.in-view .abacus_main {opacity:1;transform: translate3d(0, 0, 0);}

.in-view .abacus_main.head {animation: bounce-sm 2s ease-in-out;animation-iteration-count:3;}
.in-view .abacus_main.hand {animation: bounce-sm 2s ease-in-out;animation-iteration-count:3;animation-delay:0.5s;}
.in-view .abacus_main.triangle_bg {animation: bounce-md 2s ease-in-out;animation-iteration-count:3;animation-delay:0.5s;}

.in-view .abacus_main.side1 {transition-delay: 0.5s;}
.in-view .abacus_main.side2 {transition-delay: 1.0s;}
.in-view .abacus_main.side3 {transition-delay: 1.5s;}
.in-view .abacus_main.twinkle {transition-delay: 2.0s;}




.abacus_function {
    float: left;
    width: 50%;
    padding: 40px 10px;
    height: 180px;
}

.abacus_function.in-view:first-of-type {transition-delay: 0.2s;}
.abacus_function.in-view:nth-of-type(2) {transition-delay: 0.4s;}
.abacus_function.in-view:nth-of-type(3) {transition-delay: 0.6s;}
.abacus_function.in-view:nth-of-type(4) {transition-delay: 0.8s;}
.abacus_function.in-view:nth-of-type(5) {transition-delay: 1.0s;}
.abacus_function.in-view:nth-of-type(6) {transition-delay: 1.2s;}

.abacus_function.in-view li:first-of-type {animation: bounce-sm 1.6s ease-in-out;}
/* .abacus_function.in-view li:first-of-type {animation: scale 2.0s ease-in-out;} */
/* .abacus_function.in-view li:nth-of-type(2) {animation-delay: 0.2s;} */

.abacus_function.in-view:first-of-type li:first-of-type {animation-delay: 0.1s;}
.abacus_function.in-view:nth-of-type(2) li:first-of-type {animation-delay: 0.3s;}
.abacus_function.in-view:nth-of-type(3) li:first-of-type {animation-delay: 0.5s;}
.abacus_function.in-view:nth-of-type(4) li:first-of-type {animation-delay: 0.7s;}
.abacus_function.in-view:nth-of-type(5) li:first-of-type {animation-delay: 0.9s;}
.abacus_function.in-view:nth-of-type(6) li:first-of-type {animation-delay: 1.1s;}

.abacus_function .img_box {width: 80px;height: 80px;}

.abacus_function li {
    text-align: left;
    float: left;
}

.abacus_function li strong {
    line-height: 32px;
    font-size: 18px;
}


.abacus_function li:nth-child(1) {
    width: 80px;
}

.abacus_function li:nth-child(2) {
    width: calc(100% - 80px);
    padding-left: 20px;
    line-height: 24px;
    font-size: 12.5px;
}

.abacus_function li &gt; img {
    width: 70px;
}

.abacus_main_function &gt; img {
    margin-bottom: 80px;
    box-shadow: 5px 5px 10px 0px #e5e5e5;
    border-radius: 10px;
}


.abacus_main_function p strong {
    line-height: 31px;
}

.abacus_main_function:after {
    display: block;
    content: '';
    clear: both;
}


.abacus_summay &gt; ul &gt; li.in-view {opacity: 1;transform: translate3d(0px, 0px, 0px);transition-delay: 0.5s;}
.abacus_summay &gt; ul &gt; li:nth-child(2).in-view {transition-delay: 1.0s;}
.abacus_summay &gt; ul &gt; li:nth-child(3).in-view {transition-delay: 1.5s;}


.abacus_summay &gt; ul &gt; li.in-view &gt; p {animation: scale-sm 2.0s ease-in-out;}
.abacus_summay &gt; ul &gt; li:nth-child(2).in-view &gt; p {animation-delay: 1.0s;}
.abacus_summay &gt; ul &gt; li:nth-child(3).in-view &gt; p {animation-delay: 2.0s;}


.abacus_summay ul li {transition: all 400ms ease-out;transform: translate3d(0px, 140px, 0px);
    float: left;
    width: 33.33%;
    line-height: 24px;
    padding: 0px 10px;
    font-size: 14px;
}

.abacus_summay ul li p {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    background: #6dc7ea;
    padding-top: 50px;
}


.abacus_summay ul li p:after {
    content: "";
    display: block;
    width: 100px;
    padding-top: 60px;
    border-left: 3px solid #6dc7ea;
    margin: 0px auto;
    margin-top: 40px;
    margin-left: 99px;
}

.abacus_summay ul li p:before {content: "";position:absolute;left:50%;bottom:0;margin:0 0 0 -6px;width: 12px;height: 12px;background: #6dc7ea;}

.won {
    width: 12px;
    height: 12px;
    background: #6dc7ea;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 40px;
}

.abacus_summay ul li p img {
    width: 100px;
    display: block;
    margin: 0 auto;
    padding-bottom: 10px;
}

.abacus_summay ul li strong {
    display: block;
    color: #049cbe;
    font-size: 22px;
    padding-top: 20px;
}


.abacus_summay ul li .img_box {position: relative;display: inline-block;vertical-align: top;width: 100px;height: 100px;}
.abacus_summay li .img_box img {position: absolute;padding: 0;}

.abacus_summay .img_box .ai.head {opacity: 0;transform: translate3d(-100%, -100%, 0);transition: all 1.8s ease-out;}
.abacus_summay .img_box .ai.brain {width:59px;height:59px;left:23px; top:13px;}

.abacus_summay .img_box .peristalsis.link1 {width: 22px;top: 59px;left: 10px;}
.abacus_summay .img_box .peristalsis.link2 {width: 21px;top: 41px;left: 20px;}
.abacus_summay .img_box .peristalsis.link3 {width: 16px;top: 33px;left: 42px;}
.abacus_summay .img_box .peristalsis.link4 {width: 21px;top: 41px;left: 59px;}
.abacus_summay .img_box .peristalsis.link5 {width: 22px;top: 59px;left: 69px;}

.abacus_summay .img_box .value_chain.man.first {width: 30px;top: 0px;left: 0px;}
.abacus_summay .img_box .value_chain.man.second {width: 30px;top: 0px;right: 0px;left: auto;}
.abacus_summay .img_box .value_chain.man.third {width: 30px;bottom: 0px;left: 0px;top: auto;}
.abacus_summay .img_box .value_chain.man.fourth {width: 30px;bottom: 0px;right: 0px;top: auto;left: auto;}

.abacus_summay &gt; ul &gt; li.in-view .img_box {animation: scale-sm 2.0s ease-in-out;  animation-iteration-count: 3;  animation-delay: 1.2s;}
.abacus_summay.in-view .peristalsis.frame {animation: scale 2.0s ease-in-out;animation-iteration-count: 3;animation-delay: 1.4s;}
.abacus_summay &gt; ul &gt; li.in-view .img_box .ai.head {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_summay &gt; ul &gt; li.in-view .img_box .ai.brain {animation:  2.0s ease-in-out;animation-iteration-count: 3;}
.abacus_summay &gt; ul &gt; li.in-view .peristalsis.link1 {transition-delay: 0.6s;}
.abacus_summay &gt; ul &gt; li.in-view .peristalsis.link2 {transition-delay: 1.2s;}
.abacus_summay &gt; ul &gt; li.in-view .peristalsis.link3 {transition-delay: 1.8s;}
.abacus_summay &gt; ul &gt; li.in-view .peristalsis.link4 {transition-delay: 2.4s;}
.abacus_summay &gt; ul &gt; li.in-view .peristalsis.link5 {transition-delay: 3.0s;}
.abacus_summay &gt; ul &gt; li.fadeInUp .peristalsis {opacity: 0;transition: all 400ms ease-out;transform: translate3d(0px, 80px, 0px);}
.abacus_summay &gt; ul &gt; li.fadeInUp.in-view .peristalsis {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.abacus_summay &gt; ul &gt; li.in-view .img_box.value_chain {animation: rotate 8.0s ease-in-out;}
.abacus_summay &gt; ul &gt; li.in-view .img_box .value_chain.balloon {animation: rotate-reverse 8.0s ease-in-out;}
.abacus_summay &gt; ul &gt; li.in-view .img_box .value_chain.man {animation: rotate-reverse 8.0s ease-in-out;}


/* cypress ì•„ì´ì½˜ */
.cube_itme .img_box img, 
.point.cypress-form .img_box img {opacity: 0;transition: all 1.0s ease-out;}
/* .img_box .bank.ground, 
.img_box .bank.columns, 
.img_box .bank.roof,
.img_box .bank.side1, .img_box .bank.side2 {transform: translate3d(0, -100%, 0);} */

/* .img_box img {transform: translate3d(-200%, 0, 0);} */

/*.img_box .ecommerce {transform: translate3d(-200%, 0, 0);}
.img_box .ecommerce.lock {width:27px;top: auto;left: auto;right:0;bottom:2px;} */

/* .img_box .login {transform: translate3d(-200%, 0, 0);}
.img_box .login.dot1, 
.img_box .login.dot2, 
.img_box .login.dot3, 
.img_box .login.dot4, 
.img_box .login.dot5 {transform: translate3d(200%, 0, 0);} */

/* .img_box .prevention {transform: translate3d(0, 200%, 0);}
.img_box .prevention.bill, .img_box .prevention.side1 {transform: translate3d(-200%, 0, 0);}
.img_box .prevention.shield {width:26px;top: auto;left: auto;right:0;bottom:0px;} */

/* .img_box .certificate {transform: translate3d(0, 200%, 0);}
.img_box .certificate.side1, .img_box .certificate.side2 {transform: translate3d(-200%, 0, 0);}
.img_box .certificate.content {transform: translate3d(0, -200%, 0);}
.img_box .certificate.symbol {width:21px;top: 20px;left: 34px;} */

/* .img_box .comment.balloon_top {transform: translate3d(0, 200%, 0);}
.img_box .comment.balloon_center {transform: translate3d(0, -200%, 0);}
.img_box .comment.balloon_btm {transform: translate3d(200%, 0, 0);}
.img_box .comment.side1 {transform: translate3d(200%, 0, 0);}
.img_box .comment.side2 {transform: translate3d(0, 200%, 0);} */

.img_box .detection {opacity: 0;transition: all 1.0s ease-out;}
.img_box .detection.frame {transform: translate3d(0, 100%, 0);}
.img_box .detection.search {transform: translate3d(0, 200%, 0);}

.img_box .setting {opacity: 0;transition: all 1.0s ease-out;}
.img_box .setting.gear {width:37px;top: 25px;left: 22px;}
.img_box .setting.cloud {transform: translate3d(0, 100%, 0);}
.img_box .setting.side1 {transform: translate3d(-100%, 0, 0);}
.img_box .setting.side2 {transform: translate3d(100%, 0, 0);}

.img_box .tracking {opacity: 0;transition: all 1.0s ease-out;}
.img_box .tracking.round1 {transform: translate3d(-100%, -100%, 0);}
.img_box .tracking.round2 {transform: translate3d(100%, 0, 0);}
.img_box .tracking.cross {transform: translate3d(0, -100%, 0);}
.img_box .tracking.side {transform: translate3d(0, 100%, 0);}
.img_box .tracking.target {transform: translate3d(100%, 100%, 0);}

.img_box .rule {opacity: 0;transition: all 1.0s ease-out;}
.img_box .rule.pie {top: 30px;left: 32px;}
.img_box .rule.arrow {transform: translate3d(-100%, 100%, 0);}
.img_box .rule.frame {transform: translate3d(0, -100%, 0);}
.img_box .rule.content {transform: translate3d(-100%, -100%, 0);}

/* cypressForm ì•„ì´ì½˜ */
.img_box .efficiency_graph.frame {transform: translate3d(0, 100%, 0);}
.img_box .efficiency_graph.side1 {transform: translate3d(0, 100%, 0);}
.img_box .efficiency_graph.bar1, 
.img_box .efficiency_graph.bar2, 
.img_box .efficiency_graph.bar3 {transform: translate3d(0, 100%, 0);}
.img_box .efficiency_graph.line, 
.img_box .efficiency_graph.side2 {transform: translate3d(-100%, 100%, 0);}
.img_box .efficiency_graph.arrow {transform: translate3d(100%, -100%, 0)} 

.img_box .shield_privacy.frame {transform: translate3d(-200%, -200%, 0);}
.img_box .shield_privacy.check {transform: translate3d(0, -100%, 0);}
.img_box .shield_privacy.side {transform: translate3d(-100%, 100%, 0);}

.img_box .data_lock.frame {transform: translate3d(0, 100%, 0);}
.img_box .data_lock.line {transform: translate3d(0, 100%, 0);}
.img_box .data_lock.side1 {transform: translate3d(0, -100%, 0);}
.img_box .data_lock.side2 {transform: translate3d(0, -100%, 0);}
.img_box .data_lock.shield {width:36px;top:0;right:0;left:auto;}

.img_box .dollar_hand.box {transform: translate3d(100%, 100%, 0);}
.img_box .dollar_hand.dollar {width:27px;top:0;left:12px;}

.img_box .paper_lock.frame {transform: translate3d(0, 100%, 0);}
.img_box .paper_lock.content {transform: translate3d(0, -100%, 0);}
.img_box .paper_lock.side {transform: translate3d(0, -100%, 0);}
.img_box .paper_lock.round {width:39px;top:20px;left:0;}

.img_box .paperless.frame1 {transform: translate3d(-100%, 0, 0);}
.img_box .paperless.frame2 {transform: translate3d(100%, 100%, 0);}
.img_box .paperless.side {transform: translate3d(0, 100%, 0);}
.img_box .paperless.ex {width:23px;top:20px;left:25px;}

.img_box .post_paperplane.mail {transform: translate3d(0, 100%, 0);}
.img_box .post_paperplane.side {transform: translate3d(0, 100%, 0);}
.img_box .post_paperplane.plane {transform: translate3d(-100%, 100%, 0);}

.img_box .notebook-viewer.frame {transform: translate3d(0, 100%, 0);}
.img_box .notebook-viewer.line {transform: translate3d(0, 100%, 0);}
.img_box .notebook-viewer.side {transform: translate3d(0, -100%, 0);}
.img_box .notebook-viewer.note {transform: translate3d(100%, -100%, 0);}



.abacus.point .img_box {width: 80px;height: 80px;margin: 0 auto 40px auto;}
.img_box .link {top:0;left:0;}
.img_box .link.chain {opacity: 0;transform: translate3d(0, 100%, 0);transition: all 1.8s ease-out;}
.img_box .link_chain_bx {display:block;width:80px;height:80px;}
.img_box .intuition {top:0;left:0;}
.img_box .intuition_ball {position:absolute;top:37px;left:54px;width:18px;height:18px;border:3px solid #187498;border-radius:50%;background-color:#ffffff;}

.img_box .expansion {top:0;left:0;}
.img_box .expansion.doc {top:12px;left:16px;width:38px;transform: translate3d(0, 200%, 0);transition: all 1.8s ease-out;}
.img_box .expansion.arrow {top:0;left:41px;width:23px;}

.img_box .insight {top:0;left:0;}
.img_box .insight.doc {top:0px;left:24px;width:31px;}
.img_box .insight.gear {top:24px;left:27px;width:30px;}

.img_box .data_analysis {top:0;left:0;}
.img_box .data_analysis.arrow {width:80px;height:79px;top:-3px;left:auto;right:-6px;}
.img_box .data_analysis.clockhand {width:11px;height:27px;top:20px;left:44px;}

.img_box .clock_line {position:absolute;display: inline-block;height: 3px;border-radius: 3px;background-color:#0d415e;
    opacity:0;transform: translate3d(-300%, 0, 0);transition: all 1.0s ease-out;}
.img_box .clock_line.one {width:48px;top:9px;left:0;transition-delay:0.2s;}
.img_box .clock_line.two {width:32px;top:20px;left:3px;transition-delay:0.4s;}
.img_box .clock_line.three {width:25px;top:30px;left:6px;transition-delay:0.6s;}
.img_box .clock_line.four {width:22px;top:40px;left:9px;transition-delay:0.8s;}
.img_box .clock_line.five {width:24px;top:51px;left:12px;transition-delay:1.0s;}

.img_box .massive {opacity: 0;transform: translate3d(0, 300%, 0);transition: all 1.0s ease-out;}
.img_box .massive.obj1 {width:22px;top:31px;left:0;}
.img_box .massive.obj2 {width:22px;top:17px;left:15px;}
.img_box .massive.obj3 {width:21px;top:2px;left:30px;}
.img_box .massive.obj4 {width:22px;top:17px;left:43px;}
.img_box .massive.obj5 {width:21px;top:31px;left:58px;}
.img_box .massive.center {width:23px;top:32px;left:29px;}
.img_box .massive.pole1 {width:14px;top:44px;left:15px;}
.img_box .massive.pole2 {width:14px;top:44px;left:51px;}
.img_box .massive.panel {width:34px;top:61px;left:23px;}
.img_box .massive.btm {width:20px;top:74px;left:38px;}

.img_box .uiux {opacity: 0;transition: all 1.0s ease-out;}
.img_box .uiux.top {transform: translate3d(0, -200%, 0);}
.img_box .uiux.bottom {transform: translate3d(0, 200%, 0);}

.img_box .model {opacity: 0;transition: all 1.0s ease-out;}
.img_box .model.top {transform: translate3d(0, -200%, 0);}
.img_box .model.bottom {transform: translate3d(0, 200%, 0);}

.img_box .cycle {opacity: 0;transition: all 1.0s ease-out;}
.img_box .cycle.cloud {transform: translate3d(-100%, -100%, 0);}
.img_box .cycle.side {transform: translate3d(-100%, 0, 0);}
.img_box .cycle.round {opacity: 1;width:42px;top:29px;left:21px;}

.img_box .container {opacity: 0;transition: all 1.0s ease-out;transform: translate3d(0, 200%, 0);}
.img_box .container.hook {transform: translate3d(0, -100%, 0);}

/* Qlik Sense ì•„ì´ì½˜ */
.img_box .visualize {opacity: 0;transition: all 1.0s ease-out;}
.img_box .visualize.frame {transform: translate3d(0, 200%, 0);}
.img_box .visualize.left {transform: translate3d(-200%, 0, 0);}
.img_box .visualize.top {transform: translate3d(0, -200%, 0);}
.img_box .visualize.bottom {transform: translate3d(0, 200%, 0);}
.img_box .visualize.globe {width:25px;height:25px;top:22px;left:25px;}

.img_box .collection {opacity: 0;transition: all 1.0s ease-out;}
.img_box .collection.frame {transform: translate3d(0, 200%, 0);}
.img_box .collection.side_top {transform: translate3d(0, -200%, 0);}
.img_box .collection.side_left {transform: translate3d(-200%, 0, 0);}
.img_box .collection.side_right {transform: translate3d(200%, 0, 0);}

.img_box .relation {opacity: 0;transition: all 1.0s ease-out;}
.img_box .relation.frame {transform: translate3d(0, 200%, 0);}
.img_box .relation.round1 {transform: translate3d(-200%, 0, 0);}
.img_box .relation.round2 {transform: translate3d(0, -200%, 0);}
.img_box .relation.round3 {transform: translate3d(200%, 0, 0);}
.img_box .relation.round4 {transform: translate3d(0, 200%, 0);}

.img_box .automation {opacity: 0;transition: all 1.0s ease-out;}
.img_box .automation.excel {transform: translate3d(0, 200%, 0);}
.img_box .automation.side1,
.img_box .automation.side2, 
.img_box .automation.side3 {transform: translate3d(0, -200%, 0);}
.img_box .automation.gear1 {width:22px;top:32px;left:8px;}
.img_box .automation.gear2 {width:30px;top:28px;left:30px;}

.img_box .recognition {opacity: 0;transition: all 1.0s ease-out;}
.img_box .recognition.frame {transform: translate3d(0, 200%, 0);}
.img_box .recognition.man {transform: translate3d(0, -200%, 0);}
.img_box .recognition.gear {width:18px;top:27px;left:31px;}
.img_box .recognition.side1, 
.img_box .recognition.side2, 
.img_box .recognition.side3,
.img_box .recognition.side4 {transform: translate3d(0, -200%, 0);}

.img_box .atypical {opacity: 0;transition: all 1.0s ease-out;}
.img_box .atypical.gear1 {width:20px;top:32px;left:0px;}
.img_box .atypical.gear2 {width:23px;top:37px;left:20px;}
.img_box .atypical.gear3 {width:16px;top:42px;left:43px;}
.img_box .atypical.frame {transform: translate3d(-200%, 0, 0);}
.img_box .atypical.machine, 
.img_box .atypical.side1,
.img_box .atypical.side2,
.img_box .atypical.side3 {transform: translate3d(0, -200%, 0);}

.img_box .web_portal.gear {top: 3px;left: 30px;}

.img_box .data_connector {opacity: 0;transition: all 1.0s ease-out;}
.img_box .data_connector.green {transform: translate3d(0, -100%, 0);}
.img_box .data_connector.orange {transform: translate3d(0, -100%, 0);}
.img_box .data_connector.side_top {transform: translate3d(0, 200%, 0);}
.img_box .data_connector.side_btm {transform: translate3d(0, 200%, 0);}

.img_box .excel {opacity: 0;transition: all 1.0s ease-out;}
.img_box .excel.frame {transform: translate3d(0, 100%, 0);}
.img_box .excel.pie,
.img_box .excel.docu1, 
.img_box .excel.docu2 {transform: translate3d(0, -100%, 0);}
.img_box .excel.gear {width:29px;top:35px;left:9px;}

.img_box .associative {opacity: 0;transition: all 1.0s ease-out;}
.img_box .associative.search {transform: translate3d(-300%, 0, 0);}
.img_box .associative.side1, .img_box .associative.side2 {transform: translate3d(0, -300%, 0);}

.img_box .responsive {opacity: 0;transition: all 1.0s ease-out;}
.img_box .responsive.frame {transform: translate3d(0, 100%, 0);}
.img_box .responsive.arrow, .img_box .responsive.side {transform: translate3d(0, 200%, 0);}
.img_box .responsive.cellphone {width:28px;top:2px;left:17px;}
.img_box .responsive.code {transform: translate3d(0, -100%, 0);}

.img_box .web_portal {opacity: 0;transition: all 1.0s ease-out;}
.img_box .web_portal.frame, 
.img_box .web_portal.side1, 
.img_box .web_portal.side2 {transform: translate3d(0, 100%, 0);}
.img_box .web_portal.part1 {transform: translate3d(-100%, 0, 0);}
.img_box .web_portal.part2 {transform: translate3d(100%, 0, 0);}


.abacus.point li.in-view .link.round {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.abacus.point li.in-view .link.chain {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus.point li.in-view .link_chain_bx {animation:  2.0s linear;animation-iteration-count: 3;}

.abacus.point li.in-view .intuition_ball {animation: fadeInUp 2.0s linear;}
.abacus.point li.in-view .intuition.band {animation: fadeInUp 2.0s linear;}
.abacus.point li.in-view .intuition.phone {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}

.abacus.point li.in-view .expansion.doc {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus.point li.in-view .expansion.arrow {animation: bounce-md 2.0s linear;animation-iteration-count: 3;}
.abacus.point li.in-view .expansion.frame {animation: scale 2.0s linear;animation-iteration-count: 3;}

.abacus.point li.in-view .insight.doc {animation: bounce-sm 2s ease-in-out;animation-iteration-count: 3;}
.abacus.point li.in-view .insight.gear {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.abacus.point li.in-view .insight.frame {animation: scale 2.0s linear;animation-iteration-count: 3;}

.abacus_function.in-view .clock_line {opacity:1;opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .data_analysis.arrow {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.abacus_function.in-view .data_analysis.clockhand {animation: scale 2s ease-in-out;}

.abacus_function.in-view .massive {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .massive.obj1 {transition-delay:0.3s;}
.abacus_function.in-view .massive.obj2 {transition-delay:0.6s;}
.abacus_function.in-view .massive.obj3 {transition-delay:0.9s;}
.abacus_function.in-view .massive.obj4 {transition-delay:1.2s;}
.abacus_function.in-view .massive.obj5 {transition-delay:1.5s;}
.abacus_function.in-view .massive.center {transition-delay:1.8s;}
.abacus_function.in-view .massive.pole1 {transition-delay:2.1s;}
.abacus_function.in-view .massive.pole2 {transition-delay:2.4s;}
.abacus_function.in-view .massive.panel {transition-delay:2.7s;}
.abacus_function.in-view .massive.btm {transition-delay:3.0s;}


.abacus_function.in-view .uiux.top, 
.abacus_function.in-view .uiux.bottom {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .uiux.round1 {transition-delay:0.3s;}
.abacus_function.in-view .uiux.ui {transition-delay:0.6s;}
.abacus_function.in-view .uiux.side_top {transition-delay:0.9s;}
.abacus_function.in-view .uiux.round2 {transition-delay:1.2s;}
.abacus_function.in-view .uiux.ux {transition-delay:1.5s;}
.abacus_function.in-view .uiux.side_btm {transition-delay:1.8s;}

.abacus_function.in-view .model.top, 
.abacus_function.in-view .model.bottom {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .model.line1 {transition-delay:0.3s;}
.abacus_function.in-view .model.side_left {transition-delay:0.6s;}
.abacus_function.in-view .model.line2 {transition-delay:0.9s;}
.abacus_function.in-view .model.line3 {transition-delay:1.2s;}
.abacus_function.in-view .model.line4 {transition-delay:1.5s;}
.abacus_function.in-view .model.line5 {transition-delay:1.8s;}
.abacus_function.in-view .model.side_right {transition-delay:2.1s;}
.abacus_function.in-view .model.frame {transition-delay:2.4s;}

.abacus_function.in-view .cycle.cloud,
.abacus_function.in-view .cycle.side {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .cycle.cloud {transition-delay:1.0s;}
.abacus_function.in-view .cycle.side {transition-delay:2.0s;}
.abacus_function.in-view .cycle.round {animation: rotate 2.0s linear;animation-iteration-count: 3;}

.abacus_function.in-view .container {opacity: 1;transform: translate3d(0, 0, 0);}
.abacus_function.in-view .container.side_left {transition-delay:0.3s;}
.abacus_function.in-view .container.frame {transition-delay:0.6s;}
.abacus_function.in-view .container.line1 {transition-delay:0.9s;}
.abacus_function.in-view .container.line2 {transition-delay:1.2s;}
.abacus_function.in-view .container.line3 {transition-delay:1.5s;}
.abacus_function.in-view .container.line4 {transition-delay:1.8s;}
.abacus_function.in-view .container.line5 {transition-delay:2.1s;}
.abacus_function.in-view .container.side_right {transition-delay:2.4s;}
.abacus_function.in-view .container.hook {transition-delay:2.7s;}

/* Cypress ì•„ì´ì½˜ */
.cube_itme.in-view .img_box img, 
.point.cypress-form .img_box.in-view img {opacity: 1;transform: translate3d(0px, 0px, 0px);}

/* .cube_itme.in-view .bank.ground {transition-delay:0.5s;}
.cube_itme.in-view .bank.columns {transition-delay:1.0s;}
.cube_itme.in-view .bank.roof {transition-delay:1.5s;}
.cube_itme.in-view .bank.side1 {transition-delay:2.0s;}
.cube_itme.in-view .bank.side2 {transition-delay:2.5s;} */

/* .cube_itme.in-view .ecommerce.lock {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .ecommerce.card {transition-delay:0.5s;}
.cube_itme.in-view .ecommerce.side1 {transition-delay:1.0s;}
.cube_itme.in-view .ecommerce.side2 {transition-delay:1.5s;} */

/* .cube_itme.in-view .login.frame {transition-delay:0.3s;}
.cube_itme.in-view .login.key {transition-delay:0.6s;}
.cube_itme.in-view .login.dot1 {transition-delay:0.9s;}
.cube_itme.in-view .login.dot2 {transition-delay:1.2s;}
.cube_itme.in-view .login.dot3 {transition-delay:1.5s;}
.cube_itme.in-view .login.dot4 {transition-delay:1.8s;}
.cube_itme.in-view .login.dot5 {transition-delay:2.1s;}
.cube_itme.in-view .login.side {transition-delay:2.4s;} */

/* .cube_itme.in-view .prevention.shield {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .prevention.bill {transition-delay:0.5s;}
.cube_itme.in-view .prevention.side1 {transition-delay:1.0s;}
.cube_itme.in-view .prevention.side2 {transition-delay:1.5s;}

.cube_itme.in-view .certificate.symbol {animation: coin-flip 2.0s linear;animation-iteration-count: 3;animation-delay: 0.6s;}
.cube_itme.in-view .certificate.frame {transition-delay:0.5s;}
.cube_itme.in-view .certificate.content {transition-delay:1.0s;}
.cube_itme.in-view .certificate.side1 {transition-delay:1.5s;}
.cube_itme.in-view .certificate.side2 {transition-delay:2.0s;}

.cube_itme.in-view .comment.balloon_top {transition-delay:0.5s;}
.cube_itme.in-view .comment.balloon_center {transition-delay:1.0s;}
.cube_itme.in-view .comment.balloon_btm {transition-delay:1.5s;}
.cube_itme.in-view .comment.side1 {transition-delay:2.0s;}
.cube_itme.in-view .comment.side2 {transition-delay:2.5s;} */

/* cypressForm ì•„ì´ì½˜ */

.cube_itme.in-view .efficiency_graph.line {transition-delay:0.6s;}
.cube_itme.in-view .efficiency_graph.arrow {transition-delay:0.9s;}
.cube_itme.in-view .efficiency_graph.side2 {transition-delay:1.2s;}
.cube_itme.in-view .efficiency_graph.frame {transition-delay:1.5s;}
.cube_itme.in-view .efficiency_graph.side1 {transition-delay:1.8s;}
.cube_itme.in-view .efficiency_graph.bar1 {transition-delay:2.1s;} 
.cube_itme.in-view .efficiency_graph.bar2 {transition-delay:2.4s;}
.cube_itme.in-view .efficiency_graph.bar3 {transition-delay:2.7s;}

.cube_itme.in-view .shield_privacy.frame {transition-delay:0.3s;}
.cube_itme.in-view .shield_privacy.check {transition-delay:0.6s;}
.cube_itme.in-view .shield_privacy.side {transition-delay:0.9s;}
.cube_itme.in-view .shield_privacy.round {animation: scale 2.0s ease-in-out;animation-iteration-count: 3;}

.cube_itme.in-view .data_lock.frame {transition-delay:0.5s;}
.cube_itme.in-view .data_lock.line {transition-delay:1.0s;}
.cube_itme.in-view .data_lock.side1 {transition-delay:1.5s;}
.cube_itme.in-view .data_lock.side2 {transition-delay:2.0s;}
.cube_itme.in-view .data_lock.shield {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}

.cube_itme.in-view .dollar_hand.dollar {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .dollar_hand.hand {animation: bounce-sm 2.0s ease-in-out;animation-iteration-count: 3;}
.cube_itme.in-view .dollar_hand.box {transition-delay:1.0s;}

.cube_itme.in-view .paper_lock.frame {transition-delay:0.5s;}
.cube_itme.in-view .paper_lock.content {transition-delay:1.0s;}
.cube_itme.in-view .paper_lock.side {transition-delay:1.5s;}
.cube_itme.in-view .paper_lock.round {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}

.cube_itme.in-view .recycle_eco {animation: rotate 2.0s linear;animation-iteration-count: 3;}

.img_box.in-view .paperless.ex {animation:  1.5s 3 linear;}
.img_box.in-view .paperless.frame1 {transition-delay:0.5s;}
.img_box.in-view .paperless.frame2 {transition-delay:1.0s;}
.img_box.in-view .paperless.side {transition-delay:1.5s;}

.img_box.in-view .post_paperplane.mail {transition-delay:0.5s;}
.img_box.in-view .post_paperplane.side {transition-delay:1.0s;}
.img_box.in-view .post_paperplane.plane {transition-delay:2.0s;}

.img_box.in-view .notebook-viewer.frame {transition-delay:0.5s;}
.img_box.in-view .notebook-viewer.line {transition-delay:1.5s;}
.img_box.in-view .notebook-viewer.side {transition-delay:2.0s;}
.img_box.in-view .notebook-viewer.note {transition-delay:3.0s;}



/* Qlik Sense ì•„ì´ì½˜ */
.cube_itme.in-view .visualize {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .visualize.globe {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}

.cube_itme.in-view .visualize.frame {transition-delay:0.3s;}
.cube_itme.in-view .visualize.side1 {transition-delay:0.6s;}
.cube_itme.in-view .visualize.side2 {transition-delay:0.9s;}
.cube_itme.in-view .visualize.side3 {transition-delay:1.2s;}
.cube_itme.in-view .visualize.docu1 {transition-delay:1.5s;}
.cube_itme.in-view .visualize.docu2 {transition-delay:1.8s;}
.cube_itme.in-view .visualize.globe {transition-delay:2.1s;}
.cube_itme.in-view .visualize.side_btm {transition-delay:2.4s;}


.cube_itme.in-view .collection {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .collection.globe {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .collection.frame {transition-delay:0.6s;}
.cube_itme.in-view .collection.side_top {transition-delay:0.9s;}
.cube_itme.in-view .collection.side_left {transition-delay:1.2s;}
.cube_itme.in-view .collection.side_right {transition-delay:1.5s;}

.cube_itme.in-view .relation {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .relation.globe {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .relation.frame {transition-delay:0.6s;}
.cube_itme.in-view .relation.round1 {transition-delay:0.9s;}
.cube_itme.in-view .relation.round2 {transition-delay:1.2s;}
.cube_itme.in-view .relation.round3 {transition-delay:1.5s;}
.cube_itme.in-view .relation.round3 {transition-delay:1.8s;}

.cube_itme.in-view .automation {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .automation.gear1 {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .automation.gear2 {animation: rotate 2.0s linear;animation-iteration-count: 3;animation-delay:1.0s;}
.cube_itme.in-view .automation.excel {transition-delay:0.9s;}
.cube_itme.in-view .automation.side1 {transition-delay:1.2s;}
.cube_itme.in-view .automation.side2 {transition-delay:1.5s;}
.cube_itme.in-view .automation.side3 {transition-delay:1.8s;}

.cube_itme.in-view .recognition {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .recognition.gear {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .recognition.man {transition-delay:0.9s;}
.cube_itme.in-view .recognition.side1 {transition-delay:1.2s;}
.cube_itme.in-view .recognition.side2 {transition-delay:1.5s;}
.cube_itme.in-view .recognition.side3 {transition-delay:1.8s;}
.cube_itme.in-view .recognition.side4 {transition-delay:2.1s;}

.cube_itme.in-view .atypical {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.cube_itme.in-view .atypical.gear1, 
.cube_itme.in-view .atypical.gear2, 
.cube_itme.in-view .atypical.gear3 {animation: rotate 2.0s linear;animation-iteration-count: 3;}
.cube_itme.in-view .atypical.gear2 {animation-delay:1.0s;}
.cube_itme.in-view .atypical.gear3 {animation-delay:1.5s;}
.cube_itme.in-view .atypical.frame {transition-delay:0.9s;}
.cube_itme.in-view .atypical.machine {transition-delay:1.2s;}
.cube_itme.in-view .atypical.side1 {transition-delay:1.5s;}
.cube_itme.in-view .atypical.side2 {transition-delay:1.8s;}
.cube_itme.in-view .atypical.side3 {transition-delay:2.1s;}

.point .in-view .data_connector {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .data_connector.green {transition-delay:0.6s;}
.point .in-view .data_connector.orange {transition-delay:0.9s;}
.point .in-view .data_connector.side_top {transition-delay:1.2s;}
.point .in-view .data_connector.side_btm {transition-delay:1.5s;}

.point .in-view .excel {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .excel.frame {transition-delay:0.3s;}
.point .in-view .excel.pie {transition-delay:0.9s;}
.point .in-view .excel.docu1 {transition-delay:1.2s;} 
.point .in-view .excel.docu2 {transition-delay:1.5s;} 
.point .in-view .excel.gear {animation: rotate 2.0s linear;animation-iteration-count: 2;}

.point .in-view .associative {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .associative.search {transition-delay:0.6s;}
.point .in-view .associative.side2 {transition-delay:1.2s;}
.point .in-view .associative.side1 {transition-delay:1.8s;}
.point .in-view .associative.wheel {animation: rotate 2.0s linear;animation-iteration-count: 2;}

.point .in-view .responsive {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .responsive.frame {transition-delay:0.6s;}
.point .in-view .responsive.arrow {transition-delay:1.2s;}
.point .in-view .responsive.side {transition-delay:1.5s;}
.point .in-view .responsive.cellphone {animation: coin-flip 2.0s linear;animation-iteration-count: 2;}
.point .in-view .responsive.code {transition-delay:1.8s;}

.point .in-view .web_portal {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .web_portal.frame, 
.point .in-view .web_portal.side1, 
.point .in-view .web_portal.side2 {transition-delay:0.6s;}
.point .in-view .web_portal.part1 {transition-delay:1.2s;}
.point .in-view .web_portal.part2 {transition-delay:1.8s;}
.point .in-view .web_portal.gear {animation: rotate 2.0s linear;animation-iteration-count: 2;}

.point .in-view .detection {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .detection.frame {transition-delay:0.6s;}
.point .in-view .detection.search {transition-delay:1.2s;}
.point .in-view .detection.exclamation {transition-delay:1.8s;}

.point .in-view .setting {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .setting.gear {animation: rotate 2.0s linear;animation-iteration-count: 2;}
.point .in-view .setting.cloud {transition-delay:0.3s;}
.point .in-view .setting.side1 {transition-delay:0.6s;}
.point .in-view .setting.side2 {transition-delay:0.9s;}

.point .in-view .tracking {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .tracking.round1 {transition-delay:0.3s;}
.point .in-view .tracking.round2 {transition-delay:0.6s;}
.point .in-view .tracking.cross {transition-delay:0.9s;}
.point .in-view .tracking.side {transition-delay:1.2s;}
.point .in-view .tracking.target {transition-delay:1.5s;}

.point .in-view .rule {opacity: 1;transform: translate3d(0px, 0px, 0px);}
.point .in-view .rule.pie {animation: coin-flip 2.0s linear;animation-iteration-count: 3;}
.point .in-view .rule.frame {transition-delay:0.5s;}
.point .in-view .rule.content {transition-delay:1.0s;}
.point .in-view .rule.arrow {transition-delay:1.5s;}



/*================================================================
                  pando_START
==================================================================*/



.browser {
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    -moz-box-shadow: 0 100px 100px -80px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 100px 100px -80px rgba(0, 0, 0, 0.2);
    box-shadow: 0 100px 100px -80px rgba(0, 0, 0, 0.2);
}


.bred,
.borage,
.bgreen {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    float: left;
    margin: 7px 3px;
    margin-left: 8px;
}


.bred {
    background: #FF5F58;
}

.borage {
    background: #FFC330;
}

.bgreen {
    background: #28CC41;
}


.html5_base li .browser span {
    padding: 0;
}


.browser div {
    border-top: 1px solid #dcdcdc;
    clear: both;
}






.pando_intro {
    width: 100%;
    height: 100%;
    background-color: #f88d3e;
}

.pando_intro .intro_content {
    background-image: url(../img/pando_bk.png);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 500px 900px;
}


.excel_auto li {
    width: 31.33%;
    float: left;
    margin: 1%;

}

.excel_auto_content li {
    width: 31.33%;
    float: left;
    margin: 1%;
    padding: 10px 0;
}

.excel_auto_content li:nth-child(1),
.excel_auto_content li:nth-child(2),
.excel_auto_content li:nth-child(3) {
    border: 1px solid #ef8739;
    color: #ef8739;
}

.excel_auto_content li:nth-child(4),
.excel_auto_content li:nth-child(5),
.excel_auto_content li:nth-child(6) {
    border: 1px solid #009933;
    color: #009933;
}

.product_inquiry {
    background: #ef8739;
    color: #fff;
    padding: 24px 0;
}

.product_inquiry .innerBox {
    padding-top: 16px;
}


.product_inquiry h2,
.product_inquiry li,
.product_inquiry p {
    color: #fff;
}


.name,
.phon_number {
    width: 50%;
}


.name li,
.phon_number li {
    font-size: 19px;
}

.name li {
    text-align: right;
    padding: 0 40px;
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.phon_number li {
    text-align: left;
    padding: 0px 40px;
    margin-bottom: 16px;
    font-size: 17px;
    font-weight: 300;
}

.phon_number:after {
    clear: both;
    content: "";
    display: block;
}


/*================================================================
                  pando_END
==================================================================*/


.color_box {
    z-index: 0;
    border-color: #f88d3e #f88d3e transparent #f88d3e;
    transform: rotate(90deg);
    border-style: solid;
    border-width: 0px 400px 400px 0px;
    height: 0px;
    width: 0px;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.2;

}


/*================================================================
                animation
==================================================================*/

/* animation on scroll effect */
.fadeInUp {
	opacity: 0;
    -moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200px, 0px);
}

.fadeInUp.in-view {
	opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}

@keyframes fadeInUp-sm {
    0% {      
        transform: translate3d(0, 0, 0);
    }
    18% {      
        transform: translate3d(0, -40px, 0);
    }
    35% {
    transform: translate3d(0, 20px, 0);
    }
    48% {             
        transform: translate3d(0, -20px, 0);
    }
    60% {
        transform: translate3d(0,10px, 0);
    }
    68% {
      transform: translate3d(0, -10px, 0);
    }
    74% {
      transform: translate3d(0, 6px, 0);
    }
    80% {
      transform: translate3d(0, -5px, 0);
    }
    86% {
      transform: translate3d(0, 3px, 0);
    }
    92% {
      transform: translate3d(0, -5px, 0);
    }
    98% {
      transform: translate3d(0, 3px, 0);
    }
    100% {        
        transform: translate3d(0, 0, 0);
    }
  }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }
    40% {
        opacity: 1;
        /*transform: translateZ(0);*/
        transform: translate3d(0, 0, 0);
    }
    60% {
        transform: translate3d(0, 20px, 0);
    }
    75% {        
        /*transform: translateZ(0);*/
        transform: translate3d(0, 0, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {        
        transform: translate3d(0, 0, 0);
    }
}

@keyframes Bounce{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-100px);
    }
    100%{
        transform: translateY(0px);
    }
}

@keyframes Bounce{
    0%{
        transform: translateY(0px);
    }
    25%{
        transform: translateY(-68px);
    }
    50%{
        transform: translateY(40px);
    }
    60%{
        transform: translateY(-14px);
    }
    68%{
        transform: translateY(12px);
    }
    74%{
        transform: translateY(-6px);
    }
    80%{
        transform: translateY(6px);
    }
    86%{
        transform: translateY(-4px);
    }
    90%{
        transform: translateY(3px);
    }
    95%{
        transform: translateY(-2px);
    }
    100%{
        transform: translateY(0px);
    }
}

@keyframes bounce-md{
    0%{
        transform: translate(0px, 0px);
    }
    50%{
        transform: translate(0px, -50px);
    }     
    100%{
        transform: translate(0px, 0px);
    }
}

@keyframes bounce-sm{
    0%{
        transform: translate(0px, 0px);
    }
    50%{
        transform: translate(0px, -10px);
    }     
    100%{
        transform: translate(0px, 0px);
    }
}

@keyframes scale { 
  0%   {transform: scale(1.0);}
  25%   {transform: scale(0.8);}
  50%   {transform: scale(1.05);}
  75%   {transform: scale(0.9);}
  100% {transform: scale(1.0);}
}

@keyframes scale-lg { 
    0%   {transform: scale(1.0);}
    25%   {transform: scale(0.7);}
    50%   {transform: scale(1.3);}
    75%   {transform: scale(0.9);}
    100% {transform: scale(1.0);}
  }

@keyframes scale-sm { 
    0%   {transform: scale(1.0);}
    25%   {transform: scale(0.94);}
    50%   {transform: scale(1.02);}
    75%   {transform: scale(0.96);}
    100% {transform: scale(1.0);}
  }

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

@keyframes rotate-reverse {
    0%{
       transform: rotate(0deg);
      }
   100%{
       transform: rotate(-360deg);
      }
}

@keyframes coin-flip {
    0%   {transform: rotateY(0deg);}
    50%   {transform: rotateY(180deg);}
    100%   {transform: rotateY(360deg);}    
}

@keyframes coin-flip-reverse {
    0%   {transform: rotateY(0deg);}
    50%   {transform: rotateY(-180deg);}
    100%   {transform: rotateY(-360deg);}    
}

@keyframes heartbeat {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(0.85);
    }
    40% {
      transform: scale(1.04);
    }
    60% {
      transform: scale(0.8);
    }
    80% {
      transform: scale(1.14);
    }
    100% {
      transform: scale(1);
    }
}

/* motion */
@keyframes gradient-animation {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  @keyframes frame-enter {
    0% {
      clip-path: polygon(0% 100%, 50px 100%, 50px 50px, calc(100% - 50px) 50px, calc(100% - 50px) calc(100% - 50px), 50px calc(100% - 50px), 50px 100%, 100% 100%, 100% 0%, 0% 0%);
    }
    25% {
      clip-path: polygon(0% 100%, 50px 100%, 50px 50px, calc(100% - 50px) 50px, calc(100% - 50px) calc(100% - 50px), calc(100% - 50px) calc(100% - 50px), calc(100% - 50px) 100%, 100% 100%, 100% 0%, 0% 0%);
    }
    50% {
      clip-path: polygon(0% 100%, 50px 100%, 50px 50px, calc(100% - 50px) 50px, calc(100% - 50px) 50px, calc(100% - 50px) 50px, calc(100% - 50px) 50px, calc(100% - 0px) 50px, 100% 0%, 0% 0%);
    }
    75% {
      clip-path: polygon(0% 100%, 50px 100%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 0%, 0% 0%);
    }
    100% {
      clip-path: polygon(0% 100%, 50px 100%, 50px 100%, 50px 100%, 50px 100%, 50px 100%, 50px 100%, 50px 100%, 50px 100%, 0% 0%);
    }
  }

  @keyframes swift-up {
    0% {
        top: 0;opacity:0;
    }
    20% {
        top: -26px;opacity:1;
    }
    40% {
        top: 12px;opacity:1;
    }
    60% {
        top: -4px;opacity:1;
        }      
    100% {
        top: 0;opacity:1;
    }   
  }

  @keyframes swift-deco {
    0% {
        margin-top: -10px;opacity:0;
    }
    20% {
        margin-top: -24px;opacity:1;
    }
    40% {
        margin-top: 4px;opacity:1;
    }
    60% {
        margin-top: -12px;opacity:1;
        }      
    100% {
        margin-top: -12px;opacity:1;
    }   
  }

  @keyframes swift-bubble {
    0% {
        margin-top: -15px;opacity:0;
    }
    20% {
        margin-top: -32px;opacity:1;
    }
    40% {
        margin-top: 0px;opacity:1;
    }
    60% {
        margin-top: -16px;opacity:0;
        }      
    100% {
        margin-top: -16px;opacity:0;
    }  
  }


/*================================================================
                @media
==================================================================*/
@media only screen and (max-width: 1600px) {

    .main_text {
        padding-left: 3%;left: auto;right: 0;top: 28%;
    }

    .namu_sub {
        margin: 10px auto 0;
        width: 70%;
    }

}

@media only screen and (max-width: 1366px) {    
    .cypress_intro.form .intro_content {flex-direction: column; justify-content: center;}
    .cypress_intro.form .main_text {order: 1;}

    .main_text {
        padding-left: -13%;
    }

    .client_logo {
        width: 90%;
    }

    .section.news_section {
        width: 100%;
    }
    .clientcard li {flex: 0 0 33.3333%;}
}

@media only screen and (max-width: 1279px) {    
    .org_chart .item {letter-spacing:-0.6px;}
    .cypress_form.diagram &gt; .col_sm {flex: 0 0 19.5%;max-width: 19.5%;}
    .cypress_form.diagram &gt; .col_md {flex: 0 0 18.5%;max-width: 18.5%;}
    .diagram_chip {font-size: 12px;letter-spacing: -0.5px;}    
    .diagram_box .icon {font-size: 14px;letter-spacing: -0.5px;}
}


@media only screen and (max-width: 1000px) {
    .birdEye {top: 24px; right: 28px;}
    .birdEye_circle {width: 34px; height: 34px;}
    .birdEye_circle img {width:30px;}

    .monitor-wrap {flex-direction: column;}

    .cypressads.fadeInUp, .zcar_platform.fadeInUp {transform: translate3d(0px, 200px, 0px);}
    .cypressads.fadeInUp.in-view, .zcar_platform.fadeInUp.in-view {transform: translate3d(0px, 0px, 0px);}
    .zcar_platform.fadeInUp {transition-delay: 0.2s;}


    .clientcard li {flex: 0 0 50%;}
    .award2023kcga {height: auto;top: 10%;left: 50%;transform: translate(-50%, 0%);}
    .org_chart {max-width:460px;}
    .org_chart .dept.col4 {width:50%;}
    .org_chart .dept.sub {width:100%;}
    .org_chart .hasgap-right, .org_chart .hq_second {padding-right: 16px;}
    .org_chart .hasgap-left {padding-left: 16px;}
    .org_chart .hasgap-right:before, .org_chart .hasgap-left:before {border-style: none;}
    .org_chart .ceo.in-view:after {bottom:-1000px;}

    .name,
    .phon_number {
        width: 100%;
        height: 64px;
    }


    .name li,
    .phon_number li {
        font-size: 21px;
    }

    .name li {
        line-height: 64px;
        text-align: center;
        padding: 0 40px;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
        border-right: none;
    }

    .phon_number li {
        text-align: center;
        padding: 10px 40px;
        font-size: 17px;
        font-weight: 300;
    }

    .ci_left {
        float: left;
        width: 100%;
    }

    .ci_right {
        float: left;
        width: 100%;
    }

    .inner_box_pando {
        background-image: none;
    }

    .header {
        height: 46px;
    }

    .header.header_sc {
        height: 46px;
    }

    .menu_button {
        padding: 8px 3px;
    }

    .logo a img {
        height: 30px;
    }

    .pdf_download {
        bottom: 30px;
    }

    .intro_content {width:100%;}

    .intro_content.main {flex-direction: column; justify-content: center;}

    .main_text {
        padding: 0;
        top: 23%;left: 42%;left: 40px;margin-left: 0;text-align: center;
    }

    .section_inner {
        padding: 80px 0 100px 0;
    }

    .section_inner h2 {
        padding-bottom: 20px;
    }

    .innerBox {
        width: 100%;
    }

    who_we_are {
        width: 100%;
    } 
    
    .business ul li ul li {height: 300px;}

    .business ul li h3 {
        font-size: 15px;
    }

    .business ul li ul li h3:after {
        margin: 20px auto;
        content: "";
        display: block;
        width: 12px;
        border: none;
        padding: 10px 0;
    }

    .video_wrap video {
        width: 100%;
    }

    .video_wrap .video_info {
        width: 100%;
    }

    #footer {
        padding: 20px 0 30px;
    }

    .footer_right {
        width: 100%;
        text-align: center;
        padding: 0;
        font-size: 10px;
    }

    .mobile_n {
        display: none;
    }

    .blue {
        background: #2c3846;
        padding: 0;
    }

    .greetings {
        width: 100%;
        float: left;
    }

    .blue .inner_box {
        width: 100%;
    }

    .greetings p {
        text-align: left;
        line-height: 31px;
        color: #f5f5f5;
        z-index: 1;
        padding: 0% 4%;
        padding-bottom: 140px;
        background-color: rgba(44, 56, 70, 0.5);
    }

    .greetings {
        width: 100%;
        float: left;
    }

    .blue .inner_box {
        width: 100%;
    }

    .greetings p {
        text-align: left;
        line-height: 31px;
        color: #f5f5f5;
        z-index: 1;
        padding: 0% 4%;
        padding-bottom: 140px;
        background-color: rgba(44, 56, 70, 0.5);
    }

    .blue {
        background: #2c3846;
        padding: 0;
    }

    .inner_box {
        width: 92%;
    }

    .maintain ul li:nth-child(1),
    .maintain ul li:nth-child(2),
    .maintain ul li:nth-child(3),
    .maintain ul li:nth-child(4) {
        width: 50%;
    }

    .histoy_left {
        width: 100%;
    }

    .histoy_left li {
        font-size: 24px;
        color: #049cbe;
    }

    .histoy_right {
        width: 100%;
    }

    .histoy_right li {
        padding-left: 15px;
    }

    .cypress_form.diagram &gt; .col_lg {order:1;flex: 0 0 100%;max-width: 100%;}
    .cypress_form.diagram &gt; .col_sm {order:2;flex: 0 0 40%;max-width: 40%;}
    .cypress_form.diagram &gt; .col_md {order:3;flex: 0 0 60%;max-width: 60%;}

    .cypress_form.diagram &gt; .col_sm.in-view {transition-delay: 0.5s;}
    .cypress_form.diagram &gt; .col_md.in-view {transition-delay: 0.5s;}

    .flat .diagram_chip {padding: 8px 4px;}
    
    .backToTopButton {display:none;}
    
    .fadeInUp {
    	-moz-transform: translate3d(0px, 60px, 0px);
	    -webkit-transform: translate3d(0px, 60px, 0px);
	    -o-transform: translate(0px, 60px);
	    -ms-transform: translate(0px, 60px);
	    transform: translate3d(0px, 60px, 0px);
    }

}


@media only screen and (max-width: 768px) {

    .section_inner.monitor {padding: 24px 0;}
    .clientcard li {flex: 0 0 100%;}
    .monitor-frame {width: 100%;}
    .birdEye span {transform: translateY(70%); right: 36px;}
    .birdEye span:after {right: 9px; top: -26%; border-bottom: 18px solid #086cfd; border-left: 18px solid transparent;}


    /* CypressADS + */
    .plus_box, .plus_circle {flex-wrap: wrap;}
    .plus_box.col-2 li, .plus_box.col-3 li {flex: 1 1 100%; max-width: 100%;}
    .plus_box.col-2 li:first-of-type, .plus_box.col-2 li:nth-of-type(2) {padding-right: 0; padding-left: 0;}
    .plus_box.col-3 li:nth-of-type(2) {margin: 0;}

    .plus_circle &gt; li {max-width: 100%; flex: 1 1 100%;}
    
    .plus_circle &gt; li:first-of-type {margin-right: 0;} 
    .plus_circle &gt; li:nth-of-type(2) {margin: 40px 0 0 0;} 
    .plus_circle &gt; li:nth-of-type(3) {margin: 40px 0 0 0;}
    .overview_circle {width: 260px; margin: 0 auto 12px;}


    /* about ì¡°ì§ë„ */    
    .data_voucher .browser, .data_voucher_txt {width:calc(100% - 30px);}

    .function_img li {
        width: 100%;
    }

    .point_txt li {
        display: none;
    }

    .cypress-form .point_txt li {display: block;}

    .who_we_are &gt; li {
        box-sizing: border-box;
        float: left;
        width: 50%;
        text-align: center;
        font-size: 21px;
        padding: 40px;
        font-weight: 300;
        margin: 0 auto;
    }

    .who_we_are &gt; li:nth-child(4) {
        display: none;
    }

    .who_we_are &gt; li:nth-child(6) {
        width: 25%;
        display: block;
        border: none;opacity: 0;
    }

    .who_we_are &gt; li:nth-child(7) {
        width: 50%;
        border-top: 0;
    }

    .who_we_are &gt; li:nth-child(8) {
        width: 25%;
        border: none;opacity: 0;
    }

    .circles {
        text-align: left;
        box-sizing: border-box;
        float: left;
        width: 100%;
        padding: 0;
    }

    .circle {
        margin: 0;
        float: left;
        width: 50%;
        display: inline-block;
        position: relative;
        text-align: center;
    }

    .circle canvas {
        vertical-align: top;
        width: 100px;
    }

    .circle strong {
        position: absolute;
        top: 30px;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 30px;
    }

    .circle strong i {
        font-style: normal;
        font-size: 0.6em;
        font-weight: normal;
    }

    .circle span {
        display: block;
        color: #666;
        margin-top: 12px;
        line-height: 21px;
        font-weight: 300;
        font-size: 14px;
        height: 60px;
    }

    .graph table {
        width: 100%;
    }

    .point.col-3 &gt; ul &gt; li {width:100%;}

    .abacus_intro .img_box {width: 100%;height: auto;right: auto;}
    .abacus_function {
        width: 100%;
        height: auto;
    }

    .abacus_function li {
        text-align: left;
        float: left;
    }

    .abacus_function li strong {
        line-height: 32px;
        font-size: 18px;
    }


    .abacus_summay ul li {
        width: 100%;
    }

    .abacus_summay ul li:nth-child(1),
    .abacus_summay ul li:nth-child(2) {
        margin-bottom: 60px;
    }

    .abacus_summay ul li p {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
        background: #6dc7ea;
        padding-top: 50px;
    }

    .abacus_summay ul li strong {
        line-height: 31px;
    }

    .abacus_summay &gt; ul &gt; li.in-view, 
    .abacus_summay &gt; ul &gt; li:nth-child(2).in-view, 
    .abacus_summay &gt; ul &gt; li:nth-child(3).in-view {transition-delay: 0s;}

    .strategy &gt; ul &gt; li {
        float: left;
        width: 100%;
        line-height: 31px;
    }

    .strategy &gt; ul &gt; li:nth-child(1),
    .strategy &gt; ul &gt; li:nth-child(2) {
        margin-bottom: 40px;
    }

    .strategy_text.in-view.second li:nth-of-type(1) p {transition-delay: 0.3s;}
    .strategy_text.in-view.second li:nth-of-type(2) p {transition-delay: 0.6s;}
    .strategy_text.in-view.second li:nth-of-type(3) p {transition-delay: 0.9s;}
    .strategy_text.in-view.second li:nth-of-type(4) p {transition-delay: 1.2s;}
    .strategy_text.in-view.third li:nth-of-type(1) p {transition-delay: 0.3s;}
    .strategy_text.in-view.third li:nth-of-type(2) p {transition-delay: 0.6s;}

    .intro_content.main a {max-width: 250px; margin: 30px 0;}
    .intro_content.main img {height: auto;}

    .index_intro .intro_content,    
    .bigdata_intro .intro_content,
    .cypress_intro .intro_content,
    .abacus_intro .intro_content,
    .pando_intro .intro_content {
        background-position: center center;
        background-size: 300px 540px;
    }

    .cypress_intro .intro_content {justify-content: center; padding: 0;background-position: center calc(50% - 60px);}
    .cypress_intro.form .main_text {margin: 0px;}
    .main_text.cypress_title {margin: 200px 0 0 0;}

    .who_we_are &gt; li {
        width: 50%;
        padding: 20px 10px;
        box-sizing: border-box;
    }   
    
    .intro_content {width:75%;}

    .main_text {
        width: auto;
        height: auto;
        position: absolute;
        top: 56%;
        bottom: 0%;
        right: 0%;

        color: #fff;
        font-size: 16px;
        margin-right: -20px;
        margin-top: 180px;
        /*text-align: center;*/
        cursor: default;
        transition: all .4s;
        text-align: right;
    }

    .main_text img {
        height: 60px;
    }

    /* .index_intro .main_text {
        display: none;
    } */

    .main_text:not(.cypressplus_title) p {
        display: none;
    }

    .namu_sub {
        margin: 10px auto 0;
        width: 90%;
    }

    #inquires_btn {
        display: none;
    }

    .client {
        width: 33.3333%;
        height: 80px;
        margin: 0;
    }

    #gnb .menu &gt; ul {
        padding: 0 40px 0 80px;
    }

    .menu_ect ul li a {
        padding-left: 30px;
    }

    .product {display: flex;flex-wrap: wrap;}

    .product.in-view {animation:none;}

    .product &gt; img {
        display: none;
    }

    .product &gt; .cube-title {display: none;}

    .product ul {
        display: block;
    }

    .product ul li {
        width: 50%;
        float: left;
        height: 200px;
        text-align: center;
    }

    .product ul li img {
        width: 60px;
        padding-bottom: 10px;
    }

    .product ul li p {
        display: block;
        margin: 0 auto;
    }

    /* .product.in-view &gt; ul &gt; li {animation: bounce-md 2.0s ease-in-out;}
    .product.in-view &gt; ul &gt; li:nth-child(2) {animation-delay: .5s;}
    .product.in-view &gt; ul &gt; li:nth-child(3) {animation-delay: 1.0s;}
    .product.in-view &gt; ul &gt; li:nth-child(4) {animation-delay: 1.5s;}
    .product.in-view &gt; ul &gt; li:nth-child(5) {animation-delay: 2.0s;}
    .product.in-view &gt; ul &gt; li:nth-child(6) {animation-delay: 2.5s;} */

    .cube_itme {/* display: none; */width: 50%;height: 200px;position: relative;top: auto;left: auto;margin: 0;right: auto;bottom: auto;}
    .cube_itme p {width: 100%;}
    .product.in-view .cube_itme {animation: bounce-md 2.0s ease-in-out;}
    .product.in-view .cube_itme.cube2 {animation-delay: .5s;}
    .product.in-view .cube_itme.cube3 {animation-delay: 1.0s;}
    .product.in-view .cube_itme.cube4 {animation-delay: 1.5s;}
    .product.in-view .cube_itme.cube5 {animation-delay: 2.0s;}
    .product.in-view .cube_itme.cube6 {animation-delay: 2.5s;}




    .cypress_intro .img-device-bundle {width: 100%;left: 0;background-size: contain;}

    .cypress_form.diagram &gt; .col_sm {flex: 0 0 50%;max-width: 50%;}        
    .cypress_form.diagram &gt; .col_md {flex: 0 0 50%;max-width: 50%;}
    .col_lg_inner, .col_sm_inner {flex: 0 0 50%;}
    .diagram_chip {font-size: 13px;letter-spacing:0;}   

}


@media only screen and (max-width: 480px) {
    .award2023kcga {top: 50px;width: calc(100% - 24px);}
    .monitor-wrap {flex-direction: column; padding: 0px 28px;}
    .monitor-frame {margin: 6px 0px;}
    .monitor-frame iframe {height: 186px;}   
 

    #gnb {
        width: 320px;
        box-sizing: border-box;
    }


    .group img {
        width: 100%;
    }


    .up {
        display: block;
    }


    .main_text {top: auto;bottom: 64px;}

    .main_text.cypressplus_title p {font-size: 18px; font-size: 4.8vw; margin: 0px 0 -8px 14px;}

    .main_title {
        font-size: 38px;
        letter-spacing: 6px;
        line-height: 40px;
        background-color: inherit;
    }

    .main_title &gt; span {
        display: block;
    }

    .and_txt {
        transform: rotate(0deg);
        top: 3px;
        right: -40px
    }

    .sub_title_ {
        font-size: 18px;
        background-color: inherit;
    }


    .client {
        width: 33.3333%;
    }

    .client_logo {
        width: 100%;
    }

    .org_chart .dept {padding: 16px 0;}
    .org_chart .hasgap-right, .org_chart .hasgap-left {padding: 16px 0;}
    .org_chart .item {font-size:14px;}
    
    .data_voucher ul.inner_box li {width: calc(33.333% - 5px);}
    .data_voucher ul.inner_box li:nth-child(2) {margin: 0 10px 0 5px;}    
    .data_voucher ul.inner_box li img {position: static;height: auto;transform: none;}

    .cypress_form.diagram &gt; .col_sm {order: 1;flex: 0 0 100%;max-width: 100%;}
    .cypress_form.diagram &gt; .col_lg {order: 2;}
    .cypress_form.diagram &gt; .col_md {flex: 0 0 100%;max-width: 100%;}
    .col_lg_inner, .col_sm_inner {flex: 0 0 100%;}

}


















</pre></body></html>