@import url(common.css);

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
}

@font-face {
    font-family: 'LeferiPoint-BlackA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff') format('woff');
}
@font-face {
    font-family: 'LeferiBaseType-BoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiBaseType-BoldA.woff') format('woff');
}
@font-face {
    font-family: 'LeferiBaseType-RegularA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiBaseType-RegularA.woff') format('woff');
}
@font-face {
    font-family: 'LeferiPoint-WhiteA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteA.woff') format('woff');
}


body{
    font-family: 'LeferiBaseType-RegularA';
}

/* ========================================common/header.html(홈페이지 전체 공통 메뉴바) */
/* ==========================헤더-메뉴바 */
header{
    position: relative;
    width: 100%;
    height: 70px;
    /* background: #eee; */
}
header a{
    display: block;
}
header h1{
    position: absolute;
    top: 3px;
    left: 15px;
    width: 120px;
    height: 70px;
}
header h1 a img{
    width: 75px;
}

/* main basic menu */
header .basic_m{
    position: relative;
    width: 1300px;
    height: 70px;
    margin: 0 auto;
    text-align: center;
}

/* 1depth */
header .basic_m>ul{
    width: 750px;
    height: 70px;
    margin: 0 auto;
    /* background: brown; */
}
header .basic_m>ul>.dep1{
    float: left;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 20px;
    line-height: 75px;
    box-sizing: border-box;
    /* background: burlywood; */
}
header .basic_m>ul .dep1>a{
    width: 150px;
    height: 70px;
    box-sizing: border-box;
    /* background: #ccc; */
}
/* 1depth-hover */
header .basic_m>ul .dep1:hover>a{
    border-top: 10px solid #074a96;
    border-bottom: 10px solid #235da0;
    line-height: 55px;
}

/* 2depth */
header .basic_m>ul .dep1>ul{
    position: absolute;
    display: none;
    background: #fff;
    box-shadow: 0px 1px 5px #555;
    z-index: 1;
}
header .basic_m>ul .dep1 .dep2{
    position: relative;
    height: 45px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 16px;
    line-height: 50px;
}
header .basic_m>ul .dep1 .dep2 a{
    width: 150px;
    height: 45px;
    transition: all 0.3s;
}
/* 2depth-hover */
header .basic_m>ul .dep1 .dep2:hover>a{
    background: #235da0;
    color: #fff;
}

/* 3depth */
header .basic_m>ul .dep1 .dep2 ul{
    position: absolute;
    top: 3px;
    left: 150px;
    background: #fff;
}
header .basic_m>ul .dep1 .dep2 .dep3{
    display: none;
    width: 150px;
    height: 40px;
}
header .basic_m>ul .dep1 .dep2 .dep3 a{
    width: 150px;
    height: 40px;
    border-bottom: 2px solid #235da0;
}
header .basic_m>ul .dep1 .dep2 .dep3:last-child a{
    border: none;
}
header .basic_m>ul .dep1 .dep2 .dep3:hover a{
    color: #d02f4d;
}

/* full menu button */
header .full{
    position: absolute;
    top: 33%;
    right: 10px;
    background: #ccc;
}
header .full button{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    transition: all 300ms cubic-bezier(.61, .01, .42, 1);
    cursor: pointer;
    background: transparent;
    border: 0px;
}
header .full button div{
    height: 0px;
    border: 2px solid #235da0;
    width: 30px;
    display: block;
    position: absolute;
    transition: all 300ms cubic-bezier(.61, .01, .42, 1);
    background:#235da0;
}
header .full button:hover{
    transition-delay: 100ms;
    transform: scale(1.1);
}
header .full button:hover .line3:before{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}
header .full button:hover div{
    border: 2px solid #235da0;
    height: 9px;
    border-radius: 50%;
    margin-left: -1px;
    margin-top: 7px;
    animation: atom 300ms linear 1;
    width: 30px;
    top: 0px;
    background:transparent;
}
header .full button:focus{
    outline: 0px;
}
header .full button .line1{
    top: 0px;
}
header .full button .line2{
    top: 10px;
}
header .full button .line3{
    top: 20px;
}
header .full button .line3:before{
    opacity: 0;
    animation: ball 1.5s linear infinite;
    content: '';
    border: 2px solid #235da0;
    display: block;
    position: relative;
    top: 0.25px;
}
header .full button:hover .line1{
    transform: rotate(-33deg);
}
header .full button:hover .line2{
    transform: rotate(90deg);
}
header .full button:hover .line3{
    transform: rotate(33deg);
}
header .full button:hover .line3::before{
    opacity: 1;
    transition: opacity 600ms cubic-bezier(.61, .01, .42, 1);
  ;
}
header .full button:active:hover .line3::before, header .full button:active .line3::before, header .full button:active .line2{
    opacity: 0;
    transition: all 200ms;
}
header .full button:active div{
    border: 2px solid #235da0;
    height: 0px;
    border-radius: 0%;
    margin-left: -1px;
    margin-top: 6px;
    animation: division 300ms linear 1;
    width: 30px;
    top: 0px;
}
header .full button:active .line2{
    width: 0px;
}
header .full button:active .line3{
    transform: rotate(45deg);
}
header .full button:active .line1{
    transform: rotate(-45deg);
}

