@charset "utf-8";

.sub-intro-menu {text-align:center; padding:30px 0 10px; display:block;}
.sub-intro-menu.nobg {background:#fff !important;}
.sub-intro-menu a {display:inline-block; padding:10px 30px; position:relative; font-size:18px; font-family:'NanumSquare'; font-weight:600; color:#888; letter-spacing:-0.06em;}
.sub-intro-menu a.active {color:#333; font-size:19px; font-weight:800;}
.sub-intro-menu a.active:after {content: ''; display: block; position: absolute; left: 30px; bottom: 1px; right:30px; width: calc(100% - 60px); height: 2px; background-color: #774e6b;}
.sub-intro-menu a:before {content: ''; display: block; position: absolute; left: 0; top: 11px; width: 1px; height: 18px; background-color: #dce0e6;}
.sub-intro-menu a:first-child:before {display:none;}

@media only screen and (max-width : 767px){
	.sub-intro-menu {padding:15px 0 5px;}
	.sub-intro-menu a {padding:5px 3px 5px 5px; font-size:13px; font-family:'NotoSansWeb'; font-weight:500;}
	.sub-intro-menu a.active {font-size:13px; font-weight:500; font-family:'NotoSansWeb';}
	.sub-intro-menu a.active:after {left: 6px; bottom: 1px; right:3px; width: calc(100% - 8px);}
	.sub-intro-menu a:before {top: 8px; height: 14px; background-color: #ccc;}
}

.introduce {z-index:2; position:relative; text-align:center; background-color:#fff;}
.introduce::after {content:''; z-index:-1; position:absolute; top:0; left:0; right:0; height:859px; background:url('../images/bg_introduce.jpg') no-repeat 0 bottom; background-size:100% auto; transition: ease-in-out .3s;}
.introduce>.inner {max-width:920px; margin:0 auto;}
.introduce .title {padding-top:80px; margin-bottom:75px;}
.introduce .title span,
.introduce .title strong {display:block; font-family:'NanumSquare';}
.introduce .title span {margin-bottom:18px; color:#adadaf; font-size:36px;}
.introduce .title strong {color:#5c417d; font-size:64px; font-weight:700;}
.introduce .tx {margin-bottom:80px; color:#35363b; font-size:22px; line-height:1.8; word-break:keep-all; letter-spacing:-1px;}
.introduce .video {z-index:2; position:relative; margin-bottom:80px;}
.introduce .step {background-color:#f8f8f8; padding-bottom:80px;}
.introduce .graphic {border-bottom:1px solid #eee; padding-bottom:80px;}
.introduce .graphic>.tit, .introduce .step>.tit {position:relative; display:inline-block; padding:85px 0 55px 0; color:#505050; font-family:'NanumSquare'; font-size:36px; font-weight:400;}
.introduce .graphic>.tit::before, .introduce .step>.tit::before {content:''; position:absolute; top:50%; left:-88px; width:50px; height:1px; margin-top:-1px; background-color:#bababa;}
.introduce .graphic>.tit::after, .introduce .step>.tit::after {content:''; position:absolute; top:50%; right:-88px; width:50px; height:1px; margin-top:-1px; background-color:#bababa;}
.introduce .graphic .img {padding-right:70px;}

@media only screen and (max-width : 1023px){
    .introduce>.inner {padding:0 30px;}
    .introduce::after {height:35%; background-size:cover}
    .introduce .title {padding-top:60px; margin-bottom:45px;}
    .introduce .title span {margin-bottom:18px; font-size:24px;}
    .introduce .title strong {font-size:42px;}
    .introduce .tx {margin-bottom:50px; font-size:18px; line-height:1.8;}
	.introduce .step {padding-bottom:40px;}
    .introduce .graphic>.tit, .introduce .step>.tit {padding:45px 0; font-size:26px; font-weight:400;}
    .introduce .graphic>.tit::before, .introduce .step>.tit::before {left:-58px; width:30px;}
    .introduce .graphic>.tit::after, .introduce .step>.tit::after {right:-58px; width:30px;}
    .introduce .graphic .img {padding-right:40px;}
}
@media only screen and (max-width : 767px){
    .introduce>.inner {padding:0 10px;}
    .introduce .title {padding-top:40px; margin-bottom:35px;}
    .introduce .title span {margin-bottom:10px; font-size:16px; font-weight:400;}
    .introduce .title strong {font-size:30px;}
    .introduce .tx {margin-bottom:25px; font-size:14px; line-height:1.6;}
    .introduce .tx br {display:none;}
    .introduce .video {margin-bottom:35px; padding-top:10px;}
	.introduce .step {padding-bottom:20px;}
    .introduce .graphic>.tit, .introduce .step>.tit {padding:20px 0; font-family:inherit; font-size:14px; font-weight:400;}
    .introduce .graphic>.tit::before, .introduce .step>.tit::before {left:-20px; width:10px;}
    .introduce .graphic>.tit::after, .introduce .step>.tit::after {right:-20px; width:10px;}
    .introduce .graphic .img {padding-right:20px;}
}

.content-intro {margin:20px auto; max-width:1240px; padding:70px 40px 80px;}
.content-top {text-align: center;}
.content-top .page-title {padding: 0 0 80px; font-family:'NanumSquare'; font-weight:800; font-size: 42px; color: #212121; letter-spacing: -2.5px; word-break:keep-all;}
.content-top .page-sum {padding: 0 0 80px; font-size: 24px; color: #333; line-height: 1.6; font-weight:500; letter-spacing: -0.06em; word-break:keep-all;}
.content-top .page-sum.sm {font-size: 19px; padding: 0 150px 80px; line-height: 1.6; letter-spacing: -0.02em; text-align:left;}

.content-box {display:flex; align-items:flex-start; margin-bottom:100px;}
.content-box .left {width:263px; margin-right:20px; display: inline-block; font-family:'NanumSquare'; font-weight:600; font-size: 20px; color: #222; line-height: 1.4; letter-spacing: -0.6px; word-break:keep-all;}
.content-box .right {width:calc(100% - 283px); border-top: 2px solid #333; margin-top:4px; font-size:16px; letter-spacing: -0.02em; line-height:1.8;}
.content-box .right .con {margin: 16px 0 0;}
.content-box .right .ext {margin: 16px 0 0; font-size:14px;}

.content-box .right dl {width: 100%; display:flex; align-items:flex-start; padding:19px 0 28px; border-bottom: 1px solid #e1e1e1; font-size: 16px; line-height:1.4; color: #222;}
.content-box .right dl dt {width:160px;}
.content-box .right dl dd {width:calc(100% - 160px); color: #606167; letter-spacing: -0.01em;}
.content-box .right .full {padding:19px 0 28px; border-bottom: 1px solid #e1e1e1; font-size: 16px; line-height:1.4; color: #222;}

.content-box .s-title {font-size:18px; padding:40px 0 10px; font-weight:600;}
.content-box .s-title.first {padding:0 0 10px;}

@media only screen and (max-width : 1024px){
	.content-box {display: block; margin-bottom:40px;}
	.content-box .left {width:100%; margin-right:0;}
	.content-box .right {width:100%;}
	.content-top .page-sum.sm {padding: 0 0 80px;}
}

@media only screen and (max-width : 767px){
	.content-intro {padding:40px 8px 50px;}
	.content-top .page-title {padding: 0 0 50px; font-size: 30px; color: #212121; letter-spacing: -0.09em;}
	.content-top .page-sum {padding: 0 0 50px; font-size: 18px;}
	.content-top .page-sum.sm {font-size: 15px;}
	.content-box .left {font-size: 17px;}
	.content-box .right {font-size:13px; line-height:1.8;}
	.content-box .right .ext {font-size:13px;}
	
	.content-box .right dl {padding:14px 0 18px; font-size: 13px;}
	.content-box .right dl dt {width:90px;}
	.content-box .right dl dd {width:calc(100% - 90px);}
	.content-box .right .full {padding:14px 0 18px; font-size: 13px;}
	
	.content-box .s-title {font-size:14px; padding:40px 0 10px;}
	.content-box .s-title.first {padding:0 0 10px;}
}

.list-style-num {font-size:16px; color:#222; line-height:1.4; letter-spacing:-0.01em; padding:7px 0 0;}
.list-style-num li {position:relative; padding:10px 0 10px 1.8em;}
.list-style-num li.li-full {padding:10px 0;}
.list-style-num li em {position:absolute; left:0; top:10px;}

.list-style-exam, .list-style-exam a {font-size:.9em; color:#990000; line-height:1.4; letter-spacing:-0.01em; padding:4px 0; margin:10px 0 0 0; background:#e9e9e9; border-radius:4px; word-break:keep-all;}
.list-style-exam li {position:relative; padding:5px 10px 5px 2.3em;}
.list-style-exam li.li-full {padding:5px 0;}
.list-style-exam li em {position:absolute; left:.5em; top:7px; font-weight:600; font-size:.9em;}

.list-style-bar {font-size:15px; color:#222; line-height:1.4; letter-spacing:-0.01em; padding:7px 0 0;}
.list-style-bar li {position:relative; padding:4px 0 4px 1.4em;}
.list-style-bar li.li-full {padding:4px 0;}
.list-style-bar li em {position:absolute; left:0; top:4px;}

.list-style-bar .list-style-exam {padding:4px;}
.list-style-bar .list-style-exam li em {top:5px;}

.b-lg {font-size:1.1em; font-weight:600;}
.b-xlg {font-size:1.5em; font-weight:600;}
.b-mid {font-size:1.04em; font-weight:600;}
.b-basic {font-weight:600;}

.exam {color:#990000; font-size:.9em;}
.exam.b {font-weight:600;}
.fc-point {color:#4f72f1; font-weight:600;}

.table-info-wrap {width:100%; overflow-x:auto;}
.table-info {border:1px solid #ddd; border-top:1px solid #bbb; border-width:1px 0 0 1px; font-size:15px; color:#222; line-height:1.4; width:100%;}
.table-info th {padding:15px 10px; background:#f0f0f0; font-size:.9em; font-weight:600; border:1px solid #ddd; border-width:0 1px 1px 0; text-align:center;}
.table-info td {padding:15px 10px; border:1px solid #ddd; border-width:0 1px 1px 0;}

.tc {text-align:center;}

@media only screen and (max-width : 767px){
	
	.list-style-num {font-size:13px; padding:7px 0 0;}
	.list-style-num li {padding:10px 0 10px 1.4em;}
	.list-style-num li.li-full {padding:10px 0;}
	.list-style-num li em {top:11px;}
	
	.list-style-exam {padding:4px 0; margin:10px 0 0 0;}
	.list-style-exam li {padding:5px 10px 5px 2.3em;}
	.list-style-exam li.li-full {padding:5px 0;}
	.list-style-exam li em {left:.5em; top:7px;}
	
	.list-style-bar {font-size:12px; padding:7px 0 0;}
	.list-style-bar li {padding:4px 0 4px 1.4em;}
	.list-style-bar li.li-full {padding:4px 0;}
	.list-style-bar li em {top:4px;}
	
	.list-style-bar .list-style-exam {padding:4px;}
	.list-style-bar .list-style-exam li em {top:5px;}

	.table-info {width:180%;}
	.table-info {font-size:13px;}
	.table-info th {padding:15px 10px;}
	.table-info td {padding:15px 10px;}
}