body {margin: 0; padding: 0;  overflow-x: hidden;}
.container {width: 100%;}

/*header 시작*/
.container .inner{width: 100%; max-width:1440px; margin: 0 auto;}
.header {width: 100%; height: 80px;}
.header .header_box {display: flex; align-items: center; width: 100%; height: 100%;}
.header .header_box .logo_box {width: 15%; height: 100%; display: flex; justify-content: center; align-items: center; margin-right: 10%;}
.header .header_box .logo_box .logo_img {width: 80%; cursor:pointer;}
.header .header_box .menu_box {width: 50%; height: 100%; margin-right: 10%;}
.header .header_box .menu_box ul {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.header .header_box .menu_box ul li {width: 25%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: 700; font-family: "Noto Sans KR";}
.header .header_box .inquiry_box {width: 15%; height: calc(100% - 20px); display: flex; justify-content: center; align-items: center; padding: 10px;}
.header .header_box .inquiry_box .inquiry_btn {width: 70%; height: 90%; display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #4FC3F7; cursor:pointer; font-size: 20px; font-weight: 600; font-family: "Noto Sans KR";}
.header .header_box .inquiry_box .inquiry_btn .inquiry_img {width: 30px; height: 30px; }
.header .header_box .inquiry_box .inquiry_btn p {width: 50%; text-align: center}

@media (min-width: 1600px){.container .inner{max-width:1600px; margin: 0 auto;}}
@media (min-width: 1920px){.container .inner{max-width:1720px; margin: 0 auto;}}
/*header 끝*/

/*footer 시작*/
.footer {width: 100%; height: 300px; background-color: black; color: white; font-family: "Noto Sans KR"; display: flex; align-items: center;}
.footer .footer_box {width: 100%; height: 50%; display: flex;}
.footer .footer_box .logo_box{width: 30%; height: 100%; display: flex; align-items: center; justify-content: center;}
.footer .footer_box .logo_box img {width: 200px; height: auto;}
.footer .footer_box .text_box {display: flex; justify-content: center; flex-direction: column;}
.footer .footer_box .text_box p {line-height: 1.8;}
/*footer 끝*/

/*spinner 시작*/
#common_loading {position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 18px;}
#common_loading .spinner {width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*spinner 끝*/

/*main 시작*/
.main .content1 {width: 100%; aspect-ratio: 2.822222 / 1; display: flex; justify-content: center; align-items: center;}
.main .content1 .page_box1 {width: 100%; height: 100%; position: relative; z-index: 1;}
.main .content1 .page_box1 .img_box {width: 100%; height: 100%; position: relative; z-index: 1;}
.main .content1 .page_box1 .img_box img{width: 100%; height: 100%; object-fit: cover;}
.main .content1 .page_box1 .text_box {position: absolute; z-index: 2; top:20%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap}
.main .content1 .page_box1 .text_box h1 {font-size: 48px; font-weight: bold; color: white; text-shadow: 0 4px 10px rgba(0,0,0,0.7); font-family: "Noto Sans KR";}
.main #page1_text span { display: inline-block; opacity: 0; transform: translateX(40px); }

@media (min-width: 1600px){
    .main .content1{height:750px;}
    .main .content1 .page_box1 .text_box h1 {font-size: 54px;}
}
@media (min-width: 1920px){
    .main .content1{height:900px;}
    .main .content1 .page_box1 .text_box h1 {font-size: 62px;}
}

.main .content2 {width: 100%; aspect-ratio: 2.645833 / 1; display: flex; align-items: center; background-color: black; color: white;}
.main .content2 .left_content{width: 50%; height: 50%;}
.main .content2 .left_content .left_title {width: 80%; height: 50px; text-align: start; font-size:60px; margin-left:20%;}
.main .content2 .left_content .left_title h1 {font-family: "Noto Sans KR"; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;}
.main .content2 .left_content .left_detail {margin-top:10%; width: 80%; margin-left:20%;}
.main .content2 .left_content .left_detail h1 {font-size:40px; font-family: "Noto Sans KR";}
.main .content2 .left_content .left_detail p {font-size:20px; font-family: "Noto Sans KR"; margin-top: 5%; line-height: 2;}
.main .content2 .right_content {width: 50%; height: 80%; display: flex; align-items: center;}
.main .content2 .right_content .right_imgbox {width: 90%; height: 80%; }
.main .content2 .right_content .right_imgbox img {width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(150px);}

@media (min-width: 1600px){
    .main .content2 .left_content .left_detail h1 {font-size: 42px;}
}
@media (min-width: 1920px){
    .main .content2 .left_content .left_detail h1 {font-size: 48px;}
}

.main .content3 {width: 100%; aspect-ratio: 2.116667 / 1; position: relative; z-index: 1;}
.main .content3 .title_box {position: absolute; z-index: 3; top: 10%; left: 10%;}
.main .content3 .title_box .sub_title{font-size: 30px; font-weight: 600; font-family: "Noto Sans KR";}
.main .content3 .title_box .main_title{font-size: 60px; font-weight: 600; font-family: "Noto Sans KR"; margin-top: 10%;}
.main .content3 .cycle_1st { height: 90%; aspect-ratio: 1 / 1; border:1px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; position: absolute; z-index:2; top:5%; left: 10%;}
.main .content3 .cycle_1st .cycle_2ed { height: 69.5%; aspect-ratio: 1 / 1; border:1px solid #EAEAEA; border-radius: 50%;}
.main .content3 .detail_box {width: 85%; height: 50%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index:4; display: flex; align-items: center; justify-content: center;}
.main .content3 .detail_box .detail_cycle1{height: 70%; aspect-ratio: 1 / 1; border:1px solid #777777; border-radius: 50%; position: absolute; top:50%; left: 2.94%; transform: translateY(-50%);}
.main .content3 .detail_box .detail_cycle1 .cycle_content1 {position: absolute; top:30%; left: 10%;}
.main .content3 .detail_box .detail_cycle1 .cycle_content1 p {font-size: 16px; font-weight: 600; font-family: "Noto Sans KR";}
.main .content3 .detail_box .detail_cycle1 .cycle_content2 {position: absolute; top:55%; left: 10%;}
.main .content3 .detail_box .detail_cycle1 .cycle_content2 p {font-size:18px; font-weight: 600; line-height: 1.4;}
.main .content3 .detail_box .detail_cycle1 .cycle_content2 .key_point {font-size: 24px; color: #1565C0;}
.main .content3 .detail_box .detail_cycle2{height: 70%; aspect-ratio: 1 / 1; border:1px solid #777777; border-radius: 50%; position: absolute; top:50%; left: calc(2.94% + 15.3%); transform: translateY(-50%); }
.main .content3 .detail_box .detail_cycle2 .cycle_content1 {position: absolute; top:30%; left: 22%;}
.main .content3 .detail_box .detail_cycle2 .cycle_content1 p {font-size: 16px; font-weight: 600; font-family: "Noto Sans KR";}
.main .content3 .detail_box .detail_cycle2 .cycle_content2 {position: absolute; top:55%; left: 22%;}
.main .content3 .detail_box .detail_cycle2 .cycle_content2 p {font-size:18px; font-weight: 600; line-height: 1.4;}
.main .content3 .detail_box .detail_cycle2 .cycle_content2 .key_point {font-size: 24px; color: #1565C0;}
.main .content3 .detail_box .detail_cycle3{height: 70%; aspect-ratio: 1 / 1; border:1px solid #777777; border-radius: 50%; position: absolute; top:50%; left: calc(2.94% + 30.6%); transform: translateY(-50%);}
.main .content3 .detail_box .detail_cycle3 .cycle_content1 {position: absolute; top:30%; left: 22%;}
.main .content3 .detail_box .detail_cycle3 .cycle_content1 p {font-size: 16px; font-weight: 600; font-family: "Noto Sans KR";}
.main .content3 .detail_box .detail_cycle3 .cycle_content2 {position: absolute; top:55%; left: 22%;}
.main .content3 .detail_box .detail_cycle3 .cycle_content2 p {font-size:18px; font-weight: 600; line-height: 1.4;}
.main .content3 .detail_box .detail_cycle3 .cycle_content2 .key_point {font-size: 24px; color: #1565C0;}
.main .content3 .detail_box .detail_cycle4{height: 70%; aspect-ratio: 1 / 1; background: linear-gradient(to bottom left, #1565C0, #4FC3F7); border-radius: 50%; position: absolute; top:50%; transform: translateY(-50%); right: 0; }
.main .content3 .detail_box .detail_cycle4 .cycle_content1 {position: absolute; top:30%; left: 22%; }
.main .content3 .detail_box .detail_cycle4 .cycle_content1 p {font-size: 16px; font-weight: 600; font-family: "Noto Sans KR"; }
.main .content3 .detail_box .detail_cycle4 .cycle_content2 {position: absolute; top:55%; left: 22%;}
.main .content3 .detail_box .detail_cycle4 .cycle_content2 p {font-size:18px; font-weight: 600; line-height: 1.4; color: white;}
.main .content3 .detail_box .detail_cycle4 .cycle_content2 .key_point {font-size: 24px;}
.main .content3 .detail_box .detail_line {width: 90%; border-top: 1px solid black; position: absolute;}

.main .content4 {width: 100%; aspect-ratio: 1.905 / 1; background-color: black;}
.main .content4 .title_box {width: 100%; height: 25%;}
.main .content4 .title_box .sub_title {width: 50%; font-size: 30px; font-weight: 600; font-family: "Noto Sans KR"; margin-left: 10%; padding-top: 3%; color: white;}
.main .content4 .title_box .main_title {width: 50%; font-size: 60px; font-weight: 600; font-family: "Noto Sans KR"; margin-left: 10%; margin-top: 2%; color: white;}
.main .content4 .detail_box {width: 100%; height: 75%; display: flex;}
.main .content4 .detail_box .key_point {width: 25%; height: 100%; position: relative; }
.main .content4 .detail_box .key_point .point_img {width: 100%; height: 100%; position: relative; z-index: 1; object-fit:cover;}
.main .content4 .detail_box .key_point .point_title {position: absolute; z-index: 2; font-size: 30px; font-weight: 600; bottom: 15%; left: 5%; color: white;}
.main .content4 .detail_box .key_point .point_detail {position: absolute; z-index: 2; font-size: 1.0rem; font-weight: 600; bottom: 10%; left: 5%; color: white;}
@media (min-width: 1600px){
    .main .content4 .detail_box .key_point .point_detail {font-size: 1.2rem;}
}
@media (min-width: 1920px){
    .main .content4 .detail_box .key_point .point_detail {font-size: 1.3rem;}
}

.main .content5 {width: 100%; aspect-ratio: 1.4 / 1; padding-bottom: 3%}
.main .content5 .title_box {width: 100%; height: 37%; display: flex; justify-content: center; align-items: center;}
.main .content5 .title_box .content_title {font-size: 4rem; font-weight: 600; font-family: "Noto Sans KR";}
.main .content5 .title_box .content_title .title_color {background: radial-gradient(circle, #4FC3F7 0%,#2196F3 50%,#1565C0 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.main .content5 .detail_box {width: 100%; height: 30%; display: flex;}
.main .content5 .detail_box .detail_content {width: 20%; height: 95%;  display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main .content5 .detail_box .detail_content .img_box {width: 95%; height: 40%; display: flex; justify-content: center; align-items: center; border: 1px solid #777777; border-bottom: none;}
.main .content5 .detail_box .detail_content .img_box img { aspect-ratio : 1 / 1; height: 60%; border-radius: 5px; object-fit:cover;}
.main .content5 .detail_box .detail_content .content_box {width: 95%; height: 60%; border: 1px solid #777777; border-top: none; display: flex; flex-direction: column; align-items: center;}
.main .content5 .detail_box .detail_content .content_box .content_title_box {width: 100%; height: 40%; display: flex; justify-content: center; align-items: center;}
.main .content5 .detail_box .detail_content .content_box .content_title_box p {font-size: 1.4rem; font-weight: 600; font-family: "Noto Sans KR";}
.main .content5 .detail_box .detail_content .content_box .content_detail_box {width: 90%; height: 60%; display: flex; justify-content: center; align-items: center;}
.main .content5 .detail_box .detail_content .content_box .content_detail_box p {font-size: 0.85rem; font-weight: 400; font-family: "Noto Sans KR"; line-height: 1.4; word-break: keep-all; word-wrap: break-word; text-align: center;}
@media (min-width: 1600px){
    .main .content5 .detail_box .detail_content .content_box .content_title_box p {font-size: 1.55rem; font-weight: 600; font-family: "Noto Sans KR";}
    .main .content5 .detail_box .detail_content .content_box .content_detail_box p {font-size: 0.9rem; font-weight: 400; font-family: "Noto Sans KR"; line-height: 1.4;}
}
@media (min-width: 1920px){
    .main .content5 .detail_box .detail_content .content_box .content_title_box p {font-size: 1.7rem; font-weight: 600; font-family: "Noto Sans KR";}
    .main .content5 .detail_box .detail_content .content_box .content_detail_box p {font-size: 1rem; font-weight: 400; font-family: "Noto Sans KR"; line-height: 1.4;}
}
/*main 끝*/