@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./font/PretendardVariable.woff2') format('woff2-variations');
}
#seoul-common-header{border-bottom: 1px solid #f1f1f1;}
div#wrapper {font-family:'Pretendard'; display:flex;flex-direction:column;height:100vh;color:#000;}
main#container {display:flex;align-items:center;flex-grow:1;justify-content:center;column-gap: 50px;}
footer#footer {padding:20px 0;font-size:12px;border-top:1px solid #f1f1f1;}

/* content */
main#container .card-wrap {max-width: 1152px;display:flex;align-items:stretch;flex-grow:1;justify-content:center;gap:30px 50px;}
main#container .card {display:flex ;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:100%;max-width:500px;padding:40px 45px;border-radius:20px;}
main#container .card h2 {display:flex ;align-items:center;justify-content:center;min-height:2.28em;margin-bottom:25px;font-size:28px;line-height:1.14;text-align:center;white-space:nowrap;word-break:break-all;}
main#container .card .card-cont {display:flex ;align-items:center;flex-direction:column-reverse;box-sizing:border-box;padding:20px;background-repeat:no-repeat;background-size:contain;aspect-ratio:410 / 290;}
main#container .card .card-btn {position:relative;z-index:0;display:inline-block;overflow:hidden;padding:20px 36px;font-size:24px;font-weight:bold;border-radius:20px;background-color:#fff;box-shadow:3px 0 5px rgba(0,0,0,.2);}
main#container .card .card-btn:after {position:absolute;z-index:-1;content:'';transition:background-color .5s ease;border-radius:15px;background:#fff;inset:4px;}
main#container .card .card-btn span {display:flex;align-items:center;line-height:1;white-space:nowrap;color:#000;column-gap:15px;}
main#container .card .card-btn span:after {width:9px;height:16px;content:'';background-image:url(../images/ico-arrow.png);}

main#container .card.hangang {background:#a1e1ff;}
main#container .card.hangang .card-cont {background-image:url(../images/bg-hangang.png);}
main#container .card.garden {background:#7ceccd;}
main#container .card.garden .card-cont {background-image:url(../images/bg-garden.png);}

@media (hover:hover){
  main#container .card .card-btn:hover:before {position:absolute;z-index:-2;top:50%;left:50%;width:200%;height:400%;content:'';animation:rotate-border 2s linear infinite;background:conic-gradient(from -45deg, #fe9c00 0deg, #fff 180deg, #fe9c00 360deg);filter:blur(3px);}
  main#container .card .card-btn:hover{transform: scale(1.05);text-decoration: none;}
}
@keyframes rotate-border{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
      100%{transform:translate(-50%,-50%) rotate(360deg)}
    }
    
    @media all and (max-width: 1151px) {
      main#container{padding:15px;}
    }
    @media all and (max-width: 999px) {
      main#container .card {padding: 30px 20px;}
      main#container .card h2{font-size: 24px;}
      main#container .card .card-cont{width: 90%; margin: 0 auto;}
      main#container .card .card-btn{font-size: 20px;padding:16px 28px;}
    }
    @media all and (max-width: 768px) {
      main#container .card {padding: 20px 15px;}
      main#container .card h2{font-size: 20px;}
      main#container .card .card-btn{font-size: 18px;padding:14px 24px;}
    }
    @media all and (max-width: 620px) {
      main#container .card-wrap{flex-direction: column;align-items: center;}
      main#container .card{width:100%;}
    }