/* Animation */
.fp-section.active [data-am]{
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-transition-delay: .1s; transition-delay: .1s;
    -webkit-transition-duration: .3s; transition-duration: .3s;
    opacity: 1;
}
[data-am]{
    -webkit-transition-property: all; transition-property: all;
    -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;
    -webkit-transition-delay: 0; transition-delay: 0;
    -webkit-transition-duration: .1s; transition-duration: .1s;
    opacity: 0;
}
[data-am="fade-up"]{ -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); }
[data-am="fade-right"]{ -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); }
[data-am="fade-down"]{ -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); }
[data-am="fade-left"]{ -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); }
.fp-section.active [data-am-delay="100"] { -webkit-transition-delay: .1s; transition-delay: .1s; }
.fp-section.active [data-am-delay="150"] { -webkit-transition-delay: .15s; transition-delay: .15s; }
.fp-section.active [data-am-delay="200"] { -webkit-transition-delay: .2s; transition-delay: .2s; }
.fp-section.active [data-am-delay="250"] { -webkit-transition-delay: .25s; transition-delay: .25s; }
.fp-section.active [data-am-delay="300"] { -webkit-transition-delay: .3s; transition-delay: .3s; }
.fp-section.active [data-am-delay="350"] { -webkit-transition-delay: .35s; transition-delay: .35s; }
.fp-section.active [data-am-delay="400"] { -webkit-transition-delay: .4s; transition-delay: .4s; }
.fp-section.active [data-am-delay="450"] { -webkit-transition-delay: .45s; transition-delay: .45s; }
.fp-section.active [data-am-delay="500"] { -webkit-transition-delay: .5s; transition-delay: .5s; }
.fp-section.active [data-am-delay="550"] { -webkit-transition-delay: .55s; transition-delay: .55s; }
.fp-section.active [data-am-delay="600"] { -webkit-transition-delay: .6s; transition-delay: .6s; }
.fp-section.active [data-am-delay="650"] { -webkit-transition-delay: .65s; transition-delay: .65s; }
.fp-section.active [data-am-delay="700"] { -webkit-transition-delay: .7s; transition-delay: .7s; }
.fp-section.active [data-am-delay="750"] { -webkit-transition-delay: .75s; transition-delay: .75s; }
.fp-section.active [data-am-delay="800"] { -webkit-transition-delay: .8s; transition-delay: .8s; }
.fp-section.active [data-am-delay="850"] { -webkit-transition-delay: .85s; transition-delay: .85s; }
.fp-section.active [data-am-delay="900"] { -webkit-transition-delay: .9s; transition-delay: .9s; }
.fp-section.active [data-am-delay="950"] { -webkit-transition-delay: .95s; transition-delay: .95s; }
.fp-section.active [data-am-delay="1000"] { -webkit-transition-delay: 1s; transition-delay: 1s; }
.fp-section.active [data-am-duration="100"] { -webkit-transition-duration: .1s; transition-duration: .1s; }
.fp-section.active [data-am-duration="150"] { -webkit-transition-duration: .15s; transition-duration: .15s; }
.fp-section.active [data-am-duration="200"] { -webkit-transition-duration: .2s; transition-duration: .2s; }
.fp-section.active [data-am-duration="250"] { -webkit-transition-duration: .25s; transition-duration: .25s; }
.fp-section.active [data-am-duration="300"] { -webkit-transition-duration: .3s; transition-duration: .3s; }
.fp-section.active [data-am-duration="350"] { -webkit-transition-duration: .35s; transition-duration: .35s; }
.fp-section.active [data-am-duration="400"] { -webkit-transition-duration: .4s; transition-duration: .4s; }
.fp-section.active [data-am-duration="450"] { -webkit-transition-duration: .45s; transition-duration: .45s; }
.fp-section.active [data-am-duration="500"] { -webkit-transition-duration: .5s; transition-duration: .5s; }
.fp-section.active [data-am-duration="550"] { -webkit-transition-duration: .55s; transition-duration: .55s; }
.fp-section.active [data-am-duration="600"] { -webkit-transition-duration: .6s; transition-duration: .6s; }
.fp-section.active [data-am-duration="650"] { -webkit-transition-duration: .65s; transition-duration: .65s; }
.fp-section.active [data-am-duration="700"] { -webkit-transition-duration: .7s; transition-duration: .7s; }
.fp-section.active [data-am-duration="750"] { -webkit-transition-duration: .75s; transition-duration: .75s; }
.fp-section.active [data-am-duration="800"] { -webkit-transition-duration: .8s; transition-duration: .8s; }
.fp-section.active [data-am-duration="850"] { -webkit-transition-duration: .85s; transition-duration: .85s; }
.fp-section.active [data-am-duration="900"] { -webkit-transition-duration: .9s; transition-duration: .9s; }
.fp-section.active [data-am-duration="950"] { -webkit-transition-duration: .95s; transition-duration: .95s; }
.fp-section.active [data-am-duration="1000"] { -webkit-transition-duration: 1s; transition-duration: 1s; }

