@charset "utf-8";

/* nanum myeongjo */
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);

@font-face{
 font-family:'Daum';
 font-style:normal;
 font-weight:400;
 src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff2') format('woff2'),
     url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff') format('woff');
}
@font-face{
 font-family:'Daum';
 font-style:normal;
 font-weight:700;
 src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff2') format('woff2'),
     url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff') format('woff');
}


/* *******************************************************************
	main page style
******************************************************************* */

/* 
	1. container style
*/
#container {
	
}
	
	/* main-spot */
	#container .main-spot {
		position: relative;
        width: 100%;
		height: 320px;
        margin: 0 0 35px;
        border-bottom: 1px solid #eee;
        background: #fafafa url(/Images/pattern/pattern_main_spot.png) left top;
	}
        #container .main-spot .innerWrap {
            position: relative;
            width: 960px;
		    height: 320px;
            margin: 0 auto;
            background: url(/Images/main/spot_main.png) left bottom no-repeat;
        }
            #container .main-spot .innerWrap .kbcc-logo {
                position: absolute;
                right: 0;
                bottom: 20px;
                display: block;
                width: 240px;
                height: 40px;
                background: url(/images/main/kbc_spot_ci.png) left top no-repeat;
                animation-delay: 3.8s;
            }

            /*
            .main-shape {
                position: relative;
                width: 960px;
                height: 357px;
                margin: 0 auto;
                overflow: hidden;
            }
                .main-shape span {
                    position: absolute;
                    display: block;
                    margin: 0;
                    padding: 0;
                }
                    .main-shape .s1 {
                        left: 390px;
                        bottom: 0;
                        width: 224px; 
                        height: 67px; 
                        background: url(/Images/main/main_shape/main_shape_1.png) left top no-repeat;
                        animation-delay: 3.4s;
                    }
                    .main-shape .s2 {
                        left: 180px;
                        bottom: 0px;
                        width: 391px; 
                        height: 279px; 
                        background: url(/Images/main/main_shape/main_shape_2.png) left top no-repeat;
                        animation-delay: 3.1s;
                    }
                    .main-shape .s3 {
                        left: 100px;
                        bottom: 0;
                        width: 326px; 
                        height: 168px; 
                        background: url(/Images/main/main_shape/main_shape_3.png) left top no-repeat;
                        animation-delay: 3.35s;
                    }
                    .main-shape .s4 {
                        left: 300px;
                        bottom: -50px;
                        width: 327px; 
                        height: 361px; 
                        background: url(/Images/main/main_shape/main_shape_4.png) left top no-repeat;
                        animation-delay: 3.3s;
                    }
                    .main-shape .s5 {
                        left: 140px;
                        bottom: 35px;
                        width: 240px; 
                        height: 275px; 
                        background: url(/Images/main/main_shape/main_shape_5.png) left top no-repeat;
                        animation-delay: 3.7s;
                    }
                    .main-shape .s6 {
                        left: 340px;
                        bottom: 140px;
                        width: 188px; 
                        height: 216px; 
                        background: url(/Images/main/main_shape/main_shape_6.png) left top no-repeat;
                        animation-delay: 3.4s;
                    }
                    .main-shape .s7 {
                        left: 200px;
                        bottom: 240px;
                        width: 135px; 
                        height: 154px; 
                        background: url(/Images/main/main_shape/main_shape_7.png) left top no-repeat;
                        animation-delay: 3.6s;
                    }
                    .main-shape .s8 {
                        left: 540px;
                        bottom: -50px;
                        width: 128px; 
                        height: 147px; 
                        background: url(/Images/main/main_shape/main_shape_8.png) left top no-repeat;
                        animation-delay: 3.55s;
                    }
                    .main-shape .s9 {
                        left: 440px;
                        bottom: 30px;
                        width: 107px; 
                        height: 122px; 
                        background: url(/Images/main/main_shape/main_shape_9.png) left top no-repeat;
                        animation-delay: 3.85s;
                    }
                    .main-shape .s10 {
                        left: 650px;
                        bottom: 80px;
                        width: 90px; 
                        height: 103px; 
                        background: url(/Images/main/main_shape/main_shape_10.png) left top no-repeat;
                        animation-delay: 3.7s;
                    }
                    .main-shape .s11 {
                        left: 0;
                        bottom: 0;
                        width: 90px; 
                        height: 69px; 
                        background: url(/Images/main/main_shape/main_shape_11.png) left top no-repeat;
                        animation-delay: 3.2s;
                    }
                    .main-shape .s12 {
                        left: 800px;
                        bottom: -15px;
                        width: 67px; 
                        height: 75px; 
                        background: url(/Images/main/main_shape/main_shape_12.png) left top no-repeat;
                        animation-delay: 3.35s;
                    }
                    .main-shape .s13 {
                        left: 600px;
                        bottom: 200px;
                        width: 66px; 
                        height: 75px; 
                        background: url(/Images/main/main_shape/main_shape_13.png) left top no-repeat;
                        animation-delay: 3.7s;
                    }
                    .main-shape .s14 {
                        left: 76px;
                        bottom: 116px;
                        width: 50px; 
                        height: 57px; 
                        background: url(/Images/main/main_shape/main_shape_14.png) left top no-repeat;
                        animation-delay: 3.5s;
                    }
                    */
            /* version 1 : font use */
            .main-spot-text {
                position: relative;
                width: 960px;
                height: 360px;
                margin: 0 auto;
                overflow: hidden;
                font-weight: 700;
                font-family: 'Daum', 'Nanum Myeongjo', 'Nanum Gothic','맑은 고딕', 'Malgun Gothic', Dotum, Gulim, sans-serif;
            }

                .font-select {
                    position: absolute;
                    left: -100px;
                    top: 30px;
                }
                .font-select li {
                    margin: 5px 0;
                }
                .font-select li a {
                    display: block;
                    padding: 5px 7px;
                    font-size: 12px;
                    color: #fff;
                    text-align: right;
                    background-color: #767676;
                    text-decoration: none;
                }

                .main-spot-text span {
                    display: inline-block;
                    width: 22px;
                    height: 26px;
                    margin: 0;
                    padding: 0;
                    font-size: 26px;
                    font-weight: bold;
                    color: #646075;
                    line-height: 1;
                }

                .main-spot-text span.b {
                    margin: 0;
                    font-size: 26px;
                    font-weight: 700;
                    color: #b0516d;
                }
                .main-spot-text span.s {
                    margin-right: 10px;
                }
                .main-spot-text span.b.s {
                    margin-right: 10px;
                }
                .main-spot-text span.b.e {
                    margin-right: 0;
                }
                .main-spot-text1 {
                    position: absolute;
                    left: 350px;
                    top: 130px;
                }
                    .main-spot-text1 .t1 { 
                        animation-delay: 0.1s;
                    }
                    .main-spot-text1 .t2 { 
                        animation-delay: 0.2s;
                    }
                    .main-spot-text1 .t3 { 
                        animation-delay: 0.3s;
                    }
                    .main-spot-text1 .t4 { 
                        animation-delay: 0.4s;
                    }
                    .main-spot-text1 .t5 { 
                        animation-delay: 0.5s;
                    }
                    .main-spot-text1 .t6 { 
                        animation-delay: 0.6s;
                    }
                    .main-spot-text1 .t7 { 
                        animation-delay: 0.7s;
                    }
                    .main-spot-text1 .t8 { 
                        animation-delay: 0.8s;
                    }
                    .main-spot-text1 .t9 { 
                        animation-delay: 0.9s;
                    }
                    .main-spot-text1 .t10 { 
                        animation-delay: 1s;
                    }
                    .main-spot-text1 .t11 { 
                        animation-delay: 1.1s;
                    }
                    .main-spot-text1 .t12 { 
                        animation-delay: 1.2s;
                    }
                    .main-spot-text1 .t13 { 
                        animation-delay: 1.3s;
                    }
                    .main-spot-text1 .t14 { 
                        animation-delay: 1.4s;
                    }

                .main-spot-text2 {
                    position: absolute;
                    left: 430px;
                    top: 185px;
                }
                    .main-spot-text2 .t1 {
                        animation-delay: 1.3s;
                    }
                    .main-spot-text2 .t2 {
                        animation-delay: 1.4s;
                    }
                    .main-spot-text2 .t3 {
                        animation-delay: 1.5s;
                    }
                    .main-spot-text2 .t4 {
                        animation-delay: 1.6s;
                    }
                    .main-spot-text2 .t5 {
                        animation-delay: 1.7s;
                    }
                    .main-spot-text2 .t6 {
                        animation-delay: 1.8s;
                    }
                    .main-spot-text2 .t7 {
                        animation-delay: 1.9s;
                    }
                    .main-spot-text2 .t8 {
                        animation-delay: 2s;
                    }
                    .main-spot-text2 .t9 {
                        animation-delay: 2.1s;
                    }
                    .main-spot-text2 .t10 {
                        animation-delay: 2.2s;
                    }
                    .main-spot-text2 .t11 {
                        animation-delay: 2.3s;
                    }
                    .main-spot-text2 .t12 {
                        animation-delay: 2.4s;
                    }
                    .main-spot-text2 .t13 {
                        animation-delay: 2.5s;
                    }
                    .main-spot-text2 .t14 {
                        animation-delay: 2.6s;
                    }
                    .main-spot-text2 .t15 {
                        animation-delay: 2.7s;
                    }
                    .main-spot-text2 .t16 {
                        animation-delay: 2.8s;
                    }
                    .main-spot-text2 .t17 {
                        animation-delay: 2.9s;
                    }
                    .main-spot-text2 .t18 {
                        animation-delay: 3s;
                    }
                    .main-spot-text2 .t19 {
                        animation-delay: 3.1s;
                    }

            /* version 2 : image use */
            /*
            .main-spot-text {
                position: relative;
                width: 960px;
                height: 357px;
                margin: 0 auto;
                overflow: hidden;
            }
                .main-spot-text span {
                    display: inline-block;
                    width: 22px;
                    height: 26px;
                    margin: 0 0 0 -2px;
                    padding: 0;
                    font-size: 0;
                    line-height: 1;
                }
                .main-spot-text span.s {
                    margin-right: 8px;
                }
                .main-spot-text1 {
                    position: absolute;
                    left: 380px;
                    top: 118px;
                }
                    .main-spot-text1 .t1 { 
                        width: 22px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t1.png) left bottom no-repeat;
                        animation-delay: 0.1s;
                    }
                    .main-spot-text1 .t2 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t2.png) left bottom no-repeat;
                        animation-delay: 0.2s;
                    }
                    .main-spot-text1 .t3 { 
                        width: 22px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t3.png) left bottom no-repeat;
                        animation-delay: 0.3s;
                    }
                    .main-spot-text1 .t4 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t4.png) left bottom no-repeat;
                        animation-delay: 0.4s;
                    }
                    .main-spot-text1 .t5 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t5.png) left bottom no-repeat;
                        animation-delay: 0.5s;
                    }
                    .main-spot-text1 .t6 { 
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t6.png) left bottom no-repeat;
                        animation-delay: 0.6s;
                    }
                    .main-spot-text1 .t7 { 
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t7.png) left bottom no-repeat;
                        animation-delay: 0.7s;
                    }
                    .main-spot-text1 .t8 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t8.png) left bottom no-repeat;
                        animation-delay: 0.8s;
                    }
                    .main-spot-text1 .t9 { 
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t9.png) left bottom no-repeat;
                        animation-delay: 0.9s;
                    }
                    .main-spot-text1 .t10 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t10.png) left bottom no-repeat;
                        animation-delay: 1s;
                    }
                    .main-spot-text1 .t11 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t11.png) left bottom no-repeat;
                        animation-delay: 1.1s;
                    }
                    .main-spot-text1 .t12 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t12.png) left bottom no-repeat;
                        animation-delay: 1.2s;
                    }
                    .main-spot-text1 .t13 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t13.png) left bottom no-repeat;
                        animation-delay: 1.3s;
                    }
                    .main-spot-text1 .t14 { 
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text1/t14.png) left bottom no-repeat;
                        animation-delay: 1.4s;
                    }

                .main-spot-text2 {
                    position: absolute;
                    left: 450px;
                    top: 170px;
                }
                    .main-spot-text2 .t1 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t1.png) left bottom no-repeat;
                        animation-delay: 1.3s;
                    }
                    .main-spot-text2 .t2 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t2.png) left bottom no-repeat;
                        animation-delay: 1.4s;
                    }
                    .main-spot-text2 .t3 {
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t3.png) left bottom no-repeat;
                        animation-delay: 1.5s;
                    }
                    .main-spot-text2 .t4 {
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t4.png) left bottom no-repeat;
                        animation-delay: 1.6s;
                    }
                    .main-spot-text2 .t5 {
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t5.png) left bottom no-repeat;
                        animation-delay: 1.7s;
                    }
                    .main-spot-text2 .t6 {
                        width: 24px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t6.png) left bottom no-repeat;
                        animation-delay: 1.8s;
                    }
                    .main-spot-text2 .t7 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t7.png) left bottom no-repeat;
                        animation-delay: 1.9s;
                    }
                    .main-spot-text2 .t8 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t8.png) left bottom no-repeat;
                        animation-delay: 2s;
                    }
                    .main-spot-text2 .t9 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t9.png) left bottom no-repeat;
                        animation-delay: 2.1s;
                    }
                    .main-spot-text2 .t10 {
                        width: 22px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t10.png) left bottom no-repeat;
                        animation-delay: 2.2s;
                    }
                    .main-spot-text2 .t11 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t11.png) left bottom no-repeat;
                        animation-delay: 2.3s;
                    }
                    .main-spot-text2 .t12 {
                        width: 24px; 
                        height: 26px; 
                        background: url(/Images/main/main_spot_text2/t12.png) left bottom no-repeat;
                        animation-delay: 2.4s;
                    }
                    .main-spot-text2 .t13 {
                        width: 25px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t13.png) left bottom no-repeat;
                        animation-delay: 2.5s;
                    }
                    .main-spot-text2 .t14 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t14.png) left bottom no-repeat;
                        animation-delay: 2.6s;
                    }
                    .main-spot-text2 .t15 {
                        width: 23px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t15.png) left bottom no-repeat;
                        animation-delay: 2.7s;
                    }
                    .main-spot-text2 .t16 {
                        width: 23px; 
                        height: 26px; 
                        background: url(/Images/main/main_spot_text2/t16.png) left bottom no-repeat;
                        animation-delay: 2.8s;
                    }
                    .main-spot-text2 .t17 {
                        width: 25px; 
                        height: 26px; 
                        background: url(/Images/main/main_spot_text2/t17.png) left bottom no-repeat;
                        animation-delay: 2.9s;
                    }
                    .main-spot-text2 .t18 {
                        width: 25px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t18.png) left bottom no-repeat;
                        animation-delay: 3s;
                    }
                    .main-spot-text2 .t19 {
                        width: 30px; 
                        height: 25px; 
                        background: url(/Images/main/main_spot_text2/t19.png) left bottom no-repeat;
                        animation-delay: 3.1s;
                    }
                    */
                
	#container .innerWrap {
		width: 960px;
		padding: 0 10px;
	}
    
    /* notice-area */	
    #container .notice-area {
        position: relative;
		width: 960px;
        padding-bottom: 30px;
        border-bottom: 1px solid #dfdfdf;
    }
        
        #container .notice-area .news {
            float: left;
            width: 360px;
            padding-right: 40px;
        }
        #container .ad-area {
            float: left;
            width: 240px;
        }
        #container .notice-area .news {

        }
            #container .notice-area .news h3 {
                margin: 0 0 10px;
                font-size: 16px;
                font-weight: bold;
            }
                #container .notice-area .news h3 span.divline {
                    margin: 0 10px;
                    font-size: 9px;
                    color: #ccc;
                    vertical-align: middle;
                }
                #container .notice-area .news h3 small a {
                    font-size: 11px;
                    color: #999;
                }
                #container .notice-area .news h3 small a:hover {
                    color: #999;
                }

            #container .notice-area .news ul {

            }
                #container .notice-area .news li {
                    position: relative;
                    width: 320px;
                    margin: 0 0 4px;
                    padding-left: 10px;
                    background: url(/Images/bullet/bullet_main_board.jpg) left 50% no-repeat;
                }
                    #container .notice-area .news li a {
                        display: block;
                        width: 305px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 13px;
                        color: #222;
                    }
                    #container .notice-area .news li a:hover {
                        text-decoration: underline;
                    }
                    #container .notice-area .news li span.icon-new {
                        /*position: absolute;
                        right: -10px;
                        top: 4px;*/
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        margin: 0 0 0 5px;
                        background: url(/Images/icon/icon_new.jpg) left 50% no-repeat;
                    }
    
    /* ad-area */
    #container .ad-area {
        position: relative;
    }
        #container .ad-area .etc {
            position: relative;
            display: block;
            width: 240px;
            height: 145px;
            background-color: #dfdfdf;
        }
            #container .ad-area .etc:hover {
                background-color: #bf7188;
            }

        #container .ad-area .etc .caption {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            color: #fff;
            text-align: center;
            background-color: #000;
            background-color: rgba(0,0,0,0.65);
        }

        #container .ad-area .cycle-pager {
            position: absolute;
            right: 0;
            bottom: -28px;
            z-index: 1000;
        }
        #container .ad-area .cycle-pager span {
            font-family: '맑은 고딕', sans-serif;
            font-size: 30px;
            color: #4c495a;
            cursor: pointer;
        }
            #container .ad-area .cycle-pager span.cycle-pager-active {
                color: #bf6c84;
            }

    /* go-link */	
    #container .go-link {
        position: relative;
		width: 960px;
        padding: 20px 0 15px;
    }
        #container .go-link h3 {
            float: left;
            margin: 0 60px 10px 0;
            padding: 12px 0 0;
            font-size: 16px;
            font-weight: bold;
        }
        #container .go-link ul {
            float: left;
        }
            #container .go-link ul li {
                float: left;
                margin: 0 40px 0 0;
            }
                #container .go-link ul li span.thm {
                    display: block;
                    width: 57px;
                    height: 55px;
                }
                #container .go-link ul li a span.thm.thm01 {
                    background: url(/Images/btn/btn_vision_off.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm01 {
                        background: url(/Images/btn/btn_vision.jpg) left top no-repeat;
                    }
                #container .go-link ul li a span.thm.thm02 {
                    background: url(/Images/btn/btn_basis_off.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm02 {
                        background: url(/Images/btn/btn_basis.jpg) left top no-repeat;
                    }
                #container .go-link ul li a span.thm.thm03 {
                    background: url(/Images/btn/btn_spec_off.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm03 {
                        background: url(/Images/btn/btn_spec.jpg) left top no-repeat;
                    }
                #container .go-link ul li a span.thm.thm04 {
                    background: url(/Images/btn/btn_standard_off.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm04 {
                        background: url(/Images/btn/btn_standard.jpg) left top no-repeat;
                    }
                #container .go-link ul li a span.thm.thm05 {
                    background: url(/Images/btn/btn_progress_off2.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm05 {
                        background: url(/Images/btn/btn_progress2.jpg) left top no-repeat;
                    }
                #container .go-link ul li a span.thm.thm06 {
                    background: url(/Images/btn/btn_end_off2.jpg) left top no-repeat;
                }
                    #container .go-link ul li a:hover span.thm.thm06 {
                        background: url(/Images/btn/btn_end2.jpg) left top no-repeat;
                    }
                    
                #container .go-link ul li a span.title {
                    display: block;
                    font-size: 11px;
                    color: #666;
                    letter-spacing: -0.75px;
                    text-align: center;
                }
                #container .go-link ul li a {
                    text-decoration: none !important;
                }
                #container .go-link ul li a:hover span.title {
                    color: #bf6c84;
                }
        #container .go-link span.kbc-rule {
            float: left;
        }