@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

html {
	line-height: 150%;
	font-size: 13pt;
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-family: "pretendard", Arial, Helvetica, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
	width: 100vw;
	overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
}

html::-webkit-scrollbar-thumb {
    background-color: transparent;
}

#front_div{
position: relative;
left: calc((960px - 100vw) / 2);
}

/* 폭이 좁을때 오른쪽 여백 붙는 문제 수정 */
li {
	margin-right: 20px;
}

/* 강조 텍스트 */
strong {
	font-weight: normal;
	color: orangered;
}

/*  링크  */
a:link,
a:visited,
a:active {
	color: #0059be;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* 흐린 링크 */
a.dimcolor {
	color: #00405B;
}


/*  이미지  */
img {
	vertical-align: middle;
	border-style: none;
}

img.auto {
	max-width: 100%;
	display: block;
}

img.img_shadow {
	height: auto;
	width: auto;
	max-width: 80%;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-top: 20px;
	margin-bottom: 20px;
}

img.img_no_shadow {
	height: auto;
	width: auto;
	max-width: 80%;
	margin-top: 20px;
	margin-bottom: 20px;
}


a.black:link,
a.black:visited,
a.black:hover,
a.black:active {
	color: black;
	text-decoration: none;
}

/* 비디오 */
video.auto {
	max-width: 100%;
	width: 100%;
	height: auto;
}

video.video_shadow {
	max-width: 80%;
	width: 100%;
	height: auto;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-top: 20px;
	margin-bottom: 20px;
}

/* iFrame 
	https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
*/
.iframe_container {
	position: relative;
	overflow: hidden;
	width: 90%;
	padding-top: 56.25%;
	/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* 메인페이지 가운데 텍스트*/
.center_heading {
	font-size: 20pt;
	text-align: center;
	margin-top: 30px;
	line-height: 160%;
}

div.div_submenu {
	height: 30px;
	text-align: center;
	font-size: 11pt;
	background-color: #F2F5F9;
	padding: 5px calc((100vw - 960px) / 2) !important;
	display: flex;
	justify-content: center;
	gap: 8px;
	align-items: center;
}

/* 헤딩 */
h1 {
	font-size: 20pt;
	padding: 0 0 20px 3px;
	border-bottom: 1px solid #cccccc;
	margin: 30px 0 0 0;
	font-weight: 600;
	line-height: 130%;
}

h2 {
	font-size: 14pt;
	color: rgb(17, 58, 104);
	margin: 40px 0 10px 0;
	padding: 0 0 10px 3px;
	line-height: 130%;
	border-bottom: 1px solid #dddddd;
	font-weight: 600;
}

h3 {
	font-size: 13pt;
	margin-top: 20px;
	padding: 0 0 5px 3px;
	border-bottom: 1px solid #cccccc;
	font-weight: 600;
}

h4 {
	font-size: 13pt;
	margin-top: 20px;
	padding: 0 0 15px 3px;
	font-weight: 600;
}

p {
	padding: 3px 0 3px 3px;
}

/* anchor 파란 버튼 */
a.button {
	background-color: #0078D7;
	border: none;
	color: white;
	padding: 13px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
	margin-top: 10px;
}

a.button:hover {
	background-color: #0060AC;
	color: white;
	box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 8px 25px 0 rgba(0, 0, 0, 0.19);
}

a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
	color: white;
	text-decoration: none;
}

/* 마진 작은 버튼 */
a.smallbutton,
a.smallbutton:hover,
a.smallbutton:link,
a.smallbutton:visited,
a.smallbutton:active {
	padding: 10px 32px;
	background-color: #0067B8;
	color: white;
	font-size: 13px;
}

/* 노란 버튼 */
a.yellowbutton {
	background-color: #FFFF35;
	color: black;
}

a.yellowbutton:hover {
	background-color: #FFD800;
	color: black;
}

a.yellowbutton:link,
a.yellowbutton:visited,
a.yellowbutton:hover,
a.yellowbutton:active {
	color: black;
	text-decoration: none;
}

/* 회색 text box */
.box {
	color: #353535;
	background-color: #f6f8fa;
	padding: 5px 30px 10px 20px;
	margin-bottom: 20px;
}

/* 소스코드박스*/
.codebox {
	color: #353535;
	background-color: #fff3d4;
	padding: 10px 30px 10px 20px;
	margin-bottom: 30px;
	font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
	font-size: 11pt;
	line-height: 130%;
	word-wrap: break-word;
}

/* 강조 박스 */
.box2 {
	border: solid 1px;
	border-color: black;
	padding: 10px 10px 10px 10px;
	background-color: lightgoldenrodyellow;
	font-size: 10pt;
}

/* 공지 박스 */
.notice {
	border: solid 2px;
	border-color: #FFE4AA;
	border-radius: 5px;
	padding: 10px 10px 10px 10px;
	background-color: #FFF2CC;
	font-size: 12pt;
}



/**** 테이블 ****/

/* 상단 가운데 메뉴 */
.nav_bar {
	width: 100vw;
	margin: 0;
	padding: 0;
	background-color: #181818;
}

#nav_bar_inner{
	padding: 10px 0 !important;
	margin: 0 calc((100vw - 1400px) / 2) !important;
	display: flex;
	align-items: center;
}

