@charset "utf-8";

body {
	margin:0;padding:0;     font-size: 14px;  color: #222222;
	font-family: 'Montserrat','Pretendard', '맑은고딕', 'Malgun Gothic',Helvetica, sans-serif ;
    overflow-y: hidden;  overflow-x: hidden;
}


html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
ul, dl,dt,dd, li {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Pretendard', '맑은고딕', 'Malgun Gothic', Helvetica, sans-serif; font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer;}

a{color: #222222;}
a:hover, a:visited, a:link {text-decoration:none; color : #222222;}
p {word-break:keep-all;  margin-bottom: 0; font-size: 16px;   text-align: justify;     word-break: break-all;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;}
.displaynone {display: none;}
.w100p{width: 100%;}
.p100 {width: 100%;}
.p90 {width: 90%;}
.p80 {width: 80%;}
.p70 {width: 70%;}
.p50 {width: 50%;}
.width_inner{max-width: 1380px; margin: auto; padding-left: 15px; padding-right: 15px;}
.width_innersm{max-width: 1100px; margin: auto;}

.tx_small {font-size: 15px; line-height: initial;}
.tx_center {text-align: center;}
.paper { font-family: 'Paperlogy', sans-serif;}

:root {
	--maincolor : #233877; 
	--grey: #333333;
	--grey2 : #666666;
    --bg_grey : #f6f6f6; 
    --coral1 : #f8a979;
    --coral2 : #fa7c37;
    --coral2 : #f68844; 
    --purple1 : #858aaa;
    --purple2 : #515a92; 
    --bg_color1 : #f7f3eb;
    --bg_color2 : #f5eddf;
  }

.color_main{ color:  var(--maincolor);}  
.color_coral1{ color:  var(--coral1);}  
.color_coral2{ color:  var(--coral2);}  
.color_purple1{ color:  var(--purple1);}  


.pc_br{display: block;}
.mo_br{display: none;}
@media (max-width: 768px) { 
    .pc_br{display: none;}
    .mo_br{display: block;}
}

.cke_sc {display: none;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.p-5 {padding: 3em;}
.pt50 {padding-top: 50px;}
.pb50 {padding-bottom: 50px;}
.boardpadding {padding: 3em;}
.mt-3 {margin-top: 3em;}
.pb-5 {padding-bottom: 50px;}
.m-auto {margin: auto;}
.bg_grey {background-color: #f0f0f0;}
.w1400 {width: 100%; margin: auto; max-width: 1380px;}
.w1200 {width: 100%; margin: auto; max-width: 1180px;}
.w1000 {width: 100%; margin: auto; max-width: 980px;}

#header{ position: fixed; top: 0;  padding: 17px 80px 16px; display: flex; justify-content: space-between; align-items: center; 
	width: 100%;       transition: all .3s ease-in-out 0s;   z-index: 1000; 
    border-bottom: 1px solid #a6a6a65c;
    /* backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px);  */ }

#logo a{display: flex; justify-content:flex-start; align-items: center;  font-weight: normal;  color: #ffffff; gap: 0 10px; } 
#logo p {font-size: 22px; display: inline-block;  line-height: 28px; font-weight: 700; }
#logo img {width: 50%; max-width: 140px; display: inline-block; margin-right: 10px; }

#logo h1 { width: 120px;  height: 53px;  background: url('./img/logow.png') no-repeat center center;
  background-size: contain;  /* 원본 비율 유지 */
  margin: 0;  text-indent: -9999px;        overflow: hidden;}
#header.show #logo h1,
#header.on #logo h1 {  background-image: url('./img/logo.png');}  


#header .menu_quick {width: 200px;   display: flex ; justify-content:flex-end;     align-items: center;}

#header .menu_quick a.btn_searchicon {position: relative; display: inline-block;  
    background-image: url(/img/icon_search.svg); background-size: 40px; background-position: center; background-repeat: no-repeat;
    width: 50px; height: 50px; 
    margin-right: 20px;   transition: all .2s ease-in-out 0s;}

.sub #header .menu_quick a.btn_searchicon,    
#header.show .menu_quick a.btn_searchicon,
#header.on .menu_quick a.btn_searchicon {background-image: url(/img/icon_searchb.svg);}


#header.hide {    transform: translateY(-100%);   }
#header.show { background-color: #ffffff; backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px);   }
#header.on {background-color: #ffffff; backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px);  }

#lnb {  flex: 1; display: flex;    justify-content: center;   align-items: center;  }
#lnb .menu{ display: flex;    justify-content: space-between;    align-items: center; }
#lnb .menu div {position: relative; margin: 0 40px;  display: flex;    align-items: center; }
#lnb .menu div a{position: relative; font-size: 22px; color: #ffffff; padding: 20px 0px; display: block; font-weight: 500; font-family: 'Paperlogy', sans-serif;
    transition: all .2s ease-in-out 0s; }
#lnb .menu > div > a:hover {color: #e6dfcf}
#lnb .menu > div > a:after {content: ""; width: 0%; height: 2px; background-color: #273fca; 
    position: absolute; bottom: 10px;  left: 50%;  transform: translateX(-50%);   transition: all .3s ease-in-out;}
