@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

/****************************************
| asset
****************************************/
:root{
	/* color asset */
	--base-color:#27C7A6;
	--text-color:#222728;
	--over-color:#ffffff;
	--border-color:#DEE6E8;
	/* width asset*/
	--xl-inner-width:1128px;
	--md-inner-width:94%;
	--sm-inner-width:calc(100% - 48px);
		color-scheme: light;
}


/****************************************
| common
****************************************/
body{
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	color:var(--text-color);
	background-color: #fff;
	font-size: 16px;
	line-height: 170%;
}
h2{
	font-size:30px;
	font-weight: 600;
	line-height: 170%;
	text-align: center;
}
img{
	display: block;
	width: 100%;
}
.-imageInline{
	display: inline;
	width: 24px;
	height: auto;
	transform: translateY(3px);
	margin-right: 10px;
}

section{
	width:100%;
	overflow: hidden;
}
.flex{
	display: flex;

}
.flexbetween{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexaround{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.flexstart{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.flexend{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.aligncenter{
	align-items: center;
}
.alignbottom{
	align-items: flex-end;
}
@media screen and (max-width:900px){

}
@media screen and (max-width:500px){
	body{
		font-size: 14px;
		line-height: 170%;
	}

}
/****************************************
| header
****************************************/
header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: var(--over-color);
	width: 100%;
}
.o-lpHeader{
	max-width: 1440px;
	margin: 0 auto;
	padding: 8px 24px;
}
header .logoArea picture:nth-child(1){
	width: 110px;
	margin-right: 8px;
	padding-right: 8px;
	border-right: solid 1px var(--border-color);
}
header .logoArea picture:nth-child(2){
	width: 200px;
}
header .menuArea{}
header .menuArea nav a{
	color: var(--text-color);
	text-decoration: none;
	margin-right: 24px;
}
header .menuArea nav a{
	color: var(--text-color);
	text-decoration: none;
	margin-right: 24px;
	font-weight: 600;
	transition: .3s;
}
header .menuArea nav a:hover{
	opacity: .75;
}
header .menuArea nav .color-btn a{
	margin: 0;
	background: var(--base-color);
	color: var(--over-color);
	padding: 12px 24px;
	border-radius: 32px;
	display: block;
	margin-left: 16px;
	font-size: 18px;
	transition: .3s;
}
header .menuArea nav .color-btn a:hover{
	background: rgba(39,199,166,.55);
	color: var(--over-color);
}
header .humberger-btn{
	display: none;
}
header .menuArea .humberger-menu{
		display: none;
}
@media screen and (max-width:1200px){
	header .o-lpHeader {
    padding: 8px 16px;
	}
	header .logoArea picture:nth-child(1){
		width: 80px
	}
	header .logoArea picture:nth-child(2) {
    width: 160px;
	}
	header .menuArea nav .color-btn a{
		font-size:16px;
    padding: 8px 16px;
    margin-left: 8px;
	}
	header .menuArea nav a{
		font-size: 14px;
    margin-right: 16px;
	}
}
@media screen and (max-width:900px){
	header{
		position: fixed;
		top: 0;
		left: 0;
    z-index: 999;
	}
	header .o-lpHeader {
    padding: 14px 24px;
		position: relative;
		z-index: 100;
		background: var(--over-color);
		width: 100vw;
	}
	header .logoArea picture:nth-child(1) {
    width: 110px;
	}
	header .logoArea picture:nth-child(2) {
    width: 200px;
	}
	header .humberger-btn{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 32px;
	}
	header .humberger-btn span{
		width: 100%;
    height: 3px;
    background: var(--base-color);
    border-radius: 3px;
		transition: .3s;
	}
	header .humberger-btn span:nth-child(2){
		margin: 8px 0;
	}
	header .humberger-btn.open span:nth-child(1){
		transform: rotate(-45deg);
    transform-origin: right top;
	}
	header .humberger-btn.open span:nth-child(2){
		transform-origin:center center;
		width: 0;
	}
	header .humberger-btn.open span:nth-child(3){
		transform: rotate(45deg);
    transform-origin: right bottom;
	}
	header .menuArea{
    position: fixed;
    top: 57px;
    right: -105%;
    width: 100vw;
    height: 100vh;
		z-index: 99;
		transition: .3s;
	}
	header .menuArea.open{
		right: 0;
    top: 57px;
	}
	header .menuArea .modal-bg{
		content: "";
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 57px;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transition: .3s;
    background: rgba(48, 80, 85, 0.5);
	}
	header .menuArea .modal-bg.open{
		visibility: visible;
		opacity: 1.0;

	}
	header .menuArea nav{
		height: 100%;
		width: 319px;
    margin: 0 0 0 auto;
		position: relative;
		z-index: 999;
    background-color: var(--base-color);
	}
	header .menuArea ul{
    flex-direction: column;
    position: relative;
    background-color: var(--base-color);
    align-items: flex-start;
    justify-content: flex-start;
		padding: 40px 16px 0;
	}
	header .menuArea ul li{
		width: 100%;
		border-bottom: 1px solid #6CDEC7;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}
	header .menuArea ul li.color-btn{
		border: none;
    margin-top: 24px;

	}
	header .menuArea ul li.color-btn a{
		font-size: 16px;
    padding: 8px 16px;
    margin-left: 8px;
    background: var(--over-color);
		color: var(--base-color);
	}

	header .menuArea nav a {
    font-size: 16px;
		color: var(--over-color);
		font-weight: 600;
	}
	header .menuArea .humberger-menu{
		display: block;
	}
	header .menuArea .humberger-menu a{
		font-size: 14px;
		font-weight: 300;
    flex-wrap: nowrap;
		margin-right: 0;
	}
	header .menuArea .humberger-menu a img{
		width: 18px;
	}
}
@media screen and (max-width:500px){
	header .logoArea picture:nth-child(1){
		width: 72px;
	}
	header .logoArea picture:nth-child(2){
		width: 154px;
	}
	header .humberger-btn{
		width: 21px;
	}
	header .humberger-btn span{
    height: 2px;
	}
	header .humberger-btn span:nth-child(2){
		margin: 5px 0;
	}
	header .menuArea.open{
		top: 48px;
	}
	header .menuArea .modal-bg{
		top: 48px;
	}
}
/****************************************
| Main Visual
****************************************/
#main{
	margin-top: 67px;
}
#main .o-mainWrapper{
	position:relative;
	width: 100%;
	padding-top:clamp(300px,35%,520px);
}
#main .o-mainWrapper::after{
	content:"";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("/solutions/atheer/asset/images/mv-layer.png") no-repeat left center;
	background-size: cover;
}
#main .o-mainWrapper::before{
	content:"";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("/solutions/atheer/asset/images/mv-img.jpg") no-repeat right center;
	background-size: contain;
}
#main .o-mainWrapper h1{
	position:absolute;
	top: 50%;
	left: 10%;
	color: var(--over-color);
	z-index: 2;
	font-family: 'Montserrat', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.6;
  transform: translateY(-50%);
}
#main .o-mainWrapper h1 .mainTitle.-textSmall{
	display: block;
	font-size: 28px;
}
#main .o-mainWrapper h1 .mainTitle.-textMedium{
	display: block;
	font-size: 35px;
	margin-bottom: 16px;
}
#main .o-mainWrapper h1 .mainTitle.-textLarge{
	font-size: 21px;
	margin-left: 8px;
}
@media screen and (max-width:1200px){
	#main{
		margin-top: 59px;
	}
	#main .o-mainWrapper h1{
		font-size: 48px;
		left: 6%;
	}
	#main .o-mainWrapper h1 .mainTitle.-textSmall{
		font-size: 24px;
	}
	#main .o-mainWrapper h1 .mainTitle.-textMedium{
		font-size: 32px;
    margin-bottom: 8px;
	}
	#main .o-mainWrapper h1 .mainTitle.-textLarge{
		font-size: 18px;
		margin-left: 6px;
	}
}
@media screen and (max-width:900px){
	#main{
		margin-top: 57px;
	}
	#main .o-mainWrapper h1 {
    left: 50%;
    top: auto;
    bottom: 8%;
    transform: translateX(-50%);
    width: 80%;
	}
	#main .o-mainWrapper{
		padding-top:88.3%;
	}
	#main .o-mainWrapper::after{
		background: url("/solutions/atheer/asset/images/mv-layer-sp.png") no-repeat center bottom;
		background-size: contain;
		bottom: 0;
		left: 0;
	}
	#main .o-mainWrapper::before{
		background: url(/solutions/atheer/asset/images/mv-img-sp.jpg) no-repeat center top;
    background-size: contain;
    top: 0;
    left: 0;
	}
}
@media screen and (max-width:769px){
	#main .o-mainWrapper h1 {
		bottom: 6%;
	}
}
@media screen and (max-width:500px){
	#main{
		margin-top: 48px;
	}
	#main .o-mainWrapper h1 {
    font-size: 36px;
    bottom: 12px;
    left: 20px;
    transform: unset;
    width: 100%;
	}
	#main .o-mainWrapper h1 .mainTitle.-textSmall,
	#main .o-mainWrapper h1 .mainTitle.-textMedium{
		font-size: 20px;
    margin-bottom: 0;
	}
	#main .o-mainWrapper h1 .mainTitle.-textLarge{
		font-size: 16px;
	}
}
@media screen and (max-width:380px){
	#main .o-mainWrapper h1 .mainTitle.-textSmall,
	#main .o-mainWrapper h1 .mainTitle.-textMedium{
		font-size: 18px;
	}
}
/****************************************
| about
****************************************/
#about{
	padding: 56px 0 80px;
}
#about h2{
	text-align: left;
}
#about .o-aboutWrapper{
	width: var(--xl-inner-width);
	margin: 0 auto;
}
#about .o-aboutWrapper picture{
	width: 40%;
}
#about .o-aboutWrapper .aboutText-area{
	width: calc(60% - 80px);
}
#about .o-aboutWrapper .aboutText-area h2{
	margin-bottom: 24px;
}
#about .o-aboutWrapper .aboutText-area h2 span{
	color: var(--base-color);
}
#about .-mdShow{
	display:none;
}
@media screen and (max-width:1200px){
	#about .o-aboutWrapper{
		width: var(--md-inner-width);
	}
	#about .o-aboutWrapper .aboutText-area{
    width: 56%;
	}
}
@media screen and (max-width:769px){
	#about {
    padding: 56px 0;
	}
	#about .-xlShow{
		display:none;
	}
	#about .o-aboutWrapper .-mdShow{
		display:block;
		width: min(500px,96%);
		margin: 0 auto 24px;
	}
	#about .o-aboutWrapper .aboutText-area{
		width: 100%;
	}
}
@media screen and (max-width:500px){
	#about {
    padding: 48px 0;
	}
	#about .o-aboutWrapper{
		width: var(--sm-inner-width);
	}
}
/****************************************
| concept
****************************************/
#concept{
	padding: 82px 0;
	position: relative;
}
#concept::after{
	content: "";
	display: block;
	width: 100%;
	height: 380px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--base-color);
	z-index: -1;
}
#concept h2{
	color: var(--over-color);
	position: relative;
	margin-bottom: 56px;
}
#concept h2::after{
	content:"";
	display: block;
	background: var(--over-color);
	width: 64px;
	height: 6px;
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
}
#concept h2::before{
	content:"Concept";
	color: var(--over-color);
	font-size: 72px;
	opacity: 0.15;
	position: absolute;
	left: 50%;
	top: -24px;
	transform: translateX(-50%);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}