@keyframes atom {
    0% {
      transform: rotate(180deg);
    }
}

@keyframes division {
    0% {
      transform: rotate(180deg);
    }
}

@keyframes ball {
    0% {
      left: -20%;
      top: 10%;
    }
    10% {
      left: 10%;
      top: -35%;
    }
    25% {
      left: 45%;
      top: -50%;
    }
    40% {
      left: 80%;
      top: -20%;
    }
    50% {
      left: 98%;
      top: 18%;
    }
    60% {
      left: 80%;
      top: 50%;
    }
    75% {
      left: 45%;
      top: 80%;
    }
    90% {
      left: 0%;
      top: 60%;
    }
    100% {
      left: -20%;
      top: 10%;
    }
}


/* ==========================풀스크린 메뉴 */
.full_m{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #235da0; */
    z-index: 9999;
}

/* show animation */
.full_m .circle{
    position: absolute;
    top: -400px;
    right: -400px;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background: #235da0;
}

.full_m .f_in{
    display: none;
    width: 100%;
    height: 100%;
}

/* close btn */
.full_m .f_in .close{
    position: absolute;
    top: 10px;
    right: 10px;
}
.full_m .f_in .close span{
    font-size: 50px;
    color: #fff;
    cursor: pointer;
}

/* 왼쪽 메인메뉴 */
.full_m .f_in .main{
    width: 40%;
    height: 100%;
    padding-top: 2%;
    /* background: #eee; */
}
.full_m .f_in .main ul{
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 60px;
    /* background: #eee; */
}
.full_m .f_in .main ul li{
    position: relative;
    width: 100%;
    height: 18%;
    /* background: #eee; */
}
.full_m .f_in .main .dep1 .num{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 60px;
    line-height: 120px;
    color: #183863;
}
.full_m .f_in .main .dep1 .mt{
    position: absolute;
    top: 40px;
    left: 70px;
    font-family: 'LeferiPoint-BlackA';
    font-size: 95px;
    color: #fff;
    cursor: default;
}

/* 오른쪽 서브메뉴 */
.full_m .f_in .sub{
    position: relative;
    bottom: 100%;
    left: 45.1%;
    width: 50%;
    height: 60%;
    text-align: center;
    /* background: #eee; */
}
.full_m .f_in .sub>ul{
    display: none;
    position: absolute;
    width: 25%;
    left: 50%;
    transform: translate(-50%, 0%);
}
.full_m .f_in .sub>ul>li{
    width: 100%;
}
.full_m .f_in .sub>ul>li a{
    font-size: 27px;
    color: #fff;
    transition: all 0.3s;
}
/* dep2-1 */
.full_m .f_in .sub .dep2-1{
    top: 30%;
    line-height: 60px;
}
/* dep2-2 */
.full_m .f_in .sub .dep2-2{
    top: 5%;
    width: 40%;
    line-height: 50px;
}
.full_m .f_in .sub .dep2-2>li{
    float: left;
    width: 50%;
}
.full_m .f_in .sub .dep2-2>li>a{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 30px;
}
.full_m .f_in .sub .dep2-2 .dep2 ul{
    margin-top: 15px;
}
/* dep2-3 */
.full_m .f_in .sub .dep2-3{
    top: 5%;
    width: 30%;
    line-height: 55px;
}
/* dep2-4 */
.full_m .f_in .sub .dep2-4{
    top: 28%;
    width: 30%;
    line-height: 60px;
}
/* dep2-4 */
.full_m .f_in .sub .dep2-5{
    top: 40%;
}
.full_m .f_in .sub .dep2-5 a{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 35px;
}

/* 풀 서브메뉴 hover */
.full_m .f_in .sub ul li a:hover{
    text-shadow: 1px 1px 2px #333;
    color: #f8d751;
    font-size: xx-large;
}

/* 회사정보 */
.full_m .f_in .txt{
    position: relative;
    left: 40%;
    bottom: 100%;
    width: 60%;
    height: 35%;
    text-align: center;
    font-size: 16px;
}
.full_m .f_in .txt hr{
    width: 75%;
    height: 5px;
    margin-left: 12.5%;
    margin-bottom: 7%;
    background: #fff;
}
.full_m .f_in .txt p{
    font-family: 'LeferiPoint-WhiteA';
    line-height: 50px;
    letter-spacing: 3px;
    color: #fff;
}
.full_m .f_in .txt p:first-child{
    margin-top: 50px;
}

