.body {
    background-color: #0a111d;
}

/* subtop */
#subtop {
    margin-top: 100px;
    border-bottom: 1px solid rgba(90,90,90,0.2);
}



/* site_config */
#site_config {
    position: relative;
    z-index: 30;
    display: inline-block;
    border-radius: 100px;
    padding: 0 15px;
}
#site_config .site .home {
    float: left;
    line-height: 50px;
    position: relative;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.02em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#site_config .site .home.home2,
#site_config .site .home.home3 {
    position: relative;
}
#site_config .site .home.home2:after,
#site_config .site .home.home3:after {
    
}
#site_config .site .home.act:before {
    content: "";
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-bottom: 0px;
}
#site_config .site .home .site_toggle i {
    display: inline-block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#site_config .site .home.act .site_toggle i {
    transform: rotate(180deg);
}
#site_config .site .home.home1 {
    text-align: center;
}
#site_config .site .home > span {
    display: block;
    padding: 0px 10px;
    cursor: pointer;
    position: relative;
    z-index: 3;
    color: #fff;
}
#site_config .site .home > ul {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 200px;
    border-top: 0px;
    padding: 12px 8px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    transform: translate3d(-50%, -8px, 0);
}
/* #site_config .site .home > ul li:not(:first-child) {
    border-top: 1px solid #eee;
} */
#site_config .site .home > ul li a {
    display: block;
    text-decoration: none;
    font-size: 15px;
    line-height: 1em;
    padding: 10px;
    color: #666;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#site_config .site .home > ul li a.act {
    color: #333;
}
#site_config .site .home > ul li a:hover{
    color: #111;
    text-decoration: underline;
    font-weight: 700;
}
#site_config .site .home > ul li:hover a:after {
    width: 100%;
    left: 0%;
}
@media (max-width:992px) {
    #site_config .site .home {
        line-height: 50px;
        font-size: 15px;
    }
}
@media (max-width:768px) {
    #site_config .site .home {
        line-height: 40px;
        font-size: 12px;
    }
    #site_config .site .home.home2:after,
    #site_config .site .home.home3:after {
        right: 10px;
        width: 10px;
        background-size: 100%;
    }
    #site_config .site .home > span {
        padding: 0px 5px;
    }
}

/* subtabs */
#subtabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
#subtabs a {
    text-decoration: none;
    display: inline-block;
    border-radius: 100px;
    line-height: 1em;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.2);
    color: #939dac;
    font-weight: 500;
}
#subtabs a.act {
    background-color: #2254ae;
    color: #fff;
}
/* company1 */
#company1 .logoTxt {
    display: flex;
    align-items: center;
}
@media (max-width:768px) {
    #company1 .sec1 .fbox .lft {
        order: 2;
        width: 100%;
    }
    #company1 .sec1 .fbox .rt {
        order: 1;
        padding-bottom: 40px;
        width: 100%;
    }
    #company1 .logoTxt {
        display: block;
    }
    #company1 .logoTxt span {
        display: inline-block;
        vertical-align: middle;
        line-height: 1em;
        padding-top: 3px;
    }
    #company1 .logoTxt img {
        height: 20px;
        vertical-align: middle;
    }
}
/* circleBxWrp */
.circleBxWrp .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    max-width: 33vw;
    max-height: 33vw;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    text-align: center;
    position: relative;
}
@media (min-width:768px) {
    .circleBxWrp {
        padding-left: 114px;
    }
    .circleBxWrp .circle {
        margin: -15px 0;
    }
    .circleBxWrp .circle:after {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        width: 94px;
        height: 4px;
        background: url(../img/dots.png) center center no-repeat;
        transform: translate3d(-30px, -50%, 0);
    }
}
@media (max-width:768px) {
    .circleBxWrp {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .circleBxWrp .circle {
        margin: 0 -5px;
    }
}



/*visual*/
#comp .sq {
    display: inline-block;
    width: 130px;
    height: 130px;
    background-color: #000;
    border-radius: 20px;
    transform: rotate(0deg);

    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}
#comp .sq.aos-animate {
    transform: rotate(135deg);
}
#comp .sq.sq2 {
    background-color: #a0a0a0;
    transition-delay: 0.5s;
}
#comp .sq.sq3 {
    background-color: #ecd075;
    transition-delay: 1s;
}
@media (max-width:767px){
    #comp .sq {
        width: 70px;
        height: 70px;
        border-radius: 10px;
    }
}

/* lined */
.lined {
    width: 30px;
    height: 1px;
    background-color: #fff;
    margin: 40px 0;
}
.lined.lined_h {
    width: 1px;
    height: 30px;
}
.lined.h_ct {
    margin-left: auto;
    margin-right: auto;;
}
/* company2 */
#company2 .sec1 {
    position: relative;
}
#company2 .sec1 .tbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
#company2 .sec1 .tbox .con {
    width: 100%;
    max-width: 670px;
    padding-right: 50px;
}
#company2 .sec1 .tbox .con .c_logo {
    width: 405px;
    margin-top: 10px;
}
#company2 .sec1 .tbox .con h5 {
    text-align: justify;
}
@media (max-width:992px){
    #company2 .sec1 .tbox {
        position: relative;
        width: 100% !important;
    }
    #company2 .sec1 .tbox .con {
        max-width: 100%;
        padding:  0 15px 30px;
    }
}

