@charset "utf-8";



.inqreCnstl01 {background:#abd4ef; width:100%; float:left;}
.inqreCnstl01 .titbox {width:100%;text-align:center;}
.inqreCnstl01 .titbox .maintit {font-size:42px;letter-spacing: -1px;}
.inqreCnstl01 .titbox .subtxt {font-size:18px;color:#004a98;margin: 5px 0 45px;width: 100%;float: left;letter-spacing: -0.5px;font-weight: 600;word-break: keep-all;box-sizing: border-box;}

/* 퀵O부분 -common */
.inqreCnstl01 .cnstQuuck {width: 100%;float: left;}
.inqreCnstl01 .cnstQuuck .quickWrap {/* width: 100%; *//* float: left; */position: relative;width: auto;text-align: center;}
.inqreCnstl01 .circlebox {display: inline; margin-right: 4%;}
.inqreCnstl01 .circlebox:last-child {margin-right:0;}
.inqreCnstl01 .circlebox .circle {background: #fff;text-align:center;width: 23%;max-width: 185px;height: 0;padding-bottom: 11%;display: inline-block;vertical-align: middle;border-radius: 100%;position: relative;transition: background 0.5s, border-color 0.5s;border: 3px solid transparent;box-sizing: border-box;}
.inqreCnstl01 .circlebox .circle:last-child {margin-right:0;}
.inqreCnstl01 .circlebox .circle > div {display: inline-block; line-height: normal; vertical-align: middle; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; margin-top: -5px;}
.inqreCnstl01 .circlebox .circle img {display:inline-block;}
.inqreCnstl01 .circlebox .circle > div>span {display:block;font-size: 18px;padding: 0 11px;font-weight: 500;letter-spacing: -1px;}

    /* circle QUiCK ~ */
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle {/* position:absolute; *//* top: 0; *//* left: 50%; *//* transform: translateX(-50%); */}

    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle.on {background:#014a99;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle.on:before {
														content:"";
														width: 67px;
														height: 34px;
														display: inline-block;
														position: absolute;
														bottom: -43px;
														transform: translateX(-50%);
														}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle.on span {color:#fff;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:not(.on) .circle:hover {border: 3px solid #004a98;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:not(.on) .circle:hover span {font-weight:600;}

    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle:not(.on) + .cnstKeywords {display: none;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox.on .cnstKeywords {/* display:block; */padding-top: 20px;float: left;margin-bottom: 30px;position: relative;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords {padding-bottom:30px;width: 100%;float: left;padding-top: 15px;text-align: center;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords span,
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords button {display: inline-block;font-size: 16px;padding: 6px 17px 7px !important;border: 1px solid #cfcfcf;border-radius: 30px;margin-bottom: 7px;margin-right: 10px;font-weight: 600;line-height: normal;background: #fff; letter-spacing: -0.5px; transition: all 1s;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords span:hover,
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords button:hover {cursor:pointer; background:#014a99; color:#fff;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords .on {background: #014a99; color: #fff;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords .on a {color:#fff;}


@media (min-width:990px){
    .inqreCnstl01 {height:560px;}
    .inqreCnstl01 .titbox .maintit {padding-top:40px;}
}
@media (min-width:990px){
	.inqreCnstl01 .circlebox .circle {height: 185px;padding-bottom:0;}
	.inqreCnstl01 .cnstQuuck .quickWrap {/* padding-top:200px; */}
}

@media (min-width:1300px){
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(1) .circle {/* margin-left: -21%; */}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(2) .circle {/* margin-left: -7%; */}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(3) .circle {/* margin-left: 7%; */}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(4) .circle {/* margin-left: 21%; */}
}
@media (max-width:1299px){
	.inqreCnstl01 .circlebox .circle img {/* max-width:30px; */}
}
@media (min-width: 700px) and (max-width: 1299px){
    /*.inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(1) .circle {margin-left: -27%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(2) .circle {margin-left: -9%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(3) .circle {margin-left: 9%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(4) .circle {margin-left: 27%;}*/
}

@media (min-width:800px) and (max-width:990px){
	.inqreCnstl01 {height: 420px;}
	.inqreCnstl01 .titbox .maintit {padding-top:30px;}
	.inqreCnstl01 .titbox .subtxt {margin-bottom: 15px;}
	.inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle.on:before {width: 30px; background-size: 100%;}
	.inqreCnstl01 .cnstQuuck .quickWrap {padding-top: 30px;}
}

@media (min-width:700px) and (max-width:990px){
	.inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords button {padding: 7px 15px;font-size: 17px;min-width: auto;margin: 0 5px 10px;}
	.inqreCnstl01 .circlebox .circle {width: 150px;height: 150px;padding-bottom:0;}
	
}

@media (min-width:600px) and (max-width:799px){
	.inqreCnstl01 {height:750px;}
	.inqreCnstl01 .titbox .maintit {font-size:34px; padding-top:30px;}
	.inqreCnstl01 .inqreCnstl01 .titbox .maintit {font-size:34px;}
	.inqreCnstl01 .titbox .subtxt {padding: 0px 16%;}
	.inqreCnstl01 .cnstQuuck .quickWrap {/* padding-top: 150px; */}
	.inqreCnstl01 .circlebox {width:50%;float: left;margin-right: 0;margin-bottom: 20px;}
	.inqreCnstl01 .circlebox .circle {
    width: 200px !important;
    height: 200px;
    max-width: none;
    padding-bottom: 0 !important;
}
}

@media (max-width:799px){
    .inqreCnstl01 .titbox .maintit {padding-top:25px;}
}
@media (max-width:699px){
	.inqreCnstl01 .circlebox .circle {width:20%; padding-bottom: 19%;}
	.inqreCnstl01 .cnstQuuck .quickWrap {/* padding-top: 24%; */}
	.inqreCnstl01 .circlebox .circle > div>span {padding:0px;font-size: 16px;}
	
    /*.inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(1) .circle {margin-left:-33%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(2) .circle {margin-left:-11%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(3) .circle {margin-left: 11%;}
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox:nth-child(4) .circle {margin-left: 33%;}*/
    .inqreCnstl01 .cnstQuuck .quickWrap .circlebox .circle.on:before {width: 30px;height: 16px;background-size: 100%; bottom: -25px;}
}

@media (max-width:599px){
	.inqreCnstl01 {height:90vh;}
	.inqreCnstl01 .titbox .maintit {font-size:25px;}
	.inqreCnstl01 .titbox .subtxt {margin-bottom: 30px;padding: 0 20px;}
	.inqreCnstl01 .cnstQuuck .quickWrap .circlebox .cnstKeywords button {padding: 5px 14px 6px;font-size: 15px;min-width: auto;margin: 0 3px 9px;min-width: 35%;}
    .inqreCnstl01 .circlebox {width:50%;float: left;margin-right: 0;margin-bottom: 20px;}
    .inqreCnstl01 .circlebox .circle > div>span {padding:0px;/* font-size: 15px; */}
    .inqreCnstl01 .circlebox .circle {width: 62%;padding-bottom: 60%;max-width: none;}
}