@charset "utf-8";
@import url('base.css');

body{letter-spacing:-.4px;}
.sr-only {     position: absolute;  overflow: hidden;  width: 1px;  height: 1px;  margin: -1px;   padding: 0;   border: 0;   clip: rect(0, 0, 0, 0);}
.container{ position:relative; margin:0 auto; padding-left:2rem; padding-right:2rem; }
@media all and (min-width:1401px) {
	.container{  max-width:calc(1400px + 4rem); }

}




#skip {width: 100%;left: 0;top: 0;  z-index: 105;}
#skip a {display: block;height: 1px;width: 1px;margin-bottom: -1px;overflow: hidden;font-size: 0.84rem;color: #fff;background: #db2950;white-space: nowrap;text-align: center;transition: all 0.2s ease;}
#skip a:focus,
#skip a:active {height: auto;width: auto;padding: 7px;margin-bottom: 10px;}


.m-open { overflow:hidden; }


#wrap { background:url(../images/bg_wrap.jpg) no-repeat top center / cover }


.head-logo { padding-top:80px; padding-bottom:20px; text-align: center; font-size:5.5rem; color:#fff; line-height:1.3;}
.head-logo span {display:block; font-family: 'Noto Serif KR'; font-size:6.5rem;}



#wrap-footer{ background-color:rgba(0, 0, 0, 0.2); margin-top:7rem; }
#wrap-footer #footer{position: relative; padding:4rem 7rem; text-align:center; color:#fff;}
#wrap-footer .link{margin-bottom: 20px;}
#wrap-footer .link ul{display:flex;flex-wrap: wrap;    justify-content: center;}
#wrap-footer .link li{position:relative;padding:0.5rem 2rem;}
#wrap-footer .link li:first-child { padding-left:0;}
#wrap-footer .link li a{position: relative;color: #fff; font-size:1.8rem;}
#wrap-footer .link li a span { color:#f8d3ce }
#wrap-footer .address { color:#fff;line-height:1.6; font-size:1.6rem;}



.black-bg {display: none; position: fixed; z-index: 190; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.black-bg.on {display: block;}

#wrap-content { display:flex;  padding-bottom:150px; margin-top:4rem; }
body.main #wrap-content { display:block;padding-bottom:0; }
#sub-content #content {  }
.cont-basic { padding-top:7rem}

.flower-wrap {  position: relative; text-align:center; width: 700px;margin:0 auto;}
.flower-wrap img.bg { max-width: 700px;}
.flower-box {}
.flower-box .flower {
    width:70px;
   height:69px;
    position:absolute;
    background:transparent;
  background:url(../images/flower_gray.svg) no-repeat center center / contain;
}


.flower-box .flower.on{

}
.flower-box .flower.on::after {
    content:"";
    display:block;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    left: -1px;
    top: -1px;
    background:url(../images/flower_red.svg) no-repeat center center / contain;
    animation: fill-flower 1s linear;
    position: relative;
}
@keyframes fill-flower {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1.1;
    }

}


.flower-box .flower.size2 { width:50px; height:49px; }
.flower-box .flower.size3 { width:35px; height:34px; }

.flower-box .flower { }
.rotate0 { }
.rotate45 { transform: rotate(45deg); }
.rotate45- { transform: rotate(-45deg); }


#flower1 { left:50%; margin-left:-35px}
#flower2 { left:50%; margin-left:-110px; top:20px}
#flower3 { left:50%; margin-left:-170px; top:70px}
#flower4 { left:120px; top:120px}
#flower5 { left:52px; top:160px}
#flower6 { left:0px; top:215px}
#flower7 { left:0; top:295px}
#flower8 { left:40px; top:365px}
#flower9 { left:55px; top:440px}
#flower10 { left:75px; top:520px}
#flower11 { left:120px; top:590px}
#flower12 { left:195px; top:610px}
#flower13{ left:270px; top:600px}
#flower14 { left:345px; top:595px}
#flower15 { right:210px; top:610px}
#flower16 { right:135px; top:600px}
#flower17 { right:90px; top:540px}
#flower18 { right:65px; top:460px}
#flower19 {right: 40px;top: 384px;}
#flower20 { right:10px; top:310px}
#flower21 { right:5px; top:230px}
#flower22 { right:50px; top:165px}
#flower23 {right: 110px;top: 120px;}
#flower24 { right:180px; top:80px}
#flower25 { right:240px; top:25px}
#flower26 { left:330px; top:75px}
#flower27 { left:255px; top:95px}
#flower28 { left:195px; top:145px}
#flower29 { left:155px; top:205px}
#flower30 { left:112px; top:225px}
#flower31 { left:68px; top:255px}
#flower32 {  left:122px; top:270px}
#flower33 { left:105px; top:325px}
#flower34 { left:74px; top:318px}
#flower35 { left:120px; top:400px}
#flower36 { left:125px; top:475px}
#flower37 { left:145px; top:523px}
#flower38 { left:225px; top:535px}
#flower39 { left:300px; top:535px}
#flower40 { left:355px; top:480px}
#flower41 { left:380px; top:556px}
#flower42 { right:228px; top:552px}
#flower43 { right:170px; top:550px}
#flower44 { right:135px; top:420px}
#flower45 { right:195px; top:475px}
#flower46 { right:137px; top:495px}
#flower47 { right:107px; top:345px}
#flower48 { right:142px; top:295px}
#flower49 { right:262px; top:300px}
#flower50 { left:250px; top:255px}
#flower51 { left:315px; top:300px}
#flower52 { left:332px; top:355px}
#flower53 { left:300px; top:428px}
#flower54 { left:250px; top:438px}
#flower55 {left: 205px;top:435px}
#flower56 {left: 180px;top:472px}
#flower57 {left: 230px;top: 485px;}
#flower58 {left: 350px;top: 445px;}
#flower59 {left: 400px;top: 425px;}
#flower60 {left: 290px;top: 495px;}
#flower61 {left: 380px;top: 495px;}
#flower62  { left:195px; top:280px}
#flower63  { left:230px; top:230px}
#flower64  { left:263px; top:197px}
#flower65 { left:310px; top:157px}
#flower66 { left:370px; top:157px}
#flower67 { left:415px; top:157px}
#flower68 { right:176px; top:162px}
#flower69 { right:250px; top:102px}
#flower70 {right: 120px;top: 200px;}
#flower71 { right:80px; top:250px}
#flower72 { right:150px; top:255px}
#flower73 { right:90px; top:315px}
#flower74 { left: 334px; top: 490px;}


.btn-flower-page {
    width:65px;
    height:65px;
    background-color:rgba(255, 255, 255, 0.5);
    border-radius: 100%;;
    position: absolute;
    top:50%;
    font-size:4rem;
    z-index:10;
}
.btn-flower-page.btn-prev {  left:-100px; }
.btn-flower-page.btn-next {  right:-100px; }
/*.flower-box .flower:hover {
    animation:animateBackground 1s infinite;
}
@keyframes animateBackground {
    0%{
        background:url(../images/flower_gray.svg) no-repeat center center / contain;
    }
   100%{
    background:url(../images/flower_red.svg) no-repeat center center / contain;
    }
    }

*/
.section02 {
    position: relative;
    padding-top:145px
}
.section02-flower {
    width:150px;
    height:145px;
     position:absolute;
    background:url(../images/flower_red.svg) no-repeat center center / contain;

    left:50%;
    margin-left:-75px;
    top:0;
    opacity: 0.2;

}
.section02-flower.on {
    animation: move-and-shrink 3s ease forwards;
}
.section02-flower.on2 {
    animation: fill-flower2 2s linear forwards;
}
.sect ion02-flower.on2::after {
    content:"";
    display:block;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    left: -1px;
    top: -1px;
    background:url(../images/flower_red.svg) no-repeat center center / contain;
    animation: fill-flower2 2s linear forwards;
    position: relative;
    opacity: 1;
}
@keyframes fill-flower2 {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }

}
@keyframes move-and-shrink {
    0% {
        top: 0;
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        top: -630px;
        transform: scale(1);
        opacity:1;
    }
   70% {
        top: -630px;
        transform: scale(1);
        opacity:0;
    }
    90% {
        top: 50px;
        transform: scale(1);
        opacity:0;
    }
    100% {
        top: 0;
        transform: scale(1);
        opacity: 0.2;
    }
}



