@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;
}

/* Overlay */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
}
.overlay-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
}
.overlay-loading {
  display: none;
  position: relative;
  text-align: center;
  align-content: center;
  z-index: 101;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #0f3030; /* Dark Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Video */
.video_style {
    /*width: fit-content;
    height : 240px;*/
    width: 100%;
    height : auto;
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* Video */

/* 인포메이션 영역 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;
}

.gallery_list img:hover{
}

.gallery_list li{
    margin-top:20px;
    margin-top:1.250rem;
    width: 90%;
    margin: auto auto 25px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 10px;
    position: relative;

    border-radius: 25px;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 25px;
}

.gallery_list .data,
.gallery_list .social_media{
  display: flex;
  background: #e9f6ff;
  padding: 30px;
  justify-content: center;
  color: #68728e;
  width: 100%;
}

.gallery_list .data .data_item{
  margin: 0 15px;
  cursor: pointer;
  font-weight: bold;
  width: 30%;
  margin: auto;
}

.gallery_list .data .data_item{
    margin: 0 15px;
    cursor: pointer;
    font-weight: bold;
    width: 30%;
    margin: auto;
  }

.gallery_list .radio_wrap .radio_item {
    width: 100%;
    margin: 20px auto;
}


.gallery_list .radio_wrap .radio_item .radio_btn {
    margin: 0 10px 10px 0;
}


.gallery_list .data_item:hover,
.gallery_list .social_media .icon:hover{
  /* color: #6fbdee; */
}

.gallery_list .data .data_item:active {
    color: #00aa83;
}

.gallery_list .data .icon{
  margin-bottom: 10px;
  font-size: 20px;
}

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

.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:hover{
color:#fff;
background:#219af7;
}

/* 태블릿용 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:50%;
    /* 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;
    }
}

/* 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%;
    }
    */

    .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:30%;
    /*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;
    }
    */
}