.fp-responsive .fullpage-wrapper,
.fp-responsive .fp-section:not(.section--visual),
.fp-responsive .fp-tableCell,
.fp-responsive .fp-scrollable{
    height: auto !important;
}

@media (max-width:1024px){
    .fp-scroller{
        height: 100%;
    }
}

/* Navigation */
.nav-container{
    z-index: 10; position: fixed; top: 50%; left: 0;
    -webkit-transition: all ease .15s; transition: all ease .15s;
}
.nav-wrapper{
    z-index: 100; position: absolute; top: 50%; left: 90px;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.nav-container ul { margin: 0; padding: 0; animation: slideFade-rightIn 1s ease-out forwards; }
.nav-container li a{
    display: flex; align-items: flex-end; position: relative; margin: 36px 0; padding: 0 0 0 28px;
    line-height: 1; font-family: 'Montserrat'; font-size: 1.4rem; color: rgba(255,255,255,.6);
    -webkit-transition: all ease .15s; transition: all ease .15s;

    /*추가*/
    text-transform: uppercase;

}
.nav-container li i{
    display: block; position: absolute; top: 0; left: 0;
    width: 17px; height: 15px;
}
.nav-container li i::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    margin: auto; width: 7px; height: 7px; background: #ffffff; border-radius: 50%;
    -webkit-transition: all ease .15s; transition: all ease .15s;
    opacity: .2;
}
.nav-container li svg{
    display: block; width: inherit; height: inherit; opacity: 0;
    -webkit-transition: all ease .15s; transition: all ease .15s;
}
.nav-container li.active a { color: rgba(255,255,255,1); }
.nav-container li.active i::after { opacity: 1; }
.nav-container li.active svg { opacity: 1; }

.nav-container[data-nav="off"]{
    left: -3%;
    /*opacity: 0;*/
    opacity: 1;
    pointer-events: none;
}
.nav-container[data-nav-theme="dark"] li a{
    color:rgba(34,34,34,.6);
}

.nav-container[data-nav-theme="dark"] li.active a {color:#333;}

.nav-container[data-nav-theme="dark"] li i::after{
    background: #222222;
}
@media(max-width:1200px){

  .nav-container {display:none;}

}

@media(max-width:1024px){


}
@media(max-width:768px){
    .nav-container { animation: slideFade-leftOut 1s ease-out forwards; opacity: 0 !important; visibility: hidden; }
}


.scroll-down{
    z-index: 10; /*position: fixed;*/ position:absolute; /*bottom: 5%;*/ bottom:0; right: 1.9%;
    -webkit-transition: all ease .3s; transition: all ease .3s; /*width:2px;*/ height:110px;
}
.scroll-down .text{
    display: block; line-height: 1;
    font-family: 'Montserrat'; font-size: 1.2rem; color: #ffffff; font-weight: 300;
    -webkit-transform-origin: top left; transform-origin: top left;
    -webkit-transform: rotate(90deg) translate(-90px, -10px); transform: rotate(90deg) translate(-90px, -10px);
    position:absolute; top:0px; left:-40px; white-space:nowrap;
}
.scroll-down .arrow{
    display: block; width: 10px; height: 9px;
    background: url('/child/img/icon/scroll-down-arrow.png') no-repeat;
    animation: scroll-down 1.8s ease infinite; position: absolute; left:-40px;
}
@keyframes scroll-down {
    0% { opacity: 0; transform: translateY(-10px); }
    10%, 50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(20px); }
}
.scroll-down[data-scroll-down="off"]{
    opacity: 0;
    pointer-events: none;
}
@media(max-width:1200px){

}
@media(max-width:768px){

    .scroll-down {display: none;}

}




/* Visual */
.visual{
    overflow: hidden; /*padding-top: 100px;*/ height: 100%; /*background: #000;*/
}


@keyframes scroll-down {
    60%, 100% { -webkit-transform: translateY(200%); transform: translateY(200%); }
}

.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
.visual .swiper-wrapper{
    height: 100%;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}