/* ========================================common/footer.html(홈페이지 전체 공통 푸터바) */
/* ==========================푸터 */
footer{
    width: 100%;
    height: 90px;
    border-top: 2px solid #235da0;
    /* background: #ccc; */
}
footer .f_in{
    display: flex;
    justify-content: space-around;
    width: 900px;
    margin: 0 auto;
}
footer .logo img{
    width: 80px;
    margin-top: 10px;
}
footer .foot_t{
    margin-top: 15px;
    font-family: 'LeferiBaseType-RegularA';
    font-size: 15px;
    color: #235da0;
    letter-spacing: 1.5px;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
}
footer .foot_t p:last-child{
    font-family: 'LeferiPoint-WhiteA';
    font-size: 13px;
    letter-spacing: 3px;
}


/* ========================================index.html(홈페이지 메인) */
.index{
    width: 100%;
    height: 83%;
}
/* ==========================메인 비주얼 */
.visual{
    width: 100%;
    height: 50%;
    background: #235da0;
}
.visual .v_in{
    position: relative;
    width: 1300px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.visual .v_in .vt{
    position: absolute;
    top: 50%;
    left: 5%;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 85px;
    color: #fff;
    transform: translate(0%, -50%);
    user-select: none;
}
.visual .v_in .v_img{
    position: relative;
    top: 0%;
    left: 650px;
    width: 650px;
    height: 100%;
    overflow: hidden;
    /* background: #eee; */
}
.visual .v_in .v_img ul{
    position: absolute;
    width: 650px;
    height: 100%;
}
.visual .v_in .v_img ul li{
    /* display: none; */
    position: absolute;
    width: 650px;
    height: 100%;
    user-select: none;
    /* background: #ccc; */
}
.visual .v_in .v_img ul li img{
    position: absolute;
}
.visual .v_in .v_img ul li:not(:first-child){
    display: none;
}
.visual .v_in .v_img .vimg1 img{
    margin-top: -80px;
}
.visual .v_in .v_img .vimg2 img{
    margin-top: -50px;
}
.visual .v_in .v_img .vimg3 img{
    margin-top: -30px;
}
.visual .v_in .v_img .vimg4 img{
    margin-top: -100px;
}

/* ==========================메인 하단 */
.under{
    width: 100%;
    height: 50%;
}
.u_in{
    display: flex;
    width: 1200px;
    height: 50%;
    margin: 0 auto;
    /* background: #eee; */
}
.u_in>div{
    width: 600px;
}

/* ==========================메인 하단-자료실 */
.under .u_in .data{
    position: relative;
    padding: 2% 4%;
    /* background: #ccc; */
    box-sizing: border-box;
}
.under .u_in .data .dt{
    position: relative;
    width: 500px;
    height: 50px;
    user-select: none;
    /* background: #ccc; */
}
.under .u_in .data .dt p{
    position: absolute;
    left: 10px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 30px;
    color: #235da0;
}
.under .u_in .data .dt a{
    position: absolute;
    top: 10px;
    right: 0;
}
.under .u_in .data .dt a img{
    width: 40px;
}
.under .u_in .data .list{
    width: 500px;
    height: 250px;
    /* background: pink; */
}
.under .u_in .data .list ul li{
    display: flex;
    justify-content: space-between;
    height: 50px;
    font-size: 17px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 2px dotted #235da0;
}

/* ==========================메인 하단-지도 */
.under .u_in .map{
    position: relative;
    width: 550px;
}
.under .u_in .map .m_img{
    position: relative;
    top: 12px;
    left: 35px;
    width: 530px;
    height: 350px;
    border-radius: 10px;
    overflow: hidden;
    /* background: #ccc; */
}
.under .u_in .map .m_img img{
    position: absolute;
    top: -50px;
    left: -100px;
    width: 700px;
}
/* 버스 아이콘 */
.under .u_in .map .bus{
    position: absolute;
    top: 0;
    left: 0;
}
.under .u_in .map .bus span{
    position: absolute;
    color: #235da0;
}
.under .u_in .map .bus .bus1{
    top: 80px;
    left: 163px;
}
.under .u_in .map .bus .bus2{
    top: 83px;
    left: 142px;
}
.under .u_in .map .bus .bus3{
    top: 140px;
    left: 80px;
}
.under .u_in .map .bus .bus4{
    top: 170px;
    left: 140px;
}
.under .u_in .map .bus .bus5{
    top: 260px;
    left: 270px;
}
.under .u_in .map .bus .bus6{
    top: 230px;
    left: 340px;
}
/* 회사 위치 */
.under .u_in .map .locate{
    position: absolute;
    top: 105px;
    left: 209px;
    width: 130px;
    height: 35px;
    /* background: #ccc; */
}
.under .u_in .map .locate ul li{
    position: absolute;
}
.under .u_in .map .locate .lo_box img{
    width: 130px;
}
.under .u_in .map .locate .lo_pin{
    top: 5px;
    left: 8px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}
.under .u_in .map .locate .lo_pin span{
    font-size: 16px;
    margin: 2.5px;
    color: #fff;
}
.under .u_in .map .locate .lo_t{
    right: 10px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 17px;
    line-height: 40px;
    color: #fff;
}
/* 지하철 출구 */
.under .u_in .map .subway{
    position: absolute;
    top: 220px;
    left: 400px;
    width: 130px;
    height: 100px;
    /* background: #ccc; */
}
.under .u_in .map .subway .circle{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid #235da0;
    box-sizing: border-box;
    margin-left: 62px;
}
.under .u_in .map .subway .line{
    width: 3px;
    height: 15px;
    background: #235da0;
    margin-left: 73px;
}
.under .u_in .map .subway .su_box{
    width: 130px;
    height: 55px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 17px;
    text-align: center;
    color: #235da0;
    padding-top: 4px;
    border-radius: 5px;
    border: 3px solid #235da0;
    background: #fff;
    box-sizing: border-box;
}

/* ========================================sub메뉴 공통1 */
/* ==========================서브메뉴바 */
.sub12 .sub_m{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    background: #f7eedd;
}
.sub12 .sub_m ul{
    display: flex;
    justify-content: space-around;
    width: 400px;
}
.sub12 .sub_m ul li{
    width: 200px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 18px;
    line-height: 50px;
}
.sub12 .sub_m ul li a{
    transition: all 0.3s;
}
.sub12 .sub_m ul li:hover a{
    color: #235da0;
}

/* ========================================sub메뉴 공통2 */
/* ==========================좌측 플로팅 메뉴바 */
.float_m{
    position: absolute;
    left: 25px;
    width: 200px;
    height: 80%;
    z-index: 10;
    /* background: #ccc; */
}
.float_m ul li{
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 20px;
    /* background: #ccc;/ */
}
.float_m ul li:first-child{
    margin-top: 0;
}
.float_m ul li div{
    position: absolute;
}
.float_m ul li div a{
    display: block;
    width: 100%;
    height: 16px;
    /* background: #ccc; */
}
.float_m ul li .c_bar{
    bottom: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f8d751;
    transition: all 0.3s;
}
.float_m ul li .c_bar.now{
    bottom: 0;
    width: 115px;
    height: 12px;
    border-radius: 0;
}
.float_m ul li .fm{
    bottom: 0;
    left: 25px;
    font-size: 15px;
}
.float_m ul li .fm.now{
    user-select: none;
}
.float_m ul li:hover:not(.select) .c_bar{
    bottom: 0;
    width: 115px;
    height: 12px;
    border-radius: 0;
}
.float_m ul .bga:hover:not(.select) .c_bar{
    bottom: 0;
    width: 170px;
    height: 12px;
    border-radius: 0;
}
.float_m ul .panel:hover:not(.select) .c_bar{
    bottom: 0;
    width: 140px;
    height: 12px;
    border-radius: 0;
}
.float_m ul .wafer:hover:not(.select) .c_bar{
    bottom: 0;
    width: 145px;
    height: 12px;
    border-radius: 0;
}
.float_m ul .mot:hover:not(.select) .c_bar{
    bottom: 0;
    width: 130px;
    height: 12px;
    border-radius: 0;
}
.float_m ul .soft:hover:not(.select) .c_bar{
    bottom: 0;
    width: 160px;
    height: 12px;
    border-radius: 0;
}


/* ========================================sub1-n.html(공통) */
.sub1 .sub_m ul li{
    width: 100px;
}

/* ========================================sub1-1.html(회사연혁) */
.sub1-1{
    position: relative;
    width: 100%;
    height: 83%;
    text-align: center;
}
.sub1-1 .sub_t{
    font-family: 'LeferiBaseType-BoldA';
}

/* ==========================콘텐츠-연혁 */
.sub1-1 .content{
    width: 100%;
    height: 80%;
    /* background: #ccc; */
}
/* 메인바 */
.sub1-1 .content .bar{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 35px;
    background: #f8d751;
}
/* 연혁내용 */
.sub1-1 .content .years{
    position: relative;
    display: flex;
    justify-content: center;
    width: 1300px;
    height: 100%;
    margin: 0 auto;
    /* background: #eee; */
}
.sub1-1 .content .years div{
    position: absolute;
    width: 250px;
}
.sub1-1 .content .years div .arrow span{
    transform: rotate(90deg);
    font-size: 60px;
    color: #f8d751;
    user-select: none;
}
.sub1-1 .content .years div .year{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 45px;
    color: #f8d751;
}
.sub1-1 .content .years div .month ul{
    display: flex;
    justify-content: center;
    line-height: 50px;
}
.sub1-1 .content .years div .month ul .mon{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 25px;
    color: #d02f4d;
    margin-right: 15px;
}
.sub1-1 .content .years div .month ul .day{
    font-size: 20px;
}

.sub1-1 .content .years .y16, .sub1-1 .content .years .y19, .sub1-1 .content .years .y21{
    top: 40%;
}
.sub1-1 .content .years .y18, .sub1-1 .content .years .y20{
    top: 14.6%;
}
.sub1-1 .content .years .y18 .arrow span, .sub1-1 .content .years .y20 .arrow span{
    transform: rotate(-90deg);
}
.sub1-1 .content .years .y16{
    left: 0;
}
.sub1-1 .content .years .y18{
    left: 20%;
}
.sub1-1 .content .years .y19{
    left: 40%;
}
.sub1-1 .content .years .y20{
    left: 60%;
}
.sub1-1 .content .years .y21{
    left: 80%;
}


/* ========================================sub1-2.html(사업영역) */
.sub1-2{
    width: 100%;
    height: 83%;
    text-align: center;
}
.sub1-2 .sub_t{
    font-family: 'LeferiBaseType-BoldA';
}
.sub1-2 .content{
    display: flex;
    justify-content: center;
    width: 1500px;
    height: 80%;
    margin: 0 auto;
}
.sub1-2 .content div{
    width: 450px;
    height: 50%;
    margin-top: 7.5%;
    border-right: 1px solid #235da0;
    /* background: #eee; */
}
.sub1-2 .content div:last-child{
    border: none;
}
.sub1-2 .content div .ct{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 30px;
    color: #235da0;
}
.sub1-2 .content div ul{
    width: 350px;
    margin: 30px auto;
}
.sub1-2 .content div ul li{
    width: 350px;
    height: 50px;
    font-size: 20px;
    list-style-type: disc;
    list-style-position: inside;
    color: #235da0;
}


/* ========================================sub1-3.html(오시는길) */
.sub1-3{
    width: 100%;
    height: 83%;
    text-align: center;
}
.sub1-3 .sub_t{
    font-family: 'LeferiBaseType-BoldA';
}
.sub1-3 .road{
    width: 1500px;
    margin: 0 auto;
    font-size: 19px;
}
.sub1-3 .road .map{
    margin-top: 20px;
}
.sub1-3 .map_t ul{
    width: 700px;
    margin: 20px auto 0;
    line-height: 50px;
    /* background: #eee; */
}
.sub1-3 .map_t>ul>li{
    width: 700px;
    height: 50px;
    border-bottom: 1px solid #d02f4d;
    /* background: pink; */
}
.sub1-3 .map_t>ul>li:last-child{
    border: none;
}
.sub1-3 .map_t>ul .num{
    display: flex;
    justify-content: space-around;
}


/* ========================================sub2&sub3.html(sub2,3페이지 공통 부분) */
.sub234{
    position: relative;
    width: 100%;
    height: 83%;
    text-align: center;
}
/* 서브 메인 메뉴명 */
.sub234 .sub_t{
    font-family: 'LeferiPoint-BlackA';
    font-size: 50px;
    line-height: 120px;
}
/* 좌측 플로팅 메뉴 */
.sub234 .float_m ul{
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate(0%, -50%);
}
/* 콘텐츠 영역 */
.sub234 .content{
    position: relative;
    left: 50%;
    width: 1500px;
    height: 80%;
    transform: translate(-50%, 0%);
}
.sub234 .content .c_in{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1500px;
    height: 100%;
    margin: 0 auto;
}
.sub234 .content .c_in .c_txt{
    text-align: left;
    margin-left: 50px;
}
/* 기본 텍스트 형식 */
.sub234 .content .c_in .c_txt .info_t{
    font-family: 'LeferiPoint-BlackA';
    font-size: 33px;
    color: #235da0;
}
.sub234 .content .c_in .c_txt .info_ex{
    font-family: 'LeferiBaseType-RegularA';
    font-size: 20px;
    margin-top: 15px;
}
.sub234 .content .c_in .c_txt ul{
    margin-top: 25px;
}
.sub234 .content .c_in .c_txt ul li{
    height: 35px;
    font-size: 20px;
    color: #777;
}
/* 특이점 추가 텍스트 형식 */
.sub234 .content .c_in .c_txt .base{
    margin-bottom: 20px;
}
.sub234 .content .c_in .c_txt .base p{
    font-family: 'LeferiPoint-BlackA';
    font-size: 30px;
    color: #235da0;
}
.sub234 .content .c_in .c_txt .base ul{
    margin-top: 15px;
}
.sub234 .content .c_in .c_txt .base ul li{
    height: 35px;
    font-size: 22px;
}
.sub234 .content .c_in .c_txt .point p{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 20px;
    color: #555;
}
.sub234 .content .c_in .c_txt .point ul{
    margin-top: 10px;
}
.sub234 .content .c_in .c_txt .point ul li{
    height: 30px;
    font-size: 18px;
    color: #d02f4d;
}


/* ========================================sub2-1.html(2D시스템-서브안내) */
.sub2-1{
    width: 100%;
    height: 83%;
    text-align: center;
}
.sub2-1 .sub_t{
    font-family: 'LeferiPoint-BlackA';
    font-size: 50px;
    line-height: 120px;
}
.sub2-1 .sub_m{
    display: flex;
    justify-content: space-around;
    width: 1400px;
    height: 80%;
    margin: 1% auto;
}
.sub2-1 .sub_m>div{
    position: relative;
    width: 550px;
    height: 100%;
    border-radius: 10px;
    background: #eee;
}
.sub2-1 .sub_m>div ul{
    width: 100%;
}
.sub2-1 .sub_m>div ul li{
    width: 100%;
    border-bottom: 1px solid #fff;
    background: #ded3b7;
}
.sub2-1 .sub_m>div ul li:last-child{
    border-radius: 0px 0px 10px 10px;
    border: none;
}
.sub2-1 .sub_m>div ul li a{
    transition: all 0.3s;
}
.sub2-1 .sub_m>div ul li a:hover{
    color: #fff;
    text-shadow: 4px 4px 3px #444;
}
.sub2-1 .sub_m div .msub{
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 600px;
    border-radius: 10px;
    border: 5px solid #ded3b7;
    box-sizing: border-box;
    background: #ded3b7;
    transition: all 0.5s;
}
.sub2-1 .sub_m div:hover .msub{
    color: #ded3b7;
    border-radius: 10px 10px 0px  0px;
    background: #fff;
}
/* ALIGN */
.sub2-1 .sub_m .align .msub{
    font-family: 'GmarketSansBold';
    font-size: 50px;
}
.sub2-1 .sub_m .align:hover .msub{
    height: 19%;
    font-size: 40px;
    line-height: 115px;
}
.sub2-1 .sub_m .align ul{
    height: 81%;
    margin-top: 19%;
}
.sub2-1 .sub_m .align ul li{
    height: 33.333%;
    font-size: 30px;
    font-weight: bold;
    line-height: 175px;
}
/* 검사&측정 */
.sub2-1 .sub_m .test .msub{
    font-family: 'LeferiPoint-BlackA';
    font-size: 50px;
}
.sub2-1 .sub_m .test:hover .msub{
    height: 10%;
    font-size: 30px;
    line-height: 60px;
}
.sub2-1 .sub_m .test ul{
    height: 90%;
    margin-top: 10%;
}
.sub2-1 .sub_m .test ul li{
    height: 12.5%;
    font-size: 25px;
    font-weight: bold;
    line-height: 80px;
}


/* ========================================sub2-1-1.html(2D시스템-Align-전지권취기) */
.sub2-1-1 .content .c_in .c_img img{
    width: 750px;
}


/* ========================================sub2-1-3.html(2D시스템-검사&측정-메탈 마스크) */
.sub2-1-3 .content .c_in .c_img img{
    width: 700px;
}

/* ========================================sub2-2-1.html(2D시스템-검사&측정-Watch 형상) */
.sub2-2-1 .content .c_in .c_img img{
    width: 480px;
}


/* ========================================sub2-2-3.html(2D시스템-검사&측정-링 형상) */
.sub2-2-3 .content .c_in .c_img img{
    width: 400px;
}
.sub2-2-3 .content .c_in .c_txt{
    width: 550px;
}
.sub2-2-3 .content .c_in .c_txt img{
    width: 450px;
    margin-top: 7px;
}
.sub2-2-3 .content .c_in .c_txt .base ul li{
    height: 30px;
    font-size: 18px;
}


/* ========================================sub2-2-4.html(2D시스템-검사&측정-시트) */
.sub2-2-4 .content .c_in .c_img{
    width: 450px;
}
.sub2-2-4 .content .c_in .c_img img{
    width: 450px;
}
.sub2-2-4 .content .c_in .c_txt{
    width: 500px;
}


/* ========================================sub2-2-5.html(2D시스템-검사&측정-칼날) */
.sub2-2-5 .content .c_in .c_img{
    width: 490px;
}
.sub2-2-5 .content .c_in .c_img img{
    width: 490px;
}


/* ========================================sub2-2-6.html(2D시스템-검사&측정-2차 전지) */
.sub2-2-6 .content .c_in .c_img{
    width: 490px;
}
.sub2-2-6 .content .c_in .c_img img{
    width: 490px;
}


/* ========================================sub2-2-7.html(2D시스템-검사&측정-이물) */
.sub2-2-7 .content .c_in .c_img img{
    width: 700px;
}
.sub2-2-7 .content .c_in .c_txt .step{
    font-size: 18px;
    color: #d02f4d;
    margin-top: 20px;
}
.sub2-2-7 .content .c_in .c_txt ul{
    margin-top: 10px;
}
.sub2-2-7 .content .c_in .c_txt ul li{
    font-size: 16px;
    color: #333;
}


/* ========================================sub2-2-7.html(2D시스템-검사&측정-레이저) */
.sub2-2-8 .content .c_in .c_img{
    width: 500px;
}
.sub2-2-8 .content .c_in .c_img img{
    width: 500px;
}


/* ========================================sub3-0.html(3D시스템-서브안내) */
.sub3 .sub_m{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1500px;
    height: 86%;
    margin: 0 auto;
    /* background: #ccc; */
}
.sub3 .sub_m .cube{
    width: 600px;
    height: 600px;
    /* background: #eee; */
}
.sub3 .sub_m .cube ul{
    display: flex;
    flex-wrap: wrap;
}
.sub3 .sub_m .cube ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
}
.sub3 .sub_m .cube ul li a{
    color: #ded3b7;
}
.sub3 .sub_m .cube ul li a p{
    font-family: 'LeferiBaseType-RegularA';
    font-size: 25px;
    transition: all 0.4s;
    /* background: #eee; */
}
.sub3 .sub_m .cube ul li a .line{
    width: 0%;
    height: 3px;
    background: #000;
    margin-top: 5px;
    transition: all 0.4s;
}
.sub3 .sub_m .cube .cu_t{
    background: #ded3b7;
}
.sub3 .sub_m .cube .cu_t p{
    font-family: 'LeferiBaseType-BoldA';
    font-size: 33px;
    color: #fff;
}
.sub3 .sub_m .cube ul li:nth-child(2), .sub3 .sub_m .cube ul li:nth-child(4), .sub3 .sub_m .cube ul li:nth-child(5){
    border-bottom: 1px solid #ded3b7;
    border-right: 1px solid #ded3b7;
}
.sub3 .sub_m .cube ul li:nth-child(3), .sub3 .sub_m .cube ul li:nth-child(6){
    border-bottom: 1px solid #ded3b7;
}
.sub3 .sub_m .cube ul li:nth-child(7), .sub3 .sub_m .cube ul li:nth-child(8){
    border-right: 1px solid #ded3b7;
}

