* {
    margin:0;
    padding:0;
    transition:all 0.4s;
}

    body {
        font-family: "Noto Sans KR", "Montserrat", sans-serif;
        font-size:15px;
        letter-spacing: -0.5px;
        color:#222;
    }

    ul {
        list-style: none;
    }

    /* common */

    .none {
        display:none !important;
    }

    .colorV {
        color:#5D439A;
    }

    .colorG {
        color:#888;
    }

    .colorW {
        color:#fff;
    }

    .bgV {
        background:#5D439A;
        color:#fff;
    }

    .bgW {
        background:#fff;
    }
    
    .bgG {
        background:#111;
        color:#888;
    }
    
    .f_mont {
        font-family:"Montserrat";
    }

    .f_noto {
        font-family: "Noto Sans KR";
    }


    .cs_logo {
        background:url(../img/cs_logo.png) center center no-repeat;
        background-size: 200px;
    }

    .bkt_logo {
        background:url(../img/bkt_logo.png) center center no-repeat;
        background-size: 150px;
    }


    .wid {
        width:1200px; /* pc-width */
    }



    /* top button */

        .topBtnArea {
            position:fixed;
            bottom:10px;
            right:10px;
            width:50px;
            height:50px;
            background:#fff;
            z-index:999;
            border:1px solid #aaa;
            box-shadow:0px 0px 10px rgba(0,0,0,0.3);
            display:flex;
        }

            .topBtnArea .topBtn {
                margin:auto;
                text-decoration: none;
                font-family:"Montserrat";
                font-size:14px;
                color:#222;
                text-align:center;
                cursor:pointer;
            }

            .topBtnArea .topBtn:hover {
                font-weight: 600;
            }

                .topBtnArea .topBtn span {
                    margin-top:-10px;
                    position:relative;
                    top:-5px;
                }


        /* FullScreen GNB */

        .fullGnbArea {
            position:fixed;
            width:50%;
            height:100%;
            background:rgba(255,255,255);
            z-index:1000;
            left:-100%;
            border-right:1px solid #aaa;
        }

        .open {
            left:0px;
        }

            .fullGnbArea .fullGnbWrap {
                width:100%;
                height:100%;
                position:relative;
                padding:30px;
            }

                .fullGnbArea .fullGnbWrap a.closeBtn {
                    font-size:40px;
                    color:#222;
                    position:absolute;
                    top:30px;
                    right:50px;
                    cursor:pointer;
                }

                    .fullGnbArea .fullGnbWrap .fullGnb li {
                        padding:20px 0px;
                    }

                        .fullGnbArea .fullGnbWrap .fullGnb li a {
                            font-size:3rem;
                            cursor:pointer;
                            color:#222;
                            text-decoration: none;
                            font-weight: bold;
                        }

                        .fullGnbArea .fullGnbWrap .fullGnb li a:hover {
                            border-bottom:2px solid #222;
                        }


        /* header */
        .header {
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:80px;
            color:#fff;
            border-bottom:1px solid #fff;
            z-index:999;
        }

    
        .header.gnbW {
            background:#fff;
            border-color:#aaa;
            color:#888;
        }

        .header.gnbB {
            background:#222;
            border-color:#aaa;
            color:#888;
        }


            .header .gnb {
                width:100%;
            }
                .header .gnb .gnbWrap {
                    display:flex;
                    flex-direction: row;
                }

                    .header .gnb .gnbWrap .burgerBtn {
                        width:80px;
                        height:80px;
                        border-right:1px solid #fff;
                        display:flex;
                        cursor:pointer;
                    }

                    .header.gnbW .gnb .gnbWrap .burgerBtn {
                        border-color:#aaa;
                    }

                    .header .gnb .gnbWrap .burgerBtn:hover {
                        background:#fff;
                    }

                    .header.gnbW .gnb .gnbWrap .burgerBtn:hover {
                        background:#5d439a;
                    }                  


                        .header .gnb .gnbWrap .burgerBtn i {
                            margin:auto;
                            font-size:38px;
                            transition: none;
                        }

  
                        .header .gnb .gnbWrap .burgerBtn:hover i {
                            color:#5D439A;
                            transition:none;
                        }  
                        
                        .header.gnbW .gnb .gnbWrap .burgerBtn:hover i {
                            color:#fff;
                            transition:none;
                        }                      


                    .header .gnb .gnbWrap .logo {
                        width:100px;
                        height:80px;
                    }
                        .header .gnb .gnbWrap .logo a {
                            display:flex;
                            width:100%;
                            height:100%;
                            cursor:pointer;
                        }

                        .header .gnb .gnbWrap .logo img {
                            margin:auto;
                            width:35px;
                        }

                        .header.gnbW .gnb .gnbWrap .logo img {
                            filter: invert(1);
                            opacity: 70%;
                        }                        

                    .header .gnb .gnbWrap .menu {
                        display:flex;
                        flex-direction: row;
                        margin-left:auto;
                        width:400px;
                        height:80px;
                        justify-content: center;
                    }

                        .header .gnb .gnbWrap .menu li {
                            width:calc(100% / 3);
                            align-self:center;
                        }

                            .header .gnb .gnbWrap .menu li a {
                                color:#fff;
                                font-weight: bold;
                                text-transform: uppercase;
                                text-decoration: none;
                                cursor:pointer;
                                font-size:18px;
                                text-shadow:1px 1px 0px #5D439A;
                            }

                            .header.gnbW .gnb .gnbWrap .menu li a {
                                color:#222;
                                text-shadow:none;
                            }


                            .header.gnbB .gnb .gnbWrap .menu li a {
                                text-shadow:none;
                            }


                    .header .gnb .gnbWrap .languageSelect {
                        position:relative;
                        margin-right:50px;
                        display:flex;
                        height:80px;
                        margin-left:10px;
                    }

                    .header .gnb .gnbWrap .languageSelect .LangBtn {
                        align-self:center;
                        text-transform: uppercase;
                        text-decoration: none;
                        color:#fff;
                        cursor:pointer;
                        font-size:18px;
                        text-shadow:1px 1px 0px #5D439A;
                        font-weight: bold;
                        transition: none;
                    }

                    .header.gnbW .gnb .gnbWrap .languageSelect .LangBtn {
                        color:#222;
                        text-shadow:none;
                    }

                    .header.gnbB .gnb .gnbWrap .languageSelect .LangBtn {
                        text-shadow:none;
                    }

                        .header .gnb .gnbWrap .languageSelect .langList {
                            position:absolute;
                            background:#fff;
                            border-radius:10px;
                            align-self:center;
                            padding:10px 20px;
                            width:60px;
                            bottom:-75px;
                            right:0px;
                            box-shadow:3px 3px 10px rgba(0,0,0,0.3);
                        }

                        .header .gnb .gnbWrap .languageSelect .langList:after {
                            content:"";
                            width:10px;
                            height:10px;
                            position:absolute;
                            top:-5px;
                            left:23px;
                            background:#fff;
                            transform:rotate(-45deg);
                        }
                            .header .gnb .gnbWrap .languageSelect .langList li a {
                                text-transform: uppercase;
                                text-decoration: none;
                                cursor:pointer;
                                text-align:center;
                                color:#222;

                            }

                            .header .gnb .gnbWrap .languageSelect .langList li a:hover {
                                text-decoration: underline;
                                font-weight: bold;
                            }



        /* content */
        .areaWrap {
            width:100%;
        }

            .area01 {
                height:100vh
            }



                /* subTitle */

                .subTitle {
                    padding:70px 30px 30px;
                }

                    .subTitle .areaNum {
                        font-family:"Montserrat";
                        font-size:80px;
                        font-weight:bold;
                    }

                    .subTitle .line-col-g {
                        content:"";
                        width:1px;
                        height:100px;
                        background:#ccc;
                        margin:20px;
                    }

                    .subTitle .subTitleTxt {
                        font-family:"Montserrat";
                        font-size:80px;
                        font-weight: bold;
                        margin-bottom:0px;
                    }

                    .subTitle .contentTXT {
                        font-family:"Montserrat";
                        font-size:50px;
                        font-weight: bold;
                        margin-top:-20px;
                        margin-bottom:0px;
                    }


            /* mainTop */

            .mainTop {
                width:100%;
                background: linear-gradient(-45deg, #5b328e, #37328e, #5c449a, #7e328e, #6e5baa);
                background-size: 400% 400%;
                animation: gradient 15s ease infinite;
                z-index:0;
                overflow:hidden;
                position:relative;
                border-bottom:1px solid #aaa;
                box-shadow:0px 0px 30px rgba(0,0,0,0.3)
            }

            .mainTop:before {
                content:"";
                position:absolute;
                width:100%;
                height:100%;
                top:0px;
                left:0px;
                background:url(../img/bi_big.svg) -120% 45% no-repeat;
                background-size: 125%;
            }

            

            @keyframes gradient {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }


                .mainTop .contentWrap {
                    height:100%;
                    margin:0 auto;
                    display:flex;
                }

                    .mainTop .contentWrap .textWrap {
                        align-self:center;
                        color:#fff;
                        margin:auto 0px auto 30px;
                        display:flex;
                        flex-direction: column;
                    }

                        .mainTop .contentWrap .textWrap > p {
                            width: fit-content;
                            font-size:28px;
                            margin:0;
                            display:table-cell;
                            padding-right:10px;
                        }

                        .mainTop .contentWrap .textWrap > p.txt02 {
                            animation-name: cursor; 
                            animation-duration: 0.3s; 
                            animation-iteration-count: infinite;
                            word-break: keep-all;
                        }


                        @keyframes cursor{ 
                            0%{border-right: 2px solid #fff} 
                            50%{border-right: 2px solid #5d439a} 
                            100%{border-right: 2px solid #fff} 
                        }

                        .mainTop .contentWrap .textWrap .line-col {
                            width:3px;
                            height:80px;
                            background:#fff;
                            margin:30px 0px;
                        }

                        .mainTop .contentWrap .textWrap .titleTXT {
                            font-size:80px;
                            font-weight:bold;
                            margin:0;
                            letter-spacing:20px;
                        }




            /* about */

            .about {
                width:100%;
                border-bottom:1px solid #aaa;
            }

                .about .contentWrap {
                    height:100%;
                    margin:0 auto;
                    display:flex; 
                    flex-direction: column;
                    border-left:1px solid #aaa;
                    border-right:1px solid #aaa;
                }


                .about .contentWrap .content {
                    border-top:1px solid #aaa;
                    display:flex;
                    flex-direction: column;
                    height:100%;
                }

                    .about .contentWrap .content > div {
                        display:flex;
                        border-bottom:1px solid #aaa;
                        height:33.3333%;
                        align-items: stretch;
                    }
                    .about .contentWrap .content > div:last-child {
                        border-bottom:none;
                    }

                        .about .contentWrap .content > div .subBox {
                            flex-shrink: 0;
                            width:300px;
                            padding:30px;
                            border-right:1px solid #aaa;
                            font-weight: bold;
                            font-size:18px;
                        }

                        .about .contentWrap .content > div .txtBox {
                            padding:50px 30px 10px;
                        }

                            .about .contentWrap .content > div .txtBox .slogan {
                                font-weight: bold;
                                margin-bottom:20px;
                            }

                            .about .contentWrap .content > div .txtBox > p {
                                color:#888;
                                word-break: keep-all;
                            }

                            .about .contentWrap .content > div .txtBox > ul {
                                padding-left:10px;
                            }

                                .about .contentWrap .content > div .txtBox > ul li {
                                    color:#888;
                                }

                                .about .contentWrap .content > div .txtBox > ul li:before {
                                    content:"-";
                                    margin-right:5px;
                                }


            /* family */

            .family {
                width:100%;
                border-bottom:1px solid #aaa;
            }

                .family .subTitle {
                    border-bottom:1px solid #aaa;
                }

                    .family .subTitle .subTitleTxt {
                        margin:0 auto;
                        padding:30px;
                    }


                .familyWrap {
                    margin:0 auto;
                    display: flex;
                    border-left:1px solid #aaa;
                    border-right:1px solid #aaa;
                    padding-left:0px;
                }

                    .familyWrap li {
                        width:calc(100% / 2);
                        padding:30px;
                        box-sizing: border-box;
                        filter:grayscale(100%);
                    }

                    .familyWrap li:hover {
                        filter:grayscale(0%);
                    }

                    .familyWrap li:first-child {
                        border-right:1px solid #aaa;
                    }

                        .familyWrap li .familyPic {
                            content:"";
                            margin-bottom:30px;
                            width:250px;
                            height:100px;
                        }

                        .familyWrap li .familySiteContent {
                            margin:20px 0px;
                        }

                            .familyWrap li .familySiteContent .familySiteName {
                                font-weight: bold;
                            }

                            .familyWrap li .familySiteContent .familySiteTxt {
                                color:#888;
                            }

                            .familyWrap li .familySiteContent .familySiteUrl {
                                color:#555;
                            }

            /* contact */

            .contact {
                width:100%;
                border-bottom:1px solid #666;
            }

                .contact .contentWrap {
                    margin:0 auto;
                    border-left:1px solid #666;
                    border-right:1px solid #666;
                    display:flex;
                    flex-direction: row;
                    height:100%;
                }

                .contact .contentWrap .contentLeft {
                    width:60%;
                    height:auto;
                    border-right:1px solid #666;
                    box-sizing:border-box;
                }

                    .contact .contentWrap .contentLeft .mapArea {
                        width:100%;
                        height:350px;
                        background:#ccc;
                        content:"";
                        margin-bottom:80px;
                    }

                        .contact .contentWrap .contentLeft .mapArea iframe {
                            width:100%;
                            height:350px;
                        }


                .contact .contentWrap .contentRight {
                    flex-shrink: 0;
                    width:40%;
                    padding:30px;
                    box-sizing:border-box;
                    min-height:100%;
                    display:flex;
                }

                    .contact .contentWrap .contentRight .contentTXTWrap {
                        margin-top:auto;
                    }

                        .contact .contentWrap .contentRight .contentTXTWrap p.coName-en {
                            margin-bottom:0px;
                            letter-spacing: 5px;
                            font-weight: bold;
                            color:#fff;
                        }

                        .contact .contentWrap .contentRight .contentTXTWrap .coName-ko {
                            font-weight:bold;
                            color:#fff;
                            font-size:30px;
                            margin-bottom:20px;                       
                        }


                            .contact .contentWrap .contentRight .contentTXTWrap > div > i {
                                color:#fff;
                            }


                            .contact .contentWrap .contentRight .contentTXTWrap > div > p {
                                color:#888;
                            }

                                .contact .contentWrap .contentRight .contentTXTWrap > div > p > span {
                                    font-size:12px;
                                    color:#777;
                                    display: block;
                                }

                                .contact .contentWrap .contentRight .contentTXTWrap > div > p > a {
                                    color:#888;
                                    text-decoration: none;
                                }


        /* footer */
        .footer {
            width:100%;
            height:200px;
            background:#222222;
            color:#888;
        }

            .footer .footerWrap {
                margin:0 auto;
                display:flex;
                flex-direction: row;
                flex-wrap:wrap;
            }

                .footer .footerWrap .logoArea {
                    width:100%;
                    padding:60px 0px 20px;
                }

                    .footer .footerWrap .logoArea a {
                        display:block;
                        width:200px;
                        height:40px;
                        background:url(../img/logo_row.png) left center no-repeat;
                        background-size:200px;
                        opacity:0.4; 
                        cursor:pointer;
                    }

                    .footer .footerWrap .logoArea a:hover {
                        opacity:1;
                    }

                .footer .footerWrap .footerInfo {
                    width:50%;
                    font-size:12px;
                }

                    .footer .footerWrap .footerInfo .mailUrl {
                        margin-top:10px;
                    }
                        .footer .footerWrap .footerInfo .mailUrl a {
                            color:#777;
                        }


                .footer .footerWrap .copyrightTxt {
                    width:50%;
                    text-align:right;
                    margin-top:auto;
                    font-size:12px;
                }