#lnb .menu > div > a:hover:after{width: 100%;}

#lnb .menu div .submenu {display: none; position: absolute; top: 60px; left: 50%; 
    background: rgba(255,255,255,0.7); padding: 10px 15px; width: 160px; 
    transform: translateX( -50%); box-shadow: 3px 5px 21px 6px #0000001c;}
#lnb .menu div .submenu a {color: #333333; font-size: 16px; padding: 5px 0; font-weight: normal; 
    font-family:'Pretendard', sans-serif;}


#header.on #logo a,
#header.show #logo  a,
#header.on #lnb .menu div a, 
#header.show #lnb .menu div a {color: #333333;}

.sub #logo a { color: #333333; }
.sub #logo h1 {background-image: url('./img/logo.png') !important;}
.sub #header {background-color: #ffffff !important;}
.sub #header #lnb .menu div a  {color: #333333;}
.sub #header #lnb .menu div.on > a  {color: #283ba8; font-weight: 600;}




#btn_aside  { color: #ffffff;width: 50px; height: 40px; font-size: 20px;cursor: pointer; position: relative; }

#btn_aside span {    position: absolute;    top: -9999px;    left: -9999px;}
#btn_aside i{ position: absolute; right: 15px; width: 24px; height: 2px; background-color: #ffffff; 
    display: block;     transition: all .3s ease-in-out 0s;}
#btn_aside  i:nth-child(1){ top: 10px;}
#btn_aside  i:nth-child(2){ top: 20px;}
#btn_aside  i:nth-child(3){ top: 30px;}
#header.on #btn_aside i {background-color: #333333;}
.sub #header #btn_aside i {background-color: #333333;}
.show #btn_aside i{background-color: #333333;}

.scrollon #btn_aside  i {background-color: #222222;}

#btn_aside:hover i {background-color: var(--maincolor);}

#aslide { position: fixed;     top: 0%;    right: -30%;    width: 30%; max-width: 400px;   height: 100%;    z-index: 1200;    
    background-color: var(--maincolor);        transition: all 0.5s ease-in-out;        padding: 20px 0 20px 40px;   }
#aslide a {font-size: 24px; color: #ffffff; padding: 20px 0; display: block;font-family: 'Paperlogy', sans-serif; }

#aslide .submenu2 {max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;  padding: 0;}
#aslide .submenu2.show { max-height: 400px;  padding: 0px 0 20px 0;       }            
#aslide .submenu2 ul {display: grid; gap: 10px 20px; grid-template-columns: 1fr 1fr; }
#aslide .submenu2 a {font-size: 1.2em; color: #ffffff; padding: 5px 0 5px 20px; display: block; }
#aslide .has-submenu > a::after {content: '';position: absolute; width: 30px; height: 30px; 
    background: url(/img/chevron-right.svg) center; background-size: 100%;  right: 20px; transition: transform 0.3s ease;transform: rotate(90deg);}
#aslide  .has-submenu.active > a::after {transform: rotate(270deg);        }

#aslide .menu > div:hover .submenu2{display: block;}

#aslide h3{font-size: 30px; font-family: 'Montserrat', sans-serif; margin-bottom: 30px;}
.btn_alideclose{position: absolute; right: 20px; top: 0px; width: 50px; display: none; }
#aslide .btn_alideclose img {width: 100%;}

#aslide .ico svg {    transition: transform 0.3s ease-in-out; width: 50px; height: 50px; fill: #ffffff;}
#aslide .ico:hover svg {    transform: rotate(180deg);}

#aslide .adminlink {position: absolute; bottom: 40px; left: 40px;}
#aslide .adminlink a {font-size: 18px; padding: 5px; color: #ffffff5c; }
#aslide .adminlink div {font-size: 18px; padding: 5px; color: #ffffffab; padding-bottom: 10px; }
#aslide .menu {    position: relative; overflow-y: auto;}


@media (max-width: 1450px) {
    #header {padding-left: 40px; padding-right: 40px;}
    .width_inner{ padding-left: 30px; padding-right: 30px;}
    #lnb .menu div { margin: 0 30px;  }
 }

@media (max-width: 1240px) { 
    #logo p {font-size: 16px;}
    #lnb .menu div a{font-size: 18px;  }
    #lnb .menu div { margin: 0 20px;  }
    #aslide .btn_alideclose { padding: 0; width: 40px; top: 10px;}
    #aslide a {font-size: 20px;}
    #aslide h3 {font-size: 20px;}
    #aslide .bt{left: 4em; }
    #header {padding: 10px 30px;}
    #header .menu_quick {width: 150px;}

}


