/*** - Modal Popup - ***/
/* md_brand_list */
.md_brand_list {position:relative;max-width:1380px;margin:20px auto 0 auto;padding:0 40px 5px 40px;}
.md_brand_list > span {position:absolute;left:0;top:50%;font-size:18px;transform:translateY(-50%);}
.md_brand_list .md_brand {position:relative;padding-left:235px;}
.md_brand_list .md_brand ul {display:inline-block;margin-right:40px;background:#f2f1ed;border-radius:5px;overflow:hidden;}
.md_brand_list .md_brand li {position:relative;float:left;min-width:190px;height:60px;padding:5px 10px;box-sizing:border-box;text-align:center;}
.md_brand_list .md_brand li:after {position:absolute;top:50%;left:0;width:1px;height:22px;margin-top:-10px;background:#ddd;content:'';}
.md_brand_list .md_brand li:first-child:after {display:none;}
.md_brand_list .md_brand li img {height:50px;vertical-align:top;}
.md_brand_list .md_brand a {display:inline-block;position:relative;margin-top:22px;font-size:16px;padding-right:15px;text-decoration:underline;vertical-align:top;}
.md_brand_list .md_brand a::after {position:absolute;right:0;top:50%;margin-top:-3px;width:7px;height:7px;border:solid #535353;border-width:1px 1px 0 0;transform:rotate(45deg);transform-origin:center;content:'';}

/* md_popup */
.md_popup {position:fixed;left:0;top:0;width:100%;height:100%;z-index:10000;display:none;animation:fade both 0.4s;}
.md_popup.on {display:block;}
.md_popup.off {animation:fadeOut both 0.3s;}
.md_popup .dim {position:fixed;left:0;top:0;width:100%;height:150%;background:rgba(0,0,0,0.5);}
.md_popup .inner {position:fixed;left:50%;top:50%;width:520px;padding:40px;background:#fff;box-sizing:border-box;border-radius:20px;transform:translate(-50%,-50%);overflow:hidden;}
.md_popup .md_popup_name {font-size:32px;font-weight:bold;line-height:80px;}
.md_popup .md_popup_cont {padding:30px;background:#f2f1ed;border-radius:15px;color:#666;font-size:16px;line-height:26px;max-height:70vh;overflow:auto;}
.md_popup .md_popup_cont dl {margin-top:30px;}
.md_popup .md_popup_cont dl:first-child {margin-top:0;}
.md_popup .md_popup_cont dt {font-size:18px;font-weight:bold;}
.md_popup .md_popup_cont dd {margin-top:5px;}
.md_popup .md_pop_close {position:absolute;right:20px;top:20px;width:40px;height:40px;overflow:hidden;transition:none;z-index:1;}
.md_popup .md_pop_close em {position:absolute;top:auto;left:auto;width:1px;height:1px;overflow:hidden;text-indent:0;clip:rect(1px 1px 1px 1px);}
.md_popup .md_pop_close span {display:block;position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)rotate(45deg);}
.md_popup .md_pop_close span:before {position:absolute;left:0;top:50%;width:30px;height:1px;margin-top:-1px;background:#666;content:"";}
.md_popup .md_pop_close span:after {position:absolute;left:50%;top:0;width:1px;height:30px;margin-left:-1px;background:#666;content:"";}

/* md_narrow (다중 사용 시.iw_component:has(.stage-medium .animation-box) ~ .iw_component .md_brand_list 로 변경 필요)*/
.md_brand_list.md_narrow {max-width:912px;padding:10px 0 5px;}
.md_brand_list.md_narrow > span {display:block;position:static;}
.md_brand_list.md_narrow .md_brand {padding-left:0;margin-top:5px;}
.md_brand_list.md_narrow .md_brand li {min-width:190px;}


@media only screen and (max-width:1380px) {
/* md_brand_list */
.md_brand_list > span {left:40px;}
.md_brand_list .md_brand {padding-left:265px;}
.md_brand_list .md_brand ul {margin-right:30px;}
}


@media only screen and (max-width:1200px) {
/* md_brand_list */
.md_brand_list > span {top:50%;font-size:16px;}
.md_brand_list .md_brand {padding-left:220px;}
.md_brand_list .md_brand ul {margin-right:20px;}
.md_brand_list .md_brand li {min-width:150px;height:50px;}
.md_brand_list .md_brand li:after {height:18px;margin-top:-8px;}
.md_brand_list .md_brand li img {height:40px;}
.md_brand_list .md_brand a {margin-top:18px;font-size:14px;padding-right:13px;}
}


@media only screen and (max-width:1000px) {
/* md_brand_list */
.md_brand_list > span {font-size:15px;}
.md_brand_list .md_brand {padding-left:200px;}
.md_brand_list .md_brand ul {margin-right:20px;}
.md_brand_list .md_brand li {min-width:100px;height:40px;}
.md_brand_list .md_brand li img {height:30px;}
.md_brand_list .md_brand a {margin-top:12px;font-size:13px;}
}


@media only screen and (max-width:820px) {
/* md_brand_list */
.md_brand_list {padding:0 18px;}
.md_brand_list > span {display:block;position:static;font-size:15px;}
.md_brand_list .md_brand {margin-top:5px;padding:20px 10px;background:#f2f1ed;border-radius:5px;text-align:center;}
.md_brand_list .md_brand ul {display:block;margin-right:0;}
.md_brand_list .md_brand li {width:33.3%;height:45px;}
.md_brand_list .md_brand li img {height:35px;}
	
/* md_popup */
.md_popup .inner {width:calc(100% - 50px);padding:30px 24px;border-radius:10px;}
.md_popup .md_popup_name {font-size:20px;line-height:48px;}
.md_popup .md_popup_cont {padding:25px;border-radius:10px;font-size:13px;line-height:20px;}
.md_popup .md_popup_cont dt {font-size:16px;}
.md_popup .md_popup_cont dl {margin-top:20px;}
.md_popup .md_pop_close {width:30px;height:30px;}
.md_popup .md_pop_close span {width:20px;height:20px;}
.md_popup .md_pop_close span:before {width:20px;}
.md_popup .md_pop_close span:after {height:20px;}

/* md_narrow */
.md_brand_list.md_narrow {padding:0 18px;}
.md_brand_list.md_narrow .md_brand {padding-left:10px;}
.md_brand_list.md_narrow .md_brand li {min-width:0;}
}
