@charset "utf-8";

/********************
Layout
********************/
body {background: #FFF8F5;}

#multipleContentsDiv_hong_type6_5,
#courseInfo .inner,
#multipleContentsDiv_devculture_1425,
#multipleContentsDiv_hong_type6_6,
#multipleContentsDiv_devculture_1590 {max-width: 1600px; margin: 0 auto;}

#multipleContentsDiv_devculture_1223,
#multipleContentsDiv_devculture_1425,
#multipleContentsDiv_devculture_1590,
#multipleContentsDiv_hong_type6_8 {padding-top: 150px;}

@media (max-width:1640px) {
    #multipleContentsDiv_hong_type6_5,
    #courseInfo .inner,
    #multipleContentsDiv_devculture_1425,
    #multipleContentsDiv_hong_type6_6,
    #multipleContentsDiv_devculture_1590 {max-width: 100%; padding-left: 20px !important; padding-right: 20px !important;}
}

/********************
section03 강좌 검색
********************/
#courseSearch {position: relative; height: 100%;}
#courseSearch .search-frames {position: relative;}
#courseSearch .title {margin-bottom: 30px;}
#courseSearch .title h3 {font-size: 40px; color:#333333; font-family:'S-CoreDream-6Bold';line-height: 1.1;}
#courseSearch .box {height: 260px; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 60px 60px; background: url('../../images/main/courseSearch-bg.jpg') no-repeat center / cover;}
#courseSearch .box .search-title {font-size: 40px; font-family: "Jalnan2"; color:#FFFFFF; line-height: 1.5; -webkit-text-stroke: 1px #393931;}
#courseSearch .box .search-title span {position: relative; display: block; z-index: 0;}
#courseSearch .box .search-title span::before {z-index: -1; content: attr(data-content); position: absolute; left: 0; -webkit-text-stroke: 6px #393931;}
#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; height: 48px;}
#courseSearch .box .search-form .input {width: calc(100% - 103px); height: 100%; border: 3px solid #FABE00; box-sizing: border-box;}
#courseSearch .box .search-form .input input {width: 100%; height: 100%; padding: 0 10px;}
#courseSearch .box .search-form .input input::placeholder {color: #88644C;}
#courseSearch .box .search-form .btn-submit {width: 56px; height: 100%; background: #FABE00 url('../../images/main/ic-search.png') center no-repeat; text-indent: -9999px;}
@media (max-width: 1024px) {
  #courseSearch .title h3{text-align: center;}
  .wrap_webzine > ul{justify-content: center;}
}
@media (max-width: 768px) {
  #courseSearch .title h3 {font-size: 34px;}
  #courseSearch .box {height: 300px; padding: 60px 40px;}
  #courseSearch .box .search-title {font-size: 30px;}
  #courseSearch .box .search-title span.yellow {font-size: 38px;}
  
  #multipleContentsDiv_devculture_1223,
#multipleContentsDiv_devculture_1425,
#multipleContentsDiv_devculture_1590,
#multipleContentsDiv_hong_type6_8 {padding-top: 100px;}
}
@media (max-width: 500px) {
  #courseSearch .box .search-title {font-size: 30px;}  
  #courseSearch .box .search-form {width: 95%;}
}

/********************
SCROLL EFFECT
********************/
@media all and (min-width:1024px){
    #courseInfo {opacity: 0; top: 50px; transition: all ease 1s;}
    #courseInfo.scroll {opacity: 1; top: 0; transition-delay: .5s;}

    .wrap_webzine {opacity: 0; top: 50px;transition: all ease 1s;}
    .wrap_webzine.scroll {opacity: 1; top: 0; transition-delay: .5s;}

    #courseSearch {opacity: 0; top: 50px; transition: all ease 1s;}
    #courseSearch.scroll {opacity: 1; top: 0; transition-delay: .5s;}

    .wrap_quick {opacity: 0; top: 50px; transition: all ease 1s;}
    .wrap_quick.scroll {opacity: 1; top: 0;}

    .wrap_quick ul li {transform: scale(0); transition: all ease 1s;}
    .wrap_quick.scroll ul li {transform: scale(1);}
    .wrap_quick.scroll ul li:nth-child(1) {transition-delay: .25s;}
    .wrap_quick.scroll ul li:nth-child(2) {transition-delay: .45s;}
    .wrap_quick.scroll ul li:nth-child(3) {transition-delay: .65s;}
    .wrap_quick.scroll ul li:nth-child(4) {transition-delay: .85s;}

    .edit #courseInfo,
    .edit .wrap_webzine,
    .edit #courseSearch,
    .edit .wrap_quick {opacity:1;position:initial;transform:none;}
}