@charset "utf-8";
@import url("m_common.css");

#wrap {height:100%; min-height:568px;}
.main {width:100%; height:100%; overflow:hidden; position:relative;}
.main_con {width:100%; height:100%; position:absolute; left:0; top:0;}
.main01 {position:relative;}
.main_vr > div {width:100%; height:100%; position:absolute; left:0; top:0; z-index:100; opacity:0;}
.main_vr > div:nth-of-type(1) {background:url('../imgs/main/main0101_m.jpg') no-repeat left center; background-size:cover; transform:scale(1.1, 1.1);}
@keyframes mainmt01 {
	0% {
		transform:scale(1.1, 1.1);
		opacity:1;
	}
	85% {
		transform:scale(1, 1);
		opacity:1;
	}
	100% {
		transform:scale(1, 1);
		opacity:0;
	}
}
.main_vr > div:nth-of-type(2) {background:url('../imgs/main/main0102_m.jpg') no-repeat left top; background-size:cover; transform:scale(1.1, 1.1);}
.main_vr > div:nth-of-type(3) {background:url('../imgs/main/main0103_m.jpg') no-repeat left center; background-size:cover; transform:scale(1.1, 1.1);}
.main_vr > div.on {animation:mainmt01 11s linear both; z-index:1000; opacity:1;} 
.main01 > div.txt_mt {position:absolute; left:20px; bottom:42px; z-index:1000; color:#fff; font-size:12px; font-family:'LibreBaskervilleR';}
.main01 > div.txt_mt > span {margin-bottom:21px; display:block; opacity:0; transform:translate(40px 0);}
.main01 > div.txt_mt > span.on {animation:maintxt 1s 1s ease-out both;}
.main01 > div.txt_mt > span.remove {animation:fadeout .7s ease-out;}
.main01 > div.txt_mt > strong {font-size:40px; line-height:46.65px; display:block;}
.main01 > div.txt_mt > strong span {display:inline-block; opacity:0; transform:translate(50px, 0);}
.main01 > div.txt_mt > strong span.on {-webkit-animation:maintxt .8s 1s ease-out both; animation:maintxt .8s 1s ease-out both;}
.main01 > div.txt_mt > strong span.remove {animation:fadeout .7s ease-out;}
@keyframes maintxt {
	0% {
		transform:translate(50px, 0);
		opacity:0;
	}
	100% {
		transform:translate(0, 0);
		opacity:1;
	}
}

@keyframes fadeout {
	0% {		
		transform:translate(0, 0);
		opacity:1;
	}
	100% {		
		transform:translate(0, 0);
		opacity:0;
	}
}

.main02 {background:#fff url('../imgs/main/dongwon.png') no-repeat calc(50% + 39px) 11.2rem; background-size:auto calc(100% - 5.3rem); overflow:hidden; overflow-y:auto; padding:0; transition:none; flex-direction:column;}
.main02.active {background-position:calc(50% + 39px) 5.3rem; transition:none;}
.main02 > div {width:100%; padding-left:20px;}
.main02_txt {width:100%; position:static; padding-top:15.3rem; margin-top:0;}
.main02_txt span, .main02_txt strong {font-size:14px; font-family:'LibreBaskervilleR'; color:#000;}
.main02_txt strong {font-size:30px; display:block; line-height:4rem; margin:.5rem 0 3rem;}
.main02_txt p {display:none;}
.main02.active .main02_txt {transform:translate(0, 0); transition:none;}
.main02 > div.main02_con {width:100%; height:auto; padding:0 20px; margin-top:40px; position:static; float:none; clear:both; display:block;}
.main02 > div.main02_con > div {width:100%; height:auto; overflow:hidden; padding:0;}
.main02_con ul {width:100%; height:auto; overflow:hidden; display:block; }
.main02_con ul li {width:100%; padding:0 0 0 52px; position:relative; float:none; clear:both; word-break:keep-all;}
.main02_con ul li:nth-of-type(1) {background:url('../imgs/ico/best01.png') no-repeat left top; background-size:3.5rem;}
.main02_con ul li:nth-of-type(2) {background:url('../imgs/ico/best02.png') no-repeat left top; background-size:3.5rem;}
.main02_con ul li:nth-of-type(3) {background:url('../imgs/ico/best03.png') no-repeat left top; background-size:3.5rem;}
.main02_con ul li:nth-of-type(4) {background:url('../imgs/ico/best04.png') no-repeat left top; background-size:3.5rem;}
.main02_con ul li + li, .main02_con ul li:nth-of-type(2) ~ li {margin-top:2.4rem; margin-left:0;}
.main02_con ul li + li:after {content:""; position:static; left:0; top:0; width:0; height:0; background:none;}
.main02_con ul li:nth-of-type(2) ~ li:after {content:""; position:static; width:0; height:0; background:none;}
.main02_con ul li > strong, .main02_con ul li > span {font-size:22px; display:inline-block; color:#000; font-family:'LibreBaskervilleR'; line-height:100%;}
.main02_con ul li > span {font-size:1.6rem; margin:0; padding:.8rem 0; line-height:2rem;}
.main02_con ul li > span > span {display:block;}
.main02_con ul li > strong {display:none;}
.main02_con ul li > p {margin-top:.8rem;}
.main02_con ul li > p span {display:block;}

.btn_slide {width:100%; position:fixed; left:0; bottom:3.75rem; padding-right:3.75rem; text-align:right; background:transparent; z-index:1000;}
.btn_slide > button {width:3.8rem; height:1.4rem; border:0; background:transparent url('../imgs/btn/btn_prev_w.svg') no-repeat left bottom; background-size:38px;}
.btn_slide > button:after, .btn_slide > button:before {border:0 ! important; position:static ! important; width:0 ! important; height:0 ! important;}
.btn_slide > button + button {background:transparent url('../imgs/btn/btn_next_w.svg') no-repeat left top; background-size:38px;}
.btn_slide.type2 > button {width:3.8rem; height:1.4rem; border:0; background:transparent url('../imgs/btn/btn_prev_b.svg') no-repeat left bottom; background-size:38px;}
.btn_slide.type2 > button + button {background:transparent url('../imgs/btn/btn_next_b.svg') no-repeat left top; background-size:38px;}

.main03, .main04 {position:relative;}
.main03 > div {width:100%; height:100%; position:absolute; left:0; top:0; z-index:100;}
.business, .business > div:nth-of-type(1) {width:100%; height:100%; background:url('../imgs/main/main03_m.jpg') no-repeat left top; background-size:cover;}
.belief, .belief > div:nth-of-type(1) {background:url('../imgs/main/main0301_m.jpg') no-repeat center center; background-size:cover;}
.speed, .speed > div:nth-of-type(1) {background:url('../imgs/main/main0302_m.jpg') no-repeat center center; background-size:cover;}
.safe, .safe > div:nth-of-type(1) {background:url('../imgs/main/main0303_m.jpg') no-repeat center center; background-size:cover;}
.satisfaction, .satisfaction > div:nth-of-type(1) {background:url('../imgs/main/main0304_m.jpg') no-repeat center center; background-size:cover;}
.main03 .txt_area {left:20px; top:0; margin-top:0; font-size:12px; color:#fff; transition:none; padding-top:15.3rem;}
.txt_area > span, .txt_area > strong {font-family:'LibreBaskervilleR';}
.txt_area > strong {font-size:3rem;  line-height:30px; margin:11px 0 27px; display:block;}
.active .txt_area {transform:translate(0, 0);}
.interaction {width:calc(100% - 40px); position:absolute; right:auto; left:20px; top:50%; margin-top:34px; z-index:1000; display:flex; flex-wrap:wrap; justify-content:space-between;}
.main03 .interaction, .main04 .interaction {margin-top:34px;}
.interaction li {width:70px;}
.interaction li + li {margin:0;}
.interaction li button, .interaction li a {width:100%; position:relative; padding-top:57px;}
.interaction li button:after, .interaction li a:after {width:51px; height:51px; border-radius:100%; background:rgba(0,0,0,.5); position:absolute; left:50%; top:0; margin-left:-25.5px;} 
.interaction li button:hover:after, .interaction li.on button:after, .interaction li a:hover:after, .interaction li.on a:after {background:#0099e8;}
.interaction li button:before, .interaction li a:before {content:""; width:51px; height:51px; position:absolute; left:50%; top:0; margin-left:-25.5px; background:url('../imgs/ico/belief.png') no-repeat center center; background-size:2.2rem;}
.interaction li:nth-of-type(2) button:before {background-image:url('../imgs/ico/speed.png'); background-size:2.5rem;}
.interaction li:nth-of-type(3) button:before {background-image:url('../imgs/ico/safe.png'); background-size:2.5rem;}
.interaction li:nth-of-type(4) button:before {background-image:url('../imgs/ico/best.png'); background-size:2.2rem;}
.interaction li button span {margin-top:0;}

.main04 .txt_area {position:absolute; left:20px; top:15.3rem; margin-top:0; font-size:12px; color:#fff;}
.office, .office > div:nth-of-type(1) {background:url('../imgs/main/main0401_m.jpg') no-repeat center center; background-size:cover;}
.branch, .branch > div:nth-of-type(1) {background:url('../imgs/main/main0402_m.jpg') no-repeat center center; background-size:cover;}
.map, .map > div:nth-of-type(1) {background:url('../imgs/main/main0401_m.jpg') no-repeat center center; background-size:cover;}
.main04 .interaction li + li {margin:0;}
.main04 .interaction li a:before {width:51px; height:51px; border-radius:100%; background:url('../imgs/ico/main0401.png') no-repeat center center; background-size:2.2rem;}
.main04 .interaction li a:hover:after {background:rgba(0,0,0,.5);}
.main04 .interaction li:nth-of-type(2) a:before {background-image:url('../imgs/ico/main0402.png'); background-size:2.2rem;}
.main04 .interaction li:nth-of-type(3) a:before {background-image:url('../imgs/ico/main0403.png'); background-size:1.6rem;}
.main04 .interaction li a:hover:before {background:url('../imgs/ico/main0401.png') no-repeat center center; background-size:2.13rem;}
.main04 .interaction li:nth-of-type(2) a:hover:before {background:url('../imgs/ico/main0402.png') no-repeat center center; background-size:1.9rem;}
.main04 .interaction li:nth-of-type(3) a:hover:before {background:url('../imgs/ico/main0403.png') no-repeat center center; background-size:1.4rem;}