@charset "utf-8";

/* layout */
section {max-width: 1920px !important; margin: 0 auto;}
.inner {max-width: 1500px; margin: 0 auto;}
.slick-arrow,.slick-stop,
.slick-start,
.go-top {text-indent: -9999px;}

#multipleContentsDiv_hong_type10_69 {background-color: #f5f5f5;}

@media (max-width: 1640px) {
 #news .inner,
  #courseSearch .inner,
#courseInfo .inner,
#agriculture .inner,
#quick-logo-wrap {padding-left: 20px !important; padding-right: 20px !important;}
}

/* section03 강좌 검색 */
#courseSearch .inner {padding: 100px 40px 120px;}
#courseSearch .search-frames {position: relative;}
#courseSearch .title {margin-bottom: 35px;}
#courseSearch .title h3 {font-size: 40px; color:#121212; letter-spacing: -.05em; line-height: 1.5; font-family: "Gmarket Bold";}
#courseSearch .title span {color: #D6817C;}
#courseSearch .box {min-height: 267px; padding: 43px 50px; background: #ffffff url('../../images/main/courseSearch-bg.png') top 34px right no-repeat;}
#courseSearch .box .search-title {font-size: 40px; font-family: "Jalnan2"; color:#FFFFFF; line-height: 1.3; -webkit-text-stroke: 1px #333333; margin-bottom: 20px;}
#courseSearch .box .search-title span {position: relative; z-index: 0;}
#courseSearch .box .search-title span::before {z-index: -1; content: attr(data-content); position: absolute; left: 0; -webkit-text-stroke: 6px #333333;}
#courseSearch .box .search-title span.yellow {font-size: 45px;}
#courseSearch .box .search-title span.yellow em {color: #FABE00;}
#courseSearch .box .search-form {max-width: 343px;}
#courseSearch .box .search-form-wrap {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
#courseSearch .box .search-form .input {width: calc(100% - 103px);}
#courseSearch .box .search-form .input input {width: 100%; height: 44px; background: #fff url('../../images/main/ic-search.png') left 15px top 10px no-repeat; border: 1px solid #888888; border-radius: 22px; overflow: hidden; padding-left: 50px;}
#courseSearch .box .search-form .btn-submit {width: 93px; height: 44px; font-size: 16px; color: #fff; font-family:'Pretendard Bold'; background: #333333; border-radius: 22px; overflow: hidden;}

@media (max-width: 1023px) {
  #courseSearch .inner {padding: 0 0 120px;}
}
@media (max-width: 768px) {
  #courseSearch .box {min-height: auto; padding: 40px 50px;}
  #courseSearch .title h3 {font-size: 30px;}
  #courseSearch .box .search-title {font-size: 30px;}
  #courseSearch .box .search-title span.yellow {font-size: 38px;}
  #courseSearch .inner{padding: 0 0 60px;}
}
@media (max-width: 640px) {
  #courseSearch .box {background-position: top 6px right -45px; padding: 40px 30px;}
  #courseSearch .box .search-form {width: 95%;}
}

/* section04 문화센터 소개 바로가기 및 안내 */
#introduction {position: relative; background-color:#f5f5f5;}
#introduction .bg-box {width: 1710px; height: 660px; padding-top: 130px; padding-left: 210px; background-image: url('../../images/main/introduction-bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
#introduction .title {margin-bottom: 30px;}
#introduction .title h3 {font-size: 60px; letter-spacing: -.05em; line-height: 1.5;color:#666666;}
#introduction .title h3  spna{display:inline-block]}
#introduction .title h3 b {display: block; font-family: "Gmarket Medium"; color:#333333;}
#introduction .go-btn {display: inline-block; font-size: 20px; color:#333333; line-height: 1.5; font-family: "Gmarket Medium";}
#introduction .go-btn span {display: inline-block; width: 44px; height: 44px; vertical-align: middle; margin-left: 17px; background-color:#8EB9C2; border-radius: 50%; background-image: url('../../images/main/btn-arrow1.png'); background-position: center; background-repeat: no-repeat;}
#introduction ul {display: flex; position: absolute; right: 0; bottom: -80px; width: 1284px; z-index: 1;}
#introduction ul li {width: calc(100% / 3); background-position: right 47px top 53px; background-repeat: no-repeat;}
#introduction ul li:nth-child(1) {background-image: url('../../images/main/Introduce1.png');}
#introduction ul li:nth-child(2) {background-image: url('../../images/main/Introduce2.png');}
#introduction ul li:nth-child(3) {background-image: url('../../images/main/Introduce3.png');}
#introduction ul li a {display: block; width: 100%; height: 100%; padding: 50px; color:#fff;}
#introduction ul li:nth-child(1) {background-color:#275F76;}
#introduction ul li:nth-child(2) {background-color:#F8F0EE;}
#introduction ul li:nth-child(3) {background-color:#D6817C;}
#introduction ul li:nth-child(2) a {color:#333333;}
#introduction ul li span {display: block; width: 230px; min-height: 42.5px; line-height: 1.25; font-size: 17px;}
#introduction ul li strong {display: block; font-size: 35px; margin: 77px 0 10px; letter-spacing: -.05em; font-family: "Gmarket Medium";}
#introduction ul li p {font-size: 18px; letter-spacing: -.05em; line-height: 25px; font-family: "Noto Regular";}

