@charset "UTF-8";
.introduce {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
	}
 .introduce .left {
    max-width: 52%;
    word-break: keep-all;
    box-sizing: border-box;
    position: relative;
    margin-right: 8%;
}

 .introduce .left .intro {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 35px;
    padding-top: 20px;
    padding-bottom: 26px;
    box-sizing: border-box;
}
.introduce .left .intro .intImg {
    position: absolute;
}
.introduce .left .intro .intImg:first-child {
    left: 0;
    top: 0;
}
.introduce .left .intro .intImg:last-child {
    right: -20px;
    bottom: 12px;
}
.introduce .left .intro h4 {
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;letter-spacing:-0.023em;
}
.introduce .left .intro h4 span{
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;    font-family: "gmarket",sans-serif;
    font-weight: 600;text-align:left;display:block;margin-left:-10px;
}
.introduce .left .intro h4 span.bottom{
    font-size: 26px;
    font-weight: 600;
	margin-top:4px;
    line-height: 1.3;    font-family: "gmarket",sans-serif;
    font-weight: 400;text-align:left;display:block;
	padding-left:20px;letter-spacing:-0.023em;
}
.introduce .left p {
    font-size: 17px;
    line-height: 1.5;
    padding-left: 45px;letter-spacing:-0.023em;color:#444;
    text-align: left;
}

.introduce .left p strong{
   font-weight: 700;color:#111;
}


.introduce .left p {
    font-size: 17px;
    line-height: 1.5;
    padding-left: 45px;letter-spacing:-0.023em;
    text-align: left;
}
.introduce .left h4 span.btxt{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;  margin-top:24px;
    text-align:right;display:block;letter-spacing:-0.023em;
}

 .introduce .right  {
    max-width: 40%;
    float: right;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all .6s cubic-bezier(.71,.29,.27,.94);
    -webkit-transition: all .6s cubic-bezier(.71,.29,.27,.94);
}
.introduce .right  .img_box {
    position: relative;
    width: 100%;
	margin-top:40px;
}
.introduce .right .img_box img {
    max-width: 100%;
    width: 100%;
    display: block;border-radius: 0px 5px;
}

.introduce .right .img_box:before {
    z-index: -1;
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #F6F7FB;
    left: 0;
    top: 0;
    transition: all .6s .6s cubic-bezier(.71,.29,.27,.94);
    -webkit-transition: all .6s .6s cubic-bezier(.71,.29,.27,.94);border-radius: 5px 0px;
}
.introduce .right .img_box:before {
    left: -20px;
    top: -20px;
}

.introduce .right .img_box:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #00C092;
    right: 0;
    bottom: 0;
    transition: all .6s .6s cubic-bezier(.71,.29,.27,.94);
    -webkit-transition: all .6s .6s cubic-bezier(.71,.29,.27,.94);border-radius: 5px 0px;
}
.introduce .right .img_box:after {
    right: -20px;
    bottom: -20px;
}

.introduce .right.mo {
 display:none;
}




.introduce .right .img_box .nmo {
 display:none;
}


@media screen and (max-width: 820px){

.introduce {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.introduce .left {
    max-width: 100%;
    word-break: keep-all;
    box-sizing: border-box;
    position: relative;
    margin-right: 0%;
	display:block
}


.introduce .right.pc {
 display:none;
}



.introduce .right.mo {
    display: block;
    padding: 0 10px;
}

.introduce .right.mo {
    max-width: 100%;
    float: none;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all .6s cubic-bezier(.71,.29,.27,.94);
    -webkit-transition: all .6s cubic-bezier(.71,.29,.27,.94);
}
.introduce .right.mo .img_box {
    position: relative;
    width: 100%;
    margin-top: 0px;
}
.introduce .left .intro h4 span.bottom {
    font-size: 20px;
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.3;
    font-family: "gmarket",sans-serif;
    font-weight: 400;
    text-align: left;
    display: block;
    padding-left: 0px;
    letter-spacing: -0.023em;
}
.introduce .left .intro h4 span {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    font-family: "gmarket",sans-serif;
    font-weight: 600;
    text-align: left;
    display: block;
    margin-left: -10px;
}



.introduce .left p {
    font-size: 15px;
    line-height: 1.5;
    padding-left: 30px;
    letter-spacing: -0.023em;
    text-align: left;padding-top: 70px;
}
.introduce .left h4 span.btxt {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 24px;
    text-align: right;
    display: block;
    letter-spacing: -0.023em;padding-right: 30px;
}

.introduce .right .img_box .nmo {
 display:block;
}

.introduce .right .img_box .npc {
 display:none;
}

.introduce .right .img_box:before {
    left: -10px;
    top: -10px;
}
.introduce .right .img_box:after {
    right: -10px;
    bottom: -10px;
}
.introduce .right .img_box {
    position: relative;
    width: 100%;
    margin-top: 20px;
}
.introduce .left .intro .intImg:last-child {
    right: 10px;
    bottom:20px;
}
.introduce .left .intro {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 45px;
    padding-top: 20px;
    padding-bottom: 16px;
    box-sizing: border-box;
}
}


@media screen and (max-width: 768px){


.introduce .left p {
    font-size: 15px;
    line-height: 1.5;
    padding-left: 10px;
    letter-spacing: -0.023em;
    text-align: left;
}
.introduce .left h4 span.btxt {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 24px;
    text-align: right;
    display: block;
    letter-spacing: -0.023em;
    padding-right: 10px;
}
}
@media screen and (max-width: 560px){

.introduce .left .intro .intImg:last-child {
    right: 100px;
    bottom: 10px;
}

}