@charset "utf-8";

/* 연혁 페이지 디자인 */
.page-contents table#history,
.page-contents table#history td,
.page-contents table#history th {border:none;}
.page-contents table#history th {
    color: #333;
    line-height: 1.4;
    text-align: left;
    width:432px;
    vertical-align: top;
    border-right:1px solid #e9e9eb;
    position:relative;
    padding:0 30px 50px 0;
}
.page-contents table#history th h1 {
    padding:0;
    margin:0;
    font-weight: 800;
    font-size:40px;
}
.page-contents table#history th h2 {
    margin-bottom:50px;
    font-weight: 400;
    font-size:16px;
    color:#666;
}
.page-contents table#history th:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    right: -13px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #4876f0;
    border-radius: 50%;
}
.page-contents table#history th:after {
    content: "";
    display: block;
    z-index: 3;
    position: absolute;
    top: 11px;
    right: -5px;
    width: 8px;
    height: 8px;
    background-color: #4876f0;
    border-radius: 50%;
}
.page-contents table#history th img,
.page-contents table#history th input[type="image"] {
    width: 300px !important;
    height: auto !important;
}

.page-contents table#history td {
    color:#333;
    font-weight: 400;
    position:relative;
    padding:0 0 80px 100px;
    font-size:20px;
}
.page-contents table#history td:before {
    content: "";
    display: block;
    z-index: 2;
    position: absolute;
    top: 11px;
    left: -5px;
    width: 8px;
    height: 8px;
    background-color: #e9e9eb;
    border-radius: 50%;
}
.page-contents table#history td strong {
    font-weight: 800;
}
.page-contents table#history td p {
    text-indent: -1.7em;
    margin-left: 1.7em;
}
.page-contents table#history td input[type="image"] {
    max-width: 100%;
}

/* 연혁 페이지 상단 탭 */
.page-contents table#history-nav,
.page-contents table#history-nav td {
    font-size:20px; font-weight: 400; color:#999;
    border:none;
    border-bottom:1px solid #d3d5da;
    text-align:center;
    cursor:pointer;
    padding:0 10px;
}
.page-contents table#history-nav td div.nav {
    display: inline-block;
    padding:10px 0;
    border-bottom:2px solid #fff;
}
.page-contents table#history-nav td.on div.nav {
    border-bottom:2px solid #4876f0;
    color:#4876f0;
}
.page-contents table#history-nav td:hover {color:#000;}
.page-contents table#history-nav.fixed {
    background: rgba(255, 255, 255, 0.9);
    position:fixed;
    width:1200px;
    top:58px;
    z-index: 10;
}

/* -----------------------------------------------------------------------------
    성과 페이지 디자인
*/
.page-contents table#achievement {
    border-collapse: separate;
    border-spacing: 20px;
    padding:0 20px;
}
.page-contents table#achievement,
.page-contents table#achievement td {
    font-size:18px; font-weight: 400; color:#666;
    border:none;
    text-align:center;
}
.page-contents table#achievement td {
    width:33%;
    padding:50px 0;
    background-color: #efefef;
}
.page-contents table#achievement td img {
    display:inline-block;
    margin-bottom:20px;
}




/*
-----------------------------------------------------------------------------
오시는길
-----------------------------------------------------------------------------
*/
.detail-way-to-come { border-top:1px solid #e8e8e8; padding:35px 0; font-size:18px; display:flex }
.detail-way-to-come:first-child { border-top:none }
.detail-way-to-come .title { min-width:140px; font-size: 20px; font-weight: 700; margin-right:20px !important; }
.detail-way-to-come .info { width:1000px; font-weight: 300 }
.detail-way-to-come .info ul li { font-size:18px !important; background:none !important; padding:0 !important; font-weight: 300 !important; }
.detail-way-to-come .info input { display:inline-block; width:150px; border:none; border-radius: 30px; padding: 5px 11px; font-size:.7em; color:#fff; background:#4876f0 }
.detail-way-to-come .info input[name='subway-line2'] { background:#28C432; }
.detail-way-to-come .info input[name='subway-line3'] { background:#BF9D43; }

/*
-----------------------------------------------------------------------------
수정안과 안전 시스템
-----------------------------------------------------------------------------
*/

#m2_s2_history {
    padding-top:110px;
    position:relative;
    background: repeat-y center 200px url("img/history-center-line.png");
    margin-bottom: 50px;
}
.page-contents .m2_s2_title h2 {
    color:#191919;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    margin-bottom:50px;
    padding-top:190px
}

#m2_s2_history:before {
    width:19px;
    height:19px;
    position:absolute;
    content: " ";
    display:block;
    top:0;
    left:50%;
    margin-left:-10px;
    background: no-repeat center top url("img/history-circle.png");
}
#m2_s2_history:after {
    content: "";
    display:block;
    clear:both;
}


#m2_s2_history .history-left {
    clear:right;
    text-align:right;
    width:609px;
    padding-right:88px;
    padding-bottom:100px;
    position:relative;
    background: no-repeat right 10px url("img/history-circle-left.png");
}