@media (max-width: 1800px) {
  #introduction .bg-box {width: 90%;}
}
@media (max-width: 1640px) {
  #introduction .bg-box {padding-left: 40px;}
  #introduction ul {width: 984px;}
  #introduction ul li a {padding: 30px 20px 44px 50px;}
  #introduction ul li span {width: 130px; min-height: 63.75px;}
  #introduction ul li strong {margin-top: 30px;}
}
@media (max-width: 1280px) {
  #introduction .title h3 {font-size: 50px}
}

@media (max-width: 1023px) {
  #introduction .bg-box {width: 100%;}
  #introduction .title h3 {}
  #introduction ul {width: 100%;}
  #introduction ul li {background-position: right 47px top 33px;}
  #introduction ul li a {padding-left: 30px;}
  #introduction ul li span {font-size: 18px;}
  #introduction ul li strong {font-size: 33px; margin-bottom: 0; line-height: 1.2;}
}
@media (max-width: 768px) {
  #introduction .bg-box {height: 300px; padding-top: 70px; padding-right: 30px;}
  #introduction .title h3 {font-size: 30px;}
  #introduction .go-btn {font-size: 18px;}
  #introduction .go-btn span {width: 38px; height: 38px; margin-left: 5px; background-size: 50%;}
  #introduction ul {position: static; flex-direction: column; }
  #introduction ul li {width: 100%;}
  #introduction ul li a {padding: 35px 50px;}
  #introduction ul li span {width: 100%; min-height: auto;}
  #introduction ul li strong {margin-bottom: 10px; margin-top: 20px;}
  #introduction ul li p {}
}
@media (max-width: 640px) {
  #introduction .bg-box {padding-top: 70px; padding-left: 30px;}
  #introduction .title h3 {font-size: 25px; letter-spacing: -2px;}
  #introduction .title h3 span {;}
  #introduction ul li {background-position: right 30px top 33px;}
  #introduction ul li a {padding: 45px 30px;}
  #introduction ul li span {width: 80%;}
}

/* section05 QUICK MENU */
#agriculture {position: relative;}
#agriculture:before {content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color:#708B86;}
#agriculture .inner {padding: 211px 0 225px;}
#agriculture .title {position: relative; width: 900px; margin: 0 auto; background-image: url('../../images/main/&.png'); background-repeat: no-repeat; background-position: left 12px top 129px;}
#agriculture .title h3 {font-size: 80px; line-height: 1.2; color:#DBD9CD; font-family: "Montserrat Bold"; text-transform: uppercase;}
#agriculture .title h3 span {display: block;}
#agriculture .title h3 span:nth-child(2) {text-align: right;}
#agriculture .title h3 span:last-child {margin-left: 207px;}
#agriculture .title p {position: absolute; right: -136px; bottom: 11px; font-size: 18px; line-height: 25px; letter-spacing: -.05em; color:#DBD9CD; font-family: "Noto Regular";}
#agriculture .title p i {display: block;}
#agriculture ul {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 112px;}
#agriculture ul li {position: relative; width: calc((100% / 4) - 40px); height: 440px; border-radius: 20px; overflow: hidden;}
#agriculture ul li::before {content: ""; position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none;}
#agriculture ul li a {display: block; width: 100%; height: 100%; padding: 50px; transition:.2s;}
#agriculture ul li:nth-child(1) a {background-color: #F5EBEC;}
#agriculture ul li:nth-child(2) a {background-color: #F5F5E8;}
#agriculture ul li:nth-child(3) a {background-color: #EAF4EC;}
#agriculture ul li:nth-child(4) a {background-color: #ECF2F5;}
#agriculture ul li:hover::before {transform: rotateZ(5deg);}
#agriculture ul li::before {right: 50px; bottom: 30px; width: 140px; height: 140px; transition: cubic-bezier(0.1, 0.83, 0.32, 1.28) all 1s;}
#agriculture ul li:nth-child(1)::before {background-image: url('../../images/main/agriculture1.png');}
#agriculture ul li:nth-child(2)::before {background-image: url('../../images/main/agriculture2.png');}
#agriculture ul li:nth-child(3)::before {background-image: url('../../images/main/agriculture3.png');}
#agriculture ul li:nth-child(4)::before {background-image: url('../../images/main/agriculture4.png');}
#agriculture ul li .tit-box span {display: block; font-size: 14px; font-family: "Gmarket Bold";}
#agriculture ul li .tit-box strong {display: block; font-size: 28px; line-height: 2; color:#333333; font-family: "Gmarket Bold"; margin-top: 6px;}
#agriculture ul li .view-more {position: relative; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; font-family: "Gmarket Bold"; margin-top: 20px;}
#agriculture ul li .view-more::after {content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 10px;}
#agriculture ul li:nth-child(1) .view-more::after {background: url('../../images/main/agriculture-arrow1.png') no-repeat center/contain;}
#agriculture ul li:nth-child(2) .view-more::after {background: url('../../images/main/agriculture-arrow2.png') no-repeat center/contain;}
#agriculture ul li:nth-child(3) .view-more::after {background: url('../../images/main/agriculture-arrow3.png') no-repeat center/contain;}
#agriculture ul li:nth-child(4) .view-more::after {background: url('../../images/main/agriculture-arrow4.png') no-repeat center/contain;}

