@charset "utf-8";

section .cont-item:last-child {margin-bottom:80px;}
/* nav2-1 */
.cont-title {position:relative; height: 70px; font-size: 1.5rem; font-weight: 500; color: #252525;}
.cont-title:before {content:""; position:absolute; top:-60px; left:0; background:#406285; width:36px; height:2px;}
.first .cont-title:before {content:""; display:none;}
.cont-txt p{font-size:1rem; line-height:1.5rem; word-break:keep-all; margin-bottom:16px; color: #555;}
.cont-txt p b {font-weight:500; color:#0a5bbc;}


/* component - data1 */
.component {position:relative;}
.component:after {clear:both;content:"";display:block;}
.component .m-view {display:none;}
.component .pc-view {display:block;}
.component .product-box {position:relative; width:100%; height:500px; margin-bottom:0px;}
.component .product-box:before {position:absolute; display:block; content:""; background:url('../img/product_1_img.png') 0px 0px no-repeat; background-size:600px 232px; width:600px; height:232px; top:50%; left:50%; margin-top:-116px; margin-left:-300px;}
.component .product-box .pcont-1 {position:absolute; top:30px; left:650px; width:420px;}
.component .product-box .pcont-2 {position:absolute; bottom:0px; left:400px; width:450px;}
.component .product-box .pcont-3 {position:absolute; top:150px; left:0px; width:366px;}
.component .product-box .pcont-3 .title {text-align:right; display:block;}
.component .product-box .title {position:relative; display:block; font-size:1.5rem; color:#0958bb; margin-bottom:10px;}
.component .product-box .txt {font-size:1rem; color:#717171; line-height:1.25rem;}
.component .product-box .pcont-1 .title:before {content:""; position:absolute; width:46px; height:57px; background:url('../img/line-pcom-1.png') 0px 0px no-repeat; left:-66px; bottom:-110px;}
.component .product-box .pcont-2 .title:before {content:""; position:absolute; width:59px; height:40px; background:url('../img/line-pcom-2.png') 0px 0px no-repeat; top:-50px; left:65px;}
.component .product-box .pcont-3 .title:before {content:""; position:absolute; width:61px; height:46px; background:url('../img/line-pcom-3.png') 0px 0px no-repeat; bottom:-32px; right:-70px;}
.component .product-box .box-btn {line-height:1.4375rem; min-width:0; padding:0 15px 0 15px;}
.component .product-box .pcont-1 .box-btn, .component .product-box .pcont-2 .box-btn {left:auto; right:0; }

.component ul.m-view {position:relative; width:100%: height:auto;}
.component ul.m-view li {position:relative; padding:10px 5px 10px 50px; border:1px solid #bbbbbb; background:#f9f9f9; margin-bottom:10px;}
.component ul.m-view li span {display:block;}
.component ul.m-view li span.title {position:relative; font-size:1.125rem; color:#3e3e3e; margin-bottom:5px; }
.component ul.m-view li span.txt {font-size:1rem; color:#717171; line-height:1.25rem;}
.component ul.m-view li.pcont-1:before {content:"01"; position:absolute; top:10px; left:10px; font-size:1.125rem; color:#0958bb;}
.component ul.m-view li.pcont-2:before {content:"02"; position:absolute; top:10px; left:10px; font-size:1.125rem; color:#0958bb;}
.component ul.m-view li.pcont-3:before {content:"03"; position:absolute; top:10px; left:10px; font-size:1.125rem; color:#0958bb;}
.component ul.m-view li span.title .box-btn {position: relative; padding: 0 4px 0 4px; line-height: 1.4375rem; margin-left:10px; min-width: 60px; vertical-align: top;}
@media only screen and (max-width:1140px) and (min-width:832px){
	.component .product-box {height:400px;}
	.component .product-box:before {background-size:500px 194px; width:500px; height:194px; top:50%; left:50%; margin-top:-153px; margin-left:-250px;}
	.component .product-box .pcont-1 {top:-5%; left:60%; width:36%;}
	.component .product-box .pcont-1 .title:before {left:-70px; bottom:-70px;}
	.component .product-box .pcont-2 { left:40%; bottom:20px; width:40%;}
	.component .product-box .pcont-2 .title:before {}
	.component .product-box .pcont-3 {width:220px; top:20%; left:20px;}
	.component .product-box .pcont-3 .title:before {}
}

@media only screen and (max-width:832px) {
	.component .pc-view {display:none;}
	.component .m-view {display:block;}
	.component .product-box {height:auto; margin-bottom:50px;}
	.component .product-box:before {display:none;}
	.component .product-box img {width:90%; height:auto; margin:0 auto;}
}

/* data2 */
.box-char {padding:50px 50px; border:1px solid #bbbbbb; background:#fff;}
.char-only {display:block; width:100%; border:1px solid #528acf; background:#f9fcff; text-align:center;}
.char-only ul {padding-top:28px; padding-bottom:28px;}
.char-only ul li {display:inline; color:#2f2f2f; font-size:1.25rem; line-height:1.5rem;}
.char-only ul li b {font-weight:normal; color:#0958bb;}
.char-only, .char-sort {position:relative; margin-top:100px;}
.char-sort:before {content:''; position:absolute; top:-70px; left:50%; margin-left:-110px; background:url('../img/img-bottom-arrow.png') no-repeat; width:220px; height:40px;}
.char-only:first-child {margin-top:0px;}
.char-sort ul {width:100%; text-align:center;}
.char-sort ul:after {clear:both;content:"";display:block;}
.char-sort ul li{float:left; padding-top:20px; width:183.6px; padding-bottom:20px; background:#fff; border:1px solid #bbbbbb; margin-left:10px; font-size:0.9375rem; line-height:1.125rem; vertical-align:bottom;}
.char-sort ul li span.small {font-size:0.8125rem;}
.char-sort ul li:first-child {margin-left:0px;}
.char-sort ul li span {display:block;}

@media only screen and (max-width:1140px) and (min-width:970px){
	.char-sort ul li {width:18.9%; margin-left:1%;}
}

@media only screen and (max-width:969px){
	.box-char {padding:50px 50px;}
	.char-sort ul li {display:block; float:none; width:100%; margin-left:0px; padding-top:15px; padding-bottom:15px; margin-bottom:10px;}
	.char-sort ul li span {display:inline-block;}
}

@media only screen and (max-width:768px) {
	.box-char {padding:20px 20px;}
	.char-only ul {padding-top:20px; padding-bottom:20px;}
	.char-sort ul li {padding-top:8px; padding-bottom:8px;}
	.char-sort {margin-top:60px;}
	.char-sort:before {background-size:180px 34px; width:180px; height:34px; margin-left:-90px; top:-45px;}
}

/* diagram - data3 */
.diagram {position:relative; width:100%:}
.diagram .explain {position:relative; width:100%; height:30px; margin-top:10px; margin-bottom:5px; text-align:right;}
.diagram .explain li {height:30px; line-height:30px; font-size:0.8125rem;}
.diagram .explain li .box {display:inline-block; width:40px; height:16px; background:#f4f4f4; border:1px solid #bbbbbb; margin-right:6px; margin-top:6px; margin-bottom:6px;}
.diagram .explain li .txt {display:inline-block; vertical-align:top; color:#0958bb;margin-right:6px; }
.diagram ul {width:100%; margin-bottom:10px;}
.diagram ul:after {clear:both;content:"";display:block;}
.diagram ul li {position:relative; float:left; width:235px; text-align:center; border:1px solid #bbbbbb; background:#fff; margin-right:40px; padding-top:20px; padding-bottom:20px; margin-bottom:40px;}
.diagram ul li.step5 {margin-bottom:0px;}
.diagram ul li.step6 {margin-bottom:0px;}
.diagram ul li.step7 {margin-bottom:0px;}
.diagram ul li.step8 {margin-bottom:0px;}
.diagram ul li.cancel {background:#f4f4f4;}
.diagram ul li span {display:block;}
.diagram ul li.step1:before {content:"01";}
.diagram ul li.step2:before {content:"02";}
.diagram ul li.step3:before {content:"03";}
.diagram ul li.step4:before {content:"04";}
.diagram ul li.step5:before {content:"05";}
.diagram ul li.step6:before {content:"06";}
.diagram ul li.step7:before {content:"07";}
.diagram ul li.step8:before {content:"08";}
.diagram ul li:before {position:absolute; top:14px; left:14px; font-size:1.5rem; font-family:'WF Godo'; color:#0958bb; line-height:1.5rem;}
.diagram ul li.cancel:before {}
.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
.diagram ul li.step5:after, .diagram ul li.step6:after, .diagram ul li.step7:after, .diagram ul li.step8:after {content:""; position:absolute; top:50%; right:-30px; margin-top:-23px; background:url('../img/img-right-arrow.png') 0px 0px no-repeat; width:20px; height:45px; background-size:20px 45px;}

@media only screen and (min-width:1141px) {.diagram ul li:nth-child(4n) {margin-right:0px;} .diagram ul li:nth-child(4n):after {display:none;}}
@media only screen and (max-width:1140px) and (min-width:769px){
	.diagram ul li {width:30%;}
	.diagram ul li:nth-child(3n) {margin-right:0px;}
	.diagram ul li:nth-child(3n):after {display:none;}
	.diagram ul li:nth-child(8n):after {display:none;}
	.diagram ul li.step5 {margin-bottom:40px;}
	.diagram ul li.step6 {margin-bottom:40px;}
	.diagram ul li.step7 {margin-bottom:0px;}
	.diagram ul li.step8 {margin-bottom:0px;}
}

@media only screen and (max-width:920px) and (min-width:769px){
	.diagram ul li {width:29%;}
}

@media only screen and (max-width:768px) and (min-width:487px){
	.diagram ul li {width:46%;}
	.diagram ul li:nth-child(2n) {margin-right:0px;}
	.diagram ul li:nth-child(2n):after {display:none;}
	.diagram ul li.step5 {margin-bottom:40px;}
	.diagram ul li.step6 {margin-bottom:40px;}
	.diagram ul li.step7 {margin-bottom:0px;}
	.diagram ul li.step8 {margin-bottom:0px;}
}

@media only screen and (max-width:600px) and (min-width:487px){
	.diagram ul li {width:44%;}
}

@media only screen and (max-width:486px) {
	.diagram ul li {width:100%; margin-right:0px; padding-top:10px; padding-bottom:10px; margin-bottom:50px;}
	.diagram ul li.step5 {margin-bottom:50px;}
	.diagram ul li.step6 {margin-bottom:50px;}
	.diagram ul li.step7 {margin-bottom:50px;}
	.diagram ul li.step8 {margin-bottom:0px;}

	.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
	.diagram ul li.step5:after, .diagram ul li.step6:after, .diagram ul li.step7:after, .diagram ul li.step8:after {content:""; position:absolute; top:150%; left:50%; margin-top:-20px; margin-left:-90px; background:url('../img/img-bottom-arrow.png') 0px 0px no-repeat; width:180px; height:33px; background-size:180px 33px;}
	.diagram ul li.step8:nth-child(8n):after {display:none;}
}

/* table - data4 */
.table {width:100%; height:auto;}
.table table {width:100%;}
.table table tr th, .table table tr td {text-align:center;}
.table table tr th {background:#f9fcff; padding-top:16px; padding-bottom:16px; font-weight:normal; color:#2f2f2f; border-top:2px solid #528acf; font-size:1rem; line-height:1.125rem;}
.table table tr td {font-size:0.9375rem; line-height:1.125rem; padding-top:10px; padding-bottom:10px; color:#5e5e5e;}
.table table tr th, .table table tr td {border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;}
.table table tr th:first-child, .table table tr td:first-child {border-left:1px solid #e1e1e1;}
.table table tr th .small, .table table tr td .small {font-size:80%; color:#528acf;}

.table table tr .pc-view {display:inline;}
.table table tr td.pc-view, .table table tr th.pc-view {display:block;}
.table table tr .m-view {display:none;}
.ps {width:100%; padding-top:10px; padding-bottom:20px; font-size:0.8125rem; line-height:1rem; color:#0958bb; text-align:left;}
.ps ol.l-num li { margin:0; padding: 0 0 0 16px; }
.ps ol.l-num li span.num { position:absolute; margin:0 0 0 -16px; }

@media only screen and (max-width:768px) {
	.table table tr .pc-view {display:none;}
	.table table tr td.pc-view, .table table tr th.pc-view {display:none;}
	.table table tr .m-view {display:block;}
	.table table .m-txt-break {display:block;}
}

.box-btn {position:absolute; bottom:0; left:0; display: inline-block; text-decoration:none; min-width: 90px; height: auto; background-color: #fff; border: 0; font-size: 0.875rem; font-weight:400; line-height: 1.875rem; color: #252525; text-align: center; padding: 0 22px 0 28px; border:1px solid #bbbbbb;}
/* modal img */
.modal .img-container div img {width:100%; height:100%;}
@media only screen and (max-width:480px) {
	#modal_img .modal-content {margin-top:80px; width:75%;}	
}

@media only screen and (max-width:400px) {
	#modal_img .modal-content {margin-top:100px; width:85%;}	
}