/*visual*/
#comp_wrp {
    position: relative;
    max-width: 50%;
    margin-left: auto;
}
#comp,
#comp .bg {
    position: relative;
}
/* #comp .bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    mix-blend-mode: color-burn;
} */
#comp .bg {
    text-align: right;
}
#comp .bg img {
    transform: translateX(10%);
    opacity: 0;
    display: inline-block;
    transition: all 1s;
    -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
}
#comp .slick-current.bg img {
    opacity: 1;
    transform: translateX(0);
}
#comp .tcon {
    text-align: left;
    position: relative;
    z-index: 3;
}
#comp .tcon h1 {
    line-height: 1.2em;
}
#comp .tcon h1 strong {
    font-weight: 500;
}
@media (max-width:992px){
    #comp_wrp {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin: 0 auto;
    }
    #comp_wrp .slick-slide {
        padding-left: 12vw;
    }
    #comp .bg > .c_wrp {
        height: 50%;
    }
    #comp .bg > .c_wrp > div {
        vertical-align: bottom;
    }
    #comp .bg .tcon {
        margin: 0 auto;
        padding-left: 80px;
    }
}
@media (max-width:500px){
    #comp .tcon h1 {
        font-size: calc(100vw * (30 / 500));
    }
}
/* txt */
#comp .txt1,
#comp .txt2,
#comp .txt3,
#comp .txt4 {
    opacity: 0;
}
#comp .ply:not(.slickPause) .txt1 {
    -webkit-animation: fadeMove 4.5s linear infinite;
    -moz-animation: fadeMove 4.5s linear infinite;
    -ms-animation: fadeMove 4.5s linear infinite;
    -o-animation: fadeMove 4.5s linear infinite;
    animation: fadeMove 4.5s linear infinite;
}
#comp .slickPause .txt1 {
    -webkit-animation: fadeMove 4.5s linear;
    -moz-animation: fadeMove 4.5s linear;
    -ms-animation: fadeMove 4.5s linear;
    -o-animation: fadeMove 4.5s linear;
    animation: fadeMove 4.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode : forwards;
}
@keyframes fadeMove {
    10% {
        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
    20% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

#comp .ply:not(.slickPause) .txt2 {
    -webkit-animation: fadeMove2 4.5s linear infinite;
    -moz-animation: fadeMove2 4.5s linear infinite;
    -ms-animation: fadeMove2 4.5s linear infinite;
    -o-animation: fadeMove2 4.5s linear infinite;
    animation: fadeMove2 4.5s linear infinite;
}
#comp .slickPause .txt2 {
    -webkit-animation: fadeMove2 4.5s linear;
    -moz-animation: fadeMove2 4.5s linear;
    -ms-animation: fadeMove2 4.5s linear;
    -o-animation: fadeMove2 4.5s linear;
    animation: fadeMove2 4.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode : forwards;
}
@keyframes fadeMove2 {
    20% {
        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
    30% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

#comp .ply:not(.slickPause) .txt3 {
    -webkit-animation: fadeMove3 4.5s linear infinite;
    -moz-animation: fadeMove3 4.5s linear infinite;
    -ms-animation: fadeMove3 4.5s linear infinite;
    -o-animation: fadeMove3 4.5s linear infinite;
    animation: fadeMove3 4.5 linear infinite;
}
#comp .slickPause .txt3 {
    -webkit-animation: fadeMove3 4.5s linear;
    -moz-animation: fadeMove3 4.5s linear;
    -ms-animation: fadeMove3 4.5s linear;
    -o-animation: fadeMove3 4.5s linear;
    animation: fadeMove3 4.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode : forwards;
}
@keyframes fadeMove3 {
    30% {
        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
    40% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
#comp .ply:not(.slickPause) .txt4 {
    -webkit-animation: fadeMove4 4.5s linear infinite;
    -moz-animation: fadeMove4 4.5s linear infinite;
    -ms-animation: fadeMove4 4.5s linear infinite;
    -o-animation: fadeMove4 4.5s linear infinite;
    animation: fadeMove4 4.5s linear infinite;
}
#comp .slickPause .txt4 {
    -webkit-animation: fadeMove4 4.5s linear;
    -moz-animation: fadeMove4 4.5s linear;
    -ms-animation: fadeMove4 4.5s linear;
    -o-animation: fadeMove4 4.5s linear;
    animation: fadeMove4 4.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode : forwards;
}
@keyframes fadeMove4 {
    40% {
        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
    50% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
/*Slider - navigation*/
#nav_wrp {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;
}
#nav_wrp .controls > div {
    display: inline-block;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    font-weight: 300;
    margin-right: 10px;
    cursor: pointer;
    vertical-align: middle;
}
#nav_wrp .controls .consWrp .pauseBtn {
    display: inline-block;
}
#nav_wrp .controls .consWrp .playBtn {
    display: none;
}
#nav_wrp .controls .consWrp.act .pauseBtn {
    display: none;
}
#nav_wrp .controls .consWrp.act .playBtn {
    display: inline-block;
}
#nav_wrp .controls #numbering > span {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    vertical-align: middle;
    margin-bottom: 2px;
}
#nav_wrp .controls #numbering > .dvd {
    height: 10px;
    width: 1px;
    background-color: rgba(0,0,0,0.1);
    margin: 0 3px;
}
#nav_wrp .nav_con {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#nav_wrp .nav_con .controls .top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
#nav_wrp .arrBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid #ddd;
    border-radius: 50%;
    color: #c9c9c9;
    font-size: 24px;
}
#nav_wrp #barProgess {
    display: inline-block;
    width: 2px;
    height: 150px;
    border-radius: 0%;
    margin: 0;
    position: relative;
    background-color: rgba(255,255,255, 0.05);
}
#nav_wrp #barProgess span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background-color: #215fd1;
}
#nav_wrp #barProgess.act span::after {
    -webkit-animation: movBg 4.5s linear infinite;
    -moz-animation: movBg 4.5s linear infinite;
    -ms-animation: movBg 4.5s linear infinite;
    -o-animation: movBg 4.5s linear infinite;
    animation: movBg 4.5s linear infinite;
}
@keyframes movBg {
    0% {
        height: 0px;
    }
    25% {
        height: 0px;
    }
    100% {
        height: 100%;
    }  
}

@media (max-width:768px){
    #nav_wrp #barProgess {
        height: 70px;
    }
    #nav_wrp .arrBtn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* slider-comp-nav */
#comp .slider-comp-nav {
    position: absolute;
    left: 0%;
    bottom: 0;
    background-color: #0a111d;
    padding: 5px;
    z-index: 8;
}
#comp .slider-comp-nav .slick-track {
    width: auto !important;
    margin: 0 -3px;
    display: flex;
}
#comp .slider-comp-nav .slick-track .slick-slide {
    display: inline-block;
    width: auto !important;
    cursor: pointer;
    padding: 0 3px;
}
#comp .slider-comp-nav .slick-track .slick-slide span {
    display: block;
    width: 138px;
    height: 118px;
}
#comp .slider-comp-nav .slick-track .slick-slide {
    filter: grayscale(1);

    transition: all 0.2s;
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
}
#comp .slider-comp-nav .slick-track .slick-slide.is-active {
    filter: grayscale(0);
}
@media (max-width:992px){
    #comp .slider-comp-nav {
        transform: translate3d(0, 0, 0);
        max-width: calc(88vw - 30px);
        left: auto;
        right: 0;
    }
    #comp .slider-comp-nav .slick-track .slick-slide span {
        width: 60px;
        height: 51px;
    }
}