@media (max-width: 1000px) { 
    .width_inner{ padding-left: 15px; padding-right: 15px;}
    #btn_aside {display: inline-block;}
    #lnb { display: none;}
    #logo a {gap: 0 5px; }
    #logo{padding-left: 15px;}
    #logo h1 {line-height: 20px; width: 100px; height: 40px; }
    #logo  p {font-size: 14px; line-height: 20px; }
    #header .menu_quick a.btn_searchicon {margin-right: 0px; width: 36px; height: 36px; background-size: 100%;}   

    #btn_aside {display: block;}
    .boardpadding {padding: 2em 1em;}
    #aslide {width: 100%; max-width: 800px;    right: -100%;     padding: 30px 0 20px 30px;}
    #aslide .alidemenu h3 {font-size: 28px;}
    #aslide a {font-size: 22px;    padding: 10px 0; }
    #aslide .submenu2 a {font-size: 18px;}
    #aslide .adminlink {bottom: 25px; left: 30px;}

}    

/* 메인 */
.container {min-height: 600px;  }
.sub .container {margin-top: 100px; }

/* 하단 */
#tail {  background: #3d3d3d;   color: #ddd;   font-size: 14px;  line-height: 1.6;  padding: 70px 15px; font-family: "Montserrat",'Pretendard';  }
#tail .inner {margin: 0 auto;  display: flex;  justify-content: space-between;  align-items: flex-start;  gap: 40px;}
#tail .logo img {  max-height: 120px;}
#tail .addr {   display: grid;  grid-template-columns: auto 1fr;   grid-template-rows: auto auto;     grid-gap: 8px 15px;               
    align-items: center;  color: #ccc;}

#tail .inner div:nth-child(1){display: flex;  justify-content:flex-start;  align-items: center;  gap: 65px;}
#tail .addr div:first-child {  grid-column: 1;    grid-row: 1; }
#tail .addr div:nth-child(2) {  grid-column: 2;    grid-row: 1;   }  
#tail .addr div:nth-child(3) {  grid-column: 1 / span 2;   grid-row: 2; }
#tail .addr img {  max-height: 45px;  display: block;}
#tail .addr div:nth-child(2) {  font-weight: 600;  font-size: 15px;  color: #fff;}
#tail .addr p {  margin: 0; font-size: 14px; letter-spacing: 1px; padding: 0; }
#tail .addr h5{font-size: 22px ; font-weight: 600;     padding-top: 10px;}
#tail .addr p strong {font-size: 16px; width: 45px; display: inline-block; text-align: justify; }
#tail .addr p span {    display: inline-block;    margin: 0 13px;    width: 1px;    height: 14px;    background-color: #ffffff42;    vertical-align: text-bottom; }

#tail .addr a.admin {  color: #969696;  font-size: 12px;  margin-left: 10px;  text-decoration: none;}
#tail .addr a.admin:hover {  color: #fff;}
#tail .familsite {  display: flex;  gap: 15px;     flex-direction: column; max-width: 280px;}
#tail .familsite > div:nth-child(1){display: flex;  gap: 15px;  align-items: center;}
#tail .familsite a {display: flex; width: 40px; height: 40px; background-color: #666666;border-radius: 30px;
    justify-content: center;    align-items: center; transition: all 0.3s ease;}
#tail .familsite img {  width: 24px;  height: 24px;  opacity: 0.7;  transition: opacity 0.3s ease;}
#tail .familsite a:hover {background-color: #162c9d;}
#tail .familsite img:hover {  opacity: 1;}
#tail .familsite p {font-size: 13px; color: #a9a9a9;     word-break: keep-all;}

.btn_bottom {position: fixed; bottom: 20px; right: 40px;   z-index: 100; text-align: right;}
.btn_bottom a:nth-child(1) img {width: 84%; display: inline-block;   transition: all 0.4s linear;}
.btn_bottom a:nth-child(2) img{width: 50px; margin-top: 20px; margin-right: 7px;}
.btn_bottom .btn_kakao {  background-color: #FFDF2C;
    color: #333333;  
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s linear;
    padding: 0px 0px;
    width: 70px;
    height: 70px;
    overflow: hidden;
    white-space: nowrap;}
.btn_bottom .btn_kakao p { font-size: 16px;  width: 0;    opacity: 0;    transition: all 0.4s linear;    margin-left: 0;}

@media (max-width: 1240px) { 

}


@media (max-width: 768px) { 


    .btn_bottom  {right: 10px;}
    .btn_bottom .btn_kakao {width: 50px; height: 50px;}
}    