.sub3 .sub_m .cube ul li a:hover p{
    color: #000;
}
.sub3 .sub_m .cube ul li a:hover .line{
    width: 100%;
}

/* ========================================3D-공통 */
.sub3 .content, .sub4 .content{
    height: 86%;
}

/* ========================================sub3-1.html(3D시스템-프레스 부품) */
.sub3-1 .content .c_in .c_img{
    position: relative;
    width: 450px;
    height: 80%;
    /* background: #eee; */
}
.sub3-1 .content .c_in .c_img img{
    position: absolute;
}
.sub3-1 .content .c_in .c_img .img2{
    top: 0;
    right: 0;
    width: 400px;
}
.sub3-1 .content .c_in .c_img .img3{
    bottom: 0;
    right: 0;
    width: 400px;
}
.sub3-1 .content .c_in .c_txt .info_ex{
    margin-top: 10px;
}
.sub3-1 .content .c_in .c_txt .point{
    margin-top: 20px;
}

/* ========================================sub3-2.html(3D시스템-홀 전수) */
.sub3-2 .content .c_in .c_img img{
    width: 550px;
}

/* ========================================sub3-3.html(3D시스템-전지곡면) */
.sub3-3 .content .c_in .c_img{
    width: 500px;
}
.sub3-3 .content .c_in .c_img img{
    width: 500px;
}

