@font-face {
    font-family: 'S-CoreDream-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }	
        
    @font-face {
         font-family: 'S-CoreDream-Bold';
         src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
         font-weight: normal;
         font-style: normal;
    }
    


#photoEvent{background: url(/decoboard/skin/board/photoEvent/img/photoEvent_bg.jpg)0 0 no-repeat; width: 100%; background-size: cover}
#photoEvent .inner_wrap{max-width: 1400px; margin: 0 auto; font-size: 0; box-sizing: border-box; letter-spacing: -1.5px; word-break: keep-all;}

#photoEvent .info{display: flex; padding: 140px 30px 0 30px; box-sizing: border-box;}
#photoEvent .info .info_l{width: 36%; margin: 0 2% 0 0;}
#photoEvent .info .info_l h1{font-size: 68px; font-weight: bold; color: #fff; font-family: "S-CoreDream-Bold"; line-height: 76px; text-shadow: 5px 3px 3px rgba(72,129,214,.3);}
#photoEvent .info .info_l h1 span{color: #fff190;}

#photoEvent .info .info_l h1:after{content: ''; background: #fff; width: 52px; height: 4px; display: block; margin: 40px 0;}
#photoEvent .info .info_l p{font-size: 38px; font-weight: bold; color: #fff; font-family: "S-CoreDream-Bold"; line-height: 44px; text-shadow: 5px 3px 3px rgba(72,129,214,.3);}

#photoEvent .info .info_r{width: 62%;}
#photoEvent .info .info_r ul.txt{}
#photoEvent .info .info_r ul.txt li{display: flex; align-items: flex-start; margin-bottom: 10px; }
#photoEvent .info .info_r ul.txt li:last-child{margin: 0;}
#photoEvent .info .info_r ul.txt li span.tt{display: block; width: 100%; max-width: 138px; border: 3px solid #fff; box-sizing: border-box; font-size: 22px; font-weight: bold; color: #fff; border-radius: 50px; text-align: center; padding: 8px 0; margin: 0 20px 0 0;text-shadow: 3px 2px 3px rgba(72,129,214,.1); }

#photoEvent .info .info_r ul.txt li span.tx{width: calc(100% - 138px - 20px); display: block; color: #fff; font-weight: 500; font-size: 22px; font-weight: 600;line-height: 43px;text-shadow: 3px 2px 3px rgba(72,129,214,.3);}
#photoEvent .info .info_r ul.txt li span.tx p.date{font-size: 24px; font-weight: bold;}
#photoEvent .info .info_r ul.txt li span.tx p.date b{font-size: 34px; font-weight: bold;}

#photoEvent .info .info_r ul.txt li span.tx ul{display: flex;width:100%;margin-bottom: 20px;}
#photoEvent .info .info_r ul.txt li span.tx ul li{background: #fff; border-radius: 10px; width: 48%; margin: 0 4% 0 0; padding: 24px 20px; box-sizing: border-box;font-size: 22px; font-weight: 500;line-height: 34px;color: #333; flex-direction: column; align-items: flex-start;text-shadow: none;}
#photoEvent .info .info_r ul.txt li span.tx ul li:last-child{margin: 0}
#photoEvent .info .info_r ul.txt li span.tx ul li span.step{color: #0095ff; font-weight: bold;}
#photoEvent .info .info_r ul.txt li span.tx ul li span.exp{font-size: 22px; line-height: 34px;}
#photoEvent .info .info_r ul.txt li span.tx p.ex{background:#03afd9; font-size: 20px; border-radius: 10px; box-sizing: border-box; padding: 5px 30px;}


#photoEvent .event_form{padding: 380px 0 115px 0;}
#photoEvent .event_form .inner_wrap{}

#photoEvent .event_form .form_top{height: 518px;background: #419cd6; padding: 120px 120px 50px 120px; box-sizing: border-box; position: relative; z-index: 1; border-radius: 20px 20px 0 0;}

#photoEvent .event_form .form_top .tmp_wrap {display: flex;margin-bottom: 40px;}
#photoEvent .event_form .form_top form:last-child{margin: 0}

#photoEvent .event_form .form_top .form_l{width: 50%; background: #4881d6; padding: 90px 0; box-sizing: border-box; text-align: center; border-radius: 20px 0 0 20px; height: 320px;}
#photoEvent .event_form .form_top .form_r{width: 50%;background: #c9e7ff; padding: 40px; box-sizing: border-box;border-radius: 0 20px 20px 0;height: 320px;}

#photoEvent .event_form .form_top input.fs{background: none; border:none; border-bottom: 3px solid #fff; font-size: 32px; font-weight: bold; color: #fff; width: 48%; margin: 0 4% 0 0; height: auto; padding-bottom: 20px; font-family:"S-CoreDream-Bold"; }
#photoEvent .event_form .form_top input.fs::placeholder{color: #fff;}
#photoEvent .event_form .form_top p.f_tit{font-family:"S-CoreDream-Bold"; color: #fff; font-size:32px; font-weight: bold; margin-bottom: 20px}

#photoEvent .event_form .form_top label.file_btn{font-size: 22px; color: #fff; }
#photoEvent .event_form .form_top label.file_btn:before{content: ''; background: url(/decoboard/skin/board/photoEvent/img/upload_icon.png)0 0 no-repeat; width: 100px; height: 98px; display: block; margin: 0 auto 10px;} 
#photoEvent .event_form .form_top input[type='file']{ height: auto;}

#photoEvent .event_form .form_top #file-upload-button{}

#photoEvent .event_form .form_top input.fs:last-child{margin:0;}


#photoEvent .event_form .form_top textarea {background: none; border: none; width: 100%; height: 100%; color: #81a2bc; font-size: 18px; line-height: 28px; letter-spacing: -1px; font-family: "pretendard";}

#photoEvent .event_form .form_btm{background: #fff; padding: 130px 120px 120px 120px; box-sizing: border-box; position: relative;border-radius: 0 0 20px 20px}

#photoEvent .event_form .form_btm .refer{font-size: 20px; line-height: 32px; color: #888; margin-bottom: 60px;}

#photoEvent .event_form .form_btm input[type="checkbox"]{display:none;font-size:20px; color: #666;}
#photoEvent .event_form .form_btm input[type="checkbox"] + label {font-size:20px;line-height:26px; color: #666; float: right;cursor: pointer;}
#photoEvent .event_form .form_btm input[type="checkbox"] + label span {display:inline-block;box-sizing:border-box;border-radius:3px;width:26px;height:26px;vertical-align:middle;margin:0 10px 0 0; background: url(/decoboard/skin/board/photoEvent/img/form_check_icon.png)0 0 no-repeat #ccc;}
#photoEvent .event_form .form_btm input[type="checkbox"]:checked + label span {background:#87b023;position:relative;}
#photoEvent .event_form .form_btm input[type="checkbox"]:checked + label span:before {content:"";background: url(/decoboard/skin/board/photoEvent/img/form_check_icon.png); width:26px;height:26px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} 

#photoEvent .event_form .event_btn{width: 100%; max-width:285px; display: block; background: #4881d6; color: #fff; font-size: 24px; font-weight: bold; padding: 19.5px 0 ;box-sizing: border-box; text-align: center; border-radius: 60px; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 12px rgba(0,0,0,.1)}


#comment{background: #fff;}
#comment .inner_wrap{padding: 40px; box-sizing: border-box;}

#comment .item{display: flex; padding: 40px 0; box-sizing: border-box; border-bottom: 1px dashed #ccc}
#comment .item:last-child{border: 0;}
#comment .item .c_img{width: 100%; max-width: 245px; height: 205px; overflow: hidden; margin: 0 30px 0 0; border-radius: 20px;}
#comment .item .c_img img{width: 100%;object-fit:cover;height:205px;}
#comment .item .c_txt{width: calc(100% - 245px - 30px); padding-top: 10px; box-sizing: border-box;}
#comment .item .c_txt p{font-size: 18px;}
#comment .item .c_txt p.name{color: #555;}
#comment .item .c_txt p.name::before{content: ''; background: url(/decoboard/skin/board/photoEvent/img/comment_icon.png)0 0 no-repeat; width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin: 0 10px 0 0;}
#comment .item .c_txt p.date{color: #888; padding-left: 36px; margin-bottom: 20px;}
#comment .item .c_txt p.cont{line-height: 28px; color: #555;}

#comment ul.pagination{display: flex; align-items: center; justify-content: center; padding: 30px 0;}
#comment ul.pagination li{width: 40px; height: 40px; line-height: 40px; margin: 0 10px 0 0;}
#comment ul.pagination li:last-child{margin: 0;}
#comment ul.pagination li a{display: block; font-size: 17px; color: #555; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box;text-align: center; }

#comment ul.pagination li.on a{border-color:#37519e; color: #37519e; font-weight: 500}


@media all and (max-width:1300px){
#photoEvent .info{flex-direction: column; align-items: center; padding: 70px 30px 0 30px;}
#photoEvent .info .info_l{width: 100%; text-align: center; margin-bottom: 40px; }
#photoEvent .info .info_l h1:after{margin: 30px auto 30px;}
#photoEvent .info .info_r{width: 100%;}

#photoEvent .event_form{padding:80px 0;}
}


@media all and (max-width:1024px){
#photoEvent .event_form .form_top{padding: 50px;}
#photoEvent .event_form .form_btm{padding: 70px 50px 100px 50px;}
}

@media all and (max-width:768px){

#photoEvent .info .info_l h1{font-size: 52px; line-height: 58px}
#photoEvent .info .info_l p{font-size: 28px; line-height: 34px;}
#photoEvent .info .info_r ul.txt li span.tt{font-size: 18px;}
#photoEvent .info .info_r ul.txt li span.tx p.date{font-size: 20px;}
#photoEvent .info .info_r ul.txt li span.tx p.date b{font-size: 26px;}
#photoEvent .info .info_r ul.txt li span.tx ul li{font-size: 18px;}
#photoEvent .info .info_r ul.txt li span.tx p.ex{font-size: 16px; line-height: 24px;}
#photoEvent .info .info_r ul.txt li span.tx{font-size: 18px;}




#photoEvent .event_form .form_top .tmp_wrap {flex-wrap:wrap}


#photoEvent .event_form .form_top{height: auto;}
#photoEvent .event_form .form_top input.fs{font-size: 24px;width:100%;margin:0 0 40px 0;padding-top:10px;}
#photoEvent .event_form .form_top p.f_tit{font-size: 24px;}

#photoEvent .event_form .form_top label.file_btn{font-size: 18px;}
#photoEvent .event_form .form_top label.file_btn:before{width: 70px; height: 68px; background-size: cover;}
#photoEvent .event_form .form_top textarea{font-size: 16px;}
#photoEvent .event_form .form_top .form_l{height: auto; padding: }
#photoEvent .event_form .form_top .form_r{height: auto; padding:20px; box-sizing: border-box;}
#photoEvent .event_form .form_btm{padding: 50px 50px 100px 50px;}

#photoEvent .event_form .form_btm .refer{font-size: 16px; line-height: 26px; margin-bottom: 30px;}
#photoEvent .event_form .form_btm input[type="checkbox"] + label{font-size: 16px;}

#photoEvent .event_form .event_btn{font-size: 20px; max-width: 240px;}

#comment .inner_wrap{padding: 20px 0;}
#comment .item .c_txt p{font-size: 16px;}

}


@media all and (max-width:640px){
#photoEvent .info{padding: 70px 10px 0 10px;}
#photoEvent .info .info_r ul.txt li{flex-direction: column; margin-bottom: 20px;}
#photoEvent .info .info_r ul.txt li span.tt{margin-bottom: 5px;}
#photoEvent .info .info_r ul.txt li span.tx{width: 100%;}

#photoEvent .info .info_r ul.txt li span.tx ul{margin-bottom: 10px;}
#photoEvent .event_form{padding: 40px 0 70px 0;}
#photoEvent .event_form .form_top{padding: 40px 30px}
#photoEvent .event_form .form_btm{padding: 40px 30px 100px 30px}

#photoEvent .event_form .form_top form{flex-direction: column;}
#photoEvent .event_form .form_top input.fs{width: 100%;}
#photoEvent .event_form .form_top input.fs:first-child{margin-bottom: 30px;}

#photoEvent .event_form .form_top .form_l{padding: 40px 0; width: 100%; border-radius: 20px 20px 0 0;}
#photoEvent .event_form .form_top .form_r{width: 100%; border-radius: 0 0 20px 20px; height: 200px;}

#photoEvent .event_form .form_top label.file_btn:before{width: 50px; height: 48px}


#comment .item{flex-direction: column; }
#comment .item .c_img{max-width: none; margin: 0 0 20px 0;}
#comment .item .c_txt{width: 100%;}
}


