@charset "utf-8";

/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}

#wrap section{
box-sizing:border-box;
}

/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}

.info_list{
display:flex;
}

.info_list li{
width:25%;
text-align:center;
}

.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}

/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}

.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem;
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e;
}

.nav{
order:2;
width:100%;
}

.gnb{
display:none;
}

.gnb li{
display:flex;
background:#2c3e50;
}

.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}

.gnb li span{
width:20%;
text-indent:-9999px;
background:url(../images/s_images/sub_menu_toggle_btn.png) center center no-repeat;
cursor:pointer;
}

.menu_toggle_btn{
display:block;
width:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}

/* 서브 헤더 영역 CSS */
.sub_header_section{
order:3;
padding:48px 0;
padding:3.000rem 0;
text-align:center;
background:#219af7;
}

.sub_header_section h2{
margin-bottom:12px;
margin-bottom:0.750rem;
font-size:1.313em;
font-size:1.313rem;
color:#fff;
}

.breadcrum_list li{
display:inline;
font-size:0.813em;
font-size:0.813rem;
font-weight:bold;
}

/* 콘텐츠 영역 CSS */
.content_section{
order:4;
padding:20px;
padding:1.250rem;
background:#fff;
}

.gallery_list img{
width:100%;
max-width:100%;
border-radius:5px;
transition:all 0.4s;
-webkit-filter:grayscale(1);
filter:grayscale(1);
}

.gallery_list img:hover{
-webkit-filter:grayscale(0);
filter:grayscale(0);
}

.gallery_list li{
margin-top:20px;
margin-top:1.250rem;
}

.gallery_list li:first-child{
margin-top:0;
}

.gallery_list2 img{
width:100%;
max-width:100%;
border-radius:5px;
transition:all 0.4s;
}

.content_row_2{
display:flex;
justify-content:space-between;
margin:30px 0 40px 0;
margin:1.875rem 0 2.500rem 0;
}

.search_window{
width:118px;
width:7.375rem;
height:28px;
height:1.750rem;
font-size:0.688em;
font-size:0.688rem;
line-height:28px;
line-height:1.750rem;
text-indent:10px;
text-indent:0.625rem;
}

.search_select_box{
display:none;
}

.write_box a{
display:block;
width:70px;
width:4.375rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:30px;
line-height:1.875rem;
text-align:center;
background:#e65d5d;
color:#fff;
}

.content_row_3{
display:flex;
justify-content:center;
}

.content_row_3 span{
width:28px;
width:1.750rem;
height:28px;
height:1.750rem;
text-indent:-9999px;
}

.content_row_3 span.list_prev_btn{
margin-right:10px;
margin-right:0.625rem;
background:#2ecc71 url(../images/s_images/list_prev_btn.png) center center no-repeat;
}

.content_row_3 span.list_next_btn{
margin-left:10px;
margin-left:0.625rem;
background:#2ecc71 url(../images/s_images/list_next_btn.png) center center no-repeat;
}

.content_row_3 a{
width:26px;
width:1.625rem;
font-size:0.813em;
font-size:0.813rem;
line-height:26px;
line-height:1.625rem;
text-align:center;
border:1px solid #219af7;
color:#219af7;
transition:all 0.2s;
}

.content_row_3 a:nth-of-type(2){
margin:0 6px;
margin:0 0.375rem;
}

.content_row_3 a:nth-of-type(4){
margin:0 6px;
margin:0 0.375rem;
}

.content_row_3 a:nth-of-type(6){
margin:0 6px;
margin:0 0.375rem;
}

.content_row_3 a:hover{
color:#fff;
background:#219af7;
}

/* 푸터 영역 CSS */
.footer{
order:5;
width:100%;
background:#474747;
}

.footer p{
padding:20px;
padding:1.250rem;
font-size:0.813em;
font-size:0.813rem;
text-align:center;
text-transform:uppercase;
font-weight:bold;
color:#fff;
text-shadow:0px 1px 1px #191919;
}

/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 헤더 영역 CSS */
.header{
flex-direction:row;
}

.logo{
position:absolute;
top:0;
left:0;
z-index:10;
width:15.625%;
/* 120px ÷ 768px */
padding:0;
}

.logo a{
display:block;
padding:50px 0;
padding:3.125rem 0;
}

.nav{
position:relative;
min-height:80px;
min-height:5.000rem;
background:#2ecc71;
}

.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}

.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}

/* 콘텐츠 영역 CSS */
.content_section{
padding:40px;
padding:2.500rem;
}

.gallery_list{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.gallery_list li{
width:48.54651162790698%;
/* 334px ÷ 688px */
}

.gallery_list li:nth-child(2){
margin-top:0;
}

.search_select_box{
display:inline-block;
position:relative;
}

.search_select_box span{
display:inline-block; 
width:80px;
width:5.000rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:28px;
line-height:1.750rem;
text-align:center;
color:#fff;
background:#e65d5d;
cursor:pointer;
}

.search_select_list{
display:none;
position:absolute;
top:105%;
left:0;
width:100%;
}

.search_select_list li{
padding:6px 0;
padding:0.375rem 0;
font-size:0.750em;
font-size:0.750rem;
text-indent:10px;
text-indent:0.625rem;
color:#fff;
background:#e65d5d;
cursor:pointer;
}

.search_select_box:hover .search_select_list{
display:block;
}

/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}

/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}

/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}

.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}

.info_list li a{
padding:0;
}

/* 헤더 영역 CSS */
.header{
order:1;
justify-content:flex-end;
position:static;
}

.logo{
width:12.5%;
/* 120px ÷ 960px */
}

.nav{
display:flex;
align-items:center;
position:static;
width:87.5%;
/* 840px ÷ 960px */
}

.gnb{
display:flex !important;
flex-direction:row;
position:static;
width:100%;
text-shadow:0px 1px 1px #25ab5e;
}

.gnb li{
display:block;
margin-left:5.20833333333333%;
/* 50px ÷ 840px */
background:none;
}

.gnb li a{
width:auto;
padding:0;
text-indent:0;
}

.gnb li span{
display:none;
}

.menu_toggle_btn{
display:none;
}

/* 서브 헤더 영역 CSS */
.sub_header_section{
order:2;
}

/* 콘텐츠 영역 CSS */
.content_section{
order:3;
padding:60px;
padding:3.750rem;
}

.gallery_list li{
width:23.92857142857143%;
/* 201px ÷ 840px */
margin-top:12px;
margin-top:0.750rem;
}

.gallery_list li:nth-child(3), .gallery_list li:nth-child(4){
margin-top:0;
}

/* 푸터 영역 CSS */
.footer{
order:4;
}

.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
text-align:left;
}
}