/* ****************** 1칸 레이아웃  ****************** */

.layout_197371_ {clear:both; min-width:320px; max-width:1200px; margin:0 auto;}
.layout_197371_ > div:after {content:''; display:block; clear:both;}
.layout_197371_ > div > [class^=container_] {float:left; position:relative; width:100%; box-sizing:border-box;}

@media \0screen{
	.layout_197371_ {min-width:1200px;}
}

/* ****************** 텍스트 밑줄(장문)  ****************** */

.textarea_454306_ p {
	display:block; margin:0; padding:20px;
	font-size:16px; letter-spacing:0px; font-weight:normal; color: #666; line-height:1.4em;
}
.half_background {
  background: linear-gradient(to top, #d7f0a1 50%, transparent 50%);
}  

/* ****************** 텍스트 오버레이 이미지  ****************** */

.text_over_img_202551_ {display:inline-block; overflow:hidden; position:relative; width:px; max-width:100%; vertical-align:top;}
.text_over_img_202551_ * {box-sizing:border-box;}
.text_over_img_202551_ a {display:block; text-decoration:none;}
.text_over_img_202551_ img {max-width:100%; vertical-align:top;border-radius:50px 0 50px 0;}
.text_over_img_202551_ .text_box {position:absolute; left:0; width:100%;}
.text_over_img_202551_ .text_box p {
	margin:0; padding:5px 25px;
	text-shadow: -1px 0 1px rgba(0,0,0,0.2), 1px 0 1px rgba(0,0,0,0.2), 0 -1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2);
}
.text_over_img_202551_ .subject {font-weight:bold; color:#ffffff;}
.text_over_img_202551_ .content {color:#ffffff;}

.text_sml_202551_ .subject {font-size:14px; line-height:1.6em;}
.text_sml_202551_ .content {font-size:13px; line-height:1.6em;}
.text_mid_202551_ .subject {font-size:16px; line-height:1.4em;}
.text_mid_202551_ .content {font-size:14px; line-height:1.6em;}
.text_big_202551_ .subject {font-size:25px; line-height:1.4em;}
.text_big_202551_ .content {font-size:15px; line-height:1.6em;}

.text_top_202551_ .text_box {top:20px; text-align:left;}
.text_middle_202551_ .text_box {top:50%; height:0; font-size:0; text-align:center;}
.text_middle_202551_ .subject {position:absolute; left:0; bottom:0; width:100%;}
.text_middle_202551_ .content {position:absolute; left:0; top:0; width:100%;}
.text_bottom_202551_ .text_box {bottom:20px; text-align:right;}

/* ****************** 이미지 (테두리 자동그려지기)  ****************** */

.img_ratio_312536_ {display:inline-block; overflow:hidden; position:relative; width:100%; max-width:100%; vertical-align:top;}
.img_ratio_312536_ * {box-sizing:border-box;}
.img_ratio_312536_ a {display:block; text-decoration:none;}
.img_ratio_312536_ img {width:100%; vertical-align:top;border-radius:50px 0 50px 0;}
  
 /* 본 소스는 %(퍼센트)로 되어있기 때문에 반응형에 적용할 수 있습니다 */
* {margin:0;padding:0;}
.img_ratio_312536_ {position:relative;display:inline-block;}
.img_ratio_312536_ img {max-width:100%;}
.img_ratio_312536_ span.text {position:absolute;top:50%;left:0;transform:translateY(-50%);display:none;width:100%;font-size:70px;color:#fff;font-weight:900;text-align:center;}
.img_ratio_312536_::before, .img_ratio_312536_::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .8s;-webkit-transition:all .8s;}
.img_ratio_312536_::before {width:97%;height:95%;border-top:2px solid #fff;border-bottom:2px solid #fff;width:0;border-radius:50px 0 50px 0;} /* 보더의 두께가 있기 때문에 요소의 크기에 계산해 줘야 합니다 */
.img_ratio_312536_::after {width:97%;height:95%;border-left:2px solid #fff;border-right:2px solid #fff;height:0;border-radius:50px 0 50px 0;} /* 보더의 두께가 있기 때문에 요소의 크기에 계산해 줘야 합니다 */

/* 마우스가 올라가면 반응하는 소스 */
.img_ratio_312536_:hover span.text {display:block;}
.img_ratio_312536_:hover::before {width:calc(97% + 4px);} /* 화면에 따라서 정확한 사각형을 위한 값을 줘야하는 부분 */
.img_ratio_312536_:hover::after {height:calc(95% + 4px);} /* 보더의 두께값을 더해줘서 정확한 모서리를 만들기 위해 calc값을 사용했습니다 */
  
  
  
@media (min-width:1024px){
	.img_ratio_312536_ {width:px;}
}
@media \0screen{
	.img_ratio_312536_ {width:px;}
}

/* ****************** 이미지  ****************** */

.img_197421_ {display:inline-block; overflow:hidden; position:relative; width:px; max-width:100%; vertical-align:top;}
.img_197421_ * {box-sizing:border-box;}
.img_197421_ a {display:block; text-decoration:none;}
.img_197421_ img {max-width:100%; vertical-align:top;}