#agriculture ul li .color1 {color:#C9B7B7;}
#agriculture ul li .color2 {color:#D4D4B4;}
#agriculture ul li .color3 {color:#B3C7AF;}
#agriculture ul li .color4 {color:#B5CDE0;}

@media (max-width: 1280px) {
  #agriculture .inner {padding: 140px 0 200px;}
  #agriculture ul li {width: calc((100% / 2) - 20px); margin-top: 30px;}
  #agriculture .title p {position: unset; text-align: center; font-size: 22px; margin-top: 15px; line-height: 1.5;}
}

@media (max-width: 1023px) {
  #agriculture .title {width: 650px; background-size: 100px;}
  #agriculture .title h3 {font-size: 70px;}
  #agriculture .title h3 span:last-child {margin-left: 144px;}
  #agriculture ul {flex-wrap: wrap; margin-top: 40px;}
  #agriculture ul li::before {right: 20px;}
  #agriculture ul li {width: calc((100% / 2) - 15px);}
}
@media (max-width: 768px) {
  #agriculture .title {width: 100%; background-position: left 12px bottom 10px; background-size: 80px;}
  #agriculture .title h3 {font-size: 56px; white-space: nowrap;}
  #agriculture .title h3 span:last-child {margin-left: 0;}
  #agriculture ul {flex-direction: column;}
  #agriculture ul li {width: 100%; height: auto; margin-top: 20px;}
  #agriculture ul li:first-child {margin-top: 0;}
  #agriculture ul li::before {width: 100px; height: 100px;}
  #agriculture ul li a {padding: 40px;}
  #agriculture .inner {padding: 50px 0 80px;}
  #agriculture .title p {font-size: 20px; margin-top: 30px; letter-spacing: -2px;}
  #agriculture ul li .tit-box strong {font-size: 24px;}
  #agriculture ul li .view-more {margin-top: 10px;font-size: 16px;}
}
@media (max-width: 640px) {
  #agriculture .title h3 {font-size: 48px;}
  #agriculture ul li::before {width: 70px; height: 70px; top: 50%; right: 20px; transform: translateY(-50%);}
  #agriculture ul li a {padding: 40px 30px;}
  #agriculture ul li .tit-box strong {font-size: 26px;}
  #agriculture .title p {font-size: 18px;}
  #agriculture ul li .tit-box span{ font-size: 18px;}
}

