section {width:100%; background-color:#f5f5f5;}
* {box-sizing:border-box; letter-spacing:-0.05rem;}
.h-box {display:flex; height:700px; align-items:center; justify-content:center; flex-direction:column;  overflow:hidden;}
.h-box .full-text {display:inline-block; padding:50px 100px; position:relative; z-index:2;}
.h-box .full-text:after {content:""; display:block; width:600px; height:600px; border-radius:300px; position:absolute; bottom:0; right:0; background:url('../images/pattern2.png') repeat; z-index:1; transition:0.75s;}
.h-box .full-text:hover:after {right:-375px; bottom:-175px;}
.h-box .full-text strong,
.h-box .full-text span,
.h-box .full-text p {display:block; position:relative; z-index:2; white-space:nowrap; text-align:center;}
.h-box .full-text strong {font-size:90px; font-weight:700; letter-spacing:-5px; color:#000000;}
.h-box .full-text span {font-size:24px; font-weight:500; letter-spacing:-1px; color:#777777;}
.h-box .full-text p {font-size:40px; margin-top:30px; color:#333333; letter-spacing:-1px;}

.main-cont {display:block; width:100%; padding-bottom:30%; position:relative; overflow: hidden;}
.main-cont .imgbox {display:block; width:60%; height:100%; position:absolute; top:0; left:0; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; z-index:1; background-attachment:fixed;}
.main-cont .imgbox:after {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/pattern.png') repeat rgba(0,0,0,0.45);}
.main-cont .textbox {width:50%; position:absolute; right:8%; top:50%; padding:35px; z-index:2;}
.main-cont .textbox:after {content:""; display:block; width:100%; height:100%; background-color:rgba(255,255,255,0.55); position:absolute; right:15px; top:15px; z-index:2;}
.main-cont .textbox:before {content:""; display:block; width:100%; height:100%; background-color:#FFFFFF; position:absolute; top:0; left:0; z-index:1;}
.main-cont .textbox strong {display:block; position:relative; z-index:3; font-size:40px; line-height:46px; margin-bottom:15px; font-weight:500;}
.main-cont .textbox p {position:relative; z-index:3; font-size:24px; line-height:36px; word-break:keep-all; font-weight:400;}

.main-cont.type2 .imgbox {left:auto; right:5%;}
.main-cont.type2 .textbox {right:auto; left:2%;}

.patten {position:absolute; width:100%; min-width:100%; height:400%; z-index:1; pointer-events:none; left:0; top:0; overflow:hidden; opacity:0.65;}
.pt_in {width:100%; height:auto; left:50%; margin-left:-960px; top:0; position:absolute;}
.patten img {width:100%; max-width:100%; height:auto;}

/* ---------------------------------------------- /*
 * Scroll Down
/* ---------------------------------------------- */

.scroll-down {position:absolute; left:50%; bottom:0; height:100px; width:100px; margin-left:-50px; display:block; z-index:10; text-align:center;}
.scroll-down span {position: relative; color: #fff; -webkit-animation-name:drop; -webkit-animation-duration:1s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-play-state:running; animation-name:drop; animation-duration:1s; animation-timing-function: ease-in-out; animation-delay:0s; animation-iteration-count:infinite; animation-play-state:running;}
.scroll-down span i {font-size:60px; color:#333333;}

@-webkit-keyframes drop	{
	0%   { top:0px;  opacity: 0;}
	30%  { top:10px; opacity: 1;}
	100% { top:25px; opacity: 0;}
}

@keyframes drop	{
	0%   { top:0px;  opacity: 0;}
	30%  { top:10px; opacity: 1;}
	100% { top:25px; opacity: 0;}
}

@media screen and (max-width:1020px) {
	section {width:100%;}
	.h-box {width:100%; height:700px;}
}

/* 서브페이지 작업 */
.sub-page {width:100%; padding-top:90px;}

#invigator {width:100%;}
#invigator .iv-box {width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; height:300px; position:relative; box-sizing:border-box;}
#invigator .iv-box {background-repeat:no-repeat; background-size:cover; background-position:center center;}
#invigator .iv-box:after {content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.35); z-index:1;}
#invigator .iv-box strong {display:block; color:#FFFFFF; font-size:46px; line-height:46px; font-weight:700; position:relative; z-index:2;}
#invigator .iv-tab {display:flex; flex-direction:row; position:relative; z-index:3; justify-content:center; align-items:center; margin-top:50px;}
#invigator .iv-tab li {display:block;}
#invigator .iv-tab li a {display:flex; width:200px; height:60px; background-color:rgba(255,255,255,0.85); box-shadow:3px 3px 5px rgba(0,0,0,0.15); justify-content:space-around; align-items:center; font-size:16px; transition:0.25s;}
#invigator .iv-tab li:hover a {background-color:#777777; color:#e3e3e3;}
#invigator .iv-tab li.active a {height:70px; background-color:#000000; color:#FFFFFF; font-size:18px;}

#invigator .iv-nav {display:flex; justify-content:center; align-items:center; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; background-color:#FFFFFF; position:relative; z-index:5;}
#invigator .ivn-in {display:flex; justify-content:flex-start; align-items:flex-start; width:100%; max-width:1200px;}
#invigator .ivn-in .home {display:block; width:60px; height:60px; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3; text-align:center; position:relative;}
/*#invigator .ivn-in .home i {font-size:20px; line-height:60px; color:#000000;}*/
#invigator .ivn-in .home-icon {display:block; width:20px; height:20px; position:absolute; top:calc(50% - 10px); left:calc(50% - 10px); transition:0.25s;}
#invigator .ivn-in .home-icon span {display:block; position:absolute; background-color:#000000;}
#invigator .ivn-in .home-icon span.icon-f {width:12px; height:2px; transition:0.25s; transform:rotate(-45deg); top:4px; left:0px;}
#invigator .ivn-in .home-icon span.icon-s {width:12px; height:2px; transition:0.25s; transform:rotate(45deg); top:4px; right:0px;}
#invigator .ivn-in .home-icon span.icon-t {width:12px; height:12px; transition:0.25s; bottom:1px; left:calc(50% - 6px); box-sizing:border-box;}
#invigator .ivn-in .home-icon span.icon-t:after {content:""; display:block; width:10px; height:10px; background-color:#000000; position:absolute; top:-5px; left:calc(50% - 5px); transform:rotate(-45deg); }
#invigator .ivn-in .home:hover .home-icon {transform:rotate(-90deg);}
#invigator .ivn-in .home:hover .home-icon span.icon-t {width:2px; height:15px; left:calc(50% - 1px);}
#invigator .ivn-in .home:hover .home-icon span.icon-t:after {width:0; height:0;}
#invigator .depth {display:block; border-right:1px solid #e3e3e3; position:relative;}
#invigator .depth > a {display:block; width:250px; font-size:16px; line-height:60px; font-weight:500; padding:0 25px; letter-spacing:-0.5px; position:relative; transition:0.25s;}
#invigator .depth > a:after {content:"\f107"; font-family:'FontAwesome'; font-size:16px; line-height:16px; position:absolute; top:calc(50% - 8px); right:25px; transition:0.25s;}
#invigator .depth > a.on {background-color:#FAFAFA;}
#invigator .depth > a.on:after {transform:rotate(180deg);}
#invigator .d-list {display:none; position:absolute; top:60px; width:calc(100% + 2px); left:-1px; border:1px solid #e3e3e3; border-bottom:none; z-index:2;}
#invigator .d-list.on {display:block;}
#invigator .d-list li {display:block; border-bottom:1px solid #e3e3e3; background-color:#FAFAFA;}
#invigator .d-list li a {display:block; width:100%; padding:0 25px; line-height:50px; font-size:14px; color:#333333;}
#invigator .d-list li a:hover {color:#999999;}
#invigator .d-list li.on a {font-weight:600; color:#DD3333;}

.sub-box {display:block; width:100%; min-height:400px; padding:50px 25px 100px;}

/* about */
.about-box {width:100%;}
.about-box .title-box {display:flex; width:100%; flex-direction:column; align-items:center; justify-content:center; padding:0 0 50px;}
.about-box .title-box strong {display:block; font-size:36px; line-height:36px; color:#000000; font-weight:700; margin-bottom:20px;}
.about-box .title-box p {font-size:17px; line-height:24px; color:#666666;}
.about-box .title-box p span {color:#8f89e2; font-size:17px;}
.about-box .cont-box {width:100%; max-width:1000px; margin:0 auto; position:relative; padding:150px 50px 0;}
.about-box .cont-box:before {content:""; background:url('../images/scon-logo-w.png') no-repeat 50% 50% #454545; background-size:auto 40px; display:block; width:200px; height:100px; position:absolute; top:0; left:100px; text-align:center; line-height:100px; border-radius:0 30px 0 30px; z-index:2; color:#FFFFFF; font-size:32px; font-weight:500;}
.about-box .cont-box:after {content:""; width:1px; height:100%; background-color:#777777; position:absolute; top:0; left:200px;}
.about-box .line-box {display:block; position:relative; margin-left:225px; z-index:3; background-color:#8f89e2; color:#FFFFFF; border-radius:0 30px 0 30px; padding:15px 20px; margin-bottom:20px;}
.about-box .line-box.items {background-color:#656565; margin-top:40px;}
.about-box .line-box:after {content:""; width:75px; height:1px; background-color:#777777; position:absolute; top:12px; left:-75px;}
.about-box .line-box strong {display:inline-block; font-size:18px; text-align:center; color:#FFFFFF;}
.about-box .line-box span {display:block; margin-top:5px; font-size:16px; line-height:22px; color:#dddddd;}
.about-box .line-box span a {display:block; font-size:16px; color:#dddddd;}
.about-box .line-box:last-of-type:before {content:""; display:block; width:3px; height:calc(100% - 13px); position:absolute; top:13px; right:calc(100% + 74px); background-color:#f5f5f5; z-index:3;}

/* set-box */
.set-box {width:100%; max-width:1200px; margin:0 auto;}
.set-title {display:block; font-size:36px; line-height:36px; color:#000000; font-weight:700; text-align:center; margin-bottom:30px;}

/* history */
.his-box {box-sizing:border-box;}
.his-box .his-list {display:block; width:100%; position:relative;}
.his-box .his-item {position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.his-box .his-item:after {content:""; display:block; width:1px; height:100%; position:absolute; top:0; left:calc(50% - 1px); background-color:#000000; z-index:1;}
.his-box .his-item > strong {display:block; width:100px; height:100px; font-size:24px; color:#000000; background-color:#FFFFFF; box-shadow:5px 5px 7px rgba(0,0,0,0.15); text-align:center; line-height:100px; border-radius:50px; position:relative; z-index:2;}
.his-box .his-in {display:block; margin-top:40px; position:relative; z-index:3; width:100%;}
.his-box .his-in:after {content:""; display:block; clear:both;}
.his-box .his-in > li {display:block; width:50%; float:right; padding-left:50px; position:relative; z-index:3; clear:both; margin-bottom:20px; text-align:left;}
.his-box .his-in > li:before {content:""; display:block; width:30px; height:30px; position:absolute; top:5px; left:-15px; background-color:#FFFFFF; border:7px solid #e3e3e3; border-radius:30px; z-index:4; box-sizing:Border-box;}
.his-box .his-in > li strong {display:inline-block; width:40px; height:40px; background-color:#8f89e2; color:#FFFFFF; font-size:16px; border-radius:40px; text-align:center; line-height:40px; position:relative; z-index:3;}
.his-box .his-in > li strong:after {content:""; display:block; width:50px; height:1px; background-color:#000000; position:absolute; top:20px; left:-50px;}
.his-box .his-in > li .his-text {display:block; position:absolute; top:50%; left:110px; transform:translateY(-50%); background-color:#FFFFFF; box-shadow:3px 3px 5px rgba(0,0,0,0.15); padding:15px; box-sizing:border-box;}
.his-box .his-in > li .his-text:after {content:""; display:block; border:10px solid transparent; border-right:10px solid #FFFFFF; position:absolute; top:calc(50% - 10px); left:-20px;}
.his-box .his-in > li .his-text p {width:100%; font-size:14px; color:#777777; line-height:20px;}
.his-box .his-in > li .his-text p.big {font-size:16px; color:#555555; font-weight:600;}

.his-box .his-in > li:nth-of-type(even) {float:left; padding-left:0; padding-right:50px; text-align:right;}
.his-box .his-in > li:nth-of-type(even):before {left:auto; right:-15px;}
.his-box .his-in > li:nth-of-type(even) strong {}
.his-box .his-in > li:nth-of-type(even) strong:after {left:auto; right:-50px;}
.his-box .his-in > li:nth-of-type(even) .his-text {left:auto; right:110px; box-shadow:-3px 3px 5px rgba(0,0,0,0.15);}
.his-box .his-in > li:nth-of-type(even) .his-text:after {border-right:10px solid transparent; border-left:10px solid #FFFFFF; left:auto; right:-20px;}
.his-box .his-in > li:nth-of-type(even) .his-text p {text-align:right;}

.his-box .his-item:last-of-type .his-in > li:last-of-type:after {content:""; display:block; width:10px; height:calc(100% - 15px); position:absolute; z-index:5; bottom:-20px; left:-5px; background-color:#F5F5F5;}
.his-box .his-item:last-of-type .his-in > li:nth-of-type(even):last-of-type:after {left:auto; right:-5px;}

/* ogran */
.organ-box {box-sizing:border-box;}
.organ-set {display:flex; justify-content:center; flex-direction:column;}
.organ-set .og-top {display:block; text-align:center; padding:20px 0 40px; box-sizing:border-box;}
.organ-set .og-top span {display:inline-block; text-align:center; padding:25px 40px; background-color:#000000; color:#FFFFFF; font-size:24px; font-weight:700; border:1px solid #000000; position:relative; box-shadow:15px 15px 30px rgba(0,0,0,0.25); border-radius:0 35px 0 35px;}
.organ-set .og-top span:after {content:""; display:block; width:1px; height:40px; background-color:#000000; position:absolute; bottom:-41px; left:50%;}
.og-box {display:flex; justify-content:space-around; align-items:flex-start; position:relative;}
.og-box:after {content:""; display:block; position:absolute; top:0; left:80px; width:calc(100% - 160px); height:1px; background-color:#000000;}
.og-box .item {display:flex; flex:1; flex-direction:column; justify-content:flex-start; align-items:center; position:relative;}
.og-box .item:after {content:""; display:block; width:1px; height:40px; background-color:#000000; position:absolute; top:0; left:50%;}
.og-box .item span {display:inline-block; min-width:120px; padding:20px 25px; background-color:#FFFFFF; text-align:center; white-space:nowrap; margin:40px 20px; font-size:16px; box-shadow:3px 3px 7px rgba(0,0,0,0.15); border-radius:25px 0 25px 0; position:relative;}
.og-box .item span.type1 {background-color:#777777; color:#FFFFFF;}
.og-box .item span.type2 {background-color:#fafafa; padding:14px 19px;}
.og-box .item span:before {content:""; display:block; width:1px; height:40px; background-color:#000000; position:absolute; bottom:-40px; left:50%;}
.og-box .item span.end:before {display:none;}
.og-box .og-box .item span:before {display:none;}
.og-box .item:before {content:""; display:block; width:calc(50% - 1px); height:5px; background-color:#f5f5f5; position:absolute; z-index:2;}
.og-box .item:first-of-type:before {top:0; left:1px;}
.og-box .item:last-of-type:before {top:0; right:0;}
.og-box .og-box .item:before {display:none;}

/* technology */
.tech-box {max-width:700px; margin:0 auto;}
.tech-in {display:block; position:relative; text-align:center;}
.tech-in:after {content:""; display:block; width:1px; height:100%; position:absolute; top:0; left:50%; z-index:2; background-color:#333333;}
.tech-in li {display:block; width:100%; padding:20px 30px 20px 35px; background-color:#FFFFFF; box-shadow:5px 5px 15px rgba(0,0,0,0.15); position:relative; z-index:3; margin-bottom:25px; border-radius:0 20px 0 20px; font-size:14px; line-height:20px; position:relative;}
.tech-in li strong {display:flex; justify-content:center; align-items:center; line-height:12px; width:40px; height:40px; background-color:#fafafa; box-shadow:inset 0 0 5px rgba(0,0,0,0.15); position:absolute; top:-10px; left:-10px; border-radius:50px; font-size:16px;}
.tech-in li:last-of-type {margin-bottom:0;}

/* Service */
.sv-box {max-width:900px; margin:0 auto;}
.sv-in {display:block; position:relative; text-align:center;}
.sv-in img {max-height:100%; height:30px; width:auto; margin:5px 0;}
.sv-in .sv-item {display:flex; width:100%; max-width:900px; margin:0 auto; justify-content:center; align-items:center; flex-direction:row; flex-wrap:wrap;}
.sv-in .sv-itembox {display:flex; margin:0 4%; width:42%; background-color:#7699d9; padding:30px; box-shadow:5px 5px 15px rgba(0,0,0,0.15); border-radius:20px; justify-content:center; align-items:center; flex-direction:column;}
.sv-in .sv-itembox > strong {display:block; width:100%; margin-bottom:35px;}
.sv-in .sv-itembox > p {font-size:16px; line-height:1.4; color:#FFFFFF;}
.sv-in .sv-itembox > a {display:inline-block; padding:12px 20px; background-color:#FFFFFF; color:#555555; margin-top:30px; border-radius:5px; font-size:14px;}
.sv-in .sv-itembox .imgCont strong {font-size:20px; line-height:20px; color:#FFFFFF; font-weight:700;}
.sv-in .sv-itembox .imgCont p {font-size:14px; line-height:20px; color:#cccccc;}

/* Software */
.sw-box {max-width:1250px; margin:0 auto;}
.sw-in {display:block; position:relative; text-align:center;}
.sw-tab {display:flex; justify-content:center; align-items:center;}
.sw-tab li {display:flex; flex:1; margin-right:1px;}
.sw-tab li:last-of-type {margin-right:0;}
.sw-tab li a {display:flex; width:100%; padding:0 15px; height:60px; font-size:14px; line-height:17px; box-sizing:border-box; justify-content:center; align-items:center; background-color:#FFFFFF; box-shadow:5px 5px 7px rgba(0,0,0,0.15); position:relative; z-index:1;}
.sw-tab li a.active {height:65px; background-color:#000000; color:#FFFFFF; box-shadow:7px 7px 15px rgba(0,0,0,0.15); z-index:2;}

.sw-box {width:100%; box-sizing:border-box; margin-top:35px;}
.sw-items {display:none; width:100%; min-height:500px; }
.sw-items.active {display:block;}
.sw-items .sw-title {display:block; width:100%; text-align:center; color:#000000; font-size:42px; font-weight:700; text-shadow:2px 2px 2px rgba(0,0,0,0.35); padding:40px 20px; box-sizing:border-box; background-color:#FFFFFF; border-top:2px solid #000000; margin-bottom:5px;}
.sw-table {width:100%; background-color:#FFFFFF; padding:40px; box-sizing:border-box;}
.sw-table ul {width:100%;}
.sw-table ul li {padding:20px 0; box-sizing:border-box;}
.sw-table ul li:last-of-type {border-bottom:none;}
.sw-table ul li > strong {display:block; text-align:left; width:100%; font-size:18px; margin-bottom:10px; font-weight:500; color:#000000;}
.sw-table ul li > div {text-align:left;}
.sw-table ul li > div strong {display:block; width:100%; text-align:left; font-size:16px; margin-bottom:10px; font-weight:500; color:#444444;}
.sw-table .dual-box {display:block; width:100%; box-sizing:border-box;}
.sw-table .dual-box:after {content:""; display:block; float:none; clear:both;}
.sw-table .dual-box > li {display:block; float:left; width:calc(50% - 10px); margin-right:20px; padding:20px; box-sizing:border-box; background-color:#efeeed;}
.sw-table .dual-box > li:last-of-type {margin-right:0;}
.sw-table .single-box {display:block; width:100%; box-sizing:border-box; background-color:#efeeed;}
.sw-table .single-box > li {display:block; width:100%; padding:20px; box-sizing:border-box;}
.sw-table .single-box > li .middle {max-width:800px; margin:0 auto;}
.sw-table .single-box > li .small {max-width:550px; margin:0 auto;}
.sw-table ul li > div img {max-width:100%;}
.sw-table ul li > div p {font-size:15px; line-height:22px; color:#333333; position:relative; word-break:keep-all;}
.sw-table ul li > div p.inc {padding-left:10px;}
.sw-table ul li > div p.inc:after {content:""; display:block; width:4px; height:4px; border-radius:4px; background-color:#333333; position:absolute; top:9px; left:0;}
.sw-table ul li > div p.inc.type2 {padding-left:24px;}
.sw-table ul li > div p.inc.type2:after {content:"┗"; display:inline-block; width:auto; height:auto; border-radius:none; background-color:transparent; position:absolute; top:0; left:5px;}