/*** # 공통 CSS ***/

@charset "utf-8";

/* theme color */
:root{
	--white: #fff;
	--light-gray: #F3F3F3;
	--black: #000000;
	--dark-blue: #020944;
	--point-green: #01986d;
	--point-green2: #00d095;
	--green-font-color: #2b3f39;
	--point-sky:#ABEFFF;
	--dark : #222222;
	--tag-bg: rgba(33, 140, 116, 0.1);
	--theme-color1: #9fc290;
	--sockcho-font: "SokchoBadaBatang", "Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system;
	--bombaram-font: "HSBombaram", "Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system;
	--basic-font: "Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system
}

html {
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size: 18px;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-family: "Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system;
	color: var(--dark);
	/* line-height: 150%; */
	overflow: hidden;
}
html,body{
	overflow-x: hidden;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {
	margin: 0;
	padding: 0;
	border: 0
}
html.hidden {
	overflow-y: hidden;
}

body {
	padding:0;
	margin:0;
}
a{
	color:inherit;
	text-decoration:none;
}
input[type=button]{
	outline:none;
	cursor:pointer;
	font-family:"Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system;
}
button{
	outline:none;
	cursor:pointer;
	font-family:"Pretendard","Apple SD Gothic Neo", Sans-serif, -apple-system;
}

/* common */
.width-limit{
	max-width:1320px;
	width: 100%;
	margin:0 auto;
	box-sizing:border-box;
}
.pc{
	display:block;
}
.mo{
	display:none;
}
.mo480 {
	display:none;
}
.mo360 {
	display:none;
}
.mo320 {
	display:none;
}
.none{
	display:none;
}

/* FONT */
.sockho-font {
	font-family: var(--sockcho-font);
}
.bombaram-font {
	font-family: var(--bombaram-font);
}

/* Scroll */
.ScrollStyle::-webkit-scrollbar {width:5px}
.ScrollStyle::-webkit-scrollbar-track {background-color: transparent}
.ScrollStyle::-webkit-scrollbar-thumb {border-radius: 5px;background-color: #aaa}
.ScrollStyle::-webkit-scrollbar-button {width: 0;height: 0;}

/* MODAL */
.modal {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 500;
	top: 0;
	display: none;
	opacity: 0;
	transition: 0.3s;
	background-color: rgba(0,0,0,0.5);
}
.modal .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 500;
}
.modal.on {
	opacity: 1;
}
.modal.block {
	display: block;
}
.modal .modal-title {
	font-size: 20px;
	font-weight: bold;
}
.modal .modal-full-content {
	width: 100%;
	aspect-ratio: 1 / 0.6;
}
.modal-wrap {
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%);
	z-index: 501;
	display: none;
	opacity: 0;
	transition: 0.3s;
	max-width: 1000px;
	width: 90%;
}
.modal-content .modal-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--dark);
}
.modal-content {
	border-radius: 15px;
	background-color: var(--white);
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
}
.modal-content.modal-preview-content {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	width: auto;
}
.modal-wrap.on {
	opacity: 1;
	top: 50%;
}
.modal-wrap.block {
	display: block;
}
.modal .modal-close {
	width: 30px;
	cursor: pointer;
}
.modal .modal-text {
	overflow-y: auto;
	max-height: 350px;
	line-height: 150%;
}
.modal .modal-preview-content .modal-head {
	border: none;
	margin: 0;
}
.modal .modal-preview {
	width: 100%;
	text-align: center;
}
.modal-rv-preview-img {
	max-width: 100%;
	max-height:80vh;
}
.modal .modal-exit {
	text-align: right;
}
.modal-wrap .modal-exit.white {
	font-size: 40px;
	margin-bottom: 10px;
	color: var(--white);
} 

@media screen and (max-width:1400px){
	.width-limit{
		max-width:1000px;
	}
}

@media screen and (max-width:1200px){
	.width-limit{
		max-width: none;
		width: 100%;
		padding:0 50px;
	}
}

@media screen and (max-width:970px){
	.width-limit{
		padding: 0 30px;
		max-width: 810px;
	}
}

/* MOBILE */
@media screen and (max-width:768px){
	.width-limit{
		padding:0 15px;
		max-width:700px;
	}
	.pc{
		display:none !important;
	}
	.mo{
		display:block;
	}

	.modal-content {
		padding: 20px;
	}
	.modal-rv-preview-img {
		max-width: 90vw;
	}
}

/* MOBILE */
@media screen and (max-width:480px){
	.mo480 {
		display: block;
	}
	.modal-wrap .modal-exit.white {
		font-size: 25px;
		margin-bottom: 4px;
	} 
}

/* MOBILE */
@media screen and (max-width:360px){
	.mo360 {
		display: block;
	}
}

/* MOBILE */
@media screen and (max-width:320px){
	.mo320 {
		display: block;
	}
}