#nav_right{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

#nav_center{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	position: absolute;
	width: fit-content;
	transform: translateX(-80%);
}

.dropdown {
	display: flex;
	align-items: center;
}


/* 푸터 색상 */
.td_footer_color {
	background-color: #EDEDED;
}

.footer_wrap{
	background-color: #F2F5F9;
	height: 200px;
}

/* 서브 메뉴 배경색 */
.td_submenu_color {
	background-color: #eeeeee;
}

.footer_int, .footer_kor {
	margin: 0 calc((100vw - 960px) / 2) !important;
	font-family: "pretendard";
	background-color: #F2F5F9;
}

.footer_kor {
	padding-top: 20px !important;
}

.footer_int{
	padding: 20px 0 !important;
}

/* 메인 메뉴 높이 */
.main_menu_height {
	height: 56px;
}

/* 메인 메뉴 글자 */
.main_menu_font {
	font-size: 12pt;
	font-family: "pretendard";
}

.lang_select_font {
	font-size: 9pt;
}

/* 메인 컨텐츠*/

/* 상단 메뉴 홈 */
a.mainmenu_home:link,
a.mainmenu_home:visited,
a.mainmenu_home:active,
a.mainmenu_home:hover {
	color: #cccccc;
	text-decoration: none;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* 상단 메뉴 링크 */
a.mainmenu:link,
a.mainmenu:visited,
a.mainmenu:active,
a.mainmenu:hover {
	color: #cccccc;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}

a.mainmenu:hover {
	color: white;
}

a.mainmenubold:link,
a.mainmenubold:visited,
a.mainmenubold:hover,
a.mainmenubold:active {
	color: #53AAEA;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	font-weight: normal;
}

/* 서브 메뉴 링크 */
a.submenu:link,
a.submenu:visited,
a.submenu:active,
a.submenu:hover {
	color: #222222;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
}

a.submenu:hover {
	color: #2222ff;
	text-decoration: underline;
}

/* 서브 메뉴 구분 하기 */
span.submenuSplit {
	color: #bbbbbb;
}

/* 메인 테이블 */
.mainTable {
	display: inline-table;
	width: 460px;
	text-align: left;
}


/* === 드롭 메뉴 버튼 === */
/* 스팬 부분 */


/* 메뉴 버튼 */
.dropbtn {
	background-color: #181818;
	color: #cccccc;
	border: none;
	cursor: pointer;
}

.dropbtn:focus {
	outline: 0;
}

/* 팝업 스팬 */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 180px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	font-size: 9pt;
	top: 44px;
	transform: translateX(-90px);	
	border-radius: 12px;
}

/* 팝업의 링크 */
.dropdown-content a {
	color: black;
	padding: 3px 16px 3px 16px !important;
	text-decoration: none;
	display: block;
	font-size: 10pt;
	font-family: "pretendard";
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
	border-radius: 12px;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropbtn {
	color: white;
	background-color: #181818;
}

.burger{
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.line {
	width: 25px;
	height: 1.5px;
	background-color: white ;
	margin: 3px 0 !important;
}

#btnarrow{
	display: none;
}

/* 메인 컨텐트 */
.main_content {
	/* margin:0 calc((100vw - 960px) / 2); */

	margin: auto;
	/* max-width: 960px; -> 여기서 지정하지 말것. html 의 main_content 영역에 적혀있음 */
	width: 100%;
}

/* front */

#main {
	/* background-image: url(/img.front/main_bg.jpg); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 476px;
	display: flex;
	justify-content: center;
	align-items: center;

}

.main_menu_font {
		margin: 0 5px !important;
	}

#main_text {
	color: #1E1F20;
	font: 700 40px "Pretendard", sans-serif;
	text-align: center;
	margin-top: 48px !important;
	border: none;
}

.mp_cards {
	width: 446px;
	box-shadow: 3px 3px 10px #E4EAF2;
	border-radius: 14px;
	height: fit-content;
	transition-duration: 0.2s;
}

.mp_cards h3{
	margin: 0;
}

.mp_cards:hover {
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.15), 0 8px 25px 0 rgba(0,0,0,0.15);
	transition-duration: 0.25s;
	text-decoration: none;
	cursor: pointer;
	/*margin-bottom: 20px !important;*/
	transform: translateY(-10px);
}

.main_first{
	display: flex;
	align-items: center;
}

#main_products {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	height: 540px;
	float: left;
	width: 100vw;
	background-color: white;

}