.scroll-to-top {position: fixed; cursor:pointer;  display: none;  bottom: 50px; right: 30px;  width: 50px; height: 50px; background: #555555 url(./img/icon_top.png) center center no-repeat; background-size: 50px;  }
.scroll-to-top:hover {background-color: #ed7070 ;}


/* 메인 index */
.main_slider  {height: 110vh; position: relative;  overflow: hidden; background-color: #ffffff;;  }
.main_slider .swiper-slide div.animated-area{width: 90%; max-width: 1480px; z-index: 2; position: relative; margin: auto; /*세로 가운데로 */ }
.mainslide1 div.animated-area {text-align: right;}
.mainslide2 .animated-area  {text-align: center;} 

.animated-area img.txt1 {margin-bottom: 20px; width: 40%; max-width: 200px;} 

.mainslide1 .img, .mainslide2 .img, .mainslide3 .img , .mainslide4 .img {position: absolute; top: 0; left: 0; width: 100%; 
    opacity: 0.9;
    height: 100%; 
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);}

.mainslide1 .img{background: url('img/mainslide01.jpg') center top  no-repeat; background-size:cover;  }
.mainslide2 .img{background: url('img/mainslide02.jpg')  center top no-repeat; background-size:cover; }
.mainslide3 .img{background: url('img/mainslide03.jpg')  center top no-repeat; background-size:cover; }

.main_slider h3 {color: #ffffff; font-size: 60px; padding: 0px; font-weight: 400;   letter-spacing: 2px;
     line-height: 88px;    text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3);     z-index: 2; font-family: 'Arita-buri';}
.main_slider h4 {color: #ffffff; font-size: 30px;  font-weight: 300;  padding-top: 20px;
      z-index: 2;    letter-spacing: 2px;    text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3);}
.main_slider h5 {color: #ffffff; font-size: 40px;  font-weight: 400;    z-index: 2;
        letter-spacing: 2px;    text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); margin-top: 20px;}
.mainslide3 .txt3 {padding-left: 10px;}


.main_slider .swiper-slide {position: relative;    display: flex;      align-items:flex-end;    justify-content: center; }
.main_slider .swiper-slide .img::before{ content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;   
     background-color: rgba(0, 0, 0, 0.60);     z-index: 1;}

.main_slider .swiper-slide-active .img { animation: mymove 2s ease-out;} 

@keyframes mymove{
	from { transform: scale(1.05); }
   to   { transform: scale(1); }
}

/* 메인 글씨 움직임 */

.main_slider .swiper-slide .animated-area .ani{opacity: 0; transform: translateY(50%); transition-delay: 1s ;} 
.main_slider .swiper-slide-active .animated-area .ani{opacity: 1; transform: translateY(0); transition: 1.5s; } 
.main_slider .swiper-slide-active .animated-area .txt1{transition-delay: 0.5s;}
.main_slider .swiper-slide-active .animated-area .txt2{transition-delay: 1s;}
.main_slider .swiper-slide-active .animated-area .txt3{transition-delay: 1.5s;}


.main_slider .swiperArrow { width: 90%; max-width: 1480px; position: absolute; left: 50%; 
    transform: translateX(-50%);     bottom: 170px;  
    height: 30px; z-index: 999;
    display: flex; justify-content:flex-end; align-items: center; }
.main_slider .swiper-pagination {    color: #ffffff; font-size: 16px; font-weight: 500; position: relative;
    text-align: center; letter-spacing : 5px;  font-family: 'Montserrat', sans-serif; width: fit-content;     min-width: 90px;
    padding-left: 10px;    padding-bottom: 5px;}

.main_slider .swiper-button-prev,
.main_slider .swiper-button-next{    position: relative; height: 30px; color: #ffffff; top: auto; }
.main_slider .swiper-button-next:after, 
.main_slider .swiper-button-prev:after {font-size: 20px;}

.wp_scrollDown {  position: absolute; top: calc(100vh - 100px); left: 50%; z-index: 900; transform: translateX(-50%);}
.animate-scrollDown {   width: 50px; height: 50px; border-radius: 30px; margin: auto; cursor: pointer;
        animation: scrollDown 1s ease-in-out 1s infinite alternate;
        background: #ffffff7c url(./img/arrow-down.svg) center center no-repeat ; background-size: 80%; }

@keyframes scrollDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); }
}


main .book {padding: 100px 0 100px; border-radius: 10vh 10vh 0 0; margin-top: -10vh; background-color: #ffffff; 
    overflow: hidden; z-index: 20;    position: relative; } 