.visual .swiper-slide { overflow: hidden; height: 100%; background: #000; }
.visual .prev,
.visual .next{
    z-index: 2; position: absolute; top: 0; bottom: 0; margin: auto; width: 50px; height: 80px; cursor: pointer !important;
    background-repeat: no-repeat; background-position: center; background-size: auto 24px; background-color: rgba(0,0,0,.3); border-radius: 10px;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s; opacity: 0;
}
.visual .prev{
    left: 230px; width: 40px; height: 70px; background-image: url('/child/img/icon/arrow-left-thin.svg');
    -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.visual .next{
    right: 230px; width: 40px; height: 70px; background-image: url('/child/img/icon/arrow-right-thin.svg');
    -webkit-transform: translateX(50px); transform: translateX(50px);
}
.visual .slide-pagination{
    height: 10px;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
}
.visual .slide-pagination.swiper-pagination-bullets { z-index: 2; position: absolute; bottom: 60px; width: 100%; text-align: center; font-size: 0; }
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 7px; width: 80px; height:2px; background: rgba(255,255,255,.5); /*border: 1px solid #fff;*/ /*border-radius: 14px;*/
    -webkit-transition: all ease .2s; transition: all ease .2s;
    opacity: 1;
}
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 80px; background: rgba(255,255,255,1); }
.visual .background{
    height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;
    -webkit-transform: scale(1.1); transform: scale(1.1);
}

.visual .background--1 { background-image: url('/child/img/main/v1-background.jpg'); }
.visual .background--2 { background-image: url('/child/img/main/v2-background.jpg'); }
.visual .background--3 { background-image: url('/child/img/main/v3-background.jpg'); }

.visual .context{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    z-index: 2; position: absolute; top: 0; left: 0; right: 0; margin: auto; max-width: 1200px; width: 100%; height: 100%; color: #fff;
}

.visual .context--1 .title{
    margin: 0; line-height: 1; font-size: 60px; font-weight:900;
    animation: title1-end 1s ease forwards;
    -webkit-transition: all ease 1s; transition: all ease 1s;
    opacity: 0;
}
.visual .context--1 .logo{
    width: 600px;
    -webkit-transition: all .6s ease-out; transition: all .6s ease-out;
    animation: logo1-end 1s ease forwards;
    opacity: 0;
}