/* ========================================sub3-4.html(3D시스템-BGA Pin) */
.sub3-4 .float_m ul li .c_bar.now{
    width: 170px;
}
.sub3-4 .content .c_in .c_img img{
    width: 400px;
}
.sub3-4 .content .c_in .c_txt img{
    width: 600px;
    margin-top: 25px;
}

/* ========================================sub3-5.html(3D시스템-패널레이저 가공) */
.sub3-5 .float_m ul li .c_bar.now{
    width: 140px;
}
.sub3-5 .content .c_in .c_img{
    width: 450px;
}
.sub3-5 .content .c_in .c_img img{
    width: 400px;
}
.sub3-5 .content .c_in .c_txt img{
    width: 600px;
    margin-top: 25px;
}

/* ========================================sub3-6.html(3D시스템-고속 웨이퍼 곡면) */
.sub3-6 .float_m ul li .c_bar.now{
    width: 140px;
}
.sub3-6 .content .c_in .c_img{
    position: relative;
    width: 800px;
    height: 80%;
}
.sub3-6 .content .c_in .c_img img{
    position: absolute;
}
.sub3-6 .content .c_in .c_img .img1{
    top: 0;
    left: 0;
    width: 433px;
}
.sub3-6 .content .c_in .c_img .img2{
    top: 0;
    right: 0;
    width: 400px;
}
.sub3-6 .content .c_in .c_img .img3{
    bottom: 0;
    right: 0;
    width: 400px;
}