#concept .o-conceptWrapper{
	width: var(--xl-inner-width);
	margin: 0 auto;
}
#concept .o-conceptItem{
	width: calc( calc(100% / 3) - 16px);
}
#concept h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: var(--over-color);
	text-align: center;
	font-size: 29px;
	line-height: 35px;
}
#concept h3 span{
	display: block;
	font-size: 18px;
	text-align: center;
	margin: 4px 0 16px;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height: 35px;
}
#concept .conceptItem img{
	border-radius: 8px;
	border: solid 1px var(--border-color);
	margin-bottom: 16px;
}
#concept .conceptItem h4{
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: solid 1px var(--border-color);
}
#concept .conceptItem ul{
	width: calc(50% - 8px);
}
#concept .conceptItem .conceptItem-list.-widthFull{
	width: 100%;
}
#concept .conceptItem li{
	position: relative;
  padding-left: 16px;
	margin-bottom: 4px;
}
#concept .conceptItem li::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--base-color);
	position: absolute;
	left: 0;
	top: 10px;
	transform: rotate(45deg);
}
@media screen and (max-width:1200px){
	#concept{
		padding: 72px 0 48px;
	}
	#concept .o-conceptWrapper {
    width: var(--md-inner-width);
	}
}
@media screen and (max-width:1000px){
	#concept{
		background: var(--base-color);
	}
	#concept::after{
		display: none;
	}
	#concept .o-conceptItem{
		width: calc( calc(100% / 2) - 16px);
    margin-bottom: 32px;
	}
	#concept h3 span{
		margin-bottom: 12px;
   margin-top: 0;
	}
	#concept .o-conceptItem img{
		width: calc(100% - 16px);
		margin: 0 auto 12px;
	}
	#concept .o-conceptItem h4{
		color: var(--over-color);
    margin-bottom: 12px;
    padding-bottom: 12px;
	}
	#concept .o-conceptItem li{
		color: var(--over-color);
    font-size: 14px;
	}
	#concept .o-conceptItem li::before{
		background: var(--over-color);
	}
}

