body{
        background-color: #eee !important;
    }


    /* ============================================================================================================================
    navBar==========================================================================================================================
    ============================================================================================================================= */
    /* navbar formatting */
    .navbar{
        background-color: white;
        /* height is declared here ensure size doesn't change due to auto
        without declaring it here, the navbar and nav-item>a height differs */
        height: 80px;
        margin-bottom: 50px;
    }

    /* navbar - mobile > opacity 0 */
    #collapsibleNavbar-m{
        display: none;
        opacity: 0 !important;}

    .accordion {
        --bs-accordion-active-bg: white !important;
        --bs-accordion-btn-focus-box-shadow: none !important;
        --bs-accordion-btn-focus-border-color: transparent !important;
    }

    

    /* navbar > nav-item > a (Menu) */
    #collapsibleNavbar .nav-item>a{
        font-weight: bolder;
        height: 80px;
        align-content: center;
        color: black;
    }

    /* navbar > nav-item hover -> underline */
    #collapsibleNavbar .nav-item:hover>a{
        border-bottom: 3px solid black
    }

    /* navbar > nav-item hover > subMenu */
    #collapsibleNavbar .nav-item:hover .dropdown-menu{
        display: block;
    }

    /* navbar > nav-item > subMenu format */
    #collapsibleNavbar .nav-item .dropdown-menu{
        border-radius: 0px;
        border: none;
    }

    /* navbar > nav-item > subMenu > subMenuItem format */
    #collapsibleNavbar .nav-item .dropdown-menu .dropdown-item{
        font-size: .8em;
    }

    /* navbar > nav-item > subMenu hover > format */
    #collapsibleNavbar .nav-item .dropdown-menu .dropdown-item:hover{
        /* when hovering, ensure font becomes bold */
        font-weight: bold;
        /* 이것이 없으면 hover 시 회색이 존재함.
        Realign bg color to white when hovering */
        background-color: white;
    }

    /* navbar > nav-item > subMenu hover > format */
    #collapsibleNavbar .nav-item .dropdown-menu .dropdown-item:hover::after {
        /* Reformatted with AI using <i> does not work with content */
        content: " \f054"; /* Unicode for FontAwesome's chevron-right */
        font-family: "Font Awesome 5 Free"; /* or the correct Font Awesome font */
        font-weight: bold; /* necessary for solid style */
        margin-left: 5px; /* space between text and chevron */
    }

    #collapsibleNavbar .nav-item .dropdown-toggle::after{
        border: 0px;
    }



    /* Menu > animation */
    #collapsibleNavbar .nav-item i {
        transform: rotate(0deg);
        transition-duration: 0.5s;
    }

    /* Menu > animation > hover */
    #collapsibleNavbar .nav-item:hover i {
        transform: rotate(90deg);
    }



    /* ============================================================================================================================
    Carousel ==========================================================================================================================
    ============================================================================================================================= */
    /* Carousel Container */
    .slider-container { 
        max-width: 1400px;
        margin: 0px auto;
    }

    /* Carousel Slider */
    .slider .slide {
        margin: 0 10px; /* 슬라이드 간 간격 */
        position: relative;
        height: auto;
    }

    /* Carousel Image */
    .slider .slide img {
        width: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

    /* Carousel Image mediaQuery */
    .slider-pc{
        display: block !important;
    }
    .slider-m{
        display: none !important;
    }

    /* Carousel Image color correction */
    .darker:after {
        content:"";
        position: absolute;
        top:0;
        bottom:0px;
        left:0px;
        right:0px;
        background:linear-gradient(to right, black, transparent);
        opacity: .6;
        border-radius: 20px;
    }

    /* Carousel - Caption within image */
    .slide .caption {
        position: absolute;
        left: 10%;
        top: 30%;
        color: white;
    }

    /* Caption Title Formatting */
    .caption>h3{
        font-weight: bold;
    }

    /* Caption Button */
    .slide .more .btn{
        background-color: white;
        color: black;
        font-weight: bold;
        border: none;
        padding-left: 50px;
        padding-right: 50px;
        border-radius: 50px;
        width: 300px;
    }






    /* ============================================================================================================================
    Pick==========================================================================================================================
    ============================================================================================================================= */
    /* Pick Title Formatting */
    
    
    #month-pick{
        padding: 0 0px;
        width: 100%;
    }
    #month-pick>h1{
        font-weight: bold;
        text-align: center;
        padding-bottom: 30px;
    }

    /* width too large */
    #month-pick>div,
    #month-pick .slick-track {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Thumbnail box formatting */
    #month-pick .thumbnail{
        background-color: white;
        margin-bottom: 30px;
        border-radius: 5%;
        text-align: left;
    }
    
    /* Thumbnail's image style */
    #month-pick .thumbnail>img{
        width: 100%;
        height: auto;
        padding-bottom: 10px;
        border-top-left-radius: 5%;
        border-top-right-radius: 5%;
    }

    /* Thumbnail's writing */
    #month-pick .thumbnail>p{
        margin-left: 30px;
        margin-right: 30px;
        font-size: 1.3em;
        font-weight: bolder;
    }

    /* Thumbnail's link */
    #month-pick .thumbnail>a{
        color: black;
        font-weight: bold;
        display: block;
        padding: 30px;

    }




    /* ============================================================================================================================
    Story ==========================================================================================================================
    ============================================================================================================================= */
    /* Container top padding */
    #story, #tomorrow{
        /* Debugging */
        /* background-color: blue; */
        padding-top: 30px;
        padding-bottom: 50px;
        /* padding-left: 30px;
        padding-right: 30px; */
    }

    /* col-md-6 style */
    #story .col-md-6,
    #tomorrow .col-md-6{
        background-color: white;
        border-radius: 20px !important;
        padding: 0px;
        /* The boxes are 500px */
        height: 500px;
    }

    /* Story-image */
    #story .col-md-6 img,
    #tomorrow .col-md-6 img{
        width: 115%;
        height: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

    #story .row,
    #tomorrow .row{
        display: flex !important;
        align-items: center !important;
        /* background-color: green; */
        /* The container is 600 px  */
        height: 600px;
    }

    /* col-md-6>writing formatting */
    

    #story .writing,
    #tomorrow .writing{
        padding: 60px;
    }

    /* #story and #tomorrow Title Formatting */
    .writing>h3{
        font-weight: bold;
    }

    /* col-md-6 자세히 보기 button positioning */
    .writing>div{
        text-align: center;
    }
    
    /* col-md-6 자세히 보기 formatting */
    .writing .btn{
        width: 60%;
        border-radius: 20px;
    }

    
    #story .col-md-6:nth-child(1),
    #tomorrow .col-md-6:nth-child(1) {
        align-self: flex-start !important;
    }
    #story .col-md-6:nth-child(2),
    #tomorrow .col-md-6:nth-child(2) {
        align-self: flex-end !important;
    }

    #story .col-md-6:nth-child(1){
        /* Additional movement to left to take account
        for the larger img */
        margin-right: -7.5% !important;
        z-index: 1; 
    }

    #tomorrow .col-md-6:nth-child(1){
        margin-right: -5% !important; 
        z-index: 1;
    }
    


    /* ============================================================================================================================
    Brand
    ============================================================================================================================= */
    #brand-m{display:none !important;}
    
    #brand,
    #brand-m {
        text-align: center;
    }
    
    /* Brand Title Formatting */
    #brand>h1,
    #brand-m>h1 {
        margin-top: 30px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    #brand>.row,
    #brand-m>.row{
        justify-content: center;
        gap: 30px;
        margin-bottom: 30px;
    }

    /* Brand Box Formatting */
    #brand .col-md-4,
    #brand-m .col{
        /* sizing */
        width: 230px;
        height: 230px;
        background-color: white;
        box-sizing: border-box;
        border: 1px solid black;
        border-radius: 20px;
        transition: 1s;
    }

    /* Brand Image Formatting */
    #brand .col-md-4 img,
    #brand-m .col img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 20px !important;
        transition: 1s;
    }
    
    /* Brand Image Hover Formatting */
    #brand .col-md-4:hover,
    #brand-m .col:hover{
        transform:scale(1.05)
    }
    #brand .col-md-4:hover img,
    #brand-m .col:hover img{
        transform:scale(.9524)
    }

    #brand>a,
    #brand-m>a{
        margin-top: 30px;
        width: 30%;
        border-radius: 50px;
    }

    /* ============================================================================================================================
    mediaQuery 
    ============================================================================================================================= */
    @media screen and (max-width:767px) {

        
        /* Another way to ensure logo and hamburger menu is in navbar (white) */
        /* nav .container {
            padding: 0 10px !important;
        } */
        /* when hover on menu, submenu appears ...?*/
        /* #collapsibleNavbar{
            position: fixed !important;
            width: 100%;
            height: 100% ;
            background-color: white;
            z-index: 10 ;
            top: 0;
            left: 0;
        } */

        /* ============================================================================================================================
        gnb 
        ============================================================================================================================= */
        #collapsibleNavbar-m{
            opacity: 1 !important;
            display:none !important;    position: fixed !important;
            width: 100%;
            height: 100% ;
            background-color: white;
            z-index: 10 ;
            top: 0;
            left: 0;
        }
        #collapsibleNavbar-m.show {
            display: block !important;
        }

        /* #collapsibleNavbar-m .accordion:after {
            content: "\f054";
            font-family: "Font Awesome 5 Free"; 
            font-weight: bold; 
            margin-left: 5px; 
            color: #777;
            float: right;
        }        */

        /* #collapsibleNavbar-m .active:after {
            content: "\f078";  /* Unicode for FontAwesome's angle-down
        } */


        
        /* ============================================================================================================================
        gnb 
        ============================================================================================================================= */
        .slide{
            text-align: center !important;
        }
        .slider .slide img {
            width: 100%;
            height: 850px;
            border-radius: 20px;
            object-fit: cover;
            object-position: top;
        }

        #wrap{
            max-width: 600px;
            margin: auto !important;
        }

        .darker:after {
            content:"";
            position: absolute;
            top:0;
            bottom:0px;
            left:0px;
            right:0px;
            background:black;
            opacity: .15;
            border-radius: 20px;
        }

        .slider-pc{display: none !important;}  
        .slider-m{display: block !important;}   

        .slide .caption,
        .slide .more{      
            width: 100%;
        }

        .slide .caption{     
            top: 675px;
            left: 0px;
        }

        /* .slide .more{  
            top: 750px;
            left: 0px;
        } */

        .slide .more a{
            width: 90% !important;
        }

        /* ============================================================================================================================
        Month's pick 
        ============================================================================================================================= */
        #month-pick .thumbnail{
            background: white;
        }

        
        #month-pick>.row>.col-md-4{
            margin-bottom: 30px;
        }
        #month-pick{
            padding: 0 0px;
        }
        /* ============================================================================================================================
        Story & Tomorrow
        ============================================================================================================================= */
        #story, #tomorrow{
            /* Debugging */
            /* background-color: blue; */
            padding-top: 0px;
            padding-bottom: 0px;
            margin-top: 0px;
            margin-bottom: 150px;
            width: 100%;
        }

        #story.container,
        #tomorrow.container {
            max-width: 100% !important; /* Override Bootstrap's default max-width */
            padding-right: 0 !important; /* Remove default container padding */
            padding-left: 0 !important; /* Remove default container padding */
        }

        #story .row,
        #tomorrow .row{
            display: flex !important;
            align-items: center !important;
            /* background-color: green; */
            /* The container is 600 px  */
            height: 500px;
            width: 100%;
            margin-left: 0px;
            margin-right: 0px;
            
        }

        /* col-md-6 자세히 보기 formatting */
        .writing .btn{
            width: 90%;
            border-radius: 20px;
        }

        /* col-md-6 style */
        #story .col-md-6,
        #tomorrow .col-md-6{
            width: 100%;
        }

        #story .writing,
        #tomorrow .writing{
            /* padding: 30px 30px 10px 30px; */
            background-color: white;
            border-radius: 20px !important;
            padding: 10px;
            height: auto;
        }


        /* Story-image */
        #story .col-md-6 img,
        #tomorrow .col-md-6 img{
            width: 100%;
            height: 100%;
            border-radius: 0px;
            object-fit: cover;
        }
        
        #story .col-md-6:nth-child(1),
        #tomorrow .col-md-6:nth-child(1){  
            margin-right: 0 !important;   
            width: 90%;
            z-index: 1; 
        }
        #story .row,
        #tomorrow .row{
            justify-content: center;
        }

        #story .col-md-6:nth-child(2),
        #tomorrow .col-md-6:nth-child(2){
            margin-top: -50px !important;
            z-index: 0; 
        }

        /* ============================================================================================================================
        Brand 
        ============================================================================================================================= */
        #brand{display: none !important;}
        #brand-m{display:block !important;}
        
        #brand-m.container{
            padding: 30px;
        }

        #brand-m .col{
            width: 150px;
            height: 150px;
        }

        #brand-m .col img{
            width: 96%;
            height: 96%;
        }
        #brand-m>a{
            width: 100%;
        }

        .accordion {
            background-color: white;
            color: BLACK;
            /*change cursor shape when hovering over accordion*/
            /* encourage users to click */
            cursor: pointer;  
            padding: 18px;
            width: 100%;
            border: none; 
            font-weight: bold;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            --bs-accordion-active-bg: white;
        }

        /* ===========================================================================
        Footer
        ============================================================================== */
        /* Footer display */
        #footer-pc{display: none !important;}
        #footer-m{display: block !important;}

        /* Footer accordion color change */
        #footer-m button,
        #footer-m div{
            background: black;
            color: white;
        }

        /* Footer accordion text formatting */
        #footer-m p{
            text-align: left;
        }

        
        .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
        
    
    }
    /*==============================================================================
    /mediaQuery
    ================================================================================ */





    /*==============================================================================
    Footer
    ================================================================================ */

    /* Footer display*/
    
    #footer-m{display: none;}
    
    /* Main footer container */
    footer.container-fluid{
        margin-top: 30px;
        padding-top: 100px;
        background-color: black;
        min-height: 400px;
    }

    footer h6{
        text-align: center;
    }

    /* Footer > container > row.div > col-md-2 or col-md-6 > ul */
    footer ul{
        list-style: none;
        opacity: 1;
        /* color: gray; */
    }

    /* Footer > container > row.div > col-md-2 or col-md-6 > ul > li*/
    footer ul li{
        color: white;
    }

    /* Footer > container > row.div > col-md-2 > font-awesome buttons */
    footer div div div i{
        opacity: 1;
        color: white;
        border: 1px solid white;
        border-radius: 50%;
        font-size: 1.5em;
        padding: 1%;
    }

    /* Footer > container > #copyright */
    #copyright>p{
        margin-top: 30px;
        margin-bottom: 0px;
        opacity: 1;
        color: white;
        text-align: right;
    }

    /* Accordion Arro up and down */
    #footer-m .accordion:after {
            content: "\f107"; /* Unicode for FontAwesome's angle-right */
            font-family: "Font Awesome 5 Free"; /* or the correct Font Awesome font */
            font-weight: bold; /* necessary for solid style */
            margin-left: 5px; /* space between text and chevron */
            color: #777;
            float: right;
        }
    
    #footer-m .active:after {
            content: "\f106";  /* Unicode for FontAwesome's angle-down */
    }