.sub_cards_des h3{
	border: none;
}

.main_first h2{
	padding: 0;
}

#main_products h2{
	border: none;
}

#main_products h3{
	border: none;
}

.mp_bt p{
	margin: 0;
}

.tags {
	background-color: #E8F5FF;
	color: #26A4FF;
	width: fit-content;
	padding: 4px 10px 4px 10px !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	float: left;
	text-align: center;
}

.tags:hover {
		box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
		transition-duration: 0.25s;
		text-decoration: none;
		cursor: pointer;
		background-color: #E8F5FF;
		color: #26A4FF;
		width: fit-content;
		padding: 4px 10px 4px 10px !important;
		border-radius: 8px;
		font-weight: 700;
		font-size: 14px;
		float: left;
		text-align: center;
}

#twotags {
	display: flex;
	gap: 12px;
}

.mp_cards_contents {
	margin: 24px 0px 24px 36px !important;
	float: left;
	text-align: left;
	width: 374px;
}

.mp_cards img {
	width: 446px;
	border-radius: 14px 14px 0 0;
}

.mp_cards_contents img {
	width: auto;
}

#honeycam2{
	display: none;
}

.free{
	color: #26A4FF;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: right;
}

.free img{
	margin-left: 4px !important;
}

.mp_cards_contents h2 {
	margin: 0 0 0 8px !important;
	font-weight: 800;
}

.mp_cards_contents h3 {
	margin: 6px 0 28px 0 !important;
	font-weight: 500;
}

.mp_bt{
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-top: 14px !important;
	justify-content: space-between;
}

.mp_bt a{
	flex: 0 0 auto;
}

#main_intro {
	text-align: center;
	padding-top: 68px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	background-color: white;

	border: none;
}

#sub {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sub_cards {
	display: flex;
	justify-content: space-between;
	align-items: center;
	float: left;
	width: 530px;
	text-align: left;
	box-shadow: 3px 3px 10px #D4DAE1;
	border-radius: 14px;
	padding: 20px 16px 20px 16px !important;
	background-color: white;
	margin: 8px 0 !important;
}

.sub_cards h2{
	margin: 0;
	padding: 0;
}

.sub_cards h3{
	margin: 0;
	padding: 0;
}

.sub_cards p{
	margin: 0;
	padding: 0;
}

.sub_cards:hover {
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.15), 0 8px 25px 0 rgba(0,0,0,0.15);
	transition-duration: 0.25s;
	text-decoration: none;
	cursor: pointer;
}

.sub_cards h3{
	margin-top: 4px !important;
}

.sub_lefts {
	display: flex;
	align-items:flex-start;
}

.sub_lefts img{
	width: 50px;
	height: 50px;
}


.sub_cards img {
	margin: 0 20px 0 0 !important;
	padding: 0%;
}

.sub_cards h2 {
	font-weight: 700;
	font-size: 20px;
}

.sub_cards h3 {
	font-weight: 500;
	font-size: 16px;
}

#sub_wrap {
	background-color: #E4EAF2;
	width: 100vw !important;
	display: flex;
	align-items: center;
	padding: 64px 0 !important;
	justify-content: center;
}

#sub_texts{
	border: none;
}

#sub_wrap h1{
	border: none;
}

#sub_wrap h2{
	border: none;
}

#sub_wrap_wrap {
	width: 1386px;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#main_comp {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.def-text {
	display: block;
}

	.alt-text {
	display: none;
}

/* QNA 
.qna {
	font-weight: 900;
	font-size:28px;
	line-height: 1.1;
	margin-top:20px;
}
*/