@media screen and (max-width:769px){
	#concept{
		padding:64px 0 56px;
	}
	#concept .o-conceptWrapper {
    width: var(--sm-inner-width);
	}
	#concept .o-conceptItem{
		width: min(100%,500px);
		margin: 0 auto 32px;
	}
	#concept h3{
		line-height: 35px;
	}
	#concept h2::before{
		font-size: 68px;
	}
}
@media screen and (max-width:500px){
	#concept{
		padding:64px 0 40px;
	}
	#concept h2::before{
		font-size: 64px;
	}
}
/****************************************
| feature
****************************************/
#feature{
	padding: 80px 0;
}
#feature .o-featureWrapper{
	width: var(--xl-inner-width);
	margin: 0 auto;
}
#feature h2{
	position: relative;
	margin-bottom: 56px;
}
#feature h2::before{
	content:"Feature";
	color: var(--base-color);
	font-size: 72px;
	opacity: 0.15;
	position: absolute;
	left: 50%;
	top: -24px;
	transform: translateX(-50%);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}
#feature h2::after{
	content:"";
	display: block;
	background: var(--base-color);
	width: 64px;
	height: 6px;
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
}
#feature .featureItem{
	border: solid 3px var(--base-color);
	box-sizing: border-box;
	border-radius: 16px;
	padding: 36px;
	margin-bottom: 24px;
	position: relative;
}
#feature .-item01,
#feature .-item02{
	padding-left:76px;
}

