body{background-color:var(--main-b-color1)}

#svisual{display:none}
#contents{min-height:calc(100vh - 170px);padding-top:30px;padding-bottom:20px}
@media (min-width: 480px){
	#contents{min-height:calc(100vh - 180px);padding-top:40px;padding-bottom:30px}
}
@media (min-width: 550px){
	#contents{min-height:calc(100vh - 190px);padding-top:50px;padding-bottom:40px}
}
@media (min-width: 767px){
	#contents{min-height:calc(100vh - 180px);padding-top:60px;padding-bottom:50px}
}
@media (min-width: 1000px){
	#contents{min-height:calc(100vh - 210px);padding-top:100px;padding-bottom:60px}
}
@media (min-width: 1200px){
	#contents{min-height:calc(100vh - 220px);padding-top:120px;padding-bottom:70px}
}

#mmnu{}
#mmnu ul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch;max-width:600px;width:100%;height:210px;margin:0 auto;}
#mmnu li{
	display:flex;width:100%;border-radius:2rem;background-color:var(--color-w);box-shadow:inset rgba(0,0,0,.2) -5px -5px 5px 0px,rgba(0,0,0,.15) 10px 10px 10px;
	&:hover,&:active{margin-top:0.5rem;margin-bottom:-0.5rem;box-shadow:inset rgba(0,0,0,.2) -5px -5px 5px 0px,rgba(0,0,0,0) 0 0 0;}
}
#mmnu li+li{margin-top:1rem}
#mmnu li.mmnu3{background-color:var(--color-gray-f0)}
#mmnu a{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items: center;width:100%;height:100%}
#mmnu .won{aspect-ratio:1;max-width:60px;width:80%;border-radius:100%;background-repeat:no-repeat;background-position:center center;background-size:80% auto}
#mmnu .mmnu1 .won{background-color:rgba(242,119,141,.2);background-image:url(/theme/hugmom/img/main/mmnu_ico1.png)}
#mmnu .mmnu2 .won{background-color:rgba(113,156,208,.2);background-image:url(/theme/hugmom/img/main/mmnu_ico2.png)}
#mmnu .mmnu3 .won{background-color:#fff;background-image:url(/theme/hugmom/img/main/mmnu_ico3.png)}
#mmnu .tit{display:block;margin-left:2rem;font-size:1.5rem;font-weight:800;text-align:center}
#mmnu .tit span{font-size:1.25rem;color:#888}
#mmnu .mmnu1 .tit{color:#570101}
#mmnu .mmnu2 .tit{color:#002050}
#mmnu .mmnu3 .tit{color:#222}
@media (min-width: 550px){
	#mmnu{margin-top:10%}
	#mmnu ul{width:100%;height:300px}
	#mmnu li{
		width:calc((100% - 3rem) / 2);border-radius:2rem;box-shadow:inset rgba(0,0,0,.2) -10px -10px 10px 0px,rgba(0,0,0,.15) 30px 30px 30px;
		&:hover,&:active{margin-top:1rem;margin-bottom:-1rem;box-shadow:inset rgba(0,0,0,.2) -10px -10px 10px 0px,rgba(0,0,0,0) 0 0 0}
	}
	#mmnu li+li{margin-top:0}
	#mmnu .won{max-width:100px}
	#mmnu .tit{width:100%;min-height:45px;margin-top:2rem;margin-left:0}
	#mmnu .tit span{display:block;margin-top:0.5rem;font-size:1rem;}
}
@media (min-width: 767px){
	#mmnu{margin-top:0}
	#mmnu ul{width:100%;height:350px}
	#mmnu li{width:calc((100% - 5rem) / 2)}
	#mmnu .won{max-width:150px}
}
@media (min-width: 1000px){
	#mmnu ul{max-width:800px;width:100%;height:420px}
	#mmnu li{width:calc((100% - 7rem) / 2)}
	#mmnu .won{max-width:180px;background-size:130px auto}
}
@media (min-width: 1200px){
	#mmnu ul{max-width:900px;width:100%;height:450px}
	#mmnu .won{max-width:200px}
	#mmnu .tit{font-size:2rem}
	#mmnu .tit span{display:inline-block;margin-top:0;font-size:1.33rem}
}
@supports not (aspect-ratio: 1 / 1) {
	#mmnu .won:before{content:"";float:left;padding-top:100%}
	#mmnu .won:after{display:block;content:"";clear: both;}
}