@media (max-width: 1240px) { 
    #header .menu_quick a {font-size: 18px; padding: 5px 14px; margin-right: 10px;}
    #tail {padding: 50px 15px 100px;}
    #tail .inner {display: block;}
    #tail .inner > div:nth-child(1) {    justify-content: center; margin-bottom: 20px; gap: 40px;}
    #tail .addr h5 {font-size: 20px; padding-top:0;}
    #tail .familsite {max-width:none }
    #tail .familsite > div:nth-child(1) {max-width: 250px; margin: 30px auto 0;}
    #tail .familsite > div:nth-child(2) p{text-align: center; word-break: keep-all;}
}
@media screen and (max-width: 768px) { 
    #header {padding: 10px 0; margin-bottom: 70px;}
    #header .menu_quick a {font-size: 16px; padding: 5px 10px; margin-right: 0;}
    .main_slider  {height: 80vh; max-height: 700px;}
    .main_slider .swiper-slide {align-items: flex-start;}
    .main_slider .swiper-slide div.animated-area  {padding-top: 18%; margin:inherit; }
    .main_slider h3 {font-size: 28px;  line-height: 36px;  letter-spacing: 0px; } 
    .main_slider h4 {font-size: 20px;  letter-spacing: 0px; margin-top: 0px;} 
    .main_slider h5 {font-size: 20px; margin-top: 10px;  letter-spacing: 0px;} 
    .mainslide1 .img{background: url('img/mainslide01m.jpg') center top  no-repeat; background-size:cover;  }
    .mainslide2 .img{background: url('img/mainslide02m.jpg')  center top no-repeat; background-size:cover; }
    .mainslide3 .img{background: url('img/mainslide03m.jpg')  center top no-repeat; background-size:cover; }
    .mainslide4 .img{background: url('img/mainslide04m.jpg')  center top no-repeat; background-size:cover; }
    .main_slider .swiper-slide::before {opacity: 0.1; }
    .main_slider .swiperArrow {bottom: 80px; width: 95%;}
    .main_slider .swiper-slide.mainslide1  div.animated-area {position: absolute; bottom: 150px; right: 20px; }
    .main_slider .swiper-slide.mainslide2  div.animated-area {padding-top: 50%; }
    .main_slider .swiper-slide.mainslide3  div.animated-area {padding-top: 60%; }
    .animated-area img.txt1 {width: 30%;}
    .mainslide3 .txt3 {padding-left: 3px;}


    main .book {border-radius: 40px 40px 0 0; padding-top: 60px; padding-bottom: 50px;}
    #tail .inner {padding:0  5px;}
    #tail .inner > div:nth-child(1) {    flex-direction: column; gap: 20px; align-items: flex-start; }
    #tail .logo img {max-height: 80px;}
    #tail .addr {display: block;}
    #tail .addr h5 {font-size: 18px;}
    #tail .addr img {max-height: 40px;}
    #tail .addr p {font-size: 14px; word-break: keep-all; text-align: left;}
    #tail .addr p strong {font-size: 15px; display: block; padding: 5px 0;}
    #tail .addr p span {margin: 0; display: block;background-color: transparent; height: 1px;}
    #tail .addr p:nth-child(3){margin-bottom: 10px;}
    #tail .addr a.admin {margin-left: 0; margin-right: 10px;}
    #tail .familsite a {width: 40px; height: 40px;}
    #tail .familsite img {width: 24px; height: 24px;}
}


#section1 h3 {font-size: 48px; color: var(--maincolor); font-weight: 600; }
#section1 h3 span {font-size: 0.6em; color: #777777; font-weight: 500; }
#section1 h5 {font-size: 20px; color: #333333; font-weight: 600; margin: 20px 0 30px; }
#section1 h5 span{ font-weight: 400; }


@media (max-width: 1400px) { 
    #section1 h3 {font-size: 40px;}
}

@media (max-width: 1199px) { 
   #section1 h3 {font-size: 35px;}
   }

@media (max-width: 768px) { 
   #section1 h3 {font-size: 28px;}   
}

#section2 {display: flex; align-items: stretch;  gap: 0; background: #eceef1 url(/img/bg_ann.jpg) center no-repeat; 
    background-size: cover; }
#section2 div.img {flex: 0 0 36%; background:url(/img/main_anniversary.jpg) center top no-repeat; background-size: cover;
    padding: 100px 0 0 50px;}
#section2 h3 {font-size: 48px; color: #ffffff; font-weight: 700; text-shadow: 2px 2px 5px #0000005c; padding-bottom:10px;}   
#section2 h5 {font-size: 25px; color: #ffffff; font-weight: 400; text-shadow: 2px 2px 5px #0000005c;}   

#section2 div.deskbook  {flex: 0 0 64%;padding : 3em 2em 7em;   display: flex;
            flex-direction: column;            justify-content: center;            position: relative;}
#section2 div.deskbook  img {max-width: 210px; box-shadow: 3px 5px 21px 6px #0000001c; width: 100%;}
#section2 div.deskbook > div {display: flex;   gap: 80px;  margin-bottom: 40px; justify-content: center;
    width: 54%;  /*   max-width: 620px; */ position: relative; margin: 50px 0;}

#section2 div.deskbook > div::after{content: ""; width: 100%; height: 15px; background-color: #ffffff;
    position: absolute; left: 0; bottom: -15px;
    box-shadow: 3px 5px 10px 4px #0000001c;    ;}    

#section2 div.deskbook > div:first-child {margin-left: 14%; margin-right: auto; padding: 0 30px;}
#section2 div.deskbook > div:last-child {margin-left: auto;  margin-right: 12%; padding: 0 30px;margin-bottom: 0;}            
#section2 .book-item {text-decoration: none;display: block;text-align: center; transition: all 0.3s ease;}
#section2 .book-item p {font-size: 18px;color: #333;margin-bottom: 20px; font-weight: bold;     text-align: center;       }
#section2 .book-item:hover {transform: translateY(-15px);}