/* com_info */
.com_info .item {
    background-color: rgba(147, 157, 172, 0.1);
    padding: 50px 20px;
    border-radius: 30px;
}
@media (min-width:768px) {
    .com_info .item .txt {
        height: 140px;
    }
}
@media (max-width:768px) {
    .com_info .item {
        padding: 30px 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        margin: 4px 0;
    }
    .com_info .item .icon {
        width: 40px;
        order: 2;
    }
    .com_info .item .txt {
        width: calc(100% - 40px);
        padding-right: 20px;
        text-align: left;
        margin: 0;
        order: 1;
    }
}
/* dvdHr */
.dvdHr {
    width: 100%;
    height: 1px;
    background-color: rgba(150, 150, 150, 0.4);
    margin: 8rem 0;
}
@media (max-width:768px) {
    .dvdHr {
        margin: 4rem 0;
    }
}

/* ciInfo */
.slider-words {
    position: relative;
}
.slider-words .slick-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}
.slider-words .slick-slide .dft span {
    opacity: .2;
}
.slider-words .slick-slide.is-active .dft span {
    font-size: 1.4em;
    font-weight: 700;
    opacity: 1;
}
.slider-words .slick-slide .dft .op {
    color: rgba(255,255,255,0.5);
}
.slider-words .slick-slide .dft .txt_sm {
    font-size: .4em;
    display: inline-block;
}

@media (max-width:768px){
    .slider-words .slick-slide {
        height: 70px;
    }
    .slider-words .slick-slide {
        padding: 0 50px;
    }
}
@media (max-width:768px) {
    .slider-words .slick-slide {
        text-align: center;
        padding: 0px;
    }
    .slider-words .slick-slide .dft .txt_sm {
        display: block;

    }    
}
/* rotTxtBox */
.rotTxtBox {
    background-color: rgba(0,0,0,0.4);
    border-radius: 30px;
    padding: 0 50px;
    display: flex;
    align-items: center;
    min-height: 300px;
    transition: background-color 0.4s, transform 0.4s 0.2s;
    backdrop-filter: blur(3px);
}
.rotTxtBox .topTxt {
    opacity: .6;
}
@media (max-width:768px) {
    .rotTxtBox {
        border-radius: 5px;
        padding: 35px 20px;
        min-height: auto;
        margin: 15px 0;
    }
    .rotTxtBox br {
        display: none;
    }
}

/* bgChage */
#bgChange {
    background:url(../img/com3_bg1.jpg) center center no-repeat;
    background-size: cover !important;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
#bgChange.bgIndx2 {
    background:url(../img/com3_bg2.jpg) center center no-repeat;
}
#bgChange.bgIndx3 {
    background:url(../img/com3_bg3.jpg) center center no-repeat;
}
#bgChange.bgIndx4 {
    background:url(../img/com3_bg4.jpg) center center no-repeat;
}
#bgChange.bgIndx5 {
    background:url(../img/com3_bg5.jpg) center center no-repeat;
}
#bgChange.bgIndx6 {
    background:url(../img/com3_bg6.jpg) center center no-repeat;
}


/* slick-dots */
.slick-dots {
    width: 100%;
    text-align: center;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.slick-dots li {
    display: inline-block;
    text-align: center;
}
.slick-dots li button {
    display: inline-block;
    color: transparent;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
}
.slick-dots li.slick-active button {
    background-color: rgba(255, 255, 255, 0.9);
}


.his { position: relative; }
.his::after { content: ""; position: absolute; left: 400px; top: 0px; height: 100%; width: 1px; background-color: rgb(165, 179, 187); z-index: 1; }
.his > li { padding-left: 400px; padding-top: 60px; margin-top: 40px; position: relative; z-index: 3; }
.his > li .imgBox img { border-radius: 10px;}
.his > li h1 { position: absolute; left: 0px; top: 0px; width: 400px; text-align: right; padding-right: 20px; z-index: 3; letter-spacing: -0.03em !important;}
.his > li h1::after { content: ""; position: absolute; right: -9px; top: calc(50% - 9px); background-color: #215fd1; width: 17px; height: 17px; z-index: 3; border-radius: 50%; }
.his > li .hisYbox > li { margin-top: 40px; position: relative; display: flex; align-items: flex-start;}
.his > li .hisItem { width: 75%; }
.his > li .imgBox { width: 25%; text-align: right; padding-top: 10px; }
.his > li .hisItem { position: relative; }
.his > li .hisItem h2, .his > li .hisItem h5 { position: relative; padding-left: 60px; }
.his > li .hisItem h2::after { content: ""; position: absolute; left: -6px; top: calc(50% - 3px); background-color: rgb(222, 234, 241); border: 3px solid rgb(51, 51, 51); width: 11px; height: 11px; z-index: 3; border-radius: 50%; }
@media (max-width: 992px) {
  .his::after { left: 200px; }
  .his > li { padding-left: 200px; padding-top: 30px; }
  .his > li h1 { width: 200px; }
  .his > li .hisYbox > li { margin-top: 30px; }
  .his > li .hisItem h2, .his > li .hisItem h5 { position: relative; padding-left: 20px; }
}
@media (max-width: 992px) {
  .his::after { left: 0px; }
  .his > li { padding-left: 0px; padding-top: 30px; }
  .his > li h1 { text-align: left; position: relative; padding-left: 20px; padding-right: 0px; }
  .his > li h1::after { left: -5px; width: 11px; height: 11px; top: calc(50% - 6px); }
  .his > li .hisYbox > li { margin-top: 30px; }
  .his > li .hisItem h2, .his > li .hisItem h5 { position: relative; padding-left: 20px; }
  .his > li .imgBox { padding-left: 20px; }
}
@media (max-width: 600px) {
  .his > li { display: block; }
  .his > li .hisYbox > li { display: block; }
  .his > li .hisItem { width: 100%; }
  .his > li .imgBox { width: 100%; text-align: left; padding: 10px; margin-top: 20px; }
  .his > li .imgBox img { max-width: 70%;}
}

/* hisTop */
.hisTop {
    position: relative;
}
.hisTop .hisTopTxt {
    position: absolute;
    bottom: -5%;
    left: 5%;
    background-color: #215fd1;
    padding: 60px 50px;
    max-width: 500px;
    width: 100%;
}
.hisTop .hisTopTxt .forNav a {
    text-decoration: none;
    display: inline-block;
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.hisTop .hisTopTxt .forNav a:hover {
    color: #fff;
}
@media (max-width:768px) {
    .hisTop .hisTopTxt {
        position: relative;
        left: auto;
        bottom: auto;
        padding: 30px 20px;
        max-width: 90%;
        margin-bottom: -5%;
    }
}

/* ogWrp */
.ogWrp .top {
    padding-bottom: 50px;
}
.ogWrp .ceo {
    width: 250px;
    height: 250px;
    max-width: 40vw;
    max-height: 40vw;
    border-radius: 50%;
    background-color: #215fd1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 15px;
    margin: 0 auto;
    position: relative;
}
.ogWrp .ceo img {
    max-width: 80%;
}
.ogWrp .ceo:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    width: 1px;
    height: 50px;
}
.ogWrp .bt ul {
    padding-top: 50px;
    text-align: center;
    position: relative;
}
.ogWrp .bt .branchs > div ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    background-color: rgba(255, 255, 255, 0.4);
    width: calc(100% + 30px);
    height: 1px;
}
.ogWrp .bt .branchs > div:first-of-type ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    width: calc(50% + 15px);
    height: 1px;
}
.ogWrp .bt .branchs > div:last-of-type ul::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    width: calc(50% + 15px);
    height: 1px;
}
.ogWrp .bt ul:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    width: 1px;
    height: 50px;
}
.ogWrp .bt ul li {
    padding: 22px 8px;
    border: 1px solid #fff;
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.ogWrp .bt ul li:not(:first-child) {
    margin-top: 15px;
    border: 1px solid #aaa;
}
.ogWrp .bt ul .tt {
    background-color: rgba(21, 105, 214, 0.5);
    border: 0;
    border-radius: 4px;
}
.ogWrp .bt ul .tt h6 {
    line-height: 1.1em;
}
.ogWrp .bt ul .tt h5 {
    color: #fff;
    line-height: 1.1em;
}
.ogWrp .bt ul .gr {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: #fff;
    padding: 7px;
    margin-bottom: 8px;
    line-height: 1.2em;
}
.ogWrp .bt ul .gr .sm {
    font-size: .75em;
    font-weight: 500;
}
.ogWrp .bt ul li:not(:first-child):after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    width: 1px;
    height: 15px;
}
@media (max-width:768px) {
    .ogWrp .bt ul li {
        padding: 18px 4px;
    }
    .ogWrp .bt .branchs > div ul::before {
        left: -5px;
        width: calc(100% + 10px);
    }
    .ogWrp .bt .branchs > div:first-of-type ul::before {
        width: calc(50% + 5px);
    }
    .ogWrp .bt .branchs > div:last-of-type ul::before {
        width: calc(50% + 5px);
    }
}

