@charset "utf-8";

/*************************
		MAIN
*************************/
#mainContainer {padding-top:134px}

/*main_visual*/
.main_visual {position:relative; max-width:1730px; margin:0 auto;}
.main_visual .bgWrap {position:absolute; width:100%; height:100%}
.main_visual .bgWrap span {position:absolute; width:100%; height:100%}
.main_visual .bgWrap .active {z-index:2}
.main_visual .bgWrap .prev {z-index:1}
.main_visual .bgWrap .bg1 {background:url('/img/main_visual04.jpg') no-repeat center; background-size:cover}
.main_visual .bgWrap .bg2 {background:url('/img/main_visual03.jpg') no-repeat center; background-size:cover}
.main_visual .bgWrap .bg3 {background:url('/img/main_visual02.jpg') no-repeat center; background-size:cover}
.main_visual .bgWrap .bg4 {background:url('/img/main_visual01.jpg') no-repeat center; background-size:cover}
.main_visual_inner {z-index:2; position:relative; padding:140px 0 80px; overflow:hidden}
.main_visual_inner .txtWrap {position:relative}
.main_visual_inner .txtWrap li {position:absolute; top:0; left:0; opacity:1}
.main_visual_inner .txtWrap li > * {position:relative; top:30px; opacity:0}
.main_visual_inner .txtWrap li h1 {font-size:45px; color:#fff}
.main_visual_inner .txtWrap li h2 {line-height:1.3; font-size:23px; color:#fff}
.main_visual_inner .txtWrap li .btn_wrap {margin-top:27px}
.main_visual_inner .txtWrap li .btn_wrap a {display:inline-block; width:212px; height:53px; line-height:53px; border:1px solid #fff; border-radius:25px; text-align:center; background:rgba(255,255,255,.1); -webkit-transition:.3s; transition:.3s}
.main_visual_inner .txtWrap li .btn_wrap a + a {margin-left:10px}
.main_visual_inner .txtWrap li .btn_wrap a em {display:inline-block; font-size:20px; color:#fff; -webkit-transition:.3s; transition:.3s}
.main_visual_inner .txtWrap li .btn_wrap a span {position:relative; display:inline-block; width:15px; height:15px; margin-left:17px}
.main_visual_inner .txtWrap li .btn_wrap a span:after {position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; background:#fff; content:''}
.main_visual_inner .txtWrap li .btn_wrap a span:before {position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; background:#fff; content:'';  transform:rotate(90deg)}
.main_visual_inner .txtWrap li .btn_wrap a:hover {background:#fff}
.main_visual_inner .txtWrap li .btn_wrap a:hover em {color:#262626}
.main_visual_inner .txtWrap li .btn_wrap a:hover span:after {background:#000}
.main_visual_inner .txtWrap li .btn_wrap a:hover span:before {background:#000}
.main_visual_inner .txtWrap li.active {z-index:1; position:relative; opacity:1}
/*.main_visual_inner .txtWrap li.active > * {top:0; opacity:1; transition:.3s}
.main_visual_inner .txtWrap li.active h1 {transition-delay:.2s}
.main_visual_inner .txtWrap li.active h2 {transition-delay:.5s}
.main_visual_inner .txtWrap li.active .btn_wrap {transition-delay:.7s}
.main_visual_inner .txtWrap li.prev {opacity:1}
.main_visual_inner .txtWrap li.prev > * {top:-50px; opacity:0; transition:.3s}*/
.main_visual_inner .pagination {position:absolute; right:0}
.main_visual_inner .pagination > span {position:relative; display:inline-block; width:10px; height:10px; margin:0 15px; border-radius:50%; background:#fff}
.main_visual_inner .pagination > span:after {position:absolute; box-sizing:border-box; top:50%; left:50%; width:0px; height:0px; margin:0; border:1px solid #fff; border-radius:50%; content:''; -webkit-transition:.3s; transition:.3s}
.main_visual_inner .pagination > span.active:after {width:30px; height:30px; margin:-15px 0 0 -15px}
.ins_prd_list {margin:38px -9px -9px; overflow:hidden}
.ins_prd_list li {position:relative; float:left; box-sizing:border-box; width:440px; height:168px; padding:50px 30px 0; margin:9px; border-radius:10px}
.ins_prd_list li .over_link {position:absolute; top:0; left:0; width:100%; height:100%}
.ins_prd_list li .icon_more {position:absolute; width:18px; height:18px; top:25px; right:25px}
.ins_prd_list li .icon_more:after {position:Absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; background:#fff; content:''}
.ins_prd_list li .icon_more:before {position:Absolute; left:50%; top:0%; width:2px; height:100%; margin-left:-1px; background:#fff; content:''}
.ins_prd_list li .border {position:absolute; top:0; left:0; right:0; bottom:0; border:0px solid #fff; border-radius:10px; -webkit-transition:.3s; transition:.3s}
.ins_prd_list li .txt {position:relative}
.ins_prd_list li .txt > span {position:absolute; display:inline-block; left:0; bottom:40px}
.ins_prd_list li .txt > span img {transition:.3s}
.ins_prd_list li .txt > span .on {position:absolute; bottom:0; left:0; opacity:0}
.ins_prd_list li .txt > h1 {position:relative; padding-left:50px; font-size:13px; color:#fff}
.ins_prd_list li .txt > h2 {font-size:25px; color:#fff}
.ins_prd_list li .txt > h2 > var {font-size:.72em}
.ins_prd_list li .btn_wrap {margin-top:10px; text-align:right}
.ins_prd_list li .btn_wrap a {position:relative; display:inline-block; width:34px; height:33px; line-height:33px; border:1px solid #fff; border-radius:15px; ; overflow:hidden; white-space:nowrap; color:#ffffff; text-align:center; -webkit-transition:.3s; transition:.3s}
.ins_prd_list li .btn_wrap a + a {margin-left:4px}
.ins_prd_list li .btn_wrap a > * {display:inline-block; font-size:15px}
.ins_prd_list li .btn_wrap a > span {opacity:0; transition:.1s .3s}
.ins_prd_list li .btn_wrap a > var {padding-left:3px; transition:.3s}
.ins_prd_list li .btn_wrap a.on {width:105px; background:#fff}
.ins_prd_list li .btn_wrap a.on > span {opacity:1; transition:0s 0s}
.ins_prd_list li .btn_wrap a.on > var {padding-left:0}
.ins_prd_list li:hover .icon_more {transform:rotate(180deg); -webkit-transition:.3s; transition:.3s}
.ins_prd_list li:hover .border {border-width:5px}
.ins_prd_list li:hover .txt > span .off {opacity:0}
.ins_prd_list li:hover .txt > span .on {opacity:1}
.ins_prd_list li.active {box-shadow:5px 5px 10px rgba(0,0,0,.3)}
.ins_prd_list li.active .icon_more {transform:rotate(180deg); -webkit-transition:.3s; transition:.3s}
.ins_prd_list li.active .border {border-width:5px}
.ins_prd_list li.active .txt > span .off {opacity:0}
.ins_prd_list li.active .txt > span .on {opacity:1}
.ins_prd_list .prd1 {background:#2172cd}
.ins_prd_list .prd2 {background:#c9463b}
.ins_prd_list .prd3 {background:#2fa19a; clear:left}
.ins_prd_list .prd4 {background:#f0a143}
.ins_prd_list li.prd1 .btn_wrap a.on > * {color:#2172cd}
.ins_prd_list li.prd2 .btn_wrap a.on > * {color:#c9463b}
.ins_prd_list li.prd3 .btn_wrap a.on > * {color:#2fa19a}
.ins_prd_list li.prd4 .btn_wrap a.on > * {color:#f0a143}

/*main_info*/
.main_info {padding-top:60px}
.main_info:after {clear:both; display:block; content:''}
.main_info .desc {float:left; width:0%}
.main_info .desc p {position:relative; padding-left:197px}
.main_info .desc p + p {margin-top:37px}
.main_info .desc p > b {position:absolute; left:0; top:-3px; line-height:1; font-size:28px; color:#2172cd}
.main_info .desc p + p > b {color:#c9463b}
.main_info .desc p > span {display:block; line-height:1.3; font-size:18px; color:#3a3a3a}
.main_info .tab {/*float:right; */width:50%; margin: 0 auto;}
.main_info .tab a {display:inline-block; margin-left:65px; text-align:center}
.main_info .tab a > span {display:block; margin-top:15px; font-size:20px; color:#454545; -webkit-transition:.3s; transition:.3s;}
.main_info .tab .icon {position:relative; display:inline-block}
.main_info .tab .icon img {-webkit-transition:.3s; transition:.3s;}
.main_info .tab .icon .on {position:absolute; top:0; left:0; opacity:0}
.main_info .tab a:hover .icon .on {opacity:1}
.main_info .tab a:hover .icon .off {opacity:0}
.main_info .tab a:hover > span {color:#c9463b}

/*main_join_process*/
.main_join_process {position:relative; text-align:center; background:url('/img/main_join_process_bg.jpg') bottom; background-size:auto 100%}
.main_join_process .inner {padding:110px 0 80px; }
.main_join_process .main_tit {font-size:28px; color:#323232}
.main_join_process .process_step {display:inline-block; margin-top:50px}
.main_join_process .process_step li {position:relative; float:left; width:168px; height:168px; border:1px solid #848485; text-align:center; border-radius:50%; background:#fff}
.main_join_process .process_step li:after {position:absolute; top:0; left:100%; width:35px; height:100%; background:url('/img/arr_next.png') no-repeat center; content:''}
.main_join_process .process_step li + li {margin-left:35px}
.main_join_process .process_step li.step6:after {display:none}
.main_join_process .process_step li .step_inner h2 {line-height:1.2; font-size:15px; color:#3a3a3a; font-weight:500}
.main_join_process .process_step li .step_inner h3 {display:none}
.main_join_process .process_step li .step_inner img {margin-top:13px}
.main_join_process .arr_down {height:56px; background:url('/img/main_join_process_bot_shadow.jpg'); background-size:auto 100%}
.main_join_process .arr_down > span {display:block; width:300px; margin:0 auto; height:100%; background:url('/img/main_join_process_bot.jpg') no-repeat top}
.main_join_process .arr_down > span img {position:relative; *animation:arr_motion 1.3s cubic-bezier(.38,.64,.95,.65) infinite}
@keyframes arr_motion{
	0% {top:-10px}
	50% {top:5px}
	100% {top:-10px}
}

/*main_btn*/
.main_btn {position:relative; height:114px; text-align:center}
.main_btn a {position:absolute; top:-40px; width:67px; height:67px; border-radius:50%; box-shadow:5px 5px 5px #e1e1e1; background:#387199; opacity:0}
.main_btn a.btn1 {left:50%; margin-top:-17px; margin-left:-123.5px;}
.main_btn a.btn2 {left:50%; margin-top:17px; margin-left:-33.5px;}
.main_btn a.btn3 {left:50%; margin-top:-17px; margin-left:56.5px;}
.main_btn a span {display:block; line-height:1.3; font-size:15px; color:#fff}
.main_btn.active > a {top:0; opacity:1; transition:.3s cubic-bezier(.53,.48,.42,1.47)}
.main_btn.active > a.btn1 {transition-delay:.3s}
.main_btn.active > a.btn2 {transition-delay:.2s}
.main_btn.active > a.btn3 {transition-delay:.4s}

/*main_customer*/
.main_customer {padding:0 0 38px; overflow:hidden}
.main_customer .main_tit_wrap {position:relative; padding:15px 0}
.main_customer .main_tit_wrap .more {position:absolute; right:0; top:50%; width:20px; height:20px; margin-top:-10px}
.main_customer .main_tit_wrap .more:after {position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; background:#505050; content:''}
.main_customer .main_tit_wrap .more:before {position:absolute; top:0; left:50%; height:100%; width:2px; margin-left:-1px; background:#505050; content:''}
.main_customer .main_tit {font-size:25px; color:#323232}
.main_customer .customer_inner {position:relative; top:-50px; box-sizing:border-box; width:50%; opacity:0}
	.main_notice_wrap {float:left; padding-right:25px}
	.main_notice_wrap .notice_list {border-top:1px solid #343434}
	.main_notice_wrap .notice_list li {border-bottom:1px dashed #bdbdbd}
	.main_notice_wrap .notice_list li > a {display:block; position:relative; height:64px; line-height:64px; padding-right:105px}
	.main_notice_wrap .notice_list li > a > span {display:block; font-size:18px; color:#3a3a3a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
	.main_notice_wrap .notice_list li > a > var {position:absolute; right:10px; top:50%; line-height:20px; margin-top:-10px; font-size:18px; color:#3a3a3a}
	.main_cscenter_wrap {position:relative; float:right; padding-left:43px}
	.main_cscenter_wrap .main_tit {color:#c9463b}
	.main_cscenter_wrap .contact_list {}
	.main_cscenter_wrap .contact_list:after {clear:both; display:block; content:''}
	.main_cscenter_wrap .contact_list dl {float:left; margin-top:20px; }
	.main_cscenter_wrap .contact_list dl.ct1 {width:45%}
	.main_cscenter_wrap .contact_list dl.ct2 {width:55%}
	.main_cscenter_wrap .contact_list dl.ct3 {width:45%}
	.main_cscenter_wrap .contact_list dl.ct4 {width:55%}
	.main_cscenter_wrap .contact_list dl dt {position:relative; display:inline-block; box-sizing:border-box; width:110px; height:110px; vertical-align:middle; border-radius:10px}
	.main_cscenter_wrap .contact_list dl.ct1 dt {background:#f0a143;}
	.main_cscenter_wrap .contact_list dl.ct2 dt {background:#3591dd;}
	.main_cscenter_wrap .contact_list dl.ct3 dt {background:#c9463b;}
	.main_cscenter_wrap .contact_list dl.ct4 dt {background:#2fa19a;}
	.main_cscenter_wrap .contact_list dl dt img {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto}
	.main_cscenter_wrap .contact_list dl dd {display:inline-block; vertical-align:middle; padding-left:15px}
	.main_cscenter_wrap .contact_list dl dd p {line-height:1; font-size:20px;}
	.main_cscenter_wrap .contact_list dl.ct1 dd p {color:#f0a143;}
	.main_cscenter_wrap .contact_list dl.ct2 dd p {color:#3591dd;}
	.main_cscenter_wrap .contact_list dl.ct3 dd p {color:#c9463b;}
	.main_cscenter_wrap .contact_list dl.ct4 dd p {color:#2fa19a;}
	.main_cscenter_wrap .contact_list dl dd a {line-height:1.3; font-size:20px; color:#363636}
	.active.main_customer .customer_inner {top:0; opacity:1; transition:.3s}
	.active.main_customer .main_notice_wrap {transition-delay:.6s}
	.active.main_customer .main_cscenter_wrap {transition-delay:.9s}

@media screen and (max-width:1365px){
	/*main_info*/
	.main_info .desc {width:0%; margin-top:0px}
	.main_info .tab {width:00%; margin: 0 auto;}
	.main_info .tab a {float:left; width:50%; margin-left:0}
	.main_info .tab a.tab2 ~ a {margin-top:20px} 

	/*main_join_process*/
	.main_join_process .process_step .step4 {clear:left; margin-left:0}
	.main_join_process .process_step .step3:after {display:none}
	.main_join_process .process_step .step3 ~ li {margin-top:20px}
	
	/*main_customer*/
	.main_cscenter_wrap .contact_list dl dt {width:90px; height:90px; border:0}
}

@media screen and (max-width:1200px){
	/*main_visual*/
	.main_visual_inner .pagination {display:none}

	/*main_customer*/
	.main_notice_wrap {padding-right:15px}
	.main_cscenter_wrap {padding-left:35px}
	.main_cscenter_wrap .contact_list dl {margin-top:30px; width:50% !important}
	.main_cscenter_wrap .contact_list dl dt {width:70px; height:70px}
	.main_cscenter_wrap .contact_list dl.ct2 ~ dl {margin-top:40px}
}

@media screen and (max-width:1024px){
	#mainContainer {padding-top:0px}
	
	/*main_visual*/
	.main_visual_inner {padding:7.18em 0 1.63em}
	.main_visual_inner .txtWrap {margin:0 2%}
	.main_visual_inner .txtWrap li > * {top:30px}
	.main_visual_inner .txtWrap li h1 {font-size:1.75em}
	.main_visual_inner .txtWrap li h2 {font-size:.88em}
	.main_visual_inner .txtWrap li .btn_wrap {margin-top:.8em}
	.main_visual_inner .txtWrap li .btn_wrap a {width:9em; height:2.73em; line-height:2.73em}
	.main_visual_inner .txtWrap li .btn_wrap a + a {margin-left:.5em}
	.main_visual_inner .txtWrap li .btn_wrap a em {font-size:.88em}
	.main_visual_inner .txtWrap li .btn_wrap a span {width:.65em; height:.65em; margin-left:.6em}
	.ins_prd_list {margin:2.18em -.5% -.5%}
	.ins_prd_list li {max-width:440px; width:49%; height:auto; padding:1.17em .75em .88em; margin:.5%}
	.ins_prd_list li .icon_more {width:.68em; height:.68em; top:.75em; right:.75em}
	.ins_prd_list li .icon_more:after {height:.1em; margin-top:-.05em}
	.ins_prd_list li .icon_more:before {width:.1em; margin-left:-.05em}
	.ins_prd_list li .border {display:none}
	.ins_prd_list li .txt {padding-left:3.25em}
	.ins_prd_list li .txt > span {bottom:0; left:.2em}
	.ins_prd_list li .txt > span img {width:2.7em}
	.ins_prd_list li .txt > span .off {opacity:0}
	.ins_prd_list li .txt > span .on {opacity:1}
	.ins_prd_list li .txt > h1 {display:none}
	.ins_prd_list li .txt > h2 {line-height:1.3; font-size:.95em}
	.ins_prd_list li .btn_wrap {margin-top:1.25em; text-align:center}
	.ins_prd_list li .btn_wrap a {width:auto; height:2.33em; line-height:2.33em; padding:0 .4em; border-radius:.5em}
	.ins_prd_list li .btn_wrap a + a {margin-left:.2em}
	.ins_prd_list li .btn_wrap a > * {display:block; float:left; font-size:.75em}
	.ins_prd_list li .btn_wrap a > span {opacity:1; transition:0s, color .3s}
	.ins_prd_list li .btn_wrap a > var {padding-left:0}
	.ins_prd_list li .btn_wrap a.on {width:auto}
	
	/*main_info*/
	.main_info .inner {width:90%}
	.main_info {padding:1.35em 0 3em}
	.main_info .desc {float:right; width:100%}
	.main_info .desc p {padding-left:9.7em}
	.main_info .desc p > b {font-size:1.38em}
	.main_info .desc p > span {font-size:.95em}
	.main_info .tab {float:left; width:100%}
	.main_info .tab a {width:25%}
	.main_info .tab a.tab2 ~ a {margin-top:0} 
	.main_info .tab a > span {margin-top:.8em; font-size:.95em}
	.main_info .tab .icon img {width:1.55em}

	/*main_join_process*/
	.main_join_process {background:#e8f5ff}
	.main_join_process .inner {padding:3.43em 0 6.4em}
	.main_join_process .main_tit {font-size:1.375em}
	.main_join_process .process_step {margin-top:2.8em}
	.main_join_process .process_step li {width:7.23em; height:7.23em}
	.main_join_process .process_step li:after {display:none}
	.main_join_process .process_step li + li {margin-left:.75em}
	.main_join_process .process_step .step3 ~ li {margin-top:4.65em}
	.main_join_process .process_step li .step_inner h2 {position:absolute; top:100%; width:100%; margin-top:.8em; font-size:.95em}
	.main_join_process .process_step li .step_inner h3 {display:block; font-size:.7em; color:#8da9c0}
	.main_join_process .process_step li .step_inner img {width:3.2em; margin-top:.5em}
	.main_join_process .arr_down {height:5em; background:url('/img/m/main_join_process_bot_shadow.jpg'); background-size:auto 100%}
	.main_join_process .arr_down > span {width:100%; background:url('/img/m/main_join_process_bot.jpg') no-repeat top; background-size:auto 100% }
	.main_join_process .arr_down > span img {width:1.45em}

	/*main_btn*/
	.main_btn {height:9.1em}
	.main_btn a {width:4.76em; height:4.76em}
	.main_btn a.btn1 {margin-top:-1.88em; margin-left:-8.18em}
	.main_btn a.btn2 {margin-top:.2em; margin-left:-2.38em}
	.main_btn a.btn3 {margin-top:-1.88em; margin-left:3.42em}
	.main_btn a span {font-size:1em}

	/*main_customer*/
	.main_customer {padding:0 0 2.5em}
	.main_customer .main_tit_wrap {padding:.75em 2%}
	.main_customer .main_tit_wrap .more {top:auto; bottom:.75em; right:2%; width:1.46em; height:1.46em; margin-top:0}
	.main_customer .main_tit {font-size:1.38em}
	.main_customer .customer_inner {width:100%}
	.main_notice_wrap {float:none; padding-right:0}
	.main_notice_wrap .notice_list li > a {height:3.55em; line-height:3.55em; padding-right:5.5em}
	.main_notice_wrap .notice_list li > a > span {font-size:.95em}
	.main_notice_wrap .notice_list li > a > var {right:.3em; font-size:.95em}
	.main_cscenter_wrap {float:none; padding-left:0; margin-top:3.1em}
	.main_cscenter_wrap .contact_list {padding:0 2%}
	.main_cscenter_wrap .contact_list dl {width:50%; margin-top:1em; margin-top:1.75em !important}
	.main_cscenter_wrap .contact_list dl dt {width:2.7em; height:2.7em; background:none !important}
	.main_cscenter_wrap .contact_list dl dt img {width:100%}
	.main_cscenter_wrap .contact_list dl dd {padding-left:1em}
	.main_cscenter_wrap .contact_list dl dd p {font-size:.95em}
	.main_cscenter_wrap .contact_list dl dd a {font-size:1.13em}
}

@media screen and (max-width:768px){
	/*main_info*/
	.main_info .desc {margin-top:1.8em}
	.main_info .desc p {padding-left:0}
	.main_info .desc p > b {position:relative; top:0}
	.main_info .desc p + p {margin-top:1.8em}
	.main_cscenter_wrap .contact_list dl dt {background:#fff;}

}

@media screen and (max-width:600px){
	.main_visual_inner .txtWrap {height:9.7em}
}