/* scroll effect */
@media (min-width: 1200px) {
  #multipleDiv_hong_type10_69 #news .news-frames{top:100px;opacity:0;transition:all ease 1s;}
  #multipleDiv_hong_type10_69.scroll #news .news-frames{top:0;opacity:1;}

  #multipleDiv_hong_type10_69 #news .info ul{transform:scale(0);transition:all ease 1s;}
  #multipleDiv_hong_type10_69.scroll #news .info ul{transform:scale(1);transition-delay:1.5s;}
  
  #multipleDiv_hong_type10_69 #courseSearch .search-frames{top:100px;opacity:0;transition:all ease 1s;}
  #multipleDiv_hong_type10_69.scroll #courseSearch .search-frames{top:0;opacity:1;}

  #multipleDiv_hong_type10_69 #courseSearch .box{transform:scale(0);transition:all ease 1s;}
  #multipleDiv_hong_type10_69.scroll #courseSearch .box{transform:scale(1);transition-delay:1.5s;}

  #multipleDiv_hong_type10_71 .bg-box{position:relative;left:-100%;opacity:0;transition:all ease 1.5s;}
  #multipleDiv_hong_type10_71.scroll .bg-box{left:0;opacity:1;}

  #multipleDiv_hong_type10_71 #introduction .title h3{position:relative;top:100px;opacity:0;transition: all ease 1s;}
  #multipleDiv_hong_type10_71.scroll #introduction .title h3{top:0;opacity:1;transition-delay:1.25s;}

  #multipleDiv_hong_type10_71 #introduction .go-btn{position:relative;top:50px;opacity:0;transition: all ease 1s;}
  #multipleDiv_hong_type10_71.scroll #introduction .go-btn{top:0;opacity:1;transition-delay:1.5s;}

  #multipleDiv_hong_type10_71 #introduction ul{opacity:0;transform:translateX(100%);transition: all ease 1.5s;}
  #multipleDiv_hong_type10_71.scroll #introduction ul{opacity:1;transform:translateX(0);transition-delay:1.5s;}

  #multipleDiv_hong_type10_73{overflow:hidden;}
  #multipleDiv_hong_type10_73 #agriculture:before{top:-100%;transition:all ease 2.5s;opacity:.5;}
  #multipleDiv_hong_type10_73.scroll #agriculture:before{top:0;opacity:1;}

  #multipleDiv_hong_type10_73 #agriculture .title h3 span{opacity:0;transition:all ease 1s;position:relative;}
  #multipleDiv_hong_type10_73 #agriculture .title h3 span:nth-child(1),
  #multipleDiv_hong_type10_73 #agriculture .title h3 span:nth-child(3){left:-100px;}
  #multipleDiv_hong_type10_73 #agriculture .title h3 span:nth-child(2){right:-100px;}

  #multipleDiv_hong_type10_73.scroll #agriculture .title h3 span:nth-child(1){opacity:1;left:0;transition-delay:.25s;}
  #multipleDiv_hong_type10_73.scroll #agriculture .title h3 span:nth-child(2){opacity:1;right:0;transition-delay:.5s;}
  #multipleDiv_hong_type10_73.scroll #agriculture .title h3 span:nth-child(3){opacity:1;left:0;transition-delay:.75s;}

  #multipleDiv_hong_type10_73 #agriculture .title p{opacity:0;transition:all ease 1s;}
  #multipleDiv_hong_type10_73.scroll #agriculture .title p{opacity:1;transition-delay:1s;}

  #multipleDiv_hong_type10_73 #agriculture li{transition:all ease 1s;transform:scale(0);}
  #multipleDiv_hong_type10_73.scroll #agriculture li{transform:scale(1);}
  #multipleDiv_hong_type10_73.scroll #agriculture li:nth-child(1){transition-delay:1.75s;}
  #multipleDiv_hong_type10_73.scroll #agriculture li:nth-child(2){transition-delay:1.95s;}
  #multipleDiv_hong_type10_73.scroll #agriculture li:nth-child(3){transition-delay:2.15s;}
  #multipleDiv_hong_type10_73.scroll #agriculture li:nth-child(4){transition-delay:2.35s;}

  #multipleDiv_hong_type10_76 #courseInfo .title h3{position:relative;top:50px;opacity:0;transition:all ease 1s;}
  #multipleDiv_hong_type10_76.scroll #courseInfo .title h3{top:0;opacity:1;}

  #multipleDiv_hong_type10_76 #courseInfo .courseInfo-slider li{transition:all ease 1s;transform:scale(0);}
  #multipleDiv_hong_type10_76.scroll #courseInfo .courseInfo-slider li{transform:scale(1);}

  #multipleDiv_hong_type10_76 #courseInfo .prevnext button{opacity:0;transition:all ease 1s;}
  #multipleDiv_hong_type10_76.scroll #courseInfo .prevnext button{opacity:1;transition-delay:1s;}

  .edit #multipleDiv_hong_type10_69 #news .news-frames,
  .edit #multipleDiv_hong_type10_69 #news .info li,
  .edit #multipleDiv_hong_type10_71 .bg-box,
  .edit #multipleDiv_hong_type10_71 #introduction .title h3,
  .edit #multipleDiv_hong_type10_71 #introduction .go-btn,
  .edit #multipleDiv_hong_type10_71 #introduction ul,
  .edit #multipleDiv_hong_type10_73 #agriculture:before,
  .edit #multipleDiv_hong_type10_73 #agriculture .title h3 span,
  .edit #multipleDiv_hong_type10_73 #agriculture .title p,
  .edit #multipleDiv_hong_type10_73 #agriculture li,
  .edit #multipleDiv_hong_type10_76 #photo-gallery .title h3,
  .edit #multipleDiv_hong_type10_76 #photo-gallery .list li{opacity:1;transform:none;left:unset;right:unset;top:unset;}
}