@charset "utf-8";

/* Desktop */
@media screen and (max-width: 1700px) {



}
@media screen and (max-width: 1440px) {
	.breadcrumb ul {
		padding: 0 16px;
	}

}

@media screen and (max-width: 1280px) {
    /* ###### Header ###### */
    header {
        padding: 12px;
    }
    header nav{
        display: none;
    }
    .user_area {
        display: none;
    }
    .inq_btn {
        position: fixed;
        right: 24px;
        bottom: 24px;
        box-shadow: 0 0 10px #00000024;
    }

    /* ###### Trigger & m_gnb_wrap ###### */
    .trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    .trigger_inner {
        width: 24px;
        height: 16px;
        position: relative;
    }
    .trigger span {
        width: 100%;
        height: 2px;
        background-color: #111827;
        position: absolute;
    }
    .trigger span:nth-child(1) {
        top: 0;
    }
    .trigger span:nth-child(2) {
        top: 50%;
    }
    .trigger span:nth-child(3) {
        top: 100%;
    }
    .trigger.active span:nth-child(1) {
        transform: rotate(-45deg);
        top: 50%;
    }
    .trigger.active span:nth-child(2) {
        display: none;
    }
    .trigger.active span:nth-child(3) {
        transform: rotate(45deg);
        top: 50%;
    }
    /* m_gnb_wrap */ 
    .m_gnb_wrap {
        display: block;
        position: fixed;
        top: 57px;
        background: #fff;
        width: 500px;
        max-width: 100%;
        height: calc(100vh - 57px);
        right: -100%;
        transition: .3s;
        border-left: 1px solid var(--bt);
        box-shadow: 0 2px 6px #00000024;
        z-index: 999;
    }
    .m_gnb_wrap.active {
        right: 0;
    }
    .m_gnb {
        height: 100%;
    }
    .m_gnb_inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .m_login_wrap {
        background-color: var(--pc1);
        color: #fff;
        display: flex;
    }
    .m_login_wrap > a {
        flex: 1;
        text-align: center;
        padding: 6px 12px;
    }
    .m_login_wrap > a + a {
        border-left: 1px solid #ffffff88;
    }
    .m_login_ect_2 {
        background-color: var(--tp);
    }
    .m_gnb_list_wrap {
        padding: 12px;
        padding-top: 6px;
        overflow: auto;
        flex: 1;
    }
    .m_gnb_list {
        border-bottom: 1px solid var(--bt);
    }
    .dep_1 {
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
    }
    .dep_1.active {
        border-bottom: 1px solid var(--pc1);
        color: var(--pc1);
    }
    .dep_1 span {
        font-weight: 600;
    }
    .m_gnb_list:has(.dep_2) .dep_1 i {
        width: 24px;
        height: 24px;
        background: url(../img/chevron_right.png) no-repeat center center;
        background-size: contain;
    }
    .m_gnb_list:has(.dep_2) .dep_1.active i {
        width: 24px;
        height: 24px;
        background: url(../img/chevron_right_act.png) no-repeat center center;
        background-size: contain;
    }
    .dep_2 {
        display: none;
        padding: 12px;
    }
    .dep_2 > a {
        display: block;
        padding: 8px;
        color: var(--tsi);
    }
    /* ###### sub_visual ###### */
    .sub_visual {
        margin-top: 57px;
        height: auto;
        padding: 24px 16px;
        padding-bottom: 48px;
    }

    /* mainSec */
    .mainSec1 {
    	background: linear-gradient(to left, #ffffff00 58%, #111827 58% );
    }
    .mainSec1 .secRight {
    	padding: 40px 0;
    	margin-left: 16px;
    }
    
    .hero_txt h1 {
        font-size: 3.8rem;
    }



    .main_txt {
        font-size: 2.4rem;
    }
    .mainSec2 .secRight .desc_txt {
        font-size: 1.6rem;
    }
    .go_txt_wrap .main_txt {
        font-size: 2rem;
    }
    .mainSec3 .desc_txt {
        font-size: 1.6rem;
    }
    .contactUs h3 {
        font-size: 1.8rem;
    }
    .contactUs span {
        font-size: 1.4rem;
        padding: 6px 12px;
    }
    .contactUs li img {
        width: 16px;
    }
    .mainSec3 .secRight {
        width: calc(76% - 160px);
    }
    .news_title {
        font-size: 1.6rem;
    }
    .news_cont {
        font-size: 1.4rem;
        min-height: 45px;
    }
    .news_date {
        font-size: 1.2rem;
    }
    .news_info i {
        width: 14px;
        height: 14px;
    }

    /* ## pj_layout ## */
    .pj_layout {
        gap: 24px;
    }
    .pj_right,
    .pj_left {
        width: calc(50% - 12px);
    }


    /* ## greet ## */
    .outer_circle {
        width: 300px;
        height: 300px;
    }
    .greet_content .text {
        font-size: 1.6rem;
    }
    .box_text {
        font-size: 1.6rem;
    }
    .box_text span {
        display: inline;
    }
}


@media screen and (max-width: 1024px) {
	.sub_visual h1 {
		font-size: 3rem;
	}
    /* ###### Footer ###### */
    footer {
        font-size: 1.2rem;
    }

    /* ###### Board_wrap: 게시판 목록 ###### */
    .board_t th {
        font-size: 1.4rem;
    }
    .m_t_none {
        display: none;
    }
    .m_t_block {
        display: block;
        color: var(--tsi);
        font-size: 1.2rem;
    }

    /* mainSec */
    .mainSec3 .secRight {
        width: 70%;
    }
    .newsList li a {
        padding: 24px;
    }
    
    /* project */
    .project_visu {
        padding: 32px;
    }
    .project_visu h2 {
        font-size: 2.4rem;
    }
    .pj_title h1 {
        font-size: 2.4rem;
    }
    .pj_desc {
        font-size: 1.6rem;
    }
    .func_list li {
        font-size: 1.6rem;
    }
    .benefit {
        padding: 18px;
    }
    .benefit li {
        font-size: 1.6rem;
    }
    .benefit li + li {
        margin-top: 10px;
    }


    /* ## greet ## */
    .square_wrap {
        gap: 16px;
    }
    .divider {
        width: 16px;
        display: none;
    }
    .square_wrap {
        flex-wrap: wrap;
    }
    .square_left,
    .square_right {
        width: 100%;
        padding: 24px;
        border-radius: 12px;
    }
    .greeting_text_main {
        font-size: 1.6rem;
        margin-top: 0;
    }
    .greeting_text_introduction small {
        font-size: 1.4rem;
    }
    .greeting_text_introduction span {
        font-size: 1.8rem;
    }
    
    
    /* ## company ## */
    .history_1 {
    	margin-top: 20px;
    	margin-bottom: 100px;
    }
    .history_1 .title_wrap h1,
    .history_2 .title_wrap h1  {
    	font-size: 2.4rem;
    }
    .history_list li em {
    	font-size: 1.6rem;
    }
    .history_detail p {
    	font-size: 1.6rem;
    	z-index: 10;
    }
    .history_detail p::before {
    	top: 8px;
    }
    
    /* ### 사업분야 ### */
    .biz_area .item .desc {
		width: 50%;
	}
    .biz_area h1 {
    	font-size: 2.4rem;
    }
    .biz_area strong {
    	font-size: 1.8rem;
    }
    
}


@media screen and (max-width: 962px) {
    /* mainSec */
    .mainSec {
        padding: 80px 0;
    }
    .mainSec1 .secLeft::after {
        left: 12px;
    }
    .mainSec1 {
    	background: transparent;
    }
    .mainSec1 .inner {
        flex-direction: column;
        gap: 42px;
      	padding-left: 0;
      	padding-right: 0; 
    }
    .mainSec1 .secRight {
        width: 100%;
        text-align: center;
		padding: 0 16px;
        border-bottom-left-radius: 0;
        order: 1;
        margin-left: 0;
    }
    .mainSec1 .secLeft {
        order: 2;
        width: 100%;
        padding: 32px 16px;
    }
    .mainSec1 .secLeft::after {
        bottom: 50%;
    } 
	.mainSlide .biz_inner {
		gap: 8px;
	}

    .mainSec2 .secRight {
        flex-direction: column;
    }
    .mainSec2 .secRight .main_txt_wrap {
        width: 100%;
        gap: 16px;
    }
    .project_go {
        width: 100%;
    }
    .mainSec3 .inner {
        flex-direction: column;
        gap: 40px;
    }
    .mainSec3 .secLeft {
        width: 100%;
    }
    .idea_img {
        left: calc(100% - 180px);
    }
    .mainSec3 .main_txt::after {
        left: 12px;
        top: -32px;
    }
    .mainSec3 .secRight {
        width: 100%;
    }
    .mainSec4 .inner {
        flex-direction: column;
    }
    .mainSec4 .secLeft {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .mainSec4 .secRight {
        width: 100%;
    }

    /* project */
    .project_visu h2 {
        font-size: 2rem;
    }
    .project_tab .tab_btn {
        font-size: 1.4rem;
        padding: 10px 16px;
    }



}

/* Tablet */
@media screen and (max-width: 768px) {
    /* ###### Footer ###### */
    .fBtn {
        padding: 6px 16px;
        font-size: 1.2rem;
    }

    /* ###### total_search_box ###### */
    .total_search_box {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }
    .search_box {
        width: 100%;
        justify-content: flex-end;
    }
    /* title_wrap */
    .title_wrap h1 {
        font-size: 2.4rem;
    }

    /* mainSec */
    .mainSec2 .inner {
        flex-direction: column;
        gap: 40px;
    }
    .mainSec2 .secLeft {
        width: 100%;
    }
    .shorts {
        margin: 0 auto;
    }
    .project_go {
        padding: 30px;
    }
    .go_btns li a {
        background-color: #ffffff96;
    }
    .mainSec2 .secRight {
        width: 100%;
    }
    .newsList li {
        width: calc(50% - 12px);
    }
    .metaball-wrap {
        right: 0;
        bottom: calc(100% - 72px);
    }
    .metaball-wrap svg {
        transform: rotate(0);
    }

    /* ## project ## */
    .project_visu {
        background: url(../img/p_visu.png) no-repeat right -16px bottom -40px,
                url(../img/gradient_bg.png) no-repeat center center;
        background-size: 60% auto, cover;
    }
    .pj_right,
    .pj_left {
        width: 100%;
    }
    .pj_left {
        gap: 20px;
    }
    .pj_desc {
        margin-top: 0;
    }

    /* ## company ## */
    .company_info tr {
        display: flex;
        flex-direction: column;
    }
    .company_info th,
    .company_info td {
        padding-left: 0;
    }
    .company_info th {
        border-bottom: 1px solid transparent;
        padding-bottom: 8px;
    }
    .company_info td {
        padding-top: 8px;
    }
    .company_info ul {
        gap: 6px;
    }
    
    /* ## greet ## */
    .greeting_img {
        gap: 24px;
        padding-top: 0;
    }
    .outer_circle {
        width: 240px;
        height: 240px;
    }
    .square_wrap {
        width: 100%;
        flex-wrap: nowrap;
    }
    .divider {
        display: block;
        
    }
    .greet_content .text {
        padding: 12px 16px;
    }
    .box_icon {
        height: 32px;
    }
    .box_text {
        word-break: keep-all;
    }

    /* busi */
    .bus_top,
    .bus_bottom {
        gap: 16px;
    }
    .bus_top {
        margin-bottom: 16px;
    }
    .busMain .hero_txt h1 {
        font-size: 2.4rem;
    }
    .bus_title h1 {
        font-size: 2rem;
    }
    .bus_top_l,
    .bus_top_r,
    .bus_bottom_l,
    .bus_bottom_r {
        width: 50%;
    }

	/* ###### 회원가입 입력폼 레이아웃 ###### */
	.inner.joinForm .form_wrap {
		padding: 16px;
	}
	.form_t.type2 tr {
		display: flex;
		flex-direction: column;
		
	}
	.form_t.type2 th {
		padding-bottom: 2px;
		width: 100%;
	}
	.form_t.type2 td {
		padding-bottom: 12px;
	}
	.form_t.type2 td {
		width: 100%;
	}
	.guide_mt {
		font-size: 1.2rem;
	}
	
	/* ## company ## */
	.history_list {
		flex-wrap: wrap;
		border-left: 3px solid;
		border-image: linear-gradient(180deg, #5E9988, #205ee4) 1;
	}
	.history_list ul {
		width: 100%;
	}
	.history_list ul:nth-child(1) {
		border-left: none;
	}
	.history_list ul:nth-child(2) {
		border-left: none;
	}
	
	/* ### 인증서 화면 certificate ### */

	.gra_title {
		margin-top: 64px;
		font-size: 2.4rem;
	}
	.gra_title::before {
		height: 52px;
	}
	
	
	/* ### 사업분야 ### */
	.biz_area .item {
		flex-wrap: wrap;
	}
	.biz_area .item .desc {
		width: 100%;
	}
	.biz_area .item .points {
		width: 100%;
	}
	
	/* ## company ## */
	.history_1 {
		padding: 20px;
	}
	
	
	
}

/* Mobile */
@media screen and (max-width: 560px) {
    /* ###### Login_wrap ###### */
    .loginMain {
        padding-top: 90px;
    }

    /* ###### form 입력폼 레이아웃 ###### */
    .form_t th {
        width: 70px;
    }
    .form_t th,
    .form_t td {
        font-size: 1.4rem;
    }

    /* mainSec */
    .contactUs {
        flex-direction: column;
    }
    .contactUs h3 {
        font-size: 2.4rem;
    }
    .hero_txt h1 {
        font-size: 2.8rem;
    }

    /* busi */
    .bus_top,
    .bus_bottom {
        flex-wrap: wrap;
    }
    .bus_top_l,
    .bus_top_r,
    .bus_bottom_l,
    .bus_bottom_r {
        width: 100%;
        padding: 20px;
    }
    .bus_title {
        margin-bottom: 6px;
    }

	
	/* ### 사업분야 ### */
	.biz_area .point {
		width: 100%;
	}
	.biz_area .item3 { 
		background: url('../img/bs_7.png') no-repeat bottom -100px center / 180px,
	                url('../img/bs_5.png') no-repeat top -60px right -60px / 240px,
	                var(--bgs);
	}

    /* ###### form 입력폼 레이아웃 ###### */
    .form_t input:not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
    }
	.form_t select {
		width: 100%;
	}
	
	
	.main_pop_header_l {
		flex-wrap: wrap;
	}

	.pop_close {
		word-break: keep-all;
		width: 100%;
		font-size: 1.4rem;
	}

}

@media screen and (max-width: 430px) {
    /* ###### total_search_box ###### */
    .search_box {
        flex-wrap: wrap;
    }
    .search_box select {
        width: 100%;
        padding: 8px;
        padding-right: 28px;
    }
    .search_input {
        width: 100%;
    }
    .search_input input {
        flex: 1;
    }
    .search_input button {
        background: transparent;
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search_input button img {
        width: 20px;
    }


    /* mainSec */
    .newsList li {
        width: 100%;
    }
    .news_cont {
        display: none;
    }
	.moreBtn {
		font-size: 1.4rem;
	}
	
	/* 회사소개서 모달 */
	.slider_nav {
		gap: 6px;
	}
	.slider_nav button {
		width: 36px;
		height: 36px;
	}
	
	/* ### 사업분야 ### */
	.biz_area .item {
		padding: 20px;
	}

}

@media screen and (max-width: 375px) {
    /* ## project ## */
    .project_visu {
        background: url(../img/gradient_bg.png) no-repeat center center;
        background-size: cover;
    }
    .project_visu h2 {
        word-break: keep-all;
    }
    .project_visu span {
        display: inline;
    }


}