@charset "utf-8";

#location{position: relative; text-align: right; padding: 1.5rem 0px 1.4rem; background: rgba(0,0,0,.03); padding-right: calc(((100vw -  calc(min(90%, 1380px))) / 2) + calc( calc(min(90%, 1380px)) * 0.19) + 2%); }
#location:after{content: ''; position: absolute; left: 0px; right: 0px; bottom: 0px; height: .3rem; background: linear-gradient(90deg, #2F6050 30%, #D22 100%), rgba(0, 0, 0, 0.03);;}
#location>li{display: inline-block; font-size: 1.3rem; color: #666;  font-weight: 300}
#location>li+li:before{display: inline-block; content: '>'; margin:0px 9px 0px 7px; opacity: .5;}
#container{display: flex; flex-wrap:wrap; gap:6.5%;  justify-content:space-between}
#container #lmenu{flex:0 0 20%; max-width: 270px; min-width: 200px}
#container #lmenu .tit{text-align: center; padding: 4.4rem 1rem; background: var(--color_sub02); color: #fff; font-weight: 300; font-size: 2.6rem;}
#container #lmenu ul li{border-top:1px solid #eee}
#container #lmenu ul li:first-child{border-top:0px}
#container #lmenu ul li:last-child{border-bottom:1px solid #eee}
#container #lmenu ul li a{display: block; padding: 1.5rem 1rem 1.4rem; font-size: 1.55rem; color: #484848; transition:padding-left ease .3s}
#container #lmenu ul li.select{border:1px solid var(--color_sub01)}
#container #lmenu ul li.select+li{border-top: 0px;}
#container #lmenu ul li.select a{background: #edf5f3; color: var(--color_sub02); padding-left: 9%}
#container #contents{flex:1 1 70%; }
#con_tit{display: flex; justify-content: space-between; position: relative; padding: 4.5rem 0px; border-bottom:1px solid #dfdfdf}
#con_tit h3{/* flex-grow:1;  */font:bold  3.2rem 'nexon_lv1'; color: #333;}
#shareSns{display:flex; position: relative; margin-right: 1rem;}
#shareSns li>a{display: block; position: relative; width: 34px; height: 34px; font-size: 0px; background:url(/img/sub/ic_snsShare.png) no-repeat -8px  -58px/100px}
#shareSns>li>a.btn_shareSns{background-position-y:-8px}
#shareSns div{display: none; position: absolute; background: var(--color01); padding: 2.5rem 2rem; left: calc(100% + 1rem); top: -4.5rem; box-shadow:0px 1px 3px rgba(0,0,0,.2)}
#shareSns div>p{font-size: 1.125em; margin-bottom: 2rem;}
#shareSns div ul{display: flex; flex-direction: column; gap:5px; --bgpy:-10px; --bgGap:50px}
#shareSns div ul li>a{background-position-x:-60px; width: 32px; height: 32px}
#shareSns div ul li:nth-child(1)>a{background-position-y:var(--bgpy)}
#shareSns div ul li:nth-child(2)>a{background-position-y:calc(var(--bgpy) - var(--bgGap))}
#shareSns div ul li:nth-child(3)>a{background-position-y:calc(var(--bgpy) - var(--bgGap)*2)}
#shareSns div ul li:nth-child(4)>a{background-position-y:calc(var(--bgpy) - var(--bgGap)*3)}
#shareSns div ul li:nth-child(5)>a{background-position-y:calc(var(--bgpy) - var(--bgGap)*4)}
#shareSns div ul li:nth-child(6)>a{background-position-y:calc(var(--bgpy) - var(--bgGap)*5)}
#shareSns .closeSns{background: none;}
#shareSns .closeSns:before,
#shareSns .closeSns:after{display: block; content: ''; position: absolute; top: 48%; left: 50%; margin-left: -1rem; width: 2.3rem; height: 2px; background: #333; transform:rotate(45deg); transform-origin: center}
#shareSns .closeSns:after{transform:rotate(-45deg)}
#tab{overflow-x:auto;  background: #fff; z-index: 1; }
#detail_con #tab{margin-top: -5rem}
/* #lmenu+#contents #tab{margin-top: 0px;} */
#tab>ul{display: flex; flex-wrap: wrap; white-space: nowrap; position: relative;}
#tab>ul:After{display: block; content: ''; position: absolute; bottom: 0px; width: 100%; height: 1px; background: #ccc; }
#tab>ul>li{padding: 0px clamp(1rem, 2.5%, 2.5rem); border-bottom:1px solid #ccc}
#tab>ul>li:first-child{padding-left: .5vw;}
#tab>ul>li:first-child:After{display: block; content: ''; position: absolute; left: 0px; width: 100%; height: 1px; background: #ccc;}
#tab>ul>li a{display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 2rem 2px 1.7rem; height: 100%; font-size: 1.6rem;}
#tab>ul>li a:after{display: block; content: ''; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 3px;  transition:all ease .1s; z-index: 1;}
#tab>ul>li.select a{color: var(--color01); }
#tab>ul>li.select a:after{ left: 0px; right: 0px; background: var(--color01); }
#tab.ic_tab>ul{flex-wrap:wrap;}
#tab.ic_tab>ul>li{flex:0 1 14.2857%; padding: 0px; max-width: 15rem;}
#tab.tabsize>ul>li{flex-basis:11.1%}
#tab.ic_tab>ul>li:first-child{padding-left: 0px;}
#tab.ic_tab>ul>li a{gap:1rem; flex-direction: column; white-space: nowrap; padding: 1.7rem 2px 1.2rem; font-size: 1.5rem;}
#tab:not(.ic_tab){position: sticky; left: 0px; top: -1px; }
#tab ul ul{display: none;}
.stab{display: flex; justify-content: center; flex-wrap: wrap; gap:.5rem; margin: 3rem auto 5rem}
.stab li a{display: block; padding: 1rem 3rem .8rem; background: #f5f5f5; border:1px solid rgba(0,0,0,0.1); border-radius:50px}
.stab li a.select{background: var(--color); color: #fff; box-shadow:0px 1px 5px rgba(0,0,0,.2)}
.stab:has(li:first-child:last-child){display: none;}
.stab:has(li:nth-child(0):last-child){display: none;}
.stab:not(:has(li)){display: none;}

#detail_con{margin: 5rem 0px 10rem; min-height: 50rem;}
.para01{margin-left:5px}
.para02{margin:10px 10px 10px 1.2em;}
.tbox{position: relative; padding:clamp(18px, 4.5%, 30px) clamp(18px, 5%, 35px);  border-radius:.5rem; line-height:150%; background: #f5f5f5}
.tbox .tbox_tit{margin-bottom: 1rem; color: var(--color_sub01);; font-size: 1.8rem;}
.tbox span.tbox_tit{margin-bottom: 0rem; margin-right: .5rem;}
h4{margin-top: 9rem; padding-left:4rem; margin-bottom: 1.5em; font:bold 1.8em/1.3 "nexon_lv1", sans-serif; color: #222; letter-spacing: -1px; background:url(/img/sub/bl.png) no-repeat left .2rem;}
#detail_con>h4:first-child{margin-top: 0px;}
.bl02{position: relative; margin-bottom:10px; padding-left:2rem; color:var(--color_sub01); font-weight: bold; font-size:1.75rem}
.bl02:before{display: block; content:''; position: absolute; left: 0px; top: .4rem; width:1.6rem; height: 1.6rem; border-radius:2rem; border:4px solid  var(--color_sub01); opacity:.8;}
.bl02_txt{margin-left: 2rem; margin-bottom: 1rem;}
.bl03:not(ul, ol),
.bl03>li{position:relative; margin:.7rem 0px; padding-left:11px; word-break:keep-all}
.bl03:not(ul, ol):before,
.bl03>li:before{display:block; content:''; position:absolute; left:0px; top:.7rem; width:.5rem; height:.5rem; background:var(--color_sub01); opacity: .5;}
.bl03+.bl04{margin-top:.5rem; margin-left:1.5rem;}
.bl03 .bl04{margin-top: .8rem; margin-bottom: 1.5rem;}
.bl03 .data .bl04{margin-top: 0rem;}
.bl04+.bl03{margin-top:2rem;}
p.bl03{margin-top:2rem}
.bl04:not(ul),
.bl04>li{position:relative; margin:1.5px 0px; padding-left:1.5rem; word-break:keep-all; font-weight:300; color: #333; letter-spacing: .3px;}
.bl04:not(ul):before,
.bl04>li:before{display:block; content:''; position:absolute; left:0px; top:1rem; width:.6rem; height:1px; background:#aaa; }
.bl04 .wfont{font-weight: normal;}
.bl04+.bl04{margin-top:.5em}
.nobl{padding-left: 0px !important}
.nobl:before,
.nobl>li:before{display:none !important;}
.nobl .nobl:not(li){margin-left: 1rem; margin-bottom: 1rem;}
.nobl .nobl>li{margin: .5rem 0px}
.para01{margin-top:4rem; margin-left:2rem;}
.para02, .bl03.para02, .bl04.para02{margin-left:2rem}
h4+.para02{margin-top:1.5rem; margin-left: 3rem;}
.bl03+.bl04.para02{margin-left: 1rem;}
.dashList{border-top:2px solid #333}
.dashList>li{padding: 2rem 1rem; border-bottom: 1px dashed #ddd;}
h4+.dashList{margin-top: 2rem; margin-left: .5rem;}
h4+.step{margin-top: 2rem;}
.dashList.bl03>li{margin:0px; padding-left:2.3rem;}
.dashList.bl03>li:before{top: 3rem; left: 1rem;}

.boxList{display: flex; flex-wrap:wrap; gap:.8rem}
.boxList>:where(dl,p){flex:1 0 30%; position: relative; padding:clamp(15px, 2.5%, 2.5rem) max(3.5rem, 3.5%) clamp(13px, 2.2%, 2.2rem); background:#f0f0f0; /* border:1px solid #666;  */border-radius:1rem;}
.boxList:not(.col2)>dl:first-child:nth-last-of-type(4n),
.boxList:not(.col2)>dl:first-child:nth-last-of-type(4n)~dl{flex-basis:23.5%}
.boxList.col2>dl{flex-basis:49%}
.boxList>dl>dt{font-size: 1.125em; font-weight: bold;}
.boxList>dl>dd{margin-top: .5rem; opacity: .9;}
.boxList>p{text-align: center;}
h4+.step{margin-top: 2rem;}
.conbtnBox{text-align: center; margin-top: 4rem;}
.tbox+.conbtnBox{margin-top: 2rem;}
[class^=conbtn]:not(.conbtnBox){display: inline-block; padding:1.5rem max(3rem, 2.5vw) 1.3rem; border-radius:.5rem; ; font-size: 1.8rem;}
[class^=conbtn][target=_blank]:after{display: inline-block; content:''; position: relative; top: -0.9rem;  margin-left: .5rem;  width: .6rem;  height: .6rem; background: url(/img/inc/ic_blank.png) no-repeat left center / 200%;}
.conbtn{background: var(--color-sub02); color: #fff; box-shadow:0px 2px 5px rgba(0,0,0,.1), 0px 1px 2px rgba(0,0,0,.1); text-shadow:0px 0px 1px rgba(0,0,0,.5); transition:all ease .2s}
.conbtn:hover{background: var(--color_sub01)}
.consbtn{display: inline-block; line-height: 100%; padding: 5px 10px; background: var(--color01); color: rgba(0,0,0,.8); box-shadow:0px 1px 3px rgba(0,0,0,.1);  border:1px solid rgba(0,0,0,.1); color: #fff !important; font-size: .9em; border-radius:50px}

.step>li{position: relative; padding-left: 5rem; padding-top: 2rem; min-height: 6rem;  }
.step>li:before{content: ''; position: absolute; top:2rem; left: 1.6rem; width:.3rem; height: 100%; background: #f0f0f0;}
.step>li:last-child::before{display: none;}
.step>li:after{display: block; content: ''; clear: both;}
.step>li>.num{position: absolute; left: 0px; top: 1.5rem;  width:2.8rem; height:2.8rem; line-height: 2.8rem; text-align: center; border:3px solid #eee; background:#eee; border-radius:5rem; box-sizing:content-box}
.step>li:first-child>.num{border-color:var(--color); color: var(--color); background: #fff;}
.step>li>div{float:left; padding: max(2.5%, 20px) max(3%, 20px); max-width: calc(100% - 5rem); border:1px solid #ddd; border-radius:1rem}
.step>li>.tit+div{float:none; max-width: 100%;}
.step>li>.tit{margin-bottom: 1rem; font-size: 1.2em; color: var(--color_sub01)}
.step>li>dl{display:flex; }
.step>li>dl>dt{flex:0 0 25%; padding:max(2.5%, 20px); background:var(--color_sub01); border-radius:1rem 0px 0px 1rem; color: #fff;}
.step>li:first-child>dl>dt{background:var(--color);}
.step>li>dl>dd{flex-grow:1; padding:max(2.5%, 20px); border:1px solid #ddd; border-radius:0px 1rem 1rem 0px}
.step2{display:flex; flex-wrap:wrap; gap:5px 2rem; overflow:hidden}
.step2>li{flex-grow:1; text-align: center; position: relative; padding: 2rem 2rem;  border: 1px solid #666; border-radius:.5rem;}
.step2>li:before{content: ''; position: absolute; left: -2rem; top: 50%; margin-top: -.5rem; width: 1rem; height: 1rem; border:1px solid #333; border-width:1px 1px 0px 0px; transform:scale(.8)  rotate(45deg);}
.step2>li p.tit{font-size: 1.4rem;}
.step2>li p.tit:After{display: block; content: ''; margin:1.5rem  auto; width: 4px; height: 4px; border-radius:10px; background: #666; box-shadow: -8px 0px 0px #ccc, 8px 0px 0px #ccc}


.data{text-align:center; width:100%; }
.data thead{border-top:2px solid var(--color_sub02)}
.data thead th{padding:11px 10px 8px; background:#fafafa; border:1px solid #ddd; border-left-width:0px; font-weight: 500;}
.data thead th:first-child{border-radius:var(--bdrd) 0px 0px var(--bdrd); border-left-width:1px}
.data thead th:last-child{border-radius:0px var(--bdrd) var(--bdrd) 0px}
.data tbody{font-weight:300;}
.data tbody tr th{font-weight: normal;}
.data tbody tr :where(td, th){padding:8px max(2%, 10px); border:1px solid #ddd; border-top-width:0px; border-left-width:0px; font-size: 1.4rem;}
.data tbody tr :where(td, th):first-child{border-left-width:1px}
.data tbody tr th[rowspan]{border-right-width:0px}
.data tbody tr th[rowspan]+:where(td, th){border-left-width:1px}
.data th:first-child, .data td:first-child{border-bottom-left-radius:0px !important}
.data th:last-child, .data td:last-child{border-bottom-right-radius:0px !important}
.data :where(.bl03, .bl04){text-align: left;}
.tblconPd{padding:.4vw .8vw .3vw; }


/***************************************************************************************************************************/


@media screen and (max-width:1280px){
	#container{display: block;}
	#location{display: none;}
	#lmenu{display: none;}
	#con_tit{gap:10px; align-items: center; width: 100vw; margin-left: calc(0px - var(--blank)); padding: min(13vw, 4rem) 4%; background: #f5f5f5; border:0px}
	#con_tit h3{font-size: 2.7rem;}
	#shareSns{flex-direction: column; margin-right: 0px;}
	#shareSns>li:first-child{display: none;}
	/* #shareSns div{left: auto; right: -4%; top: 100%; z-index: 1;} */
	#shareSns div{transform:translate(-100vw); top: calc(100% + 2rem); width: 104vw; z-index: 2;}
	#shareSns div ul{flex-direction: row; justify-content: center;}
}

@media screen and (max-width:800px){
	/* #tab>ul{flex-wrap: nowrap} */
	#tab>ul>li a{font-size: 1.5rem;}
	#tab.ic_tab>ul>li{flex:0 0 20%; padding:0px}
	#tab.ic_tab>ul>li a{font-size: min(1.5rem, 2.7vw);}
	.stab{display: flex; flex-wrap: wrap; justify-content: left; gap:2rem; padding: 3rem 2rem; margin-top: -2px; position: relative; border:1px solid #ddd; border-top: 2px solid var(--color); z-index: 1}
	.stab li a{all:unset; display: block; font-size: 1.4rem !important}
	.stab li a.select{background:none; box-shadow:none; color: var(--color)}
	h4{margin-bottom: .5em;  font-size: 1.6em; background-size: 2.8rem}
	.h4Box{flex-direction:column; gap:0px}
	.h4Box+.h4Box{margin-top: 15rem;}
	.h4Box>h4{flex-basis:auto}
	.h4Box>.h4Con{flex-grow:1; padding-top: 1rem;}
	.bl02{font-size: 1.25em;}
	.boxList{gap:.5rem}
	.boxList>:where(dl,p){flex:1 0 48%; padding:max(8%, 20px)}
	.tableBox{position: relative; overflow-x:auto; min-height: 165px;}
	.tableBox:before{display: block; content: ''; ; opacity: 1; position: absolute; top:max(20%, 50px); left: 50%; margin-left: -50px; width: 100px; height: 100px; background:url(/img/sub/ic_scroll.png) no-repeat center 10%/40%, rgba(0,0,0,.8); border-radius:600px; animation:tableBox 2s linear infinite alternate; transition:opacity linear .5s }
	.tableBox.on:before{opacity: 0; z-index: -1;}
	@keyframes tableBox{
	 0%{background-position: 10% center}
	 100%{background-position:right 10% center}
	}
	.tableBox table{width: 680px;}
}