/* common */
:root{
	--mainCol: #78b1e3;
	--blueGra: linear-gradient(136deg, #78b1e3, #a7d6ff);
}

#wrap{
	position: relative;
	z-index: 1;
}

.pc{
	display: block !important;
}

.mb{
	display: none !important;
}

#hd_top .row > div{
	width: calc(100%/3);
	height: 100%;
}

.txtModal{
	position: fixed;
	left: 50%;
	top: 150%;
	width: 90%;
	max-width: 720px;
	height: 80%;
	background: #fff;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
	padding: 30px;
	border-radius: 20px;
	box-shadow: rgba(0,0,0,0.2) 2px 2px 5px;
	z-index: 11;
	transition: all 0.4s;
}

.txtModal.on{
	top: 50%;
}

.txtModal h5{
	font-size: 2rem;
	margin-bottom: 20px;
}

.txtModal p{
	white-space: pre-line;
	font-size: 1.4rem;
	height: 90%;
	overflow: auto;
	word-break: keep-all;
	box-sizing: border-box;
	padding-right: 5%;
}

.txtModal p::-webkit-scrollbar {
	width: 6px;
}
.txtModal p::-webkit-scrollbar-thumb {
	background-color: #78B1E3;
	border-radius: 100px;
}
.txtModal p::-webkit-scrollbar-track {
	background-color: #EBF6FF;
	border-radius: 100px;
}

.closeModal{
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	/* border: 1px solid #eee; */
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
}

.closeModal::before,
.closeModal::after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #999;
}

.closeModal::before{
	transform: translate(-50%,-50%) rotate(45deg);
}

.closeModal::after{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.modalBg{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 10;
}


@media screen and (max-width: 1300px){

html{font-size: 50%;}


}


@media screen and (max-width: 720px){
	
html{font-size: 1.7vw;}


.pc{
	display: none !important;
}

.mb{
	display: block !important;
}

.txtModal{
	padding: 10vw 3vw;
	border-radius: 20px;
}

.txtModal p::-webkit-scrollbar {
	width: 3px;
}

/* header */
#hd_top .row > div{
	width: calc(100%/4);
	height: 100%;
}

#hd_top .row .logo_part_type{
	width: 50%;
}

#hd_top{
	height: 50px;
	border-bottom: 1px solid #eee;
}

#hd_top .grid{
	display: block !important;
	height: 100%;
}

#hd_top .row{
	display: flex;
	margin: 0;
	position: relative;
	height: 100%;
}

.headerRight{
	position: relative;
}

.menuOpen{
	display: block;
	position: relative;
	width: 25px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	z-index: 999;
}

.menuOpen span{
	display: block;
	width: 100%;
	height: 2px;
	background: var(--mainCol);
	position: absolute;
	left: 50%;
	transition: all 0.3s;
}

.menuOpen span:nth-child(1){
	top: 0;
	transform: translate(-50%,0);
}

.menuOpen.on span:nth-child(1){
	top: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
}

.menuOpen span:nth-child(2){
	top: 50%;
	transform: translate(-50%,-50%);
}

.menuOpen.on span:nth-child(2){
	opacity: 0;
}

.menuOpen span:nth-child(3){
	bottom: 0;
	transform: translate(-50%,0);
}

.menuOpen.on span:nth-child(3){
	bottom: 50%;
	transform: translate(-50%,50%) rotate(-45deg);
}

#header_wrap #hd_top #logo{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
	padding: 0;
	margin: 0;
	display: block;
}

.headerLeft{
	position: relative;
}

.headerLeft .headerTel{
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	width: 25px;
}

.headerLeft .headerTel img{
	width: 100%;
}


/* gnb */
#header{
	position: fixed;
	top: 50px;
	right: -100%;
	width: 100%;
	height: calc(100% - 50px);
	background: transparent;
	/* display: none; */
	transition: all 0.4s;
	z-index: 99999;
}

#header.on{
	display: block;
	right: 0;
}

.menu_bg{
	display: block;
	background: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 99;
}

#header .grid{
	background: #fff;
	position: absolute;
	top: 0%;
	right: 0%;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: 0;
	overflow-x: auto;
	padding-bottom: 70px;
	transition: all 0.4s;
}

#header.on .grid{
	top: 0;
}

#gnb>li{
	width: 100%;
	border-bottom: 1px dashed #eee;
}

#gnb>li>a{
	font-size: 2.3rem;
	height: 45px;
	line-height: 45px;
	text-align: left;
	text-indent: 10vw;
}

#gnb>li>div>ul{
	padding: 3vw 0;
	text-align: left;
	text-indent: 10vw;
	background: rgb(235 241 245);
}

#gnb>li>div>ul>li>a{
	line-height: 2;
	font-size: 2.2rem;
	color: #333;
}

#tnb{
	padding: 3vw 0;
	margin-bottom: 3vw;
	text-align: center;
	background: var(--mainCol);
}

#tnb li{
	/* width: 50%; */
	margin: 0;
	text-align: center;
	position: relative;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	float: inherit;
	/* background: #666; */
}

#tnb li a{
	color: #fff;
	font-size: 1.8rem;
	margin: 0 3vw;
}

#tnb li a:after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	width: 1px;
	height: 2vw;
	background: #fff;
}

#tnb li:last-child a:after{
	display: none;
}

.closeMenu{
	display: block;
	position: absolute;
	top: 5vw;
	right: 5vw;
	width: 20px;
	height: 20px;
}

.closeMenu::before,
.closeMenu::after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #333;
}

.closeMenu::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.closeMenu::after{
	transform: translate(-50%,-50%) rotate(45deg);
}

.closeModal{
	top: 8vw;
	right: 3vw;
}


/* content */
#content{
	padding-top: 50px !important;
}


/* footer */
#footer{
	height: auto;
	padding: 10vw 0 40vw;
}

#footer article{
	width: 90%;
	padding: 0;
	position: static;
	top: auto;
	left: auto;
	transform: none;
	height: auto;
	margin: auto;
}

#footer .footTel{
	font-size: 4rem;
}

#footer .footTel a{
	margin: 0;
}

#footer .footTel h3{
	font-size: 2.5rem;
}

#footer .footQuick{
	width: 100%;
}

#footer p,
#footer address{
	font-size: 1.6rem;
}





}


@media screen and (max-width: 768px){
	
}