@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

	#top_logo_div{float:left; width:252px;text-align:center;height:70px;padding-top:10px;}
	#top_outer_box{float:left; width:558px; height:70px;}
	#top_outer_right_box{ float:left; width:170px; height:70px; font-size:7px; line-height:70px }
	#top_outer_right_box a, #top_outer_right_box a:hover{color:#ffffff; font-weight:normal;}
		
		/* ==========================================
			RESET
		===========================================*/

        * {
            box-sizing: border-box;
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
        }


		/*====================================
			HEADER STYLES
		====================================*/
        header {
            background: #27397b;
            box-shadow--: 0px -3px 15px 2px;
			width:980px;
        }

        .header-container {
            width: 100%;
            margin: auto;
            display: flex;
            flex-direction: column;
            /* Logo starts stacked on top of nav */
            align-items: center;
			z-index:100;
        }

        .logo00 {
            max-width: 120px;
            max-height: 120px;
            margin-top: 10px;
        }

		/*====================================
		  MENU STYLES
		====================================*/

        .main-menu {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index:100;

            overflow: visible;

            max-width: 900px;
		
            /* Keeps the buttons getting too far from each other on largest screens */
        }

        .main-menu a {
            width: 100%;
            text-align: center;
            padding: 0.75em 1em;
            display: block;
            color: #ffffff;
            border-bottom--: 2px solid #ddd;
        }

        .main-menu a:hover {
            color: #ffffff;
            background-color:#0073aa;
        }

		/*====================================
		  DROPDOWN MENU STYLES
		====================================*/
 
        .drop-menu {
            display: flex;
            flex-direction: column; 
            align-items: center;
            width: 100%; 
            transition: max-height 0.4s, opacity 0.3s;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
			font-size:15px;

         
        }

        .drop-menu>.menu-button {
            height: 100%;
            transition: transform 0.4s;
            transform: translateY(-300%);
            background-color: #ddf4ff;
			color:#2b2b2b



         
        }

       
        .dropdown-wrapper:hover>.menu-button {
            color: #ffffff;
            background-color:#0073aa;
        }

        
        .dropdown-wrapper:hover .drop-menu {
            max-height: 550px;
            opacity: 1;
        }

    
        .dropdown-wrapper:hover>.drop-menu .menu-button {
            transform: translateY(0%);
        }





		/*====================================
		  DROP-MENU EFFECTS (LARGER SCREENS)
		====================================*/
            /* Resets dropdown styles to not affect the effects. Overflow still set to hidden allows for menu effects like sliding in */
            .effect {
                transition: max-height 0s;
                opacity: 1;
                background: transparent;
            }

            .effect .menu-button {
                transform: translateY(0%);
            }

            .scissor .menu-button {
                transform: translateX(-100%);
            }

          
            .scissor .menu-button:nth-child(2n + 1) {
                transform: translateX(100%);
            }

            .dropdown-wrapper:hover .scissor .menu-button {
                transform: translateX(0%);
            }

            .fade-in .menu-button {
                transition: opacity 0.5s;
                opacity: 0;
            }

            .dropdown-wrapper:hover .fade-in .menu-button {
                opacity: 1;
            }

            .header-container {
                width: 90%;
            }

            .header-container {
                height--: 200px;
                justify-content: space-between;
                /* Pushes logo to top, nav bar all the way down */
            }

            .main-menu {
                flex-direction: row;
                /* Horizontal main menu buttons */
                align-items: flex-start;
                /* Makes the top of the 'dropdown-wrapper' div stay flush with button top because it's aligned on the cross-axis */
                height: 70px;
                /* Setting the height allows the dropdown outside of it's parent's bounds, therefore not compensated for by the flex. */
                margin: 0;
            }

            .main-menu>.menu-button {
                width: 23%;
                max-width: 150px;
            }


		    .big-menu{
			   font-family:'Noto Sans Korean','Noto Sans KR','Dotum', 'Helvetica', 'AppleGothic', 'Sans-serif';     color: #666;font-size:18px !important;; font-weight:normal; letter-spacing :-1px;
			   height:70px;
			   padding: 0 1em !important;
			   line-height:70px;
		     }