@charset "UTF-8";
@import url('./user.common.css');
/**************************************************/
/* ================================= common */
/* nav */
.nav_subCate{ width: 100%; border-bottom: .3px solid #C0C0C0; }
.nav_subCate .maxWidth2{ display: flex; align-items: center; justify-content: center; height: 142px; }
.nav_subCate a{ 
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: 1; height: 50px;
    line-height: 1.4; text-align: center; color: #333; font-size: 17.5px; 
} 
.nav_subCate a.active:after{ 
    position: absolute; left: 50%; bottom: -8px;
    width: 68px; height: 1px; background: #000;
    content: '';
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
}

.bn_main .wrap{ 
    top: 50%; left: 50%; 
    text-align: center; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
}

/**************************************************/
/* ================================= layout */
/* === page_brand_intro == */
#page_brand_intro img{ width: 100%;}

/* --- sec_1 */
#page_brand_intro #sec_1 .wrap_col{ align-items: center; }
#page_brand_intro #sec_1 p.col_6 { color: #333; }
#page_brand_intro #sec_1 p.col_6 span{ font-weight: 300; }

/* --- sec_2 */
#page_brand_intro #sec_2 .wrap{ text-align: center;}
#page_brand_intro #sec_2 .wrap p{ margin: auto; border-bottom: 2px solid #999; color: #333; font-weight: 500; }

#page_brand_intro #sec_2 ul{ width: 100%;}
#page_brand_intro #sec_2 li { display: flex; justify-content: space-between; align-items: center; }
#page_brand_intro #sec_2 li > div{ font-weight: 300;  }

/**************************************************/
/* === page_barnd_gallery == */
#page_brand_gallery #sec_1 .swiper:before{ display: block; content: attr(title); color: #333; }
#page_brand_gallery #sec_1 .swiper-slide img{ width: 100%; height: 100%; object-fit: cover;}
#page_brand_gallery #sec_1 .swiper-scrollbar{ opacity: 1 !important; }

/**************************************************/
/* === page_brand_way == */
#page_brand_way #sec_1 > [class*="bx_"]{ display: flex; flex-flow: row wrap; justify-content: center;}

/* wrap_left */
#page_brand_way #sec_1 .wrap_left{ display: flex; flex-flow: column nowrap;  }
#page_brand_way #sec_1 .wrap_left p{ color: #333; }
#page_brand_way #sec_1 .wrap_left li{ font-weight: 300;}
#page_brand_way #sec_1 .wrap_left .bx_map{ background-color: gray;}

/* wrap_bottom */
#page_brand_way #sec_1 .wrap_bottom { position: relative; width: 100%;}
#page_brand_way #sec_1 .wrap_bottom li{ position:relative; display: flex; align-items: center; width: 100%;}
#page_brand_way #sec_1 .wrap_bottom li:before{ content: attr(title);}
#page_brand_way #sec_1 .wrap_bottom p{ font-weight: 300;}
#page_brand_way #sec_1 .wrap_bottom span{ background: url(../img/user/brand/way_sec1_img_transport.png) no-repeat;}
#page_brand_way #sec_1 .wrap_bottom li:nth-of-type(1) span{ background-position: center left 0;}

/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    /* ==================== common */
    .bn_main .wrap{ bottom: unset; font-size: 50px; }
    .bn_main .wrap *{ text-align: center;}
    .bn_main h4{ margin-top: 30px; font-size: 100px; }
    .bn_main h5{ margin-top: 20px; font-size: 60px; }
    .bn_main p{ font-size: 30px;}

    /* ==================== layout */
    /* === page_brand_intro == */
    /* --- sec_1 */
    #page_brand_intro #sec_1 .wrap_col{ padding: 182px 0 186px;}
    #page_brand_intro #sec_1 p.col_6{ max-width: 678px; margin: auto; padding: 30px; font-size: 20px;}
    #page_brand_intro #sec_1 p.col_6 span{ margin-top: 44px; font-size: inherit; line-height: inherit; }

    /* --- sec_2 */
    #page_brand_intro #sec_2 .wrap p{ width: 110px; padding-bottom: 12px; font-size: 25px; }
    #page_brand_intro #sec_2 .wrap h4{ margin: 24px auto 142px;  font-size: 39px; }

    #page_brand_intro #sec_2 ul{ margin-bottom: 250px;}
    #page_brand_intro #sec_2 li img { width: calc(50% + 68px); }
    #page_brand_intro #sec_2 li > div{ width: 50%; margin: auto; font-size: 18px; }
    #page_brand_intro #sec_2 li p{ margin-bottom: 50px; font-size: 25px; line-height: 1.4; }

    #page_brand_intro #sec_2 li:nth-of-type(odd) > div{ max-width: 492px;}

    #page_brand_intro #sec_2 li:nth-of-type(2){ margin: 188px 0 190px;}
    #page_brand_intro #sec_2 li:nth-of-type(2) > div{ max-width: 578px; text-align: right; }
    #page_brand_intro #sec_2 li:nth-of-type(2) img {
        max-width: 735px; margin-right: auto; 
        margin-left: 68px;
    }

    /* === page_barnd_gallery == */
    #page_brand_gallery #sec_1 .swiper{ position: relative; padding: 210px 0 212px;}
    #page_brand_gallery #sec_1 .swiper:before{ position: absolute; top: 0; left: 17%; font-size: 24.5px;}
    #page_brand_gallery #sec_1 .swiper-slide{ 
        aspect-ratio: 1/.6;
        transition: transform 0.3s ease-out;
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
    }
    #page_brand_gallery #sec_1 .swiper-slide-prev{ padding-left: 6%;}
    #page_brand_gallery #sec_1 .swiper-slide-next{ padding-right: 6%;}
    #page_brand_gallery #sec_1 .swiper-slide-active{ 
        z-index: 1000; 
        transform: scale(200%); 
        -webkit-transform: scale(200%); 
        -moz-transform: scale(200%); 
        -ms-transform: scale(200%); 
        -o-transform: scale(200%); 
        transform-origin: center;
        -webkit-transform-origin:center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin:center;
    }
    #page_brand_gallery #sec_1 .swiper-scrollbar{
        left: 50%; max-width: 450px; 
        transform: translate(-50%, 0); 
        -webkit-transform: translate(-50%, 0); 
        -moz-transform: translate(-50%, 0); 
        -ms-transform: translate(-50%, 0); 
        -o-transform: translate(-50%, 0); 
    }

    #page_brand_gallery #sec_1 .slide_01{ margin: 188px 0 155px;}
    #page_brand_gallery #sec_1 .swiper{ margin-bottom: 115px;}


    /* === page_brand_way == */
    #page_brand_way #sec_1 { padding: 190px 0 110px;}
    #page_brand_way #sec_1 > [class*="bx_"]{ position: relative; gap: 66px 54px; padding: 120px 0 140px;}
    #page_brand_way #sec_1 > [class*="bx_"]:before{ 
        position: absolute; top: 0; left: 128px;
        width: 27px; height: 27px;
        border: 1px solid #000; border-radius: 50%;
        content: attr(data-index); text-align: center; font-weight: 500; font-size: 16px; line-height: 25px;
    }
    #page_brand_way #sec_1 > [class*="bx_"]:after{
        position: absolute; top: 13px; left: 24px;
        width: 104px; height: 1px; background: #000;
        content: '';
    }
    #page_brand_way #sec_1 img{ width: 400px;}

    /* wrap_left */
    #page_brand_way #sec_1 .wrap_left{ width: calc(100% - 454px); max-width: 600px;}
    #page_brand_way #sec_1 .wrap_left p{ font-size: 24.5px;}
    #page_brand_way #sec_1 .wrap_left p::before{ content: '모바이오 ';}
    #page_brand_way #sec_1 .wrap_left ul{ margin: 36px 0 25px; padding-left: 8px;}
    #page_brand_way #sec_1 .wrap_left li{ list-style: outside; line-height: 1.67;  font-size: 18px;}
    #page_brand_way #sec_1 .wrap_left li::marker{ content: '· ';}

    #page_brand_way #sec_1 .wrap_left .bx_map{ flex: 1;}

    /* wrap_bottom */
    #page_brand_way #sec_1 .wrap_bottom{ border-top: 0.3px solid #C0C0C0; }
    #page_brand_way #sec_1 .wrap_bottom li{ padding: 14px 0; border-bottom: 0.3px solid #C0C0C0; }
    #page_brand_way #sec_1 .wrap_bottom li:before{ margin-right: 177px; font-size: 20px; }
    #page_brand_way #sec_1 .wrap_bottom li p{  line-height: 1.94;  font-size: 18px;}
    #page_brand_way #sec_1 .wrap_bottom span{ width: 60px; height: 60px; margin-right: 80px; background-size: 180px 60px;}
    #page_brand_way #sec_1 .wrap_bottom li:nth-of-type(2) span{ background-position: center left -60px;}
    #page_brand_way #sec_1 .wrap_bottom li:nth-of-type(3) span{ background-position: center left -120px;}



}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){
    /* === page_brand_intro == */
    /* --- sec_1 */
    #page_brand_intro #sec_1 .bn_img{ 
        max-height: 600px; padding: 40px 0 100px; 
        object-fit: cover; object-position: center;
    }

    #page_brand_intro #sec_1 .col_6 img{ display: block; max-width: 560px; margin: auto;}
    #page_brand_intro #sec_1 p.col_6{ padding: 46px 0 96px; text-align: center; }
    #page_brand_intro #sec_1 p.col_6 span{ margin-top: 24px; font-size: 0.85rem;  line-height: 1.67;}

    /* --- sec_2 */
    #page_brand_intro #sec_2 { padding: 0 30px; max-width: 640px; margin: auto;}
    #page_brand_intro #sec_2 .wrap p{ width: 55px; padding-bottom: 5px; font-size: 0.85rem;}
    #page_brand_intro #sec_2 .wrap h4{ margin: 8px auto 26px;}

    #page_brand_intro #sec_2 li{ flex-flow: column nowrap;}
    #page_brand_intro #sec_2 li img{ width: 100%;}
    #page_brand_intro #sec_2 li > div{padding: 30px 0 100px; text-align: center; font-size: 0.85rem; line-height: 1.5;}
    #page_brand_intro #sec_2 li p{ margin-bottom: 24px; font-size: 1rem; line-height: 1.57; }

    /* === page_barnd_gallery == */
    #page_brand_gallery #sec_1{ padding-left: 0 !important; padding-right: 0 !important;}
    #page_brand_gallery #sec_1 .swiper{ padding-bottom: 10px; margin-bottom: 100px;}
    #page_brand_gallery #sec_1 .swiper:before{ margin-bottom: 25px; text-align: center; font-weight: 300; }

    #page_brand_gallery #sec_1 .slide_01{ margin-top: 60px;}



    /* === page_brand_way == */
    #page_brand_way #sec_1 { padding-bottom: 100px;}

    /* wrap_left */
    #page_brand_way #sec_1 .wrap_left{ width: 100%;}
    #page_brand_way #sec_1 .wrap_left .bx_map{ order: 1; position: relative; left: -30px; width: calc(100% + 60px); aspect-ratio: 1/0.83; max-height: 400px; margin: 60px 0 35px;}
    #page_brand_way #sec_1 .wrap_left p{ order: 2; font-weight: 500; }

    #page_brand_way #sec_1 .wrap_left ul{ display:flex; flex-flow: row wrap; align-content: flex-start; order: 3; }
    #page_brand_way #sec_1 .wrap_left li{ font-size: 0.85rem;}
    #page_brand_way #sec_1 .wrap_left li:nth-of-type(1){ width: 100%; padding: 10px 0 8px; margin-bottom: 8px; border-bottom: solid 0.2px #C0C0C0; }
    #page_brand_way #sec_1 .wrap_left li:nth-of-type(n+2){ color: #666;  letter-spacing: 0.6px;  line-height: 1.58; font-weight: 300; }
    #page_brand_way #sec_1 .wrap_left li:nth-of-type(n+2):before{ 
        display: block; margin-bottom: 6px; font-weight: 500; content: attr(title); line-height: 1.58; color: #333; 
    }
    #page_brand_way #sec_1 .wrap_left li:nth-of-type(2){ flex: 1; padding-right: 28px;}
    #page_brand_way #sec_1 .wrap_left li:nth-of-type(3){ width: 40%; min-width: 100px; }

    /* wrap_bottom */
    #page_brand_way #sec_1 .wrap_bottom *{ font-size: 0.85rem; }
    #page_brand_way #sec_1 .wrap_bottom li{ margin-top: 60px; padding: 10px 0; }
    #page_brand_way #sec_1 .wrap_bottom li:before{ position: absolute; bottom: 0; width: 60px; text-align: center;}
    #page_brand_way #sec_1 .wrap_bottom p{ width: calc(100% - 60px); padding-left: 32px;}
    #page_brand_way #sec_1 .wrap_bottom span{ width: 40px; height: 40px; margin: 0 0 10px 10px; background-size: 120px 40px;}
    #page_brand_way #sec_1 .wrap_bottom li:nth-of-type(2) span{ background-position: center left -40px;}
    #page_brand_way #sec_1 .wrap_bottom li:nth-of-type(3) span{ background-position: center left -80px;}
}