/* meritInfo */
.meritInfo .item {
    text-align: center;
}
.meritInfo .item .icon img {
    background-color: rgba(34, 83, 174, 0.2);
    border-radius: 50%;
}
.meritInfo .item .txt {
    margin-top: 30px;
}
.meritInfo .item .txt .tTit {
    background-color: #2254ae;
    padding: 15px;
    border-radius: 100px;
    color: #fff;
    font-weight: 700;
    line-height: 1em;
}
.meritInfo .item .txt ul p {
    border: 1px dashed rgba(255, 255, 255, 0.4);
    line-height: 1em;
    padding: 15px;
    margin-top: 15px;
    border-radius: 100px;
    position: relative;
}
.meritInfo .item .txt ul p::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    width: 1px;
    height: 15px;
}


/* btSlick */
#company6 .sec2 {
    position: relative;
}
#company6 .sec2 .btSlick {
    position: relative;
}
#company6 .sec2 .inner {
    position: relative;
    display: flex;
}
#company6 .sec2 .inner:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #215fd1;
}
#company6 .sec2 .inner > div {
    position: relative;
    z-index: 3;
}
#company6 .sec2 .txtCon {
    width: calc(50% - 180px);
}
#company6 .sec2 .btSlickWrp {
    width: calc(50% + 180px);
}
#company6 .sec2 .txtCon .mtit {
    width: 480px;
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 30px 0;
    margin-left: auto;
}
#company6 .sec2 .txtCon .mtit .rt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
#company6 .sec2 .txtCon .mtit .rt .buttonWrp {
    gap: 5px;
}
#company6 .sec2 .txtCon .mtit .rt .swiper-arr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    position: relative;
    left: auto;
    right: auto;
    font-size: 18px;
    color: #999;
    top: 0;
    margin: 0;
}
#company6 .sec2 .txtCon .mtit .rt .swiper-button-next:after, 
#company6 .sec2 .txtCon .mtit .rt .swiper-button-prev:after {
    display: none;
}
@media (max-width:768px){
    #company6 .sec2 {
        padding: 0;
    }
    #company6 .sec2 .inner:after {
        left: 0;
        height: 50%;
        width: 100%;
        top: auto;
        bottom: 0;
    }
    #company6 .sec2 .inner {
        flex-wrap: wrap;
    }
    #company6 .sec2 .txtCon {
        width: 100%;
    }
    #company6 .sec2 .btSlickWrp {
        width: 100%;
    }
    #company6 .sec2 .txtCon .mtit {
        width: 100%;
        padding-right: 0;
        padding: 0 15px;
        padding-bottom: 30px;
    }
    #company6 .sec2 .txtCon .mtit > div {
        width: 100%;
        text-align: center;
    }
    #company6 .sec2 .txtCon .mtit .rt {
        margin-top: 20px;
        justify-content: center;
    }
}

/* storySwiper */
.storySwiper {
    width: 100%;
}
.storySwiper .swiper-slide {
    background-color: transparent;
}
.storySwiper a {
    text-decoration: none;
    display: block;
    width: 100%;
}
.storySwiper a .tt {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
}
@media (min-width:1024px){
    .storySwiper .swiper-slide {
        width: 300px;
    }
}
@media (max-width:992px){
    .storySwiper {
        padding: 0 15px;
    }
}

/* progressbar */
.swiper-horizontal>.swiper-pagination-progressbar, 
.swiper-pagination-progressbar.swiper-pagination-horizontal, 
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    position: relative;
    margin-top: 50px;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #fff;
}
.bg-dark .swiper-horizontal>.swiper-pagination-progressbar, 
.bg-dark .swiper-pagination-progressbar.swiper-pagination-horizontal, 
.bg-dark .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
.bg-dark .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    background-color: rgba(255, 255, 255, 0.2);
}
.bg-dark .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #38b9ae;
}
@media (max-width:768px){
    .swiper-horizontal>.swiper-pagination-progressbar, 
    .swiper-pagination-progressbar.swiper-pagination-horizontal, 
    .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
    .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        margin-top: 25px;
    }
}

