@charset "utf-8";

/* 반응형
	모바일 : ~ 1024
	태블릿 : ~ 1240
*/

.mobile_only,
.tablet_only {
	display: none;
}

/************************ aside 만 따로 */


/************************ 1025px ~ 호버 지원시에만  */

@media (hover:hover) and (min-width:1025px) {


}

@media (max-width:1080px) {
	footer .__inner {gap:6%;}
	footer .__inner .__sns {min-width:auto;}
}


/************************ ~ 1024px */

@media (max-width:1024px) {

	.tablet_only,
	.desktop_only {display: none !important;}
	.mobile_only {display: block !important;}	
	
	.title_01 span.mobile_only {display:inline-block !important;}
	.aside_wrap .__bottom_btn a.mobile_only {display:flex !important;}
		
	.btn {font-size:20px;}
	
	.title_01 .__main {font-size: 26px;}
	.title_01 .__sub,
	.main_visual .title_01 .__sub,
	.solution_s6 .title_01 .__sub {font-size:16px;}

	/* header */
	
	.header.fixed {background:transparent;}
	.btn_menu {display:block;}
	.gnb {		display:none;		position:absolute; top:0; left:0; width:100%;		padding:66px 0 30px !important;		z-index:-1;	}
	.gnb a {		display:block; 		max-width:200px;		line-height:60px;		text-align:center;		margin:15px auto !important; 	}
	.gnb a:first-child::before {		display:none;	}
		html.gnb_on .header::after {		content:"";		position:fixed;		left:0;		right:0;		bottom:0;		top:0;		background:rgba(0,0,0,0.5);		z-index: 32;	}
		html.gnb_on .header .gnb {		display: block;		background:#fff;		position: fixed;		left:auto;		justify-content: flex-start;		right:0;		top:0;		bottom:0;		width:60%;		z-index: 33;		display: flex;		flex-direction: column;	}
		html.gnb_on .header .btn_menu {background-image:url("../img/common/btn_menu_blue.svg"); z-index:35;}
		html.gnb_on .header .gnb a {		color: #53545C;		width: 100%;		max-width: initial;		text-align: left;		padding-left: 38px;		border-bottom:1px solid #F0F0F0;
			border-radius: 0;		margin: 0 !important;		line-height: 46px;		font-size: 16px;		font-weight: 500;	}
		html.gnb_on .header.fixed .gnb a.on {		color:#53545C;	}
		html.gnb_on .header .gnb a:first-child {		border-top:1px solid #F0F0F0;	}
		html.gnb_on .header .gnb .go_cocoble {		order: -1;		margin:0 17px 10px !important;		border-radius: 8px;		background:linear-gradient(90deg, #A54AFF 0%, #2F67FF 100%);
			color:#fff;		font-size: 16px;		line-height: 44px;		font-weight: 500;		width:auto;		padding:0 20px;		display: flex;		justify-content: space-between;		align-items: center;	}
		html.gnb_on .header .gnb .go_cocoble:hover {		color:#fff;	}
		html.gnb_on .header .gnb .go_cocoble::after {		content: "";		width: 7px;		height: 9px;		background: url(../img/header-arrow.svg) no-repeat center / 6px;		display: inline-block;	}

	/* footer */

} /* ~ 1024px */

@media (max-width:980px) {
	footer .__inner {flex-direction:column; align-items:normal; gap:20px; margin-bottom:20px;}
	footer .__inner .__address br,
	footer .__inner .__sns br{ display:none;}
	footer .__inner .__address {order:0;}
	footer .__inner .__sns,
	footer .__inner .__link {order:1;}
	footer .__inner .__sns {overflow:hidden;}
	footer .__inner .__sns a {float:left; display:inline-block; width:min(calc(50% - 7px), 150px);}
	footer .__inner .__sns a ~ a {margin-left:13px;}
	
}

@media (max-width:767px) {
	.header .app_btns {display:none;}
	
	.m_visual .container {}
	.m_visual .app_btns {display:flex; }
	.m_visual .__title {top:0; left:50%; transform:translateX(-50%); width:min(calc(100% - 40px), 500px);}
	.m_visual .__t1 {margin-bottom:7%;}
	
	
	footer {font-size:14px; line-height:24px;}
	footer .container {padding:36px 20px;}
	footer .__inner {gap:12px; margin-bottom:12px;}
	footer .__inner strong {font-weight:500; margin-bottom:2px;}
	footer .__inner .__corp img {height:26px; margin-bottom:12px;}
}