header{padding:0 80px; position:fixed; top:0; left:0; right:0; z-index:10;}
header > div{height:120px;}
.logo_img{padding-right:50px;}
.logo_img img{width:102px;}
.logo_txt{font-size:16px; line-height:140%; letter-spacing:-0.22px; color:#000; font-weight:600;}
.web_arc{color: #000; font-family:Newsreader; font-size: 16px; font-style: italic; /*font-weight: 500;*/ line-height: 140%; /* 30.8px */ letter-spacing: -0.22px;}

.menu_btn{width:30px; height:30px; background:url('/images/mobile_menu.svg') center center no-repeat; background-size:100%; border:0; }
.menu_btn.active{background:url('/images/mobile_menu_close.svg') center center no-repeat; background-size:100%;}
.mobile_menu{position:fixed; top:120px; left:0; right:0; bottom:0; background:rgba(255,255,255,0.9); z-index:10; display:none; padding-top:100px; z-index:10;}
.mobile_menu ul{padding-left:232px; padding-right:232px; margin:0 auto;}
.mobile_menu.active{display:block;}
.mobile_menu li > div.memu_year{font-family:Newsreader; font-style: italic;}
.mobile_menu a{color:#000; display:inline-block; text-decoration:underline; font-weight:400; font-family:Pretendard; font-weight:400;}
.mobile_menu li{border-bottom:1px solid #000; font-size:18px; color:#000; padding:8px 0; line-height:1; font-family:Pretendard; font-weight:500;}
.mobile_menu li > div:nth-child(2){width:300px;}
.mobile_menu li > div:nth-child(4){width:300px; text-align:right;}

.container{padding-top:120px; box-sizing:border-box; height:100%; overflow-x: auto; scrollbar-width: none; padding-left:232px; padding-bottom:120px;}
.container_list{gap:120px;}
.container_list > div{position:relative;}
.container_hover{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.7); box-sizing:border-box; padding-top:70px; opacity:0; transition-duration:0.3s;}
.container_list > div:hover .container_hover{opacity:1;}
.container_hover h2{text-align:center; color:#000; font-size:30px; line-height:1; width:100%; font-weight:600;}
.container_hover .year{text-align:center; margin-top:20px; font-size:16px; font-family:Newsreader; font-style: italic; color:#000;}
.container_hover .pos_year{position:absolute; left:50%; width:228px; margin-left:-114px; top:50%; margin-top:-26px; box-sizing:border-box;}
.container_hover .pos_year > div:nth-child(1){text-align:left;}
.container_hover .pos_year > div:nth-child(2){text-align:right;}
.container_hover .pos_year h3{color:#000; font-size:16px;}
.container_hover .pos_year h3 + div{ font-family:Newsreader; font-style: italic;color:#000; font-size:16px; margin-top:10px;}
.container_hover .link{position:absolute; bottom:0; left:0; right:0; bottom:70px; text-align:center;}
.container_hover .link a{color:#000; font-size:16px; text-decoration:underline;}

.mobile_menu li > a{display:none;}

.container_list > div:last-child{padding-right:80px;}
::-webkit-scrollbar { display: none; }
.container img{display:block; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.20); max-height:100%; width:auto; position:relative;}
.container_list > div:hover img {
    filter: blur(3px); /* 블러 정도를 조절하려면 여기 값을 변경하세요 */

}

footer{padding:0 80px; color:#000; font-size:14px; position:fixed; bottom:0; left:0; right:0;}
footer a{color:#000; text-decoration:underline;}
footer > div{height:85px;}


@media screen and (max-width:1320px){
.container{padding-left:80px;}
.container_list, .container_list > div{height:100%;}
.container img{box-shadow:0px 15px 25px 0px rgba(0, 0, 0, 0.20); max-height:100%;}
.container_list{gap:72px;}
header{padding:0 40px;}
footer{padding:0 40px;font-size:16px; letter-spacing:-0.03em;}
.logo_img + .logo_txt, .logo_img + .logo_txt + .web_arc{display:none;}
.logo_img{padding-right:0;}
.logo_img img{display:block; width:109px;}

.mobile_menu ul{padding-left:40px; padding-right:40px;}

}

@media screen and (max-width:860px){
.container_list > div:hover img{filter: blur(0px);}

.mobile_menu li > a{display:inline-block;}
.menu_btn{position:absolute; right:20px; top:50%; margin-top:-19px;}
header{padding:0;}
header > .dp_flex{justify-content:center; height:72px; background:#fff;}
.mobile_menu {top:72px; overflow-y:scroll; padding-top:74px; padding-bottom:60px; background:rgba(255,255,255,1)}
.mobile_menu li{display:block; border-bottom:0; text-align:center;}
.mobile_menu li + li{margin-top:30px;}
.mobile_menu li > div:nth-child(3){width:auto; text-align:center;}
.memu_year{font-family: Newsreader; font-size: 14px; margin-top:8px;}
.memu_title, .memu_link{display:none;}
.mobile_menu img{display:block; 
}

.mobile_menu > div{margin-top:120px; font-family: Pretendard; font-size:16px; color:#000; text-align:center;}

.mobile_txt{text-align:center; margin-top:16px;}
.logo_txt {padding-right:0; font-weight:600; font-size:24px; line-height:140%;}
.web_arc{font-size:26px; margin-top:5px;}
.container{padding-top:88px; padding-left:20px; padding-right:20px; padding-bottom:180px; height:auto;}
.container .dp_flex.container_list{margin-top:60px;}
.container .dp_flex{display:block; text-align:center; margin-left:0; width:auto;}
.container_list .dp_flex + .dp_flex{margin-top:120px;}
.container_hover .pos_year > div:nth-child(2){margin-top:5px;}
.container_list > div:last-child{padding-right:0;}
.container_list > div{height:auto;}
.container img{max-width:100%; box-shadow:none;}

.logo.dp_flex{display:block; text-align:center;}
.container_hover{position:static !important; background:transparent; height:auto !important; opacity:1; width:auto !important;}
.container_hover *{position:static !important;}

.container_title{display:flex; justify-content: space-between;}
.container_hover{padding-top:20px;}
.container_title h2{width:auto; font-size:16px;}
.container_title h2 br{display:none;}
.container_title .year{font-size:16px; margin-top:0;}

.container_hover .pos_year{padding:0;margin-top:22px;}
.container_hover .pos_year h3{font-size:16px;}
.container_hover .pos_year h3 + div{margin-top:0; font-size:16px;}
.container .pos_year > div{display:flex; justify-content: space-between;}

.container_hover .link a{display:block; font-size:16px; border:1px solid #000; padding:13px 0; box-sizing:border-box; margin-top:20px; text-decoration:none;}

footer{position:static; background:#000; color:#fff; padding:50px 0; text-align:center;}
footer a{color:#555;}
footer > div{height:auto;}
footer > div > div:nth-child(2){margin-top:50px;}
footer > div > div:nth-child(3){margin-top:25px;}
footer ul{margin-top:65px;}
footer ul a{text-decoration:none;}

}

@media screen and (max-width:640px){

.mobile_menu img{display:block;}
.container .dp_flex > div{display:block;}
.container .pos_year > div{display:flex;}
.container .dp_flex > div img{width:100%; height:auto !important;}

}