/* productsBans */
.productsBans {
    display: flex;
    padding: 0 15px;
}
.productsBans .pb_item,
.productsBans .pb_item .img img,
.productsBans .pb_item .img .scroll_ani,
.productsBans .pb_item .logo_item img,
.productsBans .pb_item .img,
.productsBans .pb_item .img img {
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.productsBans .pb_item {
    display: flex;
    align-items: center;
    padding: 0 15px;
    width: 25%;
    position: relative;
    text-decoration: none;
}
.productsBans .pb_item .logo_item {
    margin-bottom: 40px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.productsBans .pb_item .logo_item h3 {
    line-height: 1.2em;
    white-space: nowrap;
}
.productsBans .pb_item .logo_item .back {
    display: block;
}
.productsBans .pb_item .logo_item .front {
    display: none;
}
.productsBans .pb_item:hover .logo_item .back {
    display: none;
}
.productsBans .pb_item:hover .logo_item .front {
    display: block;
}
.productsBans .pb_item .img {
    position: relative;
    overflow: hidden;
}
.productsBans .pb_item .img .scroll_ani {
    opacity: 0;
}
@media (min-width:992px) {
    .productsBans .pb_item {
        height: 600px;
    }
    .productsBans .pb_item .logo_item img {
        height: 30px;
    }
}
@media (max-width:1700px) {
    .productsBans .pb_item .logo_item {
        flex-wrap: wrap;
        height: 100px;
    }
    .productsBans .pb_item .logo_item > h3 {
        width: 100%;
    }
}
@media (max-width:992px) {
    .productsBans {
        flex-wrap: wrap;
    }
    .productsBans .pb_item {
        width: 50%;
        margin: 30px 0;
    }
    .productsBans .pb_item .logo_item {
        margin-bottom: 20px;
        height: 100px;
    }
    .productsBans .pb_item .logo_item > img {
        max-height: 60px;
    }
}
@media (max-width:768px) {
    .productsBans .pb_item .logo_item {
        height: 100px;
    }
}
@media (max-width:500px) {
    .productsBans .pb_item .logo_item {
        height: 50px;
    }
    .productsBans .pb_item .logo_item img {
        height: 15px;
    }
}

/* pb_item */
@media (min-width:992px) {
    .productsBans .pb_item:hover {
        width: 40%;
    }
    .productsBans .pb_item:hover .img .scroll_ani {
        opacity: 1;
    }
    .productsBans .pb_item:hover .logo_item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .productsBans .pb_item:hover .logo_item img {
        height: 50px;
    }
    .productsBans .pb_item:hover .img img {
        filter:  grayscale(1) blur(10px) ;
    }
}
/* scroll_ani */
.scroll_ani {
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    color: #fff; 
    z-index: 13; 
    height: 150px;
}
.scroll_ani > span {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    position: relative;
}
.scroll_ani > span:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    animation-name: zoominout;
    animation-iteration-count: infinite;
    animation-duration:2s;
    animation-timing-function:ease-in-out;
}
@keyframes zoominout { 
    0% {
        width: 5px;
        height: 5px;
        opacity: 1;
    } 
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    } 
}
.scroll_ani > .back {
    position: relative; 
    height:100%; 
    width:1px; 
    margin: 30px auto 0; 
    background: rgba(255,255,255,0.2);
}
.scroll_ani > .back .animation {
    width: 100%; 
    background: rgba(255,255,255,1); 
    animation-name: updown;
    animation-iteration-count: infinite;
    animation-duration:2s;
    animation-timing-function:ease-in-out;
}
@keyframes updown { 
    0% {height:0%} 
    100% {height:100%} 
}
/* proTopSec */
.proTopSec {
    position: relative;
    background: url(../img/proTopSec.jpg) right top no-repeat;
    background-size: cover;
}
.proTopSec:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.2);
}
.proTopSec .mtit .logoImg {
    height: 80px;
}
@media (max-width:768px) {
    .proTopSec .mtit .logoImg {
        height: auto;
        max-width: 80vw;
    }
}
/* background */
.bg-w {
    background-color: #fff;
}
.bg-blgray {
    background-color: #edf0f4;
}
.bg-gray {
    background-color: #f7f7f7;
}

/* hsList */
.hsList .item {
    position: relative;
    overflow: hidden;
}
.hsList .item.item1 {
    border-radius: 0 0 70px 0;
}
.hsList .item.item2 {
    border-radius: 0 70px 0 0;
}
.hsList .item .txt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 50px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
@media (max-width:768px) {
    .hsList .item.item1 {
        border-radius: 30px 0 0 0;
    }
    .hsList .item.item2 {
        border-radius: 0 0 30px 0;
    }
    .hsList .item .txt {
        padding: 30px;
    }
}

/* hs_sol */
.hs_sol li:nth-child(even){
    padding-top: 60px;
}
.hs_sol .item {
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}
.hs_sol .item .txt {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    padding: 0 30px 55px;
}
.hs_sol .item .txt .icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    margin-bottom: 10px;
}
@media (max-width:768px) {
    .hs_sol li:nth-child(even){
        padding-top: 30px;
    }
    .hs_sol .item {
        border-radius: 10px;
    }
    .hs_sol .item .txt {
        padding: 0 20px 35px;
    }
    .hs_sol .item .txt .icon i {
        width: 35px;
        height: 35px;
        border-radius: 4px;
    }
}

/* rockwellInfo */
.rockwellInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 650px;
    text-align: center;
    border-radius: 30px;
    background: url(../img/rockwellInfo.jpg) center center no-repeat;
    background-size: cover;
    position: relative;
}
.rockwellInfo .rock_deco {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate3d(20%, -50%, 0);
    max-width: 15vw;
}
.rockwellInfo > div {
    width: 90%;
}
.rockwellInfo .fbox > div {
    width: 33.3333%;
}
.rockwellInfo .fbox  img {
    width: 300px;
}
.rockwellInfo .fbox > div:last-of-type  img {
    width: 250px;
}
@media (max-width:768px) {
    .rockwellInfo {
        height: 450px;
        border-radius: 10px;
    }
}


