@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap');

.clearfix::after {content: ""; display: table; clear: both}
.hidden{width: 0;height: 0;overflow: hidden;visibility: hidden;opacity: 0;
    font-size: 0; line-height: 0; text-indent: -9999px;
    position: absolute; left: -9999px
}

* {box-sizing: border-box}

a:link, a:visited, a:hover, a:active {text-decoration:none}
a{color: inherit}

body{font: 15px/1.5 'Noto Sans KR',"돋움", Dotum, AppleGothic, sans-serif;
    color: #1a171b; letter-spacing: -0.5px
}

.skip a{ width: 100%;height: 30px;
    position: absolute; left: 0;top: -100px;
    text-align: center;line-height: 30px;
    background-color: rgba(255, 0, 0, 0.5)
}
.skip a:focus {top: 0}

/* header-S */
#header{width:100%}
.header-wrap{width: 1200px; height: 80px; margin: 0 auto ; padding: 0 20px}
#header h1{width: 274px; height: 52px; float: left; margin: 14px 0;
    background: url(../img/logo-patagonia.png) no-repeat 0 0;
    background-size: contain    
}
#header h1 a {display: block; width: 100%; height: 58px;
    text-indent: -9999px
}
#header .header-top{float: right; margin-top: 25px}
.top-menu li {float: left}
.top-menu a {font-size: 20px;
    transition: all 0.3s
}
.top-menu li+li {margin-left: 30px}
.top-menu li:hover a{color: #ef4923}

#gnb{width: 100%; height: 40px;
    background-color: #ef4923;
    position: relative
}
.gnb-wrap{width: 1200px; height: auto; margin: 0 auto;
    position: relative
}
.gnb-wrap>ul>li{width: 25%; float: left; padding-top: 9px;
    text-align: center
}
.gnb-wrap>ul>li>a{display: block;   
    font-weight: 600; font-size: 15px;
    transition: all 0.4s
}
.gnb-wrap>ul>li>a:hover { color: #fff; 
    transform: scale(1.07)
}
.gnb-wrap>ul>li>ul{display:none; width: 25%; float: left; 
    z-index: 20
}
.menu1>ul{position: absolute; left: 0; top: 55px}
.menu2>ul{position: absolute; left: 25%; top: 55px}
.menu3>ul{position: absolute; right: 25%; top: 55px}
.menu4>ul{position: absolute; right: 0; top: 55px}
.gnb-wrap>ul>li>ul>li>a{display: block;
    font-weight: 600;
    transition: all 0.4s
}
.gnb-wrap>ul>li>ul>li+li {margin-top: 10px}
.gnb-wrap>ul>li>ul>li>a:hover {color: #ef4923;
    transform: scale(1.02)
}
.gnb-bg{display: none; width: 100%; height: 200px; 
    position: absolute; left: 0; top: 40px; z-index: 10;
    background-color: #fff
}
.gnb-m{display: none}
/* header-E */

/*visual-S*/
#visual{width:100%; height: auto; margin: 0 auto;
    position: relative
}
#visual>p{width: 100%; height: 700px; 
    background: url(../img/bigvisual-3.jpg) no-repeat center 0;
    background-size: cover    
}
.v-txt{width: 1200px; margin: 0 auto;
    text-align: center
}
.v-txt p:first-child {width: 1200px; margin-left: -600px;
    position: absolute; left: 50%; top: 270px; 
    font-weight: 700; font-size: 300%; color: #fff
}
.v-txt p:last-child {width: 120px; height: 40px; padding-top: 10px; margin-left: -60px;
    position: absolute;left: 50%; top: 430px; 
    border: 1px solid #fff; border-radius: 10px;
    transition: all 0.3s
}
.v-txt p:last-child a{display: block; width: 100%; height: 100%; 
    font-size: 12px; font-weight: 500; color:#fff
}
.v-txt p:last-child:hover {background-color: rgba(208, 208, 208, 0.4)}
/*visual-E*/

/*main-S*/
#content{width: 1200px; margin: 0 auto}
#content section{margin: 50px 0}

