.responsive-mobile .only-mobile{
	display: block;
}
.responsive-mobile .only-pc{
	display: none;
}

@media screen and (max-width: 1919px){
	
	.search-box .search-box-form2{
		grid-template-columns: repeat(2, 1fr);
	}
	.search-box .search-box-form2 > dl{
		gap: 10px;
	}
	.search-box .search-box-form2 > dl > dt{
		width: 80px !important;
	}
	.search-box .search-box-form2 > dl > dd .range-input{
		min-width: auto; 
	}
	
	.join-wrap .join{
		position: relative; left: auto; top: auto; transform: none; margin: 0 auto;
		border-radius: 0;
	}
	.join-wrap .join .logo{
		position: relative; left: auto; top: auto; margin-bottom: 20px;
	}

}

@media screen and (max-width: 1200px){
    .content_body:has(.tbl-row2) {
        height: auto;
    }

	.tbl-detail > dl{
		width: 100%;
	}

	.tbl-registration .tbl-registration-row > div{
		padding: 5px;
	}
	.tbl-custom-wrap {
		flex-direction: column;
	}
	.tbl-custom-wrap > .tbl-custom:last-child {
		border-left: 0;
	}
	.tbl-custom > table > tbody > tr > th {
		width: 80px;
	}

    .tbl-row2 > .tbl-full{
        height: 400px; padding-bottom: 0;
    }
    .tbl-row2 > .tbl-full:has(.tbl-column2) {
        height: 800px;
    }

	.tbl-column2 {
        flex-direction: column;
        height: 800px;
	}
	.tbl-column2:first-child {
	    padding-top: 0;
	}

	.tbl-column2-half {
	    width: 100%; height: 400px; flex-grow: 0;
	}

	.tbl-column2-half .tbl-wrap {
	    height: 350px;
	}
	.tbl-wrap > .grid {
	    height: 100%;
	}

    .tbl-full.tbl-row3 {
        height: 100%;
    }
    .tbl-row3 .tbl-full:has(.tbl-column2) {
        height: 100%;
    }
    .tbl-row3 .tbl-column2 {
        flex-direction: column;
        height: 100%;
    }
    .tbl-row3 .tbl-column2-half {
        height: 290px;
    }

	 .tbl-row3 .tbl-column2-half .tbl-wrap {
	    height: 290px;
	}


	/* 메인 */
	.main-box .summary-panel {
		flex-direction: column;
	}
	.main-box .summary-panel .panel {
		width: 100%;
	}
	
	.search-box .search-box-form{
		flex-direction: column; align-items: flex-start; row-gap: 5px;
	}
	.search-box .search-box-form:has(.break){
		row-gap: 5px;
	}
	.search-box .search-box-form .break{
		display: none;
	}
	
	.layer-wrap{
		max-width: 96%;	
	}
	.layer-wrap:has(.intranet-external-layer),
	.layer-wrap:has(.b2b-order-layer),
	.layer-wrap:has(.intranet-purchase-order-layer){
		min-width: 90%;
	}
}

@media screen and (max-width: 1024px){
	.search-box .search-box-form2{
		grid-template-columns: repeat(1, 1fr); gap: 10px;
	}
	
	.flex-row{
		flex-direction: column; align-items: flex-start; gap: 5px;
	}
}