@media (max-width:1395px) {
.footer_int, .footer_kor {
	margin: 0 calc((100vw - 1200px) / 2) !important;
	font-family: "pretendard";
}

#nav_bar_inner{
	margin: 0 calc((100vw - 1200px) / 2) !important;
}

#nav_center{
	transform: translateX(-62%);
}
	#main {
	background-image: url(/img.front/main_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 476px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	
	#main_text {
	color: #1E1F20;
	font: 700 24px "Pretendard", sans-serif;
	text-align: center;
	margin-top: 54px !important;
	}
	
	#mp_wrap {
	width: 100vw;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	}
	
	.mp_cards {
	width: 390px;
	box-shadow: 3px 3px 10px #E4EAF2;
	border-radius: 14px;
	height: fit-content;
	}
	
	.mp_cards:hover {
	transform: translateY(-10px);
	}
	
	#bandizip:hover, #honeycam:hover{
		transform: translateY(-10px);
	}
	
	#honeyview {
	margin: 0 !important;
	}
	
	#main_products {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100vw;
	background-color: white;
	height: fit-content;
	padding: 32px 0 !important;
	}
	
	.tags {
	background-color: #E8F5FF;
	color: #26A4FF;
	width: fit-content;
	padding: 6px 10px !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	float: left;
	text-align: center;
	}
	
	#twotags {
	display: flex;
	}
	.mp_cards_contents {
	margin: 24px 0 24px 36px !important;
	float: left;
	text-align: left;
	width:318px;
	}
	
	.mp_cards img {
	width: 390px;
	}
	
	.mp_cards_contents img {
	width: auto;
	}
	
	.mp_cards_contents h2 {
	margin: 0 0 0 8px !important;
	font-weight: 800;
	}
	
	.mp_cards_contents h3 {
	margin: 6px 0 12px 0 !important;
	font-weight: 500;
	line-height: 150%;
	}
	
	.mp_bt{
	width: 100%;
	}
	
	#main_intro {
	text-align: center;
	margin: 54px 0 0 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	font-size: 20px;
	}
	
	#sub {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	
	.sub_cards {
	display: flex;
	justify-content: space-between;
	align-items: center;
	float: left;
	width: 452px;
	text-align: left;
	box-shadow: 3px 3px 10px #D4DAE1;
	border-radius: 14px;
	padding: 20px 16px 20px 16px !important;
	background-color: white;
	margin: 8px 0 !important;
	}
	
	.sub_lefts {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	}
	
	
	#sub_texts {
	font-size: 20px;
	}
	
	.sub_cards img {
	margin: 0 20px 0 0 !important;
	padding: 0%;
	}
	
	.sub_cards>h2 {
	font-weight: 700;
	font-size: 20px;
	}
	
	.sub_cards>h3 {
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	}
	
	#sub_wrap {
	background-color: #E4EAF2;
	width: 100vw !important;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 64px 0;
	height: 320px;
	}
	
	#sub_wrap_wrap {
		width: 80vw;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dropdown-content {
		transform: translateX(-90px);	
		border-radius: 12px;
	}

	}


@media (max-width:1220px) {
	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 1000px) / 2) !important;
		font-family: "pretendard";
	}
	
	#nav_bar_inner{
		margin: 0 calc((100vw - 1000px) / 2) !important;
	}

	#nav_center{
		transform: translateX(-44%);
	}

	#main_products{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mp_cards{
	display: flex;
	flex-direction:row-reverse;
	width: 80vw;
	justify-content: space-between;
	align-items: center;
	height: 247px;
	}
	
	#honeycam1{
	display: none;
	}
	
	#honeycam2{
	display: block;
	transform: scaleX(1);
	border-radius: 14px;
	}
	
	.tags{
	background-color: white;
	}
	
	.mp_cards img{
	border-radius: 14px 0 0 14px;
	transform: scaleX(-1);
	height: 247px;
	width: auto;
	}
	
	.mp_cards_contents img{
	height: 100%;
	transform: scaleX(-1);
	}
	
	#bandizip {
	background-color: #E5F4FF;
	}
	
	#honeycam{
	background: rgb(223,251,249);
	background: linear-gradient(180deg, rgba(223,251,249,1) 0%, rgba(208,248,253,1) 50%, rgba(218,249,254,1) 100%);
	}
	
	#honeyview{
	background: rgb(241,239,238);
	background: linear-gradient(180deg, rgba(241,239,238,1) 0%, rgba(233,232,235,1) 50%, rgba(239,239,241,1) 100%);
	}
	
	.mp_bt{
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	}
	
	.free{
	margin-left: 8px !important;
	}
	
	.free img{
	transform: scaleX(1);
	}
	
	.sub_cards .tags{
	background-color: #E8F5FF;
	}

}

