:root{
	--black : #000;
	--black1 : #111;
	--black2 : #222;
	--black3 : #333;
	--black6 : #666;
	--blue : #4eadf9;
	--blue2 : #1178ca;
	--blue3 : #346df7;
	--green : #2faa44;
	--orange : #f79020;
	--gmarket : 'GmarketSans';
	--noto : 'Noto Sans';
}
.color-black{color: var(--black)}
.color-black1{color: var(--black1)}
.color-black2{color: var(--black2)}
.color-black3{color: var(--black3)}
.color-black6{color: var(--black6)}
.color-blue{color: var(--blue)}
.color-blue2{color: var(--blue2)}
.color-blue3{color: var(--blue3)}
.color-green{color: var(--green)}
.color-red{color: #ff4f4f}
.color-red2{color: #d74343}
.color-plus{color: #346df7}
.color-minus{color: #f33737}

.bg-blue{background: var(--blue); color: #fff}
.bg-blue2{background: var(--blue2); color: #fff}
.bg-black{background: var(--black); color: #fff}
.bg-black2{background: var(--black2); color: #fff}
.bg-black3{background: var(--black3) !important; color: #fff !important}
.bg-black6{background: var(--black6); color: #fff}
.bg-black9{background: #999; color: #fff}
.bg-black_r{background: #fff; border:1px solid #d1d1d1; color: #666}
.bg-black_2{background: #fff; border:1px solid #aaa; color: #000}
.bg-blue_r{background: #fff; border:1px solid var(--blue); color: var(--blue)}
.bg-grey{background: #f4f4f4; border:1px solid #ddd; color: #666}

.f14{font-size: 14px;}
.f15{font-size: .938rem;}
.f16{font-size: 1rem;}
.f17{font-size: 1.063rem;}
.f18{font-size: 1.125rem;}
.f20{font-size: 1.25rem;}
.f22{font-size: 1.375rem;}
.f24{font-size: 1.500rem;}
.f30{font-size: 1.875rem;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}

.gap5{gap:5px}
.gap10{gap:10px}
.gap15{gap:15px}

.j-end{justify-content:end !Important}

#header{padding: 0 100px; display: flex; left: 0; top:0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.2); position:absolute; left: 0; top:0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.2); z-index: 150;display: flex; align-items:center; justify-content:space-between; color: #fff; font-family: var(--gmarket); height: 100px}
#logo a{background: url('/resources/invil/img/common/logo@3x.png') no-repeat center center; background-size:100%; width: 144px; height: 68px; white-space: nowrap; overflow: hidden; text-indent: -999px; display: block;}

#logo{margin-top: -5px;}
#lnb{display: flex; justify-content:center}
#lnb > li{cursor: pointer}
#lnb > li > a{font-size: 20px; display: block;padding: 40px; border-radius:100px;display: flex;align-items: center; line-height: 1;}
#lnb > li:firs-child{padding-left: 0;}
#lnb .member{padding-right: 0;}
#lnb .member > a{background: linear-gradient(to right, #399bc1 0%,#0c76ca 100%)}
#header .btns-etc{display: flex; align-items:center}
#header .btn{white-space: nowrap; overflow: hidden; text-indent: -999px; height: 22px; background: url('') center center no-repeat; display: block;}
#header .btn-user{width: 23px; background-image: url('../img/common/ico-user.png'); background-size:100%}
#header .btn-sch{width: 22px; background-image: url('../img/common/ico-sch.png'); background-size:100%}
#header .btn-menu{width: 20px;height: 19px;display: flex;justify-content: space-between;align-items: end;flex-flow: column;}
#header .btn-menu span:first-child{width: 100%}
#header .btn-menu span:nth-child(2){width: 11px}
#header .btn-menu span:nth-child(3){width: 15px}
#header .btn-menu span{height: 3px; background: #fff; display: block;}
#header .btn-menu.tablet{display: none;}
#header .btns-etc > *:not(:first-child){margin-left: 20px;}

#header .btns-etc .member{font-weight: 500; font-size: 18px; border-radius:100px; width: 118px; height: 38px; border:2px solid #fff; align-items:center; justify-content:center;     display: flex; line-height: 1;}
#header .btns-etc .blank{font-size: 12px; font-weight: 500; font-family: var(--noto); background: url('../img/common/blank_w.png') center top no-repeat; padding-top: 30px; display: block; background-size:41px; line-height: 1}
#footer{background: #34383f; padding: 50px 0; position: relative; z-index: 1; word-break:keep-all}
#footer .inner{display: flex; justify-content:space-between; }
#footer .mid{flex:1; margin: 0 60px;}
#footer .link{display: flex; font-size: 1.125rem; color: #fff; margin-bottom: 20px; flex-wrap:wrap}
#footer .link span{position: relative;}
#footer .link span:not(:last-child){margin-right: 15px; padding-right: 18px;}
#footer .link span:not(:last-child):after{width: 3px; height: 3px; background: #909193; content: ''; position: absolute; right: 0; top:50%; margin-top: -1px; border-radius:50%}
#footer .add{color: #a6a7ab; line-height: 1.5;}
#footer .add span:not(:last-child){margin-right: 25px;}
#footer .copy{margin-top: 20px; font-size: .938em;}
#footer select{width: 280px; height:  50px; padding: 0 50px 0 30px; background: #25282d url('../img/common/f_sel.png') calc(100% - 30px) center no-repeat; border:0; border-radius:5px; color: #fff}
#footer .bot{margin-top: 20px; display: flex; align-items:center; justify-content: end;}
#footer .sns{width: 38px; height: 38px; border-radius:5px; background: #4d525b url('') center center no-repeat; white-space: nowrap; overflow: hidden; text-indent: -999px}
#footer .sns:not(:first-child){margin-left: 10px}
#footer .sns-f{background-image: url('../img/common/sns-f.png')}
#footer .sns-b{background-image: url('../img/common/sns-b.png')}
#footer .sns-k{background-image: url('../img/common/sns-k.png')}
#footer .acc{margin-left: 30px;}

.go-top{width: 50px; height: 50px; background: #2f3031 url('../img/common/go_top.png') center center no-repeat; position: absolute; right: 100px; bottom:100%; margin-bottom:18px; border-radius:50%; box-shadow: 5px 5px 10px rgba(0,0,0,.18); display: block; white-space: nowrap; overflow: hidden; text-indent: -999px}

#topNav .depth_w{position: absolute; left: 0;  top: 100%; width: 100%; background: #fff; word-break:keep-all; color: #666; display: flex; font-size: 1rem; font-family: var(--noto); display: none;}
#topNav .left{background: #ebf0f5 url('../img/common/menu_bg.png') calc(100% - 20px) calc(100% - 50px) no-repeat; padding: 60px 30px 100px 100px; width: 500px}
#topNav .t{font-family: var(--gmarket); display: block; margin-bottom: 25px; line-height: 1.15; color: #222; font-size: 40px; font-family: var(--gmarket);}
#topNav .txt{line-height: 1.5;}
#topNav .depth{display: flex; flex-wrap:wrap; margin: 0 0 -30px -30px;}
#topNav .depth > li{margin: 0 0 30px 30px; width: calc(25% - 30px)}
#topNav .right{flex:1; padding: 60px 40px 100px}
#header a{display: block;}
#topNav .depth > li > a{display: flex; height: 60px; align-items:center; padding: 20px 40px 20px 20px; position: relative; border:1px solid #ccc; border-radius:4px; font-size: 18px; font-weight: 500; color: #222; line-height: 1.15;}
#topNav .depth > li > a:after{width: 10px; height: 10px; border-radius:50%; right: 20px; top:50%; margin-top: -5px; background: #ccc; content: ''; position: absolute;}
#topNav .depth > li > a:hover,#topNav .depth > li > a:focus{color: var(--blue); border-color: var(--blue)}
#topNav .depth2{padding: 20px 20px 0}
#topNav .depth2 li:not(:first-child){margin-top: 10px;}
#topNav .depth2 a{position: relative; padding-left: 15px;}
#topNav .depth2 a:before{width: 5px; height: 5px; border-radius:50%; background: #ccc; content: ''; position: absolute; left: 0; top:50%; transform:translate(-50%)}
#topNav .depth2 a:hover,#topNav .depth2 a:focus{text-decoration: underline}

.body-member #header{position: relative; color:var(--black2); border-bottom: 1px solid #ccc;}

#header.active,.openSite #header,.openSiteM #header,.body-member #header{background: #fff;}
#header.active #lnb > li:not(.member) > a,#header.active .btns-etc,.openSiteM .btns-etc,.body-member #header .btns-etc{color: var(--black2)}
#header.active #logo a,.openSite #header  #logo a,.body-member #header  #logo a{background-image: url('../img/common/logo_c@3X.png')}
#header.active .btn-menu span,.body-member #header .btn-menu span{background-color: #393939}

#header.active .btn-user,
.openSiteM #header .btn-user,
.body-member #header .btn-user{background-image: url('../img/common/ico-user_b.png')}

#header.active .btn-sch,
.openSiteM #header .btn-sch,
.body-member #header .btn-sch{background-image: url('../img/common/ico-sch_b.png')}

#header.active .member,
.openSite #header .btns-etc .member,
.body-member #header .member{border-color: var(--black2); color: var(--black2)}
#header.active .blank,
.openSiteM #header .blank,
.body-member #header .blank{background-image: url('../img/common/blank_b.png')}
.openSite #topNav{display: none;}
.openSite .btns-etc a,.openSite .btns-etc button{opacity:0}
.openSite .btns-etc .member,
.openSite .btns-etc .btn-menu{opacity:1}

.openSite #header .btn-menu,.openSiteM .btn-menu{background: url('../img/common/btn-close.png') center center no-repeat; background-size:20px}
.openSite #header .btn-menu span,
.openSiteM #header .btn-menu span{display: none;}

.openSite{overflow: hidden}

.openSiteM #header{}


#allMenu .member, #lnb .member{display: none;}
#allMenu{position: absolute; left: 0; top:100%; background: #fff; display: block; width: 100%; color: var(--black3); line-height: 1.15;word-break: keep-all; display: none;}
#allMenu .depth1{font-size: 36px; font-weight: 700; line-height: 1; color: var(--black2); margin-bottom: 20px;; display: block;}
#allMenu .depth{display: flex; flex-wrap:wrap; gap:20px}
#allMenu .inner > li:not(:first-child){border-top: 1px solid #e5e5e5; padding-top: 40px; margin-top: 45px;}
#allMenu .depth > li{width: calc(25% - 60px/4); margin-bottom: 10px;}
#allMenu .depth > li > a{border:1px solid #ccc; padding: 0 40px 0 20px; height: 80px; display: flex; align-items:center; border-radius:4px; color: var(--black3); font-size: 20px; font-weight: 500; position: relative;     justify-content: space-between;}
#allMenu .depth > li > a:hover,#allMenu .depth > li > a:focus{border-color: var(--blue); color: var(--blue)}

#allMenu .depth2{margin-top: 20px; margin-left: 18px; font-family: var(--noto); color: var(--black6); font-size: 18px}
#allMenu .depth2 > li:not(:first-child){margin-top: 1em;}
#allMenu .depth2 > li{position: relative; padding-left: 13px;}
#allMenu .depth2 > li:before{position: absolute; left: 0; top:10px; width: 5px; height: 5px; background: #ccc; content: ''; margin-top: -2.5px; border-radius:50%}
#allMenu .depth2 a:hover,#allMenu .depth2 a:focus{text-decoration: underline}

#allMenu .depth > li > a:after{width: 8px; height: 8px; border-top: 2px solid #666; border-left: 2px solid #666; vertical-align: middle; display: block; content: ''; margin-left: 10px; transform: rotate(135deg);  margin-top: -4px; position: absolute; right: 20px; top:50%}
#allMenu .depth .is:before,
#allMenu .depth .is:after{width: 14px; height: 14px; border:0; right: 20px; top:50%; transform:none; ;background: #666; border:0; position: absolute; content: ''}
#allMenu .depth .is:before{width: 14px; height: 2px; margin-top: -1px;}
#allMenu .depth .is:after{height:14px;width:2px; margin-top: -7px; right: 26px; display: none;}
#allMenu .depth .is.on:after{display: block}

#allMenu .in{height: 100%; padding: 80px 0; overflow-y: auto;}

#topNav_m{position: absolute; left: 0; top:100%; width: 100%; background: #fff; padding: 30px; color: var(--black3); border-top: 1px solid #eaebeb; display: none;}
#topNav_m .depth1{font-size: 22px; font-weight: 500; line-height: 1; color: var(--black2);  display: flex; padding: 0 20px; height: 80px; border:1px solid #ccc; border-radius:5px;    align-items: center; line-height: 1; position: relative;  justify-content: space-between;}
#topNav_m .depth{font-family: var(--noto)}
#topNav_m .depth > li > a{font-weight: 500; font-size: 20px; color: var(--black3); background: #f9f9f9; height: 70px;align-items: center; display: flex; padding: 0 30px 0 20px; position: relative;}
#topNav_m .depth > li:not(:last-child){border-bottom: 1px solid #e5e5e5;}
#topNav_m .depth > li:last-child{border-radius: 0 0 5px 5px}
#topNav_m .depth2{border:2px solid var(--blue); border-left: 0; border-right: 0; padding: 20px; font-size: 18px;}
#topNav_m .depth2 > li:not(:first-child){margin-top: 1em;}
#topNav_m .depth2 > li{position: relative; padding-left: 13px;}
#topNav_m .depth2 > li:before{position: absolute; left: 0; top:10px; width: 5px; height: 5px; background: #ccc; content: ''; margin-top: -2.5px; border-radius:50%}

#topNav_m > ul > li:not(:first-child){margin-top: 20px;}

#topNav_m .depth1:after{width: 8px; height: 8px; border-top: 2px solid #666; border-left: 2px solid #666; vertical-align: middle; display: block; content: ''; margin-left: 10px; transform: rotate(-135deg);  margin-top: -4px;}
#topNav_m .depth > li > a:after{width: 8px; height: 8px; border-top: 2px solid #666; border-left: 2px solid #666; vertical-align: middle; display: block; content: ''; margin-left: 10px; transform: rotate(135deg);  margin-top: -4px;  position: absolute; right: 20px; top:50%}
#topNav_m .depth1.opend{ background-color: var(--blue); color: #fff}
#topNav_m .depth1.opend:after{transform: rotate(45deg); border-color: #fff}

#topNav_m .depth .is:before,
#topNav_m .depth .is:after{width: 14px; height: 14px; border:0; right: 20px; top:50%; transform:none; ;background: #666; border:0; position: absolute; content: ''}
#topNav_m .depth .is:before{width: 14px; height: 2px; margin-top: -1px;}
#topNav_m .depth .is:after{height:14px;width:2px; margin-top: -7px; right: 26px; display: block;}
#topNav_m .depth .is.opend:after{display: none}
#topNav_m .depth, #topNav_m .depth2{display: none;}

.d-flex{display: flex; width: 100%}
.ml-1{margin-left: 1%;}
.ml-2{margin-left: 2%;}
.ml-3{margin-left: 3%;}
.ml-4{margin-left: 4%;}
.ml-5{margin-left: 5%;}

.a-start{align-items:start !important}
.a-center{align-items:center !important}
.a-end{align-items:end !important}
.j-start{justify-content:start !important}
.j-center{justify-content:center !important}
.j-end{justify-content:end !important}

.modal_w{position: fixed; left: 0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,.75); z-index: 151}
.modal-st1{position: relative; max-width:1920px;left: 50%; top:50%; max-height: 95%; width: 95%; transform:translate(-50%,-50%); word-break: keep-all; display: flex; flex-flow:column; padding-top: 50px;}
.modal-st1 .txt{font-size: 1rem; color: #333}
.modal-st1 .ico{display: block;margin: 0 auto 25px}
.modal-st1 .modal-cont{border-radius:8px; box-shadow:3px 3px 15px rgba(0,0,0,.3); padding: 40px;  overflow-y: auto; background: #fff;}
.modal-st1 .modal-close{position: absolute; right: 0;top:0;}
.modal-close{width: 40px; height: 35px; white-space: nowrap; overflow: hidden; text-indent: -999px; position: relative;}
.modal-close:before{transform: translate(-50%, -50%) rotate(45deg)}
.modal-close:after{transform: translate(-50%, -50%) rotate(-45deg)}
.modal-close:before,.modal-close:after{content: '';position: absolute;left: 50%;width: 100%;height: 3px;background: #fff; top:50%}