.title-text { margin-bottom:5rem; padding-top:2rem; font-family: 'Noto Serif KR'; color:#fff; text-align: center; }
.title-text h3 { font-size:3.2rem; line-height:1.2}
.title-text h3 b {font-size: 5rem; color:#fff000}
.title-text p { font-size:2rem; padding-top:2rem;}

.bbs-list {

}
.bbs-list .box {position: absolute;  padding:80px 30px 30px; text-align:center; width:292px; height:297px; background:url(../images/bbs_box_flower.png) no-repeat top center;}
.bbs-list .box p { padding-top:20px; font-weight: 600;;}
.bbs-list .box span {padding-top:15px; display:block; font-family: 'Noto Serif KR';  }
.bbs-list .box.box1 { left:50px; top:170px; }
.bbs-list .box.box2 {  left:230px; top:410px; }
.bbs-list .box.box3 { left:50px; top:650px; }
.bbs-list .box.box4 { right:50px; top:170px;}
.bbs-list .box.box5 {right:230px; top:410px; }
.bbs-list .box.box6 { right:50px; top:650px;}

/* 작성 */
.form_write {

    position: relative;
    max-width:800px;
    margin:0 auto;
    background-color:#fff;
    border-radius: 3rem;
    padding:3rem;
}
.form_write > .form_group.inCols {
    margin: 0 -20px;
}

.form_write > .form_group + .form_group {
    margin-top: 10px;
}

.form_write > .form_group > [class^="col-"] {
    padding-right: 20px;
    padding-left: 20px;
}

.form_write > .form_group .form_label {
    margin-bottom: 10px;
}

.form_write > .form_group .col-12 {
    margin-top: 10px;
}

.form_write > .form_group .col-12:first-child {
    margin-top: 0;
}

.form_write .form_mail {
    position: relative;
}

.form_write .form_mail .input_mail {
    padding-right: 40px;
}

.form_write .form_mail .text_mail {
    position: absolute;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 55px;
}

.form_write .form_check input + .form_label, .form_write .form_check1 input + .form_label {
    margin: 0;
}
.form_write .btn3 { 
    width:230px;
    border-radius:70px;
    position: relative;
}
.form_write .btn3::before {
    width:57px;
    height:55px;
    background:url(../images/img_btn_flower.png) no-repeat center center / contain;
    position: absolute;
    top:0;
    left:-10px;
    content:"";
}
.form_write .btn3 span { padding-left:15px;}


/* 페이징 */
.paging{margin-top:30px;text-align:center}
.paging ul{display:flex;align-items:center;justify-content:center;-ms-align-items:center;-ms-justify-content:center}
.paging li{margin:0 3px}
.paging i::before {  display:inline-block; font-family: "remixicon";     font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; font-size:1.8rem; }
.paging .first i::before { content: "\f363"; }
.paging .prev i::before  { content: "\ea64"; }
.paging .next i::before  { content: "\ea6e"; }
.paging .last i::before  { content: "\f365"; }

.paging a{display:flex;align-items:center;justify-content:center;-ms-align-items:center;-ms-justify-content:center;width:30px;height:30px;border-radius:100%;text-align:center;background:transparent;color:#fff;cursor:pointer;}
.paging a.active{background:#6d140e;color:#fff !important}



@media all and (max-width:1800px) {
    .bbs-list .box.box1 { left:20px;  }
    .bbs-list .box.box2 { left:150px; }
    .bbs-list .box.box3 { left:20px;  }
    .bbs-list .box.box4 { right:0px; }
    .bbs-list .box.box5 { right:130px; }
    .bbs-list .box.box6 { right:0px;}
}

@media all and (min-width:1601px) {
    .bbs-list .box.box7,
    .bbs-list .box.box8,
    .bbs-list .box.box9,
    .bbs-list .box.box10,
    .bbs-list .box.box11,
    .bbs-list .box.box12{display:none}

   .bbs-list-wrap .paging {
        display:none;
    }

}

@media all and (max-width:1600px) {
    .section01 .paging {
        display:none;
    }
    .bbs-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-top:6rem;
    }
    .bbs-list .box {
        position: relative;
        top:inherit !important;
        left:inherit !important;
        right:inherit !important;
    }

}

@media all and (max-width:1400px) {
    #wrap-footer #footer{padding:4rem 2rem;}
}






@media all and (max-width:1026px) {
    .flower-wrap {
        display:none;
    }
    body.main #wrap-content {
        margin-top:0;
        padding-left:20px;
        padding-right:20px;
    }
    #content{
        padding-left:20px;
    }

}

@media all and (max-width:768px) {
    .head-logo {
        font-size:3.2rem;
    }
    .head-logo span {
        font-size:4rem;
    }
    .title-text h3 {
        font-size:2.6rem;
    }

}