/* #sideNav-wrap { overflow-y: scroll; } */
body { background-color: #fff; color: #4d4d4d; }

header.type1 { border-bottom: 0; }
header { box-shadow: 0 1px 3px 0 rgba(0,0,0,.12); }
header > .inner { position: relative; font-size: 0; height: 6rem; padding-left: 4rem; }
header > .inner #gnb { position: absolute; right: 0; top:50%; margin: 0; transform: translateY(-50%); }
header #headerLogo { display: inline-block; }
header #headerLogo a {
	display: block; text-indent: -99999px; height: 2.4rem; margin-top: 1.8rem; width: 20rem;
	background-image: url(/style_www/img/common/header/logo.png);
	background-repeat: no-repeat;
	background-size: auto 200%;
	background-position: left top;
}

header.type1.headerScroll #headerLogo a { background-position: left top; }

#userShow {
    color: #fff; font-size: 1.3rem; font-weight: 300; position: relative;
    display: block; height: 3.2rem; line-height: 3.2rem; padding: 0 4rem 0 1.5rem;
}

#userShow .arrow, .myProject dt .arrow{ padding-left: 1.5rem; font-size: 1.7rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);}
#userShow i.xi-caret-up-min, .myProject dt i.xi-caret-up-min{ color: #f7444e; display: none; }

.myMenu { position: absolute; top: calc(100% + 1rem); right: 0; }

