/* 기본 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Noto Sans KR', sans-serif;
color: white;
position: relative;
}
a {color: #fff;
border: none;
text-decoration-line: none;}

.wrap {
position: relative;
width: 100%; 
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* 헤더 */
.header {
position: absolute;
display: flex;
align-items: center;
width: 100%;
height: 100px;
padding: 0 40px;
background: rgba(0, 0, 0, 0.4);
gap: 10%;
}
.logo01 {
display: flex;
align-items: center;
height:100%;
}
.menu01 {
 display: flex;
 height:100%;
 gap: 7%;
 width: 100%;
align-items: center;
}
.menu01 a {
    font-size: 1.2rem;
    font-weight: 500;
}
.menu01 a:first-child {
    color: #87abff;
}
.menu01 a:hover {
    color: #4d82ff;
}


.inner-con {
margin: 0 auto;
width: 100%;
}

.content {
background: url('https://oktarnd.kr/img/robot/r-main06.png') center/cover no-repeat;
display: flex;min-height: 650px;width: 100%;
padding: 170px 10% 5% 10%;
}

.left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
}
.left img {transition: all 0.3s;width:100%}
.left img:hover {
transform: translate(5px, -5px);
}

.txt01{font-size: 2.5rem;font-weight: 500;}
.txt02{font-size: 2.7rem;font-weight: 600;padding-bottom:20px}

.right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
width: 50%;
}

/* 버튼 스타일 */
.btn {
background-color: #153b93cc;
border-radius: 8px;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s;
width: 60%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}

.btn.spe {
background-color: #1b4bbd;
color:#fff;
}
.btn.blue {
background-color: #1b4bbd;
width: 100%;
color: #fff;
}

.btn:hover {
background-color: #ffffffcc;
color: #333;
transform: translateX(5px);
}

.item {
display: flex;
justify-content: space-between;
max-width: 1180px;
margin: 0 auto;
position: relative;
}

.item-left {
width: 850px;
}

.item-right {
width: 300px;
position: absolute;
top: 0;
right: 0;
background: rgba(0,0,0,0.6);
border-radius: 10px;
padding: 20px;
transition: top 0.1s ease-out;

}


.t-left{display: inline-block;text-align: left;}
.t-right{display: inline-block;text-align: right;}

.con-txt01{color: #fff;font-size: 1.8rem;font-weight: 500;padding: 10px 20px;background-color: #133583de;border-radius: 15px;}
.con-txt02{color: #133583f3;font-size: 1.5rem;font-weight: 600;padding: 20px 0 5px 20px;}
.con-txt03{color: #333;font-size: 1.2rem;font-weight: 400;padding: 10px 30px;}
    

.item-txt01{font-size: 1.7rem;font-weight: 500;padding-bottom: 30px;}
.item-txt02{font-size: 1.2rem;display: flex;justify-content: space-between;padding-bottom: 15px;font-weight: 500;}

.con {margin-bottom: 20px;border: 1px solid #ddd;border-radius: 20px;word-break: keep-all;}

/* 푸터 */
.footer {
height: 80px;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
flex-direction: column;
color: #bbb;
padding: 20px;
}

/* 테이블 */
.spec-table {
    max-width: 100%;
    padding: 2%;
}

.spec-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.spec-table th,
.spec-table td {
    border: 1px solid #333;color:#333;
    padding: 10px 12px;
    vertical-align: middle;
}

.spec-table th {
    background: rgba(4, 12, 53, 0.1);
    width: 18%;
    font-weight: 600;
}



/* 반응형 */
@media (max-width: 1024px) {
.header {
padding: 15px 20px;
}
.logo01 img{height: 30px;object-fit: cover;}

.menu01 {display: none;}

.content {
flex-direction: column;
align-items: center;
text-align: center;
padding: 135px 10% 10% 10%;
}
.txt01 {
    font-size: 2rem;
    font-weight: 500;
}
.txt02 {
    font-size: 2.2rem;
    font-weight: 600;
}
.spe {font-weight: 600 !important;}

.con img {width: 100%;}
.left {
align-items: center;
width: 100%;}
.right {
align-items: center;
width: 100%;
gap: 15px;
justify-content: flex-start;
}
.right a {
width: 80%;
height: 50px;
font-size: 1rem;
}
.item {
    max-width: 95%;
}
.item-left {
    width: 100%;
}
.con {margin-bottom: 10px;}
.con-txt01 {
    font-size: 1rem;
    padding: 10px 20px;
    font-weight: 600;
}
.con-txt02 {
    font-size: 1rem;
    padding: 5px 10px;
}
.con-txt03 {
    font-size: 0.8rem;
    padding: 5px 15px;
}
.spec-table {
    max-width: 100%;}
.spec-table table {word-break: break-all;}
.spec-table th, .spec-table td {font-size: 10px;border: 1px solid #333;color:#333;}
.spec-table th{background: rgba(4, 12, 53, 0.1);}
.spec-table td{background: none;}

.br-mh{display: none;}

.item-right {display: none;}

.footer {
height: 140px;
background: rgba(0, 0, 0, 0.9);
}
}