@media (max-width:1025px) {
	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 800px) / 2) !important;
		font-family: "pretendard";
	}
	
	#nav_bar_inner{
		margin: 0 calc((100vw - 800px) / 2) !important;
	}

	#nav_center{
		transform: translateX(-22%);
	}

}

@media (max-width:990px) {

	#front_div{
		left: calc((800px - 100vw) / 2);
	}

	a.smallbutton,
	a.smallbutton:hover,
	a.smallbutton:link,
	a.smallbutton:visited,
	a.smallbutton:active {
		font-size: 8pt;
	}

	.notice {
		font-size: 8pt;
		padding: 5px 5px 5px 5px;
	}

	.content{
		margin:0 calc((100vw - 800px) / 2) !important;
	}

.mp_cards{
	height: fit-content;
}

	.mp_cards img{
		height:240px ;
		width: auto;
	}
	.mp_cards_contents img{
		height: 100%;
	}
	.mp_cards_contents{
		margin-right: 0 !important;
	}
	
	#sub {
	width: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	
	#honeycam2{
	border-radius: 14px 14px 0 0;
	}
	
	.sub_cards {
	display: flex;
	justify-content: space-between;
	align-items: center;
	float: left;
	width: 452px;
	text-align: left;
	box-shadow: 3px 3px 10px #D4DAE1;
	border-radius: 14px;
	padding: 20px 16px 20px 16px !important;
	background-color: white;
	margin: 8px !important;
	}
	
	#sub_wrap {
	background-color: #E4EAF2;
	width: 100vw !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 0 !important;
	height: fit-content;
	}
	
	#sub_texts {
	text-align: center;
	margin: 0 !important;
	margin-bottom: 24px !important;
	
	}

}
@media (max-width:959px) {
#sub_wrap_wrap{
	flex-direction: column;
}

.sub_cards{
	width: 390px;
}

.mp_cards{
	flex-direction: column;
	width: 477px;
	align-items: flex-start;
}

.mp_bt{
	flex-direction: row;
	justify-content: space-between;
	width: 405px;
}

.mp_cards img{
	border-radius: 14px 14px 0 0 ;
	width: 477px;
	height: auto;
}

.mp_cards_contents img{
	width: auto;
}

.tags{
	background-color: #E8F5FF;
}

#bandizip, #honeycam, #honeyview{
	background: white;
}

.sub_cards{
	width: 445px;
}
}
@media (max-width:800px) {

	#front_div{
		left: calc((600px - 100vw) / 2);
	}

	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 600px) / 2) !important;
		font-family: "pretendard";
	}
	
	#nav_bar_inner{
		margin: 0 calc((100vw - 700px) / 2) !important;
	}

	.content{
		margin:0 calc((100vw - 600px) / 2) !important;
	}

	#copyright{
		margin: 16px 0 !important;
		float: center !important;
	}



	.center_heading {
		font-size: 15pt;
	}

	a.button {
		font-size: 10pt;
	}

	html {
		font-size: 9pt;
	}

	.main_menu_font {
		font-size: 10pt;
	}

	.lang_select_font {
		font-size: 8pt;
	}

	a.submenu {
		font-size: 10pt;
	}

	div.div_submenu {
		font-size: 5pt;
	}

	span.submenuSplit {
		display: none;
	}

	a.submenu:link,
	a.submenu:visited,
	a.submenu:active,
	a.submenu:hover {
		margin-left: 2px;
		margin-right: 2px;
		margin-bottom: 2px;
	}

	.codebox {
		font-size: 10pt;
	}

	.footer_wrap{
		background-color: #F2F5F9;
		height: 280px;
	}

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

	h1 {
		font-size: 12pt;
		}
		h2 {
		font-size: 10pt;
		}
		.center_heading {
		font-size: 15pt;
		}
		a.button {
		font-size: 10pt;
		}
		html {
		font-size: 9pt;
		}
		.main_menu_font {
		font-size: 10pt;
		}
		.lang_select_font {
		font-size: 8pt;
		}
		a.mainmenu_home {
		display: none;
		}
		a.submenu {
		font-size: 10pt;
		}
		div.div_submenu {
		font-size: 5pt;
		}
		span.submenuSplit {
		display: none;
		}
		a.submenu:link,
		a.submenu:visited,
		a.submenu:active,
		a.submenu:hover {
		margin-left: 2px;
		margin-right: 2px;
		margin-bottom: 2px;
		}
		.codebox {
		font-size: 10pt;
		}
}

