@charset "utf-8";

@import url(../../css/base.css);
@import url(common.css);

/*--------------------------*/
/* visual */
/*--------------------------*/

#mn_visual {height:800px; margin-top:120px; padding-left:25px;}
#mn_visual > div {position:relative; overflow:hidden; height:100%; background:black; border-radius:25px 0 0 25px;}
#mn_visual p {position:absolute; left:100px; top:240px; z-index:9; text-align:left; color:white;}
#mn_visual p i {display:block; margin-left:10px; font-size:30px; font-style:italic;}
#mn_visual p span {font-family:"notoBold"; font-size:90px; line-height:1.4em;}
#mn_visual p em {font-size:110px;}
#mn_visual video {position:absolute; top:50%; left:50%; min-width:105%; min-height:105%; transform:translate(-50%,-50%); opacity:0.5;}

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

    #mn_visual {height:500px; margin-top:70px;}
    #mn_visual p {left:50px; top:120px;}
    #mn_visual p i {font-size:25px;}
    #mn_visual p span {font-size:60px;}
    #mn_visual p em {font-size:70px;}

}

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

    #mn_visual {height:300px; margin-top:60px; padding-left:15px;}
    #mn_visual > div {border-radius:15px 0 0 15px;}
    #mn_visual p {left:20px; top:80px;}
    #mn_visual p i {margin-left:0; font-size:20px;}
    #mn_visual p span {font-size:30px;}
    #mn_visual p em {font-size:40px;}

}

/*--------------------------*/
/* 건설기계부문 & 조선해양부문 */
/*--------------------------*/

/* 공통 */

#mn_erectionmarine {display:flex; flex-wrap:wrap;}
#mn_erectionmarine .info p:nth-child(1) {margin-bottom:20px; font-size:22px; color:#E22424;}
#mn_erectionmarine .info h2 {margin-bottom:30px; font-family:"notoBold"; font-size:60px;}
#mn_erectionmarine .info p:nth-child(3) {margin-bottom:40px; line-height:1.8em;}
#mn_erectionmarine .info p:nth-child(3) span {display:block;}
#mn_erectionmarine .info a {position:relative; display:inline-block; padding:10px 0;}
#mn_erectionmarine .info a:hover {color:#E22424;}
#mn_erectionmarine .info a span {display:inline-block; margin-left:50px;}
#mn_erectionmarine .info a::after {position:absolute; left:0; bottom:0; display:block; width:0; height:1px; content:""; background:#E22424; transition:width 0.2s ease;}
#mn_erectionmarine .info a:hover::after {width:100%;}

/* 건설기계부문 */

.mn_erection {padding:100px 25px 0; background:url("../../img/main/erectionBg.svg") 100% 0 / 12% auto no-repeat;}
.mn_erection .pic {width:50%; height:635px; background:url("../../img/main/erection.jpg") 50% 50% / cover no-repeat; border-radius:25px 25px 0 25px;}
.mn_erection .info {display:flex; flex-direction:column; justify-content:center; width:50%; padding-left:80px;}

/* 조선해양부문 */

.mn_marine {flex-direction:row-reverse; padding:0 25px 120px; background:url("../../img/main/marineBg.svg") 0 0 / 12% auto no-repeat;}
.mn_marine .pic {width:50%; height:635px; background:url("../../img/main/marine.jpg") 50% 50% / cover no-repeat; border-radius:0 25px 25px 25px;}
.mn_marine .info {display:flex; flex-direction:column; justify-content:center; width:50%; padding:0 40px 0 13%;}

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

    #mn_erectionmarine .info p:nth-child(3) span {display:none;}

}

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

    /* 공통 */
    #mn_erectionmarine .info p:nth-child(1) {margin-bottom:10px; font-size:18px;}
    #mn_erectionmarine .info h2 {margin-bottom:15px; font-size:40px;}
    #mn_erectionmarine .info p:nth-child(3) {margin-bottom:20px; font-size:15px; line-height:1.6em;}

    /* 건설기계부문 */
    .mn_erection {padding:60px 25px 0; background-position:100% -5vw; background-size:10% auto;}
    .mn_erection .pic {height:auto;}
    .mn_erection .info {padding:25px 0 25px 50px;}

    /* 조선해양부문 */
    .mn_marine {padding:0 25px 60px; background-position:0 -5vw; background-size:10% auto;}
    .mn_marine .pic {height:auto;}
    .mn_marine .info {padding:25px 30px 25px 8vw;}

}

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

    /* 공통 */
    #mn_erectionmarine .info p:nth-child(1) {margin-bottom:5px; font-size:15px;}
    #mn_erectionmarine .info h2 {margin-bottom:15px; font-size:35px;}
    #mn_erectionmarine .info p:nth-child(3) {margin-bottom:15px; font-size:15px;}
    #mn_erectionmarine .info a span {margin-left:25px;}

    /* 건설기계부문 */
    .mn_erection {padding:40px 15px 30px; background:url("../../img/main/erectionBg.svg") 100% 250px / 16% auto no-repeat;}
    .mn_erection .pic {width:100%; height:250px; margin-bottom:20px; border-radius:15px 15px 0 15px;}
    .mn_erection .info {width:100%; padding:0;}

    /* 조선해양부문 */
    .mn_marine {padding:0 15px 40px; background:url("../../img/main/marineBg_01.svg") 100% 220px / 16% auto no-repeat;}
    .mn_marine .pic {width:100%; height:250px; margin-bottom:20px; border-radius:15px 15px 0 15px;}
    .mn_marine .info {width:100%; padding:0;}

}

/*--------------------------*/
/* 홍보영상 & 채용안내 */
/*--------------------------*/

#mn_link {display:flex; flex-wrap:wrap;}
#mn_link a {width:50%; padding:80px 25px; text-align:center; color:white; background-position:50% 50%; background-size:100% auto; background-repeat:no-repeat; transition:background-size 0.5s ease;}
#mn_link a:nth-child(1) {background-image:url("../../img/main/promotion.jpg");}
#mn_link a:nth-child(2) {background-image:url("../../img/main/employment.jpg");}
#mn_link a:hover {background-size:120% auto;}
#mn_link h2 {margin-bottom:15px; font-family:"notoBold"; font-size:60px;}
#mn_link p {padding-bottom:130px; background:url("../../img/main/more.svg") 50% 100% no-repeat;}

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

    #mn_link a {padding:50px 25px;}
    #mn_link h2 {margin-bottom:5px; font-size:40px;}
    #mn_link p {padding-bottom:50px; font-size:15px; background-size:31px;}

}

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

    #mn_link a {width:100%; padding:40px 15px;}
    #mn_link h2 {margin-bottom:2px; font-size:35px;}
    #mn_link p {padding-bottom:40px; font-size:14px; background-size:26px;}

}