html, body {width: 100%; height: 100%;}
* {font-family: 'Noto Sans KR', sans-serif; font-weight: 400; border: 0; padding: 0; margin: 0; box-sizing: border-box;}


.c_wrap {position: absolute; left: 0; top: 50%; width: 100%; height: 100%; padding-top: 14vw; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #fff; overflow: auto; overflow-x: hidden; z-index: 996;}


.sub_visual {position: relative; width: 100%;}
.sub_visual .imgBox {width: 100%;}
.sub_visual .imgBox img {width: 100%;}

.sub_visual .txtBox {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%;}
.sub_visual .txtBox div {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;}
.sub_visual .txtBox div span {font-size: 4vw; color: rgba(255, 255, 255, 0.5); font-weight: 400; letter-spacing: -0.025em; line-height: 1;}
.sub_visual .txtBox div p {font-size: 6vw; color: #fff; font-weight: 500; letter-spacing: -0.025em; line-height: 1; margin-top: 2vw;}



.nav {position: relative; width: 100%; border-bottom: 1px solid #e0e0e0; z-index: 99;}
.nav .navInner {display: flex; flex-wrap: wrap; height: 10vw;}
.nav .navInner .depth {position: relative; flex: 1 1 40%;}
.nav .navInner .depth + .depth {border-left: 1px solid #e0e0e0;}

.nav .navInner .depth .depthTitle {position: relative; width: 100%; height: 10vw; padding: 0px 2vw; z-index:2; background-color:#fff;}
.nav .navInner .depth .depthTitle p {font-size: 3.5vw; color: #555; font-weight: 400; letter-spacing: -0.025em; line-height: 10vw; transition: all 0.3s;}
.nav .navInner .depth .depthTitle div {position: absolute; top: 50%; margin-top: -1.5vw; right: 2vw; width: 4vw; height: 4vw; background-image: url("../img/common/navArrow.png"); background-size: 2vw auto; background-position: center; background-repeat: no-repeat; transition: all 0.3s;}
.nav .navInner .depth .depthTitle.on div {background-image: url("../img/common/navArrow_on.png"); -ms-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}

.nav .navInner .depth .depthTitleNone {width:100%; height:50px; padding:0px 20px; position:relative; z-index:2; background-color:#fff;}
.nav .navInner .depth .depthTitleNone p {font-size:16px; color:#555; font-weight:400; letter-spacing:-0.025em; line-height:50px; transition:all 0.3s;}

.nav .navInner .depth ul {display: none; position:absolute; top: calc(10vw + 1px); left: -1px; content: ''; width: calc(100% + 2px); border: 1px solid #e0e0e0; border-top: 0; box-shadow: 0px 2px 10px rgba(0,0,0,0.15); background-color: #fff; z-index: 999;}
.nav .navInner .depth ul li {width: 100%; transition:all 0.2s;}
.nav .navInner .depth ul li + li {border-top: 1px solid #e0e0e0;}
.nav .navInner .depth ul li div {width: 100%; height: 10vw; padding: 0 2vw; background-image: url("../img/common/navArrow2.png"); background-position: right 2vw center; background-size: 1.4vw auto; background-repeat: no-repeat; font-size: 3.5vw; color: #777; font-weight: 400; letter-spacing: -0.025em; line-height: 10vw;}




.sub_cont {position: relative; width: 100%; z-index: 1;}
.sub_cont .sub_cont_inner {padding: 8vw 4%;}

.sub_cont .sub_cont_inner .title {width: 100%; margin-bottom: 5vw;}
.sub_cont .sub_cont_inner .title h2 {font-size: 4.5vw; color: #333; font-weight: 500; letter-spacing: -0.025em; line-height: 1.4; text-align: center;}
.sub_cont .sub_cont_inner .title h2 font {color: #01794b; font-weight: 500;}
.sub_cont .sub_cont_inner .title h2 em {color: #7ec424; font-weight: 500;}
.sub_cont .sub_cont_inner .title p {font-size: 3.5vw; color: #01794b; font-weight: 400; letter-spacing: -0.025em; line-height: 1.4; text-align: center; margin-top: 1vw;}


.sub_cont .sub_cont_inner .cont {position: relative; width: 100%;}



.sub_cont.aboutus.greetings .sub_cont_inner {padding: 8vw 0 0;}

.sub_cont .sub_cont_inner .cont.greetings {padding: 0 4% 47vw; background: url('../img/aboutus/greetings_bg.png') bottom left no-repeat; background-size: 100% auto;}
.sub_cont .sub_cont_inner .cont.greetings .box01 {width: 100%;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .imgBox {width: 100%; text-align: center;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .imgBox img {width: 50vw;}

.sub_cont .sub_cont_inner .cont.greetings .box01 .txtBox {width: 100%; margin-top: 4vw;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .txtBox p {font-size: 3.2vw; color: #333; font-weight: 400; letter-spacing: -0.025em; line-height: 1.4;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .txtBox p + p {margin-top: 2vw;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .txtBox p font {font-size: 3.2vw; color: #02643c; font-weight: 400; letter-spacing: -0.025em;}
.sub_cont .sub_cont_inner .cont.greetings .box01 .txtBox p em {font-size: 3.2vw; color: #179561; font-weight: 400; letter-spacing: -0.025em;}


.sub_cont .philosophy {width: 100%;}
.sub_cont .philosophy .imgBox {width: 100%;}
.sub_cont .philosophy .imgBox img {width: 100%;}


.sub_cont .partnership {width: 100%;}
.sub_cont .partnership .box01 .imgBox {width: 100%;}
.sub_cont .partnership .box01 .imgBox img {width: 100%;}

.sub_cont .partnership .box02 {width: 100%; margin-top: 3vw;}
.sub_cont .partnership .box02 .partners_sw {width: 100%;}
.sub_cont .partnership .box02 .partners_sw img {width: 100%;}



.sub_cont .careers {width: 100%;}
.sub_cont .careers .box01 {position: relative; padding-top: 56.25%; height: 0; overflow: hidden; z-index: 1;}
.sub_cont .careers .box01 iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}

.sub_cont .careers .box02 {width: 100%; margin-top: 2vw;}
.sub_cont .careers .box02 .txtBox {width: 100%;}
.sub_cont .careers .box02 .txtBox p {font-size: 3.2vw; color: #333; font-weight: 400; letter-spacing: -0.025em; line-height: 1.4;}

.sub_cont .careers .box03 {width: 100%; margin-top: 2vw;}
.sub_cont .careers .box03 > div {display: flex; flex-wrap: wrap; padding: 2vw; background-color: #00502f; -ms-border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.sub_cont .careers .box03 > div + div {margin-top: 1vw;}
.sub_cont .careers .box03 > div span {position: relative; display: inline-block; font-size: 3.2vw; color: #fff; font-weight: 400; letter-spacing: -0.025em;}
.sub_cont .careers .box03 > div span + span {padding-left: 2vw; margin-left: 2vw;}
.sub_cont .careers .box03 > div span + span:before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ''; width: 1px; height: 3vw; background-color: #fff;}
.sub_cont .careers .box03 > div span:first-child {padding-left: 3vw;}
.sub_cont .careers .box03 > div span:first-child:before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ''; width: 4px; height: 4px; background-color: #7ec424; -ms-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.sub_cont .careers .box03 > div span a {font-size: 3.2vw; color: #fff; font-weight: 400; letter-spacing: -0.025em;}