@charset "utf-8"; /* Paging setting */
.header {
    position: fixed;
    background: #0000002b;
    display: flex;
    width: 100%;
    height: 70px;
    color: #ffffff;
    border-bottom: 1px solid rgb(255 255 255 / 44%);
    align-items: center;
    z-index: 998;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
    top: 0;
    left: 0;
}

.header .header__logo {
    width: 400px;
    height: 50px;
    margin-left: 5px;
    background: url('images/assets/logo_white.png') no-repeat center;
    background-size: cover;
    margin-right: 90px;
    flex-shrink: 0;
}

.header .header__gnb {
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.header .header__gnb > ul {
    display: flex;
    font-size: 18px;
    width: 100%;
    max-width: 770px;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.header .header__gnb > ul > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.header .header__gnb > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    background: #e5151f;
    width: 0;
    height: 2px;
    transition: 0.2s ease-out;
    transform-origin: left;
}

.header .header__gnb > ul > li.now_page > a::after {
    width: 100%;
}

.header .header__gnb > ul > li > a {
    color: #ffffff;
    position: relative;
    font-weight: bold;
}

.header .header_foldwrap {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 200px;
    background: #333;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease-in;
}

.header .header_foldwrap > ul {
    padding: 30px;
}

.header .header_foldwrap > ul > li {
    margin-bottom: 8px;
}

.header .header_foldwrap > ul > li:last-child {
    margin-bottom: 0;
}

.header .header_foldwrap > ul > li > a {
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    transform: skew(0.028deg);
}

.header .header_foldwrap > ul > li > a:hover {
    color: #e5151f;
}

.header .header__showroom {
    font-size: 0px;
    padding: 0px 0px;
    border-radius: 0px;
    color: #fff;
    background: rgb(255 255 255 / 0%);
    line-height: 1;
    margin: 0 0px 0 auto;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}

.header .header__language{font-size:16px;display:flex;align-items:center;cursor:pointer;height:100%;position:relative;flex-wrap: nowrap;}
.header .header__language span{font-weight:bold;color:#ffffff;margin-right: 15px;user-select:none;}
.header .header__language--icon{width:25px; height:25px; margin-right:15px; background:url('images/assets/language.png') no-repeat center; background-size:100%;}
.header .header__language--down{width: 25px;height: 25px;background:url('images/assets/down.png') no-repeat center;background-size:100%;}
.header .header__search{border-left:1px solid rgba(255,255,255,0.15);width:0px;height:0px;background:url('') no-repeat center;transition:border-color 0.1s ease-in;cursor:pointer;flex-shrink:0;background-size:cover;margin-left: 15px;}
.header .header__fullmenu {
    border-left: 1px solid rgb(255 255 255 / 47%);
    width: 70px;
    height: 70px;
    background: url('images/assets/menu.svg') no-repeat center;
    transition: border-color 0.1s ease-in;
    cursor: pointer;
    flex-shrink: 0;
    background-size: cover;
}

/*상부메뉴*/
.header--solid {
    background: #1e1e1e;
    display: flex;
    width: 100%;
    height: 70px;
    color: #ffffff;
    border-bottom: 1px solid #ffffff80;
    z-index: 998;
}

.header--solid .header__logo {
    /*  background: url('images/assets/logo.png') no-repeat center;
    background-size: 100%;*/
    width: 400px;
    height: 50px;
    margin-left: 5px;
    background: url('images/assets/logo.png') no-repeat center;
    background-size: cover;
    margin-right: 90px;
    flex-shrink: 0;
}

.header--solid .header__gnb > ul > li > a {
    color: #ffffff;
}

.header--solid .header__gnb > ul > li:hover > a::after {
    width: 100%;
}

.header--solid .header__showroom {
    color: #e5151f00;
    background: transparent;
    border: 1px solid #e5151f00;
    transition: 0.1s ease-in;
}

.header--solid .header__showroom:hover {
    color: #fff;
    background: #e5151f00;
    border: 1px solid #e5151f00;
}
.header--solid .header__language--icon{width: 25px;height:25px;margin-right:15px;background:url('images/assets/language2.png') no-repeat center;background-size:100%;}
.header--solid .header__language--down{width: 25px;height: 25px;background:url('images/assets/down2.png') no-repeat center;background-size:100%;}
.header--solid .header__search{border-left:1px solid #ddd;background:url('') no-repeat center;width: 0px;height:0px;transition:0.2s ease-in;background-size:cover;z-index:997;}
.header--solid .header__fullmenu {
    border-left: 1px solid #ffffff70;
    background: url('images/assets/menu.svg') no-repeat center;
    width: 70px;
    height: 70px;
    transition: 0.2s ease-in;
    background-size: cover;
    z-index: 997;
}

.header__search:hover{background:url('') no-repeat center #e5151f; background-size:cover;}
.header__fullmenu:hover {
    background: url('images/assets/menu.svg') no-repeat center #00000091;
    background-size: cover;
}

.header .header__gnb > ul > .product_tap {
    position: inherit;
}

/*상부*/
.header .product_tap .product_tap_wrap {
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0;
    margin: 0 auto;
    background: #222222;
    display: flex;
    overflow: hidden;
    transition: 0.2s ease-in;
    box-shadow: 0 3px 3px rgb(251 5 5 / 5%);
    max-height: 0;
}

.header .product_tap .product_tap_wrap .product_depth01 {
    background: #4d4d4e;
    margin-right: 70px;
    padding: 20px 0 60px;
    padding-left: 320px;
}

.header .product_tap .product_tap_wrap .product_depth01 li {
    width: 330px;
}

.header .product_tap .product_tap_wrap .product_depth01 li a {
    display: block;
    padding-left: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #f6f4f4;
}

.header .product_tap .product_tap_wrap .product_depth01 li a:hover {
    background: #333333;
    color: #fff;
}

.header .product_tap .product_tap_wrap .product_depth01 .selected a {
    background: #333333;
    color: #fff;
}

.header .product_tap .product_tap_wrap .product_depth02 {
    padding: 20px 0 60px;
    margin-right: 70px;
    width: 300px;
    flex-shrink: 0;
    position: relative;
}

.header .product_tap .product_tap_wrap .product_depth02 li {
    width: 260px;
    border-bottom: 1px solid #dddddd00;
    position: relative;
}

.header .product_tap .product_tap_wrap .product_depth02 li::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 2px;
    background: transparent;
    bottom: -1px;
    left: 0;
    transition: 0.2s ease-in;
}

.header .product_tap .product_tap_wrap .product_depth02 li:hover::after {
    background: #e5151f;
    width: 100%;
}

.header .product_tap .product_tap_wrap .product_depth02 li::before {
    content: '';
    width: 7px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: url('images/assets/right_gray.png') no-repeat center;
}

.header .product_tap .product_tap_wrap .product_depth02 li:hover::before {
    background: url('images/assets/right_red.png') no-repeat center;
}

.header .product_tap .product_tap_wrap .product_depth02 li a {
    display: block;
    height: 45px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
}

.header .product_tap .product_tap_wrap .product_depth02 li:hover a {
    color: #e5151f;
    font-weight: 700;
}

/*제품설명*/
.header .product_tap .product_tap_wrap .product_information {
    padding: 40px 0 0;
    width: 550px;
    display: flex;
    height: 300px;
}

.header .product_tap .product_tap_wrap .product_information .img_box {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 290px;
    flex-shrink: 0;
}

.header .product_tap .product_tap_wrap .product_information .text_box {
    background: #4d4d4e;
    background-size: cover;
    padding: 0 45px 0 30px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.header .product_tap .product_tap_wrap .product_information .text_box .title {
    font-size: 20px;
    font-weight: 700;
    color: rgb(255 251 251);
    margin-bottom: 20px;
    width: 100%;
}

.header .product_tap .product_tap_wrap .product_information .text_box .desc {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    transform: skew(1deg);
    margin-bottom: 40px;
    width: 100%;
}

.header .product_tap .product_tap_wrap .product_information .text_box .view_more {
    color: #333;
}

.header .product_tap .product_tap_wrap .product-tap__scrolltrack {
    position: absolute;
    width: 4px;
    background: #aaa;
}

.header .product_tap .product_tap_wrap .product-tap__scrollbar {
    position: absolute;
    width: 4px;
    background: #e5151f;
    top: 0;
    left: 0;
}

.dimmed {
    pointer-events: none;
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000;
    transition: 0.4s ease-in-out;
    opacity: 0;
}

.dimmed.on {
    opacity: 0.7;
    pointer-events: all;
}

.header .header__gnb > ul .more_scroll .product_depth02 {
    overflow-y: scroll;
    height: 400px;
}

.header .header__gnb > ul .more_scroll .product_depth02::-webkit-scrollbar {
    width: 6px;
    display: block;
}

.header .header__gnb > ul .more_scroll .product_depth02::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 10px;
}

.header .header__gnb > ul .more_scroll .product_depth02::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 10px;
}

/*akdntmdkdlzhs*/
.header .header__gnb > ul .more_scroll:after {
    content: "";
    position: absolute;
    left: 0;
    margin-left: 852px;
    bottom: 60px;
    width: 3px;
    height: 7px;
    border-radius: 3px;
    background: #00BCD4;
    animation: scrollRolling 1.1s ease-in-out infinite;
}

.header .header__gnb > ul .more_scroll:before {
    content: "";
    position: absolute;
    left: 0;
    margin-left: 845px;
    bottom: 40px;
    width: 13px;
    height: 25px;
    border: 2px solid #00BCD4;
    border-radius: 15px;
}

@keyframes scrollRolling {
    0% {
        bottom: 60px;
    }

    100% {
        bottom: 50px;
    }
}

/* header PC END */
@media screen and (max-width: 1440px) {
    .header .header__gnb {
        display:none;
    }

    .header .header__showroom {
        display: none;
    }

    .header .header__language {
        margin-left: auto;
    }

    .quick__menu {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .header .header__logo {
        margin-left: 1%;
    }
}

@media screen and (max-width: 768px) {
    .header {
        height: 55px;
    }

    .header .header__logo {
        width: 140px;
        height: 40px;
    }

    .header .header__search {
        width: 0px;
        height: 0px;
        margin-left:10px;
    }

    .header .header_foldwrap {
        width: 120px;
    }

    .header .header__fullmenu {
        width: 45px;
        height: 45px;
    }

    .header .header__language {
    }

    .header .header__logo {
        margin-right: auto;
    }

    .Timechek {
        display: none;
    }
    .header .header__logo {
    width: 120px;
    height: 40px;
    background: url('images/assets/logo_whitea.png') no-repeat center;
    background-size: cover;
}
    .header--solid .header__logo {
    width: 120px;
    height: 40px;;
    background: url('images/assets/logoa.png') no-repeat center;
    background-size: cover;
}
}

/* Common Search Start */
.search01 {
    margin: 70px auto 120px;
    padding: 80px 0;
    background: url('images/assets/sub_bg_prd_search.jpg') no-repeat center;
    background-size: cover;
}

.search01 h2 {
    font-size: 45px;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.search01 form {
    max-width: 700px;
    margin: 0 auto;
}

.search01 form .search_filed {
    display: flex;
    border-bottom: 2px solid #000;
    position: relative;
    margin-bottom: 30px;
}

.search01 form .search_filed input[type="text"] {
    width: 100%;
    border: none;
    background: transparent;
    height: 60px;
    outline: none;
    font-size: 22px;
}

.search01 form .search_filed input[type="text"]::placeholder {
    font-size: 22px;
    color: #aaaaaa;
}

.search01 form .search_filed input[type="submit"] {
    border: none;
    font-size: 0;
    width: 60px;
    height: 60px;
    background: url('images/assets/search2.png') no-repeat center;
    flex-shrink: 0;
}

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

@media screen and (max-width: 1024px) {
    .search01 {
        padding: 40px 0;
        margin-bottom: 60px;
    }

    .search01 h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .search01 form {
        max-width: 90%;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .search01 {
        margin:45px auto 60px;
    }
}

.search02 {
    width: 100%;
    margin: 0 auto 150px;
}

.search02 h3 {
    font-size: 30px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 400;
    font-family: 'NanumSquare' , sans-serif;
}

.search02 h3 span {
    vertical-align: baseline;
    color: #e5151f;
    font-weight: 700;
    font-family: 'NanumSquare', sans-serif;
}

.search02 ul {
    display: flex;
    justify-content: space-between;
}

.search02 .section__sub--tap {
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 60px;
}

.search02 .result_table {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 80px;
}

.search02 .result_table .table_title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: flex-end;
}

.search02 .result_table .table_title h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.search02 .result_table .table_title a {
    font-size: 14px;
    color: #666;
    transform: skew(0.028deg);
}

.search02 .result_table .table_header {
    border-top: 1px solid #bc0000;
}

.search02 .result_table .table_header .table_row .table_col {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.search02 .result_table .table_header .table_row .table_col::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: #ccc;
}

.search02 .result_table .table_header .table_row .table_col:last-child::after {
    display: none;
}

.search02 .result_table .table_row {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
}

.search02 .result_table .table_row .table_col {
    text-align: center;
    font-size: 16px;
    color: #666;
    transform: skew(0.028deg);
}

.search02 .result_table .table_row .table_col:nth-of-type(1) {
    width: 15%;
}

.search02 .result_table .table_row .table_col:nth-of-type(2) {
    width: 30%;
}

.search02 .result_table .table_row .table_col:nth-of-type(3) {
    width: 30%;
}

.search02 .result_table .table_row .table_col:last-child {
    width: 100%;
}

.search02 .result_table .table_body .table_row .table_col:last-child {
    text-align: left;
    padding-left: 30px;
}

.search02 .result_table .table_body .table_row .table_col.no_result {
    width: 100%;
    color: #aaa;
    text-align: center;
}

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

@media screen and (max-width: 1024px) {
    .search02 .result_table {
        max-width:90%;
        width: 100%;
    }

    .search02 .result_table .table_row .table_col:nth-of-type(1) {
        display: none;
    }

    .search02 .result_table .table_row .table_col:nth-of-type(2) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .search02 h3 {
        font-size:24px;
    }
}

/* Common Search End */
/* header in search START */
.search_wrap {
    position: fixed;
    width: 100%;
    background: #f5f5f5;
    top: 0;
    left: 0;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.3s ease-in-out;
    z-index: 1000;
}

.search_wrap .title {
    font-size: 40px;
    margin-bottom: 40px;
    line-height: 1;
    text-align: center;
    color: #333;
    padding-top: 100px;
    user-select: none;
}

.search_wrap form {
    max-width: 700px;
    margin: 0 auto;
}

.search_wrap form .search_filed {
    display: flex;
    border-bottom: 2px solid #000;
    position: relative;
    margin-bottom: 30px;
}

.search_wrap form .search_filed input[type="text"] {
    width: 100%;
    border: none;
    background: transparent;
    height: 60px;
    outline: none;
    font-size: 22px;
}

.search_wrap form .search_filed input[type="text"]::placeholder {
    font-size: 22px;
    color: #aaaaaa;
}

.search_wrap form .search_filed input[type="submit"] {
    border: none;
    font-size: 0;
    width: 60px;
    height: 60px;
    background: url('images/assets/search2.png') no-repeat center;
    flex-shrink: 0;
}

.search_wrap .recommand_tap {
    display: flex;
    align-items: flex-start;
    padding-bottom: 100px;
}

.search_wrap .recommand_tap span {
    color: #333;
    font-size: 16px;
    transform: skew(1deg);
    margin-right: 30px;
    position: relative;
    top: 5px;
    white-space: nowrap;
}

.search_wrap .recommand_tap ul {
    display: flex;
    flex-wrap: wrap;
}

.search_wrap .recommand_tap ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}

.search_wrap .recommand_tap ul li:last-child {
    margin-right: 0;
}

.search_wrap .recommand_tap ul li a {
    padding: 5px 15px;
    border: 1px solid #cccccc;
    font-size: 15px;
    border-radius: 100px;
    display: block;
    transition: 0.2s ease-in;
    cursor: pointer;
}

.search_wrap .recommand_tap ul li a:hover {
    background: #e5151f;
    color: #fff;
    border: 1px solid #e5151f;
}

.search_wrap .close_button {
    width: 32px;
    height: 32px;
    background: url('images/assets/close.png') no-repeat center;
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 50px;
}

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

@media screen and (max-width: 1024px) {
    .search_wrap .title {
        font-size:28px;
    }

    .search_wrap form .search_filed input[type="text"]::placeholder {
        font-size: 16px;
    }

    .search_wrap form {
        width: 100%;
        max-width: 90%;
    }
}

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

/* header in search END */
/* header in fullmenu START */
/*상부메뉴백그라운드*/
.full_menu_wrap {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: url('images/assets/fullmenu_bg.png') no-repeat right bottom #232323;
    background-size: 100%;
    height: 100%;
    overflow: auto;
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    user-select: none;
    z-index: 1000;
}

.full_menu_wrap .fullmenu__logo {
    width: 150px;
    height: 50px;
    background: url('images/assets/logoN.png') no-repeat center;
    cursor: pointer;
    position: absolute;
    top: 50px;
    left: 50px;
    background-size: 100%;
}

.full_menu_wrap .full_menu_list {
    padding: 200px 0 240px;
    max-width: 1280px;
    margin: 0 auto;
}

.full_menu_wrap .full_menu_list > ul {
    display: flex;
}

.full_menu_wrap .full_menu_list > ul > li {
    width: 280px;
    margin-right: 40px;
}

.full_menu_wrap .full_menu_list > ul > li:last-child {
    margin-right: 0;
}

.full_menu_wrap .full_menu_list > ul > li > a {
    font-size: 22px;
    font-weight: 900;
    color: #fffcfc;
    /*color: #ffffff;*/
    line-height: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #E91E63;
    display: block;
    margin-bottom: 50px;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li {
    margin-bottom: 20px;
    display: flex;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li:last-child {
    margin-bottom: 0;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li > a {
    font-size: 18px;
    line-height: 1.4;
    position: relative;
    color: #ffffff;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li > a:hover {
    color: #a4a4a4;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li > a::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 2px;
    background: #e9212100;
    bottom: -5px;
    left: 0;
    transition: 0.2s ease-in;
}

.full_menu_wrap .full_menu_list > ul > li > ul > li > a:hover::after {
    width: 100%;
    background: #e5151f;
}

.full_menu_wrap .close_button {
    width: 32px;
    height: 32px;
    background: url('images/assets/close.png') no-repeat center;
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 50px;
    background-size: 100%;
}

@media screen and (max-width: 1440px) {
    .full_menu_wrap .full_menu_list > ul {
        width:100%;
        max-width: 90%;
        margin: 0 auto;
    }

    .full_menu_wrap .full_menu_list > ul > li {
        width: 15%;
        margin-right: 2%;
    }

    .full_menu_wrap .full_menu_list > ul > li:last-child {
        margin-right: 0;
    }
}

@media screen and (max-width: 1024px) {
    .full_menu_wrap .fullmenu__logo {
        left:10%;
    }

    .full_menu_wrap .full_menu_list {
        padding-top: 130px;
    }

    .full_menu_wrap .full_menu_list > ul {
        flex-direction: column;
        align-items: center;
        max-width: 80%;
    }

    .full_menu_wrap .full_menu_list > ul > li {
        width: 100%;
        margin-bottom: 50px;
        margin-right: 0;
    }

    .full_menu_wrap .full_menu_list > ul > li > a {
        margin-bottom: 30px;
    }
}

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

/* header in fullmenu END */
/* header in quickmenu START */
.quick__menu {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    transition: 0.9s ease-out;
}

.quick__item {
    width: 80px;
    height: 80px;
    text-align: center;
    position: relative;
    cursor: pointer;
    display: block;
}

.quick__item span {
    position: absolute;
    bottom: 5px;
    left: 0;
    display: block;
    width: 100%;
    user-select: none;
    color: #fff;
    font-size: 13px;
    transform: skew(1deg);
}

.quick__item.RFQ {
    background: url('images/assets/scroll_up.png') no-repeat center;
    border: 1px solid #2d2d2d00;
    background-color: #ffffff;
}

.quick__item.dn {
    background: url('images/assets/scroll_dn.png') no-repeat center;
    border: 1px solid #2d2d2d00;
    background-color: #ffffff;
    ;}

.quick__item.AS {
    background: url('images/assets/quick_rfq.png') no-repeat center;
    border: 1px solid #999;
    background-color: #282828d4;
}

.quick__item.YOUTUBE {
    background: url('images/assets/quick_youtube.png') no-repeat center;
    border: 1px solid #999;
    background-color: #454545;
}

.quick__item.mc3d {
    background: url('images/assets/3d.png') no-repeat center;
    border: 1px solid #999;
    background-color: #7a7a7ac2;
}

.quick__item.RFQ:hover {
    background-color: #393939e0;
}

.quick__item.dn:hover {
    background-color: #393939e0;
}

.quick__item.AS:hover {
    background-color: #393939e0;
}

.quick__item.YOUTUBE:hover {
    background-color: #393939e0;
}

.quick__item.mc3d:hover {
    background-color: #393939e0;
    ; }

/* header in quickmenu END */
@media screen and (max-width: 1440px) {
    .quick__menu {
        display: none;
    }
}

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

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

/* sub visual START */
.section__sub--main {
    width: 100%;
    height: 520px;
    background: #ef0000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.section__sub--main .text_wrap {
    flex-direction: column;
    margin-bottom: 100px;
    width: 1280px;
}

.section__sub--main .text_wrap h1 {
    color: #fff;
    font-size: 54px;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: 900;
}

.section__sub--main .text_wrap p {
    color: #fff;
    font-size: 20px;
}

.section__sub--main.product__list {
    width: 100%;
    height: 520px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section__sub--main.product__list .text_wrap {
    flex-direction: column;
    margin-bottom: 0;
    width: 1280px;
    text-align: center;
    margin-top: 70px;
}

.section__sub--main.product__list .text_wrap h1 {
    color: #fff;
    font-size: 62px;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 700;
}

.section__sub--main.product__list .text_wrap h1 .small {
    font-size: 42px;
    font-family: 'NanumSquare', sans-serif;
    vertical-align: bottom;
}

.section__sub--main.product__list .text_wrap p {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    transform: skew(0.028deg);
}

.section__sub--main.product__list .title {
    font-size: 40px;
    margin-bottom: 40px;
    line-height: 1;
    text-align: center;
    color: #333;
    padding-top: 100px;
    user-select: none;
}

.section__sub--main.product__list form {
    max-width: 600px;
    margin: 0 auto;
}

.section__sub--main.product__list form .search_filed {
    display: flex;
    position: relative;
    margin-bottom: 20px;
    background: #fff;
    margin-top: 40px;
}

.section__sub--main.product__list form .search_filed input[type="text"] {
    width: 100%;
    border: none;
    background: transparent;
    height: 50px;
    outline: none;
    font-size: 16px;
    padding: 0 20px;
}

.section__sub--main.product__list form .search_filed input[type="text"]::placeholder {
    font-size: 16px;
    color: #ff0000;
    transform: skew(1deg);
}

.section__sub--main.product__list form .search_filed input[type="submit"] {
    border: none;
    font-size: 0;
    width: 50px;
    height: 50px;
    background: url('images/assets/search2.png') no-repeat center;
    flex-shrink: 0;
    background-size: 35%;
}

.section__sub--main.product__list .recommand_tap {
    display: flex;
    align-items: flex-start;
}

.section__sub--main.product__list .recommand_tap span {
    color: #fff;
    font-size: 16px;
    transform: skew(1deg);
    margin-right: 30px;
    position: relative;
    top: 5px;
    white-space: nowrap;
}

.section__sub--main.product__list .recommand_tap ul {
    display: flex;
    flex-wrap: wrap;
}

.section__sub--main.product__list .recommand_tap ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}

.section__sub--main.product__list .recommand_tap ul li:last-child {
    margin-right: 0;
}

.section__sub--main.product__list .recommand_tap ul li a {
    padding: 5px 15px;
    border: 1px solid #cccccc;
    font-size: 15px;
    border-radius: 100px;
    display: block;
    transition: 0.2s ease-in;
    color: #fff;
}

.section__sub--main.product__list .recommand_tap ul li a:hover {
    background: #e5151f;
    color: #fff;
    border: 1px solid #e5151f;
}

.section__sub--main.product__list .close_button {
    width: 32px;
    height: 32px;
    background: url('images/assets/close.png') no-repeat center;
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 50px;
}

.section__sub--main.product__list+.section__sub--tap {
    border-bottom: 1px solid #4f4f4f;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.section__sub--main.product__list+.section__sub--tap .tap_wrap {
    display: flex;
    width: 1580px;
    height: 70px;
}

.section__sub--main.product__list+.section__sub--tap .tap_wrap li {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 10px;
    padding: 0 10px;
    width: 100%;
}

.section__sub--main.product__list+.section__sub--tap .tap_wrap li a {
    color: #ffffff;
    font-size: 16px;
    transform: skew(1deg);
}

.section__sub--main.product__list+.section__sub--tap .tap_wrap li.selected {
    border-bottom: 3px solid #d1020c;
}

.section__sub--main.product__list+.section__sub--tap .tap_wrap li.selected a {
    color: rgb(255 255 255);
}

.section__sub--tap {
    border-bottom: 1px solid #494949;
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.section__sub--tap .tap_wrap {
    display: flex;
    width: 1280px;
    height: 70px;
}

.section__sub--tap .tap_wrap li {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    padding: 0 30px;
}

.section__sub--tap .tap_wrap li a {
    color: #ffffff;
    font-size: 20px;
    transform: skew(1deg);
}

.section__sub--tap .tap_wrap li.selected {
    border-bottom: 3px solid #e5151f;
}

. .temp {
    margin-top: 70px;
}

.line+.temp {
    margin-top: 0;
}

.temp .tap_wrap {
    display: flex;
    width: 1280px;
    height: 70px;
}

.temp .tap_wrap li {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 10px;
    padding: 0 20px;
}

.temp .tap_wrap li a {
    color: #666666;
    font-size: 16px;
    transform: skew(1deg);
}

.temp .tap_wrap li.selected {
    border-bottom: 3px solid #e5151f;
}

.temp .tap_wrap li.selected a {
    color: #222;
}

@media screen and (max-width: 1440px) {
    .section__sub--main.product__list .text_wrap {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .section__sub--main.product__list .text_wrap h1 {
        font-size:48px;
    }

    .section__sub--main.product__list .text_wrap h1 .small {
        font-size: 40px;
        display: block;
    }

    .section__sub--main.product__list .text_wrap p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .section__sub--main.product__list .recommand_tap ul li a {
        font-size:14px;
        padding: 2px 10px;
    }

    .section__sub--main.product__list .text_wrap h1 {
        font-size: 28px;
    }

    .section__sub--main.product__list .text_wrap h1 .small {
        font-size: 20px;
    }

    .section__sub--main.product__list .text_wrap p {
        font-size: 14px;
    }

    .section__sub--main.product__list .text_wrap p br {
        display: none;
    }

    .section__sub--main.product__list form .search_filed input[type="text"] {
        height: 40px;
    }

    .section__sub--main.product__list form .search_filed input[type="text"]::placeholder {
        font-size: 14px;
    }

    .section__sub--main.product__list form .search_filed input[type="submit"] {
        width: 40px;
        height: 40px;
    }

    .section__sub--main.product__list {
        height: 420px;
    }
}

/* Sub global customer Start */
.sub__global01 {
    width: 1600px;
    height: 480px;
    background: url('images/assets/sub_img_global01.jpg') no-repeat center;
    background-size: cover;
    margin: 0 auto 80px;
    display: flex;
    align-items: flex-end;
}

.sub__global01 .text_wrap {
    width: 1280px;
    margin: 0 auto 100px;
    padding-left: 70px;
}

.sub__global01 .text_wrap h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1;
    position: relative;
}

.sub__global01 .text_wrap h2::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 2px;
    background: #e5151f;
    top: 50%;
    left: -69px;
    transform: translateY(-50%);
}

.sub__global01 .text_wrap p {
    color: #fff;
    font-size: 26px;
}

@media screen and (max-width: 1440px) {
    .sub__global01 {
        width:100%;
        max-width: 90%;
    }

    .sub__global01 .text_wrap {
        width: 100%;
        max-width: 90%;
        margin-bottom: 100px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__global01 {
        height:280px;
    }

    .sub__global01 .text_wrap h2 {
        font-size: 28px;
    }

    .sub__global01 .text_wrap p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .section__sub--tap .tap_wrap li {
        padding:0 15px;
    }

    .sub__global01 {
        max-width: 100%;
    }

    .sub__global01 .text_wrap h2::after {
        width: 25px;
        left: -35px;
        top: 25%;
    }

    .sub__global01 .text_wrap h2 {
        line-height: 1.6;
    }

    .sub__global01 .text_wrap {
        padding-left: 35px;
        margin-bottom: 40px;
        width: 80%;
        margin-right: 0;
        margin-left: 5%;
    }

    .section__sub--main.product__list+.section__sub--tap .tap_wrap, .section__sub--tap .tap_wrap {
        height: 55px;
    }
}

/* Sub global customer End */
.sub__certified01 {
    margin-bottom: 80px;
}

.sub__certified01 ul {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.sub__certified01 ul li {
    margin-right: 10px;
    border: 1px solid #dddddd;
    width: 248px;
    text-align: center;
    cursor: pointer;
}

.sub__certified01 ul li h2 a {
    font-size: 18px;
    color: #000000;
    font-weight: 400;
    width: 100%;
    height: 100%;
    display: block;
    padding: 20px 0;
}

.sub__certified01 ul li.selected {
    background: #333333;
}

.sub__certified01 ul li.selected h2 a {
    color: #fff;
    font-weight: 700;
    width: 100%;
    height: 100%;
    display: block;
}

.sub__certified01 ul li:last-child {
    margin-right: 0;
}

/* sub visual END */
@media screen and (max-width: 1440px) {
    .section__sub--main .text_wrap {
        width:90%;
    }
}

@media screen and (max-width: 1024px) {
    .section__sub--tap .tap_wrap {
        overflow: auto;
        width: 100%;
    }

    .section__sub--tap .tap_wrap li {
        flex-shrink: 0;
    }

    .sub__certified01 ul {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 768px) {
    .section__sub--tap {
        margin-bottom:40px;
    }

    .section__sub--main {
        height: 300px;
    }

    .section__sub--main .text_wrap {
        margin-bottom: 50px;
    }

    .section__sub--main .text_wrap h1 {
        font-size: 30px;
    }

    .section__sub--main .text_wrap p {
        font-size: 14px;
    }

    .sub__certified01 {
        margin-bottom: 40px;
    }

    .sub__certified01 ul {
        flex-direction: column;
    }

    .sub__certified01 ul li {
        margin: 0 0 10px 0;
        width: 100%;
    }
}

/* footer START */
footer {
    background: #222222;
}

footer .section__inner {
    display: block;
    margin: 0 auto;
}

.footer__menu, .footer__bottom {
    display: flex;
}

.footer__menu {
    padding: 40px 0 25px;
    border-bottom: 1px solid #3b3b3b;
    margin-bottom: 30px;
    user-select: none;
}

.footer__menu .menu__foot, .footer__menu .menu__sns {
    display: flex;
}

.footer__menu .menu__foot li {
    position: relative;
    padding-right: 15px;
    margin-right: 15px;
    font-size: 20px;
    transform: skew(1deg);
    color: #ffffff;
}

.footer__menu .menu__foot li::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 10px;
    background: #ddd;
}

.footer__menu .menu__foot li:last-child {
    margin: 0;
    padding: 0;
}

.footer__menu .menu__foot li:last-child::after {
    display: none;
}

.footer__menu .menu__sns {
    margin-left: auto;
}

.footer__menu .menu__sns li {
    width: 18px;
    height: 18px;
}

.footer__menu .menu__sns .youtube {
    width: 25px;
    background: url('images/assets/footer_youtube.png') no-repeat center;
    margin-right: 20px;
    position: relative;
}

.footer__menu .menu__sns .insta {
    background: url('images/assets/footer_insta.png') no-repeat center;
    position: relative;
}

.footer__menu .menu__sns .youtube:hover::after {
    content: 'Youtube';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    font-family: 'Dotum', sans-serif;
    padding: 1px 2px;
}

.footer__menu .menu__sns .insta:hover::after {
    content: 'Instagram';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    font-family: 'Dotum', sans-serif;
    padding: 1px 2px;
}

.footer__menu .menu__sns li a {
    display: block;
    width: 00%;
    height: 100%;
}

.footer__bottom {
    width: 100%;
    padding-bottom: 60px;
}

.footer__bottom .footer__logo {
    width: 200px;
    height: 100px;
    background: url('images/assets/logoT.png') no-repeat center;
    margin-right: 50px;
    flex-shrink: 0;
}

.footer__bottom .footer__infor {
    display: flex;
    color: #ffffff;
    flex-wrap: wrap;
    width: 60%;
}

.footer__bottom .footer__infor .footer__infor__item {
    font-size: 14px;
    display: flex;
    transform: skew(1deg);
    margin-right: 20px;
    margin-bottom: 5px;
}

.footer__bottom .footer__infor .footer__infor__item strong {
    margin-right: 6px;
}

.footer__bottom .footer__infor .footer__infor__copy {
    width: 100%;
    display: block;
    margin-top: 30px;
    font-size: 16px;
    color: #ffffff;
}

.footer__bottom .footer__family-site {
    margin-left: auto;
    min-width: 160px;
    flex-shrink: 0;
    user-select: none;
}

.footer__bottom .footer__family-site span {
    padding: 0 0 10px;
    border-bottom: 1px solid #434343;
    width: 100%;
    color: #ffffff;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    padding: 10px;
}

.footer__bottom .footer__family-site span::after {
    position: absolute;
    content: '';
    width: 12px;
    height: 7px;
    background: url('images/assets/family_site_up.png') no-repeat center;
    top: 18px;
    right: 10px;
    transition: 0.2s ease-in-out;
}

.footer__bottom .footer__family-site.open span::after {
    transform: rotate(180deg);
}

.footer__bottom .footer__family-site ul {
    border: 1px solid #434343;
    border-top: 0;
    padding: 5px;
}

.footer__bottom .footer__family-site ul li {
    padding: 5px;
    font-size: 14px;
}

.footer__bottom .footer__family-site ul li a {
    transform: skew(1deg);
    display: block;
}

.menu__foot a {
    color: #ffffff;
}

/*background: url('images/assets/family_site_up.png') no-repeat center;
/* footer END */
@media screen and (max-width: 1440px) {
}

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

@media screen and (max-width: 768px) {
    .footer__menu, .footer__bottom {
        flex-direction: column;
    }

    .footer__bottom .footer__infor {
        width: 100%;
        
    }
    .footer__bottom .footer__infor .footer__infor__item {
    font-size: 14px;
    display: flex;
    transform: skew(1deg);
    margin-right: 20px;
    margin-bottom: 5px;
}

    .footer__logo, .menu__foot {
        margin-bottom: 0px;
    }

    .footer__menu .menu__sns {
        margin-left: 0;
    }

    .footer__bottom .footer__family-site {
        display: none;
    }

    .footer__menu .menu__foot, .footer__menu .menu__sns {
        flex-wrap: wrap;
    }

    .footer__menu .menu__foot li {
        margin-bottom: 10px;
        font-size: 17px;
    }
}

/* common component */
html {
    scrollbar-width: none;
}

body {
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}

/*product칼라*/
.titile__top {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    padding-left: 60px;
    position: relative;
    margin-bottom: 20px;
}

.titile__top::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    height: 2px;
    background: #E91E63;
}

.view_more {
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.5px;
    position: relative;
}

.view_more::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 1px;
    height: 2px;
    background: transparent;
    transition: 0.3s ease-in-out;
    transform-origin: left;
}

.view_more:hover::after {
    background: #e5151f;
    width: 100%;
}

.section__inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.section__inner .section__column {
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .section__inner {
        max-width: 90%;
    }
}

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

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

/* main section PC START (아래로)*/
.section__main--main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    /*background-color:#282828;*/
}

.section__main--main .main__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.section__main--main .main__video video {
    min-width: 100vw;
    min-height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    max-width: none;
}

.section__main--main .main__video:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #101010;
    opacity: .4;
    position: absolute;
    top: 0;
    left: 0;
}

.section__main--main .text_wrap {
    text-align: center;
}

.section__main--main .title {
    font-size: 50px;
    color: #fff;
}

.section__main--main .title span {
    vertical-align: top;
    display: inline-block;
    min-width: 280px;
}

.section__main--main .desc {
    font-size: 50px;
    opacity: 0.8;
    color: #fff;
}

.section__main--main .scroll__down {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    animation: scrollDown 2s ease-in-out infinite;
    color: #fff;
}

.section__main--main .scroll__down span {
    font-size: 14px;
}

.section__main--main .scroll__down span::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 80px;
    background: url('images/assets/scroll_downn.png') no-repeat center;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

/* main section PC END */
/*main text animation START */
.section__main--main .title {
    position: relative;
    bottom: -15px;
    opacity: 0;
    transition: 0.6s ease-in-out;
    transition-property: bottom, opacity;
}

.section__main--main .desc {
    position: relative;
    bottom: -15px;
    opacity: 0;
    transition: 0.6s ease-in-out;
    transition-property: bottom, opacity;
}

.section__main--main.aniPlay .title {
    opacity: 1;
    bottom: 10;
}

.section__main--main.aniPlay .desc {
    opacity: 1;
    bottom: 10;
    transition-delay: 0.5s;
}

@keyframes scrollDown {
    from {
        bottom: 90px;
    }

    50% {
        bottom: 80px;
    }

    70% {
        bottom: 90px;
    }

    to {
        bottom: 90px;
    }
}

/*main text animation END */
@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1024px) {
    .section__main--main.aniPlay .title {
        font-size: 36px;
    }

    .section__main--main .desc {
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .section__main--main.aniPlay .desc br {
        display:none;
    }

    .section__main--main.aniPlay .title {
        font-size: 24px;
    }

    .section__main--main .desc {
        font-size: 22px;
        width: 100%;
        margin: 0 auto;
    }

    .section__main--main .title span {
        min-width: 0;
    }
}

/* product section PC START */
/*바탕화면*/
.section__main--product {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #282828;
    position: relative;
    padding: 150px 0 195px;
    user-select: none;
}

.section__main--product .section__inner .section__column {
    display: flex;
    flex-direction: column;
}

/*타이틀색*/
.section__main--product .title {
    font-size: 40px;
    color: #fff;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 20px;
}

.section__main--product .title mark {
    font-weight: 700;
    color: #ffffff;
    background: #00000000;
    line-height: inherit;
}

.section__main--product .desc {
    font-size: 20px;
    color: #fff;
    margin-bottom: 80px;
}

.section__main--product .left-side ul {
    border-top: 2px solid #e40000;
    max-width: 330px;
}

.section__main--product .left-side ul li {
    height: 60px;
    position: relative;
    padding-left: 30px;
}

/*선택색상*/
.section__main--product .left-side ul li.selected {
    background: #181818;
}

.section__main--product .left-side ul li.selected a {
    color: #ffffff;
}

.section__main--product .left-side ul li.selected::after {
    /*content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    width: 7px;
    height: 12px;
    background: url('images/assets/right_red.png') no-repeat;
    transform: translateY(-50%);*/
}

.section__main--product .left-side ul li:hover {
    background: #515050d9;
}

.section__main--product .left-side ul li a {
    font-size: 20px;
    color: #000000fa;
    height: 100%;
    display: flex;
    align-items: center;
}

.section__main--product::after {
    width: 39%;
    height: 100%;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url('images/assets/product_bg.jpg') no-repeat center;
    background-size: cover;
}

.section__main--product .right-side {
    align-items: center;
}

.section__main--product .right-side.slideIn {
    animation: 0.6s ease-in-out slideIn;
}

.section__main--product .right-side .img_box .swiper-slide {
    min-height: 500px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.section__main--product .right-side .img_box .swiper-slide > a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.section__main--product .img_box {
    position: relative;
    max-width: 799px;
    width: 100%;
}

.section__main--product .img_box:hover .swiper-slide {
    position: relative;
}

/*그림선택원형*/
.section__main--product .img_box:hover .swiper-slide::after {
    content: '';
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background: rgb(0 0 0 / 72%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    background-image: url('images/assets/plus.png');
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.section__main--product .thumb_box_wrpper {
    max-width: 506px;
    width: 100%;
    position: relative;
}

.section__main--product .thumb_box {
    width: 100%;
    position: relative;
}

.section__main--product .thumb_box .swiper-slide {
    display: flex;
    border: 1px solid #7e7d7d;
    height: 0;
    max-width: 110px;
    height: 110px;
    cursor: pointer;
    background-color: rgb(194 194 194 / 0%);
    background-position: center;
    background-size: 140%;
    background-repeat: no-repeat;
}

.section__main--product .thumb_box .swiper-slide:last-child {
    margin-right: 0;
}

.section__main--product .thumb_box .swiper-slide:hover, .section__main--product .thumb_box .swiper-slide-thumb-active {
    border: 2px solid #e91e1e;
}

.section__main--product .thumb_box_wrpper .right_button {
    position: absolute;
    top: 50%;
    right: -37px;
    width: 15px;
    height: 28px;
    background: url('images/assets/right.png') no-repeat center;
    cursor: pointer;
    transform: translateY(-50%);
}

.section__main--product .thumb_box_wrpper .left_button {
    position: absolute;
    top: 50%;
    left: -37px;
    width: 15px;
    height: 28px;
    background: url('images/assets/left.png') no-repeat center;
    cursor: pointer;
    transform: translateY(-50%);
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

@media screen and (max-width: 1024px) {
    .section__main--product .left-side ul li {
        height:35px;
    }

    .section__main--product .left-side ul li a {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .section__main--product .thumb_box .swiper-slide {
        height:76px;
        background-size: cover;
        margin-right: 21px !important;
    }

    .section__main--product .thumb_box_wrpper .right_button {
        right: -14px;
        width: 16px;
        height: 16px;
    }

    .section__main--product .thumb_box_wrpper .left_button {
        left: -14px;
        width: 16px;
        height: 16px;
    }
}

/* product section PC END */
/* product text animation START */
.section__main--product .titile__top::after {
    width: 0;
    transition: 0.4s ease-out;
}

.section__main--product .titile__top span {
    opacity: 0;
    transition: 0.3s ease-out;
    bottom: -5px;
    position: relative;
}

.section__main--product .title {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--product .desc {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--product .left-side ul {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--product .right-side {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--product::after {
    transform-origin: right;
    width: 0;
    transition: 1s ease-in-out;
    opacity: 0;
}

.section__main--product.aniPlay .titile__top::after {
    width: 40px;
}

.section__main--product.aniPlay .titile__top span {
    transition-delay: 0.4s;
    opacity: 1;
    bottom: 0;
}

.section__main--product.aniPlay .title {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.6s;
}

.section__main--product.aniPlay .desc {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.8s;
}

.section__main--product.aniPlay .left-side ul {
    opacity: 1;
    bottom: 0;
    transition-delay: 1s;
}

.section__main--product.aniPlay .right-side {
    opacity: 1;
    bottom: 0;
    transition-delay: 1.2s;
}

.section__main--product.aniPlay::after {
    width: 39%;
    opacity: 1;
}

/* product text animation END */
/* Product Search Start */
.sub__prd_search01 {
    margin: 70px auto 120px;
    padding: 80px 0;
    background: url('images/assets/sub_bg_prd_search.jpg') no-repeat center;
    background-size: cover;
}

.sub__prd_search01 h2 {
    font-size: 45px;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.sub__prd_search01 .filter__wrap {
    width: 1280px;
    margin: 0 auto;
}

.sub__prd_search01 .filter__box {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
}

.sub__prd_search01 .filter__box .step_box {
    background: #fff;
    min-height: 580px;
    display: flex;
    flex-direction: column;
}

.sub__prd_search01 .filter__box .step_box .step_box__header {
    background: #333333;
    color: #fff;
    padding: 0 0 0 30px;
    height: 70px;
    display: flex;
    align-items: center;
}

.sub__prd_search01 .filter__box .step_box .step_box__header p {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}

.sub__prd_search01 .filter__box .step_box .step_box__header p span {
    font-size: 14px;
    color: #fff;
    opacity: 0.6;
    font-weight: 400;
    margin-right: 13px;
}

.sub__prd_search01 .filter__box .step_box .step_box__body {
    padding: 30px 0 0 0;
}

.sub__prd_search01 .filter__box .step_box01 {
    width: 290px;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__header {
    border-right: 1px solid #5c5c5c;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    border-right: 1px solid #e9e9e9;
    flex: 1;
    align-content: flex-start;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body .step01_item {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body input {
    display: none;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body label {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body label .icon_box {
    border: 1px solid #ddd;
    width: 110px;
    height: 100px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 25px;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body label p {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body input[type="checkbox"]:checked+label .icon_box {
    border: 1px solid #e5151f;
}

.sub__prd_search01 .filter__box .step_box01 .step_box__body input[type="checkbox"]:checked+label p {
    color: #333;
    font-weight: 700;
}

.sub__prd_search01 .filter__box .step_box02 {
    flex: 1;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body {
    flex: 1;
    display: flex;
    padding: 0;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type {
    width: 240px;
    background: #f8f8f8;
    border-right: 1px solid #ddd;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul {
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li {
    height: 72px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #aaa;
    border-bottom: 1px solid #ddd;
    letter-spacing: -1px;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.active {
    background: #dddddd;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.permit {
    color: #333;
    font-weight: 700;
    position: relative;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.permit::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('/images/assets/filter_right.png') no-repeat center;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li:hover {
    background: #f1f1f1;
    cursor: pointer;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.active:hover {
    background: #cccccc;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.permit.active.selected {
    color: #e5151f;
    font-weight: 700;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type ul li.permit.selected {
    color: #e5151f;
    font-weight: 700;
}

.sub__prd_search01 .filter__box .step_box02 .step_box__body .type_output {
    flex: 1;
    padding: 30px;
    overflow: hidden;
}

.sub__prd_search01 .filter__box .icon_box img {
    pointer-events: none;
}

#blister_filter {
    display: none;
}

#cartoner_filter {
    display: none;
}

#wrapping_filter {
    display: none;
}

#packer_filter {
    display: none;
}

.type_section > p , .output_section > p {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    margin-right: 15px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item input {
    display: none;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item input[type="checkbox"]:checked+label .icon_box {
    border: 1px solid #e5151f;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item input[type="checkbox"]:checked+label p {
    color: #333;
    font-weight: 600;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item .icon_box {
    border: 1px solid #ddd;
    width: 100px;
    height: 80px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap .step02_type_item p {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item {
    width: auto;
    display: block;
    margin: 0;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item input {
    display: none;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item label {
    position: relative;
    padding-left: 30px;
    width: 210px;
    margin-bottom: 15px;
    cursor: pointer;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item label p {
    transform: skew(0.028deg);
    font-size: 14px;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item input[type="checkbox"]:checked+label::after {
    background: url('/images/assets/checked.jpg') no-repeat center;
    border: 0;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item input[type="checkbox"]:checked+label p {
    color: #333;
    font-weight: 400;
}

.sub__prd_search01 .filter__box .step_box02 .type_section.case .select_wrap .step02_type_item p {
    text-align: left;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap {
    display: flex;
    flex-wrap: wrap;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item input {
    display: none;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item label {
    position: relative;
    padding-left: 30px;
    width: 210px;
    margin-bottom: 15px;
    cursor: pointer;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item label p {
    transform: skew(0.028deg);
    font-size: 14px;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item input[type="checkbox"]:checked+label::after {
    background: url('/images/assets/checked.jpg') no-repeat center;
    border: 0;
}

.sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap .step02_type_item input[type="checkbox"]:checked+label p {
    color: #333;
    font-weight: 400;
}

.filter__bottom {
    display: flex;
    justify-content: center;
    position: relative;
}

.filter__bottom input[type="submit"] {
    width: 220px;
    height: 70px;
    background: #e5151f;
    color: #fff;
    font-size: 18px;
    border: 0;
    box-shadow: 0;
}

.filter__bottom button {
    font-size: 14px;
    color: #666;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    padding-left: 28px;
}

.filter__bottom button::after {
    width: 18px;
    height: 16px;
    background: url('images/assets/init.png') no-repeat center;
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 1440px) {
    .sub__prd_search01 .filter__wrap {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__prd_search01 h2 {
        font-size:28px;
    }

    .sub__prd_search01 .filter__box {
        flex-wrap: wrap;
    }

    .sub__prd_search01 .filter__box .step_box01 {
        width: 100%;
        min-height: 0;
    }

    .sub__prd_search01 .filter__box .step_box02 {
        width: 100%;
    }

    .sub__prd_search01 .filter__box .step_box02 .step_box__body {
        flex-wrap: wrap;
    }

    .sub__prd_search01 .filter__box .step_box02 .step_box__body .packaging_type {
        width: 100%;
    }

    .sub__prd_search01 .filter__box .step_box02 .step_box__body .type_output {
        width: 100%;
    }

    .sub__prd_search01 .filter__box .step_box02 .type_section .select_wrap, .sub__prd_search01 .filter__box .step_box02 .output_section .select_wrap {
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .sub__prd_search01 {
        margin-top:45px;
    }

    .sub__prd_search01 .filter__box {
        margin-bottom: 50px;
    }

    .sub__prd_search01 .filter__box .step_box01 .step_box__body .step01_item {
        width: 130px
    }

    .filter__bottom button {
        top: -30px;
    }
}

.sub__prd_search02 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__prd_search02 h2 {
    font-size: 40px;
    color: #333;
    margin-bottom: 50px;
    text-align: center;
}

.sub__prd_search02 h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    text-align: left;
}

.sub__prd_search02 p {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    text-align: left;
    font-weight: bold;
}

.sub__prd_search02 ul {
    display: flex;
    justify-content: space-between;
}

.sub__prd_search02 ul li {
    width: 290px;
}

.sub__prd_search02 ul li:not(4) {
    margin-right: 40px;
}

.sub__prd_search02 > ul > li .swiper-container {
    border: 1px solid #ddd;
}

.sub__prd_search02 > ul > li .swiper-container > ul {
    width: 100%;
    height: 364px;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li {
    color: #ccc;
    font-size: 15px;
    transform: skew(0.028deg);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .thumb_box {
    margin-bottom: 20px;
    height: 150px;
    padding: 0 10px;
    position: relative;
    width: 100%;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .thumb_box a {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .text_box .infor_name {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .text_box .infor_desc {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    margin-bottom: 10px;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .text_box .infor_output {
    font-size: 14px;
    color: #666;
}

.sub__prd_search02 > ul > li .swiper-container > ul > li .text_box .infor_output span {
    color: #e5151f;
    border: 1px solid #e5151f;
    border-radius: 100px;
    padding: 0 5px;
    margin-right: 10px;
}

.sub__prd_search02 > ul > li .swiper-container .handler {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__prd_search02 > ul > li .swiper-container .nextBtn {
    background: url(images/assets/next.png) no-repeat center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 0px;
    pointer-events: all;
}

.sub__prd_search02 > ul > li .swiper-container .prevBtn {
    background: url(images/assets/prev.png) no-repeat center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-left: 0px;
    pointer-events: all;
}

.sub__prd_search02 .view__bottom {
    width: 1280px;
    margin: 30px auto 150px;
    display: flex;
    justify-content: center;
}

.sub__prd_search02 .view__bottom .view__button {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 50px;
    cursor: pointer;
}

.sub__prd_search02 .view__bottom .view__button.button_rfq {
    background: #e5151f;
    color: #fff;
}

@media screen and (max-width: 1440px) {
    .sub__prd_search02 {
        width:100%;
        max-width: 90%;
    }

    .sub__prd_search02 .view__bottom {
        width: 100%;
        max-width: 90%;
    }

    .sub__prd_search02 > ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sub__prd_search02 > ul > li {
        margin: 0 5px 30px;
    }

    .sub__prd_search02 > ul > li {
        width: 48%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__prd_search02 h2 {
        font-size:28px;
    }
}

@media screen and (max-width: 768px) {
    .sub__prd_search02 > ul > li {
        width:100%;
    }
}

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

@media screen and (max-width: 1024px) {
    .section__main--product::after {
        display: none;
    }

    /* .section__main--product .section__inner .section__column.right-side {display:none;} */
    .section__main--product .left-side ul {
        max-width: none;
    }

    .section__main--product .section__inner {
        display: block;
    }

    .section__main--product .right-side .img_box .swiper-slide {
        min-height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .section__main--product {
        padding: 10px 0 50px;
    }

    .section__main--product .title {
        font-size: 36px;
    }

    .section__main--product .desc {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .section__main--product .left-side ul li {
        padding-left: 10px;
    }
}

/* Product Search End */
/* Product h-pac Start */
.prd_hpac01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 120px;
}

.prd_hpac01 h3 {
    font-size: 50px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.prd_hpac01 p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    transform: skew(0.028deg);
    margin-bottom: 60px;
}

.prd_hpac01 .img_box {
    display: flex;
    align-items: flex-start;
}

.prd_hpac01 .img_box img {
    height: auto;
}

.prd_hpac02 {
    width: 100%;
    padding: 120px 0 0;
    margin: 0 auto;
    padding-bottom: 150px;
    background: url(images/assets/hpac_bg.jpg) no-repeat top;
}

.prd_hpac02 .inner_wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.prd_hpac02 .inner_wrap .hpac_infor_block {
    display: flex;
    margin-bottom: 120px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block:last-child {
    margin-bottom: 0;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column {
    width: 100%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column:first-child {
    width: 25%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column h4 {
    font-size: 24px;
    font-weight: 900;
    color: #333;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_list {
    margin-bottom: 60px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_list li {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    padding-left: 35px;
    transform: skew(0.028deg);
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_list li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/assets/check.png);
    background-size: 10px 7px;
    background-position: 5px 7px;
    background-repeat: no-repeat;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon {
    display: flex;
    justify-content: space-between;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block {
    width: 100%;
    text-align: center;
    position: relative;
}

.prd_hpac02 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block::after {
    content: '';
    width: 1px;
    height: 100%;
    background: #ddd;
    position: absolute;
    right: 0;
    top: 0;
}

.prd_hpac02 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block:last-child::after {
    display: none;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon_title {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 20px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block p {
    font-size: 16px;
    transform: skew(0.028deg);
    color: #666;
    line-height: 1.8;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon {
    width: 80px;
    height: 80px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon01 {
    background-image: url(images/assets/hpac01.svg);
    margin: 0 auto 20px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon02 {
    background-image: url(images/assets/hpac02.svg);
    margin: 0 auto 20px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon03 {
    background-image: url(images/assets/hpac03.svg);
    margin: 0 auto 20px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
    background-image: url(images/assets/hpac04.svg);
    margin: 40px auto 20px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: #333;
    background-size: 40%;
    background-position: 50% 40%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 .icon_title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 ~ ul {
    padding-top: 40px;
    max-width: 200px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
    background-image: url(images/assets/hpac05.svg);
    margin: 0 auto 20px;
    width: 280px;
    height: 280px;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    background-size: 30%;
    background-position: 50% 43%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 .icon_title {
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 ~ ul {
    max-width: 300px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
    background-image: url(images/assets/hpac06.svg);
    margin: 40px auto 20px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: #e5151f;
    background-size: 40%;
    background-position: 50% 40%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 .icon_title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 ~ ul {
    padding-top: 40px;
    max-width: 200px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul {
    text-align: left;
    margin: 0 auto;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul li {
    font-size: 16px;
    color: #666;
    transform: skew(0.028deg);
    margin-bottom: 15px;
    padding-left: 13px;
    position: relative;
    white-space: nowrap;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul li::after {
    content: '';
    width: 3px;
    height: 3px;
    background: #e5151f;
    position: absolute;
    top: 9px;
    left: 0;
    border-radius: 50%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block {
    border: 1px solid #ddd;
    max-width: 290px;
    width: 100%;
    background: #fff;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_title {
    padding: 20px 0;
    text-align: center;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_title p {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_title.f_red {
    background: #e5151f;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_title.f_black {
    background: #333;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_list {
    text-align: left;
    margin: 0 30px;
    border-top: 1px solid #ddd;
    padding-top: 30px;
    padding-bottom: 50px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_list li {
    font-size: 16px;
    color: #666;
    transform: skew(0.028deg);
    margin-bottom: 15px;
    padding-left: 13px;
    position: relative;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_list li::after {
    content: '';
    width: 3px;
    height: 3px;
    background: #e5151f;
    position: absolute;
    top: 9px;
    left: 0;
    border-radius: 50%;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block.full-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block.full-img .function_content {
    text-align: center;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block.full-img .function_content h5 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block.full-img .function_content p {
    font-size: 13px;
    color: #666;
    transform: skew(0.028deg);
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .function_img_box {
    position: relative;
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .addText-kor::after {
    content: '유지보수';
    position: absolute;
    bottom: 10%;
    left: 50%;
    font-size: 15px;
    color: #666;
    transform: translateX(-50%) skew(0.028deg);
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .addText-en::after {
    content: 'Maintenance';
    position: absolute;
    bottom: 10%;
    left: 50%;
    font-size: 15px;
    color: #666;
    transform: translateX(-50%) skew(0.028deg);
}

.prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block .addText-china::after {
    content: '维护';
    position: absolute;
    bottom: 10%;
    left: 50%;
    font-size: 15px;
    color: #666;
    transform: translateX(-50%) skew(0.028deg);
}

@media screen and (max-width: 1440px) {
    .prd_hpac01 {
        width:90%;
    }

    .prd_hpac02 .inner_wrap {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .prd_hpac01 h3 {
        font-size:28px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block {
        display: block;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column:first-child {
        margin-bottom: 30px;
        width: 100%;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
        width: 200px;
        height: 200px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
        margin: 0 auto 20px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
        margin: 0 auto 20px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 ~ ul {
        padding-top: 40px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block {
        width: 100%;
        margin: 0 auto 30px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .function_block.full-img {
        padding: 60px 0;
    }
}

@media screen and (max-width: 768px) {
    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon {
        display:block;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block {
        margin-bottom: 50px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block::after {
        display: none;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
        width: 300px;
        height: 300px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
        width: 300px;
        height: 300px;
    }

    .prd_hpac02 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
        width: 300px;
        height: 300px;
    }
}

/* Product h-pac End */
/* Product track Start */
.prd_track01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 120px;
}

.prd_track01 h3 {
    font-size: 50px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.prd_track01 p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    transform: skew(0.028deg);
    margin-bottom: 60px;
}

.prd_track01 .img_box {
    display: flex;
    align-items: flex-start;
}

.prd_track02 {
    width: 1280px;
    margin: 70px auto 170px;
    padding-top: 0;
    position: relative;
}

.prd_track02 .img_box {
    position: relative;
    transition: 0.2s ease-in-out;
}

.prd_track02.on > .img_box {
    opacity: 0.4;
}

.prd_track02 .img_box .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: rgba(229,63,71,1);
    animation: flash 1.3s ease-in-out infinite;
    box-shadow: 0 0 0 5px rgba(229,63,71.3);
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: 'Dotum', sans-serif;
    background-image: url('/images/assets/plus.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

.prd_track02 .img_box .dot:hover {
    animation: none;
    box-shadow: none;
}

.dot3d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgb(21 21 21 / 87%);
    animation: flash 1.3s ease-in-out infinite;
    box-shadow: 0 0 0 5px #FF5722;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: 'Dotum', sans-serif;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

.dot3d:hover {
    animation: none;
    box-shadow: none;
}

.dot3dpn {
    position: absolute;
    bottom: 185px;
    left: -35px;
    transform: translate3d(-50%, -50%, 0);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #282828;
    animation: flash 1.3s ease-in-out infinite;
    box-shadow: 0 0 0 5px #E91E63;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 10;
    font-family: 'Dotum', sans-serif;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

.dot3dpn:hover {
    animation: none;
    box-shadow: none;
}

.prd_track02 .prd-view__modal_container {
    display: none;
}

.prd_track02.on .prd-view__modal_container {
    position: absolute;
    display: flex;
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
    border: 1px solid #333;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
    background: #fff;
}

.prd_track02.on .prd-view__modal_container .swiper-container {
    width: 360px;
    position: relative;
}

.prd_track02.on .prd-view__modal_container .modal__content {
    width: 360px;
    height: 480px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.prd_track02.on .prd-view__modal_container .modal__content .img_box {
    min-height: 240px;
    display: flex;
}

.prd_track02.on .prd-view__modal_container .modal__content .text_box {
    padding: 30px;
}

.prd_track02.on .prd-view__modal_container .modal__content .text_box .modal_title {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 20px;
}

.prd_track02.on .prd-view__modal_container .modal__content .text_box .modal_desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    transform: skew(0.028deg);
}

.prd_track02.on .prd-view__modal_container .modal__close {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('images/assets/close_white.png') no-repeat center;
    background-size: 16px;
    background-color: #333;
    cursor: pointer;
    top: -1px;
    right: -40px;
}

.prd_track02.on .prd-view__modal_container .swiper-container .swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
    width: 30px;
    height: 4px;
    background: #ddd;
    opacity: 1;
}

.prd_track02.on .prd-view__modal_container .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #e5151f;
}

.prd_track02.on .prd-view__modal_container .swiper-container .handler {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.prd_track02.on .prd-view__modal_container .swiper-container .handler .prev {
    background: url('images/assets/prev.png') no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.prd_track02.on .prd-view__modal_container .swiper-container .handler .next {
    background: url('images/assets/next.png') no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.prd_track03 {
    width: 100%;
    padding: 120px 0 0;
    margin: 0 auto;
    padding-bottom: 150px;
    background: url(images/assets/track_bottom_bg.jpg) no-repeat top;
}

.prd_track03 .inner_wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.prd_track03 .inner_wrap .hpac_infor_block {
    display: flex;
    margin-bottom: 120px;
}

.prd_track03 .inner_wrap .hpac_infor_block:last-child {
    margin-bottom: 0;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column {
    width: 100%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column:first-child {
    width: 25%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column h4 {
    font-size: 24px;
    font-weight: 900;
    color: #333;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_list {
    margin-bottom: 60px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_list li {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    padding-left: 35px;
    transform: skew(0.028deg);
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_list li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/assets/check.png);
    background-size: 10px 7px;
    background-position: 5px 7px;
    background-repeat: no-repeat;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon {
    display: flex;
    justify-content: space-between;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block {
    width: 100%;
    text-align: center;
    position: relative;
}

.prd_track03 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block::after {
    content: '';
    width: 1px;
    height: 100%;
    background: #ddd;
    position: absolute;
    right: 0;
    top: 0;
}

.prd_track03 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block:last-child::after {
    display: none;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon_title {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 20px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block p {
    font-size: 16px;
    transform: skew(0.028deg);
    color: #666;
    line-height: 1.8;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon {
    width: 80px;
    height: 80px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon01 {
    background-image: url(images/assets/hpac01.svg);
    margin: 0 auto 20px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon02 {
    background-image: url(images/assets/hpac02.svg);
    margin: 0 auto 20px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon03 {
    background-image: url(images/assets/hpac03.svg);
    margin: 0 auto 20px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
    background-image: url(images/assets/hpac04.svg);
    margin: 40px auto 20px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: #333;
    background-size: 40%;
    background-position: 50% 40%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 .icon_title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 ~ ul {
    padding-top: 40px;
    max-width: 200px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
    background-image: url(images/assets/hpac05.svg);
    margin: 0 auto 20px;
    width: 280px;
    height: 280px;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    background-size: 30%;
    background-position: 50% 43%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 .icon_title {
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 ~ ul {
    max-width: 300px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
    background-image: url(images/assets/hpac06.svg);
    margin: 40px auto 20px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: #e5151f;
    background-size: 40%;
    background-position: 50% 40%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 .icon_title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,60%);
    width: 100%;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 ~ ul {
    padding-top: 40px;
    max-width: 200px;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul {
    text-align: left;
    margin: 0 auto;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul li {
    font-size: 16px;
    color: #666;
    transform: skew(0.028deg);
    margin-bottom: 15px;
    padding-left: 13px;
    position: relative;
    white-space: nowrap;
}

.prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block > ul li::after {
    content: '';
    width: 3px;
    height: 3px;
    background: #e5151f;
    position: absolute;
    top: 9px;
    left: 0;
    border-radius: 50%;
}

@media screen and (max-width: 1440px) {
    .prd_track01 {
        width:90%;
    }

    .prd_track02 {
        width: 100%;
        max-width: 90%;
    }

    .prd_track02.on .prd-view__modal_container {
        position: fixed;
        z-index: 995;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        width: 90%;
        max-width: 360px;
    }

    .prd_track02.on .prd-view__modal_container .modal__close {
        top: -41px;
        right: -1px;
    }

    .prd_track03 .inner_wrap {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .prd_track01 h3 {
        font-size:28px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block {
        display: block;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column:first-child {
        margin-bottom: 30px;
        width: 100%;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
        width: 200px;
        height: 200px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
        margin: 0 auto 20px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
        margin: 0 auto 20px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 ~ ul {
        padding-top: 40px;
    }
}

@media screen and (max-width: 768px) {
    .prd_track02 {
        margin:45px auto 0;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon {
        display: block;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block {
        margin-bottom: 50px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block:first-child .hpac_column .hpac_icon .icon_block::after {
        display: none;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon04 {
        width: 300px;
        height: 300px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon05 {
        width: 300px;
        height: 300px;
    }

    .prd_track03 .inner_wrap .hpac_infor_block .hpac_column .hpac_icon .icon_block .icon.hpac_icon06 {
        width: 300px;
        height: 300px;
    }
}

@keyframes flash {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255,0,0,0.3);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(255,0,0,0.3);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(255,0,0,0);
    }
}

/* Product track End */
/* Product Feeding Start */
.sub__feeding {
    margin: 0 auto 0px;
    overflow: hidden;
}

.sub__feeding .sub_top_title {
    max-width: 1280px;
    margin: 0 auto 100px;
}

.sub__feeding .sub_top_title h2 {
    text-align: center;
    font-size: 62px;
    color: #333;
    font-weight: 700;
    margin-bottom: 60px;
}

.sub__feeding .sub_top_title ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.sub__feeding .sub_top_title ul li {
    font-size: 18px;
    color: #999;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16%;
    height: 70px;
    margin: 10px;
    min-width: 190px;
}

.sub__feeding .sub_top_title ul li:hover {
    background: #efefef;
}

.sub__feeding .sub_top_title ul li.selected {
    background: #333;
    color: #fff;
    font-weight: 700;
}

.sub__feeding .sub_top_title ul li.selected a {
    color: #fff;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.sub__feeding .sub_content {
    max-width: 1280px;
    margin: 0 auto 120px;
}

.sub__feeding .sub_content h3 {
    font-size: 50px;
    color: #222;
    font-weight: 700;
    margin-bottom: 50px;
}

.sub__feeding .sub_content .infor_container {
    display: flex;
}

.sub__feeding .sub_content .infor_container .infor_column {
    width: 100%;
}

.sub__feeding .sub_content .infor_container .infor_column.infor_column_left .slide_wrap {
    max-width: 580px;
}

.sub__feeding .sub_content .infor_container .infor_column.infor_column_left .slide_wrap .swiper-slide {
    display: flex;
    margin-bottom: 30px;
}

.sub__feeding .sub_content .infor_container .infor_column:last-child .text_box:first-child {
    margin: 0 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 54px;
}

.sub__feeding .sub_content .infor_container .infor_column .text_box h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.sub__feeding .sub_content .infor_container .infor_column .text_box p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    transform: skew(0.028deg);
}

.sub__feeding .sub_content .infor_container .infor_column .media_wrap {
    display: flex;
    cursor: pointer;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box {
    margin: 0 20px;
    border-bottom: 1px solid #ddd;
    padding: 60px 0 54px;
    display: flex;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box h4 {
    color: #333;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 30px;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col {
    width: 100%;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col ul {
    display: flex;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col ul li {
    text-align: center;
    margin-right: 20px;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col ul li .icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col ul li p {
    font-size: 15px;
    color: #333;
    transform: skew(0.028deg);
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box {
    margin: 0 20px;
    padding: 80px 0 0;
    position: relative;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box h4 {
    color: #333;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 30px;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box .slider_wrap {
    display: flex;
    justify-content: center;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box .swiper-container {
    max-width: 540px;
    padding-bottom: 54px;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box .swiper-slide {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    align-items: center;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box .swiper-slide .img_box {
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.sub__feeding .sub_content .infor_container .infor_column .prd_type_box .swiper-slide .text_box {
    font-size: 15px;
    color: #333;
    transform: skew(0.028deg);
    text-align: center;
}

.sub__feeding .sub_content .infor_container .swiper-container .swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%;
    border-radius: 0;
}

.sub__feeding .sub_content .infor_container .swiper-container .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
    left: 0;
    top: 0;
    border-radius: 0;
}

.sub__feeding .sub_content .infor_container .swiper-container .handler {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__feeding .sub_content .infor_container .swiper-container .nextBtn {
    background: url(images/assets/next.png) no-repeat center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 0px;
    pointer-events: all;
}

.sub__feeding .sub_content .infor_container .swiper-container .prevBtn {
    background: url(images/assets/prev.png) no-repeat center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-left: 0px;
    pointer-events: all;
}

.sub__feeding .sub_content .prd_type_box .handler {
    position: absolute;
    top: calc(50% + 55px);
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__feeding .sub_content .prd_type_box .nextBtn {
    background: url(images/assets/right.png) no-repeat center right;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-right: 1px;
    pointer-events: all;
    background-size: 12px;
}

.sub__feeding .sub_content .prd_type_box .prevBtn {
    background: url(images/assets/left.png) no-repeat center left;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-left: 1px;
    pointer-events: all;
    background-size: 12px;
}

.sub__feeding .sub_recommended {
    background: url('images/assets/feeding_bg.jpg') no-repeat center;
    background-size: cover;
    width: 100%;
    padding: 100px 0;
    box-sizing: border-box;
    margin-bottom: 100px;
    position: relative;
}

.sub__feeding .sub_recommended .swiper-container {
    max-width: 1280px;
}

.sub__feeding .sub_recommended h3 {
    width: 1280px;
    margin: 0 auto 30px;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

.sub__feeding .sub_recommended ul {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
}

.sub__feeding .sub_recommended ul li {
    width: 290px;
    height: 365px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    padding: 30px 0 50px;
    box-sizing: border-box;
    border: 2px solid #fff;
}

.sub__feeding .sub_recommended ul li:hover {
    border: 2px solid #e5151f;
    box-sizing: border-box;
}

.sub__feeding .sub_recommended ul li .thumb_box {
    margin-bottom: 20px;
    height: 150px;
    padding: 0 10px;
    position: relative;
}

.sub__feeding .sub_recommended ul li .thumb_box a {
    display: block;
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.sub__feeding .sub_recommended ul li .thumb_box img {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.sub__feeding .sub_recommended ul li .text_box .infor_name {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub__feeding .sub_recommended ul li .text_box .infor_desc {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    margin-bottom: 10px;
}

.sub__feeding .sub_recommended ul li .text_box .infor_output {
    font-size: 14px;
    color: #666;
}

.sub__feeding .sub_recommended ul li .text_box .infor_output span {
    color: #e5151f;
    border: 1px solid #e5151f;
    border-radius: 100px;
    padding: 0 5px;
    margin-right: 10px;
}

.sub__feeding .sub_recommended .handler {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__feeding .sub_recommended .nextBtn {
    background: url(images/assets/right.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-right: 1px;
    pointer-events: all;
}

.sub__feeding .sub_recommended .prevBtn {
    background: url(images/assets/left.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-left: 1px;
    pointer-events: all;
}

.sub__feeding .button_area {
    width: 1280px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: center;
}

.sub__feeding .button_area .sub__button {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 50px;
    margin-right: 12px;
    cursor: pointer;
}

.sub__feeding .button_area .sub__button:last-child {
    margin-right: 0;
}

.sub__feeding .button_area .sub__button.button_rfq {
    border: 2px solid #ddd;
    color: #666;
    background: transparent;
}

.sub__feeding .button_area .sub__button.button_download {
    background: #e5151f;
    color: #fff;
}

.sub__feeding .button_area .sub__button.button_list {
    background: #666;
    color: #fff;
}

.sub__feeding .button_area .down_marker {
    background: url(images/assets/download.png) no-repeat center;
    width: 16px;
    height: 14px;
    margin-left: 10px;
}

@media screen and (max-width: 1440px) {
    .sub__feeding .sub_content {
        width:100%;
        max-width: 90%;
        margin: 0 auto 60px;
    }

    .sub__feeding .sub_recommended .inner_wrap {
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
    }

    .sub__feeding .button_area {
        width: 100%;
        max-width: 90%;
        margin: 0 auto 75px;
    }

    .sub__feeding .sub_top_title h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .sub__feeding .sub_content h3 {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .sub__feeding .sub_top_title {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__feeding {
        margin-bottom:75px;
    }

    .sub__feeding .sub_content .infor_container {
        display: block;
    }

    .sub__feeding .sub_content .infor_container .infor_column .icon_box {
        display: block;
    }

    .sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col ul {
        justify-content: space-around;
    }

    .sub__feeding .sub_content .infor_container .infor_column .icon_box .icon_box_col {
        margin-bottom: 40px;
    }

    .sub__feeding .sub_content .infor_container .infor_column {
        margin-bottom: 40px;
    }

    .sub__feeding .sub_recommended .nextBtn {
        width: 34px;
        height: 34px;
    }

    .sub__feeding .sub_recommended .prevBtn {
        width: 34px;
        height: 34px;
    }
}

@media screen and (max-width: 768px) {
    .sub__feeding .sub_top_title ul li {
        min-width:160px;
    }

    .sub__feeding .button_area {
        display: block
    }

    .sub__feeding .button_area .sub__button {
        margin: 0 auto 20px;
    }

    .dot3dpn {
        bottom: 40px;
        left: 40px;
        background: #282828;
        color: #fff;
    }
}

/* Protduct Feeding End */
/* aboutus section PC START */
.section__main--aboutus {
    max-height: 600px;
    padding: 200px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    user-select: none;
}

.section__main--aboutus .titile__top {
    color: #fff;
}

.section__main--aboutus .section__inner {
    justify-content: flex-start;
}

.section__main--aboutus .section__inner .section__column {
    width: 100%;
}

.section__main--aboutus .section__inner .section__column .content {
    display: block;
}

.section__main--aboutus .title {
    font-size: 20px;
    margin-bottom: 60px;
}

/* aboutus section PC END */
/* aboutus text animation START */
.section__main--aboutus .titile__top::after {
    width: 0;
    transition: 0.4s ease-out;
}

.section__main--aboutus .titile__top span {
    opacity: 0;
    transition: 0.3s ease-out;
    bottom: -5px;
    position: relative;
}

.section__main--aboutus .title {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--aboutus .view_more {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--aboutus.aniPlay .titile__top::after {
    width: 40px;
}

.section__main--aboutus.aniPlay .titile__top span {
    transition-delay: 0.4s;
    opacity: 1;
    bottom: 0;
}

.section__main--aboutus.aniPlay .title {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.6s;
}

.section__main--aboutus.aniPlay .view_more {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.8s;
}

/* aboutus text animation END */
@media screen and (max-width: 1440px) {
}

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

@media screen and (max-width: 768px) {
    .section__main--aboutus {
        padding: 100px 0;
    }

    .section__main--aboutus .title {
        font-size: 15px;
    }
}

/* media section PC START */
.section__main--media {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
    position: relative;
    height: auto;
    padding: 150px 0 190px;
}

.section__main--media .section__header {
    width: 100%;
    margin-bottom: 50px;
    user-select: none;
}

.section__main--media .section__header .title__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section__main--media .section__header .title {
    font-size: 45px;
    font-weight: 900;
    color: #222;
}

.section__main--media .section__header .view_more {
    color: #222;
}

/* board common */
.section__main--media .section__board {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 600px;
    z-index: 2;
}

.section__main--media .section__board li {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    max-width: 620px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #dddddd;
    margin-left: 40px;
}

.section__main--media .section__board li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section__main--media .section__board .img_box {
    background-size: cover;
    width: 260px;
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-right: 40px;
    position: relative;
    z-index: 1;
    border: 1px solid #ddd;
}

.section__main--media .section__board .img_box img {
    display: none;
}

.section__main--media .section__board .text_box {
    color: #222;
}

.section__main--media .section__board .text_box .category {
    color: #e5151f;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    font-weight: 400;
}

.section__main--media .section__board .text_box .title {
    color: #222;
    font-size: 20px;
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 700;
    position: relative;
}

.section__main--media .section__board .text_box .title::after {
    width: 1px;
    background: transparent;
    height: 1px;
    position: absolute;
    content: '';
    transition: 0.2s ease-in-out;
    bottom: 0;
    left: 0;
}

.section__main--media .section__board .text_box:hover .title::after {
    width: 100%;
    background: #333;
}

.section__main--media .section__board .text_box .summary {
    color: #666;
    font-size: 15px;
    margin-bottom: 15px;
    display: block;
    transform: skew(1deg);
    word-break: break-word;
}

.section__main--media .section__board .text_box .date {
    font-size: 14px;
    color: #999;
    display: block;
}

/* board first */
.section__main--media .section__board li:first-child {
    max-width: 620px;
    height: 580px;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}

.section__main--media .section__board li:first-child .img_box {
    width: 100%;
    height: 100%;
    margin: 0;
}

.section__main--media .section__board li:first-child .img_box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/assets/board_bg.png') no-repeat center;
    background-size: cover;
}

.section__main--media .section__board li:first-child .text_box {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 50px;
    z-index: 1;
}

.section__main--media .section__board li:first-child .text_box .category {
    color: #fff;
}

.section__main--media .section__board li:first-child .text_box .title {
    color: #fff;
    font-size: 30px;
}

.section__main--media .section__board li:first-child .text_box:hover .title::after {
    background: #fff;
}

.section__main--media .section__board li:first-child .text_box .summary {
    color: #fff;
    letter-spacing: -0.2px;
}

.section__main--media .section__board li:first-child .text_box .date {
    color: #fff;
}

/* bg text */
.section__main--media .bg__text {
    font-size: 180px;
    font-weight: 700;
    color: #f8f8f8;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 0;
    user-select: none;
    letter-spacing: -10px;
}

.section__main--media .bg__text--packaging {
    position: absolute;
    padding-right: 1050px;
    padding-top: 220px;
}

.section__main--media .bg__text--system {
    position: absolute;
    padding-left: 1300px;
    padding-top: 700px;
}

/* media section PC END */
@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1024px) {
    .section__main--media .section__header .title__wrap {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .section__main--media .section__board {
        max-height: none;
    }

    .section__main--media .section__board li {
        margin-left: 0;
        max-width: none;
    }

    .section__main--media .section__board li:first-child {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        max-width: none;
        height: inherit;
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #dddddd;
        margin-left: 0;
    }

    .section__main--media .section__board li:first-child .img_box {
        background-size: cover;
        width: 260px;
        height: 150px;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
        margin-right: 40px;
        position: relative;
        z-index: 1;
    }

    .section__main--media .section__board li:first-child .img_box::after {
        display: none;
    }

    .section__main--media .section__board li:first-child .text_box {
        position: static;
        color: #222;
        padding: 0;
    }

    .section__main--media .section__board li:first-child .text_box .category {
        color: #000000;
    }

    .section__main--media .section__board li:first-child .text_box .title {
        color: #222;
        font-size: 20px;
    }

    .section__main--media .section__board li:first-child .text_box:hover .title::after {
        background: #222;
    }

    .section__main--media .section__board li:first-child .text_box .summary {
        color: #666;
        font-size: 15px;
        margin-bottom: 15px;
        display: block;
        transform: skew(1deg);
    }

    .section__main--media .section__board li:first-child .text_box .date {
        color: #999;
    }
}

@media screen and (max-width: 768px) {
    .section__main--media {
        padding:75px 0;
    }

    .section__main--media .section__header .title {
        font-size: 28px;
        margin-bottom: 20px;
        width: 80%;
    }

    .section__main--media .section__board li {
        flex-direction: column;
    }

    .section__main--media .section__board li .img_box, .section__main--media .section__board li:first-child .img_box {
        margin-bottom: 20px;
    }

    .section__main--bottom.aniPlay p {
        font-size: 16px;
    }

    .section__main--bottom.aniPlay p br {
        display: none;
    }
}

/* media text animation START */
.section__main--media .section__header .titile__top::after {
    width: 0;
    transition: 0.4s ease-out;
}

.section__main--media .section__header .titile__top span {
    opacity: 0;
    transition: 0.3s ease-out;
    bottom: -5px;
    position: relative;
}

.section__main--media .section__header .title {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--media .section__header .view_more {
    opacity: 0;
    transition: 0.5s ease-out;
    bottom: -10px;
    position: relative;
}

.section__main--media .section__board {
    opacity: 0;
    transition: 0.6s ease-out;
    bottom: -15px;
    position: relative;
}

.section__main--media .bg__text--packaging {
    transform: translate(-60%, -50%);
    transition: 0.8s ease-in-out;
    opacity: 0;
}

.section__main--media .bg__text--system {
    transform: translate(-40%, -50%);
    transition: 0.8s ease-in-out;
    opacity: 0;
}

.section__main--media.aniPlay .section__header .titile__top::after {
    width: 40px;
}

.section__main--media.aniPlay .section__header .titile__top span {
    transition-delay: 0.4s;
    opacity: 1;
    bottom: 0;
}

.section__main--media.aniPlay .section__header .title {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.6s;
}

.section__main--media.aniPlay .section__header .view_more {
    opacity: 1;
    bottom: 0;
    transition-delay: 0.6s;
}

.section__main--media.aniPlay .section__board {
    opacity: 1;
    transition-delay: 0.8s;
    bottom: 0;
    width: 100%;
}

.section__main--media.aniPlay2 .bg__text--packaging {
    transform: translate(-50%, -50%);
    transition-delay: 0.5s;
    opacity: 1;
}

.section__main--media.aniPlay2 .bg__text--system {
    transform: translate(-50%, -50%);
    transition-delay: 0.5s;
    opacity: 1;
}

/* media text animation END */
/* bottom section PC START */
.section__main--bottom {
    background-attachment: fixed;
    background-size: 100%;
    max-height: 580px;
    align-items: flex-end;
    padding-top: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
}

.section__main--bottom .section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section__main--bottom .img_box {
    margin-bottom: 35px;
}

.section__main--bottom p {
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin-bottom: 84px;
    text-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.section__main--bottom .button_box {
    width: 160px;
    height: 160px;
    background: rgba(229,21,31,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.section__main--bottom .button_box span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
}

.section__main--bottom .button_box span::after {
    width: 1px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    content: '';
}

/* bottom section PC END */
@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1024px) {
    .section__main--bottom {
        background-attachment:inherit;
    }
}

@media screen and (max-width: 768px) {
    .section__main--bottom {
        background-size:cover;
    }
}

/* bottom text animation START */
.section__main--bottom .img_box {
    position: relative;
    opacity: 0;
    bottom: -10px;
    transition: 0.4s ease-in;
}

.section__main--bottom p {
    position: relative;
    opacity: 0;
    bottom: -10px;
    transition: 0.4s ease-in;
}

.section__main--bottom .button_box {
    max-height: 0;
    transform-origin: bottom;
    transition: max-height 0.6s ease-in, background-color 0.1s ease-in;
}

.section__main--bottom .button_box span {
    opacity: 0;
    transition: 0.4s ease-in;
}

.section__main--bottom .button_box span::after {
    max-height: 0;
    transition: 0.4s ease-in;
    transform-origin: center;
}

.section__main--bottom.aniPlay .img_box {
    position: relative;
    opacity: 1;
    bottom: 0;
}

.section__main--bottom.aniPlay p {
    position: relative;
    opacity: 1;
    bottom: 0;
    transition-delay: 0.2s;
}

.section__main--bottom.aniPlay .button_box {
    max-height: 160px;
}

.section__main--bottom.aniPlay .button_box:hover {
    background: rgba(255,69,78,0.9);
}

.section__main--bottom.aniPlay .button_box span {
    opacity: 1;
    transition-delay: 0.9s;
}

.section__main--bottom.aniPlay .button_box span::after {
    max-height: 30px;
    transition-delay: 1s;
}

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

@media screen and (max-width: 1024px) {
    .section__main--bottom .button_box {
        max-height:100%;
    }
}

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

/* bottom text animation END */
/* Company - aboutus Start */
.sub__aboutus01 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__aboutus01 h2 {
    font-size: 60px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #333333;
    position: relative;
    top: 30px;
    z-index: 2;
}

.sub__aboutus01 h2 mark {
    background: #00000047;
    font-weight: 900;
    color: #ffffff;
}

.sub__aboutus01 .img_box {
    width: 1600px;
    height: 320px;
    position: relative;
    left: -160px;
    z-index: -1;
    margin-bottom: 85px;
    background: url('images/assets/sub_img_aboutus01.jpg') no-repeat center;
    background-size: cover;
}

.sub__aboutus01 .img_box::after {
    background: url('images/assets/sub_img_aboutus09.jpg') no-repeat center;
    width: 100%;
    height: 692px;
    content: '';
    position: absolute;
    top: 100%;
}

.sub__aboutus01 .img_boxa {
    width: 1600px;
    height: 320px;
    position: relative;
    left: -160px;
    z-index: -1;
    margin-bottom: 85px;
    background: url('images/assets/sub_img_aboutus02.jpg') no-repeat center;
    background-size: cover;
}

.sub__aboutus01 .img_boxa::after {
    background: url('images/assets/sub_img_aboutus09.jpg') no-repeat center;
    width: 100%;
    height: 692px;
    content: '';
    position: absolute;
    top: 100%;
}

.sub__aboutus01 .img_boxb {
    width: 1600px;
    height: 320px;
    position: relative;
    left: -160px;
    z-index: -1;
    margin-bottom: 85px;
    background: url('images/assets/sub_img_aboutus03.jpg') no-repeat center;
    background-size: cover;
}

.sub__aboutus01 .img_boxb::after {
    background: url('images/assets/sub_img_aboutus09.jpg') no-repeat center;
    width: 100%;
    height: 692px;
    content: '';
    position: absolute;
    top: 100%;
}

.sub__aboutus01 h3 {
    font-size: 28px;
    color: #ffffff;
    font-weight: 900;
    position: relative;
    margin-bottom: 50px;
}

.sub__aboutus01 h3::after {
    content: '';
    width: 40px;
    height: 4px;
    background: #e5151f00;
    position: absolute;
    top: -20px;
    left: 0;
}

.sub__aboutus01 p {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
}

.sub__aboutus01 p:nth-of-type(1) {
    margin-bottom: 30px;
}

@media screen and (max-width: 1440px) {
    .sub__aboutus01 {
        width:100%;
        max-width: 90%;
        margin-bottom: 75px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__aboutus01 {
        width:100%;
        max-width: 90%;
        margin-bottom: 75px;
    }

    .sub__aboutus01 h2 {
        font-size: 48px;
    }

    .sub__aboutus01 h3 {
        font-size: 22px;
    }

    .sub__aboutus01 p {
        font-size: 16px;
    }

    .sub__aboutus01 p br {
        display: none;
    }

    .sub__aboutus01 .img_box {
        width: 100%;
        left: 0;
    }

    .sub__aboutus01 .img_boxa {
        width: 100%;
        left: 0;
    }

    .sub__aboutus01 .img_boxb {
        width: 100%;
        left: 0;
    }
}

@media screen and (max-width: 769px) {
    .sub__aboutus01 {
        width:100%;
        max-width: 90%;
        margin-bottom: 75px;
    }

    .sub__aboutus01 h2 {
        font-size: 48px;
    }

    .sub__aboutus01 h3 {
        font-size: 22px;
    }

    .sub__aboutus01 p {
        font-size: 16px;
    }

    .sub__aboutus01 p br {
        display: none;
    }

    .sub__aboutus01 .img_box {
        width: 100%;
        left: 0;
    }
}

.sub__aboutus02 {
    width: 1280px;
    margin: 0 auto 10px;
    position: relative;
    padding: 60px 0;
    display: flex;
    align-items: center;
}

.sub__aboutus02::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1170px;
    height: 100%;
    border: 4px solid #37373791;
    z-index: -1;
    box-sizing: border-box;
    background: #00000038;
}

.sub__aboutus02 .media_wrap {
    width: 470px;
    height: 380px;
    margin-right: 80px;
    background: url('') no-repeat center;
    */ position: relative;
    cursor: pointer;
}

.sub__aboutus02 .media_wrap:hover::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    background-image: url(images/assets/play.png);
    background-position: center;
    background-repeat: no-repeat;
}

.sub__aboutus02 .text_wrap {
    width: 660px;
}

.sub__aboutus02 .text_wrap h3 {
    width: 100%;
    border-bottom: 2px solid #393737;
    margin-bottom: 40px;
}

.sub__aboutus02 .text_wrap h3 img {
    width: 500px;
    height: 52px;
    margin-bottom: 20px;
}

.sub__aboutus02 .text_wrap ul {
}

.sub__aboutus02 .text_wrap ul li {
    transform: skew(1deg);
    line-height: 40px;
}

.sub__aboutus02 .text_wrap ul li .list__title {
    font-size: 20px;
    color: #ffffff;
    width: 150px;
}

.sub__aboutus02 .text_wrap ul li .list__content {
    font-size: 20px;
    color: #a5a5a5;
    font-weight: 700;
}

.sub__aboutus02_add {
    width: 1420px;
    margin: 0 auto 20px;
    position: relative;
}

.sub__aboutus02_add .swiper-container {
    width: 1280px;
    margin: 0 auto;
}

.sub__aboutus02_add .swiper-wrapper {
    height: auto;
}

.sub__aboutus02_add .swiper-slide .img_box {
    display: flex;
    align-items: flex-start;
}

.sub__aboutus02_add .handler {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__aboutus02_add .nextBtn {
    background: url(images/assets/right.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-right: 1px;
    pointer-events: all;
}

.sub__aboutus02_add .prevBtn {
    background: url(images/assets/left.png) no-repeat center;
    width: 20px;
    height: 50px;
    cursor: pointer;
    margin-left: 1px;
    pointer-events: all;
}

@media screen and (max-width: 1440px) {
    .sub__aboutus02 {
        width:100%;
        max-width: 90%;
        margin-bottom: 75px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__aboutus02 {
        width:90%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
    }

    .sub__aboutus02_add {
        width: 90%;
    }

    .sub__aboutus02 .media_wrap {
        width: 100%;
        background-size: cover;
        margin-right: 0;
        margin-bottom: 45px;
    }

    .sub__aboutus02 .text_wrap {
        width: 100%;
    }

    .sub__aboutus02_add .swiper-container {
        width: 90%;
        margin: 0 auto;
    }

    .sub__aboutus02_add .swiper-container {
        width: 100%
    }

    .sub__aboutus02::after {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .sub__aboutus02_add {
        width:90%;
    }

    .sub__aboutus02_add .swiper-container {
        width: 100%;
    }
}

.sub__aboutus03 {
    width: 100%;
    margin: 0 auto 150px;
    background: url('images/assets/sub_img_aboutus02.jpg') no-repeat center;
    background-size: cover;
    padding: 120px 0 150px;
}

.sub__aboutus03 h3 {
    font-size: 36px;
    color: #fff;
    text-align: center;
    margin-bottom: 80px;
    font-weight: 400;
}

.sub__aboutus03 ul {
    width: 1280px;
    margin: 0 auto;
    display: flex;
}

.sub__aboutus03 ul li {
    width: 25%;
    text-align: center;
}

.sub__aboutus03 ul li span {
    display: block;
    line-height: 1;
}

.sub__aboutus03 ul li span > span {
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
}

.sub__aboutus03 ul li .list__title {
    color: #ff454e;
    font-size: 20px;
    font-weight: 400;
}

.sub__aboutus03 ul li .list__content {
    color: #fff;
    font-size: 100px;
    font-weight: 700;
    margin-bottom: 20px;
}

@media screen and (max-width: 1440px) {
    .sub__aboutus03 {
        width:100%;
        max-width: 100%;
        margin-bottom: 75px;
    }

    .sub__aboutus03 h3 {
        font-size: 28px;
    }

    .sub__aboutus03 ul {
        width: 100%;
        max-width: 100%;
    }

    .sub__aboutus03 ul li .list__title {
        font-size: 16px;
    }

    .sub__aboutus03 ul li .list__content {
        font-size: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__aboutus03 {
        padding:60px 0 75px;
    }

    .sub__aboutus03 ul {
        flex-wrap: wrap;
        width: 90%;
        margin: 0 auto;
    }

    .sub__aboutus03 ul li {
        width: 50%;
        margin-bottom: 45px;
    }
}

@media screen and (max-width: 768px) {
    .sub__aboutus03 h3 {
        width:60%;
        margin: 0 auto 40px;
    }

    .sub__aboutus03 ul li .list__title {
        font-size: 16px;
    }

    .sub__aboutus03 ul li .list__content {
        font-size: 40px;
    }
}

.sub__aboutus04 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__aboutus04 > h3 {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.sub__aboutus04 > p {
    text-align: center;
    font-size: 20px;
    color: #999;
    margin-bottom: 60px;
}

.sub__aboutus04 ul {
    display: flex;
}

.sub__aboutus04 ul li {
    text-align: center;
    background: #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    margin-right: 2px;
    width: 20%;
    transition: width 0.4s ease-in-out;
    transform-origin: center;
}

.sub__aboutus04 ul li:nth-of-type(1) {
    background: url('images/assets/sub_img_aboutus03b.jpg') no-repeat center;
}

.sub__aboutus04 ul li:nth-of-type(2) {
    background: url('images/assets/sub_img_aboutus04b.jpg') no-repeat center;
}

.sub__aboutus04 ul li:nth-of-type(3) {
    background: url('images/assets/sub_img_aboutus05b.jpg') no-repeat center;
}

.sub__aboutus04 ul li:nth-of-type(4) {
    background: url('images/assets/sub_img_aboutus06b.jpg') no-repeat center;
}

.sub__aboutus04 ul li:nth-of-type(5) {
    background: url('images/assets/sub_img_aboutus07b.jpg') no-repeat center;
}

.sub__aboutus04 ul li.selected:nth-of-type(1) {
    background: url('images/assets/sub_img_aboutus03.jpg') no-repeat center;
}

.sub__aboutus04 ul li.selected:nth-of-type(2) {
    background: url('images/assets/sub_img_aboutus04.jpg') no-repeat center;
}

.sub__aboutus04 ul li.selected:nth-of-type(3) {
    background: url('images/assets/sub_img_aboutus05.jpg') no-repeat center;
}

.sub__aboutus04 ul li.selected:nth-of-type(4) {
    background: url('images/assets/sub_img_aboutus06.jpg') no-repeat center;
}

.sub__aboutus04 ul li.selected:nth-of-type(5) {
    background: url('/mages/assets/sub_img_aboutus07.jpg') no-repeat center;
}

.sub__aboutus04 ul li:last-child {
    margin-right: 0;
}

.sub__aboutus04 ul li h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    transition: 0.4s ease-in-out;
    white-space: nowrap;
    line-height: 1;
}

.sub__aboutus04 ul li p {
    color: #fff;
    font-size: 18px;
    line-height: 0;
    white-space: nowrap;
    position: relative;
    top: -20px;
    transition: 0.2s ease-in-out;
    opacity: 0;
}

.sub__aboutus04 ul li a {
    color: #fff;
    max-height: 0;
    letter-spacing: 0.5px;
    border: 1px solid #fff;
    font-size: 14px;
    line-height: 1;
    position: relative;
    transition: 0.2s ease-in-out;
    opacity: 0;
}

.sub__aboutus04 ul li.selected {
    width: 40%;
}

.sub__aboutus04 ul li.selected h4 {
    font-size: 40px;
    margin-bottom: 25px;
    transition-delay: 0.1s;
}

.sub__aboutus04 ul li.selected p {
    top: 0;
    opacity: 1;
    margin-bottom: 40px;
    line-height: 1.6;
    transition-delay: 0.5s;
}

.sub__aboutus04 ul li.selected a {
    opacity: 1;
    max-height: 100%;
    padding: 20px 30px;
}

.sub__aboutus04 ul li.selected a:hover {
    background: #e5151f;
    border: 1px solid #e5151f;
}

@media screen and (max-width: 1440px) {
    .sub__aboutus04 {
        width:100%;
        max-width: 90%;
        margin-bottom: 75px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__aboutus04 ul {
        flex-direction:column;
    }

    .sub__aboutus04 ul li {
        width: 100%;
        height: 160px;
        transition: height 0.4s ease-in-out;
        background-size: cover !important;
    }

    .sub__aboutus04 ul li.selected {
        width: 100%;
        height: 360px;
    }
}

@media screen and (max-width: 768px) {
    .sub__aboutus04 > h3 {
        font-size:28px;
    }

    .sub__aboutus04 ul li.selected h4 {
        font-size: 28px;
    }

    .sub__aboutus04 ul li.selected p {
        font-size: 14px;
    }
}

.loadImage {
    display: none;
}

/* Company - aboutus End */
/* Company - ceo Start */
.sub__ceo01 {
    background: #1b1b1b;
    padding: 70px 0 70px;
    margin-bottom: 70px;
    position: relative;
}

.sub__ceo01 h2 {
    width: 1280px;
    margin: 0 auto;
    font-weight: 400;
    color: #ffffff;
    font-size: 40px;
    position: relative;
}

.sub__ceo01 h2 mark {
    background: #0000003d;
    font-weight: 900;
    color: #32acb8;
}

.sub__ceo01 h2::after {
    width: 40px;
    height: 4px;
    background: #e5151f00;
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
}

.sub__ceo01 .ceo_back {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1920px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-color: #151515;
}

/*.sub__ceo01 .logo_back {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/assets/sub_img_aboutus09.jpg') no-repeat center;
    background-size: cover;
}*/
@media screen and (max-width: 1440px) {
    .sub__ceo01 h2 {
        width:90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ceo01 h2 {
        z-index:3;
        font-size: 36px;
    }

    .sub__ceo01 .ceo_back {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .sub__ceo01 {
        padding:75px 0;
        margin-bottom: 60px;
    }

    .sub__ceo01 .ceo_back {
        opacity: 1;
        background-size: 250%;
    }

    .sub__ceo01 .logo_back {
        background: url(images/assets/mo_ceoBg.png) no-repeat center right;
        background-size: contain;
    }

    .sub__ceo01 h2 {
        z-index: 3;
        font-size: 28px;
        width: 80%;
    }

    .sub__ceo01 h2 br {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .sub__ceo01 {
        padding:75px 0;
        margin-bottom: 60px;
    }

    .sub__ceo01 .ceo_back {
        opacity: 1;
        background-size: 400%;
    }

    .sub__ceo01 .logo_back {
        background: url(/images/assets/mo_ceoBg.png) no-repeat center right;
        background-size: contain;
    }

    .sub__ceo01 h2 {
        z-index: 3;
        font-size: 22px;
        width: 90%;
    }

    .sub__ceo01 h2 br {
        display: none;
    }
}

.sub__ceo02 {
    width: 1280px;
    margin: 0 auto 170px;
    padding-right: 80px;
}

.sub__ceo02 h3 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 1700;
    margin-bottom: 20px;
    line-height: 1;
}

.sub__ceo02 p {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 30px;
    transform: skew(1deg);
}

.sub__ceo02 p:last-child {
    font-weight: 700;
    color: #ffffff;
    margin-top: 70px;
    position: relative;
    display: inline-block;
}

.sub__ceo02 p:last-child::after {
    position: absolute;
    content: '';
    top: -15px;
    width: 180px;
    height: 70px;
    background: url('images/assets/sub_img_ceo04.png') no-repeat center;
    background-size: cover;
}

.sub__ceo02 .en_sign:last-child {
    margin-top: 150px;
}

.sub__ceo02 .en_sign:last-child::after {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 286px;
    height: 80px;
    /*background: url('/images/assets/sub_img_ceo04_en.png') no-repeat center;*/
    background-size: cover;
}

@media screen and (max-width: 1440px) {
    .sub__ceo02 {
        width:90%;
        margin-bottom: 85px;
    }

    .sub__ceo02 p br {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ceo02 h3 {
        line-height:1.6;
    }
}

@media screen and (max-width: 768px) {
    .sub__ceo02 {
        padding-right:0;
    }

    .sub__ceo02 h3 {
        font-size: 24px;
    }

    .sub__ceo02 p {
        font-size: 14px;
    }

    .sub__ceo02 p:last-child {
        margin-top: 100px;
    }

    .sub__ceo02 p:last-child:after {
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
    }

    .sub__ceo02 .en_sign:last-child:after {
        background-size: contain;
    }

    /* .sub__ceo02 p:last-child::after {top:60px; right:-100px;}
        .sub__ceo02 .en_sign:last-child::after {top:100px; right:auto; left:0;} */
}

/* Company - ceo End */
/* Company - vision Start */
.sub__vision01 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__vision01 h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 40px;
    font-weight: 700;
    color: #333;
}

.sub__vision01 .img_box {
    width: 100%;
    height: 500px;
    background: url('images/assets/vision01.jpg') no-repeat center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sub__vision01 .img_box .typo {
    width: 400px;
    height: 82px;
    margin-bottom: 40px;
    background: url('images/assets/vision01.svg') no-repeat center;
}

.sub__vision01 .img_box h3 {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 38px;
}

.sub__vision01 .img_box p {
    font-size: 18px;
    color: #fff;
    line-height: 38px;
    text-align: center;
}

@media screen and (max-width: 1440px) {
    .sub__vision01 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__vision01 {
        width:100%;
        max-width: 100%;
        margin-bottom: 75px;
    }

    .sub__vision01 h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .sub__vision01 .img_box {
        height: auto;
        padding: 50px 0;
        background-size: cover;
    }
}

@media screen and (max-width: 768px) {
    .sub__vision01 .img_box .typo {
        width:80%;
    }

    .sub__vision01 .img_box p {
        font-size: 14px;
    }
}

.sub__vision02 {
    width: 100%;
    height: 600px;
    margin: 0 auto 150px;
    background: url('images/assets/vision01.jpg') no-repeat center;
    background-size: contain;
}
.sub__vision02en {
    width: 100%;
    height: 600px;
    margin: 0 auto 150px;
    background: url('images/assets/vision01en.jpg') no-repeat center;
    background-size: contain;
}

.sub__vision021 {
    width: 80%;
    height: 1200px;
    margin: 0 auto 150px;
    background: url('images/assets/vision011.png') no-repeat center;
    background-size: contain;
}

/*.sub__vision02 .sub__inner {width:1280px; margin:0 auto; text-align:center;}
    .sub__vision02 h2 {margin-bottom:40px; color:#fff; font-size:40px; font-weight:700;}
    .sub__vision02 .slogan {width:1070px; height:123px; margin:0 auto 60px; background:url('images/assets/vision02.svg') no-repeat center;}
    .sub__vision02 .slogan.en {background:url('images/assets/vision02_en.svg') no-repeat center;}
    .sub__vision02 ul {display:flex; justify-content:space-between;}
    .sub__vision02 ul li {color:#fff; width:290px;}
    .sub__vision02 ul li:nth-of-type(2) {width:320px;}
    .sub__vision02 ul li .icon {position:relative; height:120px; text-align:center; margin:0 auto; margin-bottom:30px; line-height:1;}
    .sub__vision02 ul li .icon::after {content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:20px; height:3px; background:#ff454e;}
    .sub__vision02 ul li:nth-of-type(1) .icon {width:72px;}
    .sub__vision02 ul li:nth-of-type(2) .icon {width:86px;}
    .sub__vision02 ul li:nth-of-type(3) .icon {width:78px;}
    .sub__vision02 ul li h3 {font-size:24px; font-weight:900; margin-bottom:30px;}
    .sub__vision02 ul li p {font-size:15px; line-height:28px; opacity:0.8;}*/
@media screen and (max-width: 1440px) {
    .sub__vision02 .sub__inner {
        width:100%;
        max-width: 90%;
    }

    .sub__vision02 .slogan {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__vision02 h2 {
        font-size:28px;
    }

    .sub__vision02 ul {
        flex-direction: column;
        align-items: center;
    }

    .sub__vision02 ul li {
        margin-bottom: 80px;
        width: 80%;
    }

    .sub__vision02 ul li:nth-of-type(2) {
        margin-bottom: 80px;
        width: 80%;
    }

    .sub__vision02 ul li p br {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .sub__vision02 {
        padding:40px 0 55px;
    }

    .sub__vision02 .slogan {
        background: url('images/assets/vision02_mini.svg') no-repeat center;
        height: 190px;
    }

    .sub__vision02 .slogan.en {
        background: url('images/assets/vision02_mini_en.svg') no-repeat center;
    }
}

.sub__vision03 {
    width: 100%;
    margin: 0 auto;
    padding: 120px 0 150px;
    margin-bottom: 150px;
    text-align: center;
    background: #f5f5f5;
}

.sub__vision03 h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
    line-height: 1;
}

.sub__vision03 h3 {
    font-size: 40px;
    font-weight: 400;
    color: #333;
    padding-bottom: 30px;
    margin-bottom: 30px;
    position: relative;
    line-height: 1;
}

.sub__vision03 h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ff454e;
    width: 20px;
    height: 3px;
}

.sub__vision03 p {
    font-size: 18px;
    color: #666;
    margin-bottom: 60px;
}

.sub__vision03 p mark {
    background: transparent;
    color: #333;
    font-weight: 700;
    line-height: 32px;
}

.sub__vision03 ul {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.sub__vision03 ul li {
    width: 290px;
    min-height: 400px;
    padding: 40px 30px;
}

.sub__vision03 ul li:nth-of-type(1) {
    background: url('images/assets/vision03.jpg') no-repeat center;
}

.sub__vision03 ul li:nth-of-type(2) {
    background: url('images/assets/vision04.jpg') no-repeat center;
}

.sub__vision03 ul li:nth-of-type(3) {
    background: url('images/assets/vision05.jpg') no-repeat center;
}

.sub__vision03 ul li:nth-of-type(4) {
    background: url('images/assets/vision06.jpg') no-repeat center;
}

.sub__vision03 ul li h4 {
    color: #fff;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 700;
}

.sub__vision03 ul li p {
    color: #fff;
    font-size: 16px;
}

@media screen and (max-width: 1440px) {
    .sub__vision03 p {
        max-width:90%;
        margin: 0 auto 60px;
    }

    .sub__vision03 p br {
        display: none;
    }

    .sub__vision03 ul {
        max-width: 90%;
    }

    .sub__vision03 ul li {
        width: 25%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__vision03 {
        margin-bottom:75px;
    }

    .sub__vision03 h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .sub__vision03 h3 {
        font-size: 28px;
    }

    .sub__vision03 ul {
        flex-wrap: wrap;
    }

    .sub__vision03 ul li {
        width: 50%;
    }

    .sub__vision03 ul li:nth-of-type(1), .sub__vision03 ul li:nth-of-type(2), .sub__vision03 ul li:nth-of-type(3), .sub__vision03 ul li:nth-of-type(4) {
        background-size: cover;
        background-position: center;
    }

    .sub__vision03 ul li:nth-of-type(3) {
        background-position: 40% 50%;
    }

    .sub__vision03 ul li p {
        margin: 0 0 60px 0;
    }
}

@media screen and (max-width: 768px) {
    .sub__vision03 ul {
        max-width:100%;
    }

    .sub__vision03 ul li {
        width: 100%;
        min-height: 120px;
        text-align: center;
        box-sizing: border-box;
        position: relative;
    }

    .sub__vision03 ul li h4 {
        margin-bottom: 15px;
    }

    .sub__vision03 ul li p {
        margin: 0 auto;
    }

    .sub__vision03 ul li h4, .sub__vision03 ul li p {
        text-shadow: 0 0 20px rgba(0,0,0,0.8);
    }
}

.sub__vision04 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__vision04 h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 80px;
    line-height: 1;
    text-align: center;
}

.sub__vision04 ul {
    display: flex;
    justify-content: center;
}

.sub__vision04 ul li {
    position: relative;
    padding: 0 15px;
    color: #fff;
    text-align: center
}

.sub__vision04 ul li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border-radius: 100%;
    z-index: -2;
}

.sub__vision04 ul li:nth-of-type(1)::after {
    background: rgba(175,0,8,0.8);
    z-index: -1;
}

.sub__vision04 ul li:nth-of-type(2)::after {
    background: rgba(181,181,182,1);
}

.sub__vision04 ul li:nth-of-type(3)::after {
    background: rgba(87,87,87,0.8);
}

.sub__vision04 ul li:nth-of-type(4)::after {
    background: rgba(229,21,31,0.8);
}

.sub__vision04 ul li:nth-of-type(5)::after {
    background: rgba(34,34,34,0.8);
}

.sub__vision04 ul li .pop {
    width: 220px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
}

.sub__vision04 ul li .pop h3 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
}

.sub__vision04 ul li .pop p {
    font-size: 16px;
    font-weight: 700;
    transform: skew(0.028deg);
    height: 30px;
}

.sub__vision04 ul li .pop::after {
    content: '';
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 80px;
    background: #ddd;
}

.sub__vision04 ul li > p {
    font-size: 16px;
    color: #666;
    line-height: 30px;
    transform: skew(0.028deg);
    font-weight: 400;
    letter-spacing: -1px;
    margin-top: 120px;
    position: relative;
}

.sub__vision04 ul li > p::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 4px solid #e5151f;
    box-sizing: border-box;
}

@media screen and (max-width: 1440px) {
    .sub__vision04 {
        width:90%;
    }

    .sub__vision04 ul {
        flex-wrap: wrap;
    }

    .sub__vision04 ul li {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__vision04 h2 {
        font-size:28px;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 768px) {
    .sub__vision04 {
        margin-bottom:75px;
    }
}

/* Company - vision End */
/* Company - CI Start */
.sub__off {
    display: none;
}

.sub__ci01 {
    margin-bottom: 80px;
}

.sub__ci01 ul {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.sub__ci01 ul li {
    margin-right: 10px;
    padding: 20px 0;
    border: 1px solid #dddddd;
    width: 248px;
    text-align: center;
    cursor: pointer;
}

.sub__ci01 ul li h2 {
    font-size: 18px;
    color: #999;
    font-weight: 400;
}

.sub__ci01 ul li.selected {
    background: #333333;
}

.sub__ci01 ul li.selected h2 {
    color: #fff;
    font-weight: 700;
}

.sub__ci01 ul li:last-child {
    margin-right: 0;
}

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

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

@media screen and (max-width: 768px) {
    .sub__ci01 ul {
        flex-direction:column;
        width: 90%;
    }

    .sub__ci01 ul li {
        margin: 0 auto 10px;
        width: 100%;
    }
}

.sub__ci02 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__ci02 h3 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.sub__ci02 p {
    font-size: 16px;
    transform: skew(1deg);
    font-weight: 400;
    color: #666;
    margin-bottom: 30px;
    line-height: 30px;
}

.sub__ci02 p mark {
    font-family: 'Noto Sans KR', sans-serif;
    background: transparent;
    color: #666;
    vertical-align: baseline;
}

.sub__ci02 .sub__row {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}

.sub__ci02 .sub__row .column {
    width: 620px;
    font-size: 0;
}

.sub__ci02 h4 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 27px;
}

.sub__ci02 img {
    margin-bottom: 20px;
}

.sub__ci02 .download_wrap {
    display: flex;
    width: 100%;
    justify-content: center;
}

.sub__ci02 .download_wrap .downloadBtn {
    color: #fff;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 15px;
    transform: skew(0.028deg);
    font-weight: 700;
}

.sub__ci02 .download_wrap .downloadBtn.down_jpg {
    background: #575757;
    margin-right: 20px;
}

.sub__ci02 .download_wrap .downloadBtn.down_ai {
    background: #333333;
}

.sub__ci02 .download_wrap .downloadBtn:hover {
    background: #e5151f;
}

.sub__ci02 .down_marker {
    background: url(images/assets/download.png) no-repeat center;
    width: 16px;
    height: 14px;
    margin-left: 22px;
}

@media screen and (max-width: 1440px) {
    .sub__ci02 {
        width:100%;
        max-width: 90%;
    }

    .sub__ci02 .sub__row .column {
        width: 48%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci02 {
        margin-bottom:75px;
    }

    .sub__ci02 .sub__row {
        flex-wrap: wrap;
    }

    .sub__ci02 .sub__row .column {
        width: 100%;
        margin-bottom: 50px;
    }

    .sub__ci02 img {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .sub__ci02 .download_wrap .downloadBtn {
        font-size:14px;
    }

    .sub__ci02 .down_marker {
        margin-left: 10px;
    }
}

.sub__ci03 {
    background: #f5f5f5;
    width: 100%;
    padding: 100px 0 120px;
}

.sub__ci03 .inner_wrap {
    width: 1280px;
    margin: 0 auto;
}

.sub__ci03 h3 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci03 .inner_wrap > p {
    font-size: 16px;
    transform: skew(1deg);
    font-weight: 400;
    color: #666;
    margin-bottom: 70px;
    line-height: 30px;
}

.sub__ci03 .sub__row {
    display: flex;
    justify-content: space-between;
}

.sub__ci03 .sub__row .column {
    width: 620px;
}

.sub__ci03 h4 {
    font-size: 30px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci03 .sub__row .column ul {
    display: flex;
    justify-content: space-between;
}

.sub__ci03 .sub__row .column ul li {
    width: 300px;
}

.sub__ci03 .sub__row .column ul li h5 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.sub__ci03 .sub__row .column ul li p {
    color: #fff;
    font-size: 18px;
}

.sub__ci03 .sub__row .column ul li .color_card_top {
    padding: 25px;
    height: 150px;
}

.sub__ci03 .sub__row .column ul li .color_card_bottom {
    background: #fff;
    padding: 25px;
}

.sub__ci03 .sub__row .column ul li .color_card_bottom p {
    color: #666;
    font-size: 16px;
}

.sub__ci03 .sub__row .column ul li .color_card_bottom p:first-child {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1;
}

.sub__ci03 .sub__row .column ul .honnga_black .color_card_top {
    background: #000;
}

.sub__ci03 .sub__row .column ul .honnga_red .color_card_top {
    background: #e60012;
}

.sub__ci03 .sub__row .column ul .honnga_darkgray .color_card_top {
    background: #575757;
}

.sub__ci03 .sub__row .column ul .honnga_gray .color_card_top {
    background: #b5b5b5;
}

@media screen and (max-width: 1440px) {
    .sub__ci03 .inner_wrap {
        max-width:90%;
    }

    .sub__ci03 .sub__row .column {
        width: 48%;
    }

    .sub__ci03 .sub__row .column ul li {
        width: 48%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci03 .sub__row {
        flex-wrap:wrap;
    }

    .sub__ci03 .sub__row .column {
        width: 100%;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 768px) {
    .sub__ci03 {
        padding: 30px 0 40px;
    }

    .sub__ci03 .sub__row .column ul {
        flex-wrap: wrap;
    }

    .sub__ci03 .sub__row .column ul li {
        width: 100%;
        margin-bottom: 50px;
    }
}

.sub__ci04 {
    width: 1280px;
    margin: 0 auto 150px;
    padding: 150px 0 0;
}

.sub__ci04 h3 {
    font-size: 40px;
    font-weight: 900;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci04 p {
    color: #666;
    font-size: 16px;
    line-height: 30px;
    transform: skew(1deg);
    margin-bottom: 50px;
    margin-bottom: 30px;
}

.sub__ci04 p:nth-of-type(1) {
    margin-bottom: 80px;
}

.sub__ci04 h4 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci04 .logo_types {
    margin-bottom: 80px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.sub__ci04 .logo_types img {
    margin-right: 20px;
}

.sub__ci04 .logo_types img:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1440px) {
    .sub__ci04 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci04 {
        margin-bottom:75px;
    }

    .sub__ci04 .logo_types {
        flex-wrap: wrap;
    }

    .sub__ci04 .logo_types img {
        width: 32%;
        margin: 0 2% 20px 0;
    }

    .sub__ci04 .logo_types img:nth-of-type(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .sub__ci04 {
        padding:55px 0 0;
    }

    .sub__ci04 h3 {
        font-size: 28px;
    }

    .sub__ci04 h4 {
        font-size: 24px;
    }
}

.sub__ci05 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__ci05 h3 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci05 p {
    font-size: 16px;
    color: #666;
    transform: skew(1deg);
    margin-bottom: 30px;
    line-height: 30px;
}

@media screen and (max-width: 1440px) {
    .sub__ci05 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci05 {
        margin-bottom:55px;
    }
}

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

.sub__ci06 {
    background: #f5f5f5;
    width: 100%;
    padding: 100px 0 120px;
}

.sub__ci06 .inner_wrap {
    width: 1280px;
    margin: 0 auto;
}

.sub__ci06 h3 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci06 .inner_wrap > p {
    font-size: 16px;
    transform: skew(1deg);
    font-weight: 400;
    color: #666;
    margin-bottom: 70px;
    line-height: 30px;
}

.sub__ci06 .sub__row {
    display: flex;
    justify-content: space-between;
}

.sub__ci06 .sub__row .column {
    width: 620px;
}

.sub__ci06 h4 {
    font-size: 30px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci06 .sub__row .column ul {
    display: flex;
    justify-content: space-between;
}

.sub__ci06 .sub__row .column ul li {
    width: 300px;
}

.sub__ci06 .sub__row .column ul li h5 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.sub__ci06 .sub__row .column ul li p {
    color: #fff;
    font-size: 18px;
}

.sub__ci06 .sub__row .column ul li .color_card_top {
    padding: 25px;
    height: 150px;
}

.sub__ci06 .sub__row .column ul li .color_card_bottom {
    background: #fff;
    padding: 25px;
}

.sub__ci06 .sub__row .column ul li .color_card_bottom p {
    color: #666;
    font-size: 16px;
}

.sub__ci06 .sub__row .column ul li .color_card_bottom p:first-child {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1;
}

.sub__ci06 .sub__row .column ul .honnga_black .color_card_top {
    background: #000;
}

.sub__ci06 .sub__row .column ul .honnga_red .color_card_top {
    background: #e60012;
}

.sub__ci06 .sub__row .column ul .honnga_darkgray .color_card_top {
    background: #575757;
}

.sub__ci06 .sub__row .column ul .honnga_gray .color_card_top {
    background: #b5b5b5;
}

@media screen and (max-width: 1440px) {
    .sub__ci06 .inner_wrap {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci06 .sub__row {
        flex-wrap:wrap;
    }

    .sub__ci06 .sub__row .column {
        width: 100%;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 768px) {
    .sub__ci06 {
        padding: 30px 0 40px;
    }

    .sub__ci06 .sub__row .column ul {
        flex-wrap: wrap;
    }

    .sub__ci06 .sub__row .column ul li {
        width: 100%;
        margin-bottom: 50px;
    }
}

.sub__ci07 {
    width: 1280px;
    margin: 0 auto 150px;
    padding: 150px 0 0;
}

.sub__ci07 h3 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

.sub__ci07 ul {
    display: flex;
    margin-bottom: 80px;
}

.sub__ci07 ul li {
    margin-right: 40px;
}

.sub__ci07 ul li:last-child {
    margin-right: 0;
}

.sub__ci07 ul li h4 {
    margin-bottom: 30px;
    font-size: 30px;
    color: #333;
    font-weight: 700;
}

.sub__ci07 > h4 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__ci07 p {
    font-size: 16px;
    color: #666;
    line-height: 30px;
    transform: skew(1deg);
}

.sub__ci07 p mark {
    background: transparent;
    vertical-align: baseline;
    color: #666;
    font-weight: 700;
}

@media screen and (max-width: 1440px) {
    .sub__ci07 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__ci07 {
        margin-bottom:115px;
        padding: 55px 0 0;
    }
}

@media screen and (max-width: 768px) {
    .sub__ci07 h3 {
        font-size:28px;
    }

    .sub__ci07 ul li h4 {
        font-size: 20px;
    }

    .sub__ci07 ul {
        flex-direction: column;
    }

    .sub__ci07 ul li {
        width: 100%;
        margin-bottom: 40px;
    }

    .sub__ci07 > h4 {
        font-size: 28px;
    }
}

/* Company - CI End */
/* Company - History Start */
.sub__history01 {
    margin-bottom: 80px;
}

.sub__history01 ul {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.sub__history01 ul li {
    margin-right: 10px;
    border: 1px solid #dddddd;
    width: 248px;
    text-align: center;
    cursor: pointer;
}

.sub__history01 ul li h2 {
    font-size: 18px;
    color: #999;
    font-weight: 400;
}

.sub__history01 ul li h2 a {
    font-size: 18px;
    color: #999;
    font-weight: 400;
    padding: 20px 0;
    width: 100%;
    display: block;
}

.sub__history01 ul li.selected {
    background: #333333;
}

.sub__history01 ul li.selected h2 {
    color: #fff;
    font-weight: 700;
}

.sub__history01 ul li.selected h2 a {
    color: #fff;
    font-weight: 700;
}

.sub__history01 ul li:last-child {
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .sub__history01 ul {
        flex-wrap:wrap;
    }

    .sub__history01 ul li {
        width: 100%;
        max-width: 90%;
        margin: 0 0 10px 0;
    }
}

.sub__history02 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__history02 ol.vertical__list {
    position: relative;
}

.sub__history02 ol.vertical__list > li {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n) {
    margin-right: auto;
    text-align: right;
    padding-right: 100px;
    align-items: flex-end;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n-1) {
    margin-left: auto;
    text-align: left;
    padding-left: 100px;
    align-items: flex-start;
}

.sub__history02 ol.vertical__list > li h3 {
    font-size: 25px;
    color: #979797;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 37px;
    position: relative;
    transition: 0.3s ease-in-out;
    top: 15px;
    opacity: 0;
}

.sub__history02 ol.vertical__list > li ul {
    transition: 0.3s ease-in-out;
    top: 15px;
    opacity: 0;
    transition-delay: 0.1s;
}

.sub__history02 ol.vertical__list > li ul li {
    position: relative;
    font-size: 18px;
    color: #ffffff;
    line-height: 35px;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n) ul li {
    padding-right: 13px;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n-1) ul li {
    padding-left: 13px;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n) ul li::after {
    content: '';
    width: 3px;
    height: 3px;
    top: 17px;
    right: 0;
    background: #333333;
    position: absolute;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n-1) ul li::after {
    content: '';
    width: 3px;
    height: 3px;
    left: 0;
    top: 17px;
    background: #333333;
    position: absolute;
}

.sub__history02 ol.vertical__list > li .img_box {
    max-width: 510px;
    text-align: left;
    margin-top: 40px;
    transition: 0.3s ease-in-out;
    top: 15px;
    opacity: 0;
    transition-delay: 0.2s;
}

.sub__history02 ol.vertical__list > li .img_box p {
    font-size: 16px;
    color: #666;
    transform: skew(1deg);
}

.sub__history02 ol.vertical__list > li .pagination {
    position: absolute;
    top: 30px;
    width: 2px;
    height: 100%;
    background: #dddddd;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n-1) .pagination {
    left: -1px;
}

.sub__history02 ol.vertical__list > li:nth-of-type(2n) .pagination {
    right: -1px;
}

.sub__history02 ol.vertical__list > li .pagination .outer_dot {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid #9C27B0;
    background: #fff;
    box-sizing: border-box;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.66, 0, 0.34, 1);
}

.sub__history02 ol.vertical__list > li .pagination .inner_dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

.sub__history02 ol.vertical__list > li .pagination .line {
    position: absolute;
    width: 100%;
    height: 0;
    background: #9c27b06e;
    transition: 0.3s ease-in-out;
    transition: 0.6s cubic-bezier(0.66, 0, 0.34, 1);
}

.sub__history02 ol.vertical__list > li.on .pagination .outer_dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

.sub__history02 ol.vertical__list > li.on .pagination .inner_dot {
    background: #9C27B0;
}

.sub__history02 ol.vertical__list > li.active .pagination .line {
    height: 100%;
}

.sub__history02 ol.vertical__list li.ani-on h3 {
    top: 0;
    opacity: 1;
}

.sub__history02 ol.vertical__list li.ani-on ul {
    top: 0;
    opacity: 1;
}

.sub__history02 ol.vertical__list li.ani-on .img_box {
    top: 0;
    opacity: 1;
}

.sub__history02 .year_range_selector {
    border-bottom: 1px solid #ddd;
    margin-bottom: 80px;
    display: flex;
    justify-content: space-around;
}

.sub__history02 .year_range_selector li {
    width: 160px;
    text-align: center;
    padding: 30px 0;
    position: relative;
    cursor: pointer;
}

.sub__history02 .year_range_selector li.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #1525e5;
}

.sub__history02 .year_range_selector li .desc {
    font-size: 25px;
    color: #999;
    transform: skew(0.028deg);
}

.sub__history02 .year_range_selector li .year_range {
    font-size: 30px;
    color: #999;
}

.sub__history02 .year_range_selector li.active .desc {
    color: #666;
}

.sub__history02 .year_range_selector li.active .year_range {
    color: #333;
}

@media screen and (max-width: 1440px) {
    .sub__history02 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__history02 {
        margin-bottom:55px;
    }

    .sub__history02 ol.vertical__list {
        width: 80%;
        margin: 0 auto;
    }

    .sub__history02 .year_range_selector li .year_range {
        font-size: 30px;
    }

    .sub__history02 .year_range_selector li {
        padding: 20px 0;
    }

    .sub__history02 ol.vertical__list > li {
        padding-bottom: 40px;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n) {
        text-align: left;
        align-items: flex-start;
        padding-right: 0;
        padding-left: 100px;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n-1) {
        margin-left: 0;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n) .pagination {
        left: -1px;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n) ul li::after {
        left: 0;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n) ul li {
        padding-left: 13px;
        padding-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .sub__history02 .year_range_selector li .year_range {
        font-size:30px;
    }

    .sub__history02 .year_range_selector li {
        padding: 5px 0;
    }

    .sub__history02 ol.vertical__list > li:nth-of-type(2n), .sub__history02 ol.vertical__list > li:nth-of-type(2n-1) {
        padding-left: 50px;
        width: 100%;
    }

    .sub__history02 ol.vertical__list li.ani-on h3 {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .sub__history02 ol.vertical__list > li ul li {
        font-size: 16px;
    }

    .sub__history02 ol.vertical__list > li .pagination {
        top: 20px;
    }
}

/* horizontal_list */
.sub__history02 ol.horizontal__list {
    position: relative;
    display: flex;
    padding-top: 50px;
}

.sub__history02 ol.horizontal__list::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ddd;
    top: 0;
    left: 0;
}

.sub__history02 ol.horizontal__list > li {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.sub__history02 ol.horizontal__list > li h3 {
    font-size: 24px;
    color: #333;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
    position: relative;
    order: 2;
}

.sub__history02 ol.horizontal__list > li ul {
    order: 3;
}

.sub__history02 ol.horizontal__list > li ul li {
    position: relative;
    font-size: 18px;
    color: #333;
    line-height: 35px;
}

.sub__history02 ol.horizontal__list > li .img_box {
    max-width: 510px;
    order: 1;
}

.sub__history02 ol.horizontal__list > li .img_box p {
    display: none;
}

.sub__history02 ol.horizontal__list > li .pagination {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.sub__history02 ol.horizontal__list > li .pagination .outer_dot {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid #e5151f;
    background: #fff;
    box-sizing: border-box;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.66, 0, 0.34, 1);
}

.sub__history02 ol.horizontal__list > li .pagination .inner_dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

.sub__history02 ol.horizontal__list > li .pagination .line {
    position: absolute;
    width: 100%;
    height: 0;
    background: #e5151f;
    transition: 0.3s ease-in-out;
    transition: 0.6s cubic-bezier(0.66, 0, 0.34, 1);
}

.sub__history02 ol.horizontal__list > li.on .pagination .outer_dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

.sub__history02 ol.horizontal__list > li.on .pagination .inner_dot {
    background: #e5151f;
}

.sub__history02 ol.horizontal__list > li.active .pagination .line {
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .sub__history02 ol.horizontal__list {
        flex-direction:column;
        align-items: center;
    }

    .sub__history02 ol.horizontal__list::after {
        display: none;
    }

    .sub__history02 ol.horizontal__list > li {
        padding-bottom: 50px;
    }

    .sub__history02 ol.horizontal__list > li .pagination {
        position: absolute;
        top: 72px;
        width: 2px;
        height: 100%;
        background: #dddddd;
        left: -1px;
    }

    .sub__history02 ol.horizontal__list > li:last-child .pagination {
        height: 40px;
    }
}

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

/* //horizontal_list */
/* Company - History End */
/* Support - service Start */
.sub__service01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.sub__service01 .service_block {
    width: 100%;
    max-width: 990px;
    margin-bottom: 120px;
}

.sub__service01 .service_block .img_box {
    position: relative;
    display: flex;
    margin-bottom: 80px;
}

.sub__service01 .service_block h2 {
    position: absolute;
    ; bottom: -30px;
    left: 50px;
    color: #222;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
}

.sub__service01 .service_block p {
    font-size: 16px;
    transform: skew(0.028deg);
    color: #666;
    margin-bottom: 30px;
}

.sub__service01 .service_block p:last-child {
    margin-bottom: 45px;
}

.sub__service01 .service_block .icon_wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.sub__service01 .service_block .icon_wrap li {
    width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.sub__service01 .service_block .icon_wrap li::after {
    content: '';
    width: 1px;
    height: 130px;
    background: #ddd;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sub__service01 .service_block .icon_wrap li:last-child::after {
    display: none;
}

.sub__service01 .service_block .icon_wrap li .icon {
    width: 95px;
    height: 95px;
    margin-bottom: 25px;
}

.sub__service01 .service_block .icon_wrap li p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.sub__service01 .service_block .content_table {
    border-top: 2px solid #333;
}

.sub__service01 .service_block .content_table .content_table_row {
    border-bottom: 1px solid #ddd;
    padding: 40px 0;
    display: flex;
}

.sub__service01 .service_block .content_table .content_table_row .content_table_col {
    width: 40%;
    padding-left: 20px;
    color: #333;
    font-weight: 700;
    font-size: 24px;
}

.sub__service01 .service_block .content_table .content_table_row .content_table_col:last-child {
    width: 100%;
    font-size: 18px;
    color: #333;
    font-weight: 400;
}

.sub__service01 .sideNav {
    position: absolute;
    top: 100px;
    left: 0;
}

.sub__service01 .sideNav ul li {
    color: #999;
    font-size: 20px;
    margin-bottom: 36px;
    cursor: pointer;
    padding-left: 0;
    transition: 0.2s ease-in-out;
}

.sub__service01 .sideNav ul li:hover {
    color: #333;
}

.sub__service01 .sideNav ul li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #e5151f;
    transition: 0.2s ease-in-out;
}

.sub__service01 .sideNav ul li.selected {
    padding-left: 50px;
    position: relative;
    color: #333;
    font-weight: 700;
}

.sub__service01 .sideNav ul li.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: #e5151f;
}

@media screen and (max-width: 1024px) {
    .sideNav {
        display:none;
    }

    .sub__service01 {
        align-items: center;
    }

    .sub__service01 {
        width: 90%;
    }

    .sub__service01 .service_block h2 {
        font-size: 60px;
        left: 10px;
    }
}

@media screen and (max-width: 767px) {
    .sub__service01 .service_block .img_box {
        flex-direction:column;
    }

    .sub__service01 .service_block h2 {
        font-size: 40px;
        position: relative;
        left: 0;
    }

    .sub__service01 .service_block .icon_wrap {
        flex-wrap: wrap;
    }

    .sub__service01 .service_block .icon_wrap li {
        width: 50%;
        margin-bottom: 20px;
    }

    .sub__service01 .service_block .icon_wrap li::after {
        display: none;
    }

    .sub__service01 .service_block .content_table .content_table_row {
        flex-direction: column;
    }

    .sub__service01 .service_block .content_table .content_table_row .content_table_col {
        width: 100%;
        margin-bottom: 20px;
    }

    .sub__service01 .service_block .content_table .content_table_row .content_table_col:last-child {
        margin-bottom: 0;
    }
}

/* Support - service End */
/* Support - AS Start */
.sub__as01 {
    width: 1280px;
    margin: 0 auto 60px;
}

.sub__as01 h2 {
    font-size: 36px;
    color: #333;
    line-height: 50px;
}

.sub__as01 h2 mark {
    font-weight: 900;
    color: #333;
    background: transparent;
    font-family: 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}

@media screen and (max-width: 1440px) {
    .sub__as01 {
        width:100%;
        max-width: 90%;
    }

    .sub__as01 h2 {
        font-size: 30px;
        line-height: 1.6;
    }

    .sub__as01 h2 br {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .sub__as01 h2 {
        font-size:20px;
        line-height: 1.6;
    }

    .sub__as01 h2 br {
        display: none;
    }
}

.sub__as02 {
    width: 1280px;
    margin: 0 auto 90px;
    border-top: 2px solid #333;
}

.sub__as02 .form__row {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 20px;
    align-items: center;
}

.sub__as02 .form__row:last-child {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    border-bottom: 0;
}

.sub__as02 .agreeCheck {
    border-bottom: 0;
}

.sub__as02 .agreeCheck input[type="checkbox"] {
    display: none;
}

.sub__as02 .agreeCheck input[type="checkbox"]:checked+label::after {
    background: url(images/assets/checked.jpg) no-repeat center;
    border: 0;
}

.sub__as02 .agreeCheck label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #666;
    font-weight: 400;
    transform: skew(0.028deg);
}

.sub__as02 .agreeCheck label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
}

.sub__as02 .agreeCheck span {
    margin-left: 5px;
    color: #333;
    text-decoration: underline;
    font-weight: 700;
    transform: skew(0.028deg);
}

.sub__as02 .form__row:last-child button, .sub__as02 .form__row:last-child input[type="submit"] {
    width: 220px;
    height: 70px;
    border: 0;
    box-shadow: none;
    font-size: 18px;
}

.sub__as02 .form__row:last-child button {
    margin-right: 10px;
    border: 2px solid #ddd;
    background: transparent;
    color: #666;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.sub__as02 .form__row:last-child button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    transition: 0.3s cubic-bezier(0.33, 0.01, 0, 0.37);
    top: 100%;
    left: 0;
    z-index: -1;
}

.sub__as02 .form__row:last-child button:hover {
    color: #fff;
}

.sub__as02 .form__row:last-child button:hover::after {
    top: 0;
}

.sub__as02 .form__row:last-child input[type="submit"] {
    background: #607D8B;
    color: #fff;
}

.sub__as02 .form__row .column:first-child {
    width: 20%;
}

.sub__as02 .form__row .column:first-child p {
    color: #333;
    font-weight: 600;
    transform: skew(1deg);
}

.sub__as02 .form__row .column:first-child .required {
    margin-left: 5px;
    color: #e23008;
    font-family: 'NanumSquare', sans-serif;
}

.sub__as02 .form__row .column:nth-of-type(2) {
    display: flex;
    align-items: center;
    width: 60%;
}

.sub__as02 .form__row.division .column > div {
    display: flex;
    align-items: center;
}

.sub__as02 .form__row.division .column input[type="radio"] {
    display: none;
}

.sub__as02 .form__row.division .column label {
    padding-left: 30px;
    position: relative;
    cursor: pointer;
    margin-right: 50px;
    transform: skew(1deg);
    color: #666;
}

.sub__as02 .form__row.division .column label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.sub__as02 .form__row.division .column input[type="radio"]:checked + label::after {
    border: 7px solid #e5151f;
}

.sub__as02 .form__row input[type="text"], .sub__as02 .form__row textarea, .sub__as02 .form__row select {
    border: 1px solid #ddd;
    height: 45px;
    min-width: 180px;
    padding-left: 10px;
    margin-right: 5px;
    font-size: 16px;
    color: #000000;
}

#gl_nscode {
    min-width: 250px;
    width: 100%;
    background-position: 96% 50%;
}

.sub__as02 .form__row input[type="text"]:focus, .sub__as02 .form__row textarea:focus, .sub__as02 .form__row select:focus {
    outline: 1px solid #e5151f;
}

.sub__as02 .form__row span {
    margin-right: 5px;
}

.sub__as02 .form__row.company_name input[type="text"], .sub__as02 .form__row.serial_number input[type="text"] {
    width: 420px;
}

.sub__as02 .form__row.mobile input[type="text"] {
    max-width: 100px;
    min-width: 0;
}

.sub__as02 .form__row.email input[type="text"] {
    width: 200px;
}

.sub__as02 .form__row.email select {
    width: 150px;
}

.sub__as02 .form__row.type select:first-child {
    width: 100%;
    max-width: 280px;
}

.sub__as02 .form__row.type select:nth-of-type(2) {
    width: 150px;
}

.sub__as02 .form__row.inquiries .column:nth-of-type(2) {
    width: 80%;
}

.sub__as02 .form__row.inquiries .column:nth-of-type(2) textarea {
    height: 150px;
}

@media screen and (max-width: 1440px) {
    .sub__as02 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__as02 .form__row .column:first-child {
        min-width:180px;
    }

    .sub__as02 .form__row .column:last-child {
        width: 100%;
    }

    .sub__as02 .form__row.email input[type="text"] {
        width: 40%;
    }

    .sub__as02 .form__row.company_name input[type="text"], .sub__as02 .form__row.serial_number input[type="text"] {
        width: 60%;
    }

    .sub__as02 .form__row.email select {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #gl_ctcode {
        background-position:96% 50%;
    }

    .sub__as02 .form__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub__as02 .form__row:last-child {
        flex-direction: row;
        align-items: center;
    }

    .sub__as02 .form__row .column:first-child {
        margin-bottom: 20px;
    }

    .sub__as02 .form__row.email select {
        width: 100%;
        margin-top: 10px;
    }

    .sub__as02 .form__row .column:nth-of-type(2) {
        flex-wrap: wrap;
    }

    .sub__as02 .form__row.mobile input[type="text"] {
        width: 29%;
    }

    .sub__as02 .form__row.email input[type="text"] {
        min-width: 45%;
    }

    .sub__as02 .form__row.company_name input[type="text"], .sub__as02 .form__row.type select:nth-of-type(2), .sub__as02 .form__row.inquiries .column:nth-of-type(2) textarea, .sub__as02 .form__row.serial_number input[type="text"] {
        width: 100%;
        min-width: 100%;
    }

    .sub__as02 .form__row.type select:first-child {
        width: 100%;
        margin-bottom: 10px;
    }

    .sub__as02 .form__row.inquiries .column:nth-of-type(2) {
        width: 100%;
    }
}

.sub__as03 {
    width: 1280px;
    margin: 0 auto 150px;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
    padding: 40px 0;
}

.sub__as03 .sub__row {
    display: flex;
    justify-content: space-between;
}

.sub__as03 .sub__row .column {
    display: flex;
    width: 50%;
}

.sub__as03 .sub__row .column h3 {
    font-size: 24px;
    font-weight: 900;
    color: #333;
    padding-left: 20px;
    width: 40%;
}

.sub__as03 .sub__row .column .infor {
}

.sub__as03 .sub__row .column .infor p {
    font-size: 18px;
    color: #333;
}

@media screen and (max-width: 1440px) {
    .sub__as03 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__as03 .sub__row {
        flex-direction:column;
    }

    .sub__as03 .sub__row .column {
        width: 100%;
        margin-bottom: 40px;
    }

    .sub__as03 .sub__row .column h3 {
        font-size: 16px;
    }

    .sub__as03 .sub__row .column .infor p {
        font-size: 14px;
    }
}

/* Support - AS End */
/* Recruit method Start */
.sub__rec_method01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 150px;
}

.sub__rec_method01 h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
    line-height: 1;
}

.sub__rec_method01 .sub__row {
    display: flex;
    justify-content: space-between;
}

.sub__rec_method01 .sub__row .column {
    width: 30%;
    text-align: center;
}

.sub__rec_method01 .sub__row .column .img_box {
    margin-bottom: 40px;
}

.sub__rec_method01 .sub__row .column .text_box {
}

.sub__rec_method01 .sub__row .column .text_box .icon {
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 30px;
}

.sub__rec_method01 .sub__row .column .text_box h3 {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 900;
}

.sub__rec_method01 .sub__row .column .text_box p {
    color: #666;
    font-size: 16px;
    transform: skew(1deg);
    line-height: 30px;
}

@media screen and (max-width: 1440px) {
    .sub__rec_method01 {
        width:90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__rec_method01 h2 {
        font-size:28px;
        text-align: center;
    }

    .sub__rec_method01 .sub__row {
        flex-direction: column;
    }

    .sub__rec_method01 .sub__row .column {
        width: 100%;
        margin-bottom: 50px;
    }

    .sub__rec_method01 .sub__row .column .img_box {
        margin-bottom: 15px;
    }
}

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

.sub__rec_method02 {
    width: 100%;
    background: #f5f5f5;
    padding: 100px 0;
    margin-bottom: 150px;
}

.sub__rec_method02 .section__inner {
    margin: 0 auto;
    display: block;
}

.sub__rec_method02 h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
    line-height: 1;
}

.sub__rec_method02 .sub__row {
    display: flex;
    justify-content: space-between;
}

.sub__rec_method02 .sub__row .column {
    text-align: center;
}

.sub__rec_method02 .sub__row .column .img_box {
    margin-bottom: 20px;
    position: relative;
}

.sub__rec_method02 .sub__row .column dt {
    color: #e5151f;
    font-size: 18px;
    font-weight: 400;
}

.sub__rec_method02 .sub__row .column dl {
    color: #333;
    font-size: 20px;
    font-weight: 700;
}

.sub__rec_method02 .sub__row .column:nth-of-type(1) .img_box::after {
    content: '';
    box-sizing: border-box;
    border: 2px solid #e5151f;
    background: #fff;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(40%, -50%);
    border-radius: 50%;
}

.sub__rec_method02 .sub__row .column:nth-of-type(3) .img_box::after {
    content: '';
    box-sizing: border-box;
    border: 2px solid #e5151f;
    background: #fff;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -2px);
    border-radius: 50%;
}

.sub__rec_method02 .sub__row .column:nth-of-type(5) .img_box::after {
    content: '';
    box-sizing: border-box;
    border: 2px solid #e5151f;
    background: #fff;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-40%, -50%);
    border-radius: 50%;
}

.sub__rec_method02 .sub__row .dot_wrap {
    width: 90px;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub__rec_method02 .sub__row .dot_wrap .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ddd;
}

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

@media screen and (max-width: 1024px) {
    .sub__rec_method02 h2 {
        font-size:28px;
        text-align: center;
    }

    .sub__rec_method02 .sub__row .dot_wrap {
        display: none;
    }

    .sub__rec_method02 .sub__row {
        flex-wrap: wrap;
    }

    .sub__rec_method02 .sub__row .column {
        margin-bottom: 40px;
        width: 48%;
        margin-right: 2%;
    }

    .sub__rec_method02 .sub__row .column:nth-of-type(2n) {
        margin-right: 0;
    }

    .sub__rec_method02 .sub__row .column .img_box {
        width: fit-content;
        margin: 0 auto;
    }
}

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

.sub__rec_method03 {
    width: 1280px;
    margin: 0 auto 100px;
}

.sub__rec_method03 h2 {
    font-size: 40px;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
    line-height: 1;
}

.sub__rec_method03 .sub__row {
    display: flex;
    flex-wrap: wrap;
}

.sub__rec_method03 .sub__row .column {
    width: 290px;
    margin-right: 40px;
    text-align: center;
    margin-bottom: 50px;
}

.sub__rec_method03 .sub__row .column:nth-of-type(4n) {
    margin-right: 0;
}

.sub__rec_method03 .sub__row .column .img_box {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
}

.sub__rec_method03 .sub__row .column .img_box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    transition: 0.4s cubic-bezier(.25,.08,.61,.96);
}

.sub__rec_method03 .sub__row .column:hover .img_box::after {
    top: 100%;
}

.sub__rec_method03 .sub__row .column .img_box .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    opacity: 1;
    transition: 0.4s cubic-bezier(.25,.08,.61,.96);
}

.sub__rec_method03 .sub__row .column:hover .img_box .icon {
    top: 45%;
    opacity: 0;
}

.sub__rec_method03 .sub__row .column .text_box {
    border: 1px solid #e9e9e9;
    min-height: 233px;
    padding: 30px 0 0;
}

.sub__rec_method03 .sub__row .column .text_box h3 {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 15px;
}

.sub__rec_method03 .sub__row .column .text_box p {
    color: #666;
    font-size: 16px;
    transform: skew(1deg);
    width: 90%;
    margin: 0 auto;
}

@media screen and (max-width: 1440px) {
    .sub__rec_method03 {
        width:100%;
        max-width: 90%;
    }

    .sub__rec_method03 .sub__row .column {
        width: 24%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__rec_method03 h2 {
        font-size:28px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .sub__rec_method03 .sub__row .column {
        width:100%;
        margin-right: 0;
    }

    .sub__rec_method03 .sub__row .column .img_box img {
        width: 100%;
    }

    .sub__rec_method03 .sub__row .column .text_box {
        height: auto;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

/* Recruit method End */
/* Recruit infor Start */
.sub__rec01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 150px;
}

@media screen and (max-width: 1440px) {
    .sub__rec01 {
        max-width:90%;
    }
}

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

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

/* Recruit infor End */
/* Global branch Start */
.sub__global-branch01 {
    width: 100%;
    background: url('images/assets/sub_bg_global.jpg') no-repeat center bottom;
}

.sub__global-branch01 .inner_wrap {
    width: 1280px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.sub__global-branch01 h3 {
    font-size: 54px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.sub__global-branch01 p {
    font-size: 20px;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}

.sub__global-branch01 form {
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
}

.sub__global-branch01 form .select_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sub__global-branch01 select {
    height: 60px;
    border: 1px solid #ddd;
    font-size: 18px;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.sub__global-branch01 select:nth-of-type(1) {
    color: #333;
    width: 40%;
    margin-right: 20px;
}

.sub__global-branch01 select:nth-of-type(2) {
    color: #aaa;
    width: 50%;
}

.sub__global-branch01 form .input_box {
    position: relative;
    display: flex;
}

.sub__global-branch01 input[type="text"] {
    height: 60px;
    font-size: 18px;
    padding-left: 20px;
    width: 100%;
    margin-right: 10px;
}

.sub__global-branch01 input[type="submit"] {
    width: 100px;
    height: 60px;
    flex-shrink: 0;
    background: #333;
    color: #fff;
    font-size: 18px;
    /* position:absolute; top:0; right:0; background:url('/images/assets/search2.png') no-repeat center; background-size:40%;*/
    border: 0;
}

.sub__global-branch01 input[type="submit"]:hover {
    background: #e5151f;
}

.sub__global-branch01 input::placeholder {
    color: #aaa;
}

@media screen and (max-width: 1440px) {
    .sub__global-branch01 .inner_wrap {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__global-branch01 h3 {
        font-size:28px;
    }

    .sub__global-branch01 p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .sub__global-branch01 form {
        width:100%;
    }

    .sub__global-branch01 form .select_box {
        display: block;
    }

    .sub__global-branch01 select:nth-of-type(1) {
        width: 100%;
        margin-bottom: 20px;
    }

    .sub__global-branch01 select:nth-of-type(2) {
        width: 100%;
    }

    .sub__global-branch01 form .input_box {
        flex-direction: column;
    }

    .sub__global-branch01 input[type="text"] {
        width: 100%;
        margin-bottom: 20px;
    }

    .sub__global-branch01 input[type="text"]::placeholder {
        font-size: 16px;
    }

    .sub__global-branch01 input[type="submit"] {
        width: 100%;
    }
}

.sub__global-branch02 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
}

.sub__global-branch02 .global__column {
    height: 900px;
}

.sub__global-branch02 .global__column.global__side {
    max-width: 650px;
    width: 32%;
    border: 1px solid #ddd;
    padding: 60px 50px 80px;
}

.sub__global-branch02 .global__column.global__side .global__side-header {
    font-size: 16px;
    color: #666;
    transform: skew(0.028deg);
    margin-bottom: 15px;
}

.sub__global-branch02 .global__column.global__side .global__side-header span {
    color: #333;
}

.sub__global-branch02 .global__column.global__side .global__side-body {
    position: relative;
}

.sub__global-branch02 .global__column.global__side .global__side-body ul {
    border-top: 2px solid #333;
    margin-right: 20px;
    overflow-y: auto;
    height: 730px;
}

.sub__global-branch02 .global__column.global__side .global__list-item {
    padding: 30px 0;
    border-bottom: 1px solid #ddd;
}

.sub__global-branch02 .global__column.global__side .global__list-item.selected .list-title {
    font-size: 22px;
    color: #e5151f;
    font-weight: 700;
    margin-bottom: 15px;
}

.sub__global-branch02 .global__column.global__side .global__list-item .list-title {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    margin-bottom: 15px;
}

.sub__global-branch02 .global__column.global__side .global__list-item .list-addr {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    transform: skew(0.028deg);
}

.sub__global-branch02 .global__column.global__side .global__list-item .list-tel {
    font-size: 16px;
    color: #666;
    display: inline-block;
    transform: skew(0.028deg);
    margin-right: 40px;
}

.sub__global-branch02 .global__column.global__side .global__list-item .list-fax {
    font-size: 16px;
    color: #666;
    display: inline-block;
    transform: skew(0.028deg);
}

.sub__global-branch02 .global__column.global__side .global__list-item .list-tel span, .sub__global-branch02 .global__column.global__side .global__list-item .list-fax span, .sub__global-branch02 .global__column.global__side .global__list-item .list-email span {
    color: #e5151f;
    vertical-align: baseline;
}

.sub__global-branch02 .global__column.global__side .global__scroll-bar-track {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: #ddd;
    overflow: hidden;
}

.sub__global-branch02 .global__column.global__side .global__scroll-bar {
    position: relative;
    top: 0;
    left: 0;
    width: 5px;
    background: #999;
    height: 40px;
}

.sub__global-branch02 .global__column.global__map {
    width: 68%;
    position: relative;
}

.sub__global-branch02 .global__column.global__map iframe {
    width: 100%;
    height: 100%;
}

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

@media screen and (max-width: 1024px) {
    .sub__global-branch02 {
        flex-direction:column;
    }

    .sub__global-branch02 .global__column.global__side {
        width: 100%;
        order: 2;
        padding: 30px 25px 40px;
        height: 500px;
        max-width: 100%;
    }

    .sub__global-branch02 .global__column.global__side .global__side-body ul {
        height: 400px;
    }

    .sub__global-branch02 .global__column.global__map {
        width: 100%;
        order: 1;
    }

    .sub__global-branch02 .global__column {
        height: 400px;
    }
}

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

/* Gloval branch End */
/* Contact contact us Start */
.sub__contact_us01 {
    width: 1280px;
    margin: 0 auto 60px;
}

.sub__contact_us01 h2 {
    font-size: 36px;
    color: #333;
    line-height: 50px;
    font-weight: 900;
}

@media screen and (max-width: 1440px) {
    .sub__contact_us01 {
        width:100%;
        max-width: 90%;
        margin: 0 auto 50px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__contact_us01 h2 {
        font-size:28px;
    }
}

.sub__contact_us02 {
    width: 1280px;
    margin: 0 auto 0px;
    border-top: 2px solid #33333300;
}

.sub__contact_us02 .form__row {
    display: flex;
    border-bottom: 1px solid #f2f2f245;
    padding: 13px;
    align-items: flex-start;
}

.sub__contact_us02 .form__row:last-child {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    border-bottom: 0;
}

.sub__contact_us02 .agreeCheck {
    border-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
}

.sub__contact_us02 .agreeCheck .modal_title {
    font-size: 26px;
    color: #333;
    font-weight: 900;
    margin-bottom: 10px;
}

.sub__contact_us02 .agreeCheck > div {
    height: 147px;
    border-top: 2px solid #333;
    overflow-y: scroll;
    margin-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.sub__contact_us02 .agreeCheck input[type="checkbox"] {
    display: none;
}

.sub__contact_us02 .agreeCheck input[type="checkbox"]:checked+label::after {
    background: url(/images/assets/checked.jpg) no-repeat center;
    border: 0;
}

.sub__contact_us02 .agreeCheck label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #666;
    font-weight: 400;
    transform: skew(0.028deg);
}

.sub__contact_us02 .agreeCheck label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
}

.sub__contact_us02 .agreeCheck span {
    margin-left: 5px;
    color: #333;
    text-decoration: underline;
    font-weight: 700;
    transform: skew(0.028deg);
}

.sub__contact_us02 .form__row:last-child button, .sub__contact_us02 .form__row:last-child input[type="submit"] {
    width: 220px;
    height: 70px;
    border: 0;
    box-shadow: none;
    font-size: 18px;
}

.sub__contact_us02 .form__row:last-child button {
    margin-right: 10px;
    border: 2px solid #ddd;
    background: transparent;
    color: #666;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.sub__contact_us02 .form__row:last-child button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    transition: 0.3s cubic-bezier(0.33, 0.01, 0, 0.37);
    top: 100%;
    left: 0;
    z-index: -1;
}

.sub__contact_us02 .form__row:last-child button:hover {
    color: #fff;
}

.sub__contact_us02 .form__row:last-child button:hover::after {
    top: 0;
}

.sub__contact_us02 .form__row:last-child input[type="submit"] {
    background: #000000;
    color: #fff;
}

.sub__contact_us02 .form__row .column:first-child {
    width: 25%;
}

.sub__contact_us02 .form__row .column:first-child p {
    color: #ffffff;
    font-weight: 600;
    transform: skew(1deg);
}

.sub__contact_us02 .form__row .column:first-child .required {
    margin-left: 5px;
    color: #e23008;
    font-family: 'NanumSquare', sans-serif;
}

.sub__contact_us02 .form__row .column:nth-of-type(2) {
    display: flex;
    align-items: center;
}

.sub__contact_us02 .form__row.division .column > div {
    display: flex;
    align-items: center;
}

.sub__contact_us02 .form__row.division .column input[type="radio"] {
    display: none;
}

.sub__contact_us02 .form__row.division .column label {
    padding-left: 30px;
    position: relative;
    cursor: pointer;
    margin-right: 50px;
    transform: skew(1deg);
    color: #666;
}

.sub__contact_us02 .form__row.division .column label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.sub__contact_us02 .form__row.division .column input[type="radio"]:checked + label::after {
    border: 7px solid #e5151f;
}

.sub__contact_us02 .form__row input[type="text"], .sub__contact_us02 .form__row textarea, .sub__contact_us02 .form__row select {
    border: 1px solid #616161;
    height: 45px;
    min-width: 150px;
    padding-left: 10px;
    margin-right: 5px;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
}

.sub__contact_us02 .form__row input[type="text"]:focus, .sub__contact_us02 .form__row textarea:focus, .sub__contact_us02 .form__row select:focus {
    outline: 1px solid #ffffff;
}

.sub__contact_us02 .form__row span {
    margin-right: 5px;
}

.sub__contact_us02 .form__row.text input[type="text"] {
    width: 420px;
}

.sub__contact_us02 .form__row.mobile input[type="text"] {
    max-width: 100px;
    min-width: 0;
}

.sub__contact_us02 .form__row.mobile input[type="text"] + input[type="text"] {
    min-width: 316px;
}

.sub__contact_us02 .form__row.email input[type="text"] {
    width: 200px;
}

.sub__contact_us02 .form__row.email select {
    width: 150px;
}

.sub__contact_us02 .form__row.type select:first-child {
    width: 200px;
}

.sub__contact_us02 .form__row.type select:nth-of-type(2) {
    width: 150px;
}

.sub__contact_us02 .form__row.inquiries .column:nth-of-type(2) {
    width: 70%;
}

.sub__contact_us02 .form__row.inquiries .column:nth-of-type(2) textarea {
    height: 150px;
}

@media screen and (max-width: 1440px) {
    .sub__contact_us02 {
        width:100%;
        max-width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__contact_us02 .form__row {
        flex-direction:column;
        align-items: flex-start;
    }

    .sub__contact_us02 .form__row .column:first-child {
        margin-bottom: 20px;
    }

    .sub__contact_us02 .form__row span {
        margin: 0;
    }

    .sub__contact_us02 .agreeCheck label {
        margin-bottom: 10px;
    }

    .sub__contact_us02 .form__row:last-child {
        flex-direction: row;
    }
}

@media screen and (max-width: 768px) {
    .sub__contact_us02 .form__row.division .column label {
        width:30%;
        margin-bottom: 10px;
    }

    .sub__contact_us02 .form__row.inquiries .column:nth-of-type(2) {
        width: 100%;
    }

    .sub__contact_us02 .form__row .column {
        flex-wrap: wrap;
        width: 100%;
    }

    .sub__contact_us02 .form__row.email input[type="text"] {
        width: 45%;
        min-width: 0;
    }

    .sub__contact_us02 .form__row.mobile input[type="text"] {
        width: 29%;
    }

    .sub__contact_us02 .form__row span {
        margin-right: 5px;
    }

    .sub__contact_us02 .form__row.email select {
        width: 100%;
        margin-top: 10px;
    }

    .sub__contact_us02 .form__row:last-child {
        flex-direction: column;
    }

    .sub__contact_us02 .form__row:last-child button {
        margin-right: 0;
    }

    .sub__contact_us02 .form__row:last-child button, .sub__contact_us02 .form__row:last-child input[type="submit"] {
        width: 100%;
    }

    .sub__contact_us02 .form__row:last-child input[type="submit"] {
        order: 1;
        margin-bottom: 10px;
    }

    .sub__contact_us02 .form__row:last-child button {
        order: 2;
    }
}

/* Contact contact us End */
/* Contact location Start */
.sub__location01 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.sub__location01 h3 {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
}

.sub__location01 h3 mark {
    background: transparent;
    font-weight: 900;
}

.sub__location02 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 150px;
}

.sub__location02 iframe {
    width: 100%;
    min-height: 520px;
    border: 1px solid #ddd;
    margin-bottom: 40px;
}

.sub__location02 .infor_table {
    border-top: 2px solid #3f3f3f;
}

.sub__location02 .infor_table .infor_row {
    border-bottom: 1px solid #474747;
    padding: 50px 0;
    display: flex;
}

.sub__location02 .infor_table h4 {
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
}

.sub__location02 .infor_table h5 {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
}

.sub__location02 .infor_table .infor_column {
    width: 100%;
}

.sub__location02 .infor_table .infor_column:first-child {
    width: 25%;
}

.sub__location02 .infor_table .infor_column p {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 20px;
}

.sub__location02 .infor_table .infor_column .infor_detail {
    display: flex;
}

.sub__location02 .infor_table .infor_column .infor_detail .infor_block {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.sub__location02 .infor_table .infor_column .infor_detail .infor_block p {
    font-size: 16px;
    color: #ffffff;
}

.sub__location02 .infor_table .infor_column .icon {
    width: 22px;
    height: 22px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.sub__location02 .infor_table .infor_column .icon.tel {
    /*background-image: url(images/assets/tel_icon.png);*/
}

.sub__location02 .infor_table .infor_column .icon.fax {
    /* background-image: url(images/assets/fax_icon.png)*/
    ; }

.sub__location02 .infor_table .infor_column .icon.email {
    /*background-image: url(images/assets/mail_icon.png)*/
    ; }

.sub__location02 .infor_table .infor_column .icon.l_green {
    /*background-image: url(images/assets/busbg.png)*/
    ; }

/*{background:#90c73d; color:#fff; font-size:14px; font-weight:700; padding:2px 10px; border-radius:100px; width:auto; display:flex; align-items:center; margin-right:20px; height:inherit;}*/
.sub__location02 .infor_table .infor_column .icon.green {
    background: #3cc344;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 100px;
    width: auto;
    display: flex;
    align-items: center;
    margin-right: 20px;
    height: inherit;
}

.sub__location02 .infor_table .infor_column .icon.purple {
    background: #7f49ca;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 100px;
    width: auto;
    display: flex;
    align-items: center;
    margin-right: 20px;
    height: inherit;
}

.sub__location02 .infor_table .infor_column .icon+p {
    margin-bottom: 0;
}

@media screen and (max-width: 1440px) {
    .sub__location01 {
        width:90%;
    }

    .sub__location02 {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__location01 h3 {
        font-size:28px;
    }

    .sub__location02 .infor_table .infor_column:first-child {
        width: 100%;
    }

    .sub__location02 .infor_table .infor_row {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .sub__location02 .infor_table .infor_column .infor_detail {
        flex-direction:column;
    }
}

/* Contact location End */
/* Product list Start */
.sub__prd_list01 {
    width: 1280px;
    margin: 0 auto 150px;
}

.sub__prd_list01 h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}

.sub__prd_list01 ul {
    display: flex;
    flex-wrap: wrap;
}

.sub__prd_list01 ul li {
    width: 400px;
    height: auto;
    text-align: center;
    border: 1px solid #5b5b5b;
    margin-right: 40px;
    margin-bottom: 50px;
    position: relative;
}

.sub__prd_list01 ul li:nth-of-type(3n) {
    margin-right: 0;
}

.sub__prd_list01 .thumb_box {
    padding: 30px 10px;
    width: 100%;
    min-height: 260px;
    position: relative;
}

.sub__prd_list01 .thumb_box a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* max-width: 378px; max-height: 200px;*/
.sub__prd_list01 .thumb_box img {
    max-width: 378px;
    max-height: 200px;
}

.sub__prd_list01 .text_box {
    margin-bottom: 85px;
}

.sub__prd_list01 .text_box .infor_name {
    font-size: 30px;
    font-weight: 700;
    color: #07c3ff;
}

.sub__prd_list01 .text_box .infor_desc {
    font-size: 16px;
    color: #cecece;
    transform: skew(1deg);
    margin-bottom: 20px;
}

.sub__prd_list01 .text_box .infor_output {
    font-size: 15px;
    color: #ffffff;
    transform: skew(1deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub__prd_list01 .text_box .infor_output span {
    color: #ffffff;
    padding: 0 8px;
    border: 1px solid #e5b815;
    border-radius: 100px;
    font-size: 14px;
    margin-right: 10px;
}

.sub__prd_list01 .item_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0f0f0f;
    height: 50px;
    border-top: 1px solid #898989b3;
}

.sub__prd_list01 .item_bottom a {
    display: block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-size: 18px;
    transform: skew(0.028deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* max-width: 378px; max-height: 200px;*/
.sub__prd_list01 .thumb_box img {
    max-width: 378px;
    max-height: 200px;
}

.sub__prd_list01 ul li:hover {
    border: 1px solid #ffffff;
    position: relative;
}

.sub__prd_list01 ul li:hover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    top: -1px;
    left: 0;
    background: linear-gradient(to right, #ffffff 50%, #a5a5a5 50% 100%);
}

.sub__prd_list01 ul li:hover .item_bottom {
    background: #212121;
    border-top: 1px solid #ffffff;
}

.sub__prd_list01 ul li:hover .item_bottom a {
    color: #fff;
}

@media screen and (max-width: 1440px) {
    .sub__prd_list01 {
        width:100%;
        max-width: 90%;
    }

    .sub__prd_list01 ul li {
        width: 32%;
        margin-right: 2%;
    }

    .sub__prd_list01 ul li:nth-of-type(3n) {
        margin-right: 0;
    }

    /*  max-width: 280px;  max-height: 120px;*/
    .sub__prd_list01 .thumb_box img {
        max-width: 280px;
        max-height: 220px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__prd_list01 ul li {
        width:48%;
        margin-right: 2%;
    }

    .sub__prd_list01 ul li:nth-of-type(2n) {
        margin-right: 0;
    }

    .sub__prd_list01 ul li:nth-of-type(3n) {
        margin-right: 2%;
    }

    .sub__prd_list01 ul li {
        height: auto;
    }

    .sub__prd_list01 .text_box {
        margin-bottom: 80px;
    }
}

@media screen and (max-width: 768px) {
    .sub__prd_list01 ul li {
        width:100%;
        margin-bottom: 20px;
        margin-right: 0;
    }

    .sub__prd_list01 ul li:nth-of-type(2n) {
        margin-right: 0;
    }

    .sub__prd_list01 ul li:nth-of-type(3n) {
        margin-right: 0;
    }
}

.prd_list_pagenation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.prd_list_pagenation ol {
    display: flex;
    justify-content: center;
}

.prd_list_pagenation a {
    font-size: 18px;
    color: #666;
    margin: 0 10px;
}

.prd_list_pagenation a:hover {
    color: #a5151d;
    ;}

.prd_list_pagenation .nowPage {
    color: #e5151f;
}

.goto_firstPage {
    width: 15px;
    height: 15px;
    background: url('images/assets/pagenation_first.png') no-repeat center;
}

.goto_prevPage {
    width: 15px;
    height: 15px;
    background: url('images/assets/pagenation_prev.png') no-repeat center;
}

.goto_nextPage {
    width: 15px;
    height: 15px;
    background: url('images/assets/pagenation_last.png') no-repeat center;
}

.goto_lastPage {
    width: 15px;
    height: 15px;
    background: url('images/assets/pagenation_next.png') no-repeat center;
}

/* Product list End */
/* Product view Start */
/*상부간격*/
.sub__prd_view01 {
    width: 1280px;
    margin: 70px auto 0;
    padding-top: 0px;
    position: relative;
    margin-bottom: 0px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub__prd_view01 .img_box {
    position: relative;
    transition: 0.2s ease-in-out;
    text-align: center;
}

.sub__prd_view01.on > .img_box {
    opacity: 0.4;
}

.sub__prd_view01 .img_box .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff101096;
    animation: flash 1.3s ease-in-out infinite;
    box-shadow: 0 0 0 5px rgba(229,63,71.3);
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: 'Dotum', sans-serif;
    background-image: url('images/assets/plus.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

.sub__prd_view01 .img_box .dot:hover {
    animation: none;
    box-shadow: none;
}

.sub__prd_view01 .prd-view__modal_container {
    display: none;
}

.sub__prd_view01.on .prd-view__modal_container.on {
    position: absolute;
    display: flex;
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
    border: 1px solid #ffffff00;
    box-shadow: 20px 20px 40px #000000;
    background: #4b4b4b;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container {
    width: 360px;
    position: relative;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content {
    width: 360px;
    height: 480px;
    background: rgb(45 47 49);
    display: flex;
    flex-direction: column;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content .img_box {
    height: 380px;
    display: flex;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content .img_box img {
    width: 100%;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content .text_box {
    padding: 5px;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content .text_box .modal_title {
    font-size: 20px;
    font-weight: 900;
    color: #f9f9f9;
    margin-bottom: 10px;
}

.sub__prd_view01.on .prd-view__modal_container .modal__content .text_box .modal_desc {
    font-size: 15px;
    color: #dbdbdb;
    line-height: 1.6;
    transform: skew(0.028deg);
}

.sub__prd_view01.on .prd-view__modal_container .modal__close {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('images/assets/close_white.png') no-repeat center;
    background-size: 16px;
    background-color: #000000;
    cursor: pointer;
    top: -1px;
    right: -40px;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container .swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
    width: 30px;
    height: 4px;
    background: #ddd;
    opacity: 1;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #e5151f;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container .handler {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container .handler .prev {
    background: url('images/assets/prev.png') no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.sub__prd_view01.on .prd-view__modal_container .swiper-container .handler .next {
    background: url('images/assets/next.png') no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/*90%*/
@media screen and (max-width: 1440px) {
    .sub__prd_view01 {
        width: 100%;
        max-width: 100%;
    }

    .sub__prd_view01.on .prd-view__modal_container.on {
        position: fixed;
        z-index: 995;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        width: 90%;
        max-width: 360px;
    }

    .sub__prd_view01.on .prd-view__modal_container.on .modal__close {
        top: -41px;
        right: -1px;
    }
}

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

@media screen and (max-width: 768px) {
    .sub__prd_view01 {
        margin: 45px auto 0;
    }
}

@keyframes flash {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255,0,0,0.3);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(255,0,0,0.3);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(255,0,0,0);
    }
}

.sub__prd_view02 {
    width: 100%;
}

.sub__prd_view02 .inner_wrap {
    width: 1280px;
    margin: 0 auto;
}

.sub__prd_view02 .view__title {
    background: #171717;
    width: 100%;
}

.sub__prd_view02 .view__title .inner_wrap {
    display: flex;
    padding: 100px 0;
}

.sub__prd_view02 .view__title h2 {
    font-size: 50px;
    font-weight: 700;
    color: #ffffff;
    width: 400px;
    margin-right: 40px;
    line-height: 1;
    letter-spacing: -1px;
}

.sub__prd_view02 .view__title h3 {
    font-size: 15px;
    font-weight: 400;
    color: #e5151f;
    display: block;
}

.sub__prd_view02 .view__title p {
    font-size: 16px;
    color: #ffffff;
    transform: skew(0.028deg);
    width: 840px;
    line-height: 2;
}

.sub__prd_view02 .view__summary {
    background: url('images/assets/view01.jpg') no-repeat center;
    background-size: cover;
    width: 100%;
}

.sub__prd_view02 .view__summary ul.inner_wrap {
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.sub__prd_view02 .view__summary ul.inner_wrap li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub__prd_view02 .view__summary ul.inner_wrap li .icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
}

.sub__prd_view02 .view__summary ul.inner_wrap li .icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    width: 120px;
    height: 120px;
}

.sub__prd_view02 .view__summary ul.inner_wrap li p {
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.sub__prd_view02 .view__features {
    width: 1280px;
    margin: 150px auto;
    display: flex;
}

.sub__prd_view02 .view__features h3 {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    width: 290px;
    margin-right: 40px;
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.sub__prd_view02 .view__features ul {
}

.sub__prd_view02 .view__features ul li {
    font-size: 18px;
    color: #ffffff;
    line-height: 40px;
    padding-left: 35px;
    position: relative;
}

.sub__prd_view02 .view__features ul li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('images/assets/check.png');
    background-size: 10px 7px;
    background-position: 5px 7px;
    background-repeat: no-repeat;
}

.sub__prd_view02 .view__spechifivation {
    width: 1280px;
    margin: 0 auto 150px;
    display: flex;
}

.sub__prd_view02 .view__spechifivation h3 {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    width: 290px;
    margin-right: 40px;
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
    margin-bottom: 30px;
}

.sub__prd_view02 .view__spechifivation table {
    width: 100%;
    border-top: 2px solid #3f3f3f;
}

.sub__prd_view02 .view__spechifivation table .view__table-title {
    background: #171717;
    font-size: 15px;
    color: #ffffff;
    font-weight: 700;
}

.sub__prd_view02 .view__spechifivation table tr {
    border-bottom: 1px solid #696969;
    height: 53px;
    vertical-align: center;
}

.sub__prd_view02 .view__spechifivation table tr td {
    padding-left: 10px;
    color: #ffffff;
    font-size: 16px;
}

.sub__prd_view02 .view__spechifivation table tr td strong {
    font-size: 15px;
    color: #222;
    font-weight: 700;
    width: 50px;
}

.sub__prd_view02 .view__app {
    width: 100%;
    margin: 0 auto 150px;
    display: flex;
    background: #171717;
    padding: 100px 0 120px;
}

.sub__prd_view02 .view__app h3 {
    font-size: 40px;
    font-weight: 700;
    color: #878787;
    margin-bottom: 40px;
}

.sub__prd_view02 .view__app .view__app-container {
    display: flex;
    justify-content: space-between;
}

.sub__prd_view02 .view__app .view__app-content {
    max-width: 400px;
    width: 100%;
}

.sub__prd_view02 .view__app .view__app-content .media_box {
    margin-bottom: 20px;
    display: flex;
    cursor: pointer;
}

.sub__prd_view02 .view__app .view__app-content p {
    font-size: 20px;
    color: #878787;
}

.sub__prd_view02 .view__etc {
    width: 1280px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
}

.sub__prd_view02 .view__etc-column {
    width: 620px;
}

.sub__prd_view02 .view__etc-column h3 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.sub__prd_view02 .view__etc-column .view__etc-content-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.sub__prd_view02 .view__etc-column .view__etc-content-wrap .swiper-container {
    width: 100%;
    padding-bottom: 50px;
}

.sub__prd_view02 .view__etc-column .view__etc-content-wrap .handler {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__prd_view02 .view__etc-column .view__etc-content-wrap .nextBtn {
    background: url(images/assets/next.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-right: 1px;
    pointer-events: all;
}

.sub__prd_view02 .view__etc-column .view__etc-content-wrap .prevBtn {
    background: url(images/assets/prev.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-left: 1px;
    pointer-events: all;
}

.sub__prd_view02 .view__etc-column .view__etc-content .img_box {
    width: 100%;
    /*height:230px;*/
    border: 1px solid #ddd;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    display: flex;
    min-height: 230px;
}

.sub__prd_view02 .view__etc-column .view__etc-content .img_box+p {
    height: 0;
}

.sub__prd_view02 .view__etc-column .swiper-container-horizontal>.swiper-scrollbar {
    border-radius: 0;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: #dedede;
}

.sub__prd_view02 .view__etc-column .swiper-scrollbar-drag {
    border-radius: 0;
    background: #666;
}

.sub__prd_view02 .view__etc-column .view__etc-content .img_box:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    background-image: url('images/assets/feed_plus.png');
    background-position: center;
    background-repeat: no-repeat;
}

.sub__prd_view02 .view__bottom {
    width: 1280px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.sub__prd_view02 .view__bottom .view__button {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 50px;
    margin-right: 50px;
    cursor: pointer;
}

.sub__prd_view02 .view__bottom .view__button:last-child {
    margin-right: 0;
}

.sub__prd_view02 .view__bottom .view__button.button_rfq {
    border: 2px solid #ddd;
    color: #666;
    background: transparent;
}

.sub__prd_view02 .view__bottom .view__button.button_download {
    background: #e5151f;
    color: #fff;
}

.sub__prd_view02 .view__bottom .view__button.button_download .down_marker {
    background: url(images/assets/download.png) no-repeat center;
    width: 16px;
    height: 14px;
    margin-left: 10px;
}

.sub__prd_view02 .view__bottom .view__button.button_list {
    background: #171717;
    color: #fff;
    cursor: pointer;
    transition: 0.8s;
    width: 100%;
    border-radius: 20px;
}

.sub__prd_view02 .view__bottom .view__button.button_list:hover {
    background: #bababa;
    color: #000000;
}

.sub__prd_view02 .view__bottom .view__button.button_list1 {
    background: #171717;
    color: #fff;
    cursor: pointer;
    transition: 0.8s;
    width: 100%;
    border-radius: 20px;
}

.sub__prd_view02 .view__bottom .view__button.button_list1:hover {
    background: #bababa;
    color: #000000;
}

@media screen and (max-width: 1440px) {
    .sub__prd_view02 .inner_wrap {
        width:100%;
        max-width: 90%;
    }

    .sub__prd_view02 .view__features {
        width: 100%;
        max-width: 90%;
    }

    .sub__prd_view02 .view__spechifivation {
        width: 100%;
        max-width: 90%;
    }

    .sub__prd_view02 .view__etc {
        width: 100%;
        max-width: 90%;
    }

    .sub__prd_view02 .view__bottom {
        width: 100%;
        max-width: 80%;
    }

    .sub__prd_view02 .view__etc-column {
        width: 49%;
        margin-right: 2%;
    }

    .sub__prd_view02 .view__etc-column:last-child {
        margin-right: 0;
    }

    .sub__prd_view02 .view__title h2 {
        width: auto;
    }

    .sub__prd_view02 .view__title p {
        width: 50%;
        margin-left: 50px;
    }
}

@media screen and (max-width: 1024px) {
    .sub__prd_view02 .view__etc {
        flex-direction:column;
    }

    .sub__prd_view02 .view__etc-column {
        width: 100%;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content .img_box img {
        width: 100%;
    }

    .sub__prd_view02 .view__title .inner_wrap {
        padding: 60px 0;
    }

    .sub__prd_view02 .view__title .inner_wrap {
        flex-direction: column;
    }

    .sub__prd_view02 .view__title p {
        width: 100%;
        margin-left: 0;
    }

    .sub__prd_view02 .view__title h2 {
        font-size: 42px;
        margin-bottom: 10px;
    }

    .sub__prd_view02 .view__title h3 {
        margin-bottom: 30px;
        font-size: 18px;
    }

    .sub__prd_view02 .view__summary {
        padding: 30px 0;
    }

    .sub__prd_view02 .view__summary ul.inner_wrap {
        flex-wrap: wrap;
        height: auto;
        align-items: flex-start;
    }

    .sub__prd_view02 .view__summary ul.inner_wrap li {
        width: 48%;
        margin-right: 2%;
        margin-bottom: 20px;
    }

    .sub__prd_view02 .view__summary ul.inner_wrap li:nth-of-type(2n) {
        margin-right: 0;
    }

    .sub__prd_view02 .view__features {
        flex-direction: column;
        margin-bottom: 75px;
        margin-top: 75px;
    }

    .sub__prd_view02 .view__features h3 {
        margin-bottom: 30px;
    }

    .sub__prd_view02 .view__spechifivation {
        flex-direction: column;
        margin-bottom: 75px;
    }

    .sub__prd_view02 .view__spechifivation h3 {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .sub__prd_view02 .view__app {
        padding-top:60px;
        padding-bottom: 60px;
        margin-bottom: 75px;
    }

    .sub__prd_view02 .view__app .view__app-container {
        flex-direction: column;
    }

    .sub__prd_view02 .view__app .view__app-content {
        margin-bottom: 30px;
        max-width: 100%;
    }

    .sub__prd_view02 .view__app .view__app-content .media_box {
        margin-bottom: 10px;
        width: 100%;
    }

    .sub__prd_view02 .view__app .view__app-content .media_box img {
        width: 100%;
    }

    .sub__prd_view02 .view__bottom {
        flex-direction: column;
    }

    .sub__prd_view02 .view__bottom .view__button {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content .img_box {
        min-height: 0;
        height: 154px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content-wrap .swiper-container {
        padding-bottom: 70px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content-wrap .nextBtn, .sub__prd_view02 .view__etc-column .view__etc-content-wrap .prevBtn {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 768px) {
    .sub__prd_view02 .view__app {
        padding-top:60px;
        padding-bottom: 60px;
        margin-bottom: 75px;
    }

    .sub__prd_view02 .view__app .view__app-container {
        flex-direction: column;
    }

    .sub__prd_view02 .view__app .view__app-content {
        margin-bottom: 30px;
        max-width: 100%;
    }

    .sub__prd_view02 .view__app .view__app-content .media_box {
        margin-bottom: 10px;
        width: 100%;
    }

    .sub__prd_view02 .view__app .view__app-content .media_box img {
        width: 100%;
    }

    .sub__prd_view02 .view__bottom {
        flex-direction: column;
    }

    .sub__prd_view02 .view__bottom .view__button {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content .img_box {
        min-height: 0;
        height: 154px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content-wrap .swiper-container {
        padding-bottom: 70px;
    }

    .sub__prd_view02 .view__etc-column .view__etc-content-wrap .nextBtn, .sub__prd_view02 .view__etc-column .view__etc-content-wrap .prevBtn {
        width: 24px;
        height: 24px;
    }
}

.sub__prd_view03 {
    background: url('images/assets/feeding_bg.jpg') no-repeat center;
    width: 100%;
    padding: 100px 0;
    position: relative;
    background-size: cover;
}

.sub__prd_view03 .swiper-container {
    width: 1280px;
    margin: 0 auto;
}

.sub__prd_view03 .handler {
    position: absolute;
    top: calc(50% + 30px);
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.sub__prd_view03 .nextBtn {
    background: url(images/assets/right.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-right: 1px;
    pointer-events: all;
}

.sub__prd_view03 .prevBtn {
    background: url(images/assets/left.png) no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-left: 1px;
    pointer-events: all;
}

.sub__prd_view03 h3 {
    width: 1280px;
    margin: 0 auto 30px;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

.sub__prd_view03 ul {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    /*justify-content:space-between;*/
    align-items: stretch;
}

.sub__prd_view03 ul li {
    width: 290px;
    text-align: center;
    background: #fff;
    border: 2px solid #fff;
    padding: 30px 0 50px;
    min-height: 420px;
}

.sub__prd_view03 ul li:hover {
    border: 2px solid #e5151f;
}

.sub__prd_view03 ul li .thumb_box {
    margin-bottom: 20px;
    height: 200px;
    position: relative;
}

.sub__prd_view03 ul li .thumb_box > a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
}

.sub__prd_view03 ul li .text_box .infor_name {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub__prd_view03 ul li .text_box .infor_desc {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    padding: 0 10px;
    overflow: hidden;
    max-height: 40px;
}

.sub__prd_view03 ul li .text_box .infor_output {
    font-size: 14px;
    color: #666;
}

.sub__prd_view03 ul li .text_box .infor_output span {
    color: #e5151f;
    border: 1px solid #e5151f;
    border-radius: 100px;
    padding: 0 5px;
    margin-right: 10px;
}

@media screen and (max-width: 1440px) {
    .sub__prd_view03 .swiper-container, .sub__prd_view03 h3 {
        width:100%;
        max-width: 90%;
    }

    .sub__prd_view03 ul {
        width: 100%;
        max-width: 100%;
    }
}

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

@media screen and (max-width: 768px) {
    /* .sub__prd_view03 ul li .thumb_box {height:auto;} */ .sub__prd_view03 {
        background-size: cover;
    }
}

/* Product view End */
/* RFQ PAGE START */
.sub__rfq {
    width: 100%;
    max-width: 1280px;
    margin: 80px auto 150px;
}

.sub__rfq .rfq_header {
    margin-bottom: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub__rfq .rfq_header .rfq_title h2 {
    font-size: 50px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__rfq .rfq_header .rfq_title p {
    font-size: 18px;
    color: #666;
}

.sub__rfq .rfq_header .rfq_progress {
    max-width: 380px;
    width: 100%;
    overflow: Hidden;
}

.sub__rfq .rfq_header .rfq_progress ol {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
}

.sub__rfq .rfq_header .rfq_progress ol::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 5%;
    width: 90%;
    height: 2px;
    background: #ddd;
    z-index: -1;
}

.sub__rfq .rfq_header .rfq_progress ol li {
    position: relative;
    padding: 30px 0;
    font-size: 16px;
    transform: skew(0.028deg);
    color: #999;
    font-weight: 700;
}

.sub__rfq .rfq_header .rfq_progress ol li.progress_on {
    color: #000;
}

.sub__rfq .rfq_header .rfq_progress ol li::after {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #ccc;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sub__rfq .rfq_header .rfq_progress ol li.progress_on::after {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #e5151f;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sub__rfq .rfq_header .rfq_progress ol li:nth-of-type(1)::after {
    content: '1';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sub__rfq .rfq_header .rfq_progress ol li:nth-of-type(2)::after {
    content: '2';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sub__rfq .rfq_header .rfq_progress ol li:nth-of-type(3)::after {
    content: '3';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_header {
    padding: 30px;
    background: #efefef;
    margin-bottom: 30px;
    transition: 0.3s ease-in-out;
    position: relative;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_header p a {
    text-decoration: underline;
    color: #e5151f;
}

.sub__rfq .rfq_content .rfq_select_block.selected .rfq_block_header {
    background: #444;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_header p {
    font-size: 20px;
    color: #333;
    font-weight: 700;
}

.sub__rfq .rfq_content .rfq_select_block.selected .rfq_block_header p {
    color: #fff;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_content {
    display: flex;
    padding: 0 20px 100px;
    flex-wrap: wrap;
    align-items: center;
    /*flex-direction: column;*/
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_content.input-wr {
    flex-direction: column;
    align-items: flex-start;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_content .rfq_content_row {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_content .rfq_subRow {
    border-top: 1px solid #ddd;
    padding-top: 30px;
}

.sub__rfq .rfq_content .rfq_select_block .icon_check {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    max-width: 50%;
}

.sub__rfq .rfq_content .rfq_select_block .icon_check:last-child {
    margin-right: 0;
}

.sub__rfq .rfq_content .rfq_select_block .icon_check input[type="radio"] + label {
    padding: 0;
    margin-right: 0;
}

.sub__rfq .rfq_content .rfq_select_block .icon_check input[type="radio"] + label::after {
    display: none;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"], .sub__rfq .rfq_content .rfq_select_block input[type="checkbox"] {
    display: none;
}

.sub__rfq .rfq_content .rfq_select_block label {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.sub__rfq .rfq_content .rfq_select_block label .icon_box {
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 25px;
    text-align: center;
}

.sub__rfq .rfq_content .rfq_select_block label .icon_box img {
    padding: 25px;
}

.sub__rfq .rfq_content .rfq_select_block label p {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    height: 32px;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"]:checked+label .icon_box {
    border: 1px solid #e5151f;
}

.sub__rfq .rfq_content .rfq_select_block input[type="checkbox"]:checked+label .icon_box {
    border: 1px solid #e5151f;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"]:checked+label p {
    color: #333;
    font-weight: 700;
}

.sub__rfq .rfq_content .rfq_select_block input[type="checkbox"]:checked+label p {
    color: #333;
    font-weight: 700;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"] ~ label {
    padding-left: 30px;
    position: relative;
    cursor: pointer;
    margin-right: 50px;
    color: #666;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"] ~ label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"]:checked ~ label::after {
    border: 7px solid #e5151f;
}

.sub__rfq .rfq_content .rfq_select_block .radio_input {
    width: 100%;
    /*max-width:180px;*/
    max-width: 285px;
    margin-right: 20px;
    margin-bottom: 30px;
}

.sub__rfq .rfq_content .rfq_select_block .radio_input:last-child {
    margin-right: 0;
}

.sub__rfq .rfq_content .rfq_select_block .radio_input.col2 {
    width: 100%;
    max-width: 380px;
}

.sub__rfq .rfq_content .rfq_select_block .radio_input.col2 .img_box {
    border: 1px solid #ddd;
    display: flex;
    margin-bottom: 20px;
}

.sub__rfq .rfq_content .rfq_select_block input[type="radio"]:checked ~ .img_box {
    border: 1px solid #e5151f;
}

.sub__rfq .rfq_content .rfq_select_block .text_input {
    display: flex;
    width: 100%;
    /*max-width:380px;*/
    max-width: 600px;
    border-bottom: 1px solid #ddd;
    /*margin-right:20px;*/
    margin-bottom: 30px;
    align-items: center;
}

.sub__rfq .rfq_content .rfq_select_block .text_input:nth-of-type(2n) {
    margin-right: 0;
}

.sub__rfq .rfq_content .rfq_select_block .text_input > span {
    margin: 0 5px;
}

.sub__rfq .agreeCheck {
    border-bottom: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
}

.sub__rfq .agreeCheck .modal_title {
    font-size: 26px;
    color: #333;
    font-weight: 900;
    margin-bottom: 10px;
}

.sub__rfq .agreeCheck > div {
    height: 147px;
    border-top: 2px solid #333;
    overflow-y: scroll;
    margin-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.sub__rfq .agreeCheck input[type="checkbox"] {
    display: none;
}

.sub__rfq .agreeCheck input[type="checkbox"]:checked+label::after {
    background: url(images/assets/checked.jpg) no-repeat center;
    border: 0;
}

.sub__rfq .rfq_content .rfq_select_block .agreeCheck label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #666;
    font-weight: 400;
    transform: skew(0.028deg);
    width: auto;
}

.sub__rfq .agreeCheck label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
}

.sub__rfq .agreeCheck span {
    margin-left: 5px;
    color: #333;
    text-decoration: underline;
    font-weight: 700;
    transform: skew(0.028deg);
}

.sub__rfq .rfq_content .rfq_select_block .text_input select {
    /*width: 40%;*/
    width: 100%;
    border: none;
    padding-right: 30px;
    text-overflow: ellipsis;
    height: 45px;
    padding-left: 20px;
}

.sub__rfq .rfq_content .rfq_select_block .text_input input[type="text"] {
    border: 0;
    font-size: 16px;
    color: #333;
    transform: skew(0.028deg);
}

.sub__rfq .rfq_content .rfq_select_block .text_input input[type="text"]::placeholder {
    color: #aaa;
}

.sub__rfq .rfq_content .rfq_select_block .text_input p {
    display: flex;
    font-size: 16px;
    color: #333;
    flex-shrink: 0;
    width: 150px;
    align-items: center;
}

.sub__rfq .rfq_content .rfq_select_block .text_input p.unit {
    width: 40px;
}

.sub__rfq .required {
    margin-left: 5px;
    color: #e23008;
    font-family: 'NanumSquare', sans-serif;
}

.sub__rfq .infor_marker {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #aaa;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    position: relative;
}

.sub__rfq .infor_marker~img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 400px;
    height: 300px;
    transform: translateY(-50%);
    border: 1px solid #ddd;
}

.sub__rfq .infor_marker:hover {
    background: #666;
}

.sub__rfq .infor_marker:hover~img {
    display: block;
    z-index: 50;
}

.sub__rfq .rfq_content .rfq_nextBtn {
    background: #e5151f;
    display: flex;
    color: #fff;
    border: 0;
    font-size: 18px;
    padding: 20px 60px;
    margin: 0 auto;
}

.sub__rfq.end_rfq .rfq_content {
    text-align: center;
}

.sub__rfq.end_rfq .rfq_content .rfq_complete_msg {
    padding: 100px 0 150px;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
}

.sub__rfq.end_rfq .rfq_content img {
    margin-bottom: 30px;
}

.sub__rfq.end_rfq .rfq_content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__rfq.end_rfq .rfq_content p {
    font-size: 16px;
    transform: skew(0.028deg);
    color: #666;
}

.sub__rfq.end_rfq .rfq_content .rfq_nextBtn {
    background: #666;
    display: inline-block;
}

.sub__rfq .rfq_content .rfq_select_block .rfq_block_content .rfq_content_row.hidden {
    display: none;
}

.sub__rfq .formTitle {
    font-size: 64px;
    font-weight: 700;
    margin-top: 50px;
    padding: 30px;
    text-align: center;
    color: #222;
}

@media screen and (max-width: 1440px) {
    .sub__rfq {
        width:90%;
    }
}

@media screen and (max-width: 1024px) {
    .sub__rfq {
        width:90%;
    }

    .sub__rfq .rfq_header .rfq_title h2 {
        font-size: 28px;
    }

    .sub__rfq .rfq_header {
        flex-direction: column;
    }

    .sub__rfq .rfq_header .rfq_title {
        margin-bottom: 40px;
    }

    .sub__rfq .rfq_content .rfq_select_block .text_input {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 768px) {
    .sub__rfq .formTitle {
        font-size:28px;
    }

    .sub__rfq .rfq_content .rfq_select_block .icon_check:nth-of-type(2n) {
        margin-right: 0;
    }
}

/* RFQ PAGE END */
.exception_prd {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30px;
    left: 0;
}

.exception_prd_infor {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding: 0 10%;
}

.exception_prd .view__button.button_download {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 30px;
    cursor: pointer;
    background: #e5151f;
    color: #fff;
}

.exception_prd .view__button.button_download:hover {
    background: #cc171f;
}

.exception_view__modal_container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 80%;
    height: 80%;
    border: 1px solid #333;
    box-shadow: 20px 20px 40px rgb(0 0 0 / 20%);
    background: #fff;
    z-index: 102;
}

.exception_view__modal_container img {
    height: 100%;
}

.exception_view__modal_container.hidden {
    display: none;
}

.exception_view__modal_container_close {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url(images/assets/close_white.png) no-repeat center;
    background-size: 16px;
    background-color: #333;
    cursor: pointer;
    top: -1px;
    right: -40px;
}

@media screen and (max-width: 768px) {
    .exception_prd_infor {
        padding:0;
        font-size: 14px;
    }

    .exception_prd .view__button.button_download {
        font-size: 14px;
        padding: 0 15px;
    }

    .exception_view__modal_container {
        top: 25%;
    }
}

.sub__lineup {
    margin: 80px auto 150px;
    width: 1280px;
    border-top: 2px solid #333;
}

.sub__lineup .lineup_item {
    border-bottom: 1px solid #ddd;
}

.sub__lineup .lineup_item .lineup_header {
    position: relative;
    padding: 40px 30px;
    cursor: pointer;
}

.sub__lineup .lineup_item .lineup_header h2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sub__lineup .lineup_item .lineup_header p {
    font-size: 18px;
    color: #666;
}

.sub__lineup .lineup_item .lineup_header .fold_icon {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    position: absolute;
    top: 40px;
    right: 30px;
    background: url('images/assets/lineup_plus.jpg') no-repeat center;
}

.sub__lineup .lineup_item .lineup_content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.3s ease-in-out;
}

.sub__lineup .lineup_item .lineup_content .blueprint {
    display: flex;
    margin-bottom: 46px;
    position: relative;
    align-items: flex-start;
}

.sub__lineup .lineup_item .lineup_content .blueprint img {
    width: 100%;
}

.sub__lineup .lineup_item .lineup_content .media_wrap {
    display: flex;
    margin-bottom: 30px;
}

.sub__lineup .lineup_item .lineup_content .media_wrap li {
    display: flex;
    flex-direction: column;
    margin-right: 40px;
    cursor: pointer;
}

.sub__lineup .lineup_item .lineup_content .media_wrap li:last-child {
    margin-right: 0;
}

.sub__lineup .lineup_item .lineup_content .media_wrap li .media_box {
    display: flex;
    margin-bottom: 20px;
}

.sub__lineup .lineup_item .lineup_content .media_wrap li p {
    font-size: 16px;
    color: #333;
    transform: skew(0.028deg);
}

@media screen and (max-width: 1440px) {
    .sub__lineup {
        width:100%;
        max-width: 90%;
    }
}

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

@media screen and (max-width: 768px) {
    .sub__lineup .lineup_item .lineup_header h2 {
        font-size:20px;
    }

    .sub__lineup .lineup_item .lineup_header p {
        font-size: 14px;
    }

    .sub__lineup .lineup_item .lineup_content .media_wrap {
        flex-direction: column;
    }

    .sub__lineup .lineup_item .lineup_content .media_wrap li {
        width: 100%;
        marign-right: 0;
    }

    .sub__lineup .lineup_item .lineup_header .fold_icon {
        top: 20px;
        right: 20px;
        width: 26px;
        height: 26px;
    }

    .sub__lineup .lineup_item.open .lineup_header .fold_icon {
        background-size: 50%;
    }

    .sub__lineup .lineup_item .lineup_header {
        padding: 30px 10px;
    }
}

.sub__lineup .lineup_item:not(.open):hover .lineup_header h2 {
    color: #e5151f;
}

.sub__lineup .lineup_item:not(.open):hover .lineup_header .fold_icon {
    border-color: #e5151f;
    background: url('images/assets/lineup_plus_red.jpg') no-repeat center;
}

.sub__lineup .lineup_item.open .lineup_header {
    background: #232222;
}

.sub__lineup .lineup_item.open .lineup_content {
    max-height: 900px;
    padding: 60px 0;
}

.sub__lineup .lineup_item.open .lineup_header .fold_icon {
    background: url('images/assets/lineup_minus.jpg') no-repeat center;
}

.img-magnifier-container {
    position: relative;
}

.img-magnifier-glass {
    position: absolute;
    border: 1px solid #333;
    width: 300px;
    height: 300px;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
}

@media screen and (max-width: 1440px) {
    .img-magnifier-container {
        display:none;
    }

    .img-magnifier-glass {
        display: none;
    }
}

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

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

.clk {
    font-size: 13pt;
    color: #8BC34A;
    /*font-weight: bold;*/
    text-align: left;
    line-height: 18px;
}

/*이용약관*/
text_areas {
    width: 100%;
    margin: 80px 0;
}

.text_areas h4 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -.2px;
}

.text_areas .content_area {
    margin-top: 20px;
    background: #1f1f1f;
    padding: 40px;
}

.text_areas .content_area p {
    color: #ffffff;
    font-size: 16px;
    line-height: 36px;
    letter-spacing: -.2px;
    margin-bottom: 20px;
}

.text_areas .content_area textarea {
    width: 100%;
    display: block;
    border: 1px solid #494949;
    color: #fffcfc;
    background: #161616;
    height: 200px;
    overflow-y: scroll;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.circleOverlaymc {
    position: relative;
    left: 0%;
    top: 0%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    pointer-events: block;
    /* 클릭 막지 않음 */
    background-color: rgb(0 0 0 / 13%);
    border: 1px double #9c566e;
    color: #ffffff;
    font-weight: bold;
    font-size: 28.5px;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
    background: rgb(100 87 55 / 37%);
    animation: flash 1.3s ease-in-out infinite;
    box-shadow: 0 0 0 5px #FF5722;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: 'Dotum', sans-serif;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}
 :root { --bg:#1f2022; --panel:#000000; --accent:#FF5722; --text:#eaeaea; }
  * { box-sizing: border-box }
 /* body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; }*/
  .wrap { height:70svh; display:grid; grid-template-rows: 1fr auto; }
  /* 메인 영역 */
  .stage {
    position: relative; overflow: hidden; background:#282828; border-bottom:1px solid #333;
    display:flex; align-items:center; justify-content:center;
  }
  .canvas {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1);
    transform-origin:center center; will-change: transform; user-select:none; touch-action:none;
    max-width:none; /* 확대용 */
  }
  .hud {
    position:absolute; left:16px; bottom:16px; background:rgba(0,0,0,.55); padding:10px 12px;
    border-radius:10px; font-size:14px; backdrop-filter: blur(4px);
  }
  .hud b { color:var(--accent) }
  /* 썸네일 바 */
  .thumbbar {
    background:var(--panel); padding:14px 16px; display:flex; gap:12px; align-items:center; overflow:auto;
  }
  .thumbbar::-webkit-scrollbar { height:8px } 
  .thumbbar::-webkit-scrollbar-thumb { background:#555; border-radius:8px }
  .thumb {
    width:92px; height:74px; flex:0 0 auto; border-radius:10px; overflow:hidden; position:relative; cursor:pointer;
    border:2px solid #ffffff47; background:#00000000;
  }
  .thumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:.9; transition:opacity .2s }
  .thumb:hover img { opacity:1 }
  .thumb.active { border-color:var(--accent) }
  .meta {
    margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12px; color:#bdbdbd;
  }
  .btn {
    background: #1b1b1b;
    border:none;
    color:#fff;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
  }
  .btn:active { transform: translateY(1px) }
  .title { color:var(--accent); font-weight:700 }
@media screen and (max-width: 760px) {
    .circleOverlaymc {
        left:7%;
        top: 0%;
    }
}