.visual .context--2{
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.visual .context--2 .title{
    margin: 0; line-height: 1; text-align: left; font-size: 80px; font-weight: 200;
    animation: title1-end 1s ease forwards;
    -webkit-transition: all ease 1s; transition: all ease 1s;
    opacity: 0;
}
.visual .context--2 .title small {
    display: block; margin-bottom: 26px; font-size: 36px; font-weight: 400;
    letter-spacing: -.04em;
}
.visual .context--2 .icon{
    margin-top: 65px;
    -webkit-transition: all .6s ease-out; transition: all .6s ease-out;
    animation: logo1-end 1s ease forwards;
    opacity: 0;
}
.visual .context--2 >div:nth-child(1){
    width: 750px;
}
.visual .context--2 >div:nth-child(2){
    width: calc(100% - 750px);
    height: 100%;
}
.visual .context--2 .product{
    height: 100%;
    margin-right: -440px;
}
.visual .context--2 .product img{
    max-height: 100%;
}

.visual .context--3 .title{
    margin: 0; line-height: 1; font-size: 36px; font-weight: 200;
    animation: title1-end 1s ease forwards;
    -webkit-transition: all ease 1s; transition: all ease 1s;
    opacity: 0;
}
.visual .context--3 .pr{
    line-height: 1.25; text-align: center; font-size: 80px; font-weight: 200;
    -webkit-transition: all .6s ease-out; transition: all .6s ease-out;
    animation: logo1-end 1s ease forwards;
    opacity: 0;
}

.line-container { margin: 40px auto; max-width: 600px; width: 100%; height: 2px; font-size: 0; }
.line-wrapper{
    width: 100%; height: 100%;
    background-size: 200%;
    background-position: 200%;
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
}

.visual .swiper-container-initialized,
.visual .swiper-container-initialized .prev,
.visual .swiper-container-initialized .next,
.visual .swiper-container-initialized .slide-pagination{
    -webkit-transform: none; transform: none;
    opacity: 1;
}
.visual .background.on{
    -webkit-transition: all linear 6s; transition: all linear 6s;
    -webkit-transform: scale(1); transform: scale(1);
}
.swiper-slide-active .context .line-wrapper{
    animation: line 1.2s cubic-bezier(0.02, 0.33, 0.91, 0.58) 1s forwards;
}
.swiper-slide-active .context--1 .title,
.swiper-slide-active .context--2 .title,
.swiper-slide-active .context--3 .title { animation: title1-begin 1s ease 1s forwards; }
.swiper-slide-active .context--1 .logo,
.swiper-slide-active .context--2 .icon,
.swiper-slide-active .context--3 .pr { animation: logo1-begin .8s ease 2.2s forwards; }
@keyframes logo1-begin {
    from { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; }
    to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes logo1-end {
    from { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    to { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; }
}
@keyframes title1-begin {
    from { -webkit-transform: translateX(-150px); transform: translateX(-150px); opacity: 0; }
    to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes title1-end {
    from { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    to { -webkit-transform: translateX(150px); transform: translateX(150px); opacity: 0; }
}
@keyframes line {
    from { background-position: 200%; }
    to { background-position: -100%; }
}
@media(max-width:1200px){
.visual { padding-top: 50px;}
    .visual .prev,
    .visual .next { display: none; }
    .visual .slide-pagination.swiper-pagination-bullets { bottom: 30px; }

    .visual .context--1 .title { font-size: 20px; }
    .visual .context--1 .logo { width: 220px; }

    .visual .context--2 { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .visual .context--2 >div:first-child{
        width: auto;
        order: 2;
        text-align: center;
        margin-top: -147px;
    }
    .visual .context--2 >div:nth-child(2){
        width: auto;
        height: auto;
        margin-top: -100px;
    }
    .visual .context--2 .title { font-size: 30px; text-align: center; }
    .visual .context--2 .title small { font-size: 16px; margin-bottom: 10px; }
    .visual .context--2 .icon {
        width: 300px;
        margin: 40px auto 0;
    }
    .visual .context--2 .product {
        margin: 40px -186px 0 0;
        width: 380px;
    }

    .visual .context--3 .title { font-size: 20px; }
    .visual .context--3 .pr { font-size: 24px; }

    .line-container { width: 260px; margin: 15px auto; }
}
@media(max-width:768px){
    .visual .slide-pagination { height: 10px; }
    .visual .slide-pagination.swiper-pagination-bullets { bottom: 20px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 10px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 30px; }

}


/* Common */
/*.section--product { background-image: linear-gradient(to right, #0090d4 80px, transparent 0); }*/
.section__inner { /*padding-top: 120px;*/ padding-top:220px; height: 100%; }
.section .title { /*margin: 0 0 65px;*/ margin:0 0 50px; text-align: center; line-height: 1; font-size: 4.6rem; font-weight: 800; }
.section-block { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.section-block__row:first-child { flex: 1 1; display: flex;}
/* .section .fp-tableCell{
    display: block;
} */

@media(max-width:1440px){

  /*.section__inner {padding-top:160px;}*/

}

@media(min-width:1201px){
    .section { height: 100vh; }
}
@media(max-width:1200px){
  /*.section--product { background-image: linear-gradient(to right, #0090d4 45px, transparent 0); }*/
  .section .title { font-size: 4rem; /*margin-bottom: 45px;*/ margin-bottom: 40px; }
  .section__inner {padding-top:120px; /*bottom 추가*/ padding-bottom:120px;}

}
@media(max-height:770px){
    .section__inner{
        padding-top: 105px;  /*추가 210629*/ padding-bottom:105px;
    }

}
@media(max-width:768px){
    .section--product { background: #fff; }
    /* .section__inner{ padding-top: 80px; } */
    .section .title { font-size: 3rem; margin-bottom: 40px; }

    .section__inner {padding:80px 0px;}

}


/* Section - Product */
.products { display: -webkit-box; display: -ms-flexbox; display: flex; }
.products__slide { flex: 1 1; width: calc(100% - 340px); }
.products__thumbnail { padding-top:25px; width: 320px; }

.products-slide { position: relative; height: 100%; font-size: 2rem; color: #777777; }
.products-slide .swiper-container,
.products-slide .swiper-wrapper,
.products-slide .swiper-slide { height: 100%; background: #ffffff; }
.products-slide .controls{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    z-index: 2; position: absolute; bottom: 50px; left: 0;
}
.products-slide .controls .prev,
.products-slide .controls .next{
    margin-right: 2px; width: 50px; height: 50px;
    background-repeat: no-repeat; background-position: center; background-size: auto 20px; background-color: #ffffff;
    border: 1px solid #e6e6e6; /*border-radius: 8px;*/
    -webkit-transition: all ease .1s; transition: all ease .1s;
}
.products-slide .controls .prev { background-image: url('/child/img/icon/main-pr-arrow.png'); }
.products-slide .controls .next { background-image: url('/child/img/icon/main-nt-arrow.png'); }
.products-slide .product-box { overflow: hidden; display: flex; justify-content: space-between; /*padding: 50px 30px 50px 0;*/ padding:30px 30px 30px 0; }
.products-slide .product-box .left{
    animation: fadeOut .3s ease-out .3s forwards;
}
.products-slide .product-box .name { /*margin-bottom: 14px;*/ margin-top: 14px; line-height: 1; font-size: 3.75rem; font-weight: 800; color: #111111; }
.products-slide .product-box .name small { display: block; margin-bottom: 8px; font-size: 1.8rem; color: #0090d4; font-weight: 400; }

/*--p tag css--*/
.pro-sub-name {color:#0026b2;}
/*----*/

.products-slide .product-box .button { margin-top: 54px; padding: 10px 10px 12px; width: 200px; font-size: 1.8rem; }
.products-slide .product-box .image {

    position: relative; border:1px solid #e6e6e6;

}

.products-slide .product-box .image::before{
    /*content: '';*/ position: absolute; bottom: -50px; left: 0; right: 0; margin: auto; width: 160px; height: 45px; background: url('/child/img/main/shadow.png') no-repeat;
    -webkit-transform: scale(.5); transform: scale(.5);
}
.products-slide .product-box .image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
.products-slide .product-box .image img{
    width: 480px; height: auto; /*display 속성 추가*/ display:block;
    -webkit-transform: translateY(-50px); transform: translateY(-50px);
}
.products-thumb { display: flex; flex-wrap: wrap; margin: -5px -10px; }
.products-thumb__list { padding:8px 10px; width: 50%; }
.products-thumb__button { overflow: hidden; position: relative; padding-top: 100%; width: 100%; height: 0; }
.products-thumb__button::before { content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #dddddd; -webkit-transition: all ease-out .1s; transition: all ease-out .1s; /*border-radius: 10px;*/ }
.products-thumb__button[aria-pressed="true"]::before { border-width: 4px; border-color: #1849fe; }
.products-thumb__image { position: absolute; top: 50%; left: 50%; width: 70%; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.products-slide .product-box .image::before,
.products-slide .product-box .image img{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.55, 0, 0.75, 1);
    transition-duration: .35s;
    transition-delay: 0s;
    opacity: 0;
}
.products-slide .swiper-slide-active .product-box .image::before,
.products-slide .swiper-slide-active .product-box .image img{
    -webkit-transform: none; transform: none;
    transition-duration: .5s;
    transition-delay: .45s;
    opacity: 1;
}
.products-slide .swiper-slide-active .product-box .left{
    animation: fadeIn .35s cubic-bezier(0.55, 0, 0.75, 1) .5s forwards; opacity: 0;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
    from { opacity: 1; } to { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; } to { opacity: 0; }
}
@-webkit-keyframes fadeUp {
    from { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes fadeUp {
    from { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes fadeDown {
    from { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes fadeDown {
    from { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes fadeRight {
    from { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes fadeRight {
    from { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@media(min-width:1201px){
    .products-slide .controls .prev:hover { background-image: url('/child/img/icon/main-pr-arrow.png'); background-color: #f2f2f2; }
    .products-slide .controls .next:hover { background-image: url('/child/img/icon/main-nt-arrow.png'); background-color: #f2f2f2; }
    .products-thumb__button[aria-pressed="false"]:hover::before { border-width: 4px; border-color: #aaaaaa; }
}
@media(max-width:1440px){
    .products { -webkit-box-pack:end; -ms-flex-pack:end; /*justify-content:flex-end;*/

      padding: 0 70px; justify-content:center;

    }
  .products__thumbnail { /*width: 260px;*/ width:240px; }
    .products__slide { max-width: 620px; }
    .products-slide .product-box .image { max-width: 360px; }
    .products-slide .product-box .image::before { bottom: -42px; background-size: auto 32px; background-position: center; }

  .products-slide .product-box {padding:30px 18px 30px 0px;}

}
@media(max-width:1200px){


    .products { padding: 0 40px; }
    .products__thumbnail { width: 200px; }
    .products-slide .product-box { font-size: 1.4rem; }
    .products-slide .product-box .name { font-size: 2.6rem; }
    .products-slide .product-box .name small { font-size: 1.6rem; }
    .products-slide .product-box .button { margin-top: 42px; padding: 10px; font-size: 1.8rem; width: 160px; }
    .products-slide .controls .prev,
    .products-slide .controls .next { width: 42px; height: 42px; background-size: auto 16px; }
}

@media(max-width:1024px){

    .products{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        padding: 0;
    }
    .products__slide { max-width: none; width: 100%; }
    .products__thumbnail { padding-top: 30px; padding-bottom: 10px; width: 100%; }
    .products-thumb { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .products-thumb__list { padding: 2px; max-width: 100px; width: 16.66666%; }
    .products-thumb__button[aria-pressed="true"]::before { border-width: 2px; }
    .products-slide .product-box{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        padding: 0 0 100px; text-align: center; font-size: 1.3rem;
    }
    .products-slide .product-box .name { font-size: 1.8rem; }
    .products-slide .product-box .name small { font-size: 1.4rem; }
    .products-slide .product-box .button { position: absolute; bottom: 0; left: 50%; font-size: 1.4rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    .products-slide .product-box .image { margin: 15px auto 0; max-width: 240px; }
    .products-slide .controls { display: block; position: static; }
    .products-slide .controls .prev,
    .products-slide .controls .next { z-index: 2; position: absolute; top: 40%; width: 34px; height: 34px; background-size: auto 12px; }
    .products-slide .controls .prev { left: 0; }
    .products-slide .controls .next { right: 0; }


}


}

@media(max-width:768px){
    .products{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        padding: 0;
    }
    .products__slide { max-width: none; width: 100%; }
    .products__thumbnail { padding-top: 30px; padding-bottom: 10px; width: 100%; }
    .products-thumb { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .products-thumb__list { padding: 2px; max-width: 100px; width: 16.66666%; }
    .products-thumb__button[aria-pressed="true"]::before { border-width: 2px; }
    .products-slide .product-box{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        padding: 0 0 100px; text-align: center; font-size: 1.3rem;
    }
    .products-slide .product-box .name { font-size: 1.8rem; }
    .products-slide .product-box .name small { font-size: 1.4rem; }
    .products-slide .product-box .button { position: absolute; bottom: 0; left: 50%; font-size: 1.4rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    .products-slide .product-box .image { margin: 15px auto 0; max-width: 240px; }
    .products-slide .controls { display: block; position: static; }
    .products-slide .controls .prev,
    .products-slide .controls .next { z-index: 2; position: absolute; top: 40%; width: 34px; height: 34px; background-size: auto 12px; }
    .products-slide .controls .prev { left: 0; }
    .products-slide .controls .next { right: 0; }
}


/* Section - Technology */
.technology{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.technology__thumbnail { width: 360px; }
.technology__title { margin-top: 14px; text-align: center; line-height: 1.5; font-size: 2rem; font-weight: 800; }
.technology__title span { font-weight: 400; color: #5d5d5d; }

.measure-container { background: #f5f5f5; }
.measure { display: table; table-layout: fixed; padding: 45px 0; width: 100%; text-align: center; font-size: 2rem; }
.measure__row { display: table-row; }
.measure__cell { display: table-cell; vertical-align: middle; }
.measure__cell[role="columnheader"] { position: relative; padding: 22px 0; }
.measure__cell[role="columnheader"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 20px; height: 4px; background: #f4c43a; border-radius: 4px; }
.measure__cell[role="columnheader"]:not(:last-child)::after { content: ''; position: absolute; top: 30px; right: 0; width: 1px; height: 100px; background: #e3e3e3; }
.measure__num { display: block; line-height: 0.8; font-size: 4.6rem; font-weight: 800; color: #0090d4; }
@media(max-width:1440px){
    .technology { padding-bottom: 80px; }
    .technology__image { max-width: 320px; }
    .technology__thumbnail { width: auto; }
}
@media(max-width:1200px){
    .technology__image { max-width: 280px; }
    .technology__title { font-size: 1.8rem; }

    .measure { font-size: 1.8rem; }
    .measure__num { font-size: 3.6rem; }
}
@media(max-width:768px){
    .technology { margin: -16px 0; padding-bottom: 45px; }
    .technology__list { padding: 16px 0; text-align: center; }
    .technology__image { max-width: 180px; }
    .technology__title { margin-top: 8px; font-size: 1.6rem; }

    .measure { padding: 30px 0; font-size: 1.6rem; }
    .measure__num { font-size: 2.6rem; }
    .measure__cell[role="columnheader"]:not(:last-child)::after { height: 60px; }
}
@media(max-width:600px){
    .technology { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .measure { font-size: 1.3rem; }
    .measure__num { font-size: 1.8rem; }
    .measure__cell[role="columnheader"] { padding: 16px 0; }
    .measure__cell[role="columnheader"]::before { width: 16px; height: 3px; }
    .measure__cell[role="columnheader"]:not(:last-child)::after { content: none; }
}
@media(max-height:820px){
    .technology { padding-bottom: 40px; }
    .measure{
        padding:25px 0;
    }
}


/* Section - Center */
.cs-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 70px; }
.cs { flex: 1 1; display: flex; justify-content: flex-end; background-repeat: no-repeat; background-size: auto 300px; background-color: #2a2a2a; }
.cs:last-child { justify-content: flex-start; background-color: #444444; }
.cs:last-child .cs__contents { order: 1; text-align: right; }
.cs:last-child .cs__image { order: 2; }
.cs:last-child .cs__box { padding: 0 15px 0 0; }
.cs .button { padding: 10px 10px 12px; width: 200px; }
.cs .button-border-light:not(:hover) { border-color: rgba(255,255,255,.3); }
.cs__box { display: flex; align-items: flex-end; padding: 0 0 0 15px; max-width: 800px; width: 100%; }
.cs__image { margin-top: -170px; font-size: 0; width: 245px; }
.cs__contents { flex: 1 1; display: flex; flex-direction: column; justify-content: center; padding: 0 50px; height: 100%; }
.cs__title { display: block; margin-bottom: 40px; line-height: 1.4; font-size: 2rem; color: rgba(255,255,255,.8); }
.cs__title b { display: block; margin-bottom: 14px; font-size: 2.4rem; color: #08b0ff; font-weight: 800; }
.cs__tel { display: block; line-height: 0.8; font-size: 6rem; color: #ffffff; font-weight: 800; }
@media(max-width:1440px){
    .cs__image { max-width: 200px; }
    .cs__contents { padding: 32px; }
    .cs__tel { font-size: 5.4rem; }
}
@media(max-width:1200px){
    .cs-container { margin-top: 120px; }
    .cs__image { max-width: 160px; }
    .cs__title { font-size: 1.6rem; }
    .cs__title b { font-size: 1.8rem; }
    .cs__tel { font-size: 4rem; }
    .cs .button { padding: 10px; width: 180px; }
}
@media(max-width:768px){
    .cs-container{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        margin-top: 0;
    }
    .cs:last-child .cs__image { order: 1; }
    .cs:last-child .cs__contents { order: 2; text-align: left; }
    .cs:last-child .cs__box { padding: 0 0 0 15px; }
    .cs__contents { padding: 32px 24px; }
    .cs__image { max-width: 90px; }
    .cs__title { font-size: 1.4rem; margin-bottom: 30px; }
    .cs__title b { font-size: 1.6rem; margin-bottom: 6px; }
    .cs__tel { font-size: 2.4rem; }
    .cs .button { font-size: 1.4rem; }
}
@media(max-width:768px){
    .cs__image { max-width: 70px; }
}



/*main -visual 수정*/

.visual-txt-box p {font-size:24px; text-align: center;}


.line-navgation span {border-radius:0px !important;}


/*main sg css*/
.section--business {

  background:url("/child/img/main/business-sg.jpg") no-repeat center;


}

.business-img-wrap ul {display:flex; justify-content:center; padding:10px 0px;}

.business-img-wrap li {

    margin:0px 10px; position:relative; flex:1 1;

}

.business-img-wrap li .tabs-txt {

    position:absolute; width:100%; height:100%; padding:10px;
    z-index:10;

}

.business-img-wrap li h1 {

    font-size:4rem; line-height:1.4; color:#fff;
    font-weight:900; text-align:center;

}

.business-img-wrap li p {

    color:#fff; font-size:1.8rem; line-height:1.6; text-align:center;
    padding-top:20px;

}

.tabs-img {overflow:hidden;}

.bs-tab-wrap {width:100%; height:100%; position:relative;}

.business-img-wrap li img {

    display:block; transform: scale(1.1); transition:all 0.6s;

}


.business-img-wrap li .line-txt-box {

    border:1px solid rgba(255,255,255,.3); opacity: 0; transition:all 0.6s;
    width:100%; height:100%; position:relative;

}

.business-img-wrap li .on-txt-box {

    position:absolute; top:30px; left:100px;
    opacity:0; transition:all 0.9s;

}

.business-img-wrap li:hover img {transform: scale(1);}
.business-img-wrap li:hover .line-txt-box {opacity:1;}
.business-img-wrap li:hover .on-txt-box {left:30px;  opacity:1;}


.business-img-wrap li .on-txt-box h1 {text-align:left;}
.business-img-wrap li .on-txt-box p {text-align:left;}


.off-txt-box {

    position:absolute; width:100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:all 0.5s;

}

.business-img-wrap li:hover .off-txt-box {opacity:0;}

@media(max-width:1200px){

  /*.business-img-wrap ul {padding-bottom:105px;}*/

  /* .business-img-wrap li {width:28%;} */

  /* .business-img-wrap li h1 {font-size:2.2rem; line-height:1; }
  .business-img-wrap li p {font-size:1.6rem; padding-top:10px;} */

}

@media(max-width:1024px){

    /* .business-img-wrap li {width:30%; margin:0px 4px;} */

    .business-img-wrap li h1 {font-size:2.2rem; line-height:1;}

    .business-img-wrap li p {font-size:1.6rem; line-height:1.6;}

    .business-img-wrap li .on-txt-box {

        position:absolute; top:10px; left:60px;
        opacity:0; transition:all 0.9s;

    }

    .business-img-wrap li .tabs-txt {padding:5px;}

    .business-img-wrap li:hover .on-txt-box {left:10px;}


}


@media(max-width:768px){

    .visual-txt-box p {font-size:1.8rem;}
    .business-img-wrap ul {flex-wrap: wrap; width:100%;}
    .business-img-wrap li {flex:1 100%; height:200px; margin:10px 0px; overflow: hidden;}
    .business-img-wrap li img {width:100%;}


}

/*customer*/
.section--customer {

  background:url("/child/img/main/customer-sg.jpg") no-repeat center;


}

.section .customer-tit {color:#fff;}

.customer-icon-wrap {

    display:flex; justify-content: center; align-items: center; flex-wrap: wrap;
    border:1px solid rgba(255,255,255,.2); text-align:center;
    overflow:hidden; width:100%; background-color:rgba(1,13,43,.3);

}

.customer-icon-wrap li {

    width:25%; background-color:rgba(0,14,68,.5); /*padding:60px 0px;*/
    cursor:pointer; transition:all 0.3s ease;

}

.customer-icon-wrap li a {margin:50px 0px; border-right: 1px solid rgba(255,255,255,.15);}

.customer-icon-wrap li:last-child a {border-right:0px;}

.c-icon-box a {display:block; padding:50px;}

.customer-icon-wrap li h1 {

    font-size:24px; color:#fff; line-height:1; padding-top:30px; padding-bottom:10px;

}

.customer-icon-wrap li p {

    font-size:16px; color:rgba(255,255,255,.5);

}

@media(max-width:1200px){

    /*.customer-icon-wrap {width:88%;}*/
    .customer-icon-wrap li a {margin:30px 0px;}
    .c-icon-box a {padding:30px;}

    .customer-icon-wrap li h1 {padding-top:20px; font-size:20px;}

    .customer-images {max-width:105px;}


}

@media(max-width:1024px){

    .c-icon-box a {padding:10px;}

    .customer-images {max-width:85px;}

}

@media(max-width:768px){

    .customer-icon-wrap {width:90%; margin:0 auto;}

    .customer-icon-wrap li {width:50%;}

    .customer-icon-wrap li h1 {font-size:16px; padding-top:15px;}

    .customer-icon-wrap li p {font-size:14px;}

}


/**/
.section--contact {

    background:url("/child/img/main/contact-sg.jpg") no-repeat center;
    background-size: cover;

}

.map-wrap {display:flex; /*flex-wrap: wrap;*/ justify-content:center; align-items: center;}

/*.map-wrap > li {/*width:50%; height:auto; overflow:hidden;}*/

/*.map-wrap > li > div.map-box img {display:block;}*/

.map-wrap > li > div.map-box {max-width:700px; width:100%;}
.map-wrap > li > div.map-box img {display:block;}

.map-wrap > li > div.map-txt {padding:60px 0px 60px 60px;;}

.map-wrap > li > div.map-txt h1 {

    color:#fff; font-size:60px; line-height:1; font-weight:900;

}

.map-wrap > li > div.map-txt ul {padding:50px 0px;}

.map-wrap > li > div.map-txt span {line-height:1.4;}

.map-wrap > li > div.map-txt li {

    color:#fff; font-size:18px; padding-bottom:20px; display: flex; align-items: center;

}

.map-wrap > li > div.map-txt li:last-child {padding-bottom:0px;}

.map-txt em {display:inline-block;}

.map-txt .loaction-icon {

    background:url("/child/img/icon/loc-icon.png") no-repeat center;
    width:22px; height:22px; margin-right:10px;

}

.map-txt .tel-icon {

    background:url("/child/img/icon/tel-icon.png") no-repeat center;
    width:22px; height:22px; vertical-align:middle; margin-right:10px;

}

.map-txt .fax-icon {

    background:url("/child/img/icon/fax-icon.png") no-repeat center;
    width:22px; height:22px; vertical-align:middle; margin-right:10px;

}

.map-txt .mail-icon {

    background:url("/child/img/icon/mail-icon.png") no-repeat center;
    width:22px; height:22px; vertical-align:middle; margin-right:10px;

}

.contact-btn {

    color:#fff;
    width:200px; padding:15px 20px;
    background: -webkit-linear-gradient(left, rgba(0,38,178,1), rgba(25,74,255,1));

}

@media(max-width:1200px){

  .map-wrap > li > div.map-txt h1 {font-size:4rem;}

  .map-wrap > li > div.map-txt li {font-size:1.6rem; padding-bottom:20px;}



}

@media(max-width: 1024px){

    .map-wrap > li > div.map-txt li {font-size:1.6rem; padding-bottom:10px;}

    .map-wrap > li > div.map-box {max-width:540px;}

    .map-wrap > li > div.map-txt {padding:30px 0px 30px 30px;}

}

@media(max-width: 768px){

    .map-wrap {flex-wrap: wrap; justify-content: flex-start;}

    .map-wrap > li > div.map-txt h1 {font-size:3rem;}
    .map-wrap > li > div.map-box {max-width:700px;}
    .map-wrap > li > div.map-txt {padding:30px 0px;}
    .map-wrap > li > div.map-txt ul {padding:30px 0px;}


}

@media(max-width: 480px){


    .map-txt .loaction-icon {margin-right:4px;}
    .map-wrap > li > div.map-txt h1 {font-size:3.4rem;}
    .map-wrap > li > div.map-txt ul {padding:30px 0px;}
    .map-wrap > li > div.map-txt span {font-size:1.4rem;}

}