@charset "utf-8";

.con-intro .wrap-visual {
    width: 100%;
    height: 574px;
    background: url(../../images/market_intro/bg_visual.jpg) no-repeat top center;
}

.con-intro .row-visual {
    position: relative;
}

.con-intro .logo {
    text-align: center;
    padding: 35px 0 0 0;
    max-width: 160px;
    margin: 0 auto;
}

.con-intro .slogan {
    text-align: center;
    padding: 35px 0 0 0;
    max-width: 254px;
    margin: 0 auto;
}

.con-intro .logos {
    width: 100%;
    text-align: center;
    padding: 40px 0 0 0;
}

.con-intro .logos li {
    display: inline-block;
    padding: 0 10px;
    background: url(../../images/market_intro/line_wm.gif) no-repeat left center;
}

.con-intro .desc {
    font-size: 0.88rem;
    width: 65%;
    margin: 60px auto 40px auto;
    text-align: center;
}

.con-intro .diagram {
    position: relative;
    font-size: 0.88rem;
    height: 208px;
    background: url(../../images/market_intro/bg_diagram.png) no-repeat center 30px;
}

.con-intro .diagram p {
    height: 34px;
    line-height: 34px;
    background: #171717;
    color: #fff;
    padding: 0 0 0 20px;
}

.con-intro .diagram em {
    height: 34px;
    line-height: 34px;
}

.con-intro .diagram .point1,
.con-intro .diagram .point2,
.con-intro .diagram .point3,
.con-intro .diagram .point4 {
    width: 386px;
    position: absolute;
}

.con-intro .diagram .point1 {
    left: 60px;
    top: 0px;
}

.con-intro .diagram .point2 {
    right: 60px;
    top: 0px;
}

.con-intro .diagram .point3 {
    left: 60px;
    bottom: 15px;
}

.con-intro .diagram .point4 {
    right: 60px;
    bottom: 15px;
}

.con-intro .diagram .point1 em,
.con-intro .diagram .point3 em {
    float: right;
    background: url(../../images/market_intro/diagram_em1.gif) no-repeat left center;
    padding: 0 0 0 25px;
    width: 140px;
    box-sizing: border-box;
}

.con-intro .diagram .point2 em,
.con-intro .diagram .point4 em {
    float: left;
    background: url(../../images/market_intro/diagram_em2.gif) no-repeat right center;
    padding: 0 0 0 15px;
    width: 131px;
    box-sizing: border-box;
    margin: 0 20px 0 0;
    text-align: left;
}

.con-intro .diagram .point2 p,
.con-intro .diagram .point4 p {
    padding: 0 20px 0 0;
    text-align: right;
}

.con-intro .btn-box {
    text-align: center;
    margin: 40px 0 0 0;
}

.con-intro .btn-ltm {
    border: 1px solid #c00c0c;
    text-align: center;
    padding: 5px 30px;
    color: #c00c0c;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
}

.con-intro .bg {
    background: url(../../images/market_intro/bg_img_list.jpg) no-repeat center bottom;
    padding: 0 0 240px 0;
}

.con-intro .bg2 {
    background: url(../../images/market_intro/bg_movie.jpg) no-repeat center top;
}

.con-intro .movie {
    display: inline-block;
    width: 100%;
    padding: 80px 0 40px 0;
    /* background: url(../../images/market_intro/logo_movie.png) no-repeat left 90px; */
}

.con-intro .movie .list_logo {
    float: left;
}

.con-intro .movie .list_logo li {
    padding: 25px 0 0 0;
}

.con-intro .movie .youtube {
    float: right;
}

.con-intro .depart .tableWrap table th {
    font-size: 0.88rem;
}

.con-intro .depart .tableWrap table td {
    font-size: 0.88rem;
}

.con-intro #contents {
    margin-top: 0px;
    margin-bottom: 0px;
}

.con-intro .building {
    padding: 80px 0 310px 0;
    font-size: 0.88rem;
    background: url(../../images/market_intro/bg_building.jpg) no-repeat right 100px;
}

.con-intro .building h3 {
    color: #c00c0c;
    font-size: 1.5rem;
    margin: 0 0 5px 0;
}

.con-intro .building dl {
    clear: both;
    margin: 0 0 10px 0;
}

.con-intro .building dt,
.con-intro .building dd {
    float: left;
}

.con-intro .building dd {
    background: url(../../images/market_intro/line_building.gif) no-repeat left center;
    padding: 0 0 0 10px;
    margin: 0 0 0 10px;
}

/* ==========================================================================
   반응형 미디어 쿼리
   ========================================================================== */

/* ==========================================================================
   768px 이하
   ========================================================================== */

@media all and (max-width: 768px) {
    #_contentBuilder img {
        width: 100%;
        max-width: 100%;
    }

    .con-intro .logo {
        padding: 65px 0 0 0;
    }

    .con-intro .logos {
        display: none;
    }

    .con-intro .desc {
        width: 85%;
    }

    .con-intro .diagram .point1, .con-intro .diagram .point2, .con-intro .diagram .point3, .con-intro .diagram .point4 {
        position: static;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .con-intro .diagram {
        height: 198px;
        padding: 200px 0 0 0;
        background-position: center 0px;
    }

    .con-intro .movie {
        padding: 40px 0 0 0;
    }

    .con-intro .depart {
        position: relative;
        margin-top: 30px;
    }

    .con-intro .movie .list_logo, .con-intro .movie .youtube {
        float: none;
        margin: 0 0 30px 0;
        text-align: center;
    }

    .con-intro .movie .list_logo {
        border-top: 2px solid #c00c0c;
    }

    .con-intro .movie .list_logo li {
        padding: 20px 0;
        border-bottom: 1px solid #d1d1d1;
    }

    .con-intro .movie .list_logo li img {
        width:auto !important;
        height:45px;
    } 

    .con-intro .movie .list_logo li:last-child img {
        height:23px;
    }

  .con-intro .movie .youtube {
	position:relative;
	overflow:hidden;
	padding-bottom:56.25%
  }
    .con-intro .movie .youtube iframe {
	  position:absolute;
	  top:0;
	  left:0;
	  width: 100%;
      height: 100%;
    }

    .con-intro .depart {
        padding: 0;
    }

    .con-intro .building {
        padding: 50px 30px 260px 30px;
        margin: 0 0 50px 0;
        background: url(../../images/market_intro/bg_building.jpg) no-repeat center bottom;
        background-size: contain;
    }
    .con-intro .building dt, .con-intro .building dd {
        float: none;
    }
    .con-intro .building dd {
        background-image: none;
        padding: 0px;
        margin: 0px;
    }

}
