@charset "utf-8";

.selftest-wrap {position:relative; width:100%; overflow:auto; margin-bottom:100px;}
.selftest {position:relative; width:1200px; height:1111px;}
.selftest .box {position:absolute; text-align:center; width:205px; height:150px; color:#878787; font-size:14px; font-weight:500; line-height:22px; letter-spacing:-.04em; background:#fafafa; border:1px solid #dfdfdf; border-radius:5px; display:flex; justify-content:center; align-items:center; z-index:2;}
.selftest .box .bt {display:inline-block; vertical-align:top; margin:0 4px; width:68px; height:24px; font-size:14px; font-weight:300; line-height:22px; letter-spacing:0; background:#fff; border:1px solid #a8a8a8; border-radius:4px;}
.selftest .box .complete {display:none; vertical-align:top; width:68px; height:24px; background:#fff url("../images/sub/selftest_check.png") 50% 50% no-repeat; box-shadow:1px 1px 1px rgba(0,0,0,.25); border-radius:4px;}
.selftest .box button.bt,
.selftest .box button.go,
.selftest .box button.choice {display:none;}
.selftest .box.active {background:#fff; border:3px solid #5658ad; color:#2c2c2c;}
.selftest .box.active span.bt {display:none;}
.selftest .box.active button.bt {display:inline-block;}
.selftest .box.active button.bt.yes {color:#004ea2; border-color:#004ea2;}
.selftest .box.active button.bt.no {color:#e6002d; border-color:#e6002d;}
.selftest .box.active button.choice {color:#5658ad; border-color:#5658ad;}
.selftest .box.selected {background:#5658ad; border-color:#5658ad; color:#fff;}
.selftest .box.selected span.bt,
.selftest .box.selected button.bt {display:none;}
.selftest .box.selected .complete {display:inline-block;}
.selftest .box.selected .sm i {background-image:url("../images/sub/selftest_submit_on.png");}
.selftest .box.selected .go {border-color:#5658ad; color:#004ea2; box-shadow:1px 1px 1px rgba(0,0,0,.25);}
.selftest .box.selected span.go {display:none;}
.selftest .box.selected button.go {display:block;}
.selftest .st p {margin-bottom:16px;}
.selftest .sm {display:inline-flex; align-items:center; text-align:left; font-size:13px; line-height:18px;}
.selftest .sm i {width:40px; height:40px; background:url("../images/sub/selftest_submit_off.png") 50% 50% no-repeat; margin-right:9px;}
.selftest .sm .go {position:absolute; right:10px; bottom:10px; width:30px; height:30px; text-align:center; font-size:12px; font-weight:500; letter-spacing:0; line-height:28px; background:#fff; border:1px solid #a8a8a8; border-radius:100%;}
.selftest .st-1 {top:0; left:0;}
.selftest .st-2 {top:320px; left:0;}
.selftest .st-3 {top:640px; left:0;}
.selftest .st-4-1 {top:320px; left:354px;}
.selftest .st-4-1-1 {top:0; left:655px; width:218px; height:143px;}
.selftest .st-4-1-2 {top:152px; left:655px; width:218px; height:98px;}
.selftest .st-4-1-3 {top:259px; left:655px; width:218px; height:143px;}
.selftest .st-4-1-4 {top:411px; left:655px; width:218px; height:98px;}
.selftest .st-4-1-5 {top:518px; left:655px; width:218px; height:98px;}
.selftest .st-4-1-6 {top:625px; left:655px; width:218px; height:143px;}
.selftest .st-4-1-7 {top:777px; left:655px; width:218px; height:143px;}
.selftest .st-4-2 {top:960px; left:354px;}
.selftest .st-4-2-1 {top:960px; left:655px; width:218px;}
.selftest .sm-1 {top:0; left:284px;}
.selftest .sm-2 {top:960px; left:0;}
.selftest .sm-3 {top:320px; right:0;}
.selftest .sm-4 {top:960px; right:0;}
.selftest .line {position:absolute; background:#dfdfdf;}
.selftest .line .dot {position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background:#dfdfdf; border-radius:100%;}
.selftest .line .txt {position:absolute; top:50%; left:50%; margin-top:-22px; transform:translateX(-50%); color:#dfdfdf; font-size:12px; font-weight:500; line-height:1em; letter-spacing:0;}
.selftest .line.active {background:#5658ad; z-index:2;}
.selftest .line.active .dot {width:14px; height:14px; margin:-7px 0 0 -7px; background:#fff; border:3px solid #e6002d;}
.selftest .line.active .txt {color:#2c2c2c;}
.selftest .line-1-y {top:62px; left:205px; width:79px; height:1px;}
.selftest .line-1-n {top:150px; left:102px; width:1px; height:170px;}
.selftest .line-1-n .txt {transform:translate(-145%, -50%); margin-top:0;}
.selftest .line-2-y {top:470px; left:102px; width:1px; height:170px;}
.selftest .line-2-n {top:395px; left:205px; width:49px; height:1px;}
.selftest .line-2-n2 {top:395px; left:253px; width:1px; height:189px;}
.selftest .line-2-y .txt {transform:translate(-145%, -50%); margin-top:0;}
.selftest .line-3-y {top:790px; left:102px; width:1px; height:170px;}
.selftest .line-3-y .txt {transform:translate(-145%, -50%); margin-top:0;}
.selftest .line-3-n {top:714px; left:205px; width:49px; height:1px;}
.selftest .line-3-n2 {top:583px; left:253px; width:1px; height:132px;}
.selftest .line-4-b {top:583px; left:253px; width:51px; height:1px;}
.selftest .line-4-1-b-h {top:395px; left:303px; width:51px; height:1px;}
.selftest .line-4-1-b-v {top:395px; left:303px; width:1px; height:189px;}
.selftest .line-4-1-a-h {top:395px; left:558px; width:49px; height:1px;}
.selftest .line-4-1-1-b-v {top:70px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-1-b-h {top:70px; left:607px; width:1px; height:326px;}
.selftest .line-4-1-1-a-v {top:70px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-1-a-h {top:70px; left:922px; width:1px; height:326px;}
.selftest .line-4-1-2-b-v {top:200px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-2-b-h {top:200px; left:607px; width:1px; height:196px;}
.selftest .line-4-1-2-a-v {top:200px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-2-a-h {top:200px; left:922px; width:1px; height:196px;}
.selftest .line-4-1-3-b-v {top:329px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-3-b-h {top:329px; left:607px; width:1px; height:67px;}
.selftest .line-4-1-3-a-v {top:329px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-3-a-h {top:329px; left:922px; width:1px; height:67px;}
.selftest .line-4-1-4-b-v {top:459px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-4-b-h {top:395px; left:607px; width:1px; height:65px;}
.selftest .line-4-1-4-a-v {top:459px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-4-a-h {top:395px; left:922px; width:1px; height:65px;}
.selftest .line-4-1-5-b-v {top:566px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-5-b-h {top:395px; left:607px; width:1px; height:172px;}
.selftest .line-4-1-5-a-v {top:566px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-5-a-h {top:395px; left:922px; width:1px; height:172px;}
.selftest .line-4-1-6-b-v {top:695px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-6-b-h {top:395px; left:607px; width:1px; height:301px;}
.selftest .line-4-1-6-a-v {top:695px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-6-a-h {top:395px; left:922px; width:1px; height:301px;}
.selftest .line-4-1-7-b-v {top:847px; left:607px; width:49px; height:1px;}
.selftest .line-4-1-7-b-h {top:395px; left:607px; width:1px; height:453px;}
.selftest .line-4-1-7-a-v {top:847px; left:873px; width:49px; height:1px;}
.selftest .line-4-1-7-a-h {top:395px; left:922px; width:1px; height:453px;}
.selftest .line-4-1-s {top:395px; left:922px; width:73px; height:1px;}
.selftest .line-4-2-b-h {top:1035px; left:303px; width:51px; height:1px;}
.selftest .line-4-2-b-v {top:583px; left:303px; width:1px; height:453px;}
.selftest .line-4-2-a-h {top:1035px; left:558px; width:97px; height:1px;}
.selftest .line-4-2-1-a-h {top:1035px; left:873px; width:124px; height:1px;}

.btn-reset {display:inline-block; color:#fff; font-size:18px; line-height:1.4em; letter-spacing:-.04em; padding:22px 30px; background:#004ea2; border:0;}
.btn-reset:after {content:""; display:inline-block; vertical-align:middle; margin:-.2em 0 0 10px; width:19px; height:19px; background:url("../images/sub/icon_reset.png") 50% 50% no-repeat;}

/* mobild */
.selftest-m .box {display:none; position:relative; margin:0 auto; text-align:center; width:207px; height:127px; color:#878787; font-size:14px; font-weight:500; line-height:22px; letter-spacing:-.04em; background:#fafafa; border:1px solid #dfdfdf; border-radius:5px; justify-content:center; align-items:center; z-index:2;}
.selftest-m .box .bt {display:inline-block; vertical-align:top; margin:0 4px; width:68px; height:24px; font-size:14px; font-weight:300; line-height:22px; letter-spacing:0; background:#fff; border:1px solid #a8a8a8; border-radius:4px;}
.selftest-m .box .complete {display:none; vertical-align:top; width:68px; height:24px; background:#fff url("../images/sub/m_selftest_check.png") 50% 50% no-repeat; background-size:auto 14px; box-shadow:1px 1px 1px rgba(0,0,0,.25); border-radius:4px;}
.selftest-m .box button.bt,
.selftest-m .box button.go,
.selftest-m .box button.choice {display:none;}
.selftest-m .box.active {display:flex; background:#fff; border:3px solid #5658ad; color:#2c2c2c;}
.selftest-m .box.active span.bt {display:none;}
.selftest-m .box.active button.bt {display:inline-block;}
.selftest-m .box.active button.bt.yes {color:#004ea2; border-color:#004ea2;}
.selftest-m .box.active button.bt.no {color:#e6002d; border-color:#e6002d;}
.selftest-m .box.active button.choice {color:#5658ad; border-color:#5658ad;}
.selftest-m .box.selected {display:flex; background:#5658ad; border-color:#5658ad; color:#fff;}
.selftest-m .box.selected span.bt,
.selftest-m .box.selected button.bt {display:none;}
.selftest-m .box.selected .complete {display:inline-block;}
.selftest-m .box.selected .sm i {background-image:url("../images/sub/m_selftest_submit_on.png");}
.selftest-m .box.selected .go {border-color:#5658ad; color:#004ea2; box-shadow:1px 1px 1px rgba(0,0,0,.25);}
.selftest-m .box.selected span.go {display:none;}
.selftest-m .box.selected button.go {display:block;}
.selftest-m .st p {margin-bottom:16px;}
.selftest-m .sm {display:inline-flex; align-items:center; text-align:left; font-size:13px; line-height:18px;}
.selftest-m .sm i {width:40px; height:40px; background:url("../images/sub/m_selftest_submit_off.png") 50% 50% no-repeat; background-size:contain; margin-right:9px;}
.selftest-m .sm .go {position:absolute; right:10px; bottom:10px; width:30px; height:30px; text-align:center; font-size:12px; font-weight:500; letter-spacing:0; line-height:28px; background:#fff; border:1px solid #a8a8a8; border-radius:100%;}

.selftest-m {margin-bottom:30px;}
.selftest-m .line {display:none; position:relative; width:1px; height:14px; margin:0 auto; background:#dfdfdf;}
.selftest-m .line .dot {position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background:#dfdfdf; border-radius:100%;}
.selftest-m .line .txt {position:absolute; top:50%; right:50%; right:10px; transform:translateY(-50%); color:#dfdfdf; font-size:12px; font-weight:500; line-height:1em; letter-spacing:0;}
.selftest-m .line.active {display:block; background:#5658ad;}
.selftest-m .line.active .dot {width:14px; height:14px; margin:-7px 0 0 -7px; background:#fff; border:3px solid #e6002d;}
.selftest-m .line.active .txt {color:#2c2c2c;}
.selftest-m .line.h60 {height:60px;}
.selftest-m .line-4-1.active {height:60px;}
.selftest-m .line-4-2.active {height:60px;}

@media (max-width: 640px) {
	.btn-reset {font-size:15px; padding:15px 22px; margin:4px 3px;}
	.btn-reset:after {width:14px; height:14px; background-size:contain; margin-left:12px;}
}