@charset "utf-8"; /*SUNGWON PF*/



/* ========================================================
 * SETTING
======================================================== */
:root{
	--main-color: #ed1c24;
	--page-container-width: 1600px;
	--area-wide-width: 1620px;
	--area-box-width: 1520px;
	--area-width: 1320px;
	--area-padding: 30px;
	--header-height: 110px;
	--header-top:0;
	--sub-visual-height: 93.3rem;
	--sub-visual-img-height: 50rem;
	--sub-menu-height: 69px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1:'Wanted Sans Variable', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
/* ========================================================
 * SETTING
======================================================== */

.sub_visual {width: 100%; height: 580px; background-repeat: no-repeat; background-size: cover; background-position: center;}
@media (max-width: 800px){
    .sub_visual {height: 400px;}
}
.sub_visual.visual1 {background-image: url(../../images/sub_visu01.jpg);}
.sub_visual.visual2 {background-image: url(../../images/sub_visu02.jpg);}
.sub_visual.visual3 {background-image: url(../../images/sub_visu03.jpg);}
.sub_visual.visual4 {background-image: url(../../images/sub_visu04.jpg);}
.sub_visual.visual5 {background-image: url(../../images/sub_visu05.jpg);}

.sub_visual .inner1600 {margin: 0 auto; height: 100%; padding: 110px 0 50px; display: flex; flex-direction: column; justify-content: end;}
.sub_visual .inner1600 .visual-tit {font-size: 7.2rem; font-weight: bold; color: #fff; padding-bottom: 1rem}
.sub_visual .inner1600 .visual-txt {font-size: 2rem; color: #fff; font-weight: 400; padding-bottom: 10rem}
.sub_visual .navi_wrap {color: #fff; display: flex; height: 20px;}
.sub_visual .navi_wrap .ic_home {margin-right: 40px; font-size: 20px; position: relative; color: #fff;}
.sub_visual .navi_wrap .ic_home::before {content:" "; display: block; width:1px; height: 23px; background:#fff; opacity:.6; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth {width: 260px; position: relative; margin-right: 40px; background: url(../../images/arrow-down.png) no-repeat center right / 12px;}
.sub_visual .navi_wrap .depth::before {content:" "; display: block; width:1px; height: 23px; background:#fff; opacity:.6; position: absolute; right: -20px; top: 2px;}
.sub_visual .navi_wrap .depth:last-child::before {display: none;}
.sub_visual .navi_wrap .depth.prd_depth2, .sub_visual .navi_wrap .depth.prd_depth3 {width: 240px;}
.sub_visual .navi_wrap .depth_tit {cursor: pointer; font-size: 1.8rem; margin-bottom: 8px;}
.sub_visual .navi_wrap .depth_menu {width: 100%; height: auto; display: none; background: rgba(255, 255, 255, 1); padding: 20px 0;border-radius:10px;box-shadow: 0px 0px 15px rgba(9,38,70,.1)}
.sub_visual .navi_wrap .depth_menu > li {padding: 8px 20px;}
.sub_visual .navi_wrap .depth_menu > li > a {font-size: 1.6rem; color: #444; transition: color .2s; font-weight: 400;}
.sub_visual .navi_wrap .depth_menu > li > a:hover {color: #ed1c24; font-weight: 500;}


.page-container{width: 100%;}
.page_tit h3 {text-align: center; font-size: 4.8rem; color: #333333; padding: 14rem 0 13rem}

@media (max-width: 1200px){
}
@media (max-width: 1024px){
}
@media (max-width: 800px){
    .sub_visual .inner1600 .visual-tit {font-size: 5rem; padding-bottom: 1rem}
    .sub_visual .inner1600 .visual-txt {font-size: 2rem; padding-bottom: 5rem}
}
@media (max-width: 680px){
}
@media (max-width: 460px){
    .sub_visual .inner1600 .visual-tit {font-size: 4.5rem;}
    .sub_visual .navi_wrap {display: none;}
}


.animation {-webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.animation.down {-webkit-transform: translateY(-80px); transform: translateY(-80px);}
.animation.up {-webkit-transform: translateY(80px); transform: translateY(80px);}
.animation.left {-webkit-transform: translateX(80px); transform: translateX(80px);}
.animation.right {-webkit-transform: translateX(-80px); transform: translateX(-80px);}
.animation.opacity {opacity: 0;}
.animation.on.down, .animation.on.up {-webkit-transform: translateY(0); transform: translateY(0);}
.animation.on.left, .animation.on.right {-webkit-transform: translateX(0); transform: translateX(0);}
.animation.on.opacity {opacity: 1;}


.pageTitle em {color: #ed1c24; font-size: 2rem; font-weight: 800; font-style: normal; font-family: 'play';}
.pageTitle h4 {margin: 10px 0 30px; font-size: 4.8rem; line-height: 1.2; color: #333; font-weight: 300;}
.pageTitle h4 b {font-weight: 700;}
.pageTitle .Title_txt {font-size: 2.4rem; color: #333333; line-height: 1.6; padding-bottom: 4rem}
.marginTop60 {margin-top: 60px;}
.marginTop100 {margin-top: 100px;}
.cont_txt {font-size: 1.8rem; color: #666666; line-height: 1.6}


@media (max-width: 1200px){
    .pageTitle h4 {margin: 10px 0 30px; font-size: 4rem;}
}
@media (max-width: 800px){    
    .pageTitle h4 {margin: 10px 0 30px; font-size: 3.5rem;}
    .pageTitle .Title_txt {font-size: 2rem; padding-bottom: 3rem}
}
@media (max-width: 680px){    
    .pageTitle h4 {margin: 10px 0 20px; font-size: 3rem;}
    .pageTitle .Title_txt {font-size: 1.8rem; padding-bottom: 2rem}
}


.company-summary__cover {display: grid; align-items: center;grid-template-columns: 50% 5% 45%; gap: initial;margin-top: 50px;    overflow: hidden;}
.company-summary__cover .cover__content {display: flex; justify-content: flex-start;}
.company-summary__cover .cover__img img {width: 100%; height: 100%; border-radius: 0 15px 15px 0;}

@media (max-width: 1200px){
    .company-summary__cover {display: block;}
    .company-summary__cover .cover__img img {width: auto; height: 50%;}
    .company-summary__cover .cover__content {display: block; padding: 2rem 3%;}
}

@media (max-width: 800px){
    .company-summary__cover {margin-top: 30px;}
    .company-summary__cover .cover__img img {width: 100%;}
}


.company-vision {margin-bottom: 20rem}
.vision {position: relative; padding: 30rem 0 5rem;}
.bg_txt {position: absolute; right: 0; top: 10rem; text-align: right; font-family: 'play'; font-weight: bold; font-size: 15rem; color: #eee; line-height: .9; z-index: -1}
.icon-box > ul > li{width:100%;background: #fff;border:1px solid #e8e8e8;border-radius:15px;padding:50px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; position: relative;}
.icon-box > ul > li:after {content: ''; position: absolute; background: url("../../images/plus_icon.png") no-repeat; background-size: 33px; right: -68px; top: 50%; width: 33px; height: 33px; transform: translateY(-50%);}
.icon-box > ul > li:last-child:after {display: none;} 
.icon-box > ul > li .title-eng {font-size: 2rem; color: #999999; font-weight: bold; font-family: 'play';}
.icon-box > ul > li .title-h4 {font-size: 3rem; color: #df1713; font-weight: 700;}
.icon-box > ul > li img{margin: 2rem 0 5rem; max-width:77px;}
.icon-box + p{margin-top: 60px;}
.icon-box > ul{display:flex; gap:100px; }
.icon-box p{font-size: 2rem; margin:2rem 0 0; color: #666666;} 

@media (max-width: 1200px){
    .icon-box > ul > li:after {right: -48px; width: 33px; height: 33px;}
    .icon-box > ul{gap:60px; }
}

@media (max-width: 900px){
    .icon-box > ul > li:after {display: none;}
    .icon-box > ul{gap:20px; }
    .icon-box > ul > li img{max-width:50px;}
    .icon-box p{font-size: 1.8rem;}
    .icon-box p br {display: none;}
}

@media (max-width: 800px){
    .vision {padding: 15rem 0 1rem;}
    .bg_txt {top: 5rem; font-size: 8rem; }
    .icon-box > ul > li{padding:30px;}
    .icon-box > ul > li .title-eng {font-size: 1.8rem;}
    .icon-box > ul > li .title-h4 {font-size: 2.5rem;}
}

@media (max-width: 680px){
   .icon-box > ul{flex-wrap:wrap; gap:15px; margin-right: 0;}
	.icon-box > ul > li{width:48%;}    
}

@media (max-width: 480px){
    .icon-box > ul{display:block;}
    .icon-box > ul > li{width:100%; margin-bottom: 2rem; text-align: center;}
    .icon-box p br {display: block;}
}


.history_page {padding-bottom: 20rem;}
.history_page .history {margin-top: 8rem; display: flex; align-items: flex-start; justify-content: space-between; padding-left: 10px; background: url("../../images/top_menu_logo.png") right top no-repeat;}
.history_page .history .left {position: sticky; top: var(--height_height); width: 40em; display: none}
.history_page .history .left p { font-size: 6.5em; font-weight: 700; line-height: 1.2}
.history_page .history .info {position: relative; width: 100%; font-size:  var(--cont_txt)}
.history_page .history .info .line {position: absolute; left: 0; top: 50%; transform: translateY(-50%) ;width: 1px; height: 99% !important; background-color: #e0e0e0}
.history_page .history .info .line .bg {position: absolute; left: 50%; top: 0; width: 2px ;height: 0%; transform: translateX(-50%) ;background-color: #69B6FA; max-height: 100%;}
.history_page .history .info li {position: relative; display: flex; align-items: flex-start ;line-height: 1.5em}
.history_page .history .info li:last-child:before {content: ""; position: absolute; width: 12px; height: 100%; left: 0%; top: 10px; transform: translateX(-50%) ;background-color: #fff; }
.history_page .history .info li + li {margin-top: 4em}
.history_page .history .info li .num {font-size: 2.3rem; font-weight: 700; position: relative;  padding-left: 8rem; z-index: 3; font-family: 'play'}
.history_page .history .info li .num:before {content: ""; position: absolute; left: 0.5px; top: 50%; transform: translate(-50%,-50%) ;width: 12px; height: 12px; border-radius: 50%; background-color: #BDBDBD; }
.history_page .history .info li .txt {margin-left: 25px;}
.history_page .history .info li .txt p {font-size: 1.8rem}
.history_page .history .info li .txt p + p {margin-top: 0.5em}
.history_page .history .info li:nth-child(1) .num:before,
.history_page .history .info li.active .num:before {background-color: #69B6FA; box-shadow: 0 0 0px 8px rgba(108,182,250,0.2)}

@media (max-width: 768px){
    .history_page .history {display: block; margin-top: 6em}
    .history_page .history .left {position: sticky; width: calc(100% + 40px); top: 57px; margin-left: -20px ;margin-bottom: 15px ;background-color: #fff; z-index: 2; padding: 15px 20px }
    .history_page .history .left p {font-size: var(--sect1_tit)}
    .history_page .history .info {width: 100%; padding-left: 5px;}
    .history_page .history .info .line {left: 5px}
    .history_page .history .info li + li {margin-top: 2em}
    .history_page .history .info li .num {padding-left: 2em}
    .history_page .history .info li .num:before {width: 8px; height: 8px;}
    .history_page .history .info li.active .num:before {box-shadow: 0 0 0px 4px rgba(108,182,250,0.2)}
    .history_page .history .left p br {display:none}
    .history_page .history .info li .txt p + p {margin-top: 1.5em}
    .history_page .history .info li:last-child:before {top: 8px}
}


.certification_page {margin-bottom: 10rem;}



.org {padding-bottom: 20rem}

.org_box {position: relative;}
.org_box .deps1 {position: relative; display: flex; justify-content: center; padding-bottom: 17.5rem}
.org_box .chairman {position: relative; z-index: 2;}
.org_box .chairman .badge{position: relative; display: inline-flex; justify-content: center; align-items: center; z-index: 2 ;width: 30rem; height: 10rem; border-radius: 150px; color: #fff; line-height: 1; font-weight: 700; background-color: #262932;
;opacity: 0; transform: translateY(50px); transition: transform 0.5s , opacity 0.5s}
.org_box .chairman .badge span {font-size: 1.8rem; text-align: center; line-height: 1.4; font-weight: 500;}
.org_box .deps1 .chairman .badge {background-color: #ed1c24;}
.org_box .deps1 .line {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); width: 1px; height: 100%; background-color: #E0E0E0}
.org_box .deps1 .line:before {content: ""; display: block; position: absolute; width: 3px; height: 100%; left: -1px; bottom: -1px ;background-color: #fff; transition: all 0.5s; transition-delay: .5s}

.org_box .deps2 .chairman .badge {background-color: #00578a;}
.org_box .deps2 {position: relative; display: flex; justify-content: center;  padding-bottom: 7rem}
.org_box .deps2 .line {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); width: 1px; height: 100%; background-color: #E0E0E0}
.org_box .deps2 .line:before {content: ""; display: block; position: absolute; width: 3px; height: 100%; left: -1px; bottom: -1px ;background-color: #fff; transition: all 0.5s; transition-delay: .5s}

.org_box .deps4 .chairman .badge {background-color: #00578a;}
.org_box .deps4 {position: relative; display: flex; justify-content: center;  padding-bottom: 7rem}
.org_box .deps4 .line {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); width: 1px; height: 100%; background-color: #E0E0E0}
.org_box .deps4 .line:before {content: ""; display: block; position: absolute; width: 3px; height: 100%; left: -1px; bottom: -1px ;background-color: #fff; transition: all 0.5s; transition-delay: .5s}

.org_box .chairman.left {position: absolute; display: flex; align-items: center; top: 13rem; right: 50%}
.org_box .chairman.left .badge {transition-delay: .85s}
.org_box .chairman.left .line {position: relative; width: 40rem;height: 1px; background-color: #E0E0E0}
.org_box .chairman.left .line:before {content: ""; display: block; position: absolute; width: 105%; height: 4px; left: -1px; bottom: -1px ;background-color: #fff; transition: all 0.5s; transition-delay: .55s}

.org_box .chairman.right {position: absolute; display: flex; justify-content: flex-end; width: 50%; left: 50%;top: 27.5rem; z-index: -1}
.org_box .chairman.right .line {position: absolute; top: 50%; left:0; transform: translateY(-50%);width: 80%; height: 1px; background-color: #E0E0E0}
.org_box .chairman.right .line:before {content: ""; display: block; position: absolute; width: 105%; height: 4px; right: -1px; bottom: -1px ;background-color: #fff; transition: all 0.5s; transition-delay: .6s}
.org_box .chairman.right .badge {transition-delay: .95s}
.org_box .chairman.right .box {display: flex; justify-content: center; width: 66.72%; flex-shrink: 0}


.org_box .deps3_line {display: flex; justify-content: space-between; }
.org_box .deps3_line .line {position: relative; height: 1px; background-color: #E0E0E0 }
.org_box .deps3_line .line.left {width: 100%; margin:0 calc(((100% - (30px * 3))/7) / 2);}
.org_box .deps3_line .line.left:before {content: ""; display: block; position: absolute; width: 105%; height: 4px; left: -1px; bottom: -1px ;background-color: #fff; transition: all .25s; transition-delay: 1s}
.org_box .deps3_line .line.right:before {content: ""; display: block; position: absolute; width: 55%; height: 4px; left: 0%; bottom: -1px ;background-color: #fff; transition: all .35s; transition-delay: 1s}
.org_box .deps3_line .line.right:after {content: ""; display: block; position: absolute; width: 55%; height: 4px; right: 0%; bottom: -1px ;background-color: #fff; transition: all .35s; transition-delay: 1s}

.org_box .deps3 {display: flex; padding-top: 6em}
.org_box .deps3 .left_box {display: flex; align-items: flex-start; width: 100%;  }
.org_box .deps3 .left_box .cont + .cont {margin-left: 12px;}

.org_box .deps3 .cont {position: relative; flex: 1;}
.org_box .deps3 .txt_box {overflow: hidden; position: relative; z-index: 2 ; border: 1px solid #E0E0E0; border-radius: 3.6em;  opacity: 0; transform: translateY(50px); transition: 0.5s ;transition-delay: 1.5s}
.org_box .deps3 .cont .top {display:flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; height: 8rem;background-color: #F5F5F5; text-align: center}
.org_box .deps3 .cont .top span {font-size: 1.7rem; font-weight: 300}
.org_box .deps3 .cont .top strong {font-size: 1.7rem; margin-top: 5px; color: #333;}
.org_box .deps3 .cont .bot {padding: 2.3em 0; text-align: center}
.org_box .deps3 .cont .bot + .bot {border-top: 1px solid #E0E0E0}

.org_box .deps3 .cont .bot span {font-size: 1.8em}
.org_box .deps3 .cont .line {position: absolute; left: 50%; top: 0; transform: translate(-50%,-100%) ;height: 6em; width: 1px; background-color: #E0E0E0;}
.org_box .deps3 .cont .line:before {content: ""; display: block; position: absolute; width: 4px; height: 105%; right: -1px; bottom: -1px ;background-color: #fff; transition: all 0.75s; transition-delay: 1.25s}
.org_box .deps3 .cont.no_line .line {display: none}

.org.active .org_box .deps3 .cont .txt_box,
.org.active .org_box .chairman .badge {opacity: 1; transform: translateY(0)}

.org.active .org_box .deps3 .right_box .team_bot .team_line:before,
.org.active .org_box .deps3 .right_box .team_bot .team_line:after,
.org.active .org_box .deps3_line .line.right:after,
.org.active .org_box .chairman .line:before ,
.org.active .org_box .deps3_line .line:before {width: 0}

.org.active .org_box .deps1 .line:before,.org.active .org_box .deps2 .line:before,.org.active .org_box .deps4 .line:before,
.org.active .org_box .deps3 .right_box .center_line:before,
.org.active .org_box .deps3 .cont .line:before {height: 0}

@media (max-width: 1200px){
    .org_wrap {overflow-x: auto; padding-bottom: 20px}
    .org_wrap::-webkit-scrollbar {-webkit-appearance: none;}
    .org_wrap::-webkit-scrollbar:vertical {width: 10px;}
    .org_wrap::-webkit-scrollbar:horizontal {height: 5px;}
    .org_wrap::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .5);border-radius: 5px;}
    .org_wrap::-webkit-scrollbar-track {border-radius: 10px;background-color: rgba(0, 0, 0, .1);}
    .org_box {min-width: 769px; overflow: hidden}
    .org_box .chairman .badge {width: 25rem; height: 7rem}
    .org_box .chairman.left .line {width: 25.5vw}

    .org_box .chairman.right {top: 24.5rem;}

    .org_box .deps3 .cont .top {padding: 0 7px}
    .org_box .deps3 .cont .top span {font-size: 13px;}
    .org_box .deps3 .right_box .cont + .cont {margin-left: 20px}
    .org_box .deps3_line .line.right {width: calc(((33.26% - (12px * 0.3326) - 20.5px)/2) + 20px - 2.5px);margin-right: calc((((33.26% - 12px) - (20px * 1))/2) / 2);}
    .org_box .deps3 .right_box .team_bot .team_line {width: calc(50% - 10px + 20px - 0.5px);}

    .org_box .deps3 .txt_box {border-radius: 2rem}
    .org_box .deps3 .cont .bot {padding: 2rem 0}
    .org_box .deps3 .cont .bot span {font-size: 1.6rem !important}    
}



.locabx {width: 100%; margin-bottom: 13rem;}
.locabx h1 {color: #3f3f3f; font-size: 3.4rem; letter-spacing: -0.045em; line-height: 1.3; font-weight: 700; font-family: 'play';}
.locabx .__map {
    width: 100%;
    position: relative;
    height: 575px;
    margin-top: 45px
}

.locabx .__map iframe {
    width: 100%;
    height: 100%
}

.locabx #map5~.locaInfo .lbx h2 {
    font-size: 30px
}

.locabx .locaInfo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    align-items: center
}

.locabx .locaInfo .lbx {
    width: 100%
}

.locabx .locaInfo .lbx h2 {
    font-size: 35px;
    letter-spacing: -0.045em;
    line-height: 1.3;
    font-weight: 700
}

.locabx .locaInfo .lbx .numbers {
    margin-top: 15px;
    padding-top: 35px;
    border-top: 1px dashed #ddd;
    display: flex;
    min-height: 20px
}

.locabx .locaInfo .lbx .numbers li {
    display: flex;
    font-size: 18px;
    letter-spacing: -0.045em;
    font-weight: 700;
    line-height: 1.3;
    margin-right: 145px
}

.locabx .locaInfo .lbx .numbers li span {
    width: 60px;
    flex-shrink: 0;
    color: #c7c7c7
}

.locabx .locaInfo .rbx {
    flex-shrink: 0;
    margin-left: 50px;
    margin-right: 80px;
    width: 127px;
    height: 127px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 10px;
    box-sizing: border-box
}

.locabx .locaInfo .rbx::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../../images/loca_circle.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.locabx .locaInfo .rbx em {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

.locabx .locaInfo .rbx span {
    font-size: 15px;
    letter-spacing: -0.045em;
    font-weight: 500
}

.locabx .locaInfo .rbx i {
    margin-top: 10px
}

@media screen and (min-width: 821px) {
    .locabx .locaInfo .rbx:hover::before {
        animation:rotate 6s infinite linear
    }
}

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

    .locationTit dl dt {
        font-size: 40px
    }

    .locationTit dl dd {
        margin-top: 10px;
        font-size: 16px
    }

    .locabx h1 {
        font-size: 2.8rem;
    }

    .locabx .__map {
        margin-top: 30px;
        height: 400px
    }

    .locabx #map5~.locaInfo .lbx h2 {
        font-size: 20px
    }

    .locabx .locaInfo {
        margin-top: 40px
    }

    .locabx .locaInfo .lbx h2 {
        font-size: 24px
    }

    .locabx .locaInfo .lbx .numbers {
        padding-top: 20px
    }

    .locabx .locaInfo .lbx .numbers li {
        font-size: 16px;
        margin-right: 85px
    }

    .locabx .locaInfo .rbx {
        margin-left: 30px;
        margin-right: 50px
    }
}

@media screen and (max-width: 820px) {
    .locationTit dl dt {
        font-size: 32px
    }

    .locationTit dl dd {
        margin-top: 5px;
        font-size: 14px
    }

    .locabx h1 {
        font-size: 2.4rem;
    }

    .locabx .__map {
        margin-top: 20px;
        height: 250px
    }

    .locabx #map5~.locaInfo .lbx h2 {
        font-size: 18px
    }

    .locabx .locaInfo {
        margin-top: 20px
    }

    .locabx .locaInfo .lbx h2 {
        font-size: 22px
    }

    .locabx .locaInfo .lbx .numbers {
        padding-top: 10px;
        flex-direction: column
    }

    .locabx .locaInfo .lbx .numbers li {
        font-size: 14px;
        margin-right: 0
    }

    .locabx .locaInfo .rbx {
        margin-left: 15px;
        margin-right: 30px;
        width: 100px;
        height: 100px
    }

    .locabx .locaInfo .rbx::before {
        animation: rotate 6s infinite linear
    }

    .locabx .locaInfo .rbx em {
        margin-bottom: 5px
    }

    .locabx .locaInfo .rbx span {
        font-size: 12px
    }
}

@media screen and (max-width: 500px) {
    .locationTit dl dt {
        font-size:28px
    }

    .locabx h1 {
        font-size: 2rem;
    }

    .locabx .__map {
        margin-top: 10px;
        height: 200px
    }

    .locabx #map5~.locaInfo .lbx h2 {
        font-size: 16px
    }

    .locabx .locaInfo {
        margin-top: 10px;
        display: block
    }

    .locabx .locaInfo .lbx h2 {
        font-size: 16px
    }

    .locabx .locaInfo .rbx {
        margin-right: 0;
        margin-left: auto;
        width: 90px;
        height: 90px
    }
}


.product {margin-bottom: 15rem;}
.app {display: flex;  margin: auto;}
.product-tab {padding:0 0 50px;}
.product-tab ul { display: flex; margin: auto;}
.product-tab li.tab-tit {font-size: 2rem; color: #333333; padding: 12px 50px 12px 0; font-weight: 600;}
.product-tab li.tab-list { margin-right: 10px; display: flex; align-items: center; justify-content: center; position: relative; padding: 12px; width: 130px; font-size: 1.6rem; color: #666666; border:1px solid #E5E5E5; border-radius:10px;}
.product-tab li.tab-list:last-child {margin-right: 0;}
.product-tab li.tab-list::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; opacity: 0; background: #000; transform: scaleX(0); transform-origin: center; transition: all ease .35s; }
.product-cate {display: flex; margin-left: auto; padding:0 0 50px;}
.product-cate .pro_selec{width: 330px; box-sizing: border-box; border:1px solid #E5E5E5; padding: 0 20px; line-height: 50px; font-size: 1.6rem; color: #666666; border-radius: 10px; outline: none; appearance:none; background: url('../../images/select_arrow.png') no-repeat right 20px center;}
.product-cate .pro_selec:focus{box-sizing: border-box; border: 0; outline: none;}
.product-cate .pro_selec option {padding: 4px; font-size: 1.6rem; color: #333333; background: #fff; box-sizing: border-box; border-bottom: 1px solid #ededed; }
/*.product-cate .pro_selec option:last-child {display: none;}*/

@media (max-width: 1200px){
    .product .Title_txt br {display: none;}
}

@media (max-width: 1080px){
    .app {display: block;  margin: auto;}
    .product-tab {padding:0 0 20px;}
    .product-cate {display: block; margin-left: inherit; padding:0px 0 50px;}
}
@media (max-width: 680px){
    .product-cate .pro_selec{width: 100%;}
}



.tab-wrap {margin-bottom: 5rem;}
.tab-list {display: flex;align-items: center;overflow-x: auto;}
.tab-list.tab-type01 {justify-content: center;margin: 0 0 0}
.tab-list.tab-type01.scroll-width {justify-content: flex-start}
.tab-list.tab-type01 li {position: relative;margin-right: 2rem}
.tab-list.tab-type01 li:last-child {margin-right: 0}
.tab-list.tab-type01 li a {line-height: 70px;letter-spacing: 0;font-size: 1.8rem;min-width: 31.8rem;text-align: center;white-space: nowrap; border-radius: 35px; background: #f7f7f7; color: #666;font-weight: 600;}
.tab-list.tab-type01 li.on a {position: relative; background: #e32a25; color: #fff;}

.production_page {padding-bottom: 10rem}
.production {width: 100%; margin-bottom: 5rem;}
.production h1 {color: #3f3f3f; font-size: 3.4rem; letter-spacing: -0.045em; line-height: 1.3; font-weight: 700; font-family: 'play'; padding-bottom: 2rem;}
.production_list > ul {display: flex; gap: 20px;}
.production_list > ul > li {width: 100%;}
.production_list > ul > li img {width: 100%; border-radius: 15px;}

@media screen and (max-width: 1280px) {
    .production h1 {font-size: 2.8rem}
}

@media screen and (max-width: 820px) {
    .production h1 {font-size: 2.4rem;}
    .production_list > ul {flex-wrap: wrap; gap: 15px;}
    .production_list > ul > li {width: 48%;}
}

@media screen and (max-width: 500px) {
    .production h1 {font-size: 2rem;}
}

@media screen and (max-width: 460px) {
    .production h1 {font-size: 2rem;}
    .production_list > ul {display: block;}
    .production_list > ul > li {width: 100%; margin-bottom: 1.5rem}
}


.production2_list {width: 100%;}
.production2_list > ul {display: flex; flex-wrap: wrap; gap: 10rem 12rem;}
.production2_list > ul > li {width: calc((100% - 12rem) / 2);}
.production2_list > ul > li img {width: 100%; border-radius: 15px;}
.production2-tab {padding:20px 0 30px;}
.production2-tab > ul {display: flex; flex-wrap: wrap; gap: 15px;}
.production2-tab > ul > li {display: flex; align-items: center; justify-content: center; position: relative; padding: 12px; width: 130px; font-size: 1.6rem; color: #666666; border:1px solid #E5E5E5; border-radius:10px;}
.production2-tab > ul > li:last-child {margin-right: 0;}


.inspection_list > ul {display: flex; flex-wrap: wrap; gap: 5rem 2rem;}
.inspection_list > ul > li {width: calc((100% - 6rem) / 4);}
.inspection_list > ul > li img {width: 100%; border-radius: 15px;}
.inspection_list h1 {color: #3f3f3f; font-size: 2.4rem; letter-spacing: -0.045em; line-height: 1.3; font-weight: 700; font-family: 'play'; padding: 2rem 0 1rem;}
.inspection_list > ul > li > ul.dot{}
.inspection_list > ul > li > ul.dot > li{position: relative; font-size: 1.8rem; line-height: 1.6; color: #666666; padding-left: 1rem;}
.inspection_list > ul > li > ul.dot > li::before{position: absolute; content: ''; width: 0.4rem; height: 0.4rem; top: calc(1.6rem - 0.4rem); left: 0; background-color: #666; border-radius: 50%;}
.inspection_list > ul > li > ul.dot > li.none::before{display: none;}

@media screen and (max-width: 820px) {
    .inspection_list > ul {flex-wrap: wrap;}
    .inspection_list > ul > li {width: calc((100% - 2rem) / 2);}
    .inspection_list h1 {font-size: 2.2rem;}
}

@media screen and (max-width: 460px) {
    .inspection_list > ul {display: block;}
    .inspection_list > ul > li {width: 100%; margin-bottom: 3rem}
}



.career_page {margin-bottom: 15rem;}
.career_detail{}
.career_detail > li{flex-direction: row;}
.career_detail > li .textArea{padding-top: 2rem;}
.career_detail > li:nth-of-type(even){flex-direction: row-reverse;}
.career_detail > li:nth-of-type(even) .textArea{text-align: right;}
.career_detail > li + li{margin-top: 12rem;}
.sub_textArea{}
.sub_textArea .title1{font-size: 5rem; line-height: 6rem; color: #ed1c24; font-weight: bold; font-family: 'play'}
.sub_textArea .title2{font-size: 3rem; line-height: 4rem; color: #333333; font-weight: bold;}
.sub_textArea > .head{border-bottom: 1px solid #ddd; padding: 0 0 2rem; margin: 0 0 3rem;}
.sub_textArea .body0{font-size: 2.5rem; line-height: 1.4; color: #333; font-weight: 600}
.sub_textArea .body1{font-size: 2rem; line-height: 1.6; color: #666666;}
.sub_textArea .body1 .mini{font-size: 1.5rem; line-height: 1;}
.sub_textArea p + p{margin-top: 1rem;}
.flex{display: flex; flex-wrap: wrap;}
.flex.gap12{gap: 4rem 12rem;}
.flex.gap12 .thumbArea{width: calc((100% - 12rem)/2); }
.flex.gap12 .thumbArea img {border-radius: 20px; width: 100%;}
.flex.gap12 .textArea{width: calc((100% - 12rem)/2);}

.flex.row{flex-direction: row;}
.flex.row:nth-of-type(even){flex-direction: row-reverse;}
.flex.row:nth-of-type(even) .textArea{text-align: right;}

.start_project {margin: 10rem 0; text-align: center;}
.start_project a {
      font-size: clamp(12px, 2.2vw, 18px);
      font-weight: 500;
      border: 2px solid #333;
      color: #333;
      background-color: transparent;
      padding: 20px 105px 20px 70px;
      border-radius: 50px;
      position:relative;
      z-index: 1;
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
}
.start_project a::before {
      content: "\e941";
      font-family: "Material Icons";
      display: block;
      position: absolute;
      top: 50%;
      right: 65px;
      transform: translate(0, -50%);
      font-size: 3rem;
      width: 24px;
      height: 24px;
      line-height: 24px;
}
.start_project a:after {
      display: block;
      content: '';
      width: 0;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      transition: all .3s ease;
      z-index: -1;
      overflow: hidden;
      background-color: #fff;
}
.start_project a:hover{
      border-color:#ed1c24;
    color: #fff;
}
.start_project a:hover:after {
      width: 100%;
      left: 0;
      background-color: #ed1c24;
}

@media screen and (max-width: 720px) {
      .start_project a {
            padding: 4vw 20vw 4vw 10vw;
      }
}

@media only screen and (max-width : 1360px){
    .flex.gap12{gap: 4rem 6rem;}
    .flex.gap12 .thumbArea{width: calc((100% - 6rem)/2);}
}
@media only screen and (max-width : 1280px) {
    .wVar {display: none !important;}
}
@media only screen and (max-width : 1024px){

    .sub_textArea .title1{font-size: 4rem; line-height: 5rem;}
    .sub_textArea .title1 span{font-size: 2.5rem; line-height: 3.5rem;}
    .sub_textArea .title2{font-size: 2.5rem; line-height: 3.5rem;}
    .sub_textArea .title3{font-size: 2rem; line-height: 3rem;}    

    .sub_banner{margin: 0 auto 6rem;}
    .sub_banner .desc .title{font-size: 4rem; line-height: 5rem;}

    .flex.gap12{gap: 4rem;}
    .flex.gap12 .thumbArea{width: calc((100% - 4rem)/2);}

    .flex.gap12.it .thumbArea{width: 100%;}
    .flex.gap12.it .textArea{width: 100%;}
}


.video_page {margin-bottom: 15rem;}
.video_page img {width: 100%;}
.video {max-width: 1280px; margin: 0 auto;}


.catalog_page {margin-bottom: 15rem;}
.brochure-ct .brochure-list .brochure-item {display: flex; justify-content: space-between;}
.brochure-ct .brochure-list .brochure-item .txt-wrap {display: flex; flex-direction: column; justify-content: space-between;}
.brochure-ct .brochure-list .brochure-item .txt-wrap .title-box {margin-top: min(1.8682291667vw, 35.87px);}
.brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .title {font-weight: bold; font-family: 'play'}
.brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc {margin-top: min(3.125vw, 60px);}
.m_h3 {font-size: min(3.75vw, 72px) !important; line-height: min(4.95vw, 95.04px) !important;}
.m_h6 {font-size: min(2.875vw, 36px) !important; line-height: min(2.85vw, 54.72px) !important;}
.brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc p {margin-top: min(2.625vw, 27px); color: #4b4b4b; font-size: min(2vw, 23px) !important; line-height: min(2.85vw, 33px) !important;}
.brochure-ct .brochure-list .brochure-item .txt-wrap .down-box {display: flex;}
.page-in-active section .in_sec_box_area .in_sec_box.in_sec {opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(.39,0,.12,.99), transform 1.2s cubic-bezier(.39,0,.12,.99);}
.brochure-ct .brochure-list .brochure-item .img-wrap {border: 1px solid #eee}
.brochure-ct .brochure-list .brochure-item .img-wrap img {width: 100%}

@media (max-width: 850px) {
    .brochure-ct .brochure-list .brochure-item {flex-direction: column-reverse; }
    .brochure-ct .brochure-list .brochure-item .txt-wrap .title-box .desc p br {display: none;}
}