#feature .-featureItem-text{
	width: calc( calc( 100% - calc(100% / 3)) - 32px);

}
#feature .-item03,
#feature .-item04{
	width: calc(50% - 12px);
}
#feature h3{
	font-size: 30px;
	margin-bottom: 24px;
	margin-top: 16px;
  line-height: 170%;
}
#feature h3 span{
	color: var(--base-color);
}
#feature .-item03 h3,
#feature .-item04 h3{
	padding-left: 40px;
}
#feature .featureItem-image{
	width: calc( 100% / 3);
}
#feature .-item03 .featureItem-image img{
	width: min(283px,100%);
	margin: 0 auto 34px;
	border-radius: 8px;
}
#feature .-item04 .featureItem-image img{
	width: min(410px,100%);
	margin: 0 auto 24px;
}
#feature .-item01::before{
	content: "01";
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 80px;
	line-height: 98px;
	color: var(--base-color);
	opacity: 0.15;
	position: absolute;
	top: 0;
	left: 28px;
}
#feature .-item02::before{
	content: "02";
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 80px;
	line-height: 98px;
	color: var(--base-color);
	opacity: 0.15;
	position: absolute;
	top: 0;
	left: 28px;
}
#feature .-item03::before{
	content: "03";
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 80px;
	line-height: 98px;
	color: var(--base-color);
	opacity: 0.15;
	position: absolute;
	top: 0;
	left: 28px;
}
#feature .-item04::before{
	content: "04";
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 80px;
	line-height: 98px;
	color: var(--base-color);
	opacity: 0.15;
	position: absolute;
	top: 0;
	left: 28px;
}
#feature .-item01 .movie-btn{
	display: block;
	width: min(744px,100%);
	margin: 32px auto 0;
	padding-top: min(180px,24.2%);
	background: url(/solutions/atheer/asset/images/feature-img02.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	border-radius: 8px;
	transition: .3s;
	opacity: 1;
	cursor: pointer;
}
#feature .-item01 .movie-btn:hover{
	opacity: .75;
}
#feature .-item03 .movie-btn{
	display: block;
	width: 100%;
	margin: 32px auto 0;
	padding-top: 38.3%;
	background: url(/solutions/atheer/asset/images/feature-img06.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	border-radius: 8px;
	opacity: 1;
	transition: .3s;
	cursor: pointer;
}
#feature .-item03 .movie-btn:hover{
	opacity: .75;
}
#feature .-item01 .movie-btn::before{
	content: '';
	display: block;
	width: 65px;
	height: 65px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(/solutions/atheer/asset/images/play-icon.png) no-repeat center center;
	background-size: contain;
}
#feature .-item03 .movie-btn::before{
	content: '';
	display: block;
	width: 65px;
	height: 65px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(/solutions/atheer/asset/images/play-icon.png) no-repeat center center;
	background-size: contain;
}
#feature .-item01 .movie-btn p{
	color: var(--over-color);
	font-weight: 600;
	position: absolute;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	font-size: 18px;
}
#feature .-item03 .movie-btn p{
	color: var(--over-color);
	font-weight: 600;
	position: absolute;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	font-size: 18px;
}
#feature .-item02 p{
	margin-bottom: 16px;
}
#feature .-item04 p{
	margin-bottom: 24px;
}
#feature .-item04 h4{
	line-height: 170%;
	font-size: 18px;
	margin-bottom: 8px;
  margin-top: 24px;
}
#feature .featureItem-color{
	background-color: #DEFAF4;
	border-radius: 16px;
	padding: 24px;
	margin-top: 32px;
}
#feature .featureItem-color p{}
#feature .featureItem-color img{}
#feature .-mdShow{
	display: none;
}
#feature .-item01 .movie-btn p br{
		display: none;
}
#feature .o-featureModalWrapper{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background: rgba(48, 80, 85, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: .3s;
}
#feature .o-featureModalWrapper.open{
	visibility: visible;
	opacity: 1;
}
#feature .o-featureModal{
	width: min(90%,900px);
	height: 0;
	transform: translate(-50%,0%);
	position: absolute;
	top: 25%;
	left: 50%;
}
#feature .modalItem{
	width: 100%;
	padding-top: 56.2%;
	position: relative;
}
#feature .modalItem::before{
	content:'';
	display: block;
	width: 32px;
	height: 3px;
  border-radius: 3px;
	background-color: var(--over-color);
	position: absolute;
	top: -24px;
	right: -16px;
	transform: rotate(45deg);
}
#feature .modalItem::after{
	content:'';
	display: block;
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background-color: var(--over-color);
	position: absolute;
	top: -24px;
	right: -16px;
	transform: rotate(-45deg);
}
#feature .o-featureModal .modalItem iframe{
	width: 0%;
	height: 0%;
}
#feature .open .o-featureModal .modalItem iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#feature .modalItem{
	visibility: hidden;
	opacity: 0;
	transition: .3s;
}
#feature .open .modalItem{
	visibility: visible;
	opacity: 1;
}
#feature .o-desktopWrap{
	border: 1px solid #DEE6E8;
	border-radius: 4px;
	padding: 8px;
	margin-bottom: 8px;
}
#feature .o-desktopWrap p{
	color: #687377;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}