#mnotice{overflow:hidden;width:100%;margin:2rem auto 0}
#mnotice a{color:#fff}
#mnotice .notice{display:flex;justify-content:space-between;align-items:center;width:100%;height:40px;padding:5px;border-radius:30px;background-color:rgba(0,0,0,.1)}
#mnotice h2{display:flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:50%;background-color:rgba(0,0,0,.2);font-size:1.25rem;color:#fff}
#mnotice .bx-wrapper{position:relative;width:calc(100% - 30px)}
#mnotice .bx-viewport{width:calc(100% - 60px) !important}
#mnotice .notice ul{width:100%}
#mnotice .noticeItem{display:flex;justify-content:space-between;align-items:center;width:100% !important;height:30px;padding-left:5px;color:#fff}
#mnotice .noticeItem a{overflow:hidden;display:inline-block;color:#fff;white-space:nowrap;text-overflow:ellipsis}
#mnotice .notice .lt_date{display:none;width:100px;color:#fff}
#mnotice .notice .new_icon{display:inline-block;width:16px;height:16px;margin:0 5px;border-radius:100%;background-color:#eb6220;font-size:8px;color:#fff;line-height:17px;text-align:center;vertical-align:middle}
#mnotice #notice_slider{width:100% !important}
#mnotice .bx-controls{position:absolute;top:0;right:0;width:62px;height:100%}
#mnotice .bx-controls .bx-controls-direction{display:flex;justify-content:space-between;align-items:center}
#mnotice .bx-controls a{overflow:hidden;display:block;position:relative;width:30px;height:30px;border-radius:50%;text-indent:-9999px}
#mnotice .bx-controls .bx-next{margin-left:2px}
#mnotice .bx-controls a:before{font-family:"remixicon";display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.1);font-size:1.25rem;font-weight:800;color:#fff;text-indent:0}
#mnotice .bx-controls .bx-prev:before{content:"\EA78"}
#mnotice .bx-controls .bx-next:before{content:"\EA4E"}
#mnotice .bx-controls a:hover{background-color:rgba(0,0,0,.2)}
@media screen and (min-width:480px){
	#mnotice{margin:3rem auto 0}
	#mnotice .noticeItem{padding-left:1rem}
	#mnotice .notice .lt_date{display:inline-block}
}
@media screen and (min-width:550px){
	#mnotice{margin:4rem auto 0}
	#mnotice h2{width:40px;height:40px}
	#mnotice .bx-wrapper{width:calc(100% - 40px)}
	#mnotice .bx-viewport{width:calc(100% - 80px) !important}
	#mnotice .notice{height:50px;border-radius:50px}
	#mnotice .noticeItem{height:40px}
	#mnotice .bx-controls{width:82px}
	#mnotice .bx-controls a{width:40px;height:40px}
	#mnotice .notice .lt_date{width:120px}
}
@media screen and (min-width:768px){
	#mnotice{margin:5rem auto 0}
	#mnotice .notice{height:60px;padding:10px}
}
@media screen and (min-width:1000px){
	#mnotice{margin:6rem auto 0}
	#mnotice h2{width:50px;height:50px}
	#mnotice .notice{height:70px}
	#mnotice .bx-wrapper{width:calc(100% - 50px)}
	#mnotice .bx-viewport{width:calc(100% - 100px) !important}
	#mnotice .noticeItem{height:50px}
	#mnotice .noticeItem strong{color:#fff}
	#mnotice .bx-controls{width:102px}
	#mnotice .bx-controls a{width:50px;height:50px}
	#mnotice .notice .lt_date{width:120px}
}
@media screen and (min-width:1200px){
	#mnotice h2{width:60px;height:60px;font-size:1.5rem}
	#mnotice .notice{height:80px;border-radius:80px}
}