#m2_s2_history .history-left h3 {
    position:absolute;
    right: -280px;
    top: -70px;
    font-size:100px;
    color:#656565;

    opacity: 0;
    transform: translateX(100px);
    -webkit-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -moz-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -o-transition: transform 1s 0s ease, opacity 1s 0s ease;
    transition: transform 1s 0s ease, opacity 1s 0s ease;
}
#m2_s2_history .history-left.on h3 {
    transform: translateX(0);
    opacity: 1;
}
#m2_s2_history .history-left p {
    font-size:18px;
    color:#191919;
    margin-bottom: 15px;

    opacity: 0;
    transform: translateX(-100px);
    -webkit-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -moz-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -o-transition: transform 1s 0s ease, opacity 1s 0s ease;
    transition: transform 1s 0s ease, opacity 1s 0s ease;
}
#m2_s2_history .history-left.on p {
    opacity: 1;
    transform: translateX(0);
}
#m2_s2_history .history-left p strong {
    font-size:24px;
    font-weight: 900;
    color:#191919;
}

#m2_s2_history .history-right {
    float:right;
    text-align:left;
    width:610px;
    padding-left:88px;
    padding-bottom:100px;
    position:relative;
    background: no-repeat 0 10px url("img/history-circle-right.png");
}
#m2_s2_history .history-right:last-child {
    padding-bottom: 0;
    margin-bottom:-25px;
    background: no-repeat 0 11px url("img/history-circle-right.png");
}

#m2_s2_history .history-right h3 {
    position:absolute;
    left: -280px;
    top: -70px;
    font-size:100px;
    color:#656565;

    opacity: 0;
    transform: translateX(-100px);
    -webkit-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -moz-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -o-transition: transform 1s 0s ease, opacity 1s 0s ease;
    transition: transform 1s 0s ease, opacity 1s 0s ease;
}
#m2_s2_history .history-right.on h3 {
    transform: translateX(0);
    opacity: 1;
}

#m2_s2_history .history-right p {
    font-size:18px;
    color:#191919;
    margin-bottom: 15px;

    opacity: 0;
    transform: translateX(100px);
    -webkit-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -moz-transition: transform 1s 0s ease, opacity 1s 0s ease;
    -o-transition: transform 1s 0s ease, opacity 1s 0s ease;
    transition: transform 1s 0s ease, opacity 1s 0s ease;
}
#m2_s2_history .history-right.on p {
    opacity: 1;
    transform: translateX(0);
}

#m2_s2_history .history-right p strong {
    font-size:24px;
    font-weight: 900;
    color:#191919;
}

.page-contents.cke_editable #m2_s2_history .history-left p,
.page-contents.cke_editable #m2_s2_history .history-left h3,
.page-contents.cke_editable #m2_s2_history .history-right p,
.page-contents.cke_editable #m2_s2_history .history-right h3 {
    opacity: 1;
}

#m2_s3_3_2.section {
    height:900px;
    color:#fff;
    background: no-repeat center bottom url(img/m2_s3_3_2.png) #4876ef;
}

#m2_s3_3_2.section h2 {
    color:#fff;
    padding-top:130px;
}

#m2_s3_3_2.section .links {
    display:flex; justify-content: space-between; flex-wrap: wrap;
}
#m2_s3_3_2.section .links p {
    text-align: left;
    margin-left:80px;
    margin-right:300px;
    margin-bottom:115px;
}
#m2_s3_3_2.section .links p:nth-child(2),
#m2_s3_3_2.section .links p:nth-child(4) {
    text-align: right;
    margin-left:0;
    margin-right:150px;
}