@charset "utf-8";

/* page background set */
.sub-title-area.about {background-image:url("../image/common/sub_visual1.jpg");}
.sub-title-area.about span {letter-spacing:0;}
.sub-title-area.ceo {background-image:url("../image/common/sub_visual2.jpg");}
.sub-title-area.ceo h3 {letter-spacing:-0.04em;}
.sub-title-area.office {background-image:url("../image/common/sub_visual3.jpg");}
.sub-title-area.office span {letter-spacing:0;}
.sub-title-area.history {background-image:url("../image/common/sub_visual4.jpg");}
.sub-title-area.history span {letter-spacing:0;}
.sub-title-area.location {background-image:url("../image/common/sub_visual10.jpg");}

/* about, ceo */
.com-wrap {padding-top:0;}
.com-wrap .cont_bf {padding:0; height:1024px; color:#fff; text-align:center; display:table;}
.com-wrap .cont_bf .inner {display:table-cell; vertical-align:middle;}
.com-wrap .cont_bf span {display:block; font-size:36px; letter-spacing:-0.05em; padding-bottom:8px;}
.com-wrap .cont_bf h4 {color:inherit; font-size:60px;}
.com-wrap .cont_bf .bar {background-color:CurrentColor;}
.com-wrap .cont_bf p:last-child {padding-top:24px; font-weight:700;}

.com-wrap .about_first {background:url("../image/company/bg_about1.jpg") center no-repeat; background-size:cover;}
.com-wrap .about_two {background:url("../image/company/bg_about2.jpg") center no-repeat; background-size:cover;}
.com-wrap .ceo_first {background:url("../image/company/bg_ceo1.jpg") center no-repeat; background-size:cover;}
.com-wrap .ceo_two {background:url("../image/company/bg_ceo2.jpg") center no-repeat; background-size:cover;}
.com-wrap .ceo_first h4, .com-wrap .ceo_two h4 {letter-spacing:-0.03em;}

@media screen and (max-width: 1280px) {
	.com-wrap .cont_bf {height:800px;}
	.com-wrap .cont_bf h4 span {font-size:2.8vmax;}
	.com-wrap .cont_bf h4 {font-size:4.5vmax;}
}
@media screen and (max-width: 1024px) {
	.com-wrap .cont_bf {height:768px;}
}
@media screen and (max-width: 568px) {
	.com-wrap .cont_bf {height:568px;}
	.com-wrap .cont_bf h4 span {font-size:20px;}
	.com-wrap .cont_bf h4 {font-size:28px;}
}

/* history */
.history-wrap {border-bottom:1px solid #d7d7d7; padding-bottom:5.333em;}
.history-wrap .cont_bw {padding-top:64px;}
.history-wrap * {box-sizing:border-box;}
.history-wrap .history-cont {width:100%; height:auto; padding-bottom:64px; position:relative; overflow:hidden;}
.history-wrap .history-cont:before, .history-wrap .history-cont:after {content:''; display:block; width:1px; position:absolute; top:0; left:50%;}
.history-wrap .history-cont:before {height:100%; background:#d7d7d7;}
.history-wrap .history-cont:after {height:0; background:#0158cf; animation:his_bar1 alternate .3s forwards linear;}

.history-wrap .history-cont .inner {float:right; width:50%; margin-top:48px; padding-left:48px; position:relative;}
.history-wrap .history-cont .inner h5 {font-weight:700; font-size:36px; margin-top:-20px; color:#0f1522;}
.history-wrap .history-cont .inner h5:before, .history-wrap .history-cont .inner h5:after {content:''; display:block; height:1px; position:absolute; top:0; left:0;}
.history-wrap .history-cont .inner h5:before {width:32px; background:#d7d7d7;}
.history-wrap .history-cont .inner h5:after {width:0; background:#0158cf; animation:his_bar2 .3s alternate forwards linear;}
.history-wrap .history-cont .inner i {display:block; width:8px; height:8px; border-radius:100%; background:#d7d7d7; position:absolute; top:-3px; left:-3px; z-index:1;}
.history-wrap .history-cont .inner i:before {content:''; display:block; width:24px; height:24px; border-radius:100%; opacity:0; background:rgba(1,88,207,.3); margin:-8px 0 0 -8px; animation:his_circle .3s alternate forwards ease;}
.history-wrap .history-cont .inner ul {width:100%; height:auto; margin-top:24px;}
.history-wrap .history-cont .inner ul li {margin-bottom:8px; padding-left:14px; line-height:1.2; position:relative;}
.history-wrap .history-cont .inner ul li:last-child {margin-bottom:0;}
.history-wrap .history-cont .inner ul li:before {content:''; display:block; width:4px; height:4px; border-radius:100%; background:#7a808f; position:absolute; top:7px; left:0;}

.history-wrap .history-cont p {float:left; width:50%; text-align:right; padding-top:24px; padding-right:48px; line-height:0;}
.history-wrap .history-cont p img {max-width:100%;}

.history-wrap .history-cont.maxparallax.on:after {animation:his_bar1_over alternate 1s forwards linear;}
.history-wrap .history-cont.maxparallax.on .inner h5 {color:#0158cf;}
.history-wrap .history-cont.maxparallax.on .inner h5:after {animation:his_bar2_over .3s alternate forwards 1s linear;}
.history-wrap .history-cont.maxparallax.on .inner i {background:#0158cf;}
.history-wrap .history-cont.maxparallax.on .inner i:before {animation:his_circle_over .3s alternate forwards 1.3s ease;}

@keyframes his_bar1 { from {height:100%;} to {height:0;} }
@keyframes his_bar2 { from {width:32px;} to {width:0;} }
@keyframes his_circle { from {transform:scale(1); opacity:1;} to {transform:scale(0); opacity:0;} }
@keyframes his_bar1_over { from {height:0;} to {height:100%;} }
@keyframes his_bar2_over { from {width:0;} to {width:32px;} }
@keyframes his_circle_over { from {transform:scale(0); opacity:0;} to {transform:scale(1); opacity:1;} }

@media screen and (max-width: 1280px) {
	.history-wrap .history-cont .inner h5 {font-size:2.8vmax;}
}
@media screen and (max-width: 1024px) {
	.history-wrap .history-cont {padding-bottom:48px;}
}
@media screen and (max-width: 768px) {
	.history-wrap .history-cont:before, .history-wrap .history-cont:after {left:24px;}
	.history-wrap .history-cont .inner {width:96.33%; float:left; margin-left:24px;}
	.history-wrap .history-cont .inner h5 {margin-top:-14px;}
	.history-wrap .history-cont .inner ul {margin-top:14px;}
	.history-wrap .history-cont .inner ul li {padding-left:8px;}
	.history-wrap .history-cont p {width:100%; padding-right:0; text-align:left; padding-top:14px; padding-left:72px;}
	.history-wrap .history-cont p img {width:320px;}
}
@media screen and (max-width: 568px) {
	.history-wrap .history-cont:before, .history-wrap .history-cont:after {left:14px;}
	.history-wrap .history-cont .inner {width:100%; margin-left:14px;}
	.history-wrap .history-cont .inner h5 {font-size:30px;}
	.history-wrap .history-cont p {padding-left:64px;}
	.history-wrap .history-cont p img {width:100%;}
}

/* office */
.office-wrap {text-align:center; border-bottom:1px solid #d7d7d7; padding-bottom:5.333em;}
.office-wrap * {box-sizing:border-box;}
.office-wrap .office_name {width:20%; color:#0f1522;}
.office-wrap .office_add {width:65%;}
.office-wrap .office_tel {width:15%;}

.office-wrap .office_sch {margin:48px 0;}
.office-wrap .office_sch select {display:inline-block;}

.office-wrap .office_lst_wrap {width:100%; height:auto; border-top:2px solid #0f1522; border-bottom:1px solid #d7d7d7; text-align:left;}
.office-wrap .office_lst_wrap > p {width:100%; height:auto; font-weight:500; text-align:center; overflow:hidden;}
.office-wrap .office_lst_wrap span {display:block; float:left; padding:24px 0; text-align:center;}

.office_lst {width:100%; height:auto;}
.office_lst dt {width:100%; height:auto; border-top:1px solid #d7d7d7; position:relative; overflow:hidden; cursor:pointer;}
	.office_lst dt .office_add {text-align:left;}
	.office_lst dt .open_detail {display:block; padding:8px 24px 8px 8px; position:absolute; bottom:16px; right:14%; background-color:#7a808f; color:#fff; font-size:14px;}
	.office_lst dt .open_detail i {display:block; width:14px; height:7px; position:absolute; top:12px; right:5px;}
	.office_lst dt .open_detail i:before {content:''; height:0; width:0; display:block; border:5px transparent solid; border-bottom-width:0; border-top-color:CurrentColor;}

.office_lst dd {width:100%; height:auto; padding:32px; border-top:1px solid #d7d7d7; overflow:hidden;}
	.office_lst .map {float:left; width:50%; height:320px; background-color:#eee; border:1px solid #d7d7d7;}
	.office_lst .office_info {float:left; width:50%; height:auto; padding:78px 0 78px 32px;}
	.office_lst .office_info p {padding:24px 0; line-height:1.3;}
	.office_lst .office_info p:after {content:''; display:block; width:48px; height:1px; background-color:#0f1522; margin-top:24px;}
	.office_lst .office_info ul {width:100%; height:auto;}
	.office_lst .office_info ul li {margin:4px 0; letter-spacing:0;}
	.office_lst .office_info ul li strong {display:inline-block; width:60px; text-transform:uppercase; font-weight:700;}

/* active */
	.office_lst dt.active .open_detail {background-color:#0158cf;}
	.office_lst dt.active .open_detail i {top:11px;}
	.office_lst dt.active .open_detail i:before {border:5px transparent solid; border-top-width:0; border-bottom-color:CurrentColor;}

@media screen and (max-width: 1280px) {
	.office-wrap .office_name {width:18%;}
	.office-wrap .office_add {width:67%;}
	.office-wrap .office_tel {width:15%;}
	.office_lst dt .open_detail {right:14%;}
}
@media screen and (max-width: 1024px) {
	.office-wrap .office_lst_wrap > p {display:none;}
	.office-wrap .office_lst_wrap span {float:none; width:100%; padding:0; text-align:left;}
	
	.office_lst dt {padding:24px 14px;}
	.office_lst dt .office_name {font-weight:500;}
	.office_lst dt .office_add {margin:14px 0; padding:0 14px 0 24px; background:url("../image/company/ico_location.svg") left center no-repeat; word-break:normal;}
	.office_lst dt .office_tel {padding-left:24px; background:url("../image/company/ico_call.svg") left center no-repeat;}
	.office_lst dt:nth-child(1) {border-top:none;}
	.office_lst dt .open_detail {display:none;}
	.office_lst dd {padding:24px 14px;}
	.office_lst .map {float:none; width:100%; height:240px;}
	.office_lst .office_info {float:none; width:100%; padding:24px 0 0;}
	.office_lst .office_info p {padding:14px 0;}
	.office_lst .office_info p:after {margin-top:14px;}
}
@media screen and (max-width: 568px) {
	.office-wrap .office_sch {margin:32px 0;}
	.office-wrap .office_sch select {display:block; margin:4px auto;}
	.office_lst dt, .office_lst dd {padding-right:0; padding-left:0;}
	.office_lst dt .office_add {background-position:0 4px; line-height:1.3;}
	.office_lst .map {height:200px;}
}

/* location */
.loc-wrap {}
.loc-wrap .cont_bf {background-color:#e9ecf3}
.loc-wrap .box {width:100%; height:auto; position:relative;}
.loc-wrap .box .mapbox {width:50%; height:420px; background:#eee; border:1px solid #d7d7d7; box-sizing:border-box;}
.loc-wrap .box .loc_info {width:50%; height:auto; position:absolute; top:4em; right:40px; z-index:999;}
.loc-wrap .box .loc_info h5 {padding:2em 2.6em; color:#fff; background-color:rgba(1,88,207,.95); box-shadow:27px 27px 18px rgba(0,0,0,.18);}
.loc-wrap .box .loc_info strong {display:block; padding-bottom:.5em; font-weight:700;}
.loc-wrap .box .loc_info ul {width:100%; height:auto; padding-left:4em; margin-top:2em; display:table; box-sizing:border-box;}
.loc-wrap .box .loc_info ul li {display:table-cell; width:50%;}

.loc-wrap .cont_bf .box .loc_info h5 {background-color:rgba(0,31,113,.95);}

.loc-wrap .root_daum_roughmap .cont {display: none;}
.loc-wrap .root_daum_roughmap {height: 100%; width: 100%;}
.loc-wrap .root_daum_roughmap .wrap_map {height: 100%;}

@media screen and (max-width: 768px) {
	.loc-wrap .box .mapbox {width:100%; height:360px;}
	.loc-wrap .box .loc_info {width:100%; position:static; margin-top:1em;}
	.loc-wrap .box .loc_info h5 {box-shadow:none;}
}
@media screen and (max-width: 568px) {
	.loc-wrap .box .mapbox {height:240px;}
	.loc-wrap .box .loc_info h5 {padding:1.4em;}
	.loc-wrap .box .loc_info ul {padding-left:1.4em;}
}