/* common */ :root { --main: #FF8121; --sub_font: "Cormorant", serif; } .mo {display: none;} body.sidebar_open {overflow: hidden;} #hd_login_msg {display: none;} .custom_pagination {display: none;} .cormorant {font-family: var(--sub_font);} .inner {max-width: 1700px; margin: 0 auto; padding: 0px 40px;} .circle_link {display: flex; align-items: center; gap: 7px; transition: all 0.3s; font-size: 20px; font-family: var(--sub_font); color: #fff; position: relative; padding-left: 25px;} .circle_link span {position: relative; z-index: 1;} .circle_link::before {width: 54px; height: 54px; display: block; content: ''; border-radius: 100%; background: var(--main); position: absolute; left: -0px; top: 50%; transform: translateY(-50%); z-index: 0; transition: all 0.3s;} .circle_link:hover::before {width: 15px; height: 15px;} .title {text-align: center; margin-bottom: 54px;} .title p {font-size: 22px; margin-bottom: 24px;} .title h3 {font-size: 44px; font-weight: 700;} .title article {font-size: 20px; line-height: 1.5; margin-top: 16px;} .flow_wrap{position:relative;overflow:hidden;width:100%;} .flow_box{width:100%;overflow:hidden;} .flow_box ul{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none; will-change:transform;} .flow_box li{flex:0 0 auto;} .flow_box img{display:block;height:115px;width:auto;} .img_box img {width: 100%;} /* header */ #header {position: fixed; left: 0; top: 0; width: 100%; z-index: 100; transition: all 0.3s;} #header #mo_nav, #header .black {display: none;} #header .inner {display: flex; align-items: center; justify-content: space-between; height: 90px;} #header .gnb ul {display: flex; align-items: center; gap: 45px;} #header .gnb ul li a {font-size: 20px; font-weight: 600; color: #fff; transition: all 0.3s;} #header .gnb ul li a:hover {color: var(--main);} #header.fixed {background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;} #header.fixed .black {display: block;} #header.fixed .white {display: none;} #header.fixed .gnb ul li a {color: #000;} #header.fixed .gnb ul li a:hover {color: var(--main);} #sidebar {display: none;} /* footer */ #footer {padding: 100px 0px; background: url(/web/img/footer_bg.jpg) no-repeat center / cover;} #footer .top {padding-bottom: 80px; margin-bottom: 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.3);} #footer .top .title {margin-bottom: 0; text-align: left; color: #fff;} #footer .bottom .info_top {display: flex; justify-content: space-between; margin-bottom: 60px;} #footer .bottom .info_top .util ul {display: flex; align-items: center; gap: 50px;} #footer .bottom .info_top .util ul li a {font-size: 20px; font-weight: 500; color: #fff; transition: all 0.3s;} #footer .bottom .info_top .util ul li a:hover {color: var(--main);} #footer .bottom .info .logo img {height: 30px;} #footer .bottom .info article {font-size: 20px; color: #fff; line-height: 1.7;} #footer .bottom .info .copyrights {font-size:18px; color: rgba(255, 255, 255, 0.5); margin-top: 55px;} /* main */ .main .title {text-align: center; margin-bottom: 54px;} .main .title p {font-size: 22px; margin-bottom: 24px;} .main .title h3 {font-size: 44px; font-weight: 700;} .main .title article {font-size: 20px; line-height: 1.5; margin-top: 16px;} .main #section1{ position: relative; overflow: hidden; isolation: isolate; /* ✅ 스택 컨텍스트 고정 */ } .main #section1::before{ content:""; position:absolute; inset:0; z-index:-1; /* ✅ 뒤로 확실히 */ background: url(/web/img/mc_1_bg.jpg) #000 no-repeat center / cover; transform: translateZ(0) scale(2); /* ✅ 초기 페인트 안정화 */ filter: blur(18px); opacity: 1; animation: bgZoomBlurIn 3s ease-in-out forwards; animation-delay: 0.05s; /* ✅ 50ms만 늦춤 */ } .main #section1 > *{ position: relative; z-index: 1; } @keyframes bgZoomBlurIn{ 0% { transform: translateZ(0) scale(2); filter: blur(18px); } 100% { transform: translateZ(0) scale(1); filter: blur(0); } } @media (prefers-reduced-motion: reduce){ .main #section1::before{ animation:none; transform: translateZ(0) scale(1); filter: blur(0); } } .main #section1 .inner {display: flex; flex-direction: column; justify-content: flex-end; height: 100vh;} .main #section1 .text_box {display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 150px;} .main #section1 .text_box .slogan p {font-size: 30px; color: #fff; margin-bottom: 24px;} .main #section1 .text_box .slogan h2 {font-size: 80px; font-weight: 600; margin-bottom: 40px; color: #fff;} .main #section1 .text_box .slogan article {font-size: 24px; font-weight: 600; color: #fff;} .main #section1 .text_box a {transition: all 0.3s; font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 12px; padding: 14px 20px; box-sizing: border-box; border-radius: 100px; background: rgba(255, 255, 255, 0.10); width: fit-content;} .main #section1 .text_box a:hover {background: var(--main);} .main #section2 {position:relative; background: url(/web/img/mc_2_bg.jpg) no-repeat center / cover;} .main #section2 .inner {height: 100%; display: flex; align-items: center; justify-content: center;} .main #section2 .text_box {text-align: center;} .main #section2 .text_box h3 {font-size: 60px; color: #fff; font-weight: 600; margin-bottom: 40px;} .main #section2 .text_box article {font-size: 22px; color: #fff; line-height: 1.5;} .main #section3 {position:relative; background: linear-gradient(259deg, #F39A27 12.73%, #EC7512 95%);} .main #section3 .title p, .main #section3 .title h3 {color: #fff;} .main #section3 .item_box > ul {display: flex; flex-wrap: wrap; gap: 20px;} .main #section3 .item_box > ul > li {width: calc(25% - 15px); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.50); box-sizing: border-box; transition: all 0.3s;} .main #section3 .item_box > ul > li > a {display: block; padding: 40px; box-sizing: border-box;} .main #section3 .item_box > ul > li .icon_box {text-align: right; margin-bottom: 120px;} .main #section3 .item_box > ul > li .text_box {color: #fff; transition: all 0.3s;} .main #section3 .item_box > ul > li .text_box span {display: block; font-size: 18px; margin-bottom: 12px;} .main #section3 .item_box > ul > li .text_box p {font-size: 24px; font-weight: 700; margin-bottom: 20px;} .main #section3 .item_box > ul > li .text_box ol li {font-size: 18px; list-style: inside;} .main #section3 .item_box > ul > li:hover {background: #fff;} .main #section3 .item_box > ul > li:hover .text_box {color: #111;} .main #section3 .item_box > ul > li:hover .text_box span {color: var(--main);} .main #section4 {background: #000;} .main #section4 .sc_4_wrap {padding: 170px 0px;} .main #section4 .title p {color: var(--main);} .main #section4 .title article, .main #section4 .title h3 {color: #fff;} .main #section4 .bg_box {margin: -90px 0px;} .main #section4 .bg_box img {width: 100%;} .main #section4 .news_box .title_box {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 54px;} .main #section4 .news_box .title_box .title {text-align: left; margin-bottom: 0;} .main #section4 .news_box .list_box ul {display: flex; flex-wrap: wrap; gap: 40px;} .main #section4 .news_box .list_box ul li {width: calc(33.3% - 27px);} .main #section4 .news_box .list_box ul li .thumbnail {margin-bottom: 20px} .main #section4 .news_box .list_box ul li .thumbnail img {width: 100%;} .main #section4 .news_box .list_box ul li .description p {font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 14px;} .main #section4 .news_box .list_box ul li .description span {font-size: 16px; color: rgba(255, 255, 255, 0.6);} /* brand */ #brand section {padding: 170px 0px;} #brand .sub_banner {width: 100%; background: url(/web/img/brand_sub_banner_bg.jpg) no-repeat center / cover;} #brand .sub_banner .inner {display: flex; align-items: center; height: 600px;} #brand .sub_banner .title {color: #fff; text-align: left; margin-bottom: 0;} #brand .sc_1 {background: linear-gradient(197deg, #FFD6AF 10.66%, #FFE8CE 87.33%); overflow: hidden;} #brand .sc_1 .inner {display: flex; align-items: center; justify-content: space-between; gap: 70px;} #brand .sc_1 .title {text-align: left;} #brand .sc_1 .title h3 {font-size: 70px; line-height: 1.2;} #brand .sc_1 .swiper {max-width: 980px; height: 690px; overflow: visible;} #brand .sc_1 .swiper .swiper-slide .img_box {max-width: 490px; margin: 0 auto; transition: all 0.5s;} #brand .sc_1 .swiper .swiper-slide-prev {display: flex; align-items: flex-end;} #brand .sc_1 .swiper .swiper-slide-active {} #brand .sc_1 .swiper .swiper-slide-active .img_box {max-width: 100%;} #brand .sc_1 .swiper .swiper-slide .img_box img {width: 100%;} #brand .sc_1 .text_box, #brand .sc_1 .title {flex: 1;} #brand .sc_1 .text_box p {font-size: 27px;} #brand .sc_2 {background: #FF8121; overflow: hidden;} #brand .sc_2 .title_box {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 54px;} #brand .sc_2 .title_box .title {text-align: left; color: #fff; margin-bottom: 0;} #brand .sc_2 .title_box .btn_box {display: flex; gap: 12px;} #brand .sc_2 .title_box .btn_box div {cursor: pointer;} #brand .sc_2 .swiper {overflow: visible; height: fit-content;} #brand .sc_2 .swiper-slide {display: flex; align-items: center; gap: 40px; max-width: 1000px;} #brand .sc_2 .swiper-slide .img_box {max-width: 600px; transition: all 0.3s; border-radius: 0px;} #brand .sc_2 .swiper-slide-active .img_box {border-radius: 200px; overflow: hidden;} #brand .sc_2 .swiper-slide .img_box img {width: 100%;} #brand .sc_2 .swiper-slide .text_box p {font-size: 30px; font-weight: 600; color: #fff; white-space: nowrap;} #brand .sc_3 {} #brand .sc_3 .inner {display: flex; align-items: center; justify-content: space-between; position: relative; height: 810px;} #brand .sc_3 .img_box img {height: 120px;} #brand .sc_3 .text_box {max-width: 600px; box-sizing: border-box; padding: 230px 80px; box-sizing: border-box; border-radius: 300px 300px 0px 0px; background: url(/web/img/brand_sc_3_bg.jpg) no-repeat center / cover; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #brand .sc_3 .text_box .logo_box {display: flex; align-items: center; gap: 30px; margin-bottom: 60px; justify-content: center;} #brand .sc_3 .text_box .logo_box img {height: 44px;} #brand .sc_3 .text_box p {font-size: 22px; color: #FF9055; font-weight: 600; margin-bottom: 24px;} #brand .sc_3 .text_box h3 {font-size: 44px; font-weight: 700; color: #fff; margin-bottom: 20px;} #brand .sc_3 .text_box article {font-size: 20px; line-height: 1.5; color: #fff; white-space: nowrap;} #brand .sc_4 {background: linear-gradient(122deg, #F7D4AA 36.39%, #FF9A4F 99.35%);} #brand .sc_4 .title {text-align: left;} #brand .sc_4 .title p {color: var(--main);} #brand .sc_4 .title article {color: rgba(0,0,0, 0.5);} #brand .sc_4 .table_box table thead th {font-size: 20px; font-weight: 700; color: #fff; padding: 20px; text-align: center;} #brand .sc_4 .table_box table thead th.col-type {background: #7F7C78;} #brand .sc_4 .table_box table thead th.col-company {background: var(--main);} #brand .sc_4 .table_box table thead th.col-client {background: #000;} #brand .sc_4 .table_box table tbody th {font-size: 20px; font-weight: 700; border-bottom: 1px solid rgba(0,0,0, 0.3); text-align: center; vertical-align: middle; background: rgba(255, 255, 255, 0.3); font-family: var(--sub_font); width: 270px;} #brand .sc_4 .table_box table tbody td {padding: 30px 40px; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0, 0.3); vertical-align: middle;} #brand .sc_4 .table_box table tbody td ul li {font-size: 18px; font-weight: 500; line-height: 1.4; list-style: inside;} #brand .sc_4 .table_box table tbody td:nth-child(3) {background: rgba(0,0,0, 0.05);} #brand .flow_wrap {padding: 80px 0px;} /* business */ #business section {padding: 170px 0px;} #business .sub_banner {width: 100%; background: url(/web/img/business_sub_banner_bg.jpg) no-repeat center / cover;} #business .sub_banner .inner {display: flex; align-items: flex-end; height: 900px;} #business .sub_banner .title {color: #fff; text-align: left; padding-bottom: 120px; margin-bottom: 0;} #business .sub_banner .title p {color: #fff;} #business .title {text-align: left;} #business .title p {color: var(--main);} #business .item_box {border-top: 1px solid #111;} #business .item_box ul li {display: flex; align-items: center; gap: 30px; padding: 34px 0px; border-bottom: 1px solid #DDD;} #business .item_box ul li img {height: 130px;} #business .item_box ul li .text_box p {font-size: 24px; font-weight: 600; margin-bottom: 12px;} #business .item_box ul li .text_box article {font-size: 22px; color: #666;} #business .sc_1 {padding-bottom: 0;} #business .sc_2 .item_box_2 > ul {display: flex; flex-wrap: wrap; gap: 45px 30px;} #business .sc_2 .item_box_2 > ul > li {width: calc(50% - 15px);} #business .sc_2 .item_box_2 > ul > li .img_box {margin-bottom: 30px;} #business .sc_2 .item_box_2 > ul > li .text_box > p {font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 20px; margin-bottom: 24px;} #business .sc_2 .item_box_2 > ul > li .text_box > p img {height: 35px;} #business .sc_2 .item_box_2 > ul > li .text_box ol li {padding-bottom: 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #ddd;} #business .sc_2 .item_box_2 > ul > li .text_box ol li:last-child {padding-bottom: 0; border-bottom: 0; margin-bottom: 0;} #business .sc_2 .item_box_2 > ul > li .text_box ol li p {font-size: 20px; color: var(--main); font-weight: 700; white-space: nowrap;} #business .sc_2 .item_box_2 > ul > li .text_box ol li article {font-size: 18px; color: #666;} #business .sc_3 {background: #FFE4CF;} #business .sc_4 .item_box, #business .sc_3 .item_box {margin-bottom: 170px;} #business .sc_3 .swiper-wrapper {height: auto;} #business .sc_3 .swiper-slide img {width: 100%;} #business .sc_4 .item_box_2 > ul {display: flex; flex-wrap: wrap; gap: 20px;} #business .sc_4 .item_box_2 > ul > li img {width: 100%;} #business .sc_4 .item_box_2 > ul > li {width: calc(33.3% - 13px);} #business .sc_4 .item_box_2 > ul > li .text_box {padding-top: 24px;} #business .sc_4 .item_box_2 > ul > li .text_box p {font-size: 24px; font-weight: 700; margin-bottom: 24px;} #business .sc_4 .item_box_2 > ul > li .text_box ol li {font-size: 18px; color: #666; list-style: inside;} #business .sc_5 {background: linear-gradient(259deg, #F39A27 12.73%, #EC7512 95%);} #business .sc_5 .title, #business .sc_5 .title p {color: #fff;} #business .sc_5 .item_box_2 {display: flex; justify-content: space-between; gap: 110px; align-items: center;} #business .sc_5 .item_box_2 .img_box {max-width: 700px;} #business .sc_5 .item_box_2 .text_box {border-top: 1px solid #fff; padding: 40px 0px; border-bottom: 1px solid #DDD;} #business .sc_5 .item_box_2 .text_box img {margin-bottom: 24px;} #business .sc_5 .item_box_2 .text_box p {font-size: 24px; font-weight: 600; color: #fff; line-height: 1.5; margin-bottom: 10px;} #business .sc_5 .item_box_2 .text_box ol li {font-size: 18px; color: #fff; list-style: inside; opacity: 0.8; line-height: 1.6;} /* board */ #board_wrap {padding: 150px 0px 200px; display: block;} #board_wrap .title p {color: var(--main);} #board_wrap .title article {color: #666;} #board_wrap .sound_only {display: none;} #board_wrap .empty_table {font-size: 16px; text-align: center; padding: 60px 0px;} #board_wrap.news_list_wrap .bo_sch_wrap {margin-bottom: 40px;} #board_wrap.news_list_wrap .bo_sch_wrap .bo_sch {display: flex; align-items: center; justify-content: center;} #board_wrap.news_list_wrap .bo_sch_wrap .bo_sch select {display: none;} #board_wrap.news_list_wrap .bo_sch_wrap .bo_sch .sch_bar {display: flex; align-items: center; gap: 15px; box-sizing: border-box; border-bottom: 1px solid #DDD;} #board_wrap.news_list_wrap .bo_sch_wrap .bo_sch .sch_bar input {font-size: 16px; padding: 20px; box-sizing: border-box; border: 0;} #board_wrap.news_list_wrap #gall_allchk {font-size: 16px; margin-bottom: 20px;} #board_wrap.news_list_wrap #bo_btn_top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 20px;} #board_wrap.news_list_wrap #bo_btn_top a, #board_wrap.news_list_wrap #bo_btn_top button {font-size: 20px;} #board_wrap.news_list_wrap #bo_btn_top b {font-weight: 700; color: var(--main)} #board_wrap.news_list_wrap #bo_btn_top .btn_bo_user {display: flex; gap: 10px;} #board_wrap.news_list_wrap #gall_ul {display: flex; flex-wrap: wrap; gap: 30px;} #board_wrap.news_list_wrap #gall_ul li {width: calc(33.3% - 20px);} #board_wrap.news_list_wrap #gall_ul li .gall_img {margin-bottom: 20px; overflow: hidden;} #board_wrap.news_list_wrap #gall_ul li .gall_img img {width: 100%; transition: all 0.3s;} #board_wrap.news_list_wrap #gall_ul li .gall_img:hover img {transform: scale(1.1);} #board_wrap.news_list_wrap #gall_ul li .gall_img .is_notice {display: none;} #board_wrap.news_list_wrap #gall_ul li .gall_text_href .bo_tit {font-size: 20px; font-weight: 700; margin-bottom: 14px; display: block;} #board_wrap.news_list_wrap #gall_ul li .gall_info .gall_date {font-size: 16px; color: #666;} #board_wrap.news_list_wrap .pg_wrap {margin: 60px 0px 0px;} #board_wrap.news_list_wrap .pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 15px;} #board_wrap.news_list_wrap .pg_wrap .pg a {font-size: 15px;} #board_wrap.news_list_wrap .pg_wrap .pg .pg_current {font-size: 15px; font-weight: 700; color: var(--main); text-decoration: underline;} #board_wrap.news_write_wrap, #board_wrap.news_view_wrap {max-width: 1200px; margin: 0 auto;} #board_wrap.news_view_wrap .bo_v_title_wrap {padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid #DDD;} #board_wrap.news_view_wrap .bo_v_title_wrap #bo_v_title .bo_v_tit {font-size: 40px; margin-bottom: 24px; font-weight: 700;} #board_wrap.news_view_wrap .bo_v_title_wrap .date {font-size: 20px; color: #666;} #board_wrap.news_view_wrap #bo_v_con {font-size: 20px; min-height: auto;} #board_wrap.news_view_wrap #bo_v_atc {margin-bottom: 54px; padding-bottom: 54px; border-bottom: 1px solid #DDD;} #board_wrap.news_view_wrap .btn_box {display: flex; align-items: center; justify-content: center; margin-bottom: 80px;} #board_wrap.news_view_wrap .btn_box a {font-family: 'Pretendard', sans-serif; color: #111; font-size: 20px; font-weight: 600;} #board_wrap.news_view_wrap .btn_box ul {display: flex; align-items: center; gap: 10px;} #board_wrap.news_view_wrap .bo_v_nb li {border-color: #ddd; padding: 30px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;} #board_wrap.news_view_wrap .bo_v_nb li .nb_tit {font-size: 20px; font-weight: 600; color: #111; display: flex; align-items: center; gap: 10px;} #board_wrap.news_view_wrap .nb_wrap {display: flex; align-items: center; gap: 50px;} #board_wrap.news_view_wrap .nb_wrap a {font-size: 18px; color: #666;} #board_wrap.news_view_wrap .nb_wrap a:hover {text-decoration: underline;} #board_wrap.news_view_wrap .bo_v_nb li .nb_date {font-size: 16px; color: #666;} #board_wrap.news_write_wrap h2 {font-size: 40px; margin-bottom: 54px; font-weight: 700;} #board_wrap.news_write_wrap .cke_sc, #board_wrap.news_write_wrap #bo_w .bo_w_tit #btn_autosave, #board_wrap.news_write_wrap .bo_w_info, #board_wrap.news_write_wrap .bo_v_option {display: none;} #board_wrap.news_write_wrap .subject {font-size: 22px; font-weight: 700; margin-bottom: 12px;} #board_wrap.news_write_wrap .subject span {color: var(--main)} #board_wrap.news_write_wrap #bo_w .write_div input[type="text"], #board_wrap.news_write_wrap #bo_w .bo_w_tit .frm_input {width: 100%; padding: 15px 20px; border: 1px solid #ddd; font-size: 18px;} #board_wrap.news_write_wrap #bo_w .write_div {margin: 0 0 40px;} #board_wrap.news_write_wrap .file-upload-wrap{display:flex;gap:10px;width:100%;} #board_wrap.news_write_wrap .real-file{display:none;} #board_wrap.news_write_wrap .file-name{flex:1;height:60px;padding:0 14px;border:1px solid #ddd;font-size:18px;box-sizing:border-box;} #board_wrap.news_write_wrap .file-btn{height:60px;padding:0 20px;border:1px solid var(--main);background:#fff;color:var(--main);font-size:18px;cursor:pointer;white-space:nowrap; transition: all 0.3s;} #board_wrap.news_write_wrap .file-btn:hover{background:var(--main);color:#fff;} #board_wrap.news_write_wrap #bo_w .btn_confirm {display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 80px; margin-bottom: 0;} #board_wrap.news_write_wrap #bo_w .btn_confirm a, #board_wrap.news_write_wrap #bo_w .btn_confirm button {width: 50%; display: block; text-align: center; height: 60px; font-size: 18px; line-height: 60px; transition: all 0.3s;} #board_wrap.news_write_wrap #bo_w .btn_confirm a {border: 1px solid #DDD; color: #666;} #board_wrap.news_write_wrap #bo_w .btn_confirm a:hover {color: #111; border-color: #111;} #board_wrap.news_write_wrap #bo_w .btn_confirm button {background: var(--main); color: #fff;} #board_wrap.news_write_wrap #bo_w .btn_confirm button:hover {border: 1px solid var(--main); color: var(--main); background: #fff;} #board_wrap.news_write_wrap #bo_w .write_div:after {display: none;} /* inquiry */ #inquiry {display: block; padding: 200px 0px 220px; background: url(/web/img/inquiry_bg.jpg) no-repeat center / cover;} #inquiry .inner {display: flex; justify-content: space-between; gap: 40px;} #inquiry .text_box {text-align: left;} #inquiry .text_box .title {text-align: left;} #inquiry .text_box a {width: fit-content; font-size: 20px; font-weight: 700; color: var(--main); padding: 18px 40px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--main); margin-bottom: 80px;} #inquiry .text_box ul li {display: flex; align-items: center; gap: 35px; font-size: 18px; color: #fff; margin-bottom: 20px;} #inquiry .text_box ul li p {font-weight: 600; width: 85px;} #inquiry .text_box ul li:last-child {margin-bottom: 0;} #inquiry .form_box {width: 930px;} #inquiry .form_box form .form_row {display: flex; gap: 10px; margin-bottom: 40px;} #inquiry .form_box form .form_row .form_col {width: 100%;} #inquiry .form_box form .form_row .form_col p {font-size: 22px; color: #fff; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center;} #inquiry .form_box form .form_row .form_col p .essential {color: var(--main);} #inquiry .form_box form .form_row .form_col p i {font-size: 16px; font-weight: 500; color: #666; margin-left: 10px; font-style: normal;} #inquiry .form_box form .form_row .form_col input, #inquiry .form_box form .form_row .form_col textarea {width: 100%; padding: 15px 20px; border: 1px solid #ddd; font-size: 18px;} #inquiry .form_box form .form_row .form_col textarea {min-height: 250px;} #inquiry .form_box form .privacy{margin-bottom:60px;} #inquiry .form_box form .privacy input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;} #inquiry .form_box form .privacy label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:20px;color:#fff;font-weight:500;} #inquiry .form_box form .privacy label .essential{color:var(--main);} #inquiry .form_box form .privacy .custom_check{width:20px;height:20px;background:url("/web/img/check_empty.svg") no-repeat center / contain;display:inline-block;flex-shrink:0;} #inquiry .form_box form .privacy input[type="checkbox"]:checked + label .custom_check{background-image:url("/web/img/check_checked.svg");} #inquiry .form_box form #submit_btn {background: var(--main); border: 1px solid var(--main); display: block; width: 100%; color: #fff; display: block; text-align: center; height: 60px; font-size: 18px; line-height: 60px; transition: all 0.3s;} #inquiry .form_box form #submit_btn:hover {background: #111; border-color: #111;} /* responsive */ @media all and (max-width: 1280px) { .main #section1 .text_box .slogan p {font-size: 22px;} .main #section1 .text_box .slogan h2 {font-size: 60px;} .main .title p, .main #section2 .text_box article, .main #section1 .text_box .slogan article {font-size: 18px;} .main #section2 .text_box h3 {font-size: 40px;} .main #section3 .inner {padding-top: 100px; padding-bottom: 100px;} .main #section3 .item_box > ul > li {width: calc(50% - 10px);} .main #section3 .item_box > ul > li .icon_box {margin-bottom: 80px;} .main .title h3 {font-size: 32px;} .main #section4 .news_box .list_box ul li .description p, .circle_link, .main .title article {font-size: 16px;} .main #section4 .news_box .list_box ul li .description span {font-size: 14px;} .main #section4 .news_box .list_box ul {gap: 20px;} .main #section4 .news_box .list_box ul li {width: calc(33.3% - 14px);} #footer .bottom .info_top .util ul li a, #footer .bottom .info .copyrights, #footer .bottom .info article {font-size: 17px;} #brand .sc_1 .text_box {display: none;} #brand .sc_1 .inner {flex-direction: column; gap: 40px; align-items: flex-start;} #brand .sc_1 .inner .title {margin-bottom: 0;} #brand .sc_1 .swiper {height: auto;} #brand .sc_1 .swiper .swiper-slide {max-width: 768px;} #brand .sc_1 .swiper .swiper-slide-active .img_box, #brand .sc_1 .swiper .swiper-slide .img_box {max-width: 100%;} .custom_pagination {display: block; position: relative; margin-top: 40px; background: rgba(255, 91, 4, 0.20);} .custom_pagination .swiper-pagination-progressbar-fill {background: var(--main);} } @media all and (max-width: 1024px) { #header .gnb, .pc {display: none;} .mo {display: block;} #header .inner {height: 70px;} #header .logo img {height: 20px;} #sidebar {display: block; position: fixed; transform: translateX(-100%); left: 0; top: 0; width: 100%; max-width: 450px; height: 100%; background: #111; z-index: 1000;} #sidebar .box {padding: 30px; box-sizing: border-box;} #sidebar .logo {margin-bottom: 40px;} #sidebar .logo img {height: 24px;} #sidebar .gnb ul li {margin-bottom: 20px;} #sidebar .gnb ul li:last-child {margin-bottom: 0;} #sidebar .gnb ul li a {font-size: 22px; font-weight: 500; color: #fff;} .sidebar_dimmed {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 900;} #sidebar #mo_close {width: 25px; height: 25px; position: absolute; right: 30px; top: 30px;} #sidebar #mo_close span {width: 25px; height: 1px; background: #fff; display: block;} #sidebar #mo_close span:first-child {transform: rotate(45deg); position: relative; top: 1px;} #sidebar #mo_close span:last-child {transform: rotate(-45deg);} #header #mo_nav {display: flex; gap: 7px; flex-direction: column; align-items: flex-end; width: 25px;} #header #mo_nav span {display: block; width: 20px; background: #fff; height: 1px; transition: all 0.3s;} #header #mo_nav span:nth-child(2) {width: 25px;} #header #mo_nav:hover span {width: 100%;} #header.fixed #mo_nav span {background: #111;} .main #section1 .text_box {padding-bottom: 80px; flex-direction: column; gap: 24px; align-items: flex-start;} .main #section1 .text_box .slogan p {font-size: 18px; margin-bottom: 12px;} .main #section1 .text_box .slogan h2 {font-size: 32px; margin-bottom: 16px;} .main #section1 .text_box .slogan article {font-size: 16px;} .main #section1 .text_box a {font-size: 12px;} .main #section2 .inner {align-items: flex-end; justify-content: flex-start; height: 100vh;} .main #section2 .text_box {text-align: left; padding-bottom: 80px; } .main #section2 .text_box h3 {font-size: 27px; margin-bottom: 16px;} .main #section2 .text_box article {font-size: 16px;} .main #section3 .inner { padding-top: 80px; padding-bottom: 80px;} .main .title {text-align: left; margin-bottom: 40px;} .main .title p {font-size: 20px; margin-bottom: 16px;} .main .title h3 {font-size: 24px;} .main #section3 .item_box > ul > li a {padding: 24px 20px;} .main #section3 .item_box > ul > li .icon_box {margin-bottom: 40px;} .main #section3 .item_box > ul > li .text_box span {font-size: 16px;} .main #section3 .item_box > ul > li .text_box p {font-size: 20px;} .main #section3 .item_box > ul > li .text_box ol li {font-size: 15px;} .main #section4 .sc_4_wrap {padding: 80px 0px;} .main #section4 .title {padding-left: 40px; box-sizing: border-box;} .flow_box img {height: 60px;} .main #section4 .news_box .title_box .title {padding-left: 0;} .main #section4 .news_box .list_box ul {flex-direction: column; gap: 24px;} .main #section4 .news_box .list_box ul li {width: 100%;} .main #section4 .news_box .list_box ul li .description p {font-size: 18px;} .main #section4 .news_box .list_box ul li .description span {font-size: 14px;} #footer {padding: 80px 0px;} #footer .top .title {padding-left: 0;} #footer .top{flex-direction:column;margin-bottom:30px;padding-bottom:30px;align-items:flex-start;gap:40px;} .circle_link {padding-left: 15px;} .circle_link::before {width: 30px; height: 30px;} #footer .bottom .info_top {flex-direction: column; gap: 24px; margin-bottom: 30px;} #footer .bottom .info .logo img {height: 20px;} #footer .bottom .info_top .util ul {gap: 30px} #footer .bottom .info_top .util ul li a {font-size: 15px;} #footer .bottom .info .copyrights, #footer .bottom .info article {font-size: 14px;} #footer .bottom .info .copyrights {margin-top: 12px;} #brand .sc_2 .swiper-slide {flex-direction: column; align-items: flex-start;} #brand .sc_2 .custom_pagination {background: rgba(255, 255, 255, 0.20);} #brand .sc_2 .custom_pagination .swiper-pagination-progressbar-fill {background: #fff;} #brand .sc_3 .inner {flex-direction: column; gap: 40px; height: auto;} #brand .sc_3 .img_box img {height: 90px;} #brand .sc_3 .text_box {position: unset; transform: unset;} #brand .sc_4 .table_box table thead th {font-size: 16px;} #brand .sc_4 .table_box table tbody td ul li {font-size: 14px;} #brand .sc_4 .table_box table tbody th {width: 150px;} #brand .sc_4 .table_box table tbody td {padding: 20px;} #business .sub_banner .inner {height: 450px;} #business .sub_banner .title {padding-bottom: 40px;} #business .sc_2 .item_box_2 > ul > li {width: 100%;} #inquiry .inner {flex-direction: column;} #inquiry .form_box {width: 100%;} #inquiry .text_box a {margin-bottom: 24px;} .main #section4 .news_box .btn_box {display: flex;} } @media all and (max-width: 768px) { .inner {padding: 0px 20px;} #footer .bottom .info .copyrights, #footer .bottom .info article {font-size: 13px;} .main #section3 .item_box > ul > li {width: 100%;} .main #section4 .title {padding-left: 20px;} .main #section2 .text_box article br {display: none;} #footer .top .title {padding-left: 0;} #brand .sc_2 .swiper-slide .text_box p {font-size: 18px;} #brand .sc_3 .text_box {padding: 85px 30px;} #brand .sc_3 .text_box article {font-size: 14px;} #brand .sc_3 .text_box .logo_box img {height: 20px;} #brand .sc_3 .inner {align-items: normal;} #brand .sc_3 .img_box img {height: 36px;} #brand .sc_3 .text_box p {font-size: 16px; margin-bottom: 14px;} #brand .sc_3 .text_box h3 {font-size: 24px; margin-bottom: 14px;} #brand .sc_3 .text_box .logo_box {margin-bottom: 24px;} #brand .sc_3 .text_box article {white-space: unset;} #brand .sc_3 .text_box article br {display: none;} #brand section {padding: 80px 0px;} #brand .sub_banner .inner {height: 400px;} .title {margin-bottom: 40px;} .title h3 {font-size: 30px;} .title p {font-size: 20px; margin-bottom: 14px;} #brand .sc_1 .title h3 {font-size: 30px;} #brand .sc_1 .title h3 br {display: none;} #brand .sc_1 .title article {font-size: 16px;} .title article {font-size: 16px;} .title article br {display: none;} #brand .sc_2 .title_box .btn_box {display: none;} #brand .sc_2 .swiper-slide {gap: 20px; max-width: 300px;} #brand .sc_1 .swiper .swiper-slide {max-width: 300px;} #brand .sc_4 .table_box table thead th {padding: 13px 20px; font-size: 14px;} #brand .sc_4 .table_box table tbody th {width: 75px; font-size: 14px;} #brand .sc_4 .table_box table tbody td {font-size: 12px; padding: 20px 10px;} #business section {padding: 80px 0px; overflow: hidden;} #business .item_box ul li {flex-direction: column; gap: 15px; padding: 20px 0px; align-items: flex-start;} #business .item_box ul li img {height: 80px;} #business .item_box ul li .text_box p {font-size: 20px;} #business .item_box ul li .text_box article {font-size: 16px;} #business .sc_2 .item_box_2 > ul > li .img_box {margin-bottom: 20px;} #business .sc_2 .item_box_2 > ul > li .text_box > p img {height: 22px;} #business .sc_2 .item_box_2 > ul > li .text_box > p {font-size: 18px; gap: 10px; margin-bottom: 20px;} #business .sc_2 .item_box_2 > ul > li .text_box ol li {align-items: flex-start; padding-bottom: 12px; margin-bottom: 12px;} #business .sc_2 .item_box_2 > ul > li .text_box ol li p {font-size: 14px;} #business .sc_2 .item_box_2 > ul > li .text_box ol li article {font-size: 13px;} #business .sc_3 .swiper {overflow: visible;} #business .sc_3 .swiper-slide {max-width: 180px;} #business .sc_4 .item_box, #business .sc_3 .item_box {margin-bottom: 80px;} #business .sc_4 .item_box_2 > ul > li {width: 100%;} #business .sc_4 .item_box_2 > ul > li .text_box {padding-top: 20px;} #business .sc_4 .item_box_2 > ul > li .text_box p {font-size: 20px; margin-bottom: 14px;} #business .sc_4 .item_box_2 > ul > li .text_box article {font-size: 16px;} #business .item_box ul li .text_box article br {display: none;} #business .sc_5 .item_box_2 {flex-direction: column; gap: 20px;} #business .sc_5 .item_box_2 .text_box {padding: 20px 0px 20px;} #business .sc_5 .item_box_2 .text_box img {height: 60px;} #business .sc_5 .item_box_2 .text_box p {font-size: 20px; margin-bottom: 14px;} #business .sc_5 .item_box_2 .text_box ol li {font-size: 14px;} #board_wrap.news_list_wrap #bo_btn_top {flex-direction: column; align-items: flex-start; gap: 20px; font-size: 12px;} #board_wrap.news_list_wrap #bo_btn_top a, #board_wrap.news_list_wrap #bo_btn_top button {font-size: 12px;} #board_wrap.news_list_wrap .bo_sch_wrap .bo_sch .sch_bar input {font-size: 14px; padding: 12px 10px;} #board_wrap.news_list_wrap #gall_ul {gap: 20px 10px;} #board_wrap.news_list_wrap #gall_ul li {width: calc(50% - 5px);} #board_wrap.news_list_wrap #gall_ul li .gall_text_href .bo_tit {font-size: 14px; margin-bottom: 10px;} #board_wrap.news_list_wrap #gall_ul li .gall_info .gall_date {font-size: 12px;} #board_wrap.news_list_wrap #gall_ul li .gall_img {margin-bottom: 12px;} #board_wrap.news_view_wrap .bo_v_title_wrap {margin-bottom: 20px; padding-bottom: 20px;} #board_wrap.news_view_wrap .bo_v_title_wrap #bo_v_title .bo_v_tit {font-size: 24px; margin-bottom: 12px;} #board_wrap.news_view_wrap .bo_v_title_wrap .date {font-size: 14px;} #board_wrap.news_view_wrap #bo_v_con {font-size: 16px;} #board_wrap.news_view_wrap .btn_box {flex-direction: column; gap: 12px;} #board_wrap.news_view_wrap .btn_box a {font-size: 14px;} #board_wrap.news_view_wrap .bo_v_nb li {padding: 20px 0px;} #board_wrap.news_view_wrap .nb_wrap {gap: 20px;} #board_wrap.news_view_wrap .bo_v_nb li .nb_tit {font-size: 13px;} #board_wrap.news_view_wrap .bo_v_nb li .nb_tit img {height: 20px;} #board_wrap.news_view_wrap .bo_v_nb li .nb_date, #board_wrap.news_view_wrap .nb_wrap a {font-size: 12px;} #board_wrap.news_view_wrap .bo_v_nb li .nb_tit {padding-right: 0;} #board_wrap.news_write_wrap h2 {font-size: 24px; margin-bottom: 40px;} #board_wrap.news_write_wrap .subject {font-size: 16px;} #board_wrap.news_write_wrap #bo_w .write_div input[type="text"], #board_wrap.news_write_wrap #bo_w .bo_w_tit .frm_input {padding: 10px; font-size: 14px;} #board_wrap.news_write_wrap #bo_w .write_div textarea {border-color: #DDD;} #board_wrap.news_write_wrap #bo_w .write_div {margin: 0 0 20px;} #board_wrap.news_write_wrap .file-name {height: 40px;} #board_wrap.news_write_wrap .file-btn {height: 40px; font-size: 14px; padding: 0px 10px;} #board_wrap.news_write_wrap #bo_w .btn_confirm a, #board_wrap.news_write_wrap #bo_w .btn_confirm button {font-size: 15px; padding: 0px 10px; box-sizing: border-box; height: 40px; line-height: 44px;} #board_wrap.news_write_wrap #bo_w .btn_confirm {margin-top: 40px;} .title {text-align: left;} #inquiry .text_box .title {margin-bottom: 20px;} #inquiry .text_box .title h3 {font-size: 24px;} #inquiry .text_box a {font-size: 15px; padding: 10px 20px;} #inquiry .text_box ul li p {width: 65px;} #inquiry .text_box a img {height: 20px;} #inquiry .form_box form .form_row {flex-direction: column; gap: 20px; margin-bottom: 20px;} #inquiry .text_box ul li {font-size: 15px; margin-bottom: 10px;} #inquiry .form_box form .form_row .form_col p {font-size: 16px; margin-bottom: 12px; gap: 5px; flex-direction: column; align-items: flex-start;} #inquiry .form_box form .form_row .form_col p i {display: block; font-size: 12px; } #inquiry .form_box form .form_row .form_col input, #inquiry .form_box form .form_row .form_col textarea {padding: 12px; font-size: 14px;} #inquiry .form_box form .privacy label {font-size: 16px;} #inquiry .form_box form #submit_btn {font-size: 15px; height: 44px; line-height: 44px;} #inquiry {padding: 120px 0px 100px;} #board_wrap {padding: 60px 0px 100px;} }