/* ========================================sub3-7.html(3D시스템-웨이퍼 곡면) */
.sub3-7 .content .c_in .c_img{
    display: flex;
    width: 700px;
}
.sub3-7 .content .c_in .c_img img{
    width: 350px;
}

/* ========================================sub3-8.html(3D시스템-웨이퍼 패턴) */
.sub3-8 .content .c_in .c_img img{
    width: 400px;
}
.sub3-8 .content .c_in .c_txt img{
    width: 500px;
    margin-top: 25px;
}


/* ========================================sub4-1.html(3D측정기-모션 보정 제어) */
.sub4-1 .float_m ul li .c_bar.now{
    width: 130px;
}

/* ========================================sub4-3.html(3D측정기-3차원 비접촉 S/W) */
.sub4-3 .float_m ul li .c_bar.now{
    width: 160px;
}


/* ========================================sub5.html(자료실) */
.sub5{
    position: relative;
    width: 100%;
    height: 83%;
    text-align: center;
}
.sub5 .sub_t{
    font-family: 'LeferiPoint-BlackA';
    font-size: 60px;
    line-height: 125px;
}
.sub5 .content{
    width: 100%;
    height: 86%;
}
.sub5 .content .c_in{
    width: 1500px;
    height: 100%;
    margin: 0 auto;
}
/* 게시판 */
.sub5 .content .c_in .board{
    width: 80%;
    height: 75%;
    margin: 40px auto 15px;
    background: #eee;
}
.sub5 .content .c_in .board li{
    height: calc(100% / 7);
    transition: all 0.5s;
    background: #faf4ea;
    overflow: hidden;
}
.sub5 .content .c_in .board li:nth-of-type(2n+1){
    background: #f0e4c6;
}
.sub5 .content .c_in .board li div{
    display: flex;
    justify-content: space-between;
}
.sub5 .content .c_in .board li .brd_t{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    transition: all 0.5s;
}
.sub5 .content .c_in .board li .brd_t .sw_name{
    font-family: 'LeferiBaseType-RegularA';
    font-size: 20px;
    line-height: 80px;
    cursor: pointer;
}
.sub5 .content .c_in .board li .brd_t .up_date{
    line-height: 110px;
    color: #555;
}
.sub5 .content .c_in .board li .sw{
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    /* background: cadetblue; */
}
.sub5 .content .c_in .board li .sw .d_btn{
    display: flex;
}
.sub5 .content .c_in .board li .sw .d_btn .f_t{
    display: block;
    line-height: 50px;
    margin-right: 15px;
    /* background: lightcoral; */
}
.sub5 .content .c_in .board li .sw .d_btn .down{
    display: block;
    margin-top: 13px;
    transition: all 0.3s;
    cursor: pointer;
    /* background: lightblue; */
}

