img{width: 100%;}
a:hover img{-webkit-transition: all .5s;-o-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;transition: all .5s;   transform: scale(1.02);}
.main_wapper{display: block; background-color: #fdf8f2;background-image: url(/images/event/2026/dreamhomes/pattern.png);font-size: 20px;padding-bottom: 100px;}
.main_wapper  h2{display: block; width: 300px; height: 64px; margin:0 auto;background-image: url(/images/event/2026/dreamhomes/title_bg.png);font-size:26px; text-align: center;font-weight: 600; line-height: 53px;}
.event_visual a{display: block;max-width: 1440px; background-image: url(/images/event/2026/dreamhomes/visual_index.png);height:800px; background-repeat: no-repeat; background-size:cover; background-position: center top;margin: 0 auto;  }

.process{display: flex;margin: 0 auto;justify-content: center;position: relative;max-width: 1200px;flex-wrap: wrap;margin-top: -80px;}
.process:after{display: inline-block; content: ""; width:60%;top: 50%; height: 3px;background-color: #000;position: absolute;z-index: 1;}
.process div{display: block;width:220px; height:210px;border:3px solid #000;box-sizing: border-box; border-radius: 10px;background-color: #fff;text-align: center;padding: 0 10px 10px 10px;margin:20px 25px;z-index: 3;position: relative;}
.process div span{display: block;width: 180px; background-color: #000;border-radius: 50px; margin: 0 auto; position: relative;top: -17px;color: #fff;font-weight: 500;}
.process div p{ font-weight: 500;line-height: 1.4em;}
.process div i{display:block;width: 100px;height: 100px; margin: 0 auto;position: absolute; bottom: 5px;left: 0;right: 0; padding: 0; margin: 0 auto;}

.note{display: block; max-width: 800px; margin: 0 auto; text-align: center;margin-top:50px; }
.note p{font-size: 30px;font-weight: 500;}
.note span{display: block; background-color:#61b07d; border-radius:10px;padding: 10px; box-sizing: border-box;}
.note em{display: block;font-size: 24px;color: #fff;font-weight: 500; }

.prize{display: block; max-width: 1200px; margin: 0 auto;background-color: #f4ded0;border-radius:15px;border:3px solid #000;margin-top:100px;}
.prize h2{position: relative; top: -35px;}
.prize_list{display: flex;flex-wrap: wrap; padding: 0 100px 50px 100px; box-sizing: border-box;justify-content: space-evenly;}
.prize_list div{width:180px;margin:10px 20px;border-radius:15px;overflow: hidden;text-align: center;font-size: 16px;}
.prize_list div strong{font-weight: 500;}
.prize_list div img{display: block; width: 180px; height: 180px;overflow: hidden;padding: 3px;box-sizing: border-box; border-radius:15px;background-color: #000; }

.notice_desc{display: block; max-width: 1200px; margin: 0 auto; background-color:#a6c5cd;border-radius:10px;border:3px solid #000; padding:0 100px 50px 100px; box-sizing: border-box;  margin-top:100px;}
.notice_desc h2{position: relative; top: -35px;}
.notice_desc ul {list-style-type: decimal;font-size: 16px;margin-left: 20px;}
.notice_desc ul li{margin-bottom: 10px;}


.inner_visual{display: block;max-width: 1440px; background-image: url(/images/event/2026/dreamhomes/visual_inner.png);height:800px; background-repeat: no-repeat; background-size:cover; background-position: center top;margin: 0 auto;}

.form{display:block; max-width: 800px; margin: 0 auto;margin-top: -300px;position: relative;}
.form:after{display: inline-block; content: ""; width:3px; height:500px; ;background-color: #000;position: absolute;z-index: 1;left: 50%;top: 0;}
.form .block{display: block; padding:40px 50px;box-sizing: border-box; background-color: #f4ded0;text-align: center;margin-bottom: 50px;border:3px solid #000;border-radius:15px;z-index: 3; position: relative;}
.form .block p{font-size:24px;font-weight: 500; }

.dropdown{position: relative;width:60%;margin: 0 auto;}

.form select {display: block;width:100%;height: 45px;margin: 0 auto;color: #000;border: 2px solid #000;border-radius: 5px;font-size: 18px;padding: 0 10px;border-radius: 30px;
background-color: #fff;font-weight: 500;position: relative;margin-top: 10px;}

.dropdown:after { content: '';  position: absolute;  z-index: 2;  top:11px;  right:10px;  width: 0;  height: 0;  border:7px dashed;  border-color: #000 transparent;  pointer-events: none;}
.dropdown:after {  margin-top: 10px;  border-top-style: solid;  border-bottom: none;}
.dropdown select{ -webkit-appearance:none;  -moz-appearance:none;  -o-appearance:none;   appearance:none;-ms-appearance:none; }
.dropdown select::-ms-expand{  display:none;}
.dropdown option{ font-weight: 500; margin: 3px;  padding: 6px 10px;  text-shadow: none;  cursor: pointer; line-height: 1.5em;outline:0;}

.btn{display: block;width: 40%;border-radius: 30px;height:55px;line-height: 55px;text-align: center;font-size: 1.25em;font-weight: 500;margin: 0 auto;z-index: 3;position: relative;}
.btn.black{ background: linear-gradient(to bottom, #1c1c1c 0%, #575757 100%); color: #fff;}
.btn.black:hover{ background: linear-gradient(to bottom, #000000 0%, #000000 100%);}
.btn.pink{border:2px solid #000;}
.btn.pink:hover, .btnCollected {background: linear-gradient(to bottom,  #e9699b 0%,#ce2b6b 100%);color: #fff;border:2px solid #ce2b6b; cursor:pointer;}
.btn.blue {background: linear-gradient(to bottom,  #3a588a 0%,#4c7dcc 100%);color: #fff;}
.btn.blue:hover {background: linear-gradient(to bottom,  #284577 0%,#3969b7 100%);}

.select_container{display: block; max-width: 1200px; margin: 0 auto;background-color: #f4ded0;border-radius:15px;border:3px solid #000;margin-top: -300px;position: relative;padding: 50px; box-sizing: border-box;}
.progress_bar{display: flex;justify-content: center; margin-bottom: 30px;}
.progress_bar div{display: block; width:100px; height:50px;background-color: #fff;line-height: 47px;margin: 10px 15px;position: relative;padding: 0 15px;box-sizing: border-box;font-size:24px; font-weight: 500;}
.progress_bar div:after{display: inline-block;content: ""; width: 0;   height: 0;   border-style: solid;  border-width: 35px;  border-color:#fff ; border-top-color: transparent;  border-right-color: transparent;  border-bottom-color: transparent;position: absolute;top:-10px;right: -60px;border-radius:5px;}

.progress_bar div.focus{background-color: #000; color: #fff;}
.progress_bar div.focus:after{border-color:#000; border-top-color: transparent;  border-right-color: transparent;  border-bottom-color: transparent;}

.select_container strong {display:block;text-align: center;font-size: 24px;}
.select_container strong span{font-size:30px;color: #ce2b6b;}

.show_up_img {display: inline-block;width: 100%;height: 0;padding-bottom: 66.7%; overflow: hidden;position: relative;}
.show_up_img a img{display: block;  position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: auto;height: 100%;}
.show_up_img a {position: static;}

@keyframes heart-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.heart-click-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 60px;
    color: #e94e77;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: heart-pop 0.8s ease forwards;
}

@keyframes heart-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.heart-click-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 60px;
    color: #e94e77;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: heart-pop 0.8s ease forwards;
}

.slide_show{position: relative; width: 90%; margin: 0 auto;position: relative;margin-top:20px;}
.arrow_left , .arrow_right{display: inline-block;width: 40px;height: 40px;border-top: 2px solid #000;border-left: 2px solid #000;position: absolute;top: 45%;}
.arrow_left{transform: rotate(-45deg);left: 0;}
.arrow_right{transform: rotate(135deg);right: 0;}

.slide_show .arrow_left{left: -50px;}
.slide_show .arrow_right{right:-50px;}
.select_container .btn.pink{margin-top:30px;}
.select_container .btn.pink i{font-size:24px;margin-right: 5px;}
.collected{display: block;text-align: center; font-size: 16px; margin-top: 10px;}

.result_board{display: block;background-image: url(/images/event/2026/dreamhomes/pattern_paper.png);margin-top: -300px;padding-bottom: 100px;}
.collection_list{display: block; max-width: 1200px; margin: 0 auto;padding:50px 20px;box-sizing: border-box;}
.collection_list h3{display: block; font-size:36px;font-weight:600;text-align: center;}
.collection_list p {display: block;font-size:24px;font-weight: 600;text-align: center;}
.collection_list p a{text-decoration: underline;color: #20ffdb;}
.collection_list .btn.blue{margin-top:30px;}


.show_up_row{display: flex;justify-content:space-around;flex-wrap: wrap;margin-top:80px;position: relative;margin-bottom: 20px;}
.show_up_row strong{display: block;width: 225px; height: 80px; line-height: 80px;text-align: center;position: absolute;  top:0;  left: 50%;  transform: translate(-45%, -60%);z-index: 1;font-size: 24px;}
.tape01{background-image:url(/images/event/2026/dreamhomes/tape.png);}
.tape02{background-image:url(/images/event/2026/dreamhomes/tape01.png);}
.show_up_row .img_box{display: block; width:29%; position: relative;background-color:#fff;padding: 40px 15px 15px 15px;box-shadow: 0px 0px 5px #c4c4c4;}
.switch_dot{display:none;  width: 100%;justify-content: center;margin-top: 20px;}
.switch_dot a{display: block; width: 10px; height: 10px; border-radius: 100%; border:1px solid #000;margin: 0 10px;}
.switch_dot a:hover{background-color: #000;}

.recommend_designer{margin-bottom:50px;}
.recommend_designer h2 {position: relative; top:45px;z-index: 1;}
.designer_row{display: flex; max-width: 1200px;margin: 0 auto;padding:50px 20px 20px 20px;box-sizing: border-box; background-color:#f4ded0;background-color: #f4ded0;
    border-radius: 15px;   border: 3px solid #000;position: relative;justify-content: center;flex-wrap: wrap;}

.designer_row .swiper-container{ max-width: 1080px; }
.designer_row div.swiper-slide{ width:18%;font-size: 18px;text-align: center;}
.designer_row div.swiper-slide a span{display: block; border-radius: 100%;overflow: hidden;width: 150px; height: 150px; margin: 0 auto;border:6px solid #fff;margin-bottom:15px;}
.designer_row div.swiper-slide a h3{font-weight: 500;}
.designer_row .arrow_left , .designer_row .arrow_right{top:45%;}
.designer_row .arrow_left{left:30px;}
.designer_row .arrow_right{right: 30px;}



@media (min-width:320px) and (max-width: 1024px) {
    .note {padding: 0 20px;box-sizing: border-box;}
    .process div{width: 200px;}  
    
    .prize_list{padding:0 30px 50px 30px;}
    .process:after{display: none;} 

}

@media (min-width:320px) and (max-width:820px) {
    .event_visual a{background-position:-280px top;  }
    .process div{width: 240px;}  
    .notice_desc{padding: 0 50px 50px 50px;}
    .show_up_row .img_box{width: 28%;padding: 30px 10px 10px 10px;}
    .designer_row div{width: 27%;}
    .designer_row div:nth-child(3n){display: none;}
    
}

@media (min-width:320px) and (max-width:768px) {
 .event_visual a{background-position:-320px top;  }
 .process div{width: 240px;}  
 .btn{height: 50px; line-height: 50px;font-size: 1em;}  
 .progress_bar{display: none;}
}

@media (min-width:320px) and (max-width:640px) {   
    .event_visual a{background-image: url(/images/event/2026/dreamhomes/visual_index_640.png);height:470px; background-size:cover; background-position: center top;margin: 0 auto;margin-top: 50px;}
    .inner_visual{background-image: url(/images/event/2026/dreamhomes/visual_inner_640.png);height:470px; background-size:cover; background-position: center top;margin: 0 auto;margin-top: 50px;}
    .form , .select_container , .result_board{margin-top: -150px;}
    .process{margin-top: -100px;}
    .note p{font-size: 24px;}
    .note em{font-size: 20px;}
    .form .block{padding:20px;}
    .dropdown{width:80%;}
    .form:after{height: 400px;}
    .btn{width: 80%;}    
    .select_container{padding: 30px 50px;}
    
    .img_box:nth-child(2n){display: none;}
    .show_up_row .img_box{width: 100%;}
    .switch_dot{display: flex;}
    .designer_row div:nth-child(4n){display: none;}
    .designer_row div{width: 40%;}
    .collection_list h3{font-size: 24px;}
    .collection_list p{font-size: 20px;}
}

@media (min-width:320px) and (max-width:460px) { 
    .form .block p{font-size: 20px;}
    .select_container strong{font-size: 20px;}
    .select_container strong span{font-size: 24px;}
     .designer_row div:nth-child(2n){display: none;}
    .designer_row div{width: 100%;}
 
}