#feature .o-desktopWrap span{
	margin-right: 8px;
}
#feature .o-smartdeviceWrap{}
#feature .o-smartdeviceWrap img{
	height: 40px;
	width: auto;
	margin:0 8px 8px 0;
}
@media screen and (max-width:1200px){
	#feature .o-featureWrapper {
    width: var(--md-inner-width);
	}
}
@media screen and (max-width:1000px){
	#feature {
    margin-top: 40px;
	}
}
@media screen and (max-width:900px){
	#feature .featureItem{
		padding: 32px;
	}
	#feature h3 {
    font-size: 28px;
    margin-bottom: 18px;
    margin-top: 8px;
	}
	#feature .featureItem::before{
		font-size: 64px;
	}
	#feature .-item01 > div{
		align-items: center;
	}
}

@media screen and (max-width:769px){
	#feature .-xlShow{
		display: none;
	}
	#feature .-mdShow{
		display: block;
	}
	#feature .-featureItem-text{
		width: 100%;
	}
	#feature .-item01 .featureItem-image {
    width: min(320px,92%);
		margin: 0 auto 24px;
	}
	#feature .-item01 .movie-btn{
		padding-top: 38.3%;
	}
	#feature .-item03, #feature .-item04{
		width:100%;
	}
	#feature .-item03 h3, #feature .-item04 h3{
		padding-left: 0;
	}
	#feature .-item03 .featureItem-image img{
		width: min(320px,92%);
	}
	#feature h2::before{
		font-size: 68px;
	}
	#feature .modalItem::after,
	#feature .modalItem::before{
		right: 12px;
		width: 24px;
	}
}

@media screen and (max-width:500px){
	#feature .o-featureWrapper {
    width: var(--sm-inner-width);
	}
	#feature h3{
		font-size: 21px;
		margin-top: 0;
	}
	#feature .featureItem{
		padding: 32px 16px 16px;
	}
	#feature .featureItem-color{
		padding: 16px;
	}
	#feature .featureItem::before{
		font-size: 50px;
    left: 12px;
    top: -18px;
	}
	#feature .-item04 h4{
		font-size:16px;
	}
	#feature .-item04 .featureItem-image.-mobile img{
		width: 100%;
	}
	#feature h2::before{
		font-size: 64px;
	}
	#feature .-item01 .movie-btn p,
	#feature .-item03 .movie-btn p{
		font-size: 16px;
	}
	#feature .-item01 .movie-btn::before,
	#feature .-item03 .movie-btn::before{
		width: 48px;
		height: 48px;
		top: 34%;
	}
	#feature .-item01 .movie-btn p br{
		display: block;
	}
	#feature .-item04 h4{
		margin-top: 16px;
	}
	#feature .o-desktopWrap p{
		margin-bottom: 4px;
	}
}
@media screen and (max-width:400px){
	#feature .-item01 .movie-btn,
	#feature .-item03 .movie-btn {
		padding-top: 52%;
	}
	#feature .-item01 .movie-btn p, #feature .-item03 .movie-btn p {
		font-size: 14px;
	}
	#feature .-item01 .movie-btn::before, #feature .-item03 .movie-btn::before{
		width: 40px;
		height: 40px;
	}
}
@media screen and (max-width:380px){
	#feature .o-smartdeviceWrap img{
		height: 32px;
	}
}
/****************************************
| contact
****************************************/
.o-contactWrapper{
	background-color: var(--base-color);
	text-align: center;
	padding: 38px 0;
	position:relative;
	overflow: hidden;
}
.o-contactWrapper::before{
	content:"";
	display: block;
	width: min(1195px,82%);
	background: url("/solutions/atheer/asset/images/contact-bg-text.png") no-repeat bottom right;
	background-size:contain;
	position: absolute;
	height: 100%;
	bottom: 0;
	right: -24px;
}
.o-contentWrapper-inner{
	position: relative;
	z-index: 2;
}

.o-contactWrapper h3{
	color: var(--over-color);
	text-align: center;
	margin-bottom: 16px;
	font-size: 24px;
	line-height: 170%;
}
.o-contactWrapper a{
	color: var(--base-color);
	background: var(--over-color);
	text-decoration: none;
	padding: 12px 128px;
	font-size: 18px;
	font-weight: 600;
	border-radius: 32px;
  display: inline-block;
	transition:.3s;
}
.o-contactWrapper a:hover{
	background: rgba(255,255,255,0.75);
}
@media screen and (max-width:769px){
	.o-contactWrapper{
		psdding:24px 0;
	}
	.o-contactWrapper h3{
		font-size: 21px;
	}
	.o-contactWrapper a {
		padding: 8px 80px;
    font-size: 16px;
	}
	.o-contactWrapper::before {
    right: 0;
    width: 94%;
	}
}