.myProject, .myBasic { background-color: #fff; box-shadow: 2px 2px 5px rgba(51,51,51,0.16); border-radius: 0.3rem;  }
.myProject { margin-bottom: 1rem; }
.myProject dl { position: relative; /* height: 6.8rem; */ border-radius: 0.3rem; width: 32rem; }
.myProject dt { padding: 1.5rem 1rem 1.1rem; position: relative; height: 6.8rem; /* border: 1px solid #efefef; */ border-radius: 0.3rem; }
.myProject dt button { text-align: left; width: 100%; }
.myProject dt * { display: block; }
.myProject dt span { font-size: 1.3rem; color: #b6b6bf; font-weight: 400; }
.myProject dt strong { font-size: 1.5rem; font-weight: 400; }

.myProject.active dt { border-color: #555; border-bottom: 0; border-radius: 0.3rem 0.3rem 0 0; }
.myProject.active dt i.xi-caret-down-min { display: none; }
.myProject.active dt i.xi-caret-up-min { display: block; }

.myProject .scroll-wrapper { 
	box-shadow: 2px 2px 5px rgba(51,51,51,0.16); border-top: 1px solid #555;  
	border-radius: 0 0 0.3rem 0.3rem; position: relative; z-index: 2; display: none;
}
.myProject dd { max-height: 27rem !important; overflow: auto; background-color: #fff; border: 1px solid #efefef; }  
.myProject dd * { display: block; }
.myProject dd span { font-size: 1.2rem; color: #3984f7; font-weight: 400; }
.myProject dd span em { display: inline-block; color: #fff; background-color: #3984f7; padding: 0 1rem 0.1rem; border-radius: 0.5rem; }
.myProject dd strong { font-size: 1.5rem; font-weight: 400; color: #333; }
.myProject dd ul li { padding: 1rem; }
.myProject dd ul li + li { border-top: 1px solid #ededed; }
.myProject a:hover * { color: #3d60ce; }


.myBasic { padding: 1rem 0; border: 1px solid #efefef; width: 32rem; }
.myBasic a { display: block; font-size: 1.5rem; position: relative; color: #4d4d4d; padding: 0.5rem 1rem; font-weight: 400; }
.myBasic a:hover { color: #3d60ce; }
.myBasic a i { color: #3d60ce; background-color: #f3f3f3; line-height: 3.5rem; height: 3.5rem; width: 3.5rem;  border-radius: 2rem; margin-right: 0.5rem;}
.myBasic ul li:last-child { padding: 1rem 1rem 0; }
.myBasic ul li:last-child a { text-align: center; border: 1px solid #dcdcdc; border-radius: 0.3rem; font-size: 1.4rem; padding: 1rem; color: #888; }
.myBasic ul li:last-child a:hover { color: #3d60ce; border-color: #3d60ce;  }
/* #sideNav-wrap::after {
	content ''; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%;
	background-color: : 1px solid rgba(0, 0, 0, 0.12); } */
#sideNav-wrap > div { height: 100%; border-right: 1px solid rgba(0, 0, 0, 0.12); }
.sideNav-inner { padding: 1rem 2rem 2rem; }


.sideNav-inner .joinNav { background-color: #bdbfc5; border-radius: 0.8rem; overflow: hidden; font-size: 0; margin-top: 1.2rem; }
.sideNav-inner .joinNav li { display: inline-block; width: 50%; position: relative; }
.sideNav-inner .joinNav li:first-child::after { content: ''; width: 1px; height: 50%; position: absolute; top: 25%; right:0; background-color: #d4d7dc; }
.sideNav-inner .joinNav li a {
	display: block; font-size: 1.5rem; text-align: center; padding: 1.2rem 0; 
	color: #fff; font-weight: 400; text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* .sideNav-inner .homeBtn { padding: 0.5rem 1rem 0; border-bottom: 1px solid #d4d4d4; }
.sideNav-inner .homeBtn a { display: block; line-height: 6.0rem; font-size: 2.5rem; color: #5d5d5d; } */

.sideNav-inner .basicNav li { padding: 1rem 0; }
.sideNav-inner .basicNav li,
.sideNav-inner .basicNav li { border-bottom: 1px solid #d4d4d4; }
.sideNav-inner .basicNav li a, .supportNav-title { display: block; padding: 1rem 1.2rem; }
.sideNav-inner .basicNav li a em,
.sideNav-inner .basicNav li a i, 
.supportNav-title em,
.supportNav-title i { display: inline-block; vertical-align: middle; line-height: 3rem; }

.sideNav-inner .basicNav li a em, .supportNav-title em { font-weight: 400; color: #4d4d4d; font-size: 1.6rem; }
.sideNav-inner .basicNav li a i, .supportNav-title i { font-size: 2rem; padding-right: 0.7rem; color: #4d4d4d; transform: translateY(1%); }

.supportNav-title { margin: 1rem 0 0.5rem; }

.sideNav-inner .basicNav li.active a, .supportNav-title.active { border-radius: 0.6rem; background-color: #edf5fe; }
.sideNav-inner .basicNav li.active a em, .supportNav-title.active em { color: #1b4480; }
.sideNav-inner .basicNav li.active a i, .supportNav-title.active i { color: #3984f7; }

.sideNav-inner .supportNav { padding-bottom: 1.5rem; }
.sideNav-inner .supportNav li { padding-left: 1rem; }
.sideNav-inner .supportNav li a { display: block; }
.sideNav-inner .supportNav li a em,
.sideNav-inner .supportNav li a i { display: inline-block; vertical-align: middle; line-height: 3.4rem; color: #848d9f; }
.sideNav-inner .supportNav li a em { font-size: 1.5rem; } 
.sideNav-inner .supportNav li a i { color: #b6b6bf; transform: translateY(-1%); font-weight: 800; font-size: 1.2rem; padding-right: 0.5rem; }

.sideNav-inner .supportNav li.active a em { color: #3d60ce; }
.sideNav-inner .supportNav li.active a i { color: #3984f7; }

.sideNav-inner .otherNav { border-top: 1px solid #d4d4d4; }

.sideNav-inner .supportNav li a:hover *,
.sideNav-inner .basicNav li a:hover * { color: #3d60ce; }

.sideNav-inner .basicNav li.active a:hover { background-color: #3d60ce; }
.sideNav-inner .basicNav li.active a:hover * { color: #fff; }

.basicBtn { 
	display: block; background-color: #3d60ce; border-radius: 0.5rem; width: 100%; line-height: 5rem; 
	color: #fff; font-weight: 400; font-size: 1.5rem; border: 0;
}
.basicBtn:active, .basicBtn:hover { background-color: #1f3d9c; }

.lineBtn { border-color: #3d60ce; color: #3d60ce; font-size: 1.5rem; }
.lineBtn:hover { color: #3d60ce; }

.noneData { text-align: center; padding: 10rem !important; }
.noneData i { font-size: 6rem; color: #cdcdcd; display: block; }
.noneData strong { font-size: 2.5rem; display: block; color: #6d6d6d; padding-top: 1rem; } 
.noneData span { font-size: 1.5rem; display: block; color: #bababa; padding-top: 0.8rem; }






/*---------- main ----------*/


.mainWidth { margin: auto; padding: 0 2rem; position: relative; }

.topContainer {
	background-color: #1a4087; background-image: url(/style_www/img/custom/top_bg.jpg);
	background-size: cover; background-position: center; background-repeat: no-repeat;
}

.topContainer-main { background-color: #1a4087; }
	

/* .topContainer .contentContainer > .inner #title { padding-bottom: 8rem; } */
.topContainer-main .contentContainer > .inner { padding: 6rem 1.5rem 12rem; }
.topContainer-main h1 { width: 24rem; display: block; margin: auto; padding-bottom: 1rem; }
.title_logo_wide { display: none; }
.topCopy { text-align: center; }
.topCopy dt span { display: block; color: #fff; font-size: 2.3rem; line-height: 2.7rem; animation-delay: 0.8s; }
.topCopy dt span em { color: #abf4d1; }
.topCopy dd { margin-top: 1rem; }
.topCopy dd.topCopy_detail { display: none; }
.topCopy dd span { display: block; color: #a1b0ce; font-size: 1.5rem; line-height: 2rem; animation-delay: 0.8s; }


.video-popup { max-width: 1100px; margin: auto; position: relative; padding: 0 5px; }
.video-popup video { width: 100%; }
.video-popup .mfp-close { color: #fff; right: 5px; top: -44px; background-color: #3d60ce; }

.topCopy .topCopy_btn { margin-top: 2rem; animation-delay: 0.8s; }

.topCopy .topCopy_btn a { display: inline-block; border-color: #9db2d2; width: auto; font-size: 0; line-height: initial; }
.topCopy .topCopy_btn a * { display: inline-block; vertical-align: middle; line-height: 3.7rem;}
.topCopy .topCopy_btn a i { font-size: 2.3rem; margin-right: 0.5rem; color: #fff; }
.topCopy .topCopy_btn a span { font-size: 1.4rem; color: #fff; }
.topCopy .topCopy_btn a:hover { background-color: #fff; border-color: #fff; }
.topCopy .topCopy_btn a:hover * { color: #3d60ce; font-weight: 400; }

.topCopy .topCopy_btn a.openVideo { margin-right: 0.8rem; background-color: #abf4d1; border-color: #abf4d1; }
.topCopy .topCopy_btn a.openVideo * { color: #34473e; font-weight: 400; }
.topCopy .topCopy_btn a.openVideo:hover { background-color: #fff; border-color: #fff; }

.subTitle { padding: 4rem 1rem 3rem; }
.subTitle strong { display: block; font-weight: 500; color: #fff; font-size: 3rem; line-height: 3rem; height: 3rem; }
.subTitle span { color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; font-weight: 400; line-height: 1.6rem; height: 1.6rem; }

.mainCompany > .inner { margin-top: -6rem; overflow: hidden; position: relative; }
.mainCompany .swiper-slide > .inner {
	background-color: #fafbfc; position: relative; border-radius: 0.8rem;
	box-shadow: 0 0 1px 0.5px rgba(0, 0, 4, 0.05); overflow: hidden;
}
.mainCompany .swiper-slide > .inner::before {
	content: ''; display: block; width: 120%; height: 7rem; filter: blur(0.3rem);
	background-color: #3d60ce; position: absolute; top: -1rem; left: -5px;
}

.mainCompany .swiper-slide > .inner > button {
	display: block; width: 100%; width: 100%; border-radius: 0.8rem; border: 1px solid rgba(200, 200, 200, 0.08);
	overflow: hidden; background-color: #c3c5cd; position: relative; padding: 1.5rem 0;
}

.mainCompany .swiperContainer { padding-bottom: 2rem; }
.mainCompany .swiperContainer .swiper-pagination-progressbar { top: auto; top: unset; bottom: 0; background-color: #f6f7f9; overflow: hidden; }

.companyLogo {
	width: 25%;  box-shadow: 0 0 0.1rem 0.1rem rgba(0, 0, 8, 0.05); margin: auto;
	background-color: #fff; border-radius: 5rem; overflow: hidden;
}
.companyName {
	text-align: center; width: 100%; display: block; font-weight: 400;
	font-size: 1.4rem; color: #fff; padding-top: 1.5rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}


.mainNotice { margin: 4rem 0 0; }
.mainNotice > .inner { position: relative; padding: 2rem 4rem 2rem 10.2rem; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.mainNotice > .inner dt { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); }
.mainNotice > .inner dt a {
	color: #3d60ce; display: inline-block; padding: 0.3rem 0 0.35rem; border-radius: 2rem;
	border: 2px solid #3d60ce; font-weight: 400; font-size: 1.3rem; width: 7.5rem;
	text-align: center;
}
.mainNotice > .inner dd ul { width: 100%; }
.mainNotice > .inner dd a { color: #555; font-size: 1.6rem; width: 100%; }
.mainNotice > .inner i { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 2rem; color: #ccc; }


h2.mainContent-title { padding: 0 0.5rem 1.5rem; }
h2.mainContent-title i { color: #3d60ce; font-size: 1.4rem; padding-right: 0.5rem; position: relative; top: -0.1rem; }
h2.mainContent-title strong { font-size: 1.9rem; font-weight: 500; color: #555; }

/* .mainSupport > .inner .support-wrap { font-size: 0; margin-left: -1rem; }
.supportItem { display: inline-block; width: 50%; padding-left: 1rem; vertical-align: top; } */


.supportItem > ul { font-size: 0; margin-left: -1rem; }
.supportItem > ul > li { display: inline-block; width: 50%; vertical-align: top; padding-left: 1rem; }
.supportItem > ul > li:nth-child(n + 3){ padding-top: 1rem; }


.supportItem > ul > li:nth-child(1) .imgContainer-fit { padding-bottom: calc(100% + 5rem); }
.supportItem > ul > li:nth-child(2) .imgContainer-fit { padding-bottom: calc(100% - 5rem); }
.supportItem > ul > li:nth-child(3) .imgContainer-fit { padding-bottom: calc(100% - 10rem); }
.supportItem > ul > li:nth-child(4) { margin-top: -10rem; }
.supportItem > ul > li:nth-child(4) .imgContainer-fit { padding-bottom: 100%; }
.supportItem > ul > li:nth-child(5) .imgContainer-fit { padding-bottom: 100%; }
.supportItem > ul > li:nth-child(6) .imgContainer-fit { padding-bottom: calc(100% - 3rem);}
.supportItem > ul > li:nth-child(7) .imgContainer-fit { padding-bottom: calc(100% - 4rem); }
.supportItem > ul > li:nth-child(8) { margin-top: -3rem; }
.supportItem > ul > li:nth-child(8) .imgContainer-fit { padding-bottom: calc(100% - 1rem); }

.supportItem > ul > li:nth-child(9) .imgContainer-fit { padding-bottom: calc(100% - 7rem); }
.supportItem > ul > li:nth-child(10) .imgContainer-fit { padding-bottom: calc(100% - 12rem); }
.supportItem > ul > li:nth-child(11) .imgContainer-fit { padding-bottom: calc(100% - 12rem); }
.supportItem > ul > li:nth-child(12) { margin-top: -5rem; }
.supportItem > ul > li:nth-child(12) .imgContainer-fit { padding-bottom: calc(100% - 7rem); }


.supportItem > ul > li > button { width: 100%; border-radius: 0.8rem; overflow: hidden; position: relative; box-shadow: 0 0 5px 1px rgba(0, 0, 3, 0.1); }
.supportItem > ul > li > button .inner::before {
	content: ''; position: absolute;
	bottom: 0; top: 20%; left: 0;
	width: 100%; z-index: 1;
	background: rgba(0, 0, 0, 0.2); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(1,6,23,0) 0%,rgba(1,6,23,0.8) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(1,6,23,0) 0%,rgba(1,6,23,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(1,6,23,0) 0%,rgba(1,6,23,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010617', endColorstr='#010617',GradientType=0 ); /* IE6-9 */
}


.supprotText { position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.8rem; z-index: 2; text-align: left; }
.supprotText h3{ font-size: 1.7rem; font-weight: 400; padding: 0.5rem 0.5rem 0.8rem; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.2) }
.supprotText p { background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); color: #fff; border-radius: 0.4rem; padding: 0.5rem 1.2rem 0.5rem; }
.supprotText p b { font-size: 1.6rem; font-weight: 400; }
.supprotText p span { font-weight: 400; font-size: 1.5rem; }

.quickNav { margin: 5rem 0; }
.quickNav > .inner > ul { font-size: 0; border: 1px solid #e8e8e8; box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.03); border-radius: 6px; }
.quickNav > .inner > ul > li { width: 25%; font-size: 1.5rem; display: inline-block; }
.quickNav > .inner > ul > li:first-child a { border-left: 0; }
.quickNav > .inner > ul > li > a { display: block; width: 100%; text-align: center; padding: 2rem 0; border-left: 1px solid #e8e8e8; }
.quickNav > .inner > ul > li > a span { font-weight: 400; color: #4d4d4d; font-size: 1.6rem; }
.quickNav > .inner > ul > li > a:hover span { color: #3d60ce; }

.bannerSection { padding: 3rem 0 2.5rem; font-size: 0; }

.demoBanner { margin-top: 1rem; }

.appBanner a { 
	display: block;  background-color: #3b60cc; border-radius: 0.5rem; overflow: hidden;
	background-image: url("/style_www/img/custom/main/banner_bg.png"); background-size: auto 102%; background-position: 101% center; background-repeat: no-repeat;
}
.appBanner a span { 
	display: block;
	background: -moz-linear-gradient(left,  rgba(59,96,204,1) 0%, rgba(59,96,204,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(59,96,204,1) 0%, rgba(59,96,204,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(59,96,204,1) 0%, rgba(59,96,204,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b60cc', endColorstr='#003b60cc',GradientType=1 ); /* IE6-9 */

}

.appBanner a span img { width: 55rem; max-width: 100%; }

.demoBanner a { 
	display: block; background-color: #633fc7; border-radius: 0.5rem; overflow: hidden;
	background-image: url("/style_www/img/custom/main/banner_demo_bg.png"); background-size: auto 102%; background-position: 101% center; background-repeat: no-repeat;
}

.demoBanner a span { 
	display: block; 
	background: -moz-linear-gradient(left,  rgba(99,63,199,1) 0%, rgba(99,63,199,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(99,63,199,1) 0%,rgba(99,63,199,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(99,63,199,1) 0%, rgba(99,63,199,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#633fc7', endColorstr='#633fc7cc',GradientType=1 ); /* IE6-9 */
}

.demoBanner a span img { width: 55rem; max-width: 100%; }

.bannerSection.mobile .demoBanner { display: none; }
.bannerSection.mobile .appBanner { width: 100%; padding-right: 0; }

.partnerSection { background: #f6f6fa; padding: 4rem 0; overflow: hidden; }
.partnerSection h2.mainContent-title { padding-bottom: 2rem; }
.partnerSection h2 em { color: #3d60ce; font-weight: 500; }
.partnerSection .gridWarp { text-align: center; }

.partnerSlider { overflow: hidden; }
.partnerSlider .swiper-slide a { background-color: #fff; width: 100%; border-radius: 0.8rem; overflow: hidden; position: relative; box-shadow: 0 0 5px 1px rgba(0, 0, 3, 0.03); overflow: hidden; padding-bottom: 65%; }
/* .partnerSlider .swiper-slide a:hover:before { 
	content:''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; border: 5px solid #ededed; border-radius: 0.8rem; 
} */
.partnerSlider .swiper-paginations { margin-top: 1.5rem; text-align: center; }

/*---------- main ----------*/




/*---------- search ----------*/


.rightContent-maxWidth { padding: 0 2rem; }
.rightContent.open { padding-right: 0; padding-left: 0; padding-top: 2rem; }

.rightContent { padding: 1rem; display: none; }
.rightContent > .inner { background-color: #f8f8f8; border-radius: 0.8rem; padding: 0 2rem 3rem; }

.filter-wrap { border-bottom: 1px solid #ebeeef; padding: 1.5rem 2rem 1.4rem; position: relative; }
.filterShow { border-radius: 0.5rem; border: 1px solid #dbdbde; padding: 1rem 1.5rem; font-weight: 400; color: #4d4d4d; font-size: 1.4rem;  }

.minSort { position: absolute; right: 2rem; bottom: 1.4rem; font-size: 1.4rem; width: 13rem; border-radius: 0.5rem; }

.searchContent > .maxSort { width: 100%; margin-bottom: 1.5rem; border-radius: 0.5rem; display: none; }

.searchContent > .inner.filterBox { margin-top: 1.5rem; padding-bottom: 2rem; }
.searchContent > .inner dl { border-bottom: 1px solid #dbdbde; padding: 2rem 0 2rem; position: relative; }
.searchContent > .inner.searchBox dl { border-bottom: 0; padding-bottom: 1rem; }
.searchContent > .inner.filterBox dl:last-child { border-bottom: 0; }
.searchContent > .inner dt { font-weight: 500; color: #4d4d4d; padding: 0.5rem; font-size: 1.6rem; }
.searchContent > .inner input { background-color: #fff; border: 1px solid #e7e7e9; border-radius: 0.5rem; width: 100%; font-size: 1.6rem; }


.searchContent > .inner .gridWarp > ul { margin-left: -0.5rem; }
.searchContent > .inner .gridWarp > ul > li { padding-left: 0.5rem; }
.searchContent > .inner .customSelect { border-radius: 0.5rem; background-color: #fff; border-color: #e7e7e9; width: 100%;  }

.searchContent > .inner .checkContent { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* .searchContent > .inner .searchButton { padding-top: 3rem; } */


.searchContent.open { display: block; }

.switch, .switch * { transition: all 200ms ease; }
.switch { border: 0; }
.switch label { box-shadow: none; background-color: #e7e7e9; height: 24px; }
.switch label i { background-color: #9e9ea7; width: 18px; height: 18px; top: 3px; left: 3px; }
.switch input:checked ~ label { background-color: #c9d4f7; border: 0; }
.switch input:checked ~ label i { left: calc(100% - 21px); right: inherit; background-color: #3d60ce; border-color: #3d60ce; border: 0; }

.searchContent > .inner dl.filterContainer { padding: 1rem 0 2rem; }
.filterContainer > dd > ul > li:nth-child( n + 2 ) { padding-top: 0.5rem; }
.clearFilters { text-align: center; padding-top: 0.5rem; }
.clearFilters > button > span { color: #3d60ce; font-weight: 500; }

/*---------- search ----------*/





/*---------- topInfo ----------*/

.topInfo > .inner { padding: 4rem 0.5rem; }
.topInfo > .inner > ul { font-size: 0;}
.topInfo > .inner > ul > li:nth-child(n+2) { padding-top: 1rem; }
.topInfo dt { color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; font-weight: 400; }
.topInfo dt span { font-weight: 400; padding-left: 1rem; color: #fff; }
.topInfo dd { color: #fff; font-size: 2.5rem; font-weight: 500; }
.topInfo dd span { font-size: 1.6rem; font-weight: 400; padding-left: 1rem; }
/* .topInfo dd.orangeText { color: #f29b76; } */

.inlineGroup { display: inline-block; vertical-align: middle; }



.loactionBar { position: relative; padding: 0; overflow: hidden; box-shadow: 0 1px 4px 0 rgba(0,0,0,.05); border-bottom: 1px solid #ebeeef; }

.loactionBar ul { font-size: 0; }
.loactionBar li { display: inline-block; }

.loactionBar .location li a { display: block; line-height: 6rem; color: #888; font-size: 1.5rem; }  
.loactionBar .location li + li { position: relative; padding-left: 2.2rem; }
.loactionBar .location li + li:before { 
	content: "\e93e"; font-family: xeicon; position: absolute; left: 0.3rem; top: 50%; transform: translateY(-50%);
	font-size: 1.2rem; color: #ccc
}
.loactionBar .location li + li:last-child a { color: #4d4d4d; font-weight: 400; }

.loactionBar > .inner > .info {  color: #555; display: block; line-height: 6rem; font-size: 1.5rem; font-weight: 400; padding: 0 0.5rem;  }
.loactionBar > .inner > .info em { font-weight: 500; color: #1b52ed; font-size: 2rem }
.loactionBack { color: #555; display: block; line-height: 6rem; font-size: 1.5rem; font-weight: 400; padding: 0 0.5rem; }
.loactionBack i { font-weight: 800; color: #1b52ed;  padding-right: 0.2rem; } 

.loactionNav a { display:block; padding: 0rem 2rem; line-height: 6rem; position: relative; font-size: 1.5rem; font-weight: 400; color: #555; }
.loactionNav a.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.3rem;
    background-color: #3d60ce;
}


/*---------- topInfo ----------*/




/*---------- support ----------*/


.subSupport { position: relative; padding: 0 0 0 3rem; overflow: hidden; box-shadow: 0 1px 4px 0 rgba(0,0,0,.05); border-bottom: 1px solid #ebeeef; }
.subSupport .swiper-slide { width:auto; }
.subSupport .swiper-button-next, .subSupport .swiper-button-prev { margin: 0; height: auto; }
.subSupport .swiper-button-next:before, .subSupport .swiper-button-prev:before { content: ''; display: block; line-height: 6rem; }

.subSupport  .swiper-slide button { padding: 0rem 2rem; line-height: 6rem; position: relative; font-size: 1.5rem; font-weight: 400; color: #555; }
.subSupport  .swiper-slide button.active:after{
	content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 0.3rem; background-color: #3d60ce;
}
.subSupport .swiper-slide:last-child button { margin-right: 5rem; }

.subSupport .swiper-button-prev:before{ font-family: xeicon; content: "\e93b"; }
.subSupport .swiper-button-next:before{ font-family: xeicon; content: "\e93e"; }

.subSupport .swiper-button-prev{
	top:0; bottom: 0; left: 0;
	text-align: center;
	background: #f8f8f8;
    border-right: 1px solid #e8e8e8;
	/* background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); */
}
.subSupport .swiper-button-next{
	top:0; bottom: 0; right: 0;
	text-align: center;
	background: #f8f8f8;
    border-left: 1px solid #e8e8e8;
	/* background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);  */
}

.subSupport .swiper-button-disabled { opacity: 0; }


.supportList { padding-top: 1rem; }
.supportLine > .inner { position: relative; padding: 1.5rem 3rem 1.5rem 7rem; border-bottom: 1px solid #ebeeef; display: block; width: 100%; text-align: left; }
.supportDivision{ 
	background:#7190ed; width: 5.5rem; height: 5.5rem; border-radius: 50%; 
	position: absolute; left: 0rem; top: 1.2rem;  }
.supportIcon { 
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); color: #fff;
	font-size: 1.3rem; line-height: 120%; text-align: center; font-weight: 400; width: 100%;
}
.supportIcon br { line-height: 120%; }

.supportLine > .inner dt { font-size: 1.7rem; font-weight: 400; color: #333d4b; }
.supportLine > .inner:hover dt, .supportLine > .inner:hover .infoDetail * { color: #3d60ce; }
.supportLine > .inner .arrow { 
	position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); 
	font-size: 1.8rem; color: #4e5968;
}

.supportDivision_1 { background:#7190ed; }
.supportDivision_2 { background:#379177; }
.supportDivision_3 { background:#4ebcb3; }
.supportDivision_4 { background:#92d5dd; }
.supportDivision_5 { background:#ec7f62; }
.supportDivision_6 { background:#dd5a7a; }
.supportDivision_7 { background:#a348a7; }
.supportDivision_8 { background:#ffc000; }
.supportDivision_9 { background:#89ba4d; }
.supportDivision_10 { background:#367779; }
.supportDivision_11 { background:#fb7268; }

.list-contnet .none_data {height:200px;text-align:center;padding:80px;color:#888;}


.infoLine { padding-top: 1.5rem; }
.deadlineInfo, .priceInfo { display: inline-block; vertical-align: top; }
.deadlineInfo i , .priceInfo i { display: block; color: #8b95a1; font-size: 1.4rem; font-weight: 400; padding-left: 0.1rem; }
.deadlineInfo em , .priceInfo em { display: block; color: #334d4b; font-size: 1.95rem; font-weight: 500; }
.deadlineInfo { padding-right: 3rem; }
.priceInfo em { color: #3d60ce; }

.infoDetail span { display: inline-block; font-size: 1.3rem; color: #7b8591; margin-top: 0.2rem; }
.infoDetail span + span { margin-left: 1rem; padding-left: 1rem; position: relative; }
.infoDetail span + span:before { content: ''; display: block; position: absolute; left: 0; top: 0.5rem; width: 0.1rem; height: 1rem; background-color: #dcdcdc; }

.endSupport, .endSupport .supportDate, 
.endSupport.supportLine > .inner dt,
.endSupport.supportLine > .inner .arrow,
.endSupport .deadlineInfo i, .endSupport .priceInfo i, 
.endSupport .deadlineInfo em, .endSupport .priceInfo em  { color: #bec2c7; }
.endSupport .supportDivision { background-color: #bec2c7; }
.endSupport .deadlineInfo em { text-align: center; }


/*---------- support ----------*/



/*---------- view ----------*/


.share-wrap > .inner { padding: 2rem; }
.snsShare span { font-size: 0; }

.snsShare { border-top: 1px solid #dbdbde; margin-top: 2rem; padding-top: 1rem; }
.snsShare h4 { font-weight: 500; color: #4d4d4d; padding: 0.5rem; font-size: 1.7rem; }
.snsShare .gridWarp > ul { margin-left: -0.5rem; }
.snsShare .gridWarp > ul > li { padding-left: 0.5rem; }
.snsShare ul > li > .inner { background-color: #fff; border: 1px solid #e7e7e9; border-radius: 0.2rem; }
.snsShare ul > li > .inner button { text-align: center; line-height: 3.5rem; text-align: center; width: 100%; }
.share-wrap > .inner .basicBtn { line-height: 4.6rem; border: 1px solid #3d60ce; }

.copyUrl-wrap { margin-top: 1rem; }
.copyUrl-wrap input { width: calc(100% - 5rem); display: inline-block; line-height: 1.5rem; border: 1px solid #e7e7e9; height: 4.5rem;  }
.copyUrl-wrap button { 
	width: 5rem; display: inline-block; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.5px; height: 4.5rem;
	background-color: #fff; border: 1px solid #e7e7e9; border-left: 0; padding: 1rem 0; line-height: 1.5rem; 
}

#sns-dialog { position: relative; max-width: 30rem; margin: auto; }
.popShare-wrap { 
	background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); 
	padding: 2rem; border-radius: 0.5rem; margin-top: 0; border-top: 0;
}

.popShare-wrap.snsShare ul > li > .inner button { text-align: left; padding-left: 1rem; }
.popShare-wrap.snsShare span { font-size: 1.4rem; padding-left: 0.5rem; font-weight: 400; color: #333d4b; }
.popShare-wrap .copyUrl-wrap input { width: calc(100% - 10rem); font-size: 1.4rem; }
.popShare-wrap .copyUrl-wrap button { width: 10rem; font-size: 1.4rem; }
.popShare li + li { margin-top: 0.5rem; }

.subTop { position: relative; }
.subTop .infoLine { padding: 3rem 0 3rem; font-size: 0; }
.subTop .infoLine div + div { margin-left: 0.5rem; }
.subTop .infoLine div { background-color: #fff; border-radius: 0.5rem; padding: 2rem; min-width: 10rem; }
.subTop .infoLin .deadlineInfo em, .subTop .infoLin .priceInfo em { font-size: 2.5rem; }

.subTop .viewInfo { position: relative; padding: 2.5rem 0 2.5rem 8.5rem; }
.subTop .viewInfo .supportDivision { width: 7.5rem; height: 7.5rem; top: 50%; transform: translateY(-50%); }
.subTop .viewInfo .supportDivision .supportIcon { font-size: 1.5rem; }

.subTop .mobileShare { position: absolute; right: 2rem; bottom: 2rem; }
.subTop .mobileShare button, .subTop .mobileShare a { font-size: 2.5rem; display: inline-block; vertical-align: middle; color: #fff; }
.subTop .mobileShare a { padding-left: 0.5rem; }
.bookmarkBtn.active { color: #ff8989 !important; }

/* bookmarkBtn */


.viewContainer { padding: 2rem 0 5rem; }
.viewContainer h3 { font-size: 3rem; font-weight: 500; line-height: 130%; word-break: keep-all; }

.viewBaic { border-bottom: 1px solid #ececec; padding-bottom: 2rem; margin-top: 1rem; }
.viewBaic > .inner { border: 1px solid #dcdcdc; border-radius: 0.5rem; overflow: hidden; }
.viewBaic > .inner table { width: 100%; }
.viewBaic > .inner table tr + tr th, .viewBaic table tr + tr td { border-top: 1px solid #dcdcdc; }
.viewBaic > .inner table th { padding: 0.7rem 0; background-color: #f8f8f8; }
.viewBaic > .inner table td { padding: 0.7rem 1rem; }
.viewBaic > .inner table th { border-right: 1px dashed #dcdcdc; border-left: 1px solid #dcdcdc; }
.viewBaic > .inner table th:first-child { border-left: 0; }
.viewBaic > .inner table th span { font-weight: 400; }
.viewBaic > .inner table span { font-size: 1.5rem; word-break: break-all; }
.viewBaic > .inner table span br { display: none; }

.viewBaic > .inner table .link span { font-size: 1.4rem; line-height: 120%; color: rgb(74, 134, 232); text-decoration: underline; word-break: break-all; }

.basicBoard-content img { max-width: 100%; }

.listBtn { border-color: #ccc; color: #4d4d4d; display: inline-block; width: auto; line-height: 4rem; padding: 0 3rem 0 2.8rem; }
.listBtn:hover { color: #4d4d4d; }

/*----------  createProject ----------*/


.createProject-pop .mfp-container { padding: 1rem; }



.createFloating { margin-top: 2rem; }
.createFloating.fix { position: fixed; top: 6.2rem; width: 25rem; }
.finger { position: absolute; left: 1.8rem; top: 2rem;  animation: motionUp 0.7s infinite; width: 2.5rem; display: block; }
.carateInfo {   
	margin-top: 1.8rem; border-radius: 0.8rem; background-color: #fffbcb; 
	padding: 2rem 2rem 2rem 5.5rem; font-size: 1.3rem; position: relative;
}
.carateInfo em { 
	display: block;
}

@keyframes motionUp {
	0% { top: 2.5rem; }
	50% { top: 1.5rem; }
	100% { top: 2.5rem; }
}

#createProject-wrap { position: relative; max-width: 80rem; margin: auto; }
.popProject-wrap { 
	background-color: rgba(255, 255, 255, 1); backdrop-filter: blur(10px); 
 	border-radius: 0.5rem; margin-top: 0; border-top: 0; overflow: hidden;
}

.createStep { padding: 4rem 4rem 6rem; }
.createStep > h3 { display: block; padding-bottom: 2rem; border-bottom: 1px solid #ececec; }
.createStep > h3 > strong { display: block; font-weight: 600; font-size: 2.4rem; }
.createStep > h3 > span { font-size: 1.5rem; font-weight: 400; color: #9a9da6; }
.createStep > .gridWarp { padding: 3.5rem 0 3.5rem; }
.createStep > .gridWarp > ul > li > .inner { 
	font-size: 1.5rem; font-weight: 400; text-align: center; border-radius: 0.3rem;
	border: 1px solid #dcdcdc; padding: 1rem 2.5rem; 
}

.createStep .customRadio label { font-weight: 400; }

.createStep > h3.filish { display: block; text-align: center; padding-bottom: 2rem; border-bottom: 1px solid #ececec; }
.createStep .finshImg { padding: 4rem 0rem 5rem; width: 40%; max-width: 18rem; margin: auto; }

.projectBtn-wrap { text-align: center; }
.projectBtn-wrap.setMobile > .gridWarp > ul > li:first-child { display: none; }

.skipBtn { overflow: hidden; color: #3d60ce; font-size: 1.5rem; font-weight: 400; margin-top: 1.5rem; text-align: center; display: inline-block;}

/*----------  createProject ----------*/




/*---------- organ ----------*/

.organContainer { padding: 2.5rem 0; }
.organList > .inner { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0.3rem; text-align: left; color: #4d4d4d; position: relative; }
.organList > .inner:hover::after {
	content: "\e914"; font-family: 'xeicon' !important; color: #fff; font-size: 3rem; line-height: 6rem; width: 6rem; height: 6rem; text-align: center;
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #365dcf; border-radius: 50%; z-index: 11;
}
.organList > .inner:before { content: ''; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10; background-color: #aaa; opacity: 0; transition: all .3s; }
.organList > .inner:hover::before { opacity: 0.3; }

.organList > li:nth-child( n + 2) { padding-top: 1.5rem; }
.organList h4 { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.organList h4 > .inner { display: block; position: relative; padding-left: 5rem; }
.organList h4 > .inner .companyLogo { display: block; position: absolute; left:0; width: 4rem; }
.organList h4 > .inner .companyName { 
	text-shadow: none; color: #4d4d4d; font-weight: 500; text-align: left; line-height: 4rem; padding: 0;
	font-size: 1.7rem;
}
.organList > .inner dl { padding: 1.5rem; }
.organList > .inner dl dt { font-weight: 400; color: #888; padding-bottom: 0.3rem; }
.organList > .inner dl dd strong { font-size: 2rem; font-weight: 500; /* color: #f85a41; */ color: #3d60ce; }
.organList > .inner dl dd span { font-weight: 400; font-size: 1.5rem; display: block; /* padding-left: 0.5rem; */}
.organList > .inner ul { background-color: #f8f8f8; padding: 0.8rem 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.05); }
.organList > .inner li { line-height: 2.2rem; height: 2.2rem; display: block; color: #5f5f6a; }
.organList > .inner li em { padding-right: 0.3rem; }

.organLogo { padding: 1rem 5rem 1rem 0; }
.organLogo button { padding: 0 5rem; border-radius: 0.3rem 0.3rem 0 0; background-color: #fff; }
.organLogo button > span { overflow: hidden; width: 10rem;  }
.organLogo em { color: #fff; display: block; width: 100%; background-color: #3d60ce; padding: 0.5rem 1rem; border-radius: 0 0 0.3rem 0.3rem; }

.organPrice { padding: 1rem 0.5rem; }
.organPrice dl { display: inline-block; padding-right: 5rem; }
.organPrice dl:last-child { padding-left: 0; }
.organInfo-wrap .snsShare { border-top: 0; }
.organBtn { border: 1px solid #dcdcdc; border-radius: 0.5rem; overflow: hidden; }
.organBtn > li { border-bottom: 1px solid #dcdcdc; background-color: #fff; }
.organBtn > li:last-child { border: 0; }
.organBtn > li > a { padding: 1rem 1.5rem; display: block; color: #4d4d4d;  }
.organBtn > li > a span { display: block; color: #848d9f; font-size: 1.2rem; word-break: break-all; line-height: 130%; padding-top: 0.3rem; }




/*---------- organ ----------*/





/*---------- notice ----------*/

.boardNew { font-size: 2rem; position: relative; top: 0.25rem; color: #e85e49; }

.topContainer-search { padding-bottom: 3rem; }
.boardSearch { transform: translateY(-50%); padding: 1rem 0; }
.boardSearch > .maxWidth > .inner { 
	padding-right: 6.2rem; max-width: 600px; box-shadow: 0px 8px 20px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); 
	font-size: 0; position: relative; border-radius: 0.8rem; overflow: hidden; background-color: #fff; 
}
.boardSearch > .maxWidth > .inner > input { padding: 1.7rem; background-color: #fff; font-size: 1.6rem; width: 100%;  }
.boardSearch > .maxWidth > .inner .searchBtn { width: 6.2rem; font-size: 2.5rem; color: #3d60ce; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.board-wrap { padding-bottom: 5rem; }
.noticeList { border-top: 2px solid #333; }
.noticeList > li { position: relative; cursor: pointer; padding: 2rem 0.5rem; border-bottom: 1px solid #e6e6e6; }
.noticeList > li dt { font-weight: 400; font-size: 1.6rem; }
.noticeList > li dd { font-size: 1.4rem; color: #848d9f; padding-top: 0.8rem; }
.noticeList > li > .arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }


.videoList .imgContainer-fit  { padding-bottom: 56.25%; }
.gallery-wrap h5 strong { font-size: 1.6rem; }
.gallery-wrap .date, .onlyText-date { font-size: 1.4rem; }

.onlyText button { position: relative; padding-bottom: 3.6rem; }
.onlyText .onlyText-date { position: absolute; bottom: 1.5rem; right: 1.5rem; color: #666; opacity: 0.6; }
.gallery-wrap .onlyText h5 { padding-bottom: 0; }
.gallery-wrap .onlyText-content > .inner { padding: 1.5rem; border-top: 1px solid #ededed; }
.gallery-wrap .onlyText-content > .inner > div { font-size: 1.4rem; text-align: left; }

@media (min-width: 600px){	
	.onlyText button { position: relative; padding-bottom: 2.6rem; }
	.gallery-wrap .onlyText-content { position: relative; padding-bottom: 56.25%;  }
	.gallery-wrap .onlyText-content > .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
	
	.gallery-wrap .onlyText-content > .inner .clamp_2 {  -webkit-line-clamp: 4; line-clamp: 4; height: calc(1.4em * 4); }
	.gallery-wrap .onlyText-content > .inner .clamp_2:before { top: calc(1.4em * 3); }
}

.video-wrap { padding: 3rem 0; }
.video { max-width: 70rem; margin: auto; }
.videoContainer { position: relative;  }
.video-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90px; cursor: pointer; }
.video--played .video-play-button { display: none; }
.video .info{ text-align: center; padding: 30px 0 0;}
.video .info .infoTitle { font-weight: 900; font-size: 20px; }
.video .info .summary { color: #888; font-size: 16px;  padding: 10px 0 20px; }

.videoText { border-top: 1px solid #ddd;  }


/*---------- notice ----------*/





/*---------- faq ----------*/

.faq-wrap { padding-bottom: 5rem; border-top: 2px solid #333; }

.faq-wrap .ui-accordion .ui-accordion-header,
.faq-wrap .ui-accordion h3, 
.faq-wrap .ui-accordion h3.ui-state-active, 
.faq-wrap .ui-accordion h3:focus, 
.faq-wrap .ui-accordion h3:hover, .faq-wrap .ui-accordion h3:active { 
	background-color: #fff; border: 0; outline: 0; color: #333; border-bottom: 1px solid #e6e6e6; 
	position: relative; font-weight: 400; padding: 2.2rem 2.2rem 2.2rem 5rem; font-size: 1.5rem;
}

.faqIcon { position: absolute; left: 1.5rem; height: 3rem; opacity: 0.8; }
.faq-wrap .ui-accordion h3 .faqIcon { top: 50%; transform: translateY(-50%);  }
.faq-wrap .ui-accordion .ui-accordion-content { 
	position: relative; border: 0; padding: 2.2rem 2.2rem 2.2rem 5rem; background-color: #f7f7f9; 
	font-size: 1.4rem; border-bottom: 1px solid #e6e6e6;
}
.faq-wrap .ui-accordion .ui-accordion-content .faqIcon { top: 2.2rem; }
.faq-wrap .ui-accordion .ui-accordion-content a { text-decoration: underline; color: rgb(74, 134, 232);  }




/*---------- faq ----------*/





/*---------- setting ----------*/

.setting-wrap { background-color: #fafbfc; padding: 4rem 0; }
.setting-wrap h3 { padding: 3rem 3rem 2rem; }
.setting-wrap h3 strong { display: block; font-weight: 500; font-size: 2rem; }
.setting-wrap h3 strong i { color: #3d60ce; }
.setting-wrap h3 span { font-size: 1.4rem; color: #bdbfc5; color: #f39800; font-weight: 400; display: block; padding-top: 1rem;}
.setting-wrap h3 span.warning { color: #f39800; padding-top: 0.2rem; }

.setting-wrap .maxWidth { 
	max-width: 75rem; background-color: #fff; border-radius: 0.5rem; padding: 0;
	border: 1px solid #e8ebee; box-shadow: 0 1px 1px 0 rgba(0,0,0,.03); 
}

.settingGroup { padding: 2rem 3rem; border-top: 1px dashed #dcdcdc; }
.settingGroup dt { font-weight: 500; color: #4d4d4d; padding: 0.5rem 0; font-size: 1.7rem; padding-bottom: 1rem; }
.settingGroup .customCheckbox { font-size: 1.5rem; }
.settingGroup .customCheckbox i { border-color: #ccc;  }
.settingGroup  .customCheckbox input[type="checkbox"]:checked ~ label i { border-color: #3d60ce; }
.settingCheck li { display: inline-block; padding-right: 2.5rem; }


.domainChange { position: relative; padding-right: 13rem; max-width: 41.5rem; }
.domainChange > .inner { width: 100%; font-size: 1.4rem; }
.domainBtn { position: absolute; right: 0; top: 0; width: 12rem; }


.zoneList { padding-bottom: 1rem; }
.zoneList li { display: inline-block; line-height: 2rem; padding-right: 0.5rem; }
.zoneList li span { padding-right: 2rem; display: inline-block; vertical-align: top; }
.zoneList li button { 
	background-color: #fff; width: 2.2rem; height: 2.2rem; line-height: 2rem; border-radius: 2rem; 
	display: inline-block; vertical-align: middle; border: 1px solid #dcdcdc;
}
.zoneList li button i { font-weight: 800; font-size: 1.1rem; color: #888; }
.zoneList .inner { padding: 0.5rem 1rem 0.5rem 1.5rem; background-color: #f2f3f5; font-size: 1.4rem; border-radius: 2rem;  }
.zoneGrid.grid_2 > ul { margin-left: -1rem; }
.zoneGrid.grid_2 > ul > li { padding-left: 1rem; }
.zoneGrid .customSelect { font-size: 1.4rem; }
.zoneAdd { width: 100%; margin-top: 1rem; }
.zoneAdd, .domainBtn { color: #3d60ce; font-size: 1.4rem; font-weight: 400; padding: 1rem 0.5rem 1rem; border: 1px solid #dcdcdc; border-radius: 0.3rem; } 
.zoneAdd i { font-weight: 800; }


.settingGroup input[type='text'] { background-color: #fff; border: 1px solid #dcdcdc; border-radius: 0.2rem; }

.settingBtn { padding: 2rem 2rem 3rem; border-top :1px solid #dcdcdc; }
.settingBtn .basicBtn { max-width: 32rem; margin: auto; }



.m-insertContainer-wrap { padding: 1.5rem; }
@media (min-width: 580px){ .m-insertContainer-wrap { padding: 5rem 2rem; } }

.m-insertContainer > .inner {  max-width: 58rem; margin: auto; border: 1px solid #e7e8ef; border-radius: 0.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.03); }

.m-insertContainer > .inner .insertLine { position: relative; padding: 5rem 4rem 4rem 2rem; }
.m-insertContainer > .inner .insertLine:before { content: ''; position: absolute; left: 4.5rem; top:0; width: 1px; height: 100%; background-color: #e7e8ef; z-index: -1; }

.m-insertContainer > .inner .insertTitle { margin-bottom: 4rem; position: relative; padding-left: 7rem; } 
.m-insertContainer > .inner .insertTitle strong { font-size: 2.4rem; font-weight: 600; word-spacing: -0.1rem; letter-spacing: -0.05rem; }
.m-insertContainer > .inner .insertTitle span { font-size: 1.6rem; font-weight: 500; padding-left: 0.8rem; color: #979fa6; }
.m-insertContainer > .inner .insertTitle i { font-size: 2.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 1px solid #ccc; line-height: 5rem; height: 5.2rem; width: 5.2rem; border-radius: 50%; background-color: #fff; }
.m-insertContainer > .inner .insertTitle p { font-size: 1.4rem; line-height: 130%; color: #9a9da6; word-break: keep-all; padding-top: 0.5rem;  }

.m-insertContainer > .inner dl + dl { margin-top: 3rem; }
.m-insertContainer > .inner dl > dt { position: relative; padding-left: 7rem; padding-bottom: 0.5rem; }
.m-insertContainer > .inner dl > dt:before { content: ''; position: absolute; left: 2.1rem; top: 45%; transform: translateY(-50%); width: 1rem; height: 1rem; background-color: #d6dadc; border-radius: 50%; }
.m-insertContainer > .inner dl > dt strong { font-weight: 500; font-size: 1.7rem; }
.m-insertContainer > .inner dl > dt span { padding-left: 0.5rem; font-weight: 400; font-size: 1.4rem; color: #979fa6; }

.m-insertContainer > .inner dl > dd { padding-left: 7rem; padding-top: 0.5rem;}
.m-insertContainer > .inner dl > dd .insertText { font-weight: 400; color: #5066aa; }
.m-insertContainer > .inner dl > dd > input { width: 100%; background-color: #fff; border: 1px solid #dcdcdc; font-size: 1.5rem; border-radius: 0.3rem; }
.m-insertContainer > .inner dl > dd > .warning { color: #f39800; font-size: 1.3rem; padding: 0.7rem 0.3rem 0; display: block; }
.m-insertContainer > .inner dl > dd + dd { margin-top: 0.5rem; }

.m-insertContainer > .inner .btnGroup { padding: 3rem 4rem; border-top: 1px solid #e7e8ef; background-color: #f7f9fa; }
.m-insertContainer > .inner .btnGroup .lineBtn { background-color: #fff; }

.agreeContainer { border-top: 1px solid #e7e8ef; padding: 2rem 0; }

.agreeContainer .checkBtn-line { padding: 0.5rem 4rem; font-size: 1.5rem; }
.agreeContainer .checkBtn-first { border-bottom: 1px dashed #e7e8ef; padding: 1rem 4rem 1.5rem; margin-bottom: 0.5rem; }
.agreeContainer .checkBtn-line .customCheckbox { cursor: default; }
.agreeContainer .checkBtn-line .checkBtn { position: relative; }
.agreeContainer .checkBtn-line .moreBtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.agreeContainer .checkBtn-line .moreBtn * { display: inline-block; vertical-align: middle; }
.agreeContainer .checkBtn-line .moreBtn span { font-weight: 500; color: #888; font-size: 1.3rem; line-height: 1.8rem; }
.agreeContainer .checkBtn-line .moreBtn i { font-size: 1.7rem; line-height: 1.8rem; color: #ccc; }
.agreeContainer .checkBtn-line .moreBtn:hover i { color: #3d60ce; }

.m-insertContainer > .inner dl > dd.domain-insert { font-size: 0; }
.m-insertContainer > .inner dl > dd.domain-insert input,
.m-insertContainer > .inner dl > dd.domain-insert strong { display: inline-block; vertical-align: middle; }
.m-insertContainer > .inner dl > dd.domain-insert input { width: calc(100% - 9.5rem); }
.m-insertContainer > .inner dl > dd.domain-insert strong { font-weight: 500; font-size: 1.7rem; color: #3d60ce; width: 9.5rem; padding-left: 0.5rem; }

.m-insertContainer > .inner dl > dd.cellPhone-insert { font-size: 0; }
.m-insertContainer > .inner dl > dd.cellPhone-insert * { display: inline-block; vertical-align: middle; }
.m-insertContainer > .inner dl > dd.cellPhone-insert span { font-size: 1.5rem; width: 2rem; text-align: center; }
.m-insertContainer > .inner dl > dd.cellPhone-insert .customSelect { width : calc(33.333% - 4rem); }
.m-insertContainer > .inner dl > dd.cellPhone-insert input { width: 33.333% }

.clause-wrap { max-width: 80rem; margin: auto; background-color: #fff; border-radius: 0.5rem; position: relative; }
.clause-wrap > .inner { padding: 4rem; }
.clause-wrap > .inner h2 { font-size: 2.3rem; font-weight: 500; padding: 0rem 0.5rem 2rem; border-bottom: 0.3rem double #ccc; }
.clause-wrap > .inner .clauseContainer { padding-top: 2rem; font-size: 1.4rem; }


/* serive(introduce) */

.topContainer-introduce { background-image: url("/style_www/img/custom/introduce/top_bg.jpg"); /* background: #3e40f6; */}
.topContainer-introduce  > .contentContainer > .inner { padding: 8rem 2rem 8rem; }
.introduceTop-text { text-align: center; max-width: 42rem; margin: auto;}
.introduceTop-text dd { color: #abf4d1;  font-size: 2.5rem; font-weight: 500; }
.introduceTop-text dt { color: #fff; font-size: 4rem; margin: 2rem 0 3rem; }
.introduceTop-text dt span { font-weight: 500; }
.introduceTop-img { max-width: 55rem; margin: auto; }

.introduceStep { padding: 8rem 1rem 9rem; }

.stepTitle { text-align: center; margin-bottom: 5rem; }
.stepTitle * { display: block; }
.stepTitle span { font-size: 1.6rem; font-weight: 400; color: #3d60ce; }
.stepTitle strong { font-size: 3em; font-weight: 500; }
.stepTitle em { font-size: 1.7rem; padding: 1.5rem 1rem 0; font-weight: 300; }

.step1_container .gridWarp > ul > li > .inner { 
	padding: 4rem 3rem 4rem 3rem; border: 1px solid #eff3f7;
    border-radius: 1rem; background-color: #f8fafc;
}

.step1_container .content { position: relative; }
.step1_container .content .icon { width: 12rem; margin: auto; padding-bottom: 3rem; }
.step1_container .content dt { font-size: 1.9rem; line-height: 2.6rem; font-weight: 500; word-break: keep-all; padding-bottom: 1.5rem; color: #333; }
.step1_container .content dd { font-size: 1.5rem; }
.step1_container .content dd li { 
	word-break: keep-all; padding-left: 1.8rem; background-image: url("/style_www/img/common/icon/dot_gray.png");
	background-position: left 0.8rem; background-size: 0.6rem; background-repeat: no-repeat;
}
.step1_container .content dd li + li { margin-top: 1rem; }


.step2 { background-color: #f8fafc; }

.step2_container { position: relative; }
.step2_container dl { padding: 0 1rem; text-align: center; max-width: 80rem; margin: auto;}
.step2_container dl dt { font-weight: 500; padding-bottom: 1rem; font-size: 2rem; word-break: keep-all; color: #16397a; line-height: 2.8rem;}
.step2_container dl dd { font-size: 1.4rem; }
.step2_container .planImg { max-width: 100%; width: 70rem; margin: 5rem auto 0; }

.step3_container { text-align: center; }
.step3_container > dl { padding: 0 1rem; }
.step3_container > dl > dt { word-break: keep-all; display: inline-block; font-weight: 2rem; background-color: #3d60ce; padding: 1rem 3rem; border-radius: 3rem; font-weight: 400; color: #fff;  }
.step3_container .qa dd { text-align: left; margin-top: 5rem; }
.step3_container .qa dd ul li { padding-bottom: 1.5rem; }
.step3_container .qa dd ul li + li { border-top: 1px solid #ededed; }
.step3_container .qa dd .inner { padding: 1rem 0; display: table-row; }
.step3_container .qa dd img { display: table-cell; width: 6.5rem; vertical-align: middle; }
.step3_container .qa dd span { display: table-cell; vertical-align: middle; padding-left: 3rem; }


.step3 .maxWidnt { padding: 0; }
.step3_container .divisionLine { height: 0.1rem; border-top: 1px dashed #dcdcdc; margin: 3rem 0 4rem; }

.step3_container .info { margin-top: 3rem; }
.step3_container .info > dt { background-color: #abf4d1; color: #555; }
.step3_container .info > dd { padding-top: 3rem;}
.step3_container .info > dd > .gridWarp > ul > li { padding-bottom: 1.5rem; }
.step3_container .info > dd > .gridWarp > ul > li + li { border-top: 1px solid #ededed; }
.step3_container .info > dd .inner { position: relative; text-align: left; padding-left: 7rem; }
.step3_container .info > dd .inner:before { 
	display: block; background-color: #0083cb; border-radius: 20rem; color: #fff; vertical-align: middle; text-align: center;
	width: 4rem; height: 4rem; line-height: 4rem; font-size: 2.2rem; font-weight: 500; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
}
.step3_container .info > dd .num_1:before { content: "1" }
.step3_container .info > dd .num_2:before { content: "2" }
.step3_container .info > dd .num_3:before { content: "3" }

.step3_container .info > dd .inner li { 
	padding-left: 1rem; background-image: url("/style_www/img/common/icon/dot_gray.png"); 
	background-repeat: no-repeat; background-size: 0.3rem; background-position: left 0.85rem;
}
.step3_container .info > dd .inner li + li { margin-top: 0.5rem; }
.step3_container .info > dd .inner dt { font-size: 1.6rem; font-weight: 400; padding-bottom: 0.8rem; color: #0083cb; } 


#go-top {
	font-size: 0; display: none; position: fixed; right: 2.4rem; bottom: 2rem;
	outline: 0; border: 0; background: transparent; cursor: pointer; z-index: 100;
	color: #444; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(0,0,0,.16);
	border-radius: 50%; width: 5rem; height: 5rem;
}

#wrap footer .maxWidth{ text-align: left; border-top: 1px solid #e8e8e8; padding: 3rem 3rem; }
#wrap footer dl {text-align: left; margin-bottom: 1rem; }
#wrap footer dl dt i { color: #999; margin-right: 0.3rem; }
#wrap footer dl dt { font-size: 1.8rem; color: #666; font-weight: 500; }
#wrap footer dl dd { color: #999; font-size: 1.3rem; }
#wrap footer p span{ font-size: 1.2rem; color: #999; display: block; }




/* landing */


#wrap.landingWrap { 
	background: -moz-linear-gradient(-45deg,  rgba(56,36,112,0.5) 0%, rgba(18,47,132,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(56,36,112,0.5) 0%,rgba(18,47,132,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(56,36,112,0.5) 0%,rgba(18,47,132,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80382470', endColorstr='#80122f84',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	overflow: hidden;
}
		
#wrap.landingWrap:before{
	content:"";
	width:100%; height:200%;
	position:absolute; top:-20%; left:0; z-index:-2;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0); backface-visibility: hidden;
	scale(1.0, 1.0);
	transform: translateZ(0);
	background:#1B2030 url(/style_www/img/custom/landing_bg.jpg) 50% 0 no-repeat;
	background-size: cover; background-attachment:fixed;
	animation: grow 120s  linear 5ms infinite;
	transition:all 0.4s ease-in-out;	 
}
		
@keyframes grow{
	0% { transform: scale(1) translateY(0px)}
	50% { transform: scale(1.5) translateY(-80px)}
	100% { transform: scale(1) translateY(0px)}
}



.landingContainer { max-width: 100%; width: 82rem; margin: auto; padding: 10rem 2rem; }
.landingLogo { display: block; width: 25rem; padding: 0 0 2rem 3.5rem; }

.landingContainer > ul { font-size: 0; }
.landingContainer > ul > li > .inner { 
	display: block; font-size: 2rem; padding: 3rem 0rem; text-align: center; 
	box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.2);
}

.landingContainer > ul > li.landingDemo { margin-top: 2rem; }
.landingContainer > ul > li.landingSupport > .inner { background-color: #3359c7; border-radius: 5rem 0.5rem 0.5rem 0.5rem; }
.landingContainer > ul > li.landingDemo > .inner { background-color: #633fc7; border-radius: 0.5rem 0.5rem 5rem 0.5rem; }

.landingContainer > ul > li.landingSupport em { color: #ffc600; }
.landingContainer > ul > li.landingDemo em { color: #eb6595 }

.landingContent dt * { font-size: 3.5rem; line-height: 4.2rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.05); }
.landingContent dt em { padding-left: 0.8rem; }
.landingContent dd.landingInfo { padding: 1rem 0 2rem; }
.landingContent dd.landingInfo * { font-size: 1.5rem; font-weight: 400; line-height: 2.2rem; }
.landingContent span { display: inline-block; color: #fff; }
.landingContent dd { padding: 0 4rem; }
.landingContent dd span { color: rgba(255,255,255,0.5); }
.landingContent dd strong { color: #fff; border-color: #fff; font-size: 1.5rem; }

/* .landingContainer > ul > li.landingSupport dd.landingInfo span { color: #0b1c4e; }
.landingContainer > ul > li.landingDemo dd.landingInfo span { color: #15073d } */


@media (min-height: 605px){
	.landingContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 2rem 15rem; }
}

#wrap footer.landingFooter { background-color: #3b4152;   }
#wrap footer.landingFooter .maxWidth { border: 0; }
#wrap footer.noneSide { left: 0 !important; }


.serviceWrap #wrap { min-width: 118rem; }
.serviceWrap .maxWidth { padding: 0 2rem; max-width: 128rem; min-width: 118rem; }
.serviceWrap header { height: 8rem; }
.serviceWrap header > .inner { 
	height: auto; text-align: right; height: 8rem; position: fixed; top: 0; width: 100%; z-index: 100; 
	background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12);
}
.serviceWrap header #headerLogo { display: block; position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); }
.serviceWrap header #headerLogo a { height: 5rem; margin: 0; background-image: url("/style_www/img/custom/service/logo_service.png"); background-size: auto 100%; }

.serviceWrap header nav { display: inline-block; padding: 2rem; vertical-align: middle; margin-right: 4rem; }
.serviceWrap header nav ul { font-size: 0; }
.serviceWrap header nav ul li { display: inline-block; }
.serviceWrap header nav ul li + li { padding-left: 5rem; }
.serviceWrap header nav ul li a { display: block; position: relative; }
.serviceWrap header nav ul li a.active:before { content: ''; display: block; height: 0.3rem; width: 100%; position: absolute; bottom: 0; left: 0; background: #3d60ce; }
.serviceWrap header nav ul li a span{ display: block; line-height: 4rem; font-size: 1.5rem; font-weight: 400; color: #222; }

.serviceWrap header #gnb { border: 1px solid rgba(0,0,0,0.3); overflow: hidden; border-radius: 0.3rem; position: static; display: inline-block; vertical-align: middle; transform: none; }
.serviceWrap header #gnb ul { overflow: hidden; font-size: 0; text-align: center; }
.serviceWrap header #gnb li { display: inline-block; font-size: 0; position: relative; }
.serviceWrap header #gnb li:nth-last-child(n + 2)::before { content: ''; position: absolute; right: 0; width: 1px; height: 50%; top: 25%; background-color: rgba(0,0,0,0.3); }
.serviceWrap header #gnb li a { color: #222; font-size: 1.3rem; font-weight: 300; display: block; height: 3.2rem; line-height: 3.2rem; padding: 0 1.5rem; }
.serviceWrap header #gnb li a i { position: relative; top: 1px; }
.serviceWrap header #gnb li button { color: #222; }

.serviceWrap header .myMenu { text-align: left; }

.service-quick { width: 12rem; position: absolute; right: -14rem; top: 1rem; }
.service-quick ul, .service-q { display: block; border-radius: 0.2rem; overflow: hidden; box-shadow: 6px 5px 15px 0 rgba(0,0,0,0.1); }
.service-q { margin-top: 1rem; }

.service-topSlide .serviceSwiper  { text-align: center; }
.service-topSlide .swiper-slide { background-color: #eee; background-size: auto 100%; background-repeat: no-repeat; background-position: center;}
.service-topSlide .swiper-slide.serviceBanner_1 { 
	background-color: #3d60ce; 
	background-image: url("/style_www/img/custom/service/banner_bg_1.jpg");
}
.service-topSlide .swiper-slide.serviceBanner_2 { 
	background-color: #fff; 
	background-image: url("/style_www/img/custom/service/banner_bg_2.jpg");
}



.service-topSlide, .serviceSwiper img.service-bannerImg { height: 67rem; }
.service-topSlide .maxWidth { width: 100%; overflow: hidden; }

.service-bannerText { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); text-align: left; }
.service-bannerText h3 { display: block; font-size: 1.8rem; font-weight: 400; color: #222; }
.service-bannerText h2 { display: block; font-size: 5.5rem; line-height: 6.5rem; letter-spacing: -0.3rem; font-weight: 700; margin-top: 2rem; color: #222; }
.service-bannerText a.lineBtn { 
	font-size: 1.7rem; text-align: left; margin-top: 4rem; line-height: 5rem;
	position: relative; border-color: #222; border-width: 2px; max-width: 22rem;
}
.service-bannerText a.lineBtn span { font-weight: 400; color: #222; }
.service-bannerText a.lineBtn i { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); color: #222; }

.serviceSwiper img.service-bannerImg { display: block; width: auto; float: right; }
.banner-text-shadow:after { position: absolute;
    content: ''; height: 50px; background-color: #e3ff63; width: 102%; left: 50%; bottom: 0; z-index: -1; 
    transform: translate(-50%, 0) skewX(-6deg);
}

.service-swiperNav { 
	display: inline-block; vertical-align: middle; font-size: 2rem; line-height: 2rem;     
	padding: 0 0.5rem;  position: relative; top: -5rem; z-index: 10; 
}
.service-swiperNav.service-pagination { width: 50rem; max-width: 60%; height: 2px; }

.serviceSwiper .swiper-pagination-bullet { 
	position: relative; width: 30%; display: inline-block; vertical-align: top; z-index: 1; 
	height: 2px; background: rgba(0, 0, 0, 0.3); border-radius: 0; margin: 0 1.5% !important; 
}
.serviceSwiper .swiper-pagination-bullet:after { position: absolute; top: 0; left: 0; background: #000; height: 100%; width: 0; content: ""; }
.serviceSwiper .swiper-pagination-bullet-active.active:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; }


.serviceSwiper.white .service-bannerText * { color: #fff; }
.serviceSwiper.white .service-bannerText a.lineBtn { border-color: #fff; }
.serviceSwiper.white .service-swiperNav * { color: #fff; }
.serviceSwiper.white .swiper-pagination-bullet { background-color: rgba(255,255,255,0.5); }
.serviceSwiper.white .swiper-pagination-bullet:after { background: #fff; }


.service-notice { background-color: #f5f5f5; }
.service-notice .inner { position: relative; padding: 3.5rem 0 3.5rem 10rem; }
.service-notice .inner dd { position: absolute; top: 3.5rem; left: 0; font-size: 2rem; font-weight: 500; color: #3d60ce; }
.service-notice a strong { font-size: 2rem; font-weight: 600; color: #222; }
.service-notice a font { font-size: 1.5rem; color: #07b53b; font-weight: 400; padding-top: 0.2rem; display: block; }
.service-notice a font span { font-weight: 400; }


.service-introduce > .maxWidth > .inner { padding: 15rem 0; }
.service-introduce > .maxWidth > .inner h1 { font-size: 3.5rem; line-height: 4.8rem; letter-spacing: -0.1rem; font-weight: 600; color: #222; }

.service-introduceText { position: relative; height: 42rem; }
.service-introduceText .inner { position:absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.service-introduceText h3 { display: block; color: #3d60ce; font-weight: 400; font-size: 1.6rem; }
.service-introduceText h2 { display: block; font-size: 3.5rem; line-height: 4.8rem; letter-spacing: -0.1rem; font-weight: 600; color: #222; padding: 1.5rem 0 2.5rem;}
.service-introduceText p { font-size: 1.8rem; line-height: 3rem; font-weight: 400; }
.service-introduceText a { margin-top: 2rem; display: block; }
.service-introduceText a * { color: #07b53b; font-weight: 400; font-size: 1.8rem; }

.service-introduce .swiper-slide .service-introduceText { background-repeat: no-repeat; background-size: auto 100%;  }
.service-introduce .swiper-slide .service-introduceText.introduce-left { background-position: right top; }
.service-introduce .swiper-slide .service-introduceText.introduce-right { background-position: left top; }
.serviceIntroduce_1 .service-introduceText { background-image: url("/style_www/img/custom/service/introduce_1.png"); }
.serviceIntroduce_2 .service-introduceText { background-image: url("/style_www/img/custom/service/introduce_2.png"); }


.service-introduce .inner .serviceSwiper-introduce { overflow: visible; }
.service-introduce .inner .serviceSwiper-introduce .swiper-wrapper { margin-top: 8rem; }
.service-introduce .inner .serviceSwiper-introduce .swiper-wrapper .swiper-slide { background-color: #fff; }
.swiper-pagination.introduce-swiperNav { position: static; text-align: left; padding-top: 6rem; }
.swiper-pagination.introduce-swiperNav .swiper-pagination-bullet { 
	width: auto; height: auto; border-radius: 0; position: relative; opacity: 1; background-color: #fff;
	font-size: 2rem; font-weight: 400; padding: 0.6rem 0.1rem; margin-right: 3rem; color: #222;
}
.swiper-pagination.introduce-swiperNav .swiper-pagination-bullet-active { font-weight: 500; }

.swiper-pagination.introduce-swiperNav .swiper-pagination-bullet:before {
	content: ''; display: block; background: #3d60ce; height: 3px; width: 0; 
	position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 0;
    transition: width .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-pagination.introduce-swiperNav .swiper-pagination-bullet-active:before {
    content: ''; display: block; background: #3d60ce; height: 3px; width: 100%;
    left: 50%; transform: translate(-50%, 0); bottom: 0;
    transition: width .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.introduce-right .inner { padding-left: 55%; }
.introduce-left .inner { padding-right: 55%; text-align: right; }

.introduce-button-prev, .introduce-button-next { font-size: 6rem; margin-top: 9rem; }
.introduce-button-prev { position: absolute; left: 0; top: 50%; transform: translate(-150%, -50%);}

.introduce-button-next { position: absolute; right: 0; top: 50%; transform: translate(150%, -50%); }





.service-bottom {
	padding: 12rem 0;
	background: -moz-linear-gradient(-45deg, rgba56,36,112,1) 0%, rgba(18,47,132,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(56,36,112,1) 0%,rgba(18,47,132,1) 100%);
    background: linear-gradient(135deg, rgba(56,36,112,1) 0%,rgba(18,47,132,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80382470', endColorstr='#80122f84',GradientType=1 );
}

.service-bottom h2 { 
	color: #fff; display: block; font-size: 3.8rem; line-height: 4.2rem;
	text-align: center; letter-spacing: -0.1rem; font-weight: 600;
}

.service-bottom ul { font-size: 0; max-width: 70rem; margin: 4.5rem auto 0; }
.service-bottom li { display: inline-block; width: 50%; padding: 0 1rem; }
.service-bottom li a { border-width: 2px; line-height: 6rem; font-size: 1.8rem; border-radius: 0.3rem; }
.service-bottom li a.basicBtn { background-color: #fff; border: 2px solid #fff; color: #122f84; }
.service-bottom li a.lineBtn { border-color: #fff; color: #fff; font-weight: 400; }
.service-bottom li a.lineBtn:hover { background-color: transparent; }

.serviceWrap #wrap footer { background-color: #343434; border-top: 1px solid #343434; }
.serviceWrap #wrap footer .maxWidth { border-top: 0; }





.service-subTop { 
	background-image: url("/style_www/img/custom/service/top_service.jpg"); 
	background-repeat: no-repeat; background-position: center; background-size: auto 100%;
	background-color: #345ed6; padding: 5.5rem 0;
}

.service-subTop h2 { color: #fff; font-weight: 500; font-size: 3.5rem; display: block;  line-height: 4.5rem;}
.service-subTop p { color: #fff; opacity: 0.4; font-weight: 400; font-size: 1.5rem; display: block; margin-top: 0.8rem; }

.secvice-subTitle { font-weight: 600; font-size: 3rem; padding-bottom: 2rem;  }
.service-contentTitle { font-weight: 500; font-size: 2rem; color: #222; }
.secvice-subInfo { font-size: 1.6rem; font-weight: 400; }

.service-fellog { padding: 10rem 0; text-align: center; }

.service-fellog .secvice-subTitle { color: #3d60ce; padding-bottom: 3rem; }
.service-fellog .secvice-subInfo { font-size: 2rem; font-weight: 400; padding-bottom: 3rem; }
.service-fellog ul li { padding: 0.5rem; }
.service-fellog ul li * { display: inline-block; vertical-align: middle; }
.service-fellog ul li i { font-size: 3rem; color: #07b53b; }
.service-fellog ul li span { font-size: 1.5rem; font-weight: 400; }
.service-fellog ul li em { font-weight: 500; color: #3d60ce; font-size: 1.8rem;}

.service-videoContainer { padding-top: 5rem; }
.service-videoContainer p { font-size: 1.4rem; padding-bottom: 2rem; }

.service-videoContainer .video { max-width: 80rem; }


.service-mobile { padding: 6rem 0 10rem; }
.service-appInfo { font-size: 0; }

.service-appImg, .service-appText { display: inline-block; width: 50%; vertical-align: middle; }
.service-appText { padding: 4rem 0 0 8rem; }
.service-appText .secvice-subInfo { padding-bottom: 5rem; }
.service-appText img { display: block; width: 80%; margin: auto; }


.service-appButton { padding-top: 3rem; }
.service-appButton ul > li { display: inline-block; width: 50%; }
.service-appButton ul > li:first-child { padding-right: 1.5rem; }
.service-appButton ul > li:last-child { padding-left: 1.5rem; }
.service-appButton dl { overflow: hidden; background-color: #f5f5f5; border-radius: 0.2rem; padding: 4rem; }
.service-appButton dt { font-size: 2.5rem; font-weight: 600; color: #222; float: left; line-height: 6rem; }
.service-appButton dd { float: right;  }
.service-appButton dd img { height: 6rem; display: inline-block; margin-right: 1rem; vertical-align: middle; }
.service-appButton dd a { 
	color: #fff; background-color: #3d60ce; font-size: 1.7rem; 
	font-weight: 400;line-height: 6rem; display: inline-block;  
	vertical-align: middle; width: 20rem; text-align: center; border-radius: 0.5rem;
}
.service-appButton dd a.coming { background-color: #aaa; }

.service-subNav { background: #f5f5f5; border-bottom: 1px solid #e5e5e5; }
.service-subNav li { display: inline-block; }
.service-subNav li + li { padding-left: 3.5rem; }
.service-subNav a { display: block; line-height: 6rem; height: 6rem; color: #222; position: relative;} 
.service-subNav a span { font-weight: 400; }
.service-subNav a.active span { color: #3d60ce; font-weight: 500; }
.service-subNav a.active:before { content: ''; display: block; height: 0.3rem; width: 100%; position: absolute; bottom: 0; left: 0; background: #3d60ce; }
#wrap.fixWrap header { height: 14rem; }
#wrap.fixWrap .service-subNav { position: fixed; top: 8rem; width: 100%; z-index: 99; }


.service-function section { font-size: 0; padding: 8rem 0; }
.service-function .secvice-subTitle { color: #3d60ce; }
.service-function .service-contentTitle { padding-bottom: 2rem; }
.service-function .secvice-subInfo { word-break: keep-all; }

.service-functionImg, .service-functionText { display: inline-block; width: 50%; vertical-align: middle; }
.service-functionText { padding: 0 0 0 4rem; }
.service-functionText .secvice-subInfo { padding-bottom: 2rem; color: #888; }
.service-functionText img { display: block; width: 80%; margin: auto; }

.service-function section:nth-child(2n) {
	background-color: #f5f5f5; text-align: right;
}

.service-function section:nth-child(2n) .service-functionText { padding: 0 4rem 0 0; }


.service-partner { padding: 8rem 0; text-align: center; }
.service-partner .secvice-subTitle { color: #3d60ce; padding-bottom: 5rem; }
.service-partnerList > ul > li > .inner { border: 1px solid #e5e5e5; border-radius: 0.8rem; overflow: hidden; }
.service-partnerList > ul > li > .inner a { padding-bottom: 40%; }
.service-partnerList > ul > li > .inner:hover { border-color: #345ed6; }