#header {position: fixed; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.7); transition: all 0.3s; z-index: 1000;}
#header.fixed {background: #fff; border-bottom: 1px solid #d0d0d0;}
#header .container {display: flex; align-items: center; justify-content: space-between; padding: 15px 0px; }
#header .gnb ul {display: flex; align-items: center; gap: 25px;}
#header .gnb ul li a {font-size: 23px; font-weight: 700; transition: all 0.3s;}
#header .gnb ul li a:hover {color: var(--sub_color);}

.mc_1 {width: 100%; background: url(../img/main_bg.jpg) no-repeat center / cover; background-attachment: fixed;}
.mc_1 .container {display: flex; align-items: flex-end; justify-content: center; height: 100vh;}
.mc_1 .text_box {text-align: center;}
.mc_1 .text_box p {font-size: 30px; font-weight: 700; background: var(--sub_color); color: #fff; padding: 13px 30px; display: inline-block; border-radius: 100px; margin-bottom: 30px;}
.mc_1 .text_box h3 {font-size: 60px; font-weight: 900; color: #773613; margin-bottom: 30px;}
.mc_1 .text_box article {font-size: 30px; font-weight: 600; margin-bottom: 60px;}
.mc_1 .text_box .btn_box {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 60px;}
.mc_1 .text_box .btn_box a {display: flex; align-items: center; box-sizing: border-box; padding: 15px 30px; font-size: 22px; gap: 15px; border-radius: 15px; font-weight: 700; transition: all 0.3s;}
.mc_1 .text_box .btn_box a:nth-child(1) {background: #F9E000; color: #000;}
.mc_1 .text_box .btn_box a:nth-child(2) {background: #24A3E5; color: #fff;}
.mc_1 .text_box .btn_box a img {height: 45px;}
.mc_1 .text_box .btn_box a:hover {transform: scale(1.05);}
.mc_1 .img_box img {height: 280px;}

section .title {text-align: center; margin-bottom: 70px;}
section .title h3 {font-size: 45px; font-weight: 500; color: #111;}
section .title h3 b {font-weight: 800; color: var(--sub_color_3);}
section .title article {font-size: 25px; margin-top: 30px;}

.mc_2 {width: 100%; background: var(--sub_color_2); padding: 100px 0px;}
.mc_2 ul {display: flex; gap: 30px;}
.mc_2 ul li {width: 33.3%; background: #fff; border-radius: 20px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; overflow: hidden;}
.mc_2 ul li .img_box {padding: 20px 0px; text-align: center;}
.mc_2 ul li .img_box img {height: 250px; object-fit: cover;}
.mc_2 ul li .text_box {background: var(--main_color); padding: 25px 0px; text-align: center;}
.mc_2 ul li .text_box p {font-size: 26px; font-weight: 800; margin-bottom: 15px;}
.mc_2 ul li .text_box b {display: block; font-size: 20px; margin-bottom: 15px; font-weight: 700; color: var(--sub_color_3)}
.mc_2 ul li .text_box span {padding: 10px 18px; background: var(--sub_color); color: #fff; display: inline-block; border-radius: 100px; font-size: 15px;}

.mc_3 {width: 100%; background: #f8f8f8; padding: 100px 0px;}
.mc_3 ul li {gap: 50px; display: flex; align-items: center;}
.mc_3 ul li > div {width: 50%;}
.mc_3 ul li .img_box {border-radius: 20px; overflow: hidden; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.mc_3 ul li .img_box img {width: 100%;}
.mc_3 ul li .text_box p {font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.mc_3 ul li .text_box article {font-size: 23px;}
.mc_3 ul li:last-child .text_box {text-align: right;}

.mc_4 {padding: 100px 0px;}
.mc_4 .acc_box {max-width: 768px; margin: 0 auto;}
.mc_4 .acc_box .acc_row {margin-bottom: 20px;}
.mc_4 .acc_box .acc_row:last-child {margin-bottom: 0;}
.mc_4 .acc_box .acc_row p {display: flex; gap: 15px; align-items: center; padding: 15px; box-sizing: border-box; background: var(--sub_color_2); cursor: pointer; border-radius: 10px; font-size: 18px; font-weight: 500;}
.mc_4 .acc_box .acc_row p img {height: 25px; transition: all 0.3s;}
.mc_4 .acc_box .acc_row .acc_cont {display: none; padding: 30px 15px; box-sizing: border-box;}
.mc_4 .acc_box .acc_row .acc_cont article {font-size: 16px; line-height: 1.5;}
.mc_4 .acc_box .acc_row.active p img {transform: rotate(45deg);}

.mc_5 {padding: 100px 0px; background: var(--sub_color_2);}
.mc_5 ul {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.mc_5 ul li {width: calc(33.3% - 13px); border-radius: 15px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; overflow: hidden; background: #fff; padding: 20px; box-sizing: border-box; text-align: center;}
.mc_5 ul li p {font-size: 17px; color: #000; margin-bottom: 15px; font-weight: 700;}
.mc_5 ul li article {font-size: 17px; margin-bottom: 10px;}
.mc_5 ul li i {font-size: 15px; font-style: italic;}

.mc_6 {padding: 100px 0px; background: #f9f9f9;}
.mc_6 .btn_box {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 60px;}
.mc_6 .btn_box a {display: flex; align-items: center; box-sizing: border-box; padding: 15px 30px; font-size: 22px; gap: 15px; border-radius: 15px; font-weight: 700; transition: all 0.3s;}
.mc_6 .btn_box a:nth-child(1) {background: #F9E000; color: #000;}
.mc_6 .btn_box a:nth-child(2) {background: #24A3E5; color: #fff;}
.mc_6 .btn_box a:nth-child(3) {background: #2DC100; color: #fff;}
.mc_6 .btn_box a img {height: 45px;}
.mc_6 .btn_box a:hover {transform: scale(1.05);}

#footer {padding: 50px 0px; background: #353535;}
#footer .info_box p {font-size: 16px; color: #666; text-align: center;}


@media (max-width: 1280px) {
    .container {padding: 0px 50px;}
    #header .container {padding: 15px 50px;}
    #header .logo img {height: 35px;}
    #header .gnb ul li a {font-size: 16px;}

    .mc_1 .text_box p {font-size: 20px;}
    .mc_1 .text_box h3 {font-size: 40px;}
    .mc_1 .text_box article {font-size: 25px;}
    .mc_1 .text_box .btn_box a {font-size: 18px;}
    .mc_1 .text_box .btn_box a img {height: 28px;}
    .mc_1 .img_box img {height: 240px;}

    section .title h3 {font-size: 30px;}
    section .title article {font-size: 18px;}
    .mc_3 ul li .text_box p {font-size: 22px;}
    .mc_3 ul li .text_box article {font-size: 17px;}

    .mc_5 ul {justify-content: center;}
    .mc_5 ul li {width: calc(50% - 10px);}
}

@media (max-width: 1024px) {
    .container {padding: 0px 20px;}
    #header .container {padding: 15px 20px;}

    .mc_2 ul {flex-direction: column; max-width: 500px; margin: 0 auto;}
    .mc_2 ul li {width: 100%;}
    .mc_3 ul li {gap: 30px;}
}

@media (max-width: 768px) {

    #header .logo img {height: 20px;}
    #header .gnb ul {gap: 7px;}
    #header .gnb ul li a {font-size: 12px;}

    .mc_1 .container {height: 650px;}
    .mc_1 .text_box p {font-size: 14px;}
    .mc_1 .text_box h3 {font-size: 20px;}
    .mc_1 .text_box article {font-size: 16px;}
    .mc_1 .text_box article br {display: none;}
    .mc_1 .text_box .btn_box a {font-size: 14px;}
    .mc_1 .text_box .btn_box a img {height: 18px;}
    .mc_1 .img_box img {height: 150px;}
    .mc_1 .text_box .btn_box {flex-direction: column;}
    .mc_1 .text_box .btn_box a {width: 100%; box-sizing: border-box; justify-content: center; max-width: 400px;}


    section .title h3 {font-size: 20px;}
    section .title article {font-size: 15px;}
    section .title article br {display: none;}
    .mc_3 ul li .text_box p {font-size: 17px;}
    .mc_3 ul li .text_box article {font-size: 14px;}

    .mc_2 ul li .text_box p {font-size: 20px;}
    .mc_2 ul li .text_box b {font-size: 16px;}
    .mc_2 ul li .text_box span {font-size: 14px;}

    .mc_3 ul li {flex-direction: column; gap: 15px;}
    .mc_3 ul li > div {width: 100%;}

    .mc_3 ul li:last-child {flex-direction: column-reverse; margin-top: 30px;}
    .mc_3 ul li:last-child .text_box {text-align: left;}

    .mc_4 .acc_box .acc_row p {font-size: 16px;}
    .mc_4 .acc_box .acc_row p img {height: 20px;}
    .mc_4 .acc_box .acc_row .acc_cont article {font-size: 14px;}
    .mc_4 .acc_box .acc_row .acc_cont article br {display: none;}

    .mc_5 ul li {width: 100%;}

    .mc_5 ul li p {font-size: 15px;}

    .mc_6 {padding: 70px 0px;}
    .mc_6 .btn_box a {font-size: 14px;}
    .mc_6 .btn_box a img {height: 18px;}
    .mc_6 .btn_box {flex-direction: column;}
    .mc_6 .btn_box a  {width: 100%; box-sizing: border-box; justify-content: center; max-width: 400px;}

    #footer .info_box p {font-size: 14px;}
}