/* Tablet */ 
@media screen and (max-width: 768px){
	.body_wrap{
		height: calc(100% - 50px);
	}
	.content {
	    padding: 20px; height: auto;
	}
	
	header .logo{
		width: auto; flex-grow: 1; 
	}
	header .logo h1{
		width: 160px;
	}
	header .nav{
		padding: 0 15px; gap: 5px; height: 50px;
	}
	
	header .users{
		margin: 0;
	}
	header .users .btn-user{
		text-indent: -9999px;
	}
	header .users .btn-user::before{
		width: 28px; height: 28px;
	}
	header .users .session-timer{
		display: none;
	}
	header .user-menu{
		top: 50px;
	}
	
	
	/* GNB */
	.gnb{
		position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 100dvh;
		background: rgba(0, 0, 0, 0.5); display: none;
	}
	.gnb.isOpen{
		display: flex;
	}
	.gnb_title{
		width: 80%; height: 50px;
		display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center;
		padding: 10px 10px 10px 15px; 
		position: relative; left: -100%;
		animation: gnbAni 0.2s ease-in forwards;
	}
	.gnb_title .logo{	
		width: 140px;	
	}
	.gnb_title .gnb-close{
		display: block;
	}
	.gnb_title .icon-close{
		width: 28px; height: 28px;
	}
	.gnb_title h2{
		font-size: 20px;
	}
	.gnb_list{
		background-color: #FFFFFF; width: 80%; height: 100%;
		position: relative; left: -100%;
		animation: gnbAni 0.2s ease-in forwards;
	}
	.gnb_body ul li a{
		display: block; padding: 8px 0;
	}
	.gnb-open .icon{
		width: 28px; height: 28px;
	}
	
	
	@keyframes gnbAni{
		0%{
			left: -100%;
		}
		100%{
			left: 0;
		}
	}

	.content_header{
		height: 35px;
	}
	.content_body{
		height: auto; min-height: calc(100% - 35px);
		padding-top: 15px;
		flex-grow: 1;
	}
	.content_title{
		font-size: 16px
	}

	/*.tbl-full .tbl-top {
	    flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
	}*/
	.tbl-top{
		position: relative;
	}
	.tbl-top-right.tbl-top-more{
		position: absolute; right: -5px; top: 32px; z-index: 1000;
		flex-direction: column; align-items: stretch; gap: 5px;
		background-color: var(--color-bg-surface); padding: 5px;
		display: none;
	}
	.tbl-top-right.tbl-top-more .btn{
		justify-content: center;
	}
	/*.tbl-top .tbl-top-btn-multiple{
		position: absolute; right: 0; top: 0; z-index: 1000;
		padding: 35px 0 0 0; background-color: var(--color-bg-surface);
		flex-direction: column; align-items: flex-end; 
	}
	.tbl-top .tbl-top-btn-multiple .btn:not(.btn-more){
		display: none; width: 100%;
	}
	.tbl-top .tbl-top-btn-multiple .btn-more{
		display: inline-block;
		position: absolute; right: 0; top: 0;
	}*/
	
	.tbl-full .tbl-top .btn:has([class*="excel"]){
		display: none;
	}

	.tbl-top:not(:has(.tbl-top-right)) {
	    margin-bottom: 0px;
	}

    .content_body >.tbl-full:not(:is(:has(.tbl-row2), :has(.tbl-full))) .tbl-top {
       flex-direction: row;
    }
    .content_body >.tbl-full:not(:is(:has(.tbl-row2), :has(.tbl-full))) .tbl-top .tbl-top-right {
        justify-content: flex-end;
        margin-top: 0px;
    }
	
	

    .tbl-full {
		flex: none; height: auto;
    }
	.search-box + .tbl-full:not(:has(.tbl-full)) .tbl-wrap > .grid{
		height: auto;
	}
	
	.tbl-row2{
		display: block;
	}
	.tbl-row2 > .tbl-full{
		/*height: auto;*/
	}
	.tui-grid-container{
		flex-grow: 1;
	}
	.tbl-full .tbl-wrap{
		height: 400px !important;
	}
	.tbl-full.type02 .tbl-wrap,
	.tbl-full.type02 >.tbl-full:last-child .tbl-wrap{
		height: 400px;
	}
    .content_body >.tbl-full:not(:is(:has(.tbl-row2), :has(.tbl-full))) .tbl-wrap {
       /* height: calc(100% - 70px);*/ height: 400px;
    }
	.content_body:not(:has(> .search-box)) > .tbl-full:not(:has(.tbl-full)) > .tbl-wrap:has(.title-bullet), 
	.search-box + .tbl-full:not(:has(.tbl-full)) .tbl-wrap{
		height: 400px;
	}
	.content_body > .tbl-full .tbl-wrap:has(.tui-pagination){
		padding-bottom: 50px;
	}
	.content_body > .tbl-full .tbl-wrap:has(.tui-pagination):has(.tbl-top){
		padding-bottom: 90px; 
	}
	.content_body > .tbl-full .tbl-wrap:has(.tbl-top){
		padding-bottom: 30px;
	}

	
    .tbl-row2 .tbl-wrap .tbl-total, .tbl-wrap:not(:has(.grid .tui-grid-container .tui-grid-pagination)) .tbl-total {
        bottom: 16px;
    }
	.tbl-row3 .tbl-full .tbl-wrap{
		height: 100% !important;
	}

	
	.search-box{
		margin-bottom: 15px; flex-direction: column; padding: 0; gap: 0;
	}
	.search-box .search-box-form{
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
		gap: 10px; padding: 10px;
	}
	.search-box .search-box-form > dl{
		width: 100%; display: block;
	}
	.search-box .search-box-form > dl > dt{
		margin-bottom: 5px; line-height: 1;
	}
	.search-box .search-box-btn{
		padding: 10px;
	}
	/*
	.search-box .search-box-form{
		display: grid; grid-template-columns: max-content 1fr; gap: 10px; 
		padding: 15px;
	}*/
	/*.search-box .search-box-form > dl{
		display: contents;
	}*/
	/*.search-box .search-box-form .search-box-extra{
		grid-column: 1 / -1;
	}*/
	.search-box .search-box-btn{
		width: 100%; justify-content: flex-end; border-top: 1px solid var(--color-border-default);
		padding: 10px 15px;
	}
	
	select, input:not([type="checkbox"]):not([type="radio"]){
		min-width: auto;
	}

	.address-find > input {
	    width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
	}

	.tbl-custom > tbody > tr > td input:not([type="checkbox"]):not([type="radio"]){
		width: 100%;
	}
	

	.tbl-registration{
		background: none;
	}
	.tbl-registration .tbl-registration-body .tbl-registration-row{
		display: block;
	}
	.tbl-registration .tbl-registration-head .tbl-registration-row{
		gap: 0; display: flex; background-color: var(--color-bg-grid-head); padding: 0 10px;
	}
	.tbl-registration .tbl-registration-head .tbl-registration-row > div{
		height: auto; padding: 5px 0;
	}
	.tbl-registration .tbl-registration-head .tbl-registration-row > div::before{
		content: " / "; display: inline-block; margin: 0 5px;
	}
	.tbl-registration .tbl-registration-head .tbl-registration-row > div:first-child::before,
	.tbl-registration .tbl-registration-head .tbl-registration-row > div:last-child::before{
		display: none;
	}
	.tbl-registration .tbl-registration-body .tbl-registration-row{
		position: relative; padding: 10px 50px 10px 10px; border-top: 1px solid var(--color-border-default);
	}
	.tbl-registration .tbl-registration-body .tbl-registration-row > div{
		padding: 2px 0; justify-content: flex-start;
	}
	.tbl-registration .tbl-registration-body .tbl-registration-row .tbl-registration-btn{
		position: absolute; right: 10px; top: 10px;
	}

	.layer-wrap{
		min-width: 96%; width: 96%; max-height: 96%; cursor: default !important;
		left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
	}

	/* 결재취소 */
    #cancelFailPopup {
        min-width: 96%;
    }
	
	.layer-body .join__form{
		width: 100%;
	}
	.join__form dl{
		margin-bottom: 30px;
	}

    /* 메인 */
    .main-content {
        height: auto;
    }
    .main-box .tbl-full .tbl-wrap{
        height: auto !important;
    }


}

