/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width: 717px) {

	html {
		font-size: 0.6em;
	}
/*
	div, p, h1, h2, h3, h4, h5, span, img, navi {
		box-shadow: 0 0 0 1px #f00 inset;
	}
*/
	select {
		-webkit-appearance:none; /* 크롬 화살표 없애기 */
		-moz-appearance:none; /* 파이어폭스 화살표 없애기 */
		appearance:none;/* 화살표 없애기 */
		background-image : url(../img_m/common/select_arrow.png);
		background-repeat: no-repeat;
		background-position-x: right;
		background-position-y: center;

	}

	input {
		width: 100%;
		border: 0px;
		border-bottom: 2px solid #000000;
		height: 50px;
		color: #000000;
		padding-left: 21px !important;
		padding-right: 21px !important;
		font-size: 1.5rem;
	}

	input::placeholder {
		color: #a3a3a3;
	}
	input::-webkit-input-placeholder {
		color: #a3a3a3;
	}
	input:-ms-input-placeholder {
		color: #a3a3a3;
	}

	textarea {
		width: 100%;
		border: 0px;
		border-bottom: 2px solid #000000;
		color: #000000;
		padding-left: 21px !important;
		padding-right: 21px !important;
		font-size: 1.5rem;
	}

	textarea::placeholder {
		color: #a3a3a3;
	}
	textarea::-webkit-input-placeholder {
		color: #a3a3a3;
	}
	textarea:-ms-input-placeholder {
		color: #a3a3a3;
	}

	body {
		font-family: 'NanumSquare';
		background-size: cover;
	}

	/*///////////////////////////////////*/
	/*/ animation common                 */
	/*///////////////////////////////////*/

	@keyframes play {
		100% {
			transform: rotate(360deg);
		}
	}

	.animation_img {
		opacity: 0;
	}

	.ani_bottom {
		margin-top: 150px;
	}

	.ani_left {
		width: 100%;
		margin-left: -150px;
	}

	.ani_right {
		width: 100%;
		margin-left: 150px;
	}

	.ani_opacity {
		opacity:0;
	}



	.sub_menu {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: #000000;
		z-index: 999;
		margin-top: -100vh;
		display: none;
	}
	.sub_menu .logos {
		position: absolute;
		width: 45vw;
		left: 20px;
		top: 37px;
		cursor: pointer;
	}

	.sub_menu .btn_close {
		position: absolute;
		width: 64px;
		height: 64px;
		right: 20px;
		top: 20px;
		cursor: pointer;
	}

	.sub_menu .row {
		position: absolute;
		display: flex;
		width: 100%;
		top: 15%;
	}

	.sub_menu .row .left {
		width: 40%;
		text-align: right;
		padding-left: 20px;
		align-items: normal;
	}

	.sub_menu .row .left a {
		width: initial;
		font-weight: bold;
		font-size: 3.5rem;
		font-weight: var(--font-weight-bold);
		font-family: Helvetica;
		color: var(--font-w-color);
		margin-bottom: 7%;
		display: block;
		text-align: left;
	}

	.sub_menu .row .right {
		width: 60%;
		padding-left: 20px;
		padding-right: 20px;
	}

	.sub_menu .row .right .text_moto {
		font-size: 2rem;
		font-weight: var(--font-weight-regular);
	}

	.sub_menu .row .right .text_inofi {
		font-family: Helvetica;
		font-size: 3rem;
		font-weight: var(--font-weight-bold);
	}

	.sub_menu .row .right .item {
		margin-top: 7%;
	}

	.sub_menu .row .right .item .content {
		color: var(--font-w-color);
		font-size: 1.2rem;
		font-family: Helvetica;
		font-weight: var(--font-weight-bold);
		margin-top: 0.8rem;
	}

	.sub_menu .row .right .container {
		margin-top: 2.68rem;
		display: initial;
	}
	.sub_menu .row .right .container a {
		color: var(--font-w-color);
		font-family: Helvetica;
		display: block;
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		font-size: 1.5rem;
		font-weight: var(--font-weight-bold);
		margin-top: 7%;
		box-shadow: 0 0 0 2px #ffffff inset;
		border-radius: 40px;
		background-color: #000000;
		box-sizing: border-box;
		transform: skew(-0.03deg);
		cursor: pointer;
	}

	.sub_menu .row .right .container select {
		color: var(--font-w-color);
		font-family: Helvetica;
		display: block;
		padding-left: 20px;
		padding-right: 50px;
		height: 40px;
		line-height: 40px;
		font-size: 1.5rem;
		font-weight: var(--font-weight-bold);
		border: 0px;
		border-radius: 40px;
		background-color: #808080;
		box-sizing: border-box;
		transform: skew(-0.03deg);
		cursor: pointer;
		/* width: 150px; */
		margin-left: 0px;
		margin-top: 7%;
	}

	.wrapper {
		position: relative;
		left: 0px;
		top: 0px;
	}

	.top {
		position: absolute;
		z-index: 10;
		width: initial;
		height: fit-content;
		left: 0px;
		top: 0px;
	}

	.top .logo {
		position: absolute;
		width: 45vw;
		margin-left: 20px;
		margin-top: 37px;
		left: initial;
		top: initial;
	}

	.top .navi {
		display: none;
	}

	.top .info_menu {
		position: fixed;
		display: flex;
		height: 64px;
		right: 20px;
		top: 20px;
	}

	.top .info_menu .btn_inofi {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_inofi_border_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		text-align: left;
		cursor: pointer;
	}

	.top .info_menu .btn_inofi:hover {
		background-image: url(../img/common/btn_inofi_border_over.png);
	}

	.top .info_menu .btn_inofi img{
		width: 64px;
		height: 64px;
		margin-left: -7px;
		margin-top: -2px;
		animation: play 6s linear infinite;
		transform-origin: 50% 50%;
		content: url(../img/common/btn_inofi_icon_nor.png);
	}

	.top .info_menu .btn_inofi img:hover{
		content: url(../img/common/btn_inofi_icon_over.png);
	}

	.top .info_menu .btn_inofi_b {
		width: 64px;
		height: 64px;
		background-size: 64px 64px;
		background-color: transparent;
		border: 1px solid rgba(0,0,0,0.4);
		cursor: pointer;
	}


	.top .info_menu .btn_inofi_b:hover {
		background-color: transparent;
	}

	.top .info_menu .btn_inofi_b img{
		width: 64px;
		height: 64px;
		margin-left: -5px;
		margin-top: -2px;
		animation: play 6s linear infinite;
		transform-origin: 50% 50%;
		content: url(../img/common/btn_inofi_b_icon_nor.png);
	}

	.top .info_menu .btn_inofi_b img:hover{
		content: url(../img/common/btn_inofi_b_icon_nor.png);
	}


	.top .info_menu .btn_menu {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_menu_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top .info_menu .btn_menu_b {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_menu_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top .email_and_next {
		position: fixed;
		display: flex;
		height: 128px;
		flex-direction: column;
		right: 15px;
		bottom: 15px;
	}

	.top .email_and_next .btn_email {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_contact_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top .email_and_next .btn_email:hover {
		background-image: url(../img/common/btn_contact_nor.png);
	}

	.top .email_and_next .btn_next {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_next_b_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top .email_and_next .btn_next:hover {
		background-image: url(../img/common/btn_next_b_nor.png);
	}

	/*a:hover, a:before, a:after, a:link, a:visited,*/

/*////////////////////////////////*/
/* 서브 페이지 레이아웃 공통          */
/*////////////////////////////////*/

	.top_sub .logo {
		position: absolute;
		width: 45vw;
		margin-left: 20px;
		margin-top: 37px;
		left: initial;
		top: initial;
	}

	.top_sub .navi {
		display: none;
	}

	.top_sub .info_menu {
		position: fixed;
		display: flex;
		height: 64px;
		right: 20px;
		top: 20px;
	}

	.top_sub {
		position: absolute;
		z-index: 10;
		width: initial;
		height: fit-content;
		left: 0px;
		top: 0px;
	}

	.top_sub A .logo {
		content:url(../img/common/CI_b.png);
	}

	.top_sub .info_menu .btn_inofi {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_inofi_border_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top_sub .info_menu .btn_inofi:hover {
		background-color: transparent;
	}


	.top_sub .info_menu .btn_inofi img{
		width: 64px;
		height: 64px;
		margin-left: -7px;
		margin-top: -2px;
		animation: play 6s linear infinite;
		transform-origin: 50% 50%;
		content: url(../img/common/btn_inofi_b_icon_nor.png);
	}

	.top_sub .info_menu .btn_inofi img:hover{
		content: url(../img/common/btn_inofi_b_icon_nor.png);
	}

	.top_sub .info_menu .btn_menu {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_menu_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top_sub .info_menu .btn_menu:hover {
		background-image: url(../img/common/btn_menu_over.png);
	}


	.top_sub .email_and_next {
		position: fixed;
		display: flex;
		height: 128px;
		flex-direction: column;
		right: 15px;
		bottom: 15px;
	}

	.top_sub .email_and_next .btn_email {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_contact_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top_sub .email_and_next .btn_email:hover {
		background-image: url(../img/common/btn_contact_nor.png);
	}

	.top_sub .email_and_next .btn_next {
		width: 64px;
		height: 64px;
		background-image: url(../img/common/btn_next_b_nor.png);
		background-size: 64px 64px;
		background-color: transparent;
		border: 0px;
		cursor: pointer;
	}

	.top_sub .email_and_next .btn_next:hover {
		background-image: url(../img/common/btn_next_b_nor.png);
	}

	.content_wrap {
		width: 100%;
		height: calc(var(--vh, 1vh) * 100);
		display: initial;
		position: absolute;
	}

	.content_wrap .title {
		width: 100%;
		text-align: center;
		padding-left: 20px;
		min-width: 100px;
		height: 22vh;
		background-color: #ffffff;
		position: absolute;
		z-index: 2;

	}

	.content_wrap .title h2 {
		font-size: 3.5em;
		font-family: Helvetica;
		font-weight: var(--font-weight-bold);
		margin-top: 25%;
		background-color: #ffffff;
		color : #000000;
		text-align: left;
	}

	.content_wrap .content {
		width: 100%;
		height: calc(var(--vh, 1vh) * 100);
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom : 20px;
		padding-top:  22vh;
	}

	.content_wrap .content .container {
		overflow-y: scroll;
		height: 100%;
	}
}