@charset "UTF-8";

	/* SUB PAGE // intro */
	.intro .visual{background-image: url("../../static/image/sub/intro/bg.png"); background-repeat: no-repeat; margin: 0 auto;}
	.intro .visual .circle{color: #FFF; font-weight: 600; text-align: center; border-radius: 100%; display: inline-block; float: left;}
	.intro .visual .circle.blue{background-color: #2B7EB3; background-image: url("../../static/image/sub/intro/icon1.png"); background-repeat: no-repeat;}
	.intro .visual .circle.green{background-color: #2BB39B; background-image: url("../../static/image/sub/intro/icon2.png"); background-repeat: no-repeat;}
	.intro .text{border: 1px solid #F0F1F2; margin-top: 14px;}
	.intro .text .innerBox{background: #F3F5F7; color: #000;}
	.intro .text .innerBox:first-line{line-height: 32px;}
	.intro .text .innerBox .point{background: #2F364A; color: #FFF; letter-spacing: -1px; padding-left: 8px; padding-right: 8px;}
	.intro .paraBox{background: #F8F9FA; color: #313131; font-weight: 300;}
	.intro .paraBox>p{letter-spacing: -.2px;}
@media screen and (min-width: 1200px){
	#sub .visual{padding: 91px 0 91px 62px;}
}
@media screen and (max-width: 1199px) and (min-width: 992px){
	#sub .visual{padding: 91px 0;}
	.intro .visual .circle.green{margin-left: 35px;}
}
@media screen and (min-width: 992px){
	#sub{margin-bottom: 40px;}
	#sub .intro{padding-left: 37px; padding-right: 37px;}
	.intro .visual{background-position: 85px 30px;}
}
@media screen and (max-width: 991px){
	#sub{margin-bottom: 70px;}
	#sub .intro{padding-left: 15px; padding-right: 15px;}
	.intro .visual .circle.green{margin-left: 30px;}
	.intro .paraBox{margin-top: 30px;}
}
@media screen and (max-width: 991px) and (min-width: 576px){
	.intro .visual{background-position: center 30px; padding: 91px 62px;}
}
@media screen and (min-width: 576px){
	.intro .visual .circle{width: 176px; height: 176px; font-size: 17px; line-height: 20px;}
	.intro .visual .circle.blue{background-position: center 31px; padding-top: 93px;}
	.intro .visual .circle.green{background-position: center 35px; padding-top: 88px;}
	.intro .text{padding: 21px 20px 19px;}
	.intro .text .innerBox{padding: 32px 32px 27px;}
	.intro .text .innerBox{font-size: 18px; line-height: 26px;}
	.intro .text .innerBox .point{font-size: 28px;}
	.intro .paraBox{font-size: 16px; padding: 31px 18px;}
	.intro .paraBox>p+p{margin-top: 23px;}
}
@media screen and (max-width: 575px){
	.intro .visual{background-position: center -20px; background-size: cover; padding: 35px 32px;}
	.intro .visual .circle{width: 32vw; height: 32vw; max-width: 176px; max-height: 176px; font-size: 3vw; line-height: 3.8vw;}
	.intro .visual .circle.blue{background-position: center 6vw; background-size: 29%; padding-top: 18vw;}
	.intro .visual .circle.green{background-position: center 7.2vw; background-size: 30%; padding-top: 16.5vw;}
	.intro .text{padding: 12px;}
	.intro .text .innerBox{font-size: 14px; line-height: 24px; padding: 12px 16px;}
	.intro .text .innerBox .point{font-size: 20px;}
	.intro .paraBox{font-size: 14px; padding: 14px 6px;}
	.intro .paraBox>p+p{margin-top: 13px;}
}