@media (max-width:700px){
	.burger{
		display: flex;
	}

	#nav_bar_inner{
		margin: 0 calc((100vw - 600px) / 2) !important;
	}

	#nav_right{
		display: none;
	}

	#nav_bar_inner{
		justify-content: space-between;
	}

	#nav_right.active{
		display: flex;
		flex-direction: column;
		padding: 14px 14px !important;
		width: 20vw;
		height: fit-content;
		position: absolute;
		top: 65px;
		right: 8px;
		background-color: #181818;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		color: white;
		margin: 0;
		border-radius: 6px;
		align-items: flex-start;
		z-index: 1;
	}

	#nav_center{
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding:  0 0 0 17px;
	}

	.dropbtn{
		padding: 0;
		display: flex;
		align-items: center;
	}

	#btnarrow{
		margin-left: 8px !important;
		display: flex;
		filter: brightness(255);
		transform: rotate(90deg);
	}

	#globe{
		margin-right: 8px !important;
		height: 18px;
		width: auto;
	}

	.dropbtn{
		margin-top: 16px;
	}

	.dropdown{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: fit-content;
}
	
	.dropdown-content {
	position:inherit;
	background-color: #181818;
	border-radius: 12px;
	min-width: fit-content !important;
	margin-top: 8px;
	transform: translateX(3px);
	}

	.dropdown-content a {
		color: #cccccc;
		padding: 8px 0 !important;
		text-decoration: none;
		display: block;
		font-size: 8pt;
		font-family: "pretendard";
	}
	
	.dropdown-content a:hover {
		background-color: #181818;
		color: white;
	}
	
	.dropdown:hover .dropdown-content {
		display: flex;
		flex-direction: column;
		height: fit-content;
		width: fit-content;
	}

	.dropdown:hover #btnarrow{
		transform: rotate(270deg);
	}
}

@media (max-width:600px){

	#front_div{
		left: calc((500px - 100vw) / 2);
	}

	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 500px) / 2) !important;
		font-family: "pretendard";
	}
	
	#nav_bar_inner{
		margin: 0 calc((100vw - 500px) / 2) !important;
	}

	.content{
		margin:0 calc((100vw - 500px) / 2) !important;
	}

	.burger{
		display: flex;
	}

	#nav_right{
		display: none;
	}

	#nav_right.active{
		display: flex;
		flex-direction: column;
		padding: 14px 14px !important;
		width: 20vw;
		height: fit-content;
		position: absolute;
		top: 65px;
		right: 8px;
		background-color: #181818;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		color: white;
		margin: 0;
		border-radius: 6px;
		align-items:flex-start;
		z-index: 1;
	}

	.dropbtn{
		display: flex;
		align-items: center;
		padding: 0 !important;
	}

	#globe{
		margin-right: 8px !important;
		height: 18px;
		width: auto;
	}

	#btnarrow{
		margin-left: 8px !important;
		display: flex;
		filter: brightness(255);
		transform: rotate(90deg);
	}

	.dropdown{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: fit-content;
	}

	.dropdown-content {
		position:inherit;
		background-color: #181818;
		border-radius: 12px;
		min-width: fit-content !important;
		top: 12px;
	}
	
	/* 팝업의 링크 */
	.dropdown-content a {
		color: #cccccc;
		padding: 8px 0 !important;
		text-decoration: none;
		display: block;
		font-size: 10pt;
		font-family: "pretendard";
	}
	
	.dropdown-content a:hover {
		background-color: #181818;
		color: white;
	}
	
	.dropdown:hover .dropdown-content {
		display: flex;
		flex-direction: column;
		height: fit-content;
		width: fit-content;
	}

	.dropdown:hover #btnarrow{
		transform: rotate(270deg);
	}
	
}