@media (max-width: 1400px) { 
    #section2 h3 {font-size: 40px; }   
    #section2 h5 {font-size: 22px; }   
    #section2 div.img {padding: 80px 0 0 30px;}
    #section2 div.deskbook > div {width: 72%;  gap: 70px;}
    #section2 div.deskbook > div:first-child {margin-left: 4%; }
    #section2 div.deskbook > div:last-child {margin-right: 7%;}            
}
@media (max-width: 1199px) { 
    #section2 h3 {font-size: 30px; }   
    #section2 h5 {font-size: 20px; }   
    #section2 h5 span{display: block; }   
    #section2 div.deskbook > div {width: 80%;  gap: 50px;}    
    #section2 div.img {padding: 50px 0 0 30px;}
}
@media (max-width: 768px) {
    #section2 h3 {font-size: 30px; }   
    #section2 h5 {font-size: 16px; }   
    #section2 {flex-direction: column;  }
    #section2 div.img {padding: 30px 20px;}
    #section2 div.deskbook {padding: 2em 1em 100px; }
    #section2 div.deskbook > div {width: 96%; gap: 30px; margin: 40px 0 40px; }
    #section2 div.deskbook > div:first-child{margin-left: auto; padding: 0 20px;}
    #section2 div.deskbook > div:last-child {margin-right: auto;  padding: 0 20px;}
    #section2 div.deskbook > div::after {height: 10px; bottom: -10px;}
    #section2 .book-item p {font-size: 16px;}
    #section2 div.deskbook img {max-width:none;}
}

#section3 {padding: 200px 15px 100px; }
#section3 h3 {font-size: 50px; color: var(--maincolor);  margin: 50px auto; text-align: center;     font-weight: 400;}
#section3 .search_area {display: flex; justify-content: space-between; align-items: center; gap: 14px;  padding-bottom: 30px; align-items: stretch;}
#section3 .search_area > div:nth-child(1) {flex: 1 1 auto; border: 1px solid #dddddd;    border-radius: 10px; overflow: hidden;}
#section3 .search_area > div:nth-child(2) {flex: 0 0 80px; }
#section3 .search_area > div:nth-child(3) {flex: 0 0 120px; }
#section3 .search_area  select{ border: 0px solid #666666; width: 200px; height: 60px; font-size: 20px; display: inline-block;  
    padding-left: 20px; border-right: 1px solid #dddddd;
  border-radius: 10px 0 0 10px; 
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
    background: url('/img/icon_select.svg') calc(100% - 5px) center no-repeat;  background-size: 20px;}
#section3 .search_area  select:focus {        border: 1px solid #dddddd;        outline: none;    }

#section3 .search_area  input[type=text]{ border: 0px solid #666666; width: calc(100% - 200px); height: 60px; 
    font-size: 20px; border-radius: 0 10px 10px 0;     padding: 0 20px; }
#section3 .search_area  input[type=text]:focus {        border: 1px solid #dddddd;        outline: none;    }    
#section3 .search_area #sch_submit {width: 100%; display: block; background-color: var(--maincolor); color: #ffffff; font-size:22px; 
    font-family: 'Paperlogy',sans-serif; border-radius: 10px; height: 100%; border: 0;}
#section3 .search_area #sch_submit:hover {background-color: #222222;}    
#section3 .search_area a {width: 100%; display: block; background-color: #999999 ; color: #ffffff; font-size:22px; 
    font-family: 'Paperlogy',sans-serif; border-radius: 10px; height: 100%; line-height: 58px;}

#section3 .search_detail { padding: 30px 0px;  display: none;  }
#section3 .search_detail ul{display: flex; justify-content: space-between; align-items: center; gap: 30px;}
#section3 .search_detail ul li {flex:1;}


#section3 .search_detail h5 {font-size: 22px; color: var(--maincolor); font-weight: 600; border-bottom: 1px solid #cacaca; padding-bottom: 10px; margin-bottom: 20px; }
#section3 .search_detail p {font-size: 20px; font-weight: 400; display: inline-block; padding-right: 20px; }

#section3 .search_detail  input[type=text]{ border: 1px solid #cbcbcb;  font-size: 18px; border-radius: 10px; padding: 10px;
    background: url(/img/icon_calendar.svg) calc(100% - 10px) center no-repeat; background-size: 24px; max-width: 200px; }
#section3 .search_detail  input[type=text]:focus {        border: 1px solid #dddddd;        outline: none;    }    

#section3 .search_detail input[type="radio"].checkmark {display:none; }
#section3 .search_detail input[type="radio"].checkmark + label {
	    border: 2px solid #e1e5e9; margin-bottom: 0;   border-radius: 50px;	padding: 10px 20px 10px 20px; 	min-width: 80px; font-weight: 400;
	font-size: 15px; 	display: inline-block;	cursor: pointer;	line-height: 20px;	color: #222222; margin-right: 3px;}
#section3 .search_detail input[type="radio"].checkmark:checked + label { background:var(--maincolor); color: #ffffff;     border: 2px solid #e1e5e9; position: relative; }
#section3 .search_detail .checkdiv {display: inline-block; margin: 0 10px;}

