@charset "utf-8";
#tab{position: relative; --bgPos:calc((100vw - min(92vw, var(--wrapMx))) / 2)}
#tab p.tit{display: flex; align-items:center; position: relative; margin: auto; padding: 1em 0px 1.2em; width:var(--wrap); max-width: var(--wrapMx); height: 5em; font-family: "Elice Digital Baeum", sans-serif; font-weight: bold; color: #fff; font-size: 1.875em; }
#tab p.tit:before,
#tab p.tit:after{display: block; content: ''; position: absolute; top: 0px; height: 100%}
#tab p.tit:before{left:calc(0px - var(--bgPos)); width: 100vw; background: #0F52F0 url(/seochang/img/inc/bg.png) no-repeat left center /cover ; z-index: -1;}
#tab p.tit:after{opacity: .75; left:calc(0px - var(--bgPos)); width:calc(var(--bgPos) + 750px) ; background:linear-gradient(90deg, rgba(12, 46, 164, 1) 2.02%, rgba(15, 82, 240, 1) 40%, rgba(15, 82, 240, 0.00) 77.16%); z-index: -1;}
#tab ul{display: none; display: flex; flex-wrap: wrap; gap:2.5vw; margin: auto; width:var(--wrap); max-width: var(--wrapMx); }
#tab ul:after{display: block; content:''; position: absolute; left: 0px; bottom: 0px; width: 100vw; height: 1px; background: #ddd; z-index: -1;}
#tab ul li a{display: block; padding: 1.4em 0px 0px; font-size: 1.13em; font-weight: bold; height: 4.375em;}
#tab ul li.select a{color: var(--color_sub01); border-bottom:3px solid var(--color_sub01)}
#tab ul li.select a{color: var(--color_sub01);}
#tab ol{display: flex; position: absolute; padding:17px 0em 10px 3em; right:var(--bgPos); bottom: 4.375em; background: #fff; border-top-left-radius:55px}
#tab ol:After{display: block; content: ''; position: absolute; top: 0px; left: 100%; height: 100%; width: var(--bgPos); background: #fff;}
#tab ol:before{content: 'HOME';font-size: .925em; }
#tab ol>li{display: flex; align-items: center; font-size: .85em;}
#tab ol>li:before{content: ''; margin:0px 10px 0px 9px; width: 6px; height: 6px; border:1px solid #999; border-width:1px 1px 0px 0px; transform:rotate(45deg)}
#stab{margin-bottom: 2em;}
#stab ul{display: flex; gap:6px; align-items: center; justify-content: center; text-align: center; }
#stab ul li{flex-grow:1; max-width: 9em; }
#stab ul li a{display: block;padding: 10px; border-radius:50px; background: #f5f5f5;}
#stab ul li.select a{background: var(--color_sub01); color: #fff; box-shadow:0px 1px 10px rgba(0,86,164,.3), 0px 1px 3px rgba(15,86,164,.5)}
.sstab{display: flex; justify-content: center; gap:max(2.5%,1rem); padding-top:2rem; padding-bottom: 2rem; margin-bottom: 2rem; border-top:1px solid #eee; border-bottom:2px solid #333; }
.sstab>li a{position: relative; font-size: 1.1rem;}
.sstab>li.select a{font-weight: bold;}
.sstab>li.select a:before{display: block; content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 7px; background:var(--color04); opacity: .3; z-index: -1;}

#con_tit .wrap{position: relative; text-align: center;}
#con_tit h3{padding: 1.25em; ;font-family: "Elice Digital Baeum", sans-serif; font-size: 2.5em; color: #222; letter-spacing: -.05em;}
#shareSns{position:absolute; right:0rem; top:50%; margin-top:-1.2em; line-height:0px; z-index: 1; --snsPos:-34px}
#shareSns li{display:inline-block; letter-spacing: 0px;}
#shareSns li>a{display:block; width:34px; height:34px; border-radius:.8rem; background:#fff; font-size:0px; background:#fff url(/seochang/img/sub/ic_shareSns.png) left top / 300%}
#shareSns li>a.on{background-color:var(--color_sub02) !important}
#shareSns>li:nth-child(1)>a{background-color:var(--color_sub01); background-position-x:0px}
#shareSns>li:nth-child(2)>a{background-color:var(--color); background-position-x:var(--snsPos)}
#shareSns>li:nth-child(3)>a{background-color:#f0f0f0; background-position-y: bottom; background-position-x:calc(var(--snsPos) * 2)}
#shareSns div{visibility:hidden; opacity:0; display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center;  position:absolute; top:120%; right:0px; padding:0rem 3rem; background:var(--color_sub02); line-height:1.5; border-radius: 10px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25); color: #fff; white-space:nowrap; transition:all ease .3s}
#shareSns div.openSns{visibility:visible; opacity:1; padding:2.5rem 3rem}
#shareSns div>p{font-size:1.2em; font-weight: bold; text-shadow:0px 0px 1px rgba(0,0,0,0.2);}
#shareSns div ul{order:2; margin-top:1rem; font-size:0px}
#shareSns div ul>li{margin:.1rem}
#shareSns div ul>li>a.blog_share{background-position-y:calc(var(--snsPos) * 1)}
#shareSns div ul>li>a.kakao_share{background-position-y:calc(var(--snsPos) * 2)}
#shareSns div ul>li>a.kakaotalk_share{background-position-y:calc(var(--snsPos) * 3)}
#shareSns div ul>li>a.facebook_share{background-position-y:calc(var(--snsPos) * 4)}
#shareSns div ul>li>a.twitter_share{background-position-y:calc(var(--snsPos) * 5)}
#shareSns .closeSns{display: block; position: relative; top: -1rem; right: -1rem; width:2rem; height:2rem; font-size:0px; overflow:hidden}
#shareSns .closeSns:before,
#shareSns .closeSns:after{display:block; content:''; position: absolute; left:0%; top: 50%; width:2rem; height:1px; background:#fff; transform:rotate(45deg)}
#shareSns .closeSns:after{transform:rotate(-45deg)}

#detail_con{margin-bottom: 8em; }
.para01{margin-left:5px}
.para02{margin:10px 10px 10px 1.2em;}
.tbox{position: relative; padding:max(25px, 4.5%) max(25px, 5%);  border-radius:.5rem; line-height:150%; background: #f5f5f5};
.tbox .tbox_tit{font-weight:600; margin-bottom: 1rem; color: var(--color);; font-size: 1.6rem;}
.tbox span.tbox_tit{margin-bottom: 0rem; margin-right: .5rem;}
.h4Box{display:flex; gap:80px}
.h4Box+.h4Box{margin-top: 4rem; }
.h4Box>h4{flex:0 0 280px; padding-top: 4rem; letter-spacing: -.05em}
.h4Box>.h4Con{flex-grow:1; padding-top: 4rem; border-top:1px dotted #ddd}
.h4Box:first-child>h4{padding-top: 1rem;}
.h4Box:first-child>.h4Con{padding-top: 1rem; border-top:0px}
div[id*=tabcon]+.h4Box{margin-top: 4rem; }
h4{margin-bottom: 1.5em; font:bold 2.13em/1.3 "Elice Digital Baeum", sans-serif; color: #222; letter-spacing: -1px; }
.bl02{position:relative; margin:.7rem 0px; padding-left:1.5rem; word-break:keep-all; color: var(--color_sub01); ; font-size: 1.2rem; font-weight: bold;}
.bl02:before{display: block; content:''; position: absolute; left: 0px; top:.3rem; width:.6rem; height:.6rem; border:3px solid #fff; outline:2px solid var(--color_sub01); border-radius:50px; background:var(--color_sub01)}
.bl02~.bl02{margin-top: 3rem;}
.bl02_txt{margin-left: 2rem; margin-bottom: 1rem;}
:where(.boxList, .tbox) + .bl02{margin-top: 3rem;}
.bl03:not(ul, ol), .bl03>li{position:relative; margin:.7rem 0px; padding-left:.6rem; word-break:keep-all; }
:where(.bl03:not(ul, ol), .bl03>li:not(.refer)):before{display: block; content:''; position: absolute; left: 0px; top:.6rem; width:4px; height:4px; border-radius:1px; background:var(--color_sub01)}
.bl03+.bl04{margin-top:.5rem; margin-left:1rem;}
.bl03 .bl04{margin-top: .6rem; margin-bottom: 1.5rem;}
.bl03 .data .bl04{margin-top: 0rem;}
.bl04+.bl03{margin-top:1.5rem;}
p.bl03{margin-top:2rem}
.bl04:not(ul),
.bl04>li:not(.refer){position:relative; margin:3px 0px; padding-left:.8rem; word-break:keep-all; /* color: #777;  */font-weight: 300;}
.bl04>li.wfont{font-weight: bold;}
.bl04 table{color: #484848;}
.bl04:not(ul):before,
.bl04>li:not(.refer):before{content: '-'; position: absolute; left: 0px; top: 0.2em; font-size: .8em;}
.refer{position: relative; padding-left: 1.4em !important;}
.refer:before{content: '※'; position: absolute; left: 0px; top: auto;}
table.data+.refer{margin-top:.5rem}
.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}
.bl04:not(ul).point:before,
.bl04>li.point:before{color: #D61B1B;}
.bl03:not(ul).point:before,
.bl03>li.point:not(.refer):before{background: #D61B1B; }

.dashList{border-top:2px solid #333}
.dashList>li{padding: 1.5rem 1rem; border-bottom: 1px dashed #ddd; font-size: 1.02em;}
.boxList{display: flex; flex-wrap:wrap; gap:.8rem}
.boxList>:where(dl,p){flex:1 0 30%; position: relative; padding:max(3.5%, 2.3rem) max(2.8rem, 4%) max(3.5%, 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;}
.point{color: #D61B1B;}
.conbtnBox{text-align: center; margin-top: 4rem;}
.conbtnBox.left{text-align: left; margin-top: 0rem;}
.tbox+.conbtnBox{margin-top: 2rem;}
[class^=conbtn]:not(.conbtnBox){display: inline-block; padding:.7rem max(2.5rem, 2vw); border-radius:2em}
[class^=consbtn][target=_blank]:after,
[class^=conbtn][target=_blank]:after{display: inline-block; content:''; position: relative; top: -0.4rem;  margin-left: .4rem;  width: 6px;  height: 6px; background: url(/seochang/img/inc/ic_blank.png) no-repeat left center / 200%;}
[class^=consbtn][target=_blank]:after{top: -0.3rem;}
.conbtn{margin:2px 0px; background: var(--color_sub01); color: #fff !important; 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; border:1px solid rgba(0,0,0,.1)}
.conbtn:hover{background: var(--color)}
.conbtnBox .conbtn:nth-child(1){background:var(--color01)}
.conbtnBox .conbtn:nth-child(2){background:var(--color02)}
.conbtnBox .conbtn:nth-child(3){background:var(--color03)}
.conbtnBox .conbtn:nth-child(4){background:var(--color04)}
.consbtn{display: inline-block; line-height: 100%; padding: 7px 1.2rem 5px; background: #333; 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; text-shadow: 0px 0px 2px rgba(0,0,0,.4)}
.tail{text-align: center; margin-top: 3rem; padding-top: 3rem; border-top:1px dashed #ddd}


.step>li{position: relative; padding-left: 1.5rem; padding-top:1.5rem}
.step>li:last-child::before{display: none;}
.step>li:after{display: block; content: ''; clear: both;}
.step>li>.num{position: absolute; left: 0px; top: .5rem;  width:2.6rem; height:2.6rem; line-height: 2.6rem; text-align: center; border:3px solid var(--color01);; background:#fff; color: var(--color01); border-radius:5rem; box-sizing:content-box; font-weight: bold; font-size: .95em;}
.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-txt); ;}
.step>li>dl{display:flex}
.step>li>dl>:where(dt, dd){padding:max(3.5%, 15px); border-radius:.8rem}
.step>li>dl>dt{flex:0 0 max(28%, 130px); text-align: center;  ;background:var(--color01); color: #fff; }
.step>li>dl>dd{flex-grow:1; border:1px solid #ddd; border-left:0px}
.step>li:first-child>.num{border-color:var(--color); color: var(--color); font-weight: bold; background: #fff;}
.step>li:first-child>dl>dt{background:var(--color)}
.step>li:last-child>.num{border-color:var(--color-sub01); color: var(--color-sub01); font-weight: bold; background: #fff;}
.step>li:last-child>dl>dt{background:var(--color-sub01)}
.step2{display:flex; flex-wrap:wrap; gap:5px 2rem; overflow:hidden}
.step2>li{flex-grow:1; text-align: center; position: relative; padding: 1rem 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);}

.data{text-align:center; width:100%; border-collapse:separate; border-spacing:1px 1px; --bdrd:.5rem; background: #BECFE3; border-radius:var(--bdrd) var(--bdrd) 0px 0px }
.data td, .data th{background: #fff;}
.data thead th{padding:.6rem 2%; background:#E8EEF5; /* border:1px solid #BECFE3; */ border-right-width:0px}
.data thead tr:first-child th:first-child{border-radius:var(--bdrd) 0px 0px var(--bdrd)}
.data thead tr:first-child th:last-child{border-radius:0px var(--bdrd) var(--bdrd) 0px; border-right-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 tbody tr :where(td, th){padding:.5rem max(1.5%, 10px);}
.data :where(.bl03, .bl04){text-align: left;}
.tblconPd{padding:.4vw .8vw .3vw}


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


@media screen and (max-width:800px){
	#tab p.tit{height: 4em; }
	#tab p.tit:after{width:100vw; background:linear-gradient(90deg, rgba(12, 46, 164, 1) 2.02%, rgba(15, 82, 240, 1) 70%, rgba(15, 82, 240, .75) 90%); }
	#tab ul{flex-wrap:nowrap; gap:20px; padding: 0px 20px; width:100%; max-width: 100%; white-space: nowrap; overflow-x:auto; }
	#tab ul::-webkit-scrollbar {height: 2px;}
	#tab ul::-webkit-scrollbar-thumb {background:#ddd}
	#tab ul li a{padding:1.2em 0px calc(1.2em - 3px); height:auto}
	#tab ol{display: none;}
	#con_tit h3{padding-bottom: .5em; font-size: 2.1em}
	#shareSns{position:relative; right:auto; margin-top: 0px; margin-bottom: 3em;}
	#shareSns>li:last-child{display: none;}
	#shareSns div{z-index:1; right: 50%; transform:translateX(50%);}
	h4{margin-bottom: .5em;  font-size: 1.6em; letter-spacing: -1.5px;}
	.h4Box{flex-direction:column; gap:0px}
	.h4Box>h4{flex-basis:auto; padding-top: 0px;}
	.h4Box>.h4Con{flex-grow:1; padding-top: 1rem; padding-left: .5rem; border-top: 0px}
	div[id*=tabcon]+.h4Box{margin-top: 4rem; }
	div[id*=tabcon]+.h4Box>h4{padding-top: 0px;}
	div[id*=tabcon]+.h4Box>.h4Con{padding-top: 1rem; border-top:0px}
	.bl02{font-size: 1.25em;}
	:where(.bl03:not(ul, ol),  .bl03>li, .bl04:not(ul, ol), .bl04>li){font-size: .95rem}
	table :where(.bl03:not(ul, ol),  .bl03>li, .bl04:not(ul, ol), .bl04>li){font-size: 1em}
	.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(/seochang/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;}
	[class^=conbtn]:not(.conbtnBox){padding:.6rem max(2rem, 1.5vw) .55rem}
}