@import url("https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Black+Han+Sans&family=Noto+Sans+KR:wght@100..900&display=swap");

* {-webkit-text-size-adjust:none;}
* { margin:0;padding:0; }
a { text-decoration: none;color:#242424; }
a:visited{ text-decoration: none;color:#093a89; }
a:hover{ color:#242424; }

body{
	margin:0px;
	padding:0px;
}

/* Table */
table{
	border:0px;
	border-spacing:0px;
	border-collapse:collapse;
}
td, th{
	padding:0px;
	word-break:break-all;
}

/* Etc */
.title_font_family{
	font-family: 'NotoSansKR', sans-serif;}

#wrap{ 
	position:relative;
	width:100%;
	font-family: 'NotoSansKR', sans-serif;}

/* 본문 */
#wrap > #body{
	position:relative;
	width:100%;
	background-color:#ffffff;
}
#wrap > #body > #body_content{
	position:relative;
	width:100%;
}


/* 이미지 */


#wrap #body #images p {
    overflow: hidden;
}

#wrap #body #images p strong {
    position: absolute;
    display: block;
    z-index: 1;
    bottom: 0;
    width: 500px;
    height: 30px;
    background: rgba(92, 91, 91, 0.5);
    text-align: left;
    padding: 20px;
}

#wrap #body #images p span {
    position: absolute;
    display: block;
    z-index: 0;
    top: 0;
    width: 500px;
    height: 380px;
    box-shadow: inset 0 0 50px rgba(50, 30, 0, 0.6),
                inset 0 0 100px rgba(50, 30, 0, 0.3);
    background: rgba(255, 155, 0, 0.2);
    opacity: 0;
}

#wrap #body #images p:nth-child(1) strong {
    opacity: 0;
}

#wrap #body #images p:nth-child(2) strong {
    opacity: 0;
    left: -200%;
}

#wrap #body #images p:nth-child(3) strong {
    opacity: 0;
}
#wrap #body #images p:nth-child(4) strong {
    opacity: 0;
    left: -200%;
}

#wrap #body #images p:nth-child(5) strong {
    opacity: 0;
}


#wrap #body #images p:nth-child(1) img {
    position: absolute;
    top: 0px;
}
#wrap #body #images p:nth-child(2) img {
    position: absolute;
    top: 0px;
}

#wrap #body #images p:nth-child(3) img {
    position: absolute;
    top: 0px;
}

#wrap #body #images p:nth-child(4) img {
    position: absolute;
    top: 0px;
}

#wrap #body #images p:nth-child(5) img {
    position: absolute;
    top: 0px;
}

/* 에니메이션 */
.containertop{
	position:relative;
	max-width: 500px;
	background: #FFF;
	margin: 20px auto 0;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap:wrap;
	width: 100%;
	

	
}
.containertop .box{
	position:relative;
	width: calc(240px - 20px);
	height: calc(220px - 20px);
	background: #000;
	margin: 2px 10px;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow:0 5px 10px rgba(0, 0, 0,.8)
	
}
.containertop .box::before{
	content:'';
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	box-sizing:border-box;
	transition:0.5s;
	transform:scaleX(0);
	opacity:0;
	z-index:1;
}
.containertop .box:hover::before{
	transform:scaleX(1);
	opacity:1;
}
.containertop .box::after{
	content:'';
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	border-right:1px solid #fff;
	border-left:1px solid #fff;
	box-sizing:border-box;
	transition:0.5s;
	transform:scaleY(0);
	opacity:0;
	z-index:1;

}
.containertop .box:hover::after{
	transform:scaleY(1);
	opacity:1;
}
.containertop .box .imgBox{
	position:relative;
}
.containertop .box .imgBox img{
	width:100%;
	transtion:0.5s;
}
.containertop .box:hover .imgBox img{
	opacity: .2;
	transform: scale(1.2)
}
.containertop .box .content{
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;

}
.containertop .box .content h2{
	margin:0 0 10px;
	padding:0;
	color:#fff;
	transition:0.5s;
	transform:translateY(-50px);
	opacity:0;
	visibility: hidden;
	overflow: hidden;
}
.containertop .box .content p{
	margin:0;
	padding:0;
	color:#fff;
	transition:0.5s;
	transform:translateY(50px);
	opacity:0;
	visibility: hidden;
	line-height:20px;
	height:100px;

}
.containertop .box:hover .content h2{
	opacity:1;
	visibility: visible;
	transition-delay:0.2s;
	transform:translateY(0px);
	overflow: hidden;
	
	
}
.containertop .box:hover .content p {
	opacity:1;
	visibility: visible;
	transition-delay:0.2s;
	transform:translateY(0px);
	overflow: hidden;
	line-height:20px;
	height:100px;
}
/* 디자인 */
.containercard{
	position: relative;
	width:100%;
	background-size: cover;	
	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 30px;
	margin: 0px auto 0;
	background:#16384c;
	padding-left:0;
}