@media (max-width:520px) {
	#front_div{
		left: calc((400px - 100vw) / 2);
	}

	h1 {
		font-size: 11pt;
		}
		h2 {
		font-size: 10pt;
		}
		h3 {
		font-size: 9pt;
		}
		h4 {
		font-size: 9pt;
		}
		.center_heading {
		font-size: 13pt;
		}
		a.button {
		font-size: 9pt;
		}
		a.submenu {
		font-size: 8pt;
		}
		html {
		font-size: 9pt;
		}
		.main_menu_font {
		font-size: 9pt;
		}
		.lang_select_font {
		font-size: 0pt;
		}
		.codebox {
		font-size: 9pt;
		}

	#main {
		background-image: url(/img.front/main_bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		width: 100vw;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#main img {
			height: 50px;
		}

	#main_text {
		color: #1E1F20;
		font: 700 20px "Pretendard", sans-serif !important;
		text-align: center;
		margin-top: 62px !important;
	}

	#mp_wrap {
		width: 100vw;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.mp_cards {
		width: 432px;
		box-shadow: 3px 3px 10px #E4EAF2;
		border-radius: 14px;
	}

	#bandizip, #honeycam {
		margin: 0 !important;
		margin-bottom: 24px !important;
	}

	#honeyview {
		margin: 0 !important;
	}

	#main_products {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: fit-content;
		width: 100vw;
		background-color: white;
		margin-bottom: 64px !important;
	}

	.tags {
		background-color: #E8F5FF;
		color: #26A4FF;
		width: fit-content;
		padding: 4px 10px 4px 10px !important;
		border-radius: 8px;
		font-weight: 700;
		font-size: 14px;
		float: left;
		text-align: center;
	}

	#twotags {
		display: flex;
	}

	.mp_cards_contents {
		margin: 24px 0px 24px 36px !important;
		float: left;
		text-align: left;
	}

	.mp_cards img {
		width: 432px;
		height: auto;
	}

	.mp_cards_contents img {
		width: auto;
		
	}

	.mp_cards_contents h2 {
		margin: 0 0 0 8px !important;
		font-weight: 800;
		font-size: 16px;
	}

	.mp_cards_contents h3 {
		margin: 6px 0 12px 0 !important;
		font-weight: 500;
		font-size: 14px;
	}

	.mp_bt{
		width: 360px;
	}

	#main_intro {
		text-align: center;
		margin: 54px 0 54px 0 !important;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		font-size: 20px;
	}

	#sub {
		width: 400px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sub_cards {
		display: flex;
		justify-content: space-between;
		align-items: center;
		float: left;
		width: 400px;
		text-align: left;
		box-shadow: 3px 3px 10px #D4DAE1;
		border-radius: 14px;
		padding: 20px 16px 20px 16px !important;
		background-color: white;
		margin: 8px !important;
	}

	.sub_lefts {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}


	#sub_texts {
		font-size: 20px;
	}

	.sub_cards img {
		margin: 0 20px 0 0 !important;
		padding: 0%;
	}

	.sub_cards h2 {
		font-weight: 700;
		font-size: 20px;
		font-size: 16px;
	}

	.sub_cards h3 {
		font-weight: 500;
		font-size: 14px;
	}

	#sub_wrap {
		background-color: #E4EAF2;
		width: 100vw !important;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 64px 0;
		height: 320px;
	}
	
	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 400px) / 2) !important;
		font-family: "pretendard";
	}
	
	.content{
		margin:0 calc((100vw - 400px) / 2) !important;
	}

	#nav_bar_inner{
		margin: 0 calc((100vw - 400px) / 2) !important;
	}

	#nav_center{
		width: 100%;
	}

	h1 {
		font-size: 11pt;
	}

	h2 {
		font-size: 10pt;
	}

	h3 {
		font-size: 9pt;
	}

	h4 {
		font-size: 9pt;
	}

	.center_heading {
		font-size: 13pt;
	}

	a.button {
		font-size: 9pt;
	}


	a.submenu {
		font-size: 8pt;
	}


	html {
		font-size: 9pt;
	}

	.main_menu_font {
		font-size: 9pt;
	}

	.lang_select_font {
		font-size: 0pt;
	}

	.codebox {
		font-size: 9pt;
	}

	.dropdown-content a{
		font-size: 10px !important;
	}

	.footer_wrap{
		background-color: #F2F5F9;
		height: 300px;
	}
}

@media (max-width:420px) {

#main {
	height: 280px !important;
}

#main_text {
	color: #1E1F20;
	font: 700 18px "Pretendard", sans-serif;
	text-align: center;
	margin-top: 48px !important;
}

.mp_cards {
	width: 322px;
	box-shadow: 3px 3px 10px #E4EAF2;
	border-radius: 14px;
	margin: 0 24px 0 0 !important;
}

#main_products {
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	width: 100vw;
	background-color: white;
}

