@charset "utf-8";
.samlwrap{box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box}

.saml wrap .quick_menu{display:none}
/*비주얼*/
#mainvisual{position:relative;width:100%;background:url('/_public/img/saml/mvisual.jpg') center center no-repeat;background-size:cover;z-index:-10;}
#mainvisual, #mainvisual .layout{min-height:910px;}
#mainvisual .mtxt{position:absolute;top:50%;left:5%;transform:translateY(-50%);padding-left:6.250rem;}
#mainvisual .mtxt strong{position:relative;display:block;font-size:3.375rem;color:#fff;font-weight:600}
#mainvisual .mtxt strong:before{content:"";position:absolute;top:23%;left:-100px;width:80px;height:3px;background:#2f9dea}
#mainvisual .mtxt strong > span{display:block;color:inherit;font-size:inherit;font-weight:inherit}
#mainvisual .mtxt p{font-size:1.5rem;color:#fff;margin-top:1.125rem;}

/*whysaml*/
#section{position:relative;width:100%;margin:7.5rem 0;display:inline-block;}
#section:after{content:"";clear:both;display:block}
#section.whysaml{margin-top:-9rem;}
#section.whysaml:after{content:"";position:absolute;background:#f8f8f8;z-index:-20;bottom:0;left:0;width:100%;height:450px}
.whysaml .area{position:relative;width:100%;max-width:1200px;max-height:350px;padding:6.250rem 5rem;z-index:10;}
.whysaml .stit1{display:block;font-weight:400;margin-bottom:1.250rem;font-size:3.375rem}
.whysaml .stit1 small{position:relative;font-size:5.563rem;font-weight:600;display:inline-block;color:#0050ae}
.whysaml .area.speedy{position:relative;width:48%;background:#0050ae;-webkit-transform:skew(0deg, -1deg);-o-transform-transform:skew(0deg, -1deg);transform:skew(0deg, -1deg);padding:3.688rem 5.125rem}
.whysaml .area.speedy strong, .whysaml .area.speedy p{-webkit-transform:skew(0deg, 1deg);-o-transform-transform:skew(0deg, 1deg);transform:skew(0deg, 1deg);}
.whysaml .area.speedy *, .networks .tarea{color:#fff}
.whysaml .area.accurate {margin-top:2.188rem;}
.whysaml .area.accurate:before{content:"why is saml";position:absolute;width:100%;left:78%;top:-7.313rem;font-family:'Poppins', sans-serif;text-transform:uppercase;color:#b1b1b1;opacity:0.25;font-size:5.313rem;font-weight:600;z-index:10}
.whysaml .area.logistics{margin-top:13.438rem;}
.whysaml .area.mutual{padding:6.250rem 5rem 6.250rem 50%;}
.whysaml .area .floimg{position:absolute}
.whysaml .area.accurate .floimg{top:-6.250rem;right:0;}
.whysaml .area.mutual .floimg{top:0.875rem;left:0;}
.whysaml .area.logistics .floimg{top:-215px;right:0;}

/*서비스*/
.service{position:relative;width:100%;min-height:775px;background:url('/_public/img/saml/ms4.jpg') center center no-repeat;background-size:cover}
.service:before{content:"";position:absolute;top:-4.5rem;right:-0.188rem;display:inline-block;width:60%;height:334px;background:#0050ae;z-index:1;-webkit-transform:skewX(-1deg);-o-transform-transform:skewX(-1deg);transform:skewX(-1deg)}
.service .tarea{position:relative;z-index:10}
.tarea h2{color:#fff;font-size:2.5rem;text-align:center;letter-spacing:0.12rem;font-weight:600;}
.service .tarea h2{margin:1.5rem 0 2.063rem;}
.service .layout{min-height:600px;background:#fff;padding:3.750rem 2.813rem;z-index:10}
.service li{float:left;width:50%;min-height:160px;padding:2.188rem 4.375rem 0 86px;border-top:1px dotted #dedede}
.service li:nth-child(-n+2){border-top:0}
.service li .txt2{display:block;margin-bottom:0.375rem;}
.service li.ser1{background:url('/_public/img/saml/ico1.svg') 0 center no-repeat;background-size:10%}
.service li.ser2{background:url('/_public/img/saml/ico2.svg') 0 center no-repeat;background-size:10%}
.service li.ser3{background:url('/_public/img/saml/ico3.svg') 0 center no-repeat;background-size:10%}
.service li.ser4{background:url('/_public/img/saml/ico4.svg') 0 center no-repeat;background-size:10%}
.service li.ser5{background:url('/_public/img/saml/ico5.svg') 0 center no-repeat;background-size:10%}
.service li.ser6{background:url('/_public/img/saml/ico6.svg') 0 center no-repeat;background-size:10%}

/*네트워크*/
.networks .tarea{position:relative;width:40%;max-width:600px;float:left;z-index:10;background:#0050ae;-webkit-transform:skew(1deg, 0deg);-o-transform-transform:skew(1deg, 0deg);transform:skew(1deg, 0deg);padding:65px 110px}
.networks .tarea h2, .networks .tarea .txt1{-webkit-transform:skew(-1deg, 0deg);-o-transform-transform:skew(-1deg, 0deg);transform:skew(-1deg, 0deg)}
.networks .tarea h2{margin-bottom:1.250rem}
.networks .mapwrap{width:90%;float:right;margin-top:-12.938rem;background:#f3f3f3;padding:2.5rem 0;}
.networks .mapwrap img{width:70%;float:right;margin-right:3.750rem;}
.networks .btnarea{margin-top:2.5rem;clear:both;}

/*footer*/
.samlwrap #mfooter{position:relative;border-top:1px solid #e1e1e1}

/*media query*/
@media all and (max-width:1600px) {
	.networks .tarea{padding:3.938rem 3.750rem;}
	.networks .mapwrap{padding:3.750rem 0;}
	.networks .mapwrap img{margin-right:2.5rem;}
}

@media all and (max-width:1400px) {
	.service .layout{width:90%;}
	.networks .tarea{width:60%}
	.networks .mapwrap{width:100%;float:none;margin-top:-3.125rem;display:inline-block;}
	.networks .mapwrap img{display:table;width:96%;float:none;margin-left:0;margin:0 auto}
}

@media all and (min-width:1200px) {
/* 	.samlwrap #header .logo{padding:0.875rem 0 0 0.875rem;} */
	.whysaml .area.accurate{padding:3rem 5rem 6.250rem 5rem}
}

@media all and (max-width:1199px) {
	.samlwrap #header{display:block !important}
	.menupack{float:right}
	.samlwrap .layout{width:96%;}

	/*whysaml*/
	#section.whysaml .layout{width:86%;}
	#section.whysaml:after{width:100%;}
	.whysaml .area{padding:4.375rem 1.875rem;}
	.whysaml .area.speedy{width:58%;}
	.whysaml .area.accurate{margin-top:0.625rem;}
	.whysaml .area.accurate .floimg{top:-22px;width:57%;}
	.whysaml .area.accurate:before{left:66%;font-size:4rem;top:-2.375rem}
	.whysaml .area.mutual{padding:6.250rem 1.250rem 6.250rem 60%}
	.whysaml .area.mutual .floimg{width:47%;}
	.whysaml .area.logistics .floimg{top:-9.625rem;width:56%}

	/*service*/
	.service{min-height:1200px}
	.service .layout{padding:0.438rem 2.813rem}
	.service:before{right:0;width:70%;}
	.service li{width:100%;float:none;padding:35px 4.375rem 0 8.750rem;}
	.service li:nth-child(2){border-top:1px dotted #dedede}
}

@media all and (max-width:1023px){
	#section.whysaml:before, .whysaml .area.speedy{width:100%;}
	.whysaml .area, .whysaml .area.mutual{padding:4.375rem 4.813rem}
	.whysaml .area.accurate, .whysaml .area.logistics{background:#f8f8f8;z-index:20}
	.whysaml .area.mutual *{color:#fff}
	.whysaml .area.mutual:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:-1}
	.whysaml .area.accurate .floimg, .whysaml .area.accurate:before, .whysaml .area.logistics .floimg, .whysaml .txt1 br{display:none}
	.whysaml .area.mutual .floimg{width:100%;z-index:-1;top:-7.5rem}
	.whysaml .area.mutual .floimg img{width:100%;max-height:450px;}
	.whysaml .area.logistics{margin-top:0}
}

@media all and (max-width:768px){
	/*mainvisual*/
	#mainvisual .mtxt strong{font-size:2.5rem}
	#mainvisual .mtxt p{font-size:1.250rem}

	/*whysaml*/
	.whysaml .area, .whysaml .area.speedy{padding:3.750rem 4.813rem}
	.whysaml .stit1{font-size:3.125rem}

	/*networks*/
	.networks .tarea{width:82%;}

}

@media all and (max-width:640px){
	/* .samlwrap #header .logo {max-width:100px} */
	#section{margin:2.5rem 0;}
	.tarea h2{font-size:1.875rem}

	/*mainvisual*/
	#mainvisual .mtxt strong:before{display:none}
	#mainvisual, #mainvisual .layout{min-height:680px}
	#mainvisual .mtxt{padding-left:1.250rem;top:45%}
	#mainvisual .mtxt strong{font-size:1.875rem}
	#mainvisual .mtxt p{font-size:1rem;line-height:1.45}

	/*whtsaml*/
	#section.whysaml:after{width:80%;left:50%;transform:translateX(-50%)}
	.whysaml .area.accurate{margin-top:-0.188rem}
	.whysaml .area, .whysaml .area.speedy, .whysaml .area.mutual{padding:2.625rem 1.875rem}
	.whysaml .stit1{font-size:1.875rem;margin-bottom:0.625rem}
	.whysaml .stit1 small{font-size:2.188rem;}

	/*service*/
	.service{min-height:1183px;background:none}
	.service .layout{width:100%;padding:0;background:#fff}
	.service:before{width:100%;top:0.25rem;-webkit-transform:skewX(0deg),-o-transform:skewX(0deg);transform:skewX(0deg);}
	.service .tarea h2{;margin:2.5rem 0 2.063rem;}
	.service li{padding:1.875rem 1.250rem}
	.service li.ser1, .service li.ser2, .service li.ser3, .service li.ser4, .service li.ser5, .service li.ser6, .service li.ser7, .service li.ser8, .service li.ser9{background:none}

	/*networks*/
	.networks .tarea{width:100%;padding:0;background:transparent}
	.networks .tarea h2{position:relative;color:#fff;padding:0.625rem 0;margin-bottom:0;}
	.networks .tarea h2:after{content:"";width:100%;height:110px;position:absolute;top:-2rem;left:0;background:#0050ae;z-index:-1}
	.networks .tarea .txt1{color:#333;margin:2.5rem 0 5.125rem;padding:0 1.5rem}
}

@media all and (max-width:640px){
	.networks .tarea{margin-top:3.125rem !important }
}