@charset "utf-8";

/* ============================================
   반응형 CSS - style_resp.css
   ============================================ */

/* 태블릿 (1500px 이하) */
@media (max-width: 1500px) {
    .wrap {
        width: 100%;
        max-width: 1300px;
        padding: 0 30px;
    }

	/* popup */
	.hd_pops { left: 2% !important; top: 80px !important; }	
	.hd_pops { left: 2% !important; max-width: 96%; height: auto; }
	.hd_pops_con { max-width: 100% !important; width: auto !important; height: auto !important; }
	.hd_pops_con a { display: inline-block; }

    .main_text h2 {
        font-size: 52px;
    }

    .main_text p {
        font-size: 20px;
    }

    .main_con_title h2 {
        font-size: 52px;
    }

    .sub_title h2 {
        font-size: 72px;
    }

    #targetSection .text-box h3 {
        width: 580px;
        font-size: 72px;
    }

    #targetSection .text-box p {
        font-size: 34px;
    }

    .about_inr02 .wrap {
        width: 100%;
        max-width: 1100px;
    }

    .global_textbox h3 {
        font-size: 58px;
    }

    .global_textbox p {
        font-size: 20px;
    }
}

/* 중형 태블릿 (1280px 이하) */
@media (max-width: 1280px) {
    .wrap {
        max-width: 1100px;
        padding: 0 25px;
    }

    .head {
        height: 80px;
    }

    .head_right {
        gap: 50px;
    }

    .head_right .menu {
        gap: 0 50px;
    }

    .head_right .menu li a {
        font-size: 18px;
    }

    .main_text {
        bottom: 120px;
    }

    .main_text h2 {
        font-size: 46px;
        margin-bottom: 40px;
    }

    .main_text p {
        font-size: 18px;
    }

    .main_con {
        height: auto;
        min-height: auto;
        padding: 120px 0;
    }

    .main_con_title {
        margin-bottom: 60px;
    }

    .main_con_title h2 {
        font-size: 46px;
    }

    .main_con_title p {
        margin-top: 40px;
        font-size: 18px;
    }

    .main_con02 .main_con_title {
        width: 45%;
        padding-right: 30px;
    }

    .contect_form {
        width: 55%;
        padding-left: 30px;
    }

    .contect_form ul li input.frm_input,
    .contect_form ul li textarea {
        padding: 18px;
        font-size: 18px;
    }

    .contect_form ul li input.frm_input {
        height: 55px;
    }

    .contect_form ul li textarea {
        height: 200px;
    }

    .contect_form ul li input::placeholder,
    .contect_form ul li textarea::placeholder {
        font-size: 16px;
    }

    .contect_form ul li.agreebox label {
        font-size: 15px;
    }

    .contect_btn {
        width: 180px;
        height: 55px;
        font-size: 18px;
    }

    .sub_vis {
        height: 500px;
    }

    .sub_title {
        bottom: 60px;
    }

    .sub_title h2 {
        font-size: 68px;
    }

    .board_cont,
    .subpage_inr {
        padding: 120px 0;
    }

    .about_inr01 {
        padding: 120px 0 0;
    }

    #targetSection .text-box h3 {
        width: 500px;
        font-size: 64px;
        margin-bottom: 40px;
    }

    #targetSection .text-box p {
        font-size: 30px;
    }

    .about_list {
        gap: 60px;
    }

    .about_list li {
        width: 48%;
    }

    .about_list li:nth-child(even) {
        top: 200px;
    }

    .about_list li .textbox {
        margin-top: -80px;
        padding: 60px 40px;
    }

    .about_list li .textbox h3 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .global_textbox {
        width: calc(100% - 600px);
        padding-right: 60px;
    }

    .global_textbox h3 {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .global_textbox p {
        font-size: 18px;
    }

    .global_imgbox {
        height: 500px;
    }

    .global_imgbox.active {
        width: 600px;
    }

    .page.contacts {
        padding: 120px 0;
    }

    .contacts_info h3 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .contacts_info ul li {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .contect_title h2 {
        font-size: 36px;
    }

    .footer .wrap {
		width: 96%;
        padding: 60px 0;
    }
}

/* 소형 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .wrap {
        padding: 0 20px;
    }

    /* 헤더 */
    .head {
        height: 70px;
    }

    .head_right {
        gap: 30px;
    }

    .head_right .menu {
        gap: 0 30px;
    }

    .head_right .menu li a {
        font-size: 16px;
    }

	.dropdown_bar { height: 35px; padding-left: 40px; padding-right: 15px; font-size: 13px; }
	.dropdown_bar:after { left: 15px; top: 6px; }

    /* 메인 비주얼 */
    .main_vis {
        height: 80vh;
    }

    .main_text {
        bottom: 80px;
    }

    .main_text h2 {
        font-size: 38px;
        margin-bottom: 30px;
    }

    .main_text p {
        font-size: 16px;
    }

    .scrolldown {
        height: 180px;
    }

    /* 메인 콘텐츠 */
    .main_con {
        padding: 100px 0;
    }

    .main_con_title {
        margin-bottom: 50px;
    }

    .main_con_title h2 {
        font-size: 38px;
    }

    .main_con_title h2 span:after {
        right: -30px;
        width: 8px;
        height: 8px;
    }

    .main_con_title p {
        margin-top: 30px;
        font-size: 16px;
    }

    .main_con02 .wrap {
        flex-direction: column;
    }

    .main_con02 .main_con_title {
        width: 100%;
        margin-bottom: 50px;
        padding-right: 0;
    }

    .contect_form {
        width: 100%;
        padding-left: 0;
    }

    .contect_form ul {
        margin-bottom: 40px;
    }

    .contect_form ul li {
        margin-bottom: 15px;
    }

    .contect_form ul li input.frm_input,
    .contect_form ul li textarea {
        padding: 15px;
        font-size: 16px;
    }

    .contect_form ul li input.frm_input {
        height: 50px;
    }

    .contect_form ul li textarea {
        height: 180px;
    }

    .contect_form ul li input::placeholder,
    .contect_form ul li textarea::placeholder {
        font-size: 14px;
    }

    .contect_form ul li.agreebox label {
        font-size: 14px;
    }

    .contect_form ul li.agreebox input {
        width: 18px;
        height: 18px;
    }

    .contect_btn {
        width: 160px;
        height: 50px;
        font-size: 16px;
    }

    /* 서브 비주얼 */
    .sub_vis {
        height: 400px;
    }

    .sub_title {
        bottom: 50px;
    }

    .sub_title h2 {
        font-size: 54px;
    }

    .board_cont,
    .subpage_inr {
        padding: 100px 0;
    }

    .about_inr01 {
        padding: 100px 0 0;
    }

    /* 타겟 섹션 */
    #targetSection { overflow: hidden; }

    #targetSection .text-box {
        width: 95%;
    }

    #targetSection .text-box h3 {
        width: 100%;
        max-width: 450px;
        font-size: 52px;
        margin-bottom: 30px;
    }

    #targetSection .text-box p {
        font-size: 24px;
    }

    .effect-box img {
        width: 100%;
    }

    /* About 리스트 */
    .about_list {
        gap: 40px;
    }

    .about_list li {
        width: 100%;
    }

    .about_list li:nth-child(even) {
        top: 0;
    }

    .about_list li .textbox {
        width: 90%;
        margin-top: -60px;
        padding: 50px 30px;
    }

    .about_list li .textbox h3 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .about_list li .textbox p {
        font-size: 15px;
    }

    /* Global */
    .about_inr03 {
		min-height: auto;
        background-position: left -200px top;
    }

    .about_inr03 .wrap {
        flex-direction: column;
    }

    .global_textbox {
        width: 100%;
        padding-right: 0;
        margin-bottom: 50px;
    }

    .global_textbox h3 {
        font-size: 40px;
    }

    .global_textbox p {
        font-size: 16px;
    }

    .global_imgbox {
        width: 100%;
        height: 400px;
    }

    .global_imgbox.active {
        width: 100%;
    }

    /* Contacts */
    .page.contacts {
        padding: 100px 0;
    }

    .page.contacts .wrap {
        flex-direction: column;
    }

    .contacts_left {
        width: 100%;
        margin-bottom: 60px;
    }

    .page .contect_form {
        width: 100%;
        padding-left: 0;
    }

    .contacts_info {
        flex-direction: column !important;
        margin-bottom: 40px;
    }

    .contacts_info .textbox {
        width: 100%;
        padding: 0 0 30px 0 !important;
    }

    .contacts_info .imgbox {
        width: 100%;
    }

    .contect_title h2 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .contect_title p {
        font-size: 15px;
    }

    /* Footer */
    .footer .wrap {
        padding: 50px 0;
    }

    .footer_menu {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px 30px;
        margin-bottom: 30px;
    }

    .footer_menu li a {
        text-align: left;
        font-size: 1em;
    }

    .footer_info {
        font-size: 14px;
    }

    .footer_info_inr span {
        padding: 0 15px;
    }
}