.tags {
	background-color: #E8F5FF;
	color: #26A4FF;
	width: fit-content;
	padding: 4px 10px 4px 10px !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: 12px;
	float: left;
	text-align: center;
}

#twotags {
	display: flex;
}

.mp_cards_contents {
	margin: 24px !important;
	float: left;
	text-align: left;
	width: 274px;
}

.mp_cards img {
	width: 322px;
}

.mp_cards_contents img {
	width: auto;
}

.mp_cards_contents h2 {
	margin: 0 0 0 8px !important;
	font-weight: 800;
	font-size: 16px;
}

.mp_cards_contents h3 {
	margin: 6px 0 12px 0 !important;
	font-weight: 500;
	font-size: 14px;
}

.mp_bt{
	width: 274px;
}

#main_intro {
	text-align: center;
	margin-top: 24px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	width: 250px;
	line-height: 140%;
	margin-bottom: 24px !important;
}

#sub {
	width: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sub_cards {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	float: left;
	width: 300px;
	text-align: left;
	box-shadow: 3px 3px 10px #D4DAE1;
	border-radius: 14px;
	padding: 20px 16px 20px 16px !important;
	background-color: white;
	margin: 8px !important;
}

.sub_cards .tags{
	position: absolute;
	left: 76%;
	font-size: 10px;
	padding: 2px 4px !important;
}

.sub_cards h2{
	width: fit-content;
}

.sub_cards h3{
	width: 200px;
}

#sub_texts {
	text-align: center;
	margin: 0 !important;
	margin-bottom: 24px !important;
}

.sub_cards img {
	margin: 0 20px 0 0 !important;
	padding: 0%;
}

.sub_cards h2 {
	font-weight: 700;
	font-size: 16px;
}

.sub_cards h3 {
	font-weight: 500;
	font-size: 14px;
	font: "pretendard";
}

#sub_wrap {
	background-color: #E4EAF2;
	width: 100vw !important;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 64px 0;
	height: fit-content;
}

.def-text {
	display: none;
}

.alt-text {
	display: block;
}
}


@media (max-width:400px) {

#sub{
	width: fit-content;
}

a.button {
	font-size: 7pt;
	}
	a.submenu {
	font-size: 7pt;
	}
	.main_menu_font {
	font-size: 7pt;
	}
	.lang_select_font {
	font-size: 0pt;
	}

	#front_div{
		left: calc((350px - 100vw) / 2);
	}

	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 350px) / 2) !important;
		font-family: "pretendard";
	}
	
	#nav_bar_inner{
		margin: 0 calc((100vw - 350px) / 2) !important;
	}

	.content{
		margin:0 calc((100vw - 350px) / 2) !important;
	}

	a.button {
		font-size: 7pt;
	}

	a.submenu {
		font-size: 7pt;
	}

	.main_menu_font {
		font-size: 7pt;
	}

	.lang_select_font {
		font-size: 0pt;
	}

}

@media (max-width:370px) {

	#nav_bar_inner{
		margin: 0 calc((100vw - 300px) / 2) !important;
	}

	#main_text {
		color: #1E1F20;
		font: 700 18px "Pretendard", sans-serif;
		text-align: center;
		margin-top: 48px !important;
		width: 180px;
		line-height: 140% !important;
	}

	.footer_int, .footer_kor {
		margin: 0 calc((100vw - 300px) / 2) !important;
	}

	.footer_wrap{
		height: 350px;
	}

	/* 메인 메뉴 좌우 여백 줄이기 */
	a.mainmenu:link,
	a.mainmenu:visited,
	a.mainmenu:active,
	a.mainmenu:hover {
		margin-right: 3px;
		margin-left: 0px;
	}
	.sub_cards .tags{
		left: 80%;
	}
}

@media (max-width:350px) {
	.mp_cards{
		width: 300px;
	}

	.mp_cards_contents{
		width: 252px;
	}

	.mp_cards img{
		width: 300px;
	}

	.mp_cards_contents img {
		width: auto;
	}

	.mp_bt{
		width: inherit;
	}

	.sub_cards {
		width: 280px;
		padding: 20px 16px 20px 16px !important;
	}

	.content{
		width: 330px;
	}

}

@media (max-width:320px) {
	#front_div{
		width: 280px;
	}

	.content{
		width: 280px;
	}

	#sub{
		width: 280px;
	}

	.sub_cards .tags{
		left: 90%;
	}

	.main_menu_font {
	margin: 0 !important;
	}
}