/****************************************
| case
****************************************/
#case{
	padding: 114px 0 0;
}
#case h2{
	position: relative;
	margin-bottom: 56px;
}
#case h2::before{
	content:"Cases";
	color: var(--base-color);
	font-size: 72px;
	opacity: 0.15;
	position: absolute;
	left: 50%;
	top: -24px;
	transform: translateX(-50%);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}
#case h2::after{
	content:"";
	display: block;
	background: var(--base-color);
	width: 64px;
	height: 6px;
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
}
#case .o-caseSlider{
	margin-bottom: 72px;
	padding-top: 64px;
	position: relative;
}
#case .slick-prev{
	top: -44px;
	left: auto;
	right: 124px;
	z-index: 5;
	width: 56px;
	height: 56px;
}
#case .slick-prev::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: solid 2px var(--base-color);
	border-radius: 80px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
#case .slick-prev::after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: solid 2px var(--base-color);
	border-left: solid 2px var(--base-color);
	transform: rotate(-45deg);
	position: absolute;
	top: 22px;
	right: 20px;
}
#case .slick-next{
	top: -44px;
	left: auto;
	right: 52px;
	z-index: 5;
	width: 56px;
	height: 56px;
}
#case .slick-next::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: solid 2px var(--base-color);
	border-radius: 80px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
#case .slick-next::after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-bottom: solid 2px var(--base-color);
	border-right: solid 2px var(--base-color);
	transform: rotate(-45deg);
	position: absolute;
	top: 22px;
	right: 24px;
}
#case .caseSlider-num{
	position: absolute;
	color: #687377;
	font-size: 16px;
	top: 8px;
	right: 200px;
}
#case .sliderItem{
	width: 940px;
	margin: 0 12px;
	border: solid 1px #DEE6E8;
	border-radius: 8px;
	overflow: hidden;
}
#case .caseItem-up{
	padding: 24px 24px 0;
  margin-bottom: 24px;
}
#case .caseItem-up .caseItem-image{
	width: calc(30% - 16px);
}
#case .caseItem-up .-sliderItem-text{
	width: calc(70% - 16px);
}
#case .caseItem-up .-sliderItem-text h3{
	font-size: 24px;
	color: var(--base-color);
	margin-bottom: 8px;
	line-height: 170%;
}
#case .caseItem-up .-sliderItem-text p{
	font-weight: 600;
	font-size: 18px;
	line-height: 170%;
}
#case .caseItem-up .-sliderItem-text p:last-of-type{
	margin-bottom: 8px;
}
#case .caseItem-up .-sliderItem-text span{
	font-weight: 600;
	padding: 4px 0 4px 16px;
	color: #687377;
	border-left: solid 2px var(--base-color);
}
#case .caseItem-down{
	background: #F5F8FA;
}