/* banTit */
.banTit {
    position: relative;
    padding-left: 30px;
}
.banTit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5%;
    width: 1px;
    height: 90%;
    background-color: #ddd;
}
.banTit .top {
    position: relative;
}
.banTit .top::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 5%;
    width: 2px;
    height: 95%;
    background-color: #2254ae;
}
.banTit .top .txt_sm {
    font-size: .6em;
    color: #666;
    font-weight: 400;
    letter-spacing: -0.02em !important;
}

/* rockProducts */
.rockProducts .item {
    display: block;
    text-decoration: none;
}
.rockProducts .item .img {
    border-radius: 30px;
    text-align: center;
    border: 1px solid #fff;
    overflow: hidden;
    position: relative;
    background-color: #fff;

    transition: all 0.2s;
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
}
.rockProducts a.item:hover .img {
    border-color: #215fd1;
}
.rockProducts .item .img .more {
    position: absolute;
    right: 15px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    width: 55px;
    background-color: #215fd1;
    box-shadow: 7px 7px 24px rgba(33, 95, 209, 0.25);
    border-radius: 50%;
    color: #fff;
    transform: translate3d(200%, 0, 0);

    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.rockProducts .item:hover .img .more {
    transform: translate3d(0%, 0, 0);
}
@media (max-width:768px) {
    .rockProducts .item .img {
        border-radius: 10px;
    }
}


/* slick-member */
.slick-member-wrp {
    position: relative;
}
.slick-member .slick-track {
    padding: 8% 0;
}
.slick-member li {
    position: relative; 
    transition: all 0.5s ease; 
    z-index: 1; 
    overflow: hidden;
    filter: blur(10px);
}
.slick-member li.slick-center {
    filter: blur(0px);
}
.slick-member li::after {
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 60; 
    opacity: 1; 
    visibility: visible; 
    transition: all 0.3s ease;
}
.slick-member li img {
    opacity: 0.35; 
    filter:  grayscale(100%);
}
.slick-member li.slick-center {
    z-index: 10; 
    transition: all 0.5s ease;
}
.slick-member li.slick-center::after {
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease;
}
.slick-member li.slick-center img {
    opacity: 1; 
    filter:  grayscale(0); 
}
.slick-member li .memImg {
    width: 100%; 
    text-decoration: none;
    display: block; 
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: #f4f4f4;
    border-radius: 30px;
    transition: all 0.3s ease;
}
.memImg img {
    width:  100%;  
    display:  block; 
    width:  100%; 
    object-fit:  cover;
}
.memImg .txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 50px 30px;
    z-index: 3;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
}
.memImg.memImg3 .txt {
    background: linear-gradient(to top, #000, transparent);
}
.memImg .txt .tit {
    line-height: 1em;
}
.memImg .txt .tit2 {
    line-height: 1.25em;
}
.memImg .txt .dft .txtSm {
    font-size: .85em;
    line-height: 1em;
}
@media (min-width:768px){
    .slick-member li {
        transform: scale(0.956); 
    }
    .slick-member li.slick-center {
        transform: scale(1.434); 
    }
}
@media (max-width:768px){
    .slick-member li {
        transform: scale(0.85); 
    }
    .slick-member li.slick-center {
        transform: scale(1); 
    }
}
@media (max-width:500px){
    .memImg .txt {
        padding: 30px 20px;
    }
}
/* mem-arr-wrp */
.mem-arr-wrp .mem_arr {
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
}
.mem-arr-wrp #mem_next {
    left: auto;
    right: 15%;
}

@media (max-width:768px){
    .mem-arr-wrp {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 15px;
    }
    .mem-arr-wrp .mem_arr {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 30px;
        height: 30px;
    }
}

/* hList */
.hList .dft {
    position: relative;
    padding-left: 15px;
    text-align: left;
}
.hList .dft:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    background-color: #e6331b;
    transform: translateY(-50%);
}
/* roboInfo */
.roboInfo .img {
    text-align: center;
}
.roboInfo .wBox {
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.6);
}
.roboInfo .robo_rb_lcs {
    mix-blend-mode: darken;
}
@media (max-width:768px) {
    .roboInfo > .txt,
    .roboInfo > .img {
        width: 100%;
        text-align: center;
    }
    .roboInfo > .img {
        padding-top: 30px;
    }
    .roboInfo .wBox {
        padding: 30px 20px;
    }
}

/* pList */
.pList .dft {
    position: relative;
    padding-left: 13px;
}
.pList .dft:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    background-color: #fff;
    transform: translateY(-50%);
}
/* rbnBox */
.rbnBox {
    background-color: #145795;
    border-radius: 30px;
    padding: 60px;
}

/* rainProducts */
.rainProducts .img {
    padding: 50px 15px;
    border-radius: 30px;
    background-color: #f7f7f7;
}
@media (max-width:768px) {
    .rainProducts .img {
        padding: 30px 15px;
        border-radius: 10px;
    }
}

/* rbnBox */
.rbnBox .top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rbnBox .top .icon {
    background-color: #034079;
    border-radius: 5px;
}
.rbnBox .row + .row {
    margin-top: 50px;
}

/* product3 */
#product3 .fbox1 {
    gap: 10px;
}

/* relItems */
.relItems .item {
    background-color: #F2F2F2;
    cursor: pointer;
}
.relItems .item .txt {
    min-height: 220px;
    padding: 40px 30px 20px;
}
/* relItems2 */
.relItems2 .item {
    background-color: #f7f7f7;
    text-align: center;
    padding: 40px 20px;
}
.relItems2 .item img {
    mix-blend-mode: darken;
}

/* pfProfs modal */
.card_select.pfProfs .modal-header .cls_btn2 {
    position: absolute;
    right: 15px;
    top: 15px;
    height: 30px;
    width: 30px;
    cursor: pointer;
    border: 0px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #333;
    border: 0px;
    font-size: 25px;
}
.privacy.pfProfs .modal-dialog > div .modal-content {
    border-radius: 0px;
}
.privacy.pfProfs .modal-body {
    padding: 15px;
}
.privacy.pfProfs .modal-body .btList > li,
.privacy.pfProfs .modal-body .impList > li {
    margin: 4px 0;
}
.privacy.pfProfs .modal-body .btList > li p,
.privacy.pfProfs .modal-body .impList > li p {
    position: relative;
    padding-left: 10px;
    font-weight: 400;
}
.privacy.pfProfs .modal-body .btList > li p {
    color: #666;
    font-weight: 300;
}
.privacy.pfProfs .modal-body .btList > li p:after,
.privacy.pfProfs .modal-body .impList > li p:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background-color: #ccc;
}
.privacy.pfProfs .modal-body .fbox .img {
    background-color: #ddd;
}
.privacy.pfProfs .modal-body .fbox .txt {
    padding: 30px;
}
.privacy.pfProfs .modal-body .fbox .txt .sm {
    font-size: .8em;
}
@media (min-width:768px) {
    .privacy.pfProfs .modal-body {
        position: relative;
    }
    .privacy.pfProfs .modal-body .fbox {
        position: relative;
        z-index: 4;
    }
}
@media (max-width:768px) {
    .privacy.pfProfs .modal-body .fbox > div {
        width: 100%;
    }
    .privacy.pfProfs .modal-body .fbox .img img {
        max-width: 50vw;
    }
    .privacy.pfProfs .modal-body .fbox .txt {
        padding: 30px 20px;
    }
}