/*LEFT*/
.left{width: 25%; float: left}
.banner li{width: 100%; height: 80px; padding-top: 30px;
    border-radius: 15px; 
    text-align: center;
    box-shadow: 1px 1px 3px rgba(208, 208, 208, 0.5);
    transition: all 0.4s
}
.banner li:nth-child(1){
    background: url(../img/banner-patagonia05.jpg) no-repeat -120px -200px
}
.banner li:nth-child(2){
    background: url(../img/banner-patagonia03.jpg) no-repeat center center
}
.banner li:nth-child(3){
    background: url(../img/banner-patagonia11.jpg) no-repeat 0 0
}
.banner li:nth-child(4){
    background: url(../img/banner-patagonia07.jpg) no-repeat center center
}
.banner li:nth-child(5){
    background: url(../img/banner-patagonia08.jpg) no-repeat center -65px
}
.banner li+li {margin-top: 15px}
.banner a{width: 100%; height: 100%; display: block;
    font-size: 16px; color: #fff; font-weight: 700
}
.banner li:hover a{transform: scale(1.05);
    color: #ef4923
}

/*CENTER*/
.center{width: 50%; height: auto; float: left}
.center article{padding: 0 30px; margin-bottom: 0px}
.center h1{margin-bottom: 15px;
    font-size: 20px; line-height: 30px; font-weight: 600
}
.news{position: relative}
.news ul{width: 100%}
.news li{color: #777; font-size: 14px}
.news li+li{margin-top: 15px}
.news strong{margin-right: 10px;
    font-weight: 600
}
.news>ul a{display: inline-block; width: 70%;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: all 0.3s
}
.news span{float: right}
.news p:hover a{transform: scale(1.01);
    color:#ef4923
}
.news div{width: 50px; height: 30px;
    position: absolute; right: 0; top: 0
}
.news div a{padding-top: 5px;
    font-size: 15px;  color: #1a171b
}
.news div:hover a{color: #ef4923}

.item{margin-top: 40px;
position: relative
}
.item ul{width: 100%; text-align: center}
.item li{width: 33.333%; height: auto; float: left}
.item li p{font-size: 14px; font-weight: 600; text-align: center; color: #666;   
    transition: all 0.3s
}
.item li a{display: block; 
    transition: all 0.3s
}
.new p:first-child{width: 100%; height: 150px;
    background: url(../img/bestseller-04.jpg) no-repeat center center; background-size: contain;
    text-indent: -9999px
}
.best p:first-child{width: 100%; height: 150px;
    background: url(../img/bestseller-05.jpg) no-repeat center center; background-size: contain;
    text-indent: -9999px
}
.seller p:first-child{width: 100%; height: 150px;
    background: url(../img/03.jpg) no-repeat center center; background-size: contain;
    text-indent: -9999px
}
.item li:hover a{transform: scale(1.03)}
.item li:hover p{font-weight: 700; color: #ef4923}
.item div{width: 50px; height: 30px;
    position: absolute; right: 0; top: 0
}
.item div a{font-size: 15px; padding-top: 5px; color: #1a171b}
.item div:hover a{color: #ef4923}

/*RIGHT*/
.right{float: right; width: 25%}
.right article+article{margin-top: 15px}
.right h1{margin-bottom: 10px;
    font-size: 20px; line-height: 30px; font-weight: 600; text-align: center
}
.video video{width: 100%;
    box-shadow: 1px 1px 3px rgba(208, 208, 208, 0.5)
}
.video p{text-align: center; font-weight: 600; color: #777; font-size: 13px
}
.SUTT p:first-child{width: 100%; height: 150px; margin: 0 auto;
    background: url(../img/SUTT03.jpg) no-repeat center center; background-size: cover; 
    box-shadow: 1px 1px 3px rgba(208, 208, 208, 0.5);
    text-indent: -9999px
}
.SUTT p:last-child{padding-top: 5px;
    text-align: center; font-weight: 600; color: #777; font-size: 13px
}
/*main-E*/

/* footer-S */
#footer {width: 100%; height:auto; 
    background-color: #eee; 
    font-size: 12px
}
.footer-wrap {width: 1200px; margin: 0 auto; padding: 30px 0}
.footer-wrap h1{width: 250px; height: 30px; float: left; margin:25px 10px 0 0; 
    background: url(../img/logo-patagonia.png) no-repeat center center; background-size: contain;
    text-indent: -9999px
}
.sns{float: right; padding-right: 30px}
.sns li{float: left}
.sns li+li {margin-left: 20px}
.sns a{display: block; 
    font-size: 35px; color: #555;
    transition: all 0.4s 
}
.sns li:hover a{color:#ef4923}
.addr{float: left; padding-top: 5px} 
.addr li{float: left}
.addr li+li{margin-left: 10px}
.copy{margin-top: 10px; color: #888}
/* footer-E */




@media screen and (min-width:800px) and (max-width:1200px) { 
    /* header-S */   
    .header-wrap{width: 100%}
    .gnb-wrap{width: 100%}    
    /* header-E */

    /*visual-S*/   
    .v-txt{width: 100%}
    .v-txt p:first-child {width: 100%; margin: 0; 
        position: absolute; left: 0
    }
    /*visual-E*/
    
    /*main-S*/
    #content{width: 100%}
    
    .left{width: 25%; padding: 0 0 0 30px}
    .left ul{width: 100%}
    .banner li+li {margin-top: 30px}
    .banner a{font-size: 14px}

    .center{width: 70%; float: right}
    
    .right{width: 100%; padding: 0 30px}
    .right h1{text-align: left}
    .video p{display: none}
    .SUTT p:first-child{width: 100%; height:470px;
        background: url(../img/SUTT02.jpg) no-repeat center center
    }
    .SUTT p:last-child{display: none}
    /*main-E*/

    /* footer-S */
    .footer-wrap {width: 100%}
    /* footer-E */
}



@media screen and (max-width:799px) { 
    /* header-S */
    #header{width: 100%}
    #header h1 {width: 150px; float: none; margin: 50px auto 0 auto}   
    .header-wrap{width: 100%; height: 50px}
        
    #gnb{display: none}
    .header-top {display: none}
  
    #gnb-m {display: block; width: 30px;height: 24px}
    #gnb-m p {position: absolute; top: 52px; right: 30px; z-index: 100;}
    #gnb-m span {display: block; width: 30px; height: 3px;
        background-color: #ddd; margin-bottom: 8px;
        transition: all 0.3s
    }
    #gnb-m>p>a:hover span:nth-child(1) {transform: translateY(11px)}
    #gnb-m>p>a:hover span:nth-child(2) {transform: rotate(90deg)}
    #gnb-m>p>a:hover span:nth-child(3) {transform: translateY(-11px)}
    #gnb-m a.on span:nth-child(1) {transform: translateY(11px)}
    #gnb-m a.on span:nth-child(2) {transform: rotate(90deg)}
    #gnb-m a.on span:nth-child(3) {transform: translateY(-11px)}
    .gnb-m {width: 300px;height: 100%;padding: 100px 80px 100px 0;box-sizing: border-box;
        position: fixed;top: 0;left: -300px; z-index: 998;
        font-size: 16px;text-align: right;
        background-color: #fff;

    }
    .gnb-m ul>li>a {font-weight: 500; line-height: 40px; color: #fff}
    .gnb-m ul>li>ul>li>a {font-weight: 200;font-size: 12px; line-height: 18px;  color: #ef4923}
    /* header-E */

    /*visual-S*/
    #visual{width: 100%;  margin: 0 auto;
        position: relative
    }
    .v-txt p:first-child{width: 100%; margin: 0; 
        position: absolute; left: 0; top: 310px;
        font-size: 200%
   }
    .v-txt{width: 100%}   
    /*visual-E*/
    
    /*main-S*/
    #content{width: 100%; padding: 30px 10px 10px 10px}
    #content section{margin: 20px 0}    
    main section {margin: 0}
    
    
    .left{width: 100%}    
    .banner li:nth-child(1) {
        background: url(../img/banner-patagonia05.jpg) no-repeat center -130px; background-size: cover}
    .banner li:nth-child(2) {background-size: cover}
    .banner li:nth-child(3) { background-size: cover}
    .banner li:nth-child(4) {background-size: cover}
    .banner li:nth-child(5) {background-size: cover}  
        
    .center{width: 100%;margin-right: 0; height: 400px}
    .item li p{font-size:  12px}
    .center article{padding: 0}
    .center section{width: 100%;
        position: absolute; left: 0;top: 50px;
        background-color: #fff
    }
    .news .tit{right: 0}

    .right{width: 100%; padding-top: 70px}
    .SUTT p:first-child{width: 100%; height: 470px;
        background: url(../img/SUTT02.jpg) no-repeat center center
    }
    .SUTT p:last-child{display: none}
    /*main-E*/

    /* footer-S */
    .footer-wrap {width: 100%}
    .footer-wrap h1{float: none; margin: 0 auto}
    .sns{display: none}
    .addr{float: none; margin-top: 20px;
        text-align: center
    }
    .addr ul{text-align: center}
    .addr li{float: none; display: inline-block}
    /* footer-E */
}