#case .caseItem-before{
	width: calc(50% - 24px);
	padding: 16px 24px;
}
#case .caseItem-before li{
	padding-left: 16px;
	margin-bottom: 4px;
	position: relative;
}
#case .caseItem-before li::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: #B2BEC2;
	position: absolute;
	left: 0;
	top: 10px;
	transform: rotate(45deg);
}
#case .caseItem-before h4{
	color: #687377;
	font-size: 18px;
	margin-bottom: 8px;
  line-height: 170%;
}
#case .caseItem-middle{
	width: 48px;
	position:relative;
	overflow: hidden;
}
#case .caseItem-middle::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #DEFAF4;
	position: absolute;
	top: 0;
	left: 100%;
	transform: skew(-12deg, 0deg) translateX(-50%);
}
#case .caseItem-middle::after{
	content: "";
	display: block;
	width: 29px;
	height: 55px;
	background: url("/solutions/atheer/asset/images/arrow-icon.png") no-repeat center center;
	background-size: contain;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#case .caseItem-after{
	width: calc(50% - 24px);
	background: #DEFAF4;
	padding: 16px 24px;
}
#case .caseItem-after h4{
	color: #14876F;
	font-size: 18px;
	margin-bottom: 8px;
	line-height: 170%;
}
#case .caseItem-after li{
	padding-left: 16px;
	margin-bottom: 4px;
	position: relative;
}
#case .caseItem-after li::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--base-color);
	position: absolute;
	left: 0;
	top: 10px;
	transform: rotate(45deg);
}
#case .-text-weight{
	text-align: center;
	font-weight: 600;
	font-size: 30px;
	line-height: 170%;
	margin-bottom: 24px;
}
#case .-smShow{
	display:none;
}
@media screen and (max-width:1200px){
	#case .sliderItem {
    width: 820px;
	}
	#case .-text-weight{
		font-size: 24px;
	}
}
@media screen and (max-width:900px){
	#case .o-caseSlider{
		padding-left: 16px;
	}
	#case .sliderItem {
    width: 700px;
	}
	#case .caseItem-middle::before{
		transform: skew(-4deg, 0deg) translateX(-50%);
	}
	#case .caseItem-up .-sliderItem-text h3{
		font-size: 21px;
	}
	#case .caseItem-up .-sliderItem-text p{
		font-size: 17px;
	}
	#case .caseItem-up .-sliderItem-text span{
		font-size: 14px;
	}
}
@media screen and (max-width:769px){
	#case .sliderItem {
    width: 560px;
	}
	#case .caseItem-up{
		padding: 16px;
	}
	#case .caseItem-up .caseItem-image {
    width: calc(33% - 8px);
	}
	#case .caseItem-up .-sliderItem-text {
    width: 100%;
	}
	#case .caseItem-up .caseItem-image {
    width: min(100%,340px);
    margin: 0 auto 16px;
	}
	#case .-sliderItem-text {
    width: calc(67% - 8px);
	}
	#case .caseItem-middle::before{
		display: none;
	}
	#case .caseItem-middle::after{
		transform: translate(-50%,-50%) rotate(90deg);
	}
	#case .caseItem-before{
		width: 100%;
	}
	#case .caseItem-middle{
		width: 100%;
    overflow: unset;
	}
	#case .caseItem-after{
		width: 100%;
    padding: 16px;
	}
	#case .-smShow{
		display:block;
	}
	#case .-xlShow{
		display:none;
	}
	#case .caseItem-before h4{
		font-size: 16px;
	}
	#case .o-caseSlider{
		margin-bottom: 56px;
	}
	#case .slick-next,
	#case .slick-prev{
		width: 48px;
		height: 48px;
    top: -40px;
	}
	#case .slick-next{
		right: 24px;
	}
	#case .slick-prev{
		right: 88px;
	}
	#case .caseSlider-num{
    top: 12px;
    right: 150px;
	}
	#case .slick-next::after{
		top: 18px;
    right: 20px;
	}
	#case .slick-prev::after{
		top: 18px;
    right: 16px;
	}
	#case h2::before{
		font-size: 68px;
	}
}
@media screen and (max-width:620px){
	#case .sliderItem {
    width: 480px;
	}
	#case .caseItem-up .-sliderItem-text h3 {
    font-size: 18px;
	}
	#case .caseItem-up .-sliderItem-text p {
    font-size: 16px;
	}
	#case .o-caseSlider{
		margin-bottom: 40px;
	}
}
@media screen and (max-width:540px){
	#case .sliderItem {
    width: 360px;
		margin: 0 8px;
	}
	#case .caseItem-up .caseItem-image{
		margin-bottom:8px;
	}
	#case .-text-weight {
    font-size: 21px;
    padding: 0 24px;
		margin-bottom: 18px;
	}
	#case .o-caseSlider{
		margin-bottom: 24px;
	}
	#case .slick-next {
    right: 16px;
	}
	#case .slick-prev{
		right: 72px;
	}
	#case .caseSlider-num{
		right: 132px;
	}
}
@media screen and (max-width:480px){
	#case .sliderItem {
    width: 300px;
	}
	#case .caseItem-up{
		margin-bottom: 0;
	}
	#case h2::before{
		font-size: 64px;
	}
}
@media screen and (max-width:340px){
	#case .sliderItem {
    width: 280px;
	}
	#case .-text-weight {
		font-size: 18px;
	}
}

/****************************************
| information
****************************************/
#information{
	padding: 80px 0;
}
#information .o-informationWrapper{
	width: 1128px;
	border: solid 3px #005CCA;
	border-radius: 8px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
  padding: 32px 0;
}
#information .o-informationWrapper::before{
	content:"";
	display: block;
	width: 48px;
	height: 32px;
	background: #E70000;
	position: absolute;
	top: -14px;
	left: -18px;
	transform: rotate(-45deg);
}
#information h3{
	padding-left: 40px;
	color: #005CCA;
	line-height: 170%;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 32px;
	text-align: center;
}
#information .informationSliderItem{
	width: 300px;
	min-height: 360px;
	margin: 0 12px;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--text-color);
	transition: .3s;
}
#information .informationSliderItem:hover{
	box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
}
#information .informationSliderItem img{
	margin-bottom: 16px;
}
#information .informationSliderItem h4{
	font-size: 16px;
	font-weight: 600;
	line-height: 170%;
  padding: 0 16px;
}
#information .informationSliderItem:hover h4{
	color: #005CCA;
}
#information .informationSliderItem .informationArea{
	padding: 16px;
	border-top: 1px solid #DEE6E8;
  margin-top: auto;
}
#information .informationSliderItem .informationArea time{
	font-size: 14px;
	color: #687377;
}
#information .informationSliderItem .informationArea p{
	color: #005CCA;
}
#information .informationSliderItem .informationItem-image{
	background-size: 104% !important;
	width: 100%;
	padding-top: 56.3%;
	margin-bottom: 16px;
	transition: .3s;
}
#information .informationSliderItem:hover .informationItem-image{
	background-size: 114% !important;
}
#information .slick-prev{
	top: auto;
	bottom: 372px;
	left: auto;
	right: 124px;
	z-index: 5;
	width: 56px;
	height: 56px;
}
#information .slick-prev::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: solid 2px #005CCA;
	border-radius: 80px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
