/***************** 리더 페이지 ***************/
/* 메인 비주얼 */
#main{
background-image: url(../images/company-bg.png);
background-position: center center;
background-size: cover;
width: 100vw;
height: 460px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main h2{
margin-top: 50px;
font-size: var(--font-headline-small);
color: var(--gray-500);
font-weight: 700;
text-align: center;
}
#main p{
margin-top: 30px;
font-size: var(--font-body-medium);
color: var(--gray-500);
line-height: 1.5;
text-align: center;
}


/* 회사소개 내용 */
#contents{
width: 100vw;
position: relative;
padding: 5.21vw 10.42vw;
max-width: 1920px;
margin: 0 auto;
}
.company-content{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.company-content .top-title{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.company-content .top-title > h4{
width: 100%;
text-align: center;
font-size: var(--font-headline-small);
font-weight: 700;
}
.company-content .top-title > p{
text-align: center;
margin-top: 50px;
font-size: var(--font-body-large);
}
.company-content .introduce{
margin-top: 5.21vw;
display: flex;
align-items: center;
gap: 50px;
}
.company-content .introduce .intro-text{
font-size: var(--font-body-medium);
color: var(--gray-400);
}

@media (max-width:1280px){
#main{
height: 260px; } 
#contents {
padding: 30px 20px;
}
.company-content .introduce{
flex-wrap: wrap;
}
.company-content .introduce .tag {
width: 100%;
display: flex;
justify-content: center;
}
.company-content .introduce .tag img{
width: 100%;
height: auto;
}
.company-content .introduce .intro-text{
width: 100%;
}
.company-content .top-title > p {
margin-top: 20px;
}
.company-content .introduce {
gap: 20px;
}
}

