@import url('sub.css'); 

/* Vision — Mission */
.vision_cont {overflow: hidden;}
.vision_mission_list {perspective: 1000px; transform-style: preserve-3d;}
.vision_mission_card {display:flex; align-items:center; justify-content:space-between; gap:80px; padding:60px; background:var(--grayBg);transition:transform 1.2s cubic-bezier(0.22,0.61,0.36,1), opacity 1.2s ease-out, filter 1.2s ease-out; transform-origin:center bottom;}
.vision_mission_card.is-visible {transform:scale(1) rotateX(0deg) translateZ(0); opacity:1; filter:saturate(1);}
.vision_mission_card:nth-child(2n) {flex-direction: row-reverse;}
.vision_mission_card + .vision_mission_card {margin-top: 20px;}
.vision_mission_body {width: 50%;}
.vision_mission_body h4 span.fs40 {display: block; margin:10px 0 0 }
.vision_mission_body p.fs18 {margin:30px 0 0 0;}
.vision_mission_figure {width: 50%; aspect-ratio: 600 / 418;}
.vision_mission_photo {display:block; width:100%; height:100%; object-fit:cover;}

/* Certification */
.certi_cont .certi_section article {display: flex;}
.certi_cont .certi_section + .certi_section {margin-top: 150px;}
.certi_cont .certi_section article h4 {width: 30%; max-width: 410px; flex-shrink: 0; }
.certi_cont .certi_section article .article_list_wrap {flex:1;}
.certi_cont .certi_section article .article_list + .article_list {margin-top: 50px;}

.certi_cont .certi_section article .article_list h5 {margin: 0 0 20px 0;}
.certi_cont .certi_section article .article_list h5::before {font-size: 24px; color: var(--main); display: inline-block; vertical-align: middle; margin: -5px 5px 0 0;}
.certi_cont .certi_section.Patents article .article_list h5::before {content:'\ea4a';}
.certi_cont .certi_section.Certifications article .article_list h5::before {content:'\eb04';}

.certi_cont .certi_section article .article_list ol {border-top:1px solid var(--black);}
.certi_cont .certi_section article .article_list ol li {padding: 20px 15px; border-bottom: 1px solid var(--border); color: var(--black); font-size: 1rem; line-height: 166.667%; letter-spacing: -0.03em;}
.certi_cont .certi_section article .article_list ol li small {font-size: 0.889rem; line-height: 162.5%; font-family: var(--eng); color: var(--basic); display: block; position: relative; padding-left: 60px;}
.certi_cont .certi_section article .article_list ol li small:first-of-type {margin: 5px 0 0;}
.certi_cont .certi_section article .article_list ol li small + small {margin: 2px 0 0;}

.certi_cont .certi_section article .article_list ol li small::before {content: ""; width: 3px; height: 3px; position: absolute; top:11px; background: var(--black); left: 50px; border-radius: 50%;}

.certi_cont .certi_section article .article_list ol {counter-reset: section;}
.certi_cont .certi_section article .article_list ol li {counter-increment: section;}
.certi_cont .certi_section article .article_list ol li::before {content: "0"counter(section); font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--white); padding: 0 11px; background: var(--black); display: inline-flex; font-size: 12px; letter-spacing: 0; line-height: 183.333%; border-radius: 9999px; vertical-align: middle; margin: -2px 13px 0 0;}

/* CI */
.ci_cont .bi_section {background:url('/about/img/bi_bg.png') no-repeat center/cover;}
.ci_cont .bi_section h4 {margin: 0 0 30px 0;}
.ci_cont .bi_section .bi_icon_list {grid-gap:160px}
.ci_cont .bi_section .bi_icon_list li {display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; text-align: center; height: 240px; border: 1px solid rgba(255,255,255, 0.2); border-radius: 50%; position: relative;}
.ci_cont .bi_section .bi_icon_list li::after {content: ""; position: absolute; top:50%; right:-58.5px; width: 30px; aspect-ratio: 30 / 43; background:url('/about/img/bi_arr.svg') no-repeat center/contain; transform: translate(100%,-50%);}
.ci_cont .bi_section .bi_icon_list li:last-child::after {display: none;}
.ci_cont .bi_section .bi_tbox {margin: 80px 0 0; display: flex; flex-direction: column; gap: 15px;}
.ci_cont .bi_section .bi_tbox .fs18 {opacity: 0.7;}

.ci_cont .clear_space h5 {margin: 0 0 15px 0;}
.ci_cont .clear_space .imgbox {margin: 60px 0 0 0;}
.ci_cont .clear_space .imgbox img {width: 100%;}

