@charset "utf-8";
@font-face {
     font-family: 'S-CoreDream-1Thin';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
     font-family: 'SEBANG_Gothic_Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 @font-face {
     font-family: 'NanumDaeHanMinGugYeorSaCe';
     src: url(https://hangeul.pstatic.net/hangeul_static/webfont/clova/NanumDaeHanMinGugYeorSaCe.eot);
     src: url(https://hangeul.pstatic.net/hangeul_static/webfont/clova/NanumDaeHanMinGugYeorSaCe.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/clova/NanumDaeHanMinGugYeorSaCe.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/clova/NanumDaeHanMinGugYeorSaCe.ttf) format("truetype");
 }
 @font-face {
     font-family: 'Chosunilbo_myungjo';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'S-CoreDream-4Regular';
	font-size: 13px;
	color:#fff;
	background-color:#fff;
     overflow: hidden;
}
input,textarea{ font-family: 'S-CoreDream-4Regular';}
img{ border:0px;}



body,ul,dl,ol,li{margin:0px; padding:0px; list-style-type:none;}

a{ text-decoration:none; color:#fff;}



/*공통*/

.fend{clear:both;}
img{ vertical-align:top; border:0px;}

html,body{ margin:0; padding:0; width:100%; height:100%; min-width:1200px;}
.pg-pips ul li a{ background-color: #aaa;}
.pg-pips ul li a.active{ background-color: #e20b12;}
.pg-vertical .pg-pips { right:auto; left: 10px;}

.top_wrap{ height: 100px; color:#000;}
.top_wrap .top_box{ position: fixed; top:0px; left: 0px; width:100%; height: 99px; border-bottom: solid 1px rgba(0,0,0,0.05); background-color: #fff; z-index: 1000;}
.top_wrap .top_box .inbox{ position: relative; width:1400px; margin: 0 auto;}
.top_wrap .top_box .inbox .logo{ position: absolute; top:26px; left: 0px; cursor: pointer;}
.top_wrap .top_box .inbox .menu{ position: absolute; top:24px; left: 160px; width:calc(100% - 160px)}
.top_wrap .top_box .inbox .menu ul{ position:relative; display: inline-table; margin-right: 20px;}
.top_wrap .top_box .inbox .menu ul li:nth-child(1){ margin-right: 30px; font-size: 16px; font-family: 'S-CoreDream-5Medium'; height: 50px; line-height: 50px; padding: 0 15px 0 15px; cursor: pointer;}
.top_wrap .top_box .inbox .menu ul li.sub{ display: none; position: absolute; top:48px; left: 0px; height: 60px; background-color: #c40006; color: #fff; border-radius: 46px;}
.top_wrap .top_box .inbox .menu ul li.sub dt{ display: inline-table; height: 40px; line-height: 40px; margin: 10px 0 0 20px; font-size: 14px; font-family: 'S-CoreDream-5Medium'; cursor:pointer;}
.top_wrap .top_box .inbox .menu ul li.sub dt:nth-child(1){ margin-left: 30px;}
.top_wrap .top_box .inbox .menu ul li.sub.mt{ width:650px;}
.top_wrap .top_box .inbox .menu ul li.sub.st{ width:340px;}
.top_wrap .top_box .inbox .menu ul:hover li:nth-child(1){ color: #c40006;}
/*
.top_wrap .top_box .inbox .menu ul:hover li.sub{ display: block;}
*/
.top_wrap .top_box .inbox .menu ul li.sub dt:hover{ opacity: 0.6;}
.top_wrap .top_box .inbox .menu ul li.sub dt.on{ opacity: 0.6;}
.top_wrap .top_box .inbox .menu ul.on li:nth-child(1){ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn{ position: absolute; top:20px; font-size: 15px; right: 0px;}
.top_wrap .top_box .inbox .menu .btn dt{ position: relative; display: inline-table; margin-left: 40px; letter-spacing: -1px; cursor: pointer;}
.top_wrap .top_box .inbox .menu .btn dt:hover{ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn dt.pdf::before{ content: ''; position: absolute; top:2px; left: -20px; width:20px; height: 20px; background: url('/_resource/images/marketing/ico_top_pdf.png');}
.top_wrap .top_box .inbox .menu .btn dt a{ color: #000;}
.top_wrap .top_box .inbox .menu .btn dt:hover a{ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn dt.stax::before{ content: ''; position: absolute; top:1px; left: -23px; width:20px; height: 20px; background: url('/_resource/images/marketing/ico_top_stax.png');}
.top_wrap .top_box .inbox .menu .btn dt.wisemob::before{ content: ''; position: absolute; top:1px; left: -23px; width:20px; height: 20px; background: url('/_resource/images/marketing/ico_top_wisemob.png');}

.top_navi{ position: fixed; top:0px; left: 0px; width:100%; height: 50px; color: #fff; z-index: 1000;}
.top_navi .inbox{ position: relative; width:1200px; margin: 0 auto;}
.top_navi .logo{ position: absolute; top:20px; left: 0px; width:98px; height: 48px; background: url(/_resource/images/top_logo.png) no-repeat top center;}
.top_navi .menu{ position: absolute; top:20px; right: 0px;}
.top_navi .menu ul{ position: relative; display: inline-table; line-height: 50px; margin-left: 20px; letter-spacing: 1px; font-family: 'SEBANG_Gothic_Bold'; font-size: 14px; cursor: pointer;}
.top_navi .menu ul div{ position: absolute; top:5px; left: 0px; width:100%; height: 3px; background-color: #e20b12; display: none;}
.top_navi .menu ul:hover{ color: #e20b12;}
.top_navi .menu ul.on{ color: #e20b12;}
.top_navi .menu ul.on div{ display: block;}
.top_navi .menu.red ul { color: #0a1e3c;}
.top_navi .menu.red ul:hover { color: #e20b12;}
.top_navi .menu.red ul.on{ color: #e20b12;}

.btn_wisemob{ position: fixed; top:30px; right: 20px; z-index: 1000; cursor: pointer;}
.btn_wisemob img{ height: 30px;}

.float{ position:fixed; top:calc(50% - 50px); right: 20px; width:81px; text-align: center; z-index: 10000;}
.float img{ margin-bottom: 15px; cursor: pointer;}

.mousewheel{ position: fixed; bottom: 10px; left: calc(50% - 55px); z-index: 2000;}
#mouse_body { border-style: solid; border-width: 1px; border-color: #fff; border-radius: 32px; height: 30px; width: 16px; margin: 0 auto;}
#mouse_wheel { border-style: solid; border-width: 2px; border-color: #fff; border-radius: 8px; background-color: #fff; position: relative; height: 2px; width: 2px; margin: 0 auto;  animation: wheel_animation 1s linear infinite;}
.mousewheel .txt{font-family: 'S-CoreDream-3Light'; font-size: 11px; letter-spacing: 2px; margin-top: 4px;}
.mousewheel.red #mouse_body{ border-color: #e20b12;}
.mousewheel.red #mouse_wheel{ border-color: #e20b12; background-color: #e20b12;}
.mousewheel.red .txt{ color: #e20b12;}

@keyframes wheel_animation { 
0% { opacity: 0; top: 2px;}
50% { opacity: 1; top: 50%;}
100% { opacity: 0; top: 20px;}
}

.section{ position:relative; width:100%; height:100%; overflow: hidden;}
.section .inbox{ position: absolute; top:0px; left: 0px; width:100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 200;}

.start .txt_wrap{ position:absolute; width:100%; height: 180px; top:calc(50% - 90px); left: 0px; z-index: 200;}
.start .video{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; z-index: 100;}
.start video{ width:100%; opacity:0.5;}
.start .bg_dot{ position:absolute; width:100%; height:100%; top:0px; left:0px; background:url(/_resource/images/bg_dot_b.png); opacity:1; z-index:105;}
.start .bg{ position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#0a1e3c; opacity:0.6; z-index:104;}
.start .txtbox{ text-align: center;}
.start .txtbox ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; text-shadow:1px 1px 1px rgba(0, 0, 0, .5); opacity: 0;}
.start .txtbox ul:nth-child(2){position:absolute; top:80px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; letter-spacing: -1px; opacity: 0;}
.start .txtbox ul:nth-child(3){position:absolute; top:150px; left: 0px; width:100%; font-size: 20px; font-family: 'S-CoreDream-3Light'; opacity: 0;}
.start.pg-active .txtbox ul:nth-child(1){ animation:secb01_01 4s forwards;}
.start.pg-active .txtbox ul:nth-child(2){ animation:secb01_02 4s forwards;}
.start.pg-active .txtbox ul:nth-child(3){ animation:secb01_03 4s forwards;}
@keyframes secb01_01 {
     0%{ left:-300px; opacity: 0;}
     30%{ left:0px; opacity: 1;}
     100%{ left:0px; opacity: 1;}
}
@keyframes secb01_02 {
     0%{ left:300px; opacity: 0;}
     30%{ left:0px; opacity: 1;}
     100%{ left:0px; opacity: 1;}
}
@keyframes secb01_03 {
     0%{ top:200px; opacity: 0;}
     20%{ top:300px; opacity: 0;}
     50%{ top:150px; opacity: 1;}
     100%{ top:150px; opacity: 1;}
}



.about .txtbox{ text-align: center; color: #0a1e3c; padding: 160px 0 0 0;}
.about .txtbox .title{ position: relative; height: 110px;}
.about .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.about .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; letter-spacing: -1px; color: #c4161c; opacity: 0;}
.about .txtbox .ceotxt{ opacity: 0;}
.about .txtbox .ceotxt ul:nth-child(1){ font-size: 20px; font-family: 'Chosunilbo_myungjo'; padding: 30px 0 30px 0; font-weight: 600;}
.about .txtbox .ceotxt ul:nth-child(2){ width:1000px; margin: 0 auto; font-size: 16px; font-family: 'S-CoreDream-3Light'; color: #555;}
.about .txtbox .ceotxt ul:nth-child(3){ padding: 15px 0 0 0; font-size: 17px; font-weight: 700;}
.about .txtbox .ceotxt ul:nth-child(3) span{ font-family: 'NanumDaeHanMinGugYeorSaCe'; font-size: 50px; margin: 0 10px 0 30px;}
.about .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_ceo.png') no-repeat bottom right; z-index: 100;}
.about.pg-active .txtbox .title ul:nth-child(1){ animation:secb02_01 1s forwards;}
.about.pg-active .txtbox .title ul:nth-child(2){ animation:secb02_02 1s forwards;}
.about.pg-active .txtbox .ceotxt{ animation:secb02_03 3s forwards;}
@keyframes secb02_01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes secb02_02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes secb02_03 {
     0%{ opacity: 0;}
     30%{ opacity: 0;}
     100%{ opacity: 1;}
}

.vision .txtbox{ text-align: center; color: #fff; padding: 160px 0 0 0;}
.vision .txtbox .title{ position: relative; height: 110px;}
.vision .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.vision .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.vision .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; letter-spacing: -1px; color: #fff; opacity: 0;}
.vision .txtbox .box{ position:absolute; top:280px; left: 0px; width:100%; opacity: 0;}
.vision .txtbox .box .one{ position:absolute; width:200px; height: 200px; border-radius: 200px; background-color: #c4161c; z-index: 300;}
.vision .txtbox .box .one ul:nth-child(1){ font-size: 30px; font-family: 'S-CoreDream-7ExtraBold'; padding-top: 54px;}
.vision .txtbox .box .one ul:nth-child(2){ font-size: 16px; line-height: 18px; font-family: 'S-CoreDream-3Light'; padding-top: 10px;}
.vision .txtbox .box .one.o1{ top:140px; left: calc(50% - 240px);}
.vision .txtbox .box .one.o2{ top:140px; left: calc(50% + 40px);}
.vision .txtbox .box .ico_x{ position:absolute; top:140px; left: calc(50% - 15px); font-size: 50px; line-height: 200px; font-family: 'S-CoreDream-1Thin';}
.vision .txtbox .box .o1_txt{ position:absolute; top:90px; right: calc(50% + 120px); padding-right: 60px; font-size: 16px; font-family: 'S-CoreDream-3Light'; height: 100px; background: url(/_resource/images/vline_01.png) no-repeat bottom right; z-index: 250;}
.vision .txtbox .box .o2_txt{ position:absolute; top:300px; left: calc(50% + 130px); vertical-align: bottom; padding-left: 60px; padding-top: 76px; font-size: 16px; font-family: 'S-CoreDream-3Light'; height: 100px; background: url(/_resource/images/vline_02.png) no-repeat top left; z-index: 250;}
.vision .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_vision.jpg') no-repeat bottom center; z-index: 100;}
.vision.pg-active .txtbox .title ul:nth-child(1){ animation:vision01 1s forwards;}
.vision.pg-active .txtbox .title ul:nth-child(2){ animation:vision02 2s forwards;}
.vision.pg-active .txtbox .box{ animation:vision03 1.5s forwards;}
.vision.pg-active .txtbox .box .o1_txt{ animation:vision04 3s infinite ease-in-out;}
.vision.pg-active .txtbox .box .o2_txt{ animation:vision05 3s infinite ease-in-out;}
@keyframes vision01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes vision02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes vision03 {
     0%{ top: 480px; opacity: 0;}
     50%{ top: 480px; opacity: 0;}
     100%{ top: 280px; opacity: 1;}
}
@keyframes vision04 {
     0%{ top: 90px;}
     50%{ top: 70px;}
     100%{ top: 90px;}
}
@keyframes vision05 {
     0%{ top: 300px;}
     50%{ top: 320px;}
     100%{ top: 300px;}
}

.business .txtbox{ text-align: center; color: #fff; padding: 160px 0 0 0;}
.business .txtbox .title{ position: relative; height: 110px;}
.business .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.business .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.business .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; letter-spacing: -1px; color: #fff; opacity: 0;}
.business .txtbox .txt{ position: relative; display: inline-table; margin-top: 30px; font-size: 15px; height: 40px; line-height: 40px; border-radius: 40px; background-color: #c4161c; padding: 0 30px 0 30px;}
.business .txtbox .txt div{ position:absolute; top:40px; left: calc(50% - 20px); width:0; height:0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #c4161c;}
.business .txtbox .box{ position: relative;}
.business .txtbox .box .one{ position:absolute; top:0px; left: 0px; width:100px; height: 100px; border-radius: 100px; background-color: #fff; border: solid 5px #c4161c; z-index: 200;}
.business .txtbox .box .one div{ display: inline-table; width:100%; height: 100px;}
.business .txtbox .box .one div li{ display: table-cell; height: 100px; vertical-align: middle; color: #c4161c; font-family: 'S-CoreDream-5Medium'; font-size: 15px; line-height: 18px;}
.business .txtbox .box .one.o1{ position:absolute; top:50px; left: calc(50% - 180px);  opacity: 0;}
.business .txtbox .box .one.o2{ position:absolute; top:50px; left: calc(50% + 80px); opacity: 0;}
.business .txtbox .box .one.o3{ position:absolute; top:260px; left: calc(50% + 130px); opacity: 0;}
.business .txtbox .box .one.o4{ position:absolute; top:410px; left: calc(50% - 50px); opacity: 0;}
.business .txtbox .box .one.o5{ position:absolute; top:270px; left: calc(50% - 250px); opacity: 0;}
.business .txtbox .box .logo{ position:absolute; top:205px; left: calc(50% - 60px); width:120px; height: 120px; border-radius: 120px; background-color:#c4161c; z-index: 250; opacity: 0;}
.business .txtbox .box .logo img{ width:70%; margin-top: 40px;}
.business .txtbox .box .line{ position:absolute; top:60px; left: calc(50% - 210px); width:400px; height: 400px; border-radius: 400px; border: solid 10px #fff; opacity: 0;}
.business .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_business.jpg') no-repeat top center; z-index: 100;}
.business.pg-active .txtbox .title ul:nth-child(1){ animation:business01 1s forwards;}
.business.pg-active .txtbox .title ul:nth-child(2){ animation:business02 2s forwards;}
.business.pg-active .txtbox .box .logo{ animation:business03 5s forwards;}
.business.pg-active .txtbox .box .line{ animation:business04 5s forwards}
.business.pg-active .txtbox .box .one.o1{ animation:business05 5s forwards}
.business.pg-active .txtbox .box .one.o2{ animation:business06 5s forwards}
.business.pg-active .txtbox .box .one.o3{ animation:business07 5s forwards}
.business.pg-active .txtbox .box .one.o4{ animation:business08 5s forwards}
.business.pg-active .txtbox .box .one.o5{ animation:business09 5s forwards}
@keyframes business01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes business02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes business03 {
     0%{ top:220px; opacity: 0;}
     20%{ top:220px; opacity: 0;}
     30%{ top:205px; opacity: 1;}
     100%{ top:205px; opacity: 1;}
}
@keyframes business04 {
     0%{ top:265px; left: calc(50% - 5px); width:10px; height: 10px; opacity: 0;}
     35%{ top:265px; left: calc(50% - 5px); width:10px; height: 10px; opacity: 0;}
     45%{ top:60px; left: calc(50% - 210px); width:400px; height: 400px; opacity: 0.2;}
     100%{ top:60px; left: calc(50% - 210px); width:400px; height: 400px; opacity: 0.2;}
}
@keyframes business05 {
     0%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     44%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     50%{ top:50px; left: calc(50% - 180px); opacity: 1;}
     100%{ top:50px; left: calc(50% - 180px); opacity: 1;}
}
@keyframes business06 {
     0%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     48%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     54%{ top:50px; left: calc(50% + 80px); opacity: 1;}
     100%{ top:50px; left: calc(50% + 80px); opacity: 1;}
}
@keyframes business07 {
     0%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     52%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     58%{ top:260px; left: calc(50% + 130px); opacity: 1;}
     100%{ top:260px; left: calc(50% + 130px); opacity: 1;}
}
@keyframes business08 {
     0%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     56%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     62%{ top:410px; left: calc(50% - 50px); opacity: 1;}
     100%{ top:410px; left: calc(50% - 50px); opacity: 1;}
}
@keyframes business09 {
     0%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     60%{ top:215px; left: calc(50% - 55px); opacity: 0;}
     66%{ top:270px; left: calc(50% - 250px); opacity: 1;}
     100%{ top:270px; left: calc(50% - 250px); opacity: 1;}
}


.history .txtbox{ text-align: center; color: #0a1e3c; padding: 160px 0 0 0;}
.history .txtbox .title{ position: relative; height: 110px;}
.history .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.history .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.history .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: -1px; opacity: 0;}
.history .list{ margin: 0 0 0 300px; text-align: left;}
.history .list ul{ position: relative; padding: 20px 30px 0 20px; margin: 0 0 10px 0;}
.history .list ul .line{ position:absolute; top:32px; left: 0px; width:calc(100% - 0px); height: 5px; background-color: #c4161c;}
.history .list ul .year{ position: relative; display: inline-table; font-size: 16px; height: 30px; line-height: 30px; border-radius: 30px; background-color: #c4161c; color: #fff; padding: 0 20px 0 20px; margin-bottom: 15px; z-index: 100;}
.history .list ul li{ position: relative; padding: 15px 0 0 20px; color: #444;}
.history .list ul li div{ position: absolute; top:24px; left: 0px; width:10px; height: 2px; background-color: #ccc;}
.history .arwbox{ position: relative; margin-top: 50px; margin-bottom: 110px;}
.history .btn_prev{ position:absolute; top:0px; left: calc(50% - 50px); width:40px; height: 40px; border-radius: 40px; background-color: #fff; border: solid 1px #d1d1d1; cursor:pointer;}
.history .btn_next{ position:absolute; top:0px; left: calc(50% + 10px); width:40px; height: 40px; border-radius: 40px; background-color: #fff; border: solid 1px #d1d1d1; cursor:pointer;}
.history .btn_prev:after { content: ''; display:inline-block; width: 10px; height: 10px; margin-left: 8px; margin-top: 14px; border-top: 0.1rem solid #777; border-right: 0.1rem solid #777; transform: rotate(-135deg);}
.history .btn_prev:hover{ border: solid 1px #c4161c;}
.history .btn_next:hover{ border: solid 1px #c4161c;}
.history .btn_next:after { content: ''; display:inline-block; width: 10px; height: 10px; margin-left: -2px; margin-top: 14px; border-top: 0.1rem solid #777; border-right: 0.1rem solid #777; transform: rotate(45deg);}
.history .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_history.jpg') no-repeat top center; z-index: 100;}
.history.pg-active .txtbox .title ul:nth-child(1){ animation:business01 1s forwards;}
.history.pg-active .txtbox .title ul:nth-child(2){ animation:business02 2s forwards;}
@keyframes business01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes business02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}


.certificate .txtbox{ text-align: center; color: #0a1e3c; padding: 160px 0 0 0;}
.certificate .txtbox .title{ position: relative; height: 110px;}
.certificate .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.certificate .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.certificate .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: -1px; opacity: 0;}
.certificate .txt{ padding: 30px 0 30px 0; font-size: 17px; letter-spacing: -1px;}
.certificate .img{ position: absolute; top:380px; left: 0px; width:100%; opacity: 0;}
.certificate .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_certificate.jpg') no-repeat top center; z-index: 100;}
.certificate.pg-active .txtbox .title ul:nth-child(1){ animation:certificate01 1s forwards;}
.certificate.pg-active .txtbox .title ul:nth-child(2){ animation:certificate02 2s forwards;}
.certificate.pg-active .img { animation:certificate03 2.5s forwards;}
@keyframes certificate01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes certificate02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes certificate03 {
     0%{ left: 300px; opacity: 0;}
     40%{ left: 300px; opacity: 0;}
     100%{ left: 0px; opacity: 1;}
}

.patent .txtbox{ text-align: center; color: #0a1e3c; padding: 140px 0 0 0;}
.patent .txtbox .title{ position: relative; height: 110px;}
.patent .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.patent .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.patent .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: -1px; opacity: 0;}
.patent .txt{ padding: 30px 0 30px 0; font-size: 17px; letter-spacing: -1px;}
.patent .img_patent{ position:absolute; top:360px; left: calc(50% - 570px); opacity: 0;}
.patent .img_patent01{ position:absolute; top:360px; left: calc(50% + 150px); cursor:pointer; opacity: 0;}
.patent .img_patent02{ position:absolute; top:360px; left: calc(50% + 330px); cursor:pointer; opacity: 0;}
.patent .img_patent03{ position:absolute; top:590px; left: calc(50% + 150px); cursor:pointer; opacity: 0;}
.patent .img_patent04{ position:absolute; top:590px; left: calc(50% + 330px); cursor:pointer; opacity: 0;}
.patent .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_patent.jpg') no-repeat top center; z-index: 100;}
.patent.pg-active .txtbox .title ul:nth-child(1){ animation:patent01 1s forwards;}
.patent.pg-active .txtbox .title ul:nth-child(2){ animation:patent02 2s forwards;}
.patent.pg-active .img_patent{ animation:patent03 2.5s forwards;}
.patent.pg-active .img_patent01{ animation:patent04 2.5s forwards;}
.patent.pg-active .img_patent02{ animation:patent05 2.5s forwards;}
.patent.pg-active .img_patent03{ animation:patent06 2.5s forwards;}
.patent.pg-active .img_patent04{ animation:patent07 2.5s forwards;}
@keyframes patent01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes patent02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes patent03 {
     0%{ left: calc(50% - 670px); opacity: 0;}
     40%{ left: calc(50% - 670px); opacity: 0;}
     100%{ left: calc(50% - 570px); opacity: 1;}
}
@keyframes patent04 {
     0%{ left: calc(50% + 250px); opacity: 0;}
     40%{ left: calc(50% + 250px); opacity: 0;}
     60%{ left: calc(50% + 150px); opacity: 1;}
     100%{ left: calc(50% + 150px); opacity: 1;}
}
@keyframes patent05 {
     0%{ left: calc(50% + 430px); opacity: 0;}
     50%{ left: calc(50% + 430px); opacity: 0;}
     70%{ left: calc(50% + 330px); opacity: 1;}
     100%{ left: calc(50% + 330px); opacity: 1;}
}
@keyframes patent06 {
     0%{ left: calc(50% + 250px); opacity: 0;}
     60%{ left: calc(50% + 250px); opacity: 0;}
     80%{ left: calc(50% + 150px); opacity: 1;}
     100%{ left: calc(50% + 150px); opacity: 1;}
}
@keyframes patent07 {
     0%{ left: calc(50% + 430px); opacity: 0;}
     70%{ left: calc(50% + 430px); opacity: 0;}
     90%{ left: calc(50% + 330px); opacity: 1;}
     100%{ left: calc(50% + 330px); opacity: 1;}
}


.work .txtbox{ position: absolute; top:calc(50% - 160px); left: 0px; width:100%; text-align: center; color: #fff; }
.work .txtbox .title{ position: relative; height: 110px;}
.work .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.work .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.work .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #fff; letter-spacing: -1px; opacity: 0;}
.work .txt{ padding: 50px 0 30px 0; font-size: 20px; letter-spacing: -1px; font-family: 'S-CoreDream-1Thin';}
.work .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.work .line{ position: absolute; top:190px; left: calc(50% - 235px); width:470px; height: 3px; background-color: #c4161c;}
.work .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_work.jpg') no-repeat top center; z-index: 100;}
.work.pg-active .txtbox .title ul:nth-child(1){ animation:work01 1s forwards;}
.work.pg-active .txtbox .title ul:nth-child(2){ animation:work02 2s forwards;}
.work.pg-active .line{ animation:work03 3s forwards;}
@keyframes work01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes work02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes work03 {
     0%{ width: 0px;}
     100%{ width: 470px;}
}

.adtech .txtbox{ text-align: center; padding: 190px 0 0 0; color: #0a1e3c; }
.adtech .txtbox .title{ position: relative; height: 110px;}
.adtech .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.adtech .txtbox .title ul:nth-child(1) span{  font-family: 'S-CoreDream-7ExtraBold';  color: #c4161c;}
.adtech .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: -1px; opacity: 0;}
.adtech .txt1{ padding: 30px 0 0 0; font-size: 18px; letter-spacing: -1px;}
.adtech .txt1 span{ font-family: 'S-CoreDream-7ExtraBold'; color: #c4161c;}
.adtech .img{ position: absolute; bottom: 0px; left: calc(50% - 149px); width:298px; z-index: 250; opacity: 0;}
.adtech .img .btn{ position:absolute; top:260px; left: 30px; width:calc(100% - 60px); height: 50px; line-height: 50px; border-radius: 5px; font-size: 15px; text-align: center; background-color: #c4161c; color: #fff; cursor:pointer;}
.adtech .line{ position: absolute; bottom: 250px; left:0px; width:100%; z-index: 200; opacity: 0;}
.adtech .line .mv{ position:absolute; bottom:0px; left: 0px; width:100%}
.adtech .line img{ width:100%;}
.adtech .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_adtech.jpg') no-repeat top center; z-index: 100;}
.adtech.pg-active .txtbox .title ul:nth-child(1){ animation:adtech01 1s forwards;}
.adtech.pg-active .txtbox .title ul:nth-child(2){ animation:adtech02 2s forwards;}
.adtech.pg-active .img{ animation:adtech03 1.5s forwards;}
.adtech.pg-active .line{ animation:adtech04 2s forwards;}
.adtech.pg-active .line .mv{ animation:adtech05 3s infinite ease-in-out;}
.adtech.pg-active .img .btn{ animation:adtech06 1s infinite ease-in-out;}
@keyframes adtech01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes adtech02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes adtech03 {
     0%{ left: calc(50% - 349px); opacity: 0;}
     50%{ left: calc(50% - 349px); opacity: 0;}
     100%{ left: calc(50% - 149px); opacity: 1;}
}
@keyframes adtech04 {
     0%{ bottom: 350px; opacity: 0;}
     50%{ bottom: 350px; opacity: 0;}
     100%{ bottom: 250px; opacity: 1;}
}
@keyframes adtech05 {
     0%{ bottom: 0px;}
     50%{ bottom: -50px;}
     100%{ bottom: 0px;}
}
@keyframes adtech06 {
     0%{ opacity: 0.8;}
     50%{ opacity: 1;}
     100%{ opacity: 0.8;}
}

.marketing .txtbox{ position: relative; width:1200px; margin: 0 auto; text-align: left; padding: 140px 0 0 0; color: #0a1e3c; }
.marketing .txtbox .title{ position: relative; height: 80px;}
.marketing .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 50px; line-height: 50px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.marketing .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.marketing .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 26px; line-height: 26px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: 0px; opacity: 0;}
.marketing .txtbox .title ul:nth-child(2) span{ font-family: 'S-CoreDream-5Medium'; color: #c4161c;}
.marketing .txt{ padding: 20px 0 30px 0; font-size: 15px; line-height: 18px; letter-spacing: -1px;}
.marketing .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.marketing .imgbox{ position: absolute; top:290px; left: calc(50% - 600px); width:1200px; text-align: center; opacity: 0;}
.marketing .btn_next{ position: absolute; top:calc(50% + 50px); left: calc(50% + 650px); width:60px; height: 60px; background: url('/_resource/images/btn_next.png') no-repeat; cursor: pointer;}
.marketing .btn_prev{ position: absolute; top:calc(50% + 50px); left: calc(50% - 750px); width:60px; height: 60px; background: url('/_resource/images/btn_prev.png') no-repeat; cursor: pointer;}

.marketing .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_marketing.jpg') no-repeat top center; z-index: 100;}
.marketing.pg-active .txtbox .title ul:nth-child(1){ animation:marketing01 1s forwards;}
.marketing.pg-active .txtbox .title ul:nth-child(2){ animation:marketing02 2s forwards;}
.marketing.pg-active .imgbox{animation:marketing03 2s forwards;}
@keyframes marketing01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes marketing02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes marketing03 {
     0%{ top: 357px; opacity: 0;}
     50%{ top: 357px; opacity: 0;}
     100%{ top: 290px; opacity: 1;}
}


.imc .txtbox{ position: absolute; top:calc(50% - 160px); left: 0px; width:100%; text-align: center; color: #fff; }
.imc .txtbox .title{ position: relative; height: 110px;}
.imc .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.imc .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.imc .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #fff; letter-spacing: -1px; opacity: 0;}
.imc .txt{ padding: 50px 0 30px 0; font-size: 20px; letter-spacing: -1px; font-family: 'S-CoreDream-1Thin';}
.imc .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.imc .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_imc.jpg') no-repeat top center; z-index: 100;}
.imc.pg-active .txtbox .title ul:nth-child(1){ animation:imc01 1s forwards;}
.imc.pg-active .txtbox .title ul:nth-child(2){ animation:imc02 2s forwards;}
@keyframes imc01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes imc02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}


.cpa .txtbox{ position: absolute; top:calc(50% - 160px); left: 0px; width:100%; text-align: center; color: #fff; }
.cpa .txtbox .title{ position: relative; height: 110px;}
.cpa .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 70px; line-height: 70px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.cpa .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.cpa .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 40px; line-height: 40px; font-family: 'S-CoreDream-1Thin'; color: #fff; letter-spacing: -1px; opacity: 0;}
.cpa .txt{ padding: 50px 0 30px 0; font-size: 20px; letter-spacing: -1px; font-family: 'S-CoreDream-1Thin';}
.cpa .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.cpa .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_cpa.jpg') no-repeat top center; z-index: 100;}
.cpa.pg-active .txtbox .title ul:nth-child(1){ animation:cpa01 1s forwards;}
.cpa.pg-active .txtbox .title ul:nth-child(2){ animation:cpa02 2s forwards;}
@keyframes cpa01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes cpa02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}

.partner .txtbox{ position: relative; width:1200px; margin: 0 auto; text-align: left; padding: 140px 0 0 0; color: #0a1e3c; }
.partner .txtbox .title{ position: relative; height: 80px;}
.partner .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 50px; line-height: 50px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.partner .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.partner .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 26px; line-height: 26px; font-family: 'S-CoreDream-1Thin'; color: #c4161c; letter-spacing: 0px; opacity: 0;}
.partner .txtbox .title ul:nth-child(2) span{ font-family: 'S-CoreDream-5Medium'; color: #c4161c;}
.partner .txt{ padding: 20px 0 30px 0; font-size: 15px; line-height: 18px; letter-spacing: -1px; border-bottom:solid 1px #0a1e3c;}
.partner .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.partner .arwbox{ position:absolute; bottom:60px; right: 0px;}
.partner .btn_prev{ position:absolute; top:0px; right:50px; width:40px; height: 40px; border-radius: 40px; background-color: #fff; border: solid 1px #d1d1d1; cursor:pointer;}
.partner .btn_next{ position:absolute; top:0px; right:0px; width:40px; height: 40px; border-radius: 40px; background-color: #fff; border: solid 1px #d1d1d1; cursor:pointer;}
.partner .btn_prev:after { content: ''; display:inline-block; width: 10px; height: 10px; margin-left: 16px; margin-top: 14px; border-top: 0.1rem solid #777; border-right: 0.1rem solid #777; transform: rotate(-135deg);}
.partner .btn_prev:hover{ border: solid 1px #c4161c;}
.partner .btn_next:hover{ border: solid 1px #c4161c;}
.partner .btn_next:after { content: ''; display:inline-block; width: 10px; height: 10px; margin-left: 12px; margin-top: 14px; border-top: 0.1rem solid #777; border-right: 0.1rem solid #777; transform: rotate(45deg);}
.partner .list{ position:absolute; top:307px; left: calc(50% - 600px); width:1200px; opacity: 0;}
.partner .list ul li{ float: left;}
.partner .list ul li img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
.partner .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_partner.jpg') no-repeat top center; z-index: 100;}
.partner.pg-active .txtbox .title ul:nth-child(1){ animation:partner01 1s forwards;}
.partner.pg-active .txtbox .title ul:nth-child(2){ animation:partner02 2s forwards;}
.partner.pg-active  .list{animation:partner03 2s forwards;}
@keyframes partner01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes partner02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes partner03 {
     0%{ top: 357px; opacity: 0;}
     50%{ top: 357px; opacity: 0;}
     100%{ top: 307px; opacity: 1;}
}


.contact .txtbox{ position: relative; width:1200px; margin: 0 auto; text-align: left; padding: 140px 0 0 0; color: #fff; }
.contact .txtbox .title{ position: relative; height: 80px;}
.contact .txtbox .title ul:nth-child(1){ position:absolute; top:0px; left: 0px; width:100%; font-size: 50px; line-height: 50px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: 0px; opacity: 0;}
.contact .txtbox .title ul:nth-child(1) span{ font-family: 'S-CoreDream-1Thin';}
.contact .txtbox .title ul:nth-child(2){ position:absolute; bottom:0px; left: 0px; width:100%; font-size: 26px; line-height: 26px; font-family: 'S-CoreDream-1Thin'; color: #fff; letter-spacing: 0px; opacity: 0;}
.contact .txtbox .title ul:nth-child(2) span{ font-family: 'S-CoreDream-5Medium'; color: #fff;}
.contact .txt{ padding: 20px 0 20px 0; font-size: 15px; line-height: 18px; letter-spacing: -1px; border-bottom:solid 1px rgba(255,255,255,0.2);}
.contact .txt span{ font-family: 'S-CoreDream-7ExtraBold';}
.contact .box_left{ position:absolute; top:300px; left: calc(50% - 600px); width:600px; opacity: 0;}
.contact .box_left .info{ font-family: 'S-CoreDream-1Thin'; padding-bottom: 10px; border-bottom: dashed 1px rgba(255,255,255,0.2);}
.contact .box_left .info span{ margin-right: 10px; letter-spacing: 1px;}
.contact .box_left .form_txt{ padding: 20px 0 20px 0; font-family: 'S-CoreDream-3Light'; font-size: 16px;}
.contact .box_left .form input{ float: left; width:280px; height: 44px; line-height: 44px; font-size: 15px; color: #fff; text-indent: 15px; background-color: transparent; border: solid 1px rgba(255,255,255,1); margin: 0 15px 15px 0; outline: none;}
.contact .box_left .form textarea{ float: left; width:547px; height: 120px; padding: 15px; font-size: 15px; color: #fff; background-color: transparent; border: solid 1px rgba(255,255,255,1); margin: 0 0 0 0; outline: none;}
.contact .box_left .agree{ padding:20px 0 0 0;}
.contact .box_left .agree .ck{ position: relative; display: inline-table;}
.contact .box_left .agree .ck input[type=checkbox]{ width:18px; height:18px; vertical-align:middle; margin:0 5px 2px 0;}
.contact .box_left .agree .agreemore{ position: relative; display: inline-table; margin-left: 10px; cursor:pointer; font-family: 'S-CoreDream-3Light';}
.contact .box_left .btn{ text-align:center; padding:20px 0 0 0;}
.contact .box_left .btn ul{ display:inline-table; text-align:center;}
.contact .box_left .btn ul.confirm{ width:180px; height:50px; line-height:50px; background-color:#c4161c; color:#fff; font-size:18px; letter-spacing:-1px; cursor:pointer;}
.contact .box_right{ position:absolute; top:300px; left: calc(50% + 50px); width:550px; opacity: 0;}
.contact .box_right .map_img{ width:550px; height: 250px; margin-bottom: 25px;}
.contact .box_right .map_google{ width:550px; height: 250px;}
.contact .box_right .map_google iframe{ width:100%; height: 100%;}
.contact .agree_layer{ position:absolute; top:calc(50% - 240px); left: calc(50% - 290px); width:500px; height: 480px; padding: 30px 40px 40px 40px; border-radius: 10px; background-color: #fff; z-index: 500; color: #777; box-shadow:1px 1px 5px rgba(0, 0, 0, .5); display: none;}
.contact .agree_layer .close{ position: absolute; top:-10px; right: 15px; cursor: pointer;}
.contact .agree_layer .close:after {display: inline-block; content: "\00d7"; font-size:50px; color: rgba(20,35,54,1);}
.contact .agree_layer .ag_top{ font-size: 18px; font-family: 'S-CoreDream-7ExtraBold'; letter-spacing: -1px; color: #0a1e3c; padding-bottom: 20px;}
.contact .bg{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background: url('/_resource/images/bg_contact.jpg') no-repeat top center; z-index: 100;}
.contact.pg-active .txtbox .title ul:nth-child(1){ animation:contact01 1s forwards;}
.contact.pg-active .txtbox .title ul:nth-child(2){ animation:contact02 2s forwards;}
.contact.pg-active .box_left{ animation:contact03 2s forwards;}
.contact.pg-active .box_right{ animation:contact04 2s forwards;}
@keyframes contact01 {
     0%{ top: -50px; opacity: 0;}
     100%{ top: 0px; opacity: 1;}
}
@keyframes contact02 {
     0%{ bottom: -40px; opacity: 0;}
     100%{ bottom: 0px; opacity: 1;}
}
@keyframes contact03 {
     0%{ left: calc(50% - 800px); opacity: 0;}
     50%{ left: calc(50% - 800px); opacity: 0;}
     100%{ left: calc(50% - 600px); opacity: 1;}
}
@keyframes contact04 {
     0%{ left: calc(50% + 250px); opacity: 0;}
     50%{ left: calc(50% + 250px); opacity: 0;}
     100%{ left: calc(50% + 50px); opacity: 1;}
}

/*페이지로딩*/
.ys_pageloading_wrap .bg{ position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:0.8; z-index:10000;}
.ys_pageloading_wrap .box{ position:fixed; left:calc(50% - 140px); top:calc(50% - 25px); width:280px; height:50px; background-color:#fff; border:solid 1px #e1e1e1; border-radius:50px; box-shadow:1px 1px 2px rgba(0, 0, 0, .1);  z-index:10001;}
.ys_pageloader { position:absolute; top:10px; left:25px; width: 20px; height: 20px; border: 4px solid rgba(248, 137, 141, 0.25); border-top-color:#c61d23; border-radius: 50%; position: relative; animation: loader-rotate 0.5s linear infinite;}
.ys_pageloading_wrap .txt{ position:absolute; top:20px; left:65px; font-size:12px; line-height:12px; color:#000; animation:loadertxt_resource 1s infinite;}
@keyframes loader-rotate {0% {transform: rotate(0); }100% {transform: rotate(360deg);}}
@keyframes loadertxt_resource {0%{ opacity:1;} 50%{ opacity:0.5;} 100%{ opacity:1;}}