#header {position: fixed; top: 0; left: 0; width: 100%;  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 .naver_search a {display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 100px; padding: 10px 20px; box-sizing: border-box; font-size: 20px;}
#header .naver_search a b {font-weight: 700; color: #1ECD00;}
#header .naver_search a img {height: 20px;}
#header.fixed .naver_search a {background: #f3f3f3;}

.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; padding: 150px 0px 0px; overflow: hidden;}
.mc_1 .text_box {text-align: center;}
.mc_1 .text_box > p {font-size: 30px; font-weight: 900; display: flex; align-items: center; gap: 10px; background: #ffcd34; color: #000; padding: 13px 30px;  border-radius: 100px; width: 100%; max-width: fit-content; margin: 0 auto 30px;}
.mc_1 .text_box > p img {height: 23px;}
.mc_1 .text_box > span {display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 30px; font-weight: 900; text-align: center;}
.mc_1 .text_box > span::after,
.mc_1 .text_box > span::before {display: block; width: 120px; content: ''; height: 2px; background: #000;}
.mc_1 .text_box > h3 {font-size: 200px; background: -webkit-linear-gradient(360deg, #ff8c00, var(--main_color) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--main_font);} 
.mc_1 .text_box > article {font-size: 30px; font-weight: 800;  padding: 15px 30px; border-radius: 100px; color: #fff; background: #333; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; max-width: fit-content; margin: 0 auto 60px;}
.mc_1 .text_box > article::after,
.mc_1 .text_box > article::before {display: block; width: 15px; height: 15px; border-radius: 100%; background: #fff; content: '';}

.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 {width: 100%; max-width: 400px; display: block;}
.mc_1 .text_box .btn_box a img {width: 100%;}

.mc_1 .img_box img {width: 100%;}

section .title {text-align: center; margin-bottom: 70px;}
section .title span {font-size: 30px; font-weight: 800;  padding: 10px 30px; border-radius: 100px; color: #000; background: #FEF0C1; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; max-width: fit-content; margin: 0 auto 30px;}
section .title span::after,
section .title span::before {display: block; width: 15px; height: 15px; border-radius: 100%; background: #FFC000; content: '';}
section .title h3 {font-family: var(--main_font); font-size: 60px; color: #111; line-height: 0.8;}
section .title h3 b {font-family: var(--main_font); font-size: 80px; color: var(--sub_color_1); }
section .title h3 b i {font-family: var(--main_font); font-size: 80px; color: var(--main_color); line-height: 0.8;}
section .title article {font-size: 25px; margin-top: 30px; line-height: 1.3;}
section .title article b {font-weight: 700;}

.mc_2 {width: 100%; background: #f8f8f8; padding: 100px 0px;}
.mc_2 .title {margin-bottom: 50px;}
.mc_2 .title img {height: 150px; margin-bottom: 20px;}
.mc_2 .top_info {display: flex; align-items: center; margin: 0 auto 70px; justify-content: center; gap: 15px; width: fit-content; background: #222; border-radius: 100px; box-sizing: border-box; padding: 15px 35px;}
.mc_2 .top_info img {height: 20px;}
.mc_2 .top_info p {font-size: 25px; font-weight: 500; color: #fff;}
.mc_2 .top_info p b {font-weight: 500; color: #fff;}
.mc_2 .top_info p b i {font-weight: 700; color: #ffd500;}
.mc_2 .img_box {margin: 0 auto; max-width: 774px;}
.mc_2 .img_box img {width: 100%;}

.mc_3 {width: 100%; background: #f3f3f3; padding: 100px 0px;}
.mc_3 ul li {display: flex; margin-bottom: 20px;}
.mc_3 ul li:last-child {margin-bottom: 0;}
.mc_3 ul li > div {width: 50%;}
.mc_3 ul li .img_box {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 {padding: 50px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: auto; box-sizing: border-box; background: #f3e393;}
.mc_3 ul li .text_box span {font-size: 17px; font-weight: 500; color: #fff; background: var(--main_color); border-radius: 100px; padding: 10px 23px; display: inline-block; margin-bottom: 20px;}
.mc_3 ul li .text_box p {font-size: 30px; font-weight: 700; margin-bottom: 30px;}
.mc_3 ul li .text_box article {font-size: 24px; display: flex; align-items: center; font-weight: 700; gap: 10px; line-height: 1;}
.mc_3 ul li .text_box article img {height: 20px; filter: invert(1);}

.mc_7 {width: 100%; background: #f3e393; padding: 100px 0px;}
.mc_7 .title h3 b i {position: relative;}
.mc_7 .title h3 b i::after {position: absolute; display: block; content: ''; z-index: -1; width: 100%; padding: 10px; background: #ead154; left: 50%; bottom: 0px; height: 30px; transform: translateX(-50%);}
.mc_7 .title article {margin-top: 10px;}
.mc_7 ul {display: flex; flex-wrap: wrap; gap: 20px;}
.mc_7 ul li {width: calc(33.3% - 13px); text-align: center;}
.mc_7 ul li .img_box {margin-bottom: 20px; border-radius: 15px; overflow: hidden;}
.mc_7 ul li .img_box img {width: 100%;}
.mc_7 ul li p {font-size: 30px; font-weight: 700; padding-bottom: 20px;}

.mc_4 {padding: 100px 0px; background: #f8f8f8;}
.mc_4 .title h3 b i {position: relative; color: #000;}
.mc_4 .title h3 b i::after {position: absolute; display: block; content: ''; z-index: -1; width: 100%; padding: 10px; background: #f7e279; left: 50%; bottom: 0px; height: 30px; transform: translateX(-50%);}
.mc_4 .title article {margin-top: 10px;}
.mc_4 .acc_box {max-width: 900px; 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); cursor: pointer; border-radius: 10px; font-size: 22px; font-weight: 600;}
.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: 18px; line-height: 1.5;}
.mc_4 .acc_box .acc_row.active p img {transform: rotate(45deg);}

.mc_5 {padding: 100px 0px;}
.mc_5 .title h3 b i {position: relative; color: #000;}
.mc_5 .title h3 b i::after {position: absolute; display: block; content: ''; z-index: -1; width: 100%; padding: 10px; background: #ead154; left: 50%; bottom: 0px; height: 30px; transform: translateX(-50%);}
.mc_5 .img_box {max-width: 1000px; margin: 0 auto;}
.mc_5 .img_box img {width: 100%;}

.mc_6 {padding: 100px 0px; background: #f3f3f3;}
.mc_6 .title h3 b i {position: relative; color: #000;}
.mc_6 .title h3 b i::after {position: absolute; display: block; content: ''; z-index: -1; width: 100%; padding: 10px; background: #ead154; left: 50%; bottom: 0px; height: 30px; transform: translateX(-50%);}
.mc_6 .btn_box {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 60px;}
.mc_6 .btn_box a {width: 100%; max-width: 400px; display: block;}
.mc_6 .btn_box a img {width: 100%;}


.mc_8 {padding: 100px 0px;}
.mc_8 ul {display: flex; gap: 15px; max-width: 800px; margin: 0 auto 60px;}
.mc_8 ul li {width: 50%; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.mc_8 ul li img {width: 100%;}
.mc_8 p {font-size: 30px; text-align: center;}
.mc_8 p b {font-weight: 600;}

#footer {padding: 50px 0px; background: #000;}
#footer .info_box p {font-size: 16px; color: #666; text-align: center; margin-bottom: 10px;}
#footer .info_box span {font-size: 16px; color: #666; text-align: center; display: block;}


@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 .img_box {max-width: 480px; margin: 0 auto;}

    .mc_1 .text_box p {font-size: 20px;}
    .mc_1 .text_box h3 {font-size: 100px;}
    .mc_1 .text_box article {font-size: 25px;}
    .mc_1 .text_box .btn_box a {font-size: 18px;}

    .mc_3 ul li .text_box span {font-size: 14px;}
    .mc_3 ul li .text_box p {font-size: 22px;}
    .mc_3 ul li .text_box article {font-size: 17px;}

    .mc_7 ul li p {font-size: 20px;}

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

    .mc_7 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;}

    .mc_6 .btn_box a .text {padding: 40px 20px;}
    .mc_6 .btn_box a .text p {font-size: 27px;}
    .mc_6 .btn_box a .text article {font-size: 18px;}
    .mc_6 .btn_box a > b,
    .mc_6 .btn_box a .text span {font-size: 18px;}

    .mc_1 .text_box .btn_box a .text {padding: 40px 20px;}
    .mc_1 .text_box .btn_box a .text p {font-size: 27px;}
    .mc_1 .text_box .btn_box a .text article {font-size: 18px;}
    .mc_1 .text_box .btn_box a > b,
    .mc_1 .text_box .btn_box a .text span {font-size: 18px;}

    .mc_8 p {font-size: 22px;}

    .mc_2 .top_info p {font-size: 20px;}
}

@media (max-width: 768px) {

    #header .container {flex-direction: column; gap: 10px;}
    #header .logo img {height: 20px;}
    #header .gnb ul {gap: 7px;}
    #header .gnb ul li a {font-size: 12px;}
    #header .naver_search a p {font-size: 13px;}

    .mc_1 .text_box > span {font-size: 14px;}
    .mc_1 .text_box > span::after, .mc_1 .text_box > span::before {width: 30px;}
    .mc_1 .text_box h3 {font-size: 60px;}
    .mc_1 .text_box article {font-size: 17px;}
    .mc_1 .text_box .btn_box {flex-direction: column; padding: 0px 20px; box-sizing: border-box;}
    .mc_1 .text_box .btn_box a {width: 100%;}

    section .title h3 {font-size: 20px;}
    section .title h3 b {font-size: 27px;}
    section .title h3 b i {font-size: 36px;}
    .mc_6 .title h3 b i::after,
    .mc_4 .title h3 b i::after,
    .mc_5 .title h3 b i::after,
    .mc_7 .title h3 b i::after {height: auto;}
    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_7 ul li {width: 100%;}

    .mc_3 ul li:nth-child(2n) {flex-direction: column-reverse; margin-top: 30px;}
    .mc_3 ul li:nth-child(2n) .text_box {text-align: left;}
    .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 {flex-direction: column;}
    .mc_6 .btn_box a  {width: 100%; box-sizing: border-box; justify-content: center; max-width: 400px;}

    .mc_8 ul {flex-direction: column;}
    .mc_8 ul li {width: 100%;}

    .mc_2 .top_info {gap: 0; padding: 10px;}
    .mc_2 .top_info p {font-size: 11px;}

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