/*******************************************************************************
    @media 1560px
*******************************************************************************/
@media all and (max-width:1560px){

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* Certification */
.certi_cont .certi_section article h4 {font-size: 1.9rem;}

/* CI */
.ci_cont .bi_section .bi_icon_list {grid-gap:100px;}
.ci_cont .bi_section .bi_icon_list li {height: 210px;}
.ci_cont .bi_section .bi_icon_list li::after {right:-36px;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* Vision — Mission */
.vision_mission_card {padding: 40px; gap: 40px;}
.vision_mission_body h4 span.fs40 {margin:5px 0 0 0;}
.vision_mission_body p.fs18 {margin:20px 0 0 0;}

/* Certification */
.certi_cont .certi_section + .certi_section {margin-top: 90px;}
.certi_cont .certi_section article {flex-direction: column; gap: 40px;}
.certi_cont .certi_section article h4 {width: 100%; max-width: none;}
.certi_cont .certi_section article .article_list_wrap {flex:auto; width: 100%;}

.certi_cont .certi_section article .article_list + .article_list {margin-top: 40px;}
.certi_cont .certi_section article .article_list h5 {margin: 0 0 10px 0;}
.certi_cont .certi_section article .article_list h5::before {font-size: 22px;}
.certi_cont .certi_section article .article_list ol li {padding: 15px 10px;}
.certi_cont .certi_section article .article_list ol li::before {margin: -2px 10px 0 0;}

.certi_cont .certi_section article .article_list ol li small {padding-left: 58px;}
.certi_cont .certi_section article .article_list ol li small::before {left: 48px; top: 9px;}

/* CI */
.ci_cont .bi_section .bi_icon_list {grid-gap:60px;}
.ci_cont .bi_section .bi_icon_list li {gap: 12px; height: 180px;}
.ci_cont .bi_section .bi_icon_list li img {width: 45px; height: auto;}
.ci_cont .bi_section .bi_icon_list li::after {width: 24px; right: -18px;}
.ci_cont .bi_section .bi_tbox {margin: 50px 0 0; gap: 10px;}

.ci_cont .clear_space .sub_flex_left {width: 100%;; max-width: none;}
.ci_cont .clear_space .imgbox {margin: 40px 0 0 0;}
.ci_cont .clear_space h5 {margin: 0 0 8px 0;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Vision — Mission */
.vision_mission_card {flex-direction: column-reverse !important; gap: 20px; padding: 25px;}
.vision_mission_card + .vision_mission_card {margin-top: 10px;}
.vision_mission_body {width: 100%;}
.vision_mission_body h4 {display: flex; flex-direction: column; align-items: center; text-align: center;}
.vision_mission_body h4 span.fs40 {margin:2px 0 0;}
.vision_mission_body p.fs18 {text-align: center; margin:10px 0 0 0;}
.vision_mission_figure {width: 100%;}

/* Certification */
.certi_cont .certi_section + .certi_section {margin-top: 70px;}

.certi_cont .certi_section article {gap: 25px;} 
.certi_cont .certi_section article .article_list + .article_list {margin-top: 25px;}

.certi_cont .certi_section article .article_list h5::before {font-size: 20px;}
.certi_cont .certi_section article .article_list ol li {padding: 12px 6px;}
.certi_cont .certi_section article .article_list ol li::before {font-size:11px; padding: 0 9px; margin: -3px 6px 0 0;}

.certi_cont .certi_section article .article_list ol li small {padding-left: 50px;}
.certi_cont .certi_section article .article_list ol li small + small {margin: 0;}
.certi_cont .certi_section article .article_list ol li small::before {left: 40px;}

/* CI */
.ci_cont .bi_section h4 {margin: 0 0 20px 0;}
.ci_cont .bi_section .bi_icon_list {grid-gap:40px;}
.ci_cont .bi_section .bi_icon_list li {height: 150px;}
.ci_cont .bi_section .bi_icon_list li img {width: 35px}
.ci_cont .bi_section .bi_icon_list li::after {width: 20px; right: -11px;}
.ci_cont .bi_section .bi_tbox {margin: 40px 0 0; gap: 8px;}
.ci_cont .bi_section .bi_tbox .fs18 br {display: none;}

.clear_space .sub_flex {flex-direction: column; gap: 20px;}
.ci_cont .clear_space h5 {margin: 0 0 3px 0;}
.ci_cont .clear_space .imgbox {margin: 20px 0 0 0;}
}
/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* CI */
.ci_cont .bi_section .bi_icon_list {grid-template-columns: repeat(1, 1fr);}
.ci_cont .bi_section .bi_icon_list li {height: 100px;}
.ci_cont .bi_section .bi_icon_list li::after {top:auto; right: auto; left: 50%; transform: translate(-50%,100%) rotate(90deg); bottom: -7px;}
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}