/* Mobile */
@media screen and (max-width: 620px){
	/*.tbl-wrap .tbl-total{
		position: relative; left: auto; bottom: auto; padding: 10px 0;
	}*/

	.b2b .login-bg {
		height: 100dvh;
		background-position: center;
		margin: 0;
	}
	.b2b .login-content, .intranet .login-content  {
		width: auto;
	}
	.b2b .login-content {
		margin-top: 0;
	}
	.b2b .login-content .login-logo .logo {
		background: url("../img/logo-vertical.png") left no-repeat;
		background-size: contain;
		height: 32px;
	}

	.login-content .login-logo {
		margin-bottom: 60px;
	}
	.login-content .login-logo .logo {
		height: 32px;
	}
	.login-content .login_box{
		width: 100%; padding: 25px;
	}
	.login-content .login-type {
		font-size: 28px; padding-bottom: 25px;
	}
	.login .box {
		margin-bottom: 15px;
	}

	.login .box label {
		font-size: 14px;
	}
	.b2b p, .intranet p {
		font-size: 14px;
	}
	.b2b .login-text {
		font-size: 12px;
	}
	.intranet .login-text {
		left: 30px;
		font-size: 12px;
	}

	/* 메인 */
	.main-box .summary-panel-item .summary-panel-list {
		font-size: 12px;
	}
	
	.otp-guide .otp-key{
		display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
		gap: 5px;
	}
	.otp-guide .otp-key input{
		flex-grow: 1;
	}
	.otp-guide .otp-key .btn{
		flex-shrink: 0;
	}
}
@media screen and (max-width: 480px){
	.content{
		padding: 15px;
	}	
	
	.range-input{
		width: 100%;
	}
	
	.search-box .search-box-form{
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
		gap: 10px; padding: 10px;
	}
	.search-box .search-box-form > dl{
		width: 100%; display: block;
	}
	.search-box .search-box-form > dl > dt{
		margin-bottom: 5px; line-height: 1;
	}
	.search-box .search-box-form > dl > dd input[type="text"],
	.search-box .search-box-form > dl > dd select,
	.search-box .search-box-form > dl > dd textarea,
	.search-box .search-box-form > dl > dd .datepicker{
		width: 100%; max-width: 100%;
	}
	.search-box .search-box-btn{
		padding: 10px;
	}

	/*	메인 */
	.main-box {
		padding: 0; border: 0;
	}
	
	.join-wrap .join{
		width: 100%; padding: 20px;
	}
	.join-wrap .join h2{
		font-size: 1.2rem;
	}
	.join-wrap .join__form .btn-join{
		height: 42px; margin-top: 10px;
	}
	
	.login-content .login_box{
		padding: 15px 15px 30px 15px;
	}
	.login-members{
		width: 100%; justify-content: center;
		position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
	}
	.login-content .box:last-child{
		height: 40px;
	}
	.login-content .box:last-child button{
		line-height: 40px;
	}
	
	.tbl-wrap .tbl-total{
		display: none;
	}
	
	.layer-wrap{
		padding: 15px;
	}
	.modal-alert,
	.modal-confirm{
		max-width: 92%;	
	}
	
	.tbl-registration .tbl-registration-body .tbl-registration-row > div .datepicker{
		max-width: 100%;
	}

	/* 에러페이지 */
    .error-code-bg {
         height: 200px;
    }
    .error-code {
        font-size: 40px;
    }
    .error-message {
        font-size: 14px;
    }
    .error-btn .btn {
        height: 35px;
    }
	
	.tbl-detail{
		width: 100%; overflow-x: auto; 
	}
	.tbl-detail > dl{
		min-width: 400px;
	}
	
	.otp-guide ol > li > h3{
		font-size: 13px;
	}

}

@media screen and (min-height: 917px) {
  .main-content {
    height: 100%;
  }
}