@charset "UTF-8";

/* SUB PAGE // wrtanc common */
@media screen and (min-width: 1024px){
	/* PC device support */
	#sub .wrtancInfo{padding: 40px 0 85px;}
	.wrtancInfo .titArea{padding-bottom: 15px;}
	.wrtancInfo .titArea h3{background: url("../../static/image/common/blltSpr.png") no-repeat -10px -55px; color: #282727; font-size: 24px; padding-left: 17px;}
	.wrtancInfo .contArea{height: 230px; background: #F2F3F6; border: 1px solid #0B90B6; position: relative; display: table;}
	.wrtancInfo .contArea .procedure{height: 100%; vertical-align: middle; display: table-cell; padding: 0 50px;}
	.wrtancInfo .contArea .procedure .circle{width: 131px; height: 131px; background: url("../../static/image/sub/circle_blueGra.png") no-repeat 0 0; color: #3359B3; font-size: 17px; text-align: center; line-height: 131px;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5){line-height: normal; padding-top: 40px;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5) a{line-height: 25px;}
	.wrtancInfo .contArea .procedure .arr{width: 60px; height: 131px; background: url("../../static/image/sub/arr_grayBlue.png") no-repeat 0 center;}
	.wrtancInfo .contArea .tooltipBox{width: 123px; background: #C9D5E2; color: #FFF; box-shadow: 5px 5px 1px rgba(0,0,0,.05); position: absolute; bottom: -85px; padding: 12px;}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(2){height: 120px; font-size: 16px; left: 50px;}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(3){height: 114px; font-weight: 300; right: 55px;}
	.wrtancInfo .contArea .tooltipBox:before{content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #C9D5E2; position: absolute; top: -10px; left: calc(50% - 12px);}
	.wrtancInfo .contArea .tooltipBox h4{background: #58A8FF; font-size: 16px; text-align: center; line-height: 25px; border-radius: 5px;}
	.wrtancInfo .contArea .tooltipBox dl{font-size: 15px;}
	.wrtancInfo .contArea .tooltipBox dt{clear: left;}
	.wrtancInfo .contArea .tooltipBox .axi-ion-android-checkmark:before{color: #58A8FF; font-size: 11px;}
}
@media screen and (min-width: 720px) and (max-width: 1023px){
	/* Tablet device support */
	.wrtancInfo .titArea{padding-bottom: 12px;}
	.wrtancInfo .titArea h3{background: url("../../static/image/common/blltSpr.png") no-repeat -10px -43px; background-size: 30px; color: #282727; font-size: 36px; padding-left: 17px;}
	.wrtancInfo .contArea{width: 100%; height: 230px; background: #F2F3F6; border: 1px solid #0B90B6; position: relative; display: table;}
	.wrtancInfo .contArea .procedure{height: 100%; vertical-align: middle; display: table-cell; padding: 55px 40px 71px 44px;}
	.wrtancInfo .contArea .procedure .circle{width: 283px; height: 283px; background: url("../../static/image/sub/m_circle_blueGra.png") no-repeat 0 0; background-size: contain; color: #3359B3; font-size: 38px; text-align: center; line-height: 283px;}
	.wrtancInfo .contArea .procedure .circle:not(:first-of-type):not(:last-of-type){margin: 0 auto;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5){line-height: normal; padding-top: 88px;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5) a{font-size: 38px !important;line-height: 59px;background-size: 2px;}
	.wrtancInfo .contArea .procedure .arr{width: 90px; height: 125px; background: url("../../static/image/sub/m_arr_grayBlue.png") no-repeat 0 center; background-size: contain; margin: 0 auto;}
	.wrtancInfo .contArea .tooltipBox{width: 277px; height: 114px; background: #C9D5E2; color: #FFF; font-size: 36px; box-shadow: 5px 5px 1px rgba(0,0,0,.05); position: absolute; bottom: -85px; padding: 12px;}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(2){height: 265px; font-size: 16px; top: 65px; right: 40px; padding: 43px 22px 12px 27px;}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(3){height: 251px; font-weight: 300; text-align: center; line-height: normal; right: 46px; bottom: 85px; padding: 50px 55px 60px;}
	.wrtancInfo .contArea .tooltipBox:before{content: ""; border-top: 20px solid transparent; border-right: 20px solid #C9D5E2; border-bottom: 20px solid transparent; position: absolute; top: calc(50% - 21px); left: -20px;}
	.wrtancInfo .contArea .tooltipBox h4{background: #58A8FF; font-size: 36px; font-weight: 300; text-align: center; line-height: 54px; border-radius: 15px; margin-bottom: 15px;}
	.wrtancInfo .contArea .tooltipBox dl{font-size: 30px; font-weight: 300; line-height: 42px; padding-left: 7px;}
	.wrtancInfo .contArea .tooltipBox dt{clear: left;}
	.wrtancInfo .contArea .tooltipBox .axi-ion-android-checkmark{font-weight: 300; line-height: 50px;}
	.wrtancInfo .contArea .tooltipBox .axi-ion-android-checkmark:before{color: #58A8FF; font-size: 23px; margin-right: 10px;}

}
@media screen and (max-width: 719px){
	/* Moblie device support */
	.wrtancInfo .titArea{padding-bottom: 6px;}
	.wrtancInfo .titArea h3{background: url("../../static/image/common/blltSpr.png") no-repeat 0 -38px; background-size: 20px; color: #282727; font-size: 16px; padding-left: 17px;}
	.wrtancInfo .contArea{width: 100%; height: 230px; background: #F2F3F6; border: 1px solid #0B90B6; position: relative; display: table;}
	.wrtancInfo .contArea .procedure{height: 100%; vertical-align: middle; display: table-cell; padding: 25px 20px 30px;}
	.wrtancInfo .contArea .procedure .circle{width: 125px; height: 125px; background: url("../../static/image/sub/m_circle_blueGra.png") no-repeat 0 0; background-size: contain; color: #3359B3; font-size: 17px; text-align: center; line-height: 131px;}
	.wrtancInfo .contArea .procedure .circle:not(:first-of-type):not(:last-of-type){margin: 0 auto;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5){line-height: normal; padding-top: 35px;}
	.wrtancInfo .contArea .procedure .circle:nth-of-type(5) a{line-height: 25px;}
	.wrtancInfo .contArea .procedure .arr{width: 38px; height: 58px; background: url("../../static/image/sub/m_arr_grayBlue.png") no-repeat 0 center; background-size: contain; margin: 0 auto;}
	.wrtancInfo .contArea .tooltipBox{width: 123px; height: 114px; background: #C9D5E2; color: #FFF; font-size: 16px; box-shadow: 5px 5px 1px rgba(0,0,0,.05); position: absolute;}
	.wrtancInfo .contArea .tooltipBox{width: 123px; background: #C9D5E2; color: #FFF; box-shadow: 5px 5px 1px rgba(0,0,0,.05); position: absolute; bottom: -85px; padding: 12px;}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(2){height: 120px; font-size: 16px; top: 30px; right: 17px; padding: 20px 12px 12px}
	.wrtancInfo .contArea .tooltipBox:nth-of-type(3){height: 114px; font-weight: 300; text-align: center; line-height: 19px; right: 17px; bottom: 35px; padding: 27px 25px 30px;}
	.wrtancInfo .contArea .tooltipBox:before{content: ""; border-top: 10px solid transparent; border-right: 10px solid #C9D5E2; border-bottom: 10px solid transparent; position: absolute; top: calc(50% - 7px); left: -10px;}
	.wrtancInfo .contArea .tooltipBox h4{background: #58A8FF; font-size: 16px; text-align: center; line-height: 25px; border-radius: 5px; margin-bottom: 6px;}
	.wrtancInfo .contArea .tooltipBox dl{font-size: 13px; line-height: 19px; }
	.wrtancInfo .contArea .tooltipBox dt{clear: left;}
	.wrtancInfo .contArea .tooltipBox .axi-ion-android-checkmark{line-height: 24px;}
	.wrtancInfo .contArea .tooltipBox .axi-ion-android-checkmark:before{color: #58A8FF; font-size: 11px;}
}