/*card_select*/
.card_select .modal-content {
    border-radius: 10px;
    border: 0px;
}
.card_select .modal-header {
    border: 0px;
    background-color: #fff;
    padding: 0;
    position: relative;
    border-radius: 20px 20px 0 0;
}
.card_select .modal-header .cls_btn {
    position: absolute;
    right: -20px;
    top: -20px;
    height: 60px;
    background: url(../img/cls_btn.png) center center no-repeat;
    width: 60px;
    cursor: pointer;
    border: 0px;
    z-index: 5;
}
.card_select .modal-header h4 {
    font-weight: 700;  
    line-height: 1.2em; 
}
.card_select .modal-header p {
    color: #999;
    font-weight: 700;
    line-height: 1.2em;
    margin-top: 10px;
}
.card_select .modal-body {
    padding: 30px 20px;
}
.card_select .modal-body > p {
    font-weight: 600;
    margin-bottom: 15px;
}
.card_select .modal-body > .bt_cmt {
    color: #999;
    font-weight: 400;
    margin-top: 10px;
    font-size: 14px;
}
.card_select .modal-body .row {
    margin: 0 -5px;
}
.card_select .modal-body .row > li {
    padding: 0 5px;
    margin: 5px 0;
}
.card_select .modal-body ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    border: 2px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    font-size: 17px;
    color: #333;
    word-break: keep-all;
}
.card_select .modal-body ul li a h6 {
    color: #666;
    margin-top: 5px;
}
@media (max-width:768px){
    .card_select .modal-body {
        padding: 20px 10px 40px;
    }
    .card_select .modal-body > p {
        margin-bottom: 5px;
    }
    .card_select .modal-body ul li a h6 {
        font-size: 13px;
    }
    .card_select .modal-body > .bt_cmt {
        font-size: 12px;
    }
    .card_select .modal-header .cls_btn {
        right: -5px;
        top: -5px;
        height: 40px;
        width: 40px;
        background-size: 40px !important;
    }
}
/*gift_confirm*/
.gift_confirm .bt_ {
    margin-top: 10px;
}
.gift_confirm .bt_ a {
    display: inline-block;
    color: #37018d;
    font-weight: 600;
}
.gift_confirm .infobox {
    margin: 20px 0;
    padding: 20px 15px;
    background-color: #f7f7f7;
    border-radius: 10px;
}
.gift_confirm .infobox ul li {
    color: #333;
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.2em;
}
.gift_confirm .infobox ul li span {
    position: absolute;
    left: 0;
}
.gift_confirm .wanningbox {
    margin: 20px 0;
    padding: 20px 15px;
    background-color: #ffe5e5;
    border-radius: 10px;
}
.gift_confirm .wanningbox p {
    color: #156ad6;
}
@media (max-width: 768px) {
    .gift_confirm .wanningbox,
    .gift_confirm .infobox {
        margin: 15px 0;
    }
    .gift_confirm .infobox ul li,
    .gift_confirm .wanningbox p {
        font-size: 13px;
    }
}


/*table_basic*/
.table.table_basic {
    border-top: 1px solid #454f5d;
}
.table.table_basic.table_fx {
    table-layout: fixed;
}
.table.table_basic thead tr th,
.table.table_basic thead tr td,
.table.table_basic tbody tr th,
.table.table_basic tbody tr td {
    font-size: 18px;
    color: #221814;
    line-height: 1.3em;
    text-transform: none;
    border: 1px solid #ddd;
    padding: 18px 15px;
}
/* .table.table_basic thead tr th:first-child,
.table.table_basic thead tr td:first-child,
.table.table_basic tbody tr th:first-child,
.table.table_basic tbody tr td:first-child {
    border-left: 0px;
}
.table.table_basic thead tr th:last-child,
.table.table_basic thead tr td:last-child,
.table.table_basic tbody tr th:last-child,
.table.table_basic tbody tr td:last-child {
    border-right: 0px;
} */
.table.table_basic thead tr th {
    font-weight: 600;
}
.table.table_basic tbody tr th {
    font-weight: 500;
}
.table.table_basic tbody tr td {
    font-weight: 400;
}
.table.table_basic.table_center thead tr th,
.table.table_basic.table_center thead tr td,
.table.table_basic.table_center tbody tr th,
.table.table_basic.table_center tbody tr td {
    text-align: center;
}
.table.table_basic.th_center thead tr th,
.table.table_basic.th_center tbody tr th {
    text-align: center;
    word-break: keep-all;
}
.table.table_basic.table_vh thead tr th,
.table.table_basic.table_vh thead tr td,
.table.table_basic.table_vh tbody tr th,
.table.table_basic.table_vh tbody tr td {
    vertical-align: middle;
}
.table.table_basic.th_vh thead tr th,
.table.table_basic.th_vh tbody tr th {
    vertical-align: middle;
}
.table.table_basic.table_wb thead tr th,
.table.table_basic.table_wb tbody tr td,
.table.table_basic.table_wb tbody tr th {
    word-break: keep-all;
}
.table.table_basic tbody tr th {
    /* background-color: #fcfcfc; */
}
.table.table_basic thead tr th {
    background-color: #000;
    border-top: 1px solid #454f5d;
    color: #fff;
}
.table.table_basic2 tbody tr th {
    background-color: #f7f7f7;
    color: #111;
    font-weight: 600;
}
.table.table_basic tbody tr.imp th,
.table.table_basic tbody tr.imp td {
    background-color: #fdfffb;
}
.table.table_basic tbody tr.imp td {
    color: #082c44;
    font-weight: 600;
}
.table.table_basic tbody tr td.text-left {
    text-align: left;
}
.table.table_basic tbody tr td.text-right {
    text-align: right;
}
.table.table_basic tbody tr td.imp {
    background-color: #fffef4;
}
@media (max-width:992px){
    .table_wrp {
        width: 100%;
        overflow-x: scroll;
    }
    .table_wrp .table.table_basic {
        width: 700px;
    }
    .table.table_basic thead tr th,
    .table.table_basic thead tr td,
    .table.table_basic tbody tr th,
    .table.table_basic tbody tr td {
        font-size: calc(100vw * (18 / 992));
        padding: calc(100vw * (14 / 992));
    }
}
@media (max-width:768px){
    .table.table_basic thead tr th,
    .table.table_basic thead tr td,
    .table.table_basic tbody tr th,
    .table.table_basic tbody tr td {
        font-size: calc(100vw * (18 / 768));
        padding: calc(100vw * (14 / 768));
		word-break: break-all !important;
    }
}
@media (max-width:500px){
    .table.table_basic thead tr th,
    .table.table_basic thead tr td,
    .table.table_basic tbody tr th,
    .table.table_basic tbody tr td {
        font-size: calc(100vw * (18 / 500));
        padding: calc(100vw * (10 / 500));
    }
}


