@import url(./font.css);
html, body {font-size:14px; color:#333; font-family: "Noto Sans KR", sans-serif !important;}
body {background:#f6f8fa}
input, textarea, button, select {border:0 none}
input[type=button], input[type=submit], button {cursor:pointer}
ul, ol, li, dl, dt, dd {list-style:none}
a {color:#333; outline:none; text-decoration:none}
/* a:hover {text-decoration:underline} */
body {background:#fff;}

@media (min-width: 1420px) {
    .container {
        width: 1400px;
    }
}

main.subpage:has(div.context) div.context {margin-top: 50px !important; margin-bottom: 50px !important;}

.dim {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9;}
.dim.on {display:block;}

/* 헤더 */
/* div[data-role=wrapper] > header {position:absolute; top:0; left:0; width:100%; height:100px; z-index:13; transition:all 0.2s;} */
div[data-role=wrapper] > header {position:absolute; top:0; left:0; width:100%; height:0; z-index:13;}
div[data-role=wrapper] > header.on {background: #fff; border-bottom:0 none; box-shadow:0 15px 15px 10px rgba(0,0,0,.2); padding-bottom: 450px;}
div[data-role=wrapper] > header > .top {height:44px; background:rgba(0,0,0,0.7); transition: background 0.2s ease-in-out;}
div[data-role=wrapper] > header.on > .top {background:rgba(0,0,0,0.7);}
div[data-role=wrapper] > header > .top > div.container > .link {float:left; font-size:0;}
div[data-role=wrapper] > header > .top > div.container > .user {display: flex; align-items: center; justify-content:end; font-size:0;}
div[data-role=wrapper] > header > .top > div.container > .user > a > i {margin-right:8px;}
div[data-role=wrapper] > header > .top > div.container > .user > a.join {background: transparent; font-size: 1.00rem;}
div[data-role=wrapper] > header > .top > div.container > .user div[data-widget=coursemos-shareloginbar] > button {background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 0.87rem; color: rgba(255, 255, 255, 0.8); width: auto; padding: 0 10px;}

div[data-role=wrapper] > header > .top > div.container > div > a {display:inline-block; position:relative; padding:0 20px; font-size:1.00rem; font-weight: bold; line-height:44px; text-decoration:none; color:#FCFCFC; opacity: 0.6;}
div[data-role=wrapper] > header.on > .top > div.container > div > a {color:#fff;}
/* div[data-role=wrapper] > header.on > .top > div.container > div > a {display:inline-block; position:relative; padding:0 20px; font-size:1.00rem; font-weight: bold; line-height:44px; text-decoration:none; color:#000000; opacity: 0.6;} */
div[data-role=wrapper] > header > .top > div.container > div > a:hover {color:#fff; background:rgba(0,0,0,.3);}
/* div[data-role=wrapper] > header > .top > div.container > div > a:after {content:''; display:block; position:absolute; bottom:0; left:50%; width:0; height:2px; background:#C40781; transform:translateX(-50%); transition:all 0.2s;} */
div[data-role=wrapper] > header > .top > div.container > div > p.bbits {display:inline-block; position:relative; font-weight: bold; padding:0 20px; font-size:1.00rem; line-height:44px; color:#E50E84; cursor:pointer;}
div[data-role=wrapper] > header > .top > div.container > div > a:hover:after {width:100%;}

div[data-role=wrapper] > header > nav {height:86px;}
div[data-role=wrapper] > header > nav > .top_menu {position:relative; background:rgba(0,0,0,0.7); transition: background 0.2s ease-in-out;}
div[data-role=wrapper] > header.on > nav > .top_menu {background:rgba(0,0,0,0.7);}
div[data-role=wrapper] > header > nav > .top_menu > div.container {font-size:0; height:87px; line-height:1; text-align:center;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > h1 {display:inline-block; float:left; width:253px; height:87px; font-size:0; background-position:0 50%; background-repeat:no-repeat; background-size:contain; vertical-align:middle;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > h1 > a {font-size:0; display:block; width:100%; height:100%; text-decoration:none;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul {display:flex; align-items: center; justify-content:end; width:calc(100% - 253px); height:87px; font-size:0; vertical-align:middle; text-align:center;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li {display:inline-block; position:relative; height:87px; box-sizing:border-box;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > a {display:block; font-size:1.29rem; height:87px; font-weight: bold; line-height:87px; text-decoration:none; color:#fff; width: 175px;}

div[data-widget=coursemos-unifiedloginbar][data-templet=default] > button[type=button] {background-color: #8F4CDD !important; padding: 6px 12px !important; border: none !important; border-radius: 4px !important; line-height: 17px !important; font-weight: 700;}
div[data-role=wrapper] > header.on > .top > div.container > div > a.join {color: #fff !important;}
div[data-role=wrapper] > header > .top > div.container > div > a.join {margin-right: 8px; opacity: 1 !important; background-color: #737380 !important; padding: 6px 12px !important; border: none !important; border-radius: 4px !important; line-height: 17px !important; font-weight: 700;}

div[data-widget=coursemos-unifiedloginbar][data-templet=default] {margin-right: 8px !important;}
div[data-role=wrapper] > header > .top > div.container > .user > button.search_btn {width: 40px; height: 40px; border: 0; background: unset;}
div[data-role=wrapper] > header.on > .top > div.container > .user > button.search_btn > svg > path {fill:#fff;}
div[data-role=wrapper] > header.fixed > .top > div.container > .user > button.search_btn > svg > path {fill:#fff;}

.search-modal-box {width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: #000000b5; display: none;}
.search-modal-box .search-modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 100%; display: flex; flex-direction: column; align-items: center;}
.search-modal-box .search-modal-inner {display: flex; width: 60%; gap: 1.00rem; align-items: center; justify-content: center;}
.search-modal-box .search-input {background: #fff; border: none; border-radius: 8px; font-size:1.50rem; padding: 1.50rem 3.00rem; width: 50%; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.18); color: #222; font-weight: bold;}
.search-modal-box .search-btn {background: linear-gradient(135deg, #9557DD 0%, #C34F59 100%); color: #fff; border: none; border-radius: 8px; font-size: 1.50rem; padding: 1.50rem 2.00rem; font-weight: bold; cursor: pointer; height: -webkit-fill-available;}
.search-modal-box .dim-close {position: absolute; top: 24px; right: 40px; z-index: 10001; border: none; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; padding: 0;}
.search-modal-box .dim-close-icon {font-size: 2.00rem; font-weight: 900; color: #fff; pointer-events: none;}

/* 호버 */
div[data-role=wrapper] > header.on > nav {border-bottom:1px solid rgba(255,255,255,0.15); transition:border-bottom 0.2s;}
div[data-role=wrapper] > header.on > nav > .top_menu > div.container > ul > li > a {color:rgba(255,255,255,0.8);}

div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu {display:block; position:absolute; left:-15px; top:87px; text-align:left; width:100%;}
div[data-role=wrapper] > header.on > nav > .top_menu > div.container > ul > li:hover > div.submenu {display:block;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul {padding:20px 0; white-space:nowrap;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul > li {display:block; width:100%; text-align:left; vertical-align:top; padding: 0 16px;}

div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul > li > a {display:block; font-size:1.14rem; line-height:40px; color:#929292; white-space:nowrap; transition:all 0.3s;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul > li > a:hover {text-decoration:none; color: #000;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul > li div.depth3 span {position: relative; padding-left:10px; font-size: 0.86rem; color:#a5a5a5;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li > div.submenu > ul > li div.depth3 span::before {content:""; position: absolute; top:50%; left: 0; display: inline-block; width: 2px; height: 2px; background-color:#a5a5a5; border-radius:50%;}

div[data-role=wrapper] > header > nav > .top_menu > div.container > div {float:right; width:50px; height:50px; margin:20px -10px 0 0; vertical-align:middle; display:inline-block;}

div[data-role=wrapper] > header > nav > .top_menu > div.container > div > button {display:inline-block; background:transparent; border:0; color:#fff; width:50px; height:50px; text-align:center; line-height:50px; padding:0; vertical-align:middle; cursor:pointer; font-size:2.57rem;}
div[data-role=wrapper] > header > np_menu > div.container > div > button:hover {color:#fff;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div > button[data-action=search] {font-size:1.79rem;}
/* header > nav > .top_menu > div.container > div > button[data-action=all] {display:none} */
div[data-role=wrapper] > header > nav > .top_menu > div.container > div > button[data-action=all].opened > i:before {content:"\eb04";}
div[data-role=wrapper] > header > nav > .top_menu > div.container button.slide {display:none;}

div[data-role=wrapper] > header > nav > .top_all_menu {position:relative; top:-2px; right:0; z-index:12; width:100%; padding:20px 0; background-color:#2A2C7F; display:none; z-index:999;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul {list-style:none; display:table; table-layout:fixed; width:calc(100% + 40px); margin:0 -20px; padding:0; box-sizing:border-box;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li {display:table-cell; width:100%; vertical-align:top; border-left:1px solid rgba(255,255,255,0.1); padding-left:0;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li:first-child {border-left:0 solid rgba(255,255,255,0.3);}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box {padding:10px 20px;}
div[data-role=wrapper] > header > nav > .top_all_menu > div > .to.container > ul > li > div.box:first-child {min-height:260px;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > h4 {font-size:1.43rem; color:#fff; margin-bottom:20px;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul {list-style:none;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > i {width:2px; height:2px; display:block; float:left; margin:14px 8px 14px 0; background:rgba(255,255,255,0.7); vertical-align:middle;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > a {display:inline-block; max-width:calc(100% - 10px); min-height:20px; line-height:20px; font-size:1.00rem; color:rgba(255,255,255,0.7); text-decoration:none; vertical-align:middle; margin:5px 0; box-sizing:border-box; word-break:break-word; word-wrap:break-word;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > a:hover {color:#fff; text-decoration:underline;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > ul {list-style:none; margin-bottom:10px;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > ul > li {padding-left:10px;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > ul > li > a {color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.86rem;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container > ul > li > div.box > ul > li > ul > li > a:hover {color:#fff; text-decoration:underline;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container {position:relative;}
div[data-role=wrapper] > header > nav > .top_all_menu > div.container:after {top:0; right:15px; border:solid 0 transparent; content:" "; height:0; width:0; position:absolute; border-bottom-color:#2A2C7F; border-width:10px; margin-top:-40px;}

/* oz46 GNB */
div[data-role=wrapper] > header.on > nav > .top_menu > div.container > div.submenu {display:flex;}
div[data-role=wrapper] > header.on div[data-widget=coursemos-userbar][data-templet=topbar] * {color:rgba(255,255,255,0.8);}
div[data-role=wrapper] > header.on div[data-widget=coursemos-userbar][data-templet=topbar] > button[data-action=notification] i {filter: brightness(0) invert(1);}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li:hover > a {color:#E50E84;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu {all:unset; font-size: 1.00rem; display:none; width:1420px; justify-content: space-between; position: relative; height:0; padding-bottom: 320px; transform: translateX(-20px); background:#fff;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu:after {content:""; position: absolute; width:100%; height: 1px; bottom: 0; right:50%; transform: translateX(50%);}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.img_box {flex-shrink: 0; position: relative; bottom: 0; user-select: none; pointer-events: none;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.img_box > div {position: absolute; right:40px; top:50px;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.img_box > div p {color:#fff; font-size: 1.14rem; text-align: right;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.img_box > div p.subheading {font-size: 1.71rem; padding-bottom: 10px; font-weight: 600;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.menu_box {flex:1; display:flex;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_box {display:flex;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_box > li {display:flex; flex-direction: column; height:320px;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_box > li > div.menu_header a > svg {stroke:#222;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_box > li:last-child {border-right: 1px solid #ddd;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.menu_header {box-sizing: border-box; padding-inline:30px; padding-block:16px; height:53px; background-color: #f4f4f4; color:#222; font-size: 1.29rem; letter-spacing: -0.01em; font-weight: 600; width: 190px; max-width:240px; border-bottom: 3px solid transparent; text-align: left; white-space: nowrap; border-right: 1px solid #ddd;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.menu_header a {height:17px;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu div.menu_header:last-child {border-right: none;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_list {width:142px; flex:1; display:flex; flex-direction: column; gap: 20px; padding:17px 16px 0; border-top: 3px solid transparent;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_list > li.menu_item {text-align: left;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_list > li.menu_item a {font-size: 1.14rem; color:#222;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_list > li.menu_item:hover a {color:#E50E84;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_list:first-child {border-left: 1px solid #ddd;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > div.submenu ul.menu_box > li.on > ul.menu_list {border-top-color:#E50E84;}

div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li.on,
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li:hover {border-bottom: 3px solid #E50E84;}
div[data-role=wrapper] > header > nav > .top_menu > div.container > ul > li {border-bottom: 3px solid transparent;}

div[data-role=wrapper] > header.fixed > .top {background-color: rgba(0,0,0,0.7);}
div[data-role=wrapper] > header.fixed > .top > div.container > .link > a {color:#fff;}
div[data-role=wrapper] > header.fixed div[data-widget=coursemos-userbar][data-templet=topbar] * {color:rgba(255,255,255,0.8);}
div[data-role=wrapper] > header.fixed div[data-widget=coursemos-userbar][data-templet=topbar] > button[data-action=notification] i {filter: brightness(0) invert(1);}
div[data-role=wrapper] > header.fixed > nav > .top_menu {background-color: rgba(0,0,0,0.7);}
div[data-role=wrapper] > header.fixed > nav > .top_menu > div.container > ul > li > a {color:rgba(255,255,255,0.8);}

/* 서브페이지 헤더 fixed */
div[data-role=wrapper] > header.fixed {position:fixed; padding-bottom:130px; background-color:rgba(0,0,0,0.7); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05); transition:none;}
div[data-role=wrapper] > header.fixed > nav > .top_menu > div.container > div > button {color:#fff;}
div[data-role=wrapper] > header.fixed.on {padding-bottom:450px; transition:height 0.2s;}

@media (max-width:1199px) {
	div[data-role=wrapper] > header.fixed.on {padding-bottom:132px;}
}
/* footer */
footer {background:#000; position:relative;}
footer .flex {display:flex; align-items:flex-end; gap:20px;}
footer .flex.al_c {align-items: center;}
footer > div.menu > div.container {display:flex; align-items:center; justify-content:space-between; gap:48px ; padding:60px 0 20px;  border-bottom:1px solid #f4f4f421;}
footer > div.menu > div.container::after,
footer > div.menu > div.container::before {content:unset;}
footer > div.menu > div.container div.box.left > a {padding-left:5px; font-size: 1.14rem; color: #fff; font-weight: 400;}
footer > div.menu > div.container div.box ul.sns {display:flex; align-items:center; gap: 10px;}
footer > div.menu > div.container div.box ul.sns > li {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;border-radius: 15px; background: rgba(255, 255, 255, 0.80); }
footer > div.menu > div.container div.box ul.sns > li:last-child {margin-right:0;}
footer > div.menu > div.container div.box ul.sns > li > a {display:inline-block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; }
footer > div.menu > div.container div.box ul.sns > li.youtube > a {background-image:url(../images/ico_youtube.svg);}
footer > div.menu > div.container div.box ul.sns > li.insta > a {background-image:url(../images/ico_insta.svg);}
footer > div.menu > div.container div.box ul.sns > li.blog > a {background-image:url(../images/ico_blog.png);}
footer > div.menu > div.container div.box ul.sns > li.kakao > a {background-image:url(../images/ico_kakao.png); background-size:25px 25px;}
footer > div.menu > div.container div.box div.f_logo {width:120px; height:42px;}
footer > div.menu > div.container div.box div.f_logo > a {display:inline-block; width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center;}
footer > div.menu > div.container div.box div.sub_logo {height: 32px; display: flex;}
footer > div.menu > div.container div.box div.sub_logo > a {background: url(../images/img_sub_logo_w.svg)no-repeat center center; width: 202px; height: 30px; display: flex;}
footer > div.menu > div.container div.box div.fam_site {min-width:175px; border-radius: 9px; background:#1A1A1A;}

footer > div.copyright div.info {display: flex; flex-direction: column; position:relative;} 
footer > div.copyright > div.container {position:relative; display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; margin-top: 20px; padding-bottom: 60px;}
footer > div.copyright > div.container:before,
footer > div.copyright > div.container:after {content: none;}
footer > div.copyright div.info address > span {font-style:normal; color:#fff; font-size: 1rem; line-height:2;}
footer > div.copyright div.info p.copyright {margin-top:10px; color: #DEDEDE; font-size: 1rem; font-weight: 400; line-height: 26px; }
footer > div.copyright button.move_top {width:60px; height:60px; position:absolute; right:10px; top:50%; transform:translateY(-50%); border:1px solid #DADADA; background: rgba(255, 255, 255, 0.00); border-radius:50%; background:transparent;}

footer > div.copyright div.policy {display: flex; align-items: center; gap: 40px;}
footer > div.copyright div.policy > a { display: flex; height: 32px; align-items: center; color: #FFF; font-size: 1rem; font-weight: 400; line-height: 2; }

footer div[data-role=input][data-type=select] > button {display: flex; align-items: center; justify-content: space-between; background:#1A1A1A; color:#B8B8B8;border: unset;border: 1px solid #666; padding: 0 10px;}
footer div[data-role=input][data-type=select] > button > span { color: #FFF; font-size: 0.86rem; font-weight: 400; padding: 0;}
footer div[data-role=input][data-type=select] > button > i::before{font-size: 1.07rem; }
footer div[data-role=input][data-type=select].extend > button {border-color:#4d4d4d;}
footer div[data-role=input][data-type=select].extend > button > svg {transform: rotate(180deg);}
footer div[data-role=input][data-type=select] > button:active {border-color:#4d4d4d;}
footer div[data-role=input][data-type=select] > ul {border:1px solid #4d4d4d;}
footer div[data-role=input][data-type=select] > ul {background:#1A1A1A;}
footer div[data-role=input][data-type=select] > ul > li {color:#B8B8B8;}
footer div[data-role=input][data-type=select] > ul > li:hover {font-weight:bolder;}



/* 로그인 팝업 */
div[data-role=modal] > form > div[data-role=context] div[data-role=input][data-type=select] > button > span {width:calc(100% - 45px);}
div[data-role=modal] > form > div[data-role=context] div[data-role=input][data-type=select] > button span::before {content:''; display:inline-block; width:23px; height:16px; margin-right:10px; background:url(../images/ico_login.png)no-repeat center; vertical-align:middle; }
div[data-role=modal] > form > div[data-role=context] div[data-role=input][data-type=select] > button > i {position:relative; width:45px; box-sizing:border-box;}
div[data-role=modal] > form > div[data-role=context] > div.join {display:flex; align-items:center; justify-content:center;}
div[data-role=modal] > form > div[data-role=context] > div.join > a {display:inline-block; margin-right:8px; color:#000; font-size: 1.00rem; text-align:center; text-decoration:underline; text-underline-position:under;}
div[data-role=modal] > form > div[data-role=context] > div.join > a:last-child {margin-right:0;}
div[data-role=modal] > form > div[data-role=context] > div.button > button {margin:15px 0; background:#2A2C7F; color:#fff; font-size: 1.29rem; border:0; width:100%; height:48px; line-height:48px; cursor:pointer; border-radius:5px;}
div[data-role=modal] > form > div[data-role=context] .errorBox {display:none; margin:5px 0 10px 0; font-size: 0.86rem; color:red;}

article.footer_bg {position: relative; width: 100%;height: 600px;background-image: url(../images/bg_footer.png);background-size: cover;background-position: 50% 100%;background-repeat: no-repeat;}
article.footer_bg:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}
article.footer_bg > div.container {position: relative;z-index: 1;}
article.footer_bg > div.container.overflow-hidden {overflow: hidden;}
article.footer_bg > div.container > div.footer_content_wrap {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 600px;gap: 100px;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content{width: 100%; display: flex;height: auto;gap: 40px; align-items: start;flex-direction: column;justify-content: center;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_title_wrap {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;box-sizing: border-box;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_title_wrap > h4.footer_content_title_sub {color: #C8C8C8;text-align: start;font-size: 1.71rem;font-weight: 400;line-height: 32px;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_title_wrap > h4.footer_content_title {color: #FFF;text-align: start;font-size: 1.71rem;font-weight: 400;line-height: 32px;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap {width: 100%;box-sizing: border-box; display: flex;align-items: center;justify-content: center;flex-direction: row;gap: 24px;}


article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list { width: 99%; justify-content: center; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list div.bar { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.20); } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li > a { display: block; min-width: 220px; height: 60px; transition: 0.5s ease-in-out; border-radius: 8px; background-color: transparent; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_01 > a { background-image: url(../images/img_univ_list_01.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_02 > a { background-image: url(../images/img_univ_list_02.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_03 > a { background-image: url(../images/img_univ_list_03.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_04 > a { background-image: url(../images/img_univ_list_04.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_05 > a { background-image: url(../images/img_univ_list_05.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_06 > a { background-image: url(../images/img_univ_list_06.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_07 > a { background-image: url(../images/img_univ_list_07.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_08 > a { background-image: url(../images/img_univ_list_08.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_09 > a { background-image: url(../images/img_univ_list_09.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_10 > a { background-image: url(../images/img_univ_list_10.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_11 > a { background-image: url(../images/img_univ_list_11.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_12 > a { background-image: url(../images/img_univ_list_12.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li.univ_13 > a { background-image: url(../images/img_univ_list_13.png); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li > a:hover { position: relative; filter: brightness(0.85) blur(0.5px); box-shadow: 0 4px 24px 0 rgba(143, 76, 221, 0.08); border-radius: 8px; transition: 0.4s box-shadow, 0.4s filter; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li > a::after { content: ''; display: block; pointer-events: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 8px; background: rgba(255,255,255,0.18); opacity: 0; transition: 0.3s opacity; } article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list.univ > li > a:hover::after { opacity: 1; }
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list {width: 100%; justify-content: start; display: flex;align-items: center;flex-wrap: nowrap;gap: 15px;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list div.bar {width: 1px;height: 40px;background: rgba(255, 255, 255, 0.20);}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list > li {min-width: 220px;height: 60px;transition: 0.5s ease-in-out;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_01 {background-image: url(../images/ico_footer_logo_on_01.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_02 {background-image: url(../images/ico_footer_logo_on_02.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_03 {background-image: url(../images/ico_footer_logo_on_03.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_04 {background-image: url(../images/ico_footer_logo_on_04.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_05 {background-image: url(../images/ico_footer_logo_on_05.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_06 {background-image: url(../images/ico_footer_logo_on_06.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_07 {background-image: url(../images/ico_footer_logo_on_07.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_08 {background-image: url(../images/ico_footer_logo_on_08.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
article.footer_bg > div.container > div.footer_content_wrap > div.footer_content > div.footer_content_list_wrap > div.marquee-wrapper ul.footer_content_list.company_list > li.company_09 {background-image: url(../images/ico_footer_logo_on_09.png);background-size: cover;background-position: center;background-repeat: no-repeat;}

/* section.footer_bg {position: relative; width: 100%;height: 600px;background-image: url(../images/bg_footer.png);background-size: cover;background-position: 50% 100%;background-repeat: no-repeat;}
section.footer_bg:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}
section.footer_bg > div.container {position: relative;z-index: 1;}
section.footer_bg > div.container > div.footer_content{display: flex;height: 600px;gap: 100px; align-items: center;flex-direction: column;justify-content: center;}
section.footer_bg > div.container > div.footer_content > h4.footer_content_title {color: #FFF;text-align: center; font-size: 2.71rem; font-weight: 400;line-height: 54px;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap {display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 24px;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list {justify-content: center; display: flex;align-items: center;flex-wrap: wrap;gap: 15px;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list div.bar {width: 1px;height: 40px;background: rgba(255, 255, 255, 0.20);}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li {width: 220px;height: 60px;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(1) {background-image: url(../images/ico_footer_logo_01.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(3) {background-image: url(../images/ico_footer_logo_02.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(5) {background-image: url(../images/ico_footer_logo_03.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(7) {background-image: url(../images/ico_footer_logo_04.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(9) {background-image: url(../images/ico_footer_logo_05.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > div:nth-child(10) {display: none;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(11) {background-image: url(../images/ico_footer_logo_06.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(13) {background-image: url(../images/ico_footer_logo_07.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(15) {background-image: url(../images/ico_footer_logo_08.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > li:nth-child(17) {background-image: url(../images/ico_footer_logo_09.png);background-size: cover;background-position: center;background-repeat: no-repeat;} */

@media screen and (max-width:1419px){
	section.footer_bg > div.container > div.footer_content > div.footer_content_list_wrap > ul.footer_content_list > div:nth-child(10) {display: block;} 
}


@media screen and (max-width:1400px){
	footer div.copyright button.move_top {right:0; bottom:40px;}
}

@media screen and (max-width:1200px){
	div[data-role=wrapper] > header > nav > .top_menu > div.container > ul {display:none;}
	div[data-role=wrapper] > header > nav > .top_menu > div.container button.slide {position:absolute; top:50%; right:20px; transform: translateY(-50%); display:inline-block; width: 36px; height: 36px; color:#fff; background-color: transparent; font-size: 1.43rem;}
	div[data-role=wrapper] > header > .top {display:none;}
}

@media screen and (max-width:1000px){
	header div.top div.container {justify-content:flex-end;}
	header div.top div.user ul.sns  {display:none;}
	header div.top div.link {display:none;}
	footer div.menu {flex-direction:column; align-items:flex-start;}
	footer div.menu div.box.left {margin-bottom:20px;}
}


@media screen and (max-width:761px){
	main section.site ul {width:100%; overflow-x:auto;}
	main section.site ul li {margin-right:30px;}
	main section.site ul li:last-child {margin-right:0px;}
}

@media screen and (max-width:460px){
	footer div.menu div.box.left > a {margin-left:20px;}
	footer div.menu div.box ul.sns {margin-bottom:20px;}
	footer div.menu div.box.link {flex-direction:column; align-items:flex-start; width:100%;}
	footer div.menu div.box.link div[data-role=input] {width:100%;}
}

@media screen and (max-width:340px){
	footer div.menu div.box.left {flex-direction:column; align-items:flex-start;}
	footer div.menu div.box.left > a {margin-left:0; margin-top:15px;}
	header nav div.top_menu h1 a.text {padding-left:20px; font-size: 0.86rem; }
	header nav div.top_menu h1 a.text::before {left:10px;}
}