/***************** 비전 페이지 ***************/
.video-bg{
position: relative;
width: 100%;
overflow: hidden;
}
#background-video {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto; 
min-height: 100%; 
object-fit: cover; 
z-index: -2; 
background-color: transparent; 
}
.video-overlay{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:linear-gradient(177deg, #FFF 36.59%, rgba(255, 255, 255, 0.20) 97.47%);
}
.vision-content {
position: relative;  
top: 0;
left: 0;
z-index: 1;
}
.vision-warp{
position: absolute;
top: 0;
z-index: 2;
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 5.21vw 10.42vw;
}
.top-title {
width: 100%;
color: black; 
text-align: center;
}
.top-title > h4{
width: 100%;
text-align: center;
color: var(--gray-400);
font-size: var(--font-title-medium);
}
.top-title > p{
margin-top: 2.60vw;
font-size: var(--font-title-small);
}
.vas-warp > h4 {
font-size: var(--font-headline-small);
font-weight: 700;
margin-top: 3.13vw;
text-align: center;
width: 100%;
}
.vas-warp .vas-cercle{
margin-top:2.60vw;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.vas-warp .vas-cercle li{
width: 16.67vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.vas-warp .vas-cercle li img{
width: 100%;
height: auto;
}
.vas-warp .vas-cercle li:nth-child(2),.vas-warp .vas-cercle li:nth-child(3){
margin-left: -30px;
}
.vas-warp .vas-cercle .line{
width: 100%;
display: flex;
justify-content: center;
margin: 2vw 0;
}
.vas-warp .vas-cercle .text{
width: 12.50vw;
text-align: center;
}

@media (max-width:1280px){
.vas-warp .vas-cercle .line{
display: none;
}
.vas-warp .vas-cercle .text{
display: none;
}
}

@media (max-width:640px){
.vas-warp .vas-cercle li{
width: 100%;
margin: 0px 80px;
}
.vas-warp .vas-cercle li:nth-child(2),.vas-warp .vas-cercle li:nth-child(3){
margin-left:0;
margin: -10px 80px;
}
#background-video {
height: 100vh;
}
}

/***************** 히스토리 페이지 ***************/

.company-history{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.company-history .top-title > h4{
font-size: var(--font-title-small);
color: var(--gray-400);
}
.company-history .tab-contaner{
width: 100%;
margin-top: 5.21vw;
background-image: url(../images/history-bg.png);
padding: 4.17vw 4.17vw  0 4.17vw ;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-wrap: wrap;
}
.company-history .tab-contaner > h4 {
width: 100%;
font-size: var(--font-body-xsmall);   
color: var(--default-white);
text-align: center;
}
.company-history .tab-contaner > h5{
font-size: var(--font-title-large);
width: 100%;   
color: var(--default-white);
text-align: center;
margin-top: 30px;
}
.company-history .tab-contaner .year{
margin-top: 6.77vw;
width: 100%;
padding: 0 6.25vw 40px 6.25vw;
display: flex;
justify-content: center;
gap: 50px;
}
.company-history .tab-contaner .year li{
width: 50%;
border-top: 1px solid var(--gray-300);
padding: 20px 30px;
display: flex;
justify-content: center;
}
.company-history .tab-contaner .year li a{
text-decoration: none;
color: var(--gray-300);
font-size: var(--font-body-small);
}
.company-history .tab-contaner .year li a:hover{
color: var(--gray-100);    
}
.company-history .year-warp{
width: 100%;
margin-top: 5.21vw;
}
.company-history .year-two{
width: 100%;
display: flex;
padding: 0 7.81vw;
}
.company-history .two-decade{
font-size: var(--font-headline-small);
font-weight: 700;
}
.company-history  .line{
width: 10.42vw;
margin-top: 19px;
margin-left: 3.13vw;
height: 1px;
background: var(--gray-300);
}
.company-history  .year-contents{
margin-left: 3.13vw;
}
.company-history  .year-contents li{
margin-bottom: 2.60vw;
color: #5C5C5C;
font-size: var(--font-body-medium);
}
.company-history  .year-contents li span{
width: 6.25vw;
display: inline-block;
}
.company-history .year-one{
margin-top: 5.21vw;
width: 100%;
display: flex;
padding: 0 7.81vw;
}

@media (max-width:1280px){
.company-history .tab-contaner .year {
margin-top: 30px;
padding: 0 20px 0px 20px;
gap: 20px;
}
.company-history  .line{
display: none;
}
.company-history .year-two, .company-history .year-one{
flex-wrap: wrap;
}
.company-history .two-decade{
width: 100%;
}
.company-history  .year-contents{
margin-top: 3.13vw;   
margin-left: 0;
}
.company-history .year-two, .company-history .year-one  {
padding: 0 0;
}
.company-history .year-contents li span {
width: 60px;    
}
}

/***************** 위치 페이지 ***************/

.company-location{
width: 100%;
max-width: 1920px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.company-location .top-titl  > h4{
font-size: var(--font-title-small);
color: var(--gray-400);
}
.company-location .address{
margin-top: 5.21vw;
width: 100%;
display: flex;
flex-wrap: wrap; 
border: 1px solid var(--gray-200);
}
.company-location .address li{
color: var(--gray-400);
font-size: var(--font-body-medium);
width: 100%;
border-bottom: 1px solid var(--gray-200);
}
.company-location .address .category{
display: inline-block;
text-align: center;
padding: 30px 0;
width: 130px;
border-right: 1px solid var(--gray-200);;
background-color: var(--gray-100);
margin-right: 30px;
}
.company-location .select-warp {
margin-top: 50px;
width: 100%;
display: flex;
position: relative;
justify-content: end;
}
.company-location .select-warp #location-select{
border: 1px solid var(--gray-200);
border-radius: 15px;
padding: 20px 30px;
width: 300px;
box-sizing: border-box;
}
.company-location .select-warp::after{
content: '';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url('../images/down-arrow.svg') no-repeat center;
background-size: contain;
pointer-events: none; 
}
.company-location .map{
margin-top: 50px;
width: 100%;
}

.company-location .phone{
width: 100%;
margin-top: 5.21vw;
display: flex;
border: 1px solid var(--gray-200);
}
.company-location .phone li{
display: flex;
width: 100%;
align-items: center;
color: var(--gray-400);
font-size: var(--font-body-medium);
}
.company-location .phone span{
display: inline-block;
text-align: center;
padding: 30px 0;
width: 130px;
border-right: 1px solid var(--gray-200);;
background-color: var(--gray-100);
margin-right: 30px;
}

@media (max-width:1280px){
.company-location .map,.company-location .select-warp {
margin-top: 30px;
}
.company-location .phone{
flex-wrap: wrap;
}
.company-location .phone span{
padding: 10px 5px;
width: 100px;
margin-right: 0px;
}
.company-location .address li{
text-align: center;
line-height: 30px;
}
.company-location .address .category{
width: 100%;
padding: 10px 5px;
margin-right: 10px;
}
.company-location .phone img{
width: 24px;
height: auto;
}
.company-location .select-warp #location-select {
padding: 10px 15px;
}
}

@media (min-width: 1921px){
.company-history .tab-contaner {
margin-top: 80px;
padding:50px 50px 0 50px;
}
.company-history .tab-contaner .year {
    margin-top:80px;
}
.company-history .year-two , .company-history .year-one{
    padding: 0 0px;
}
.company-history .two-decade {
    font-size:60px;
}
.si-container {
    margin-top: 100px;
}
}