/* mapBox */
.mapBox .root_daum_roughmap {
	border: 0px !important;
	padding: 0px !important;
}
.mapBox .root_daum_roughmap .map_border {
    opacity: 0;
}
.mapBox .root_daum_roughmap .wrap_map,
.mapBox iframe {
    height: 550px !important;
}
@media (max-width:768px) {
	.mapBox .root_daum_roughmap .wrap_map,
	.mapBox iframe {
		height: 250px !important;
	}
}

/* hValues */
.hValues {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hValues .item {
    display: inline-block;
    background-color: rgba(33, 95, 209, 0.2);
    padding: 15px;
    border-radius: 50%;
    margin: -5px;
    border: 1px dashed rgba(33, 95, 209, 0.8);
}
.hValues .hvalue {
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    background-color: #fff;
}
.hValues .con {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 180px;
    height: 180px;
    max-width: 25vw;
    max-height: 25vw;
        
    border: 4px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#fff, #fff),
        linear-gradient(
        45deg,
        #215fd1  0%,
        #0c3c96 100%
        );
    background-origin: border-box;
    background-clip: content-box, border-box;
}
@media (max-width:1200px) {
    .hValues {
        flex-wrap: wrap;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width:768px) {
    .hValues {
        flex-wrap: wrap;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* orList */
.orList .item {
    border-top: 3px solid;
    border-image: linear-gradient(to right, #215fd1 0%, #0c3c96 100%);
    border-image-slice: 1;
    padding: 30px 20px;
    background-color: #f7f7f7;
}
.orList .item .txt {
    margin-top: 15px;
}
.orList .item .tgs span {
    display: inline-block;
    margin: 0 2px;
}
@media (max-width:768px) {
    .orList .item {
        padding: 20px 30px;
        display: flex;
        align-items: center;
        border-width: 1.5px;
    }
    .orList .item .icon {
        width: 50px;
    }
    .orList .item .txt {
        margin-top: 0;
        width: calc(100% - 50px);
        padding-left: 35px;
        text-align: left;
    }
}

/* estimate */
.estimate {
    display: flex;
    text-align: center;
    align-items: center;
    padding: 20px;
    border: 1px solid #ddd;
}
.estimate .lft {
    width: calc(70% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}
.estimate .lft .item {
    padding: 15px;
    border: 1px dashed #939dac;
    border-radius: 10px;
}
.estimate .rt {
    width: calc(30% - 40px);
}
.estimate .rt .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    max-width: 25vw;
    max-height: 25vw;
    background-color: #215fd1;
    border-radius: 50%;
}
.estimate .arr {
    width: 80px;
}
@media (max-width:768px) {
    .estimate .lft {
        width: calc(70% - 5vw);
    }
    .estimate .rt {
        width: calc(30% - 5vw);
    }
    .estimate .arr {
        width: 10vw;
    }
}
@media (max-width:500px) {
    .estimate {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .estimate .lft {
        width: 100%;
    }
    .estimate .rt {
        width: 100%;
    }
    .estimate .arr {
        width: 100%;
    }
    .estimate .arr img {
        transform: rotate(90deg);
        max-width: 5vw;
    }
    .estimate .rt .item {
        margin: 0 auto;
    }
}

/* radio-custom */
#online_write .radio-custom {
    margin: 0px;
    padding-top: 8px;
    padding-bottom: 8px;;
}

/* stepList */
.stepList .circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    background-color: #b8deff;
}
.stepList .circle .ccInner {
    height: 80%;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 10%;
    border-radius: 50%;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background-color: #fff;
}
.stepList .circle .ccInner h5 {
    color: #999;
    display: none;
}
@media (min-width:767px){
    .stepList li:not(:last-child) .circle:after {
        content: "";
        position: absolute;
        right: -35px;
        top: 50%;
        width: 75px;
        height: 54px;
        transform: translate3d(0, -50%, 0);
        background: url(../img/arr.png) right center no-repeat;
        z-index: 1;
    }
    .stepList .txt .lined {
        display: block;
        height: 20px;
        width: 1px;
        background-color: #ddd;
        margin: 20px auto;
    }
}
@media (max-width:768px){
    .stepList .item {
        display: flex;
        align-items: center;
        padding: 20px 0;
    }
    .stepList .item .icon {
        width: 130px;
    }
    .stepList .item .txt {
        width: calc(100% - 130px);
        padding-left: 15px;
        text-align: left;
    }
    .stepList .circle {
        width: 130px;
        height: 130px;
    }
    .stepList .circle img {
        width: 40px;
    }
    .stepList li:not(:last-child) .circle:after {
        content: "";
        position: absolute;
        bottom: -35px;
        left: 50%;
        width: 54px;
        height: 75px;
        transform: translate3d(-50%, 0, 0);
        background: url(../img/arrBt2.png) right center no-repeat;
        z-index: 1;
    }
}

/* turcklInfo */
.turcklInfo .myVideo video {
    height: 600px;
    width: 100%;
}
@media (max-width:768px) {
    .turcklInfo .myVideo video {
        height: 300px;
    }
}
/* meanList */
.meanList {
    margin: 15px 0;
    text-align: left;
}
.meanList li {
    height: 80px;
}