@charset "utf-8";

/* 메인비쥬얼 */
.main-visual {height:530px; background:url(/images/om_2025/main/visual_bg.jpg) center / cover no-repeat; overflow:hidden; position:relative;}
.main-visual .main-visual-inner{height:100%; max-width:calc(100% - 4.8rem); width:1400px; margin:0 auto;}
.main-visual .main-visual-copy{display:block; padding-top:120px;}

.visual-copy{display:block; padding-right:220px;}
.visual-copy img{max-width:100%;}
.visual-copy .m-type{display:none;}

.main-visual .mayor-intro{position:absolute;left:47%;bottom:0; height:261px; border-radius:200px 0 0 0; width: 53%; background-color:#DA4D8E;}
.main-visual .mayor-intro ul{padding:48px 0 0 120px}
.main-visual .mayor-intro li{padding:20px 0 8px; width:342px; border-bottom:1px solid #fff;}
.main-visual .mayor-intro a{display:inline-flex; align-items: center; padding:10px; color:#fff; font-size:20px;font-weight:500;}
.main-visual .mayor-intro a:before{display:block;content:'';width:28px;height:28px; margin-right:8px; flex-shrink: 0;}
.main-visual .mayor-intro a:after{display:block;content:'';width:20px;height:20px; margin-left:8px; flex-shrink: 0; background:url(/images/om_2025/main/arr_go.svg) center no-repeat;}
.main-visual .mayor-intro .mayor-photo{position:absolute; bottom:0; left:310px;}

.main-visual .mayor-intro .item1:before{background:url(/images/om_2025/main/ic_greeting.svg) center no-repeat;}
.main-visual .mayor-intro .item2:before{background:url(/images/om_2025/main/ic_history.svg) center no-repeat;}

.main-visual .mayor-intro a:hover:after{animation: arrMotion 1s infinite forwards;}

@keyframes arrMotion{
	0%{transform:translateX(0);}
	50%{transform:translateX(5px);}
	100%{transform:translateX(0);}
}

/* 메인콘텐츠 */
.main-contents{width:1400px; margin:0 auto; padding:80px 0; max-width:calc(100% - 48px); display:flex; }

.main-press{width:32%; margin-right:28px; border:1px solid #AAAAAA; border-radius:20px; padding:39px; position:relative; box-sizing:border-box;}
.main-press-title{font-family: "GmarketSans"; font-weight:700; color:#222;font-size:28px; margin-bottom:12px; line-height:1.3;}
.main-press-list li + li{border-top:1px solid #EEEEEE;}
.main-press-list li{ padding:14px 0 10px;}
.main-press-list li:last-child{padding-bottom:0;}
.main-press-list a{display:block;}
.main-press-list a:hover .title{color:#E84F90;}
.main-press-list .title{font-size:20px; color:#222; font-weight:700; display:block; margin-bottom:8px;}
.main-press-list .date{color:#777;}

.btn-main-more{display:block;width:24px;height:24px; text-align:left;text-indent:-9999px; background:url(/images/om_2025/main/btn_more.svg) center no-repeat; position:absolute;right:40px;top:40px; transition:0.3s;}
.btn-main-more:hover{transform:rotate(90deg);}

.main-links{flex:1;}
.main-links ul{display:flex; height:100%;}
.main-links li{width:calc(100% / 3 - (28px * 2)/3); height:100%;}
.main-links li + li{margin-left:28px;}
.main-links a{display:flex; justify-content: center; height:100%; box-sizing:border-box; padding:52px 8px; position:relative; border:1px solid #dedede; border-radius:20px; overflow:hidden;}
.main-links .con{text-align:center;}
.main-links .con:before{display:block;content:'';width:88px;height:88px; margin:0 auto 40px auto; background-position:center; background-repeat:no-repeat; background-size:cover;}
.main-links .main-txt{font-family: "GmarketSans"; font-weight:700; color:#222;font-size:28px;}
.main-links .sub-txt{font-family: "GmarketSans"; font-weight:500; color:#454545;font-size:20px;}
.main-links .more{width:82px;height:82px;position:absolute;right:0;bottom:0; overflow:hidden; text-indent:-9999px;}
.main-links .more:before{display:block;content:'';width:168px;height:168px;position:absolute;left:0;top:0; border-radius:50%; background-color:rgba(232,79,144,0.08);}
.main-links .more:after{display:block;content:'';width:20px;height:20px;position:absolute;left:40px;top:34px; background:url(/images/om_2025/main/arr_link.svg) 0 0 / 100% auto no-repeat;}

.main-links .link1 a .con:before{background-image:url(/images/om_2025/main/ic_link1.svg);}
.main-links .link2 a .con:before{background-image:url(/images/om_2025/main/ic_link2.svg);}
.main-links .link3 a .con:before{background-image:url(/images/om_2025/main/ic_link3.svg);}

.main-links a:hover{outline:2px solid #E84F90; outline-offset: -1px;}
.main-links a:hover .more:before{background-color:#E84F90;}
.main-links a:hover .more:after{background-position:0 -20px; animation: arrMotion 1s infinite forwards;}


@media (max-width:1440px) {

	.main-visual .mayor-intro{left:auto; width:760px; right:0;}
	.main-visual .mayor-intro ul{padding-right:48px}
	.main-visual .mayor-intro li{width:auto;}
	.main-visual .mayor-intro .mayor-photo{left:auto; right:-10px;}

}

@media (max-width:1280px) {
	.main-links li{width:calc(100% / 3 - (12px * 2)/3);}
	.main-links li + li{margin-left:12px;}
}

@media (max-width:1024px) {

	.main-visual .main-visual-copy{padding-top:60px;}
	.main-visual .mayor-intro{width:680px;}
	.main-visual .mayor-intro .mayor-photo{right:-40px;}

	.visual-copy{padding-right:0;}
	.visual-copy img{height:160px;}
	.visual-copy .m-type{display:block;}
	.visual-copy .pc-type{display:none;}

	.main-contents{padding:40px 0; flex-wrap:wrap; display:block;}

	.main-press{width:100%; margin:0 0 28px 0;}

}

@media (max-width:768px) {

	.main-visual .main-visual-copy{padding-top:60px;}
	.visual-copy{padding-right:220px;}
	.visual-copy img{height:auto; margin:0 auto;}

	.main-contents{padding:28px 0;}
	.main-press{padding:24px; margin-bottom:20px;}
	.main-press-title{font-size:20px; margin-bottom:8px;}
	.main-press-list li{padding:12px 0;}
	.main-press-list .title{font-size:16px;}
	.btn-main-more{right:24px;top:24px;}

	.main-links .main-txt{font-size:20px;}
	.main-links .sub-txt{font-size:16px;}
	.main-links .con:before{margin-bottom:16px;}
}

@media (max-width:640px) {

	.main-visual {height:auto; background-image:url(/images/om_2025/main/visual_bg_m.jpg);}
	.main-visual .main-visual-inner{height:auto; max-width:100%;}
	.main-visual .main-visual-copy{padding:0;}
	.visual-copy {padding:0; text-align:center;padding:52px 0 60px;}
	.visual-copy img{width:312px; max-width:80%;}

	.main-visual .mayor-intro{left:20px; width:auto; right:0; height:220px; border-top-left-radius: 120px; position:relative;}
	.main-visual .mayor-intro ul{padding:52px 0 0 36px;}
	.main-visual .mayor-intro .mayor-photo{right:-30px;}
	.main-visual .mayor-intro .mayor-photo img{height:320px;}
	.main-visual .mayor-intro li{padding:20px 0 5px;}
	.main-visual .mayor-intro a{font-size:18px; padding:5px 8px;}

	.main-links ul{flex-wrap:wrap;}
	.main-links li{width:100%; height:auto;}
	.main-links li + li{margin:20px 0 0 0;}
	.main-links a{padding:28px; justify-content: flex-start;}
	.main-links .con{display:flex; align-items: center; gap:24px;}
	.main-links .con:before{width:60px;height:60px; margin:0;}
	.main-links .title{text-align:left;}
	.main-links .more{width:60px;height:60px;}
	.main-links .more:before{width:120px;height:120px;}
	.main-links .more:after{left:28px;top:28px;width:16px;height:16px;}
	.main-links a:hover .more:after{background-position:0 -16px;}

}

@media (max-width:430px) {
	.main-visual .mayor-intro .mayor-photo img{height:280px;}
}

@media (max-width:375px) {
	.main-visual .mayor-intro a{font-size:16px; padding:5px 0;}
}