#section3 .search_detail select {       border: 1px solid #d0d3db;
    width: 150px;
    height: 40px;
    font-size: 16px;
    display: inline-block;
    padding-left: 10px;
    border-radius: 4px;
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(/img/icon_select.svg) calc(100% - 5px) center no-repeat;
    background-size: 20px;}



#section3 ul.tot_count {display: flex; justify-content: space-between; align-items: center; gap: 100px; margin: 50px 0% 0;
    border-top: #b4b4b4 solid 2px;    padding: 50px;}

#section3 ul.tot_count li {flex: 1;  text-align: center;}
#section3 ul.tot_count li img {width: 80px;}
#section3 ul.tot_count li > div {display: flex; justify-content: space-between; align-items: center; padding-top: 20px;}

#section3 ul.tot_count li p {font-size: 22px; color: #777777; text-align: left; font-weight: 600; }
#section3 ul.tot_count li p.tot{font-size: 34px; color: #233877; font-weight: 700; text-align: right; }


@media (max-width: 1300px) {
    #section3 h3 {font-size: 35px;}
    #section3 .search_area select {font-size: 18px; height: 40px;}
    #section3 .search_area input[type=text] {font-size: 18px; height: 40px; }
    #section3 .search_area #sch_submit,
    #section3 .search_area a{font-size: 18px; line-height: 38px;}
    #section3 .search_detail p {font-size: 16px;}
    #section3 .search_detail input[type=text] {width: 33%;}
    #section3 .search_detail input[type="radio"].checkmark + label {padding: 5px 10px;}



    #section3 ul.tot_count  {margin: 50px 15px;  gap: 50px; }
    #section3 ul.tot_count li > div {justify-content: space-evenly;}
}    
@media (max-width: 768px) {
    #section3 {padding: 20px 15px;}
    #section3 h3 {font-size: 25px; margin: 30px auto;}
    #section3 .search_area {gap: 5px;}
    #section3 .search_area #sch_submit, #section3 .search_area a {font-size: 14px; }
    #section3 .search_area > div:nth-child(2) {flex : 0 0 50px;}
    #section3 .search_area > div:nth-child(3) {flex : 0 0 50px;}
    #section3 .search_area .-btn.-xl {padding: 0 5px;}

    #section3 .search_detail {padding: 10px 0;}
    #section3 .search_detail p {padding-right: 12px;}
    #section3 .search_detail ul {flex-direction: column;     align-items: flex-start; gap: 10px;}
    #section3 .search_detail h5 {font-size: 18px;}
    #section3 .search_detail input[type=text] {background-size: 20px; padding: 5px;;}
    #section3 .search_detail .checkdiv {margin: 0;}
    #section3 .search_detail input[type="radio"].checkmark + label {font-size: 13px; padding: 4px 10px; min-width: 70px;}

    #section3 .search_area select {font-size: 14px; width: 100px; padding-left: 5px;}
    #section3 .search_area input[type=text] {font-size: 14px; width: calc(100% - 100px);}

    #section3 ul.tot_count  {margin: 10px auto;  gap: 30px 0; padding: 20px 0px 0;
     display: grid; grid-template-columns: 1fr 1fr;}
    #section3 ul.tot_count li img {width: 40px;}
    #section3 ul.tot_count li p {font-size: 14px;}
    #section3 ul.tot_count li p.tot{font-size: 18px;}
    #section3 ul.tot_count li > div {flex-direction: column; padding-top: 5px; gap: 5px;}
    #section3 .search_detail select {     width: 120px;    height: 30px;    font-size: 14px;}
    

}

/* 메인 미디어라이브러리 최근글 */

#section4 { padding: 150px 15px 100px; background: #f5f5f5 url(/img/bg_mainmedia.png) center top no-repeat; background-size: cover; min-height: 800px;}
#section4 h3 {font-size: 48px; color: var(--maincolor); font-weight: 700;  padding-bottom:20px; text-align: center;}   
#section4 h5 {font-size: 20px; color: #999999; font-weight: 400; text-align: center; }   

#section4 .latest-list {list-style: none;margin: 80px 0;    padding: 0;    display: grid;    gap: 30px;    grid-template-columns: 1fr 1fr 1fr 1fr;}
#section4 .latest-item {border-radius: 8px;  transition: transform 0.2s;}
#section4 .latest-item a {display : block; }
#section4 .latest-thumb {transition: transform 0.2s;  border-radius: 20px; box-shadow: 2px 2px 15px 5px #00000014; overflow: hidden;}
#section4 .latest-thumb img {    width: 100%;    display: block;    object-fit: cover;}
#section4 .latest-thumb:hover { transform: translateY(-10px); }
#section4 .latest-info {    padding: 10px; text-align: center;;}
#section4 .latest-info h5 {font-size: 18px; margin: 20px auto; color: #333333; word-break: keep-all; }
#section4 .latest-info p.-division {font-size: 14px;       padding: 6px 15px 4px;    color: #888888;
    width: fit-content;    background-color: #e9e9e9;    border-radius: 30px;    margin: 10px auto;}
