@charset "utf-8";
@import url(./reset.css);

body,th,td,input,select,big,button,textarea,div {font-size:19px;line-height:170%;font-family:"NanumBarunGothic", applegothic, "돋움",dotum,sans-serif;color:#222222; letter-spacing:0.05em; word-spacing:0.07em;}

a{
	text-decoration: none;
	color: #222222;
}

.font_bold
{
	font-family:'NanumBarunGothicBold';
}

.font_light
{
	font-family:'NanumBarunGothicLight';
}

.top_button1
{
	-moz-appearance:none; /* 브라우저 기본 속성 해제(Firefox) */
	-webkit-appearance:none; /* 브라우저 기본 속성 해제(Safari and Chrome) */
	background-color:#ededed;
	padding: 5px 15px;
	text-align: center;
	color: #ffffff;
	border: none;
	border-radius: 2vmin;
	cursor:pointer;
	font-size: 17px;
}

.top_button2
{
	-moz-appearance:none; /* 브라우저 기본 속성 해제(Firefox) */
	-webkit-appearance:none; /* 브라우저 기본 속성 해제(Safari and Chrome) */
	background-color:#ededed;
	padding: 15px 25px;
	text-align: center;
	color: #ffffff;
	border: none;
	border-radius: 2vmin;
	cursor:pointer;
	font-size: 19px;
}

.round1
{
	background-color:#f5f5f5;
	padding: 25px 25px;
	border-radius: 2vmin;
	border: 0px solid #DDDDDD;
}

.menu_layout
{
	display: inline-block;
	cursor:pointer;
	margin-right:5px;
}

.menu_icon
{
	display: inline-block;
	color:#d9d9d9;
	font-size:10px;
	vertical-align:middle;
}

.menu_title
{
	display: inline-block;
	padding:20px 15px 20px 10px;
}

.banner_title
{
	color:#FFFFFF;
	font-size:27px;
	font-weight:bold;
	word-break: keep-all;
}

.banner_content
{
	color:#FFFFFF;
	font-size:19px;
	word-break: keep-all;
	margin-top:20px;
}

.banner_layout
{
	padding-left:80px;
	padding-right:10px;
}

.banner_img
{
	width:150px;
	border-radius:3%;
}

.round_list_container {
    display: flex;
    flex-wrap: wrap; /* 버튼을 여러 줄로 감쌀 수 있도록 설정 */
    justify-content: space-between; /* 버튼 간의 간격 조정 */
}

.round_list {
    flex: 1 1 43%; /* 기본 너비를 50%로 설정 */
    margin: 10px; /* 버튼 간의 여백 */
	padding: 25px 25px;
	background-color:#f5f5f5;
	border-radius: 2vmin;
	border: 0px solid #DDDDDD;
}

.round_list2 {
    flex: 1 1 11.5%; /* 기본 너비를 50%로 설정 */
    margin: 5px; /* 버튼 간의 여백 */
}

.round_list3 {
    flex: 1 1 25%; /* 기본 너비를 30%로 설정 */
    margin: 5px; /* 버튼 간의 여백 */
}

.desktop-only
{
	display: none;
}

.desktop-only2
{
	display: none;
}

.mobile-only
{
	display: none;
}

.mobile-only2
{
	display: none;
}

/* 화면 너비가 769px 이하일 때 모바일 전용 DIV를 보이도록 설정합니다. */
@media (max-width: 769px) {
    .mobile-only {
        display: block; /* 모바일에서 보이도록 설정 */
    }
	
	.mobile-only2 {
        display: inline-block; /* 모바일에서 보이도록 설정 */
    }

    .desktop-only {
        display: none; /* 모바일에서 PC 전용 DIV를 숨김 */
    }
	.desktop-only2 {
        display: none; /* 모바일에서 PC 전용 DIV를 숨김 */
    }
	
	.menu_layout
	{
		margin-right:0px;
	}

	.menu_title
	{
		padding:30px 5px 20px 5px;
	}
	
	.banner_title
	{
		font-size:20px;
	}

	.banner_content
	{
		font-size:17px;
	}

	.banner_layout
	{
		padding-left:10px;
	}

	.banner_img
	{
		width:100px;
		border-radius:3%;
	}
	
	.round_list {
		flex: 1 1 100%; /* 모바일에서는 버튼 너비를 100%로 설정 */
	}
	
	.round_list2 {
		flex: 1 1 22%; /* 기본 너비를 50%로 설정 */
		margin: 5px; /* 버튼 간의 여백 */
	}
	
	.round_list3 {
		flex: 1 1 100%; /* 기본 너비를 50%로 설정 */
		margin: 5px; /* 버튼 간의 여백 */
	}
}

/* 화면 너비가 770px 이상일 때 PC 전용 DIV를 보이도록 설정합니다. */
@media (min-width: 770px) {
    .desktop-only {
        display: block; /* PC에서 보이도록 설정 */
    }
	
	.desktop-only2 {
        display: inline-block; /* PC에서 보이도록 설정 */
    }

    .mobile-only {
        display: none; /* PC에서 모바일 전용 DIV를 숨김 */
    }
	
	.mobile-only2 {
        display: none; /* PC에서 모바일 전용 DIV를 숨김 */
    }
}