.containercard .card{
	position: relative;
	max-width: 300px;
	background: #fff;
	margin: 50px 10px;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;

	box-shadow: 0 5px 20px rgba(0,0,0,0.5);
	transition: 0.3s ease-in-out;
	border:1px solid #D9E5FF;

}
.containercard .card:hover
{
	height:450px;
}
.containercard .card .imgBx{
	position: relative;
	width: 260px;
	height: 260px;
	top: -60px;
	left: 20px;
	z-index: 1;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	justify-content: center;
	}
.containercard .card .imgBx img{
	position: relative;
	max-width:100%;
	border-radius: 4px;
	width:100%;
	height:100%;

}

.containercard .card .contBx{
	position: relative;
	margin-top: -200px;
	padding: 10px 15px;
	text-align: center;
	color:#111;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s ease-in-out;
	overflow: hidden;
}
.containercard .card:hover .contBx{
	visibility: visible;
	opacity: 1;
	margin-top: -40px;
	transition-delay: 0.2s;
	overflow: hidden;
	
	
}

.containercard .card .contBx p{
	height: 100px;
	padding: 10px;
	overflow: hidden;
}
.containercard .card:hover .contBx p{
	line-height: 30px;
	overflow: hidden;
	height: 200px;
	padding: 10px;

}

/* 모바일에니메이션 */
.containers{
	position:relative;
	max-width: 610px;
	background: #FFF;
	margin: 10px auto 0;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap:wrap;
	width: 100%;
	list-style:none;
	
}
.containers ul li {
	display:block;
	float:left;
	list-style:none;
	padding:0 5px;
}

.containers ul{
	list-style:none;
}
.containers .box{
	position:relative;
	width: calc(300px - 30px);
	height: calc(250px - 20px);
	background: #000;
	margin: 5px;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow:0 5px 10px rgba(0, 0, 0,.8)
	
}
.containers .box::before{
	content:'';
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	box-sizing:border-box;
	transition:0.5s;
	transform:scaleX(0);
	opacity:0;
	z-index:1;
}
.containers .box:hover::before{
	transform:scaleX(1);
	opacity:1;
}
.containers .box::after{
	content:'';
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	border-right:1px solid #fff;
	border-left:1px solid #fff;
	box-sizing:border-box;
	transition:0.5s;
	transform:scaleY(0);
	opacity:0;
	z-index:1;

}
.containers .box:hover::after{
	transform:scaleY(1);
	opacity:1;
}
.containers .box .imgBox{
	position:relative;
}
.containers .box .imgBox img{
	width:100%;
	transtion:0.5s;
}
.containers .box:hover .imgBox img{
	opacity: .2;
	transform: scale(1.2)
}
.containers .box .content{
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;

}
.containers .box .content h2{
	margin:0 0 10px;
	padding:0;
	color:#fff;
	transition:0.5s;
	transform:translateY(-50px);
	opacity:0;
	visibility: hidden;
	overflow: hidden;
}
.containers .box .content p{
	margin:0;
	padding:0;
	color:#fff;
	transition:0.5s;
	transform:translateY(50px);
	opacity:0;
	visibility: hidden;
	line-height:20px;
	height:100px;

}
.containers .box:hover .content h2{
	opacity:1;
	visibility: visible;
	transition-delay:0.2s;
	transform:translateY(0px);
	overflow: hidden;
	
	
}
.containers .box:hover .content p {
	opacity:1;
	visibility: visible;
	transition-delay:0.2s;
	transform:translateY(0px);
	overflow: hidden;
	line-height:20px;
	height:100px;
}
/* 모바일디자인 */
.container{
	position: relative;
	width:100%;
	background-size: cover;	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 30px;
	margin: 0px auto 0;
	background:#16384c;
	padding-left:0;
}


