/*  폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body, ul, li, h1 {
    margin:0;
    padding:0;
    list-style:none;
}

a {
    color:inherit;
    text-decoration:none;
}

/* 라이브러리 */
.con {
    margin:0 auto;
}

.img-box > img {
    width:100%;
    display:block;
}

.row::after {
    content:"";
    display:block;
    clear:both;
}

.cell {
    float:left;
    box-sizing:border-box;
}

.cell-right {
    float:right;
    box-sizing:border-box;
}

.margin-0-auto {
    margin:0 auto;
}

.block {
    display:block;
}

.inline-block {
    display:inline-block;
}

.text-align-center {
    text-align:center;
}

.line-height-0-ch-only {
    line-height:0;
}

.line-height-0-ch-only > * {
    line-height:normal;
}

.relative {
    position:relative;
}

.absolute-left {
    position:absolute;
    left:0;
}

.absolute-right {
    position:absolute;
    right:0;
}

.absolute-middle {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.width-100p {
    width:100%;
}

.table {
    display:table;
}

.table-cell {
    display:table-cell;
}

.vertical-align-top {
    vertical-align:top;
}

.vertical-align-middle {
    vertical-align:middle;
}

.vertical-align-bottom {
    vertical-align:bottom;
}

/* 커스텀 */

html, body {
    overflow-x:hidden;
}

.con {
    max-width:1440px;
}

.page-5 .list-box > ul {
    margin:0 -12.5px;
}

.page-5 .list-box > ul > li {
    width:25%;
    padding: 0 12.5px;
    margin-top:20px;
}

@media ( max-width:750px ) {
    .page-5 .list-box > ul > li {
        width:50%;
    }
}

@media ( max-width:400px ) {
    .page-5 .list-box > ul > li {
        width:100%;
    }
}

.page-5 .list-box > ul > li > div {
    border:1px solid #000;
    padding-top:20px;
    padding-bottom:20px;
}

.page-5 .list-box > ul > li > div > .img-box {
    width:97px;
    margin:0 auto;
}

.page-5 .list-box > ul > li > div > .no-box {
    background-color:#003E73;
    width:40px;
    height:40px;
    margin:0 auto;
    margin-top:30px;
    position:relative;
    border-radius:50%;
}

.page-5 .list-box > ul > li > div > .no-box > span {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    color:white;
}

.page-5 .list-box > ul > li > div > h1 {
    color:#003E73;
    font-size:1.250rem;
    text-align:center;
    margin-top:30px;
}

.page-5 .list-box > ul > li > div > .des {
    margin-top:30px;
    color:#1E1E1E;
    line-height:1.9;
    padding-left:10px;
    padding-right:10px;
}

@media ( max-width:1440px ) {
    .page-5 .list-box > ul > li > div > .des > br {
        display:none;
    }
}

.page-5 .con {
    max-width:1440px;
}

console.clear();
HeightSync__nodes = {};

var HeightSync__windowWidth = $(window).width();

function HeightSync__init() {
    // 데이터를 모으는 작업, HeightSync__nodes 변수에 데이터를 채운다.
    $('.height-sync').each(function(index, node) {
        var $node = $(node);
        var groupNos = $node.attr('data-height-sync-group-no');
        
        groupNos = groupNos.split(',');
        
        for ( var i = 0; i < groupNos.length; i++ ) {
            var groupNo = groupNos[i];
            if ( groupNo.indexOf("up") == -1 ) {
                groupNo += "_0up";
            }

            if ( groupNo.indexOf("down") == -1 ) {
                groupNo += "_100000down";
            }

            if ( typeof HeightSync__nodes[groupNo] == 'undefined' ) {
                var bits = groupNo.replace('down', '');
                bits = groupNo.replace('up', '');
                bits = groupNo.split('_');
                var minWidth = parseInt(bits[1]);
                var maxWidth = parseInt(bits[2]);
                
                console.log(groupNo);
                
                HeightSync__nodes[groupNo] = {
                    minWidth:minWidth,
                    maxWidth:maxWidth,
                    nodes:[]
                };
            }

            HeightSync__nodes[groupNo].nodes.push($node);
        }
    });

    $(window).resize(Height_Sync__sync);
    Height_Sync__sync();
}

function Height_Sync__sync() {
    HeightSync__windowWidth = $(window).width();
    
    $('.height-sync').data('height-sync-group-no', 'N');
    
    for ( var key in HeightSync__nodes ) {
        var height = 0;
        var $tallNode = null;
        var tallNodeIndex = -1;
        
        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( $node.data('height-sync-group-no') != 'Y' ) {
                $node.css('height', '');
            }
        }
        
        if ( HeightSync__windowWidth < HeightSync__nodes[key].minWidth || HeightSync__windowWidth > HeightSync__nodes[key].maxWidth ) {
            continue;
        }
        
        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( $tallNode == null || $tallNode.height() < $node.height() ) {
                $tallNode = $node;
                tallNodeIndex = i;
            }
        }

        for ( var i = 0; i < HeightSync__nodes[key].nodes.length; i++ ) {
            var $node = HeightSync__nodes[key].nodes[i];
            if ( i != tallNodeIndex ) {
                $node.height($tallNode.height());
                $node.data('height-sync-group-no', 'Y');
            }
        }
    }
}

HeightSync__init();