#information .slick-prev::after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: solid 2px #005CCA;
	border-left: solid 2px #005CCA;
	transform: rotate(-45deg);
	position: absolute;
	top: 22px;
	right: 20px;
}
#information .slick-next{
	top: auto;
	bottom: 372px;
	left: auto;
	right: 52px;
	z-index: 5;
	width: 56px;
	height: 56px;
}
#information .slick-next::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: solid 2px #005CCA;
	border-radius: 80px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
#information .slick-next::after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-bottom: solid 2px #005CCA;
	border-right: solid 2px #005CCA;
	transform: rotate(-45deg);
	position: absolute;
	top: 22px;
	right: 24px;
}
#information .informationSlider-num{
	position: absolute;
	color: #005CCA;
	font-size: 16px;
	bottom: 444px;
	right: 200px;
}
#information .informationSliderItem .-imgInline-detail{
	display: inline;
	width: 18px;
	height: auto;
	transform: translateY(3px);
	margin: 0 0 0 4px;
}
#information .o-informationImage{}
#information .o-informationImage img{
	width: min(320px,90%);
	margin: 0 auto 16px;
}
#information .informationSlider-num{
	bottom: 444px;
}
@media screen and (max-width:1200px){
	#information .o-informationWrapper{
		width: var(--md-inner-width);
	}
	#information h3{
		margin-bottom: 96px;
	}
	#information .informationSlider-num{
		bottom: 432px;
	}
	#information .slick-prev,
	#information .slick-next{
		 bottom: 360px;
	}
}
@media screen and (max-width:900px){
	#information h3{
		font-size: 18px;
    width: 100%;
    margin-bottom: 80px;
		padding: 0 20px;
	}
	#information .informationSlider-num {
    bottom: 430px;
	}
}
@media screen and (max-width:769px){
	#information .slick-next,
	#information .slick-prev{
		width: 48px;
		height: 48px;
    top: -40px;
	}
	#information .slick-next{
		right: 24px;
	}
	#information .slick-prev{
		right: 88px;
	}
	#information .informationSlider-num{
    bottom: 425px;
    right: 150px;
	}
	#information .slick-next::after{
		top: 18px;
    right: 20px;
	}
	#information .slick-prev::after{
		top: 18px;
    right: 16px;
	}
}
@media screen and (max-width:600px){
	#information h3 br{
		display: none;
	}
}
@media screen and (max-width:500px){
	#information .o-informationWrapper{
		padding: 16px 0;

	}
	#information h3{
		font-size: 16px;
    padding: 0 16px;
    width: auto;
	}
	#information .informationSliderItem{
		width: 280px;
    margin: 0 0px 4px 8px;
    min-height: 320px;
	}
	#information .slick-list{
		padding-left: 8px;
	}
	#information .informationSlider-num {
    bottom: 366px;
	}
}
@media screen and (max-width:340px){
	#information .informationSliderItem{
		width: 270px;
	}
}

/****************************************
| footer
****************************************/
#footer{
	padding: 24px 0 0;
}
#footer .o-footerWrapper{
	width: var(--xl-inner-width);
	margin: 0 auto;
}
#footer picture{
	width: 110px;
  margin-left: 8px;
}
#footer p{
	color: #687377;
	font-size: 12px;
}
#footer .footerLink-area{}
#footer .footerLink-area a{
	color: var(--base-color);
	font-size: 14px;
	margin-left: 16px;
	text-decoration: underline;
}
#footer .-imgInline-detail{
	display: inline;
	width: 14px;
	margin: 0 0 0 4px;
	transform: translateY(3px);
}
#footer .-footerText{
	text-align: center;
	padding: 10px 0;
	border-top: 1px solid #DEE6E8;
	margin-top: 16px;
}

@media screen and (max-width:1200px){
	#footer .o-footerWrapper{
		width: var(--md-inner-width);
	}
}
@media screen and (max-width:769px){
	#footer {
    padding: 24px 0 16px;
	}
	#footer picture{
		width: 130px;
		margin: 0 auto 8px;
	}
	#footer .footerLink-area{
		width: 100%;
	}
	#footer .footerLink-area ul{
		flex-direction: column;
    align-items: flex-start;
	}
	#footer .footerLink-area ul li{
		margin-top: 16px;
	}
	#footer .footerLink-area a{
		margin: 0;
	}
	#footer .-footerText{
		width: 100%;
		padding: 16px 0 0;
		text-align: left;
	}
	#footer .-footerText p:nth-child(1){
		padding-bottom: 8px;
	}
	#footer .-footerText p:nth-child(2){
	}
}