.container.card{
	position: relative;
	max-width: 220px;
	background: #fff;
	margin: 50px 5px;
	padding: 10px 5px;
	display: flex;
	flex-direction: column;

	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	transition: 0.3s ease-in-out;
	border:1px solid #D9E5FF;

}
.container.card:hover
{
	height:450px;
}
.container.card .imgBx{
	position: relative;
	width: 200px;
	height: 200px;
	top: -60px;
	left: 20px;
	z-index: 1;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	justify-content: center;
	}
.container.card .imgBx img{
	position: relative;
	max-width:200px;
	border-radius: 4px;
	width:100%;
	height:100%;

}

.container.card .contBx{
	position: relative;
	margin-top: -200px;
	padding: 10px 15px;
	text-align: center;
	color:#111;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s ease-in-out;
	overflow: hidden;
}
.container.card:hover .contBx{
	visibility: visible;
	opacity: 1;
	margin-top: -40px;
	transition-delay: 0.2s;
	overflow: hidden;
	
	
}

.container.card .contBx p{
	height: 100px;
	padding: 10px;
	overflow: hidden;
}
.container.card:hover .contBx p{
	line-height: 30px;
	overflow: hidden;
	height: 200px;
	padding: 10px;

}




/* 게시판/서비스 */
#wrap > #body > #body_content > #board_wrap{
	width:100%;
}
#wrap > #body > #body_content > #board_wrap > #callcenter{
	margin:10px;
	overflow:hidden;
}
#wrap > #body > #body_content > #board_wrap > #board{
	margin:10px;
	overflow:hidden;
}
#wrap > #body > #body_content > #board_wrap > #goods_info{
	margin:5px auto;
	overflow:hidden;
}
#wrap > #body > #body_content > #board_wrap > #goods_info > ul{
	width:100%;
	overflow:hidden;
	height:100%;
	margin:0 auto;
	box-sizing:border-box;
	padding:0;
}
#wrap > #body > #body_content > #board_wrap > #goods_info > ul > li{
	position:relative;
	list-style:none;
	float:left;
	width:48%;
	
	box-sizing:border-box;
	border:0.5px solid #444;
	overflow:hidden;
	padding-bottom:0;
	margin-bottom:0;
}


#wrap > #body > #body_content > #board_wrap > #goods_info > ul > li:nth-child(2){
	margin-left:2%;
}

#wrap > #body > #body_content > #board_wrap > #service_info{
	margin:10px 10px 30px;
	overflow:hidden;
}
#wrap > #body > #body_content > #board_wrap > #service_info > ul{
	width:100%;
	height:110px;
	overflow:hidden;
	margin:0 auto;
	
}
#wrap > #body > #body_content > #board_wrap > #service_info > ul > li{
	position:relative;
	list-style:none;
	float:left;
	width:33%;
	height:100%;
	box-sizing:border-box;
	
	background-color:#d2e4ef;
}
#wrap > #body > #body_content > #board_wrap > #service_info > ul > li:nth-child(2),
#wrap > #body > #body_content > #board_wrap > #service_info > ul > li:nth-child(3){
	border-left:0px;
}
#wrap > #body > #body_content > #board_wrap > #service_info > ul > li:nth-child(3){
	border-left:0px;
	width:34%;
}