.sub5 .content .c_in .board li .sw .d_btn .down:hover{
    color: #235da0;
}

/* paging */
.sub5 .content .c_in .page{
    width: 50%;
    height: 35px;
    margin: 60px auto;
    /* background: #eee; */
}
.sub5 .content .c_in .page ul{
    display: flex;
    justify-content: space-around;
    width: 50%;
    height: 100%;
    margin: 0 auto;
}
.sub5 .content .c_in .page ul li{
    width: 35px;
    height: 35px;
    font-family: 'LeferiBaseType-BoldA';
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s;
}
.sub5 .content .c_in .page ul li.select{
    background: #235da0;
}
.sub5 .content .c_in .page ul li.select a{
    color: #fff;
}
.sub5 .content .c_in .page ul li a{
    color: #235da0;
}
.sub5 .content .c_in .page ul li a span{
    margin-top: 6px;
}

.sub5 .content .c_in .page ul li:not(.select):hover{
    text-shadow: 3px 3px 2px #777;
}


/* ========================================전체 페이지 공통 효과 */
a{
    color: #333;
}
.sub_t{
    width: 100%;
    height: 110px;
    font-size: 55px;
    line-height: 125px;
    text-align: center;
    color: #fff;
    background: #235da0;
    user-select: none;
}
.selected{
    color: #d02f4d;
}