/* 모바일 가로 (768px 이하) */
@media (max-width: 768px) {
    .wrap {
        padding: 0 15px;
    }

    /* 헤더 */
    .head {
        height: 60px;
    }

    .head .logo img {
        max-width: 180px;
    }

    .head_right {
		position: absolute;
        top: 5px;
		right: 60px;
        gap: 20px;
    }

    .head_right .menu {
        display: none;
    }

	nav.mobile_menu { position: fixed; top: -100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; height: 100%; z-index: 9001; background: rgba(0, 0, 0, 0.9); border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; transition: all 650ms cubic-bezier(1,0,0,1); }
	nav.mobile_menu.open { top: 0; padding: 80px 0px; border-radius: initial; }

	.nav-inner { position: relative; display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 5%; }
	.nav-list { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; }
	.nav-list li { margin-bottom: 30px; width: 100%; text-align: center; }
	.nav-list li:last-child { margin-bottom: 0px; }
	.nav-list li a { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #fff; font-size: 24px; font-weight: 400; }

	.nav-link { padding: 1rem; font-size: 2rem; }
	.nav-link:hover, .nav-link:focus { color: #fff; }

	.menu-toggler { position: fixed; top: 20px; right: 2%; width: 30px; height: 19px; display: flex; flex-direction: column; justify-content: space-between; z-index: 9999; transition: all 650ms ease-out; cursor: pointer; }
	.menu-toggler.open { transform: rotate(-45deg); }

	.bar { background-color: #fff; width: 100%; height: 2px; border-radius: 0.8rem; }
	.scrolled .bar { background-color: #222; }
	.open .bar { background-color: #fff; }
	

	.bar.half { width: 50%; }
	.bar.top { transform-origin: right; transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57); }
	.open .bar.top { transform: rotate(-450deg) translateX(0.45rem); }
	.bar.bottom { align-self: flex-end; transform-origin: left; transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57); }
	.open .bar.bottom { transform: rotate(-450deg) translateX(-0.45rem); }

	.nav-inner ul ul { display: none; margin-top: 10px; }
	.nav-inner ul ul li { position: relative; margin-bottom:0px; padding-left: 30px; }
	.nav-inner ul ul li:after { content: ''; position: absolute; left: 10px; top: 14px; width: 7px; height: 1px; background: #fff; }
	.nav-inner ul ul li a { display: inline-block; padding: 0px; color: rgba(255, 255, 255, 0.7); font-size: 18px; font-weight: 300; line-height: 1.8; text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
	.nav-inner ul ul li a:hover { color: rgba(255, 255, 255, 1); }
	.nav-inner ul ul li a:before { display: none; height: 1px; }
	.nav-inner ul ul li a:after { display: none; }

    /* 메인 비주얼 */
    .main_vis {
        height: 70vh;
    }

    .main_deco .main_line {
        display: none;
    }

    .main_text {
        bottom: 60px;
    }

    .main_text h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .main_text p {
        font-size: 14px;
    }

    .scrolldown {
        display: none;
    }

    /* 메인 콘텐츠 */
    .main_con {
        padding: 80px 0;
    }

    .main_con_title {
        margin-bottom: 40px;
    }

    .main_con_title h2 span:after {
        right: -20px;
        width: 6px;
        height: 6px;
    }

    .main_con_title p {
        margin-top: 20px;
        font-size: 14px;
    }

    .main_con01 .swiper-button-prev,
    .main_con01 .swiper-button-next {
        width: 50px;
        height: 50px;
    }

    .main_con01 .swiper-button-prev {
        right: 60px;
    }

    .contect_form ul li input.frm_input,
    .contect_form ul li textarea {
        padding: 12px;
        font-size: 14px;
    }

    .contect_form ul li input.frm_input {
        height: 45px;
    }

    .contect_form ul li textarea {
        height: 150px;
    }

    .contect_form ul li input::placeholder,
    .contect_form ul li textarea::placeholder {
        font-size: 13px;
    }

    .contect_form ul li.agreebox label {
        font-size: 12px;
    }

    .contect_form ul li.agreebox input {
        width: 16px;
        height: 16px;
    }

    .contect_btn {
        width: 140px;
        height: 45px;
        font-size: 14px;
    }

    /* 서브 비주얼 */
    .sub_vis {
        height: 300px;
    }

    .sub_title {
        bottom: 30px;
    }

    .sub_title h2 {
        font-size: 36px;
    }

    .board_cont,
    .subpage_inr {
        padding: 80px 0;
    }

    .about_inr01 {
        padding: 80px 0 0;
    }

    /* 타겟 섹션 */
    #targetSection {  }
	
	#targetSection .text-box {
        width: 95%;
        left: 2%;
        transform: translateY(80px);
    }

	#targetSection .text-box.active {
		opacity: 1;
		transform: translateY(0px);
	}

    #targetSection .text-box h3 {
        max-width: 300px;
        margin-bottom: 20px;
		font-size: 36px;
    }

    #targetSection .text-box p {
        font-size: 18px;
    }

    /* .effect-box img.pc_img {
        display: none !important;
    }

    .effect-box img.mo_img {
        display: inline-block !important;
    } */

    /* About 리스트 */
    .overview_textbox {
        position: static;
        width: 100%;
        margin-bottom: 40px;
    }

    .overview_textbox h3 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .overview_textbox p {
        font-size: 14px;
    }

    .about_list {
        gap: 30px;
    }

    .about_list li .imgbox img {
        border-radius: 10px 0;
    }

    .about_list li .textbox {
        margin-top: -50px;
        padding: 40px 20px;
        border-radius: 10px 0;
    }

    .about_list li .textbox h3 {
        font-size: 22px;
    }

    .about_list li .textbox p {
        font-size: 14px;
    }

    /* Global */
    .about_inr03 {
        background: #f4f4f4;
    }

    .global_textbox h3 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .global_textbox p {
        font-size: 14px;
    }

    .global_imgbox {
        height: 300px;
        border-radius: 10px 0;
    }

    /* Contacts */
    .page.contacts {
        padding: 80px 0;
    }

    .contacts_left {
        margin-bottom: 50px;
    }

    .contacts_info {
        margin-bottom: 30px;
    }

    .contacts_info h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .contacts_info ul li {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .contacts_info ul li dl dd {
        margin-bottom: 8px;
    }

    .contacts_info ul li dl dd i {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .contacts_info .imgbox img {
        border-radius: 0 10px;
    }

    .contect_title h2 {
        font-size: 26px;
    }

    .contect_title p {
        font-size: 14px;
    }

    /* Footer */
    .footer {
        font-size: 13px;
    }

    .footer .wrap {
        padding: 40px 0;
    }

    .footer_menu {
        gap: 10px 20px;
        margin-bottom: 20px;
    }

    .footer_menu li a {
        font-size: 0.95em;
    }

    .footer_info {
		text-align: center;
		font-size: 12px;
    }
	
	.footer_info_main br {
		display: none;
	}

    .footer_info_inr span {
		display: block;
        padding: 0 0px;
    }

    .footer_info_inr span:after {
        display: none;
    }

	.footer_info_inr strong {
		display: block;
	    margin-right: 0px;
	}

    .footer_copyright {
        margin-top: 15px;
    }
}

/* 모바일 세로 (480px 이하) */
@media (max-width: 480px) {
    #top_btn { top: -25px; width: 50px; height: 50px; font-size: 1.2em; }
	
	/* 헤더 */
    .head .logo img {
        max-width: 140px;
    }

    .dropdown_bar {
        height: 30px;
        padding-left: 32px;
        padding-right: 12px;
        font-size: 12px;
    }

    .dropdown_bar:after {
		top: 7px;
        width: 12px;
        height: 12px;
    }

    /* 메인 콘텐츠 */
    .main_con {
        padding: 60px 0;
    }

    .main_con01 .swiper-button-prev,
    .main_con01 .swiper-button-next {
        width: 45px;
        height: 45px;
    }

    .main_con01 .swiper-button-prev {
        right: 55px;
    }

    .contect_form ul li input.frm_input {
        height: 42px;
        font-size: 13px;
    }

    .contect_form ul li textarea {
        height: 130px;
        font-size: 13px;
    }

    .contect_btn {
        width: 120px;
        height: 42px;
        font-size: 13px;
    }

    /* 서브 비주얼 */
    .sub_vis {
        height: 250px;
    }

    .sub_title h2 {
        font-size: 28px;
    }

    .board_cont,
    .subpage_inr {
        padding: 60px 0;
    }

    .about_inr01 {
        padding: 60px 0 0;
    }

    /* 타겟 섹션 */

    #targetSection .text-box h3 {
		max-width: 180px;
        font-size: 28px;
    }

    #targetSection .text-box p {
        font-size: 16px;
    }

    /* About 리스트 */
    .overview_textbox h3 {
        font-size: 26px;
    }

    .about_list li .textbox h3 {
        font-size: 20px;
    }

    /* Global */
    .global_textbox h3 {
        font-size: 26px;
    }

    .global_imgbox {
        height: 250px;
    }

    /* Contacts */
    .page.contacts {
        padding: 60px 0;
    }

    .contacts_info h3 {
        font-size: 18px;
    }

    .contacts_info ul li {
        font-size: 13px;
    }

    .contect_title h2 {
        font-size: 22px;
    }

    /* Footer */
    .footer_menu li a {
        font-size: 0.9em;
    }

    .footer_info {
        font-size: 11px;
    }

    .footer_info_inr span {
        display: block;
        padding: 5px 0;
    }

    .footer_info_inr span:after {
        display: none;
    }

    .footer_info_main strong {
        margin-bottom: 3px;
    }
}

/* 초소형 모바일 (360px 이하) */
@media (max-width: 360px) {
    .main_text h2 {
        font-size: 20px;
    }

    .main_con_title h2 {
        font-size: 20px;
    }

    .sub_title h2 {
        font-size: 24px;
    }

    #targetSection .text-box h3 {
        font-size: 24px;
    }

    #targetSection .text-box p {
        font-size: 14px;
    }

    .overview_textbox h3 {
        font-size: 22px;
    }

    .global_textbox h3 {
        font-size: 22px;
    }

    .contect_title h2 {
        font-size: 20px;
    }
}