#section4 .latest-info .icon {font-size: 11px; color: #ffffff; width: fit-content; padding: 4px 5px; border-radius: 2px; margin: auto;
    font-weight: 600; text-transform: uppercase}
#section4 .latest-info  .icon.img {background-color: #4f99c7;}
#section4 .latest-info  .icon.video {background-color: #f1956c;}
#section4 .latest-info  .icon.docs {background-color: #69a487;}
#section4 .latest-info  .icon.youtube {background-color: #f72954;}

#section4 .noimg{width: 100%; background: #eeeeee url(/img/no_img2.jpg) center no-repeat;
    position: relative;
    aspect-ratio: 4 / 2.97;}

@media (max-width: 768px) {
    #section4 {padding: 50px 0px;}
    #section4 h3{ font-size: 28px;}
    #section4 h5 {font-size: 16px;;}
    #section4 .latest-list { grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0;}
    #section4 .latest-info h5 {font-size: 14px;}
    #section4 .latest-thumb {border-radius: 8px;}
    #section4 .noimg {    background-size: 120%;}
}



/* ==========================  서브페이지 ============================== */

#title {font-size: 30px;  font-family: 'Paperlogy',sans-serif; font-weight: 600; margin: 30px auto 30px;  letter-spacing: 1px;}
#subtitle {font-size: 34px;  font-family: 'Paperlogy',sans-serif; font-weight: 500;   letter-spacing: 1px;}

.board_pt {padding-top: 50px;}

@media (max-width: 768px) {
    #title {font-size: 24px;  }
    .board_pt {padding-top: 0px;}
    #subtitle {font-size: 26px;  }
}

/* ================= 게시판 상단 ================= */
.head_subpage {position: relative;display: flex; justify-content: space-between; align-items: center;
    padding: 30px 0;}
.head_subpage>ul>li{position:relative; display:inline-block; vertical-align:middle; font-size: 18px;}
.head_subpage>ul>li:not(.home){margin-left:20px;}
.head_subpage>ul>li:not(.home):before{content:""; position:absolute; top:1px; left:-20px; width:22px; height:22px; 
    background:url(/img/tree_arrow.svg) no-repeat left center; background-size: 100%;}
.head_subpage>ul>li>a{display:block; color:#5D6064;}
.head_subpage>ul>li.home>a{overflow:hidden; width:24px; height:24px; 
    background:url(/img/icon_homeb.svg) no-repeat 0 0; background-size: 100%; text-indent:-2000px;}
.head_subpage > h2 {width: fit-content;}

.wrap_search {    position: relative;    padding: 15px 26px;    border: 1px solid #ECECEC; 
display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.wrap_search  #bo_sch{margin-bottom: 0;}
.wrap_search #bo_list_total p{font-size: 18px; font-weight: 400; display: inline-block;}
.wrap_search #bo_list_total span{font-weight: 600; display: inline-block; padding-left: 10px;}
.wrap_search select {
    border: 1px solid #d0d3db;
    width: 150px;
    height: 40px;    font-size: 16px;
    display: inline-block;
    padding-left: 10px;
    border-radius: 4px;
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(/img/icon_select.svg) calc(100% - 5px) center no-repeat;
    background-size: 20px;
}
.wrap_search  select:focus { border: 1px solid #9a9a9aff;    outline: none;    }
.wrap_search .frm_input {width: 200px;}
.wrap_search .-btn_search {background-color: #34353A; font-size: 16px; height: 40px; line-height: 38px; color: #ffffff;
    min-width: 100px; display: inline-block;  border-radius: 4px;}
.wrap_search .-btn_list {background-color: #777777; font-size: 16px; height: 40px; line-height: 40px; 
    color: #ffffff;    min-width: 100px; display: inline-block;  border-radius: 4px;}

@media (max-width: 768px) {
    .head_subpage {padding-top: 10px;}
    .wrap_search {padding: 7px; flex-direction: column;     align-items: flex-start;}
    .wrap_search #bo_list_total p {font-size: 16px;}
    .wrap_search select {width: 80px; height: 30px; font-size: 14px;}
    .wrap_search .frm_input {width: 42%;  height: 30px; font-size: 14px;}
    .wrap_search #bo_list_total span {padding-left: 0;}
    .wrap_search .-btn_search,
    .wrap_search .-btn_list {min-width: 50px; width: 80px; height: 30px; line-height: 28px; font-size: 14px;}
    .head_subpage>ul>li {display: none;}
    
}

/* ================= 미디어라이브러리 archive.php  ================= */

#archive h3{font-size: 24px;  background-color: #3c3c3c69; padding: 10px 20px; color: #ffffff; }
#archive h5{font-size: 18px; color: #757575; padding: 10px 0;}
#archive #subtitle span {font-size: 14px; padding: 3px 10px; background: #db5c5c; color: #ffffff;     
    vertical-align: super; }

@media (max-width: 768px) { 
    #archive h3 {font-size: 20px; padding: 5px 10px;}
    #archive #subtitle span {padding: 3px 5px;     vertical-align: middle;}

}