@charset "utf-8";
@font-face {font-family: "Acme-Regular"; src: url("../font/Acme-Regular.eot") format("embedded-opentype"), url("../font/Acme-Regular.woff") format("woff");}
@font-face {font-family: "SpoqaHanSans-Bold"; src: url("../font/SpoqaHanSans-Bold.eot") format("embedded-opentype"), url("../font/SpoqaHanSans-Bold.woff") format("woff");}
@font-face {font-family: "SpoqaHanSans-Regular"; src: url("../font/SpoqaHanSans-Regular.eot") format("embedded-opentype"), url("../font/SpoqaHanSans-Regular.woff") format("woff");}

/*animation*/
@keyframes introTop {
    0% {transform: translateY(0); 
    }100% {transform: translateY(-100%);}
}
.introTop {animation: introTop .5s forwards;}
@keyframes menuDown {
     0% {transform: translateY(-100%); 
    }100% {transform: translateY(0);}
}
.menuDown {animation: menuDown .5s forwards;}
@keyframes slideUp {
    from{transform: translateY(20px);
    }to{opacity: 1;}
}
.slideUp {animation: slideUp .5s forwards;}
@keyframes slideRight {
    0% {opacity: 0; transform: translateX(-100%); 
    }100% {opacity: 1; transform: translateX(0);}
}
.slideRight {display: block; animation: slideRight .5s forwards;}
@keyframes slideLeft {
     0% {opacity: 1; transform: translateX(0); 
    }100% {opacity: 0; transform: translateX(-100%);}
}
.slideLeft {animation: slideLeft .5s forwards;}
@keyframes fadeIn {
	100% {opacity: 1;}
}


/* reset */
* {margin: 0; padding: 0; box-sizing: border-box;}
ul {list-style: none;}
a {text-decoration: none;}
html {font-size: 0.625em; line-height: 1;}
body {font-family: "SpoqaHanSans-Regular", "SpoqaHanSans-Bold",sans-serif; color: #fff; background: #393434;}
h3 {font-family: "Acme-Regular", sans-serif;}
button {background: none; border: none; cursor: pointer;}
img {border: none;}
.wrap {width: 100%;}
.blind {position: absolute; text-indent: -99999px; line-height: 0; font-size: 0;}
.clear {display: block; clear: both; content: "";}


/* bxSlider */
.bx-wrapper {box-shadow:none; border:none;}
.bx-viewport {height: 470px !important;}
.bx-prev, .bx-next {display: none;}
.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {bottom: 10px;}
.bx-wrapper .bx-pager.bx-default-pager a {background: rgba(255,255,255,.7);}
.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover {background: #eaa73e;}


/* header */
header {position: fixed; width: 100%; height: 60px; background-color: #241e1e; z-index: 6;}
header.on {background-color: rgba(255,255,255,0.6);}
header h1 {width: 150px; height: 27px; margin: 18px auto; text-indent: -99999px;}
header h1 a {position: absolute; display: block; width: 150px; height: 27px; background: url("../img/Godiva_headerLogo2.png") no-repeat center; background-size: contain; z-index: 5;}
header h1.on a {background: url("../img/godiva_black_logo.png") no-repeat center;}
header button {position: absolute; width: 60px; height: 60px; top: 0; right: 0; background:none; border: none; transition: .2s; z-index: 5; padding: 19px 15px;}
header button span {display: block; width: 30px; height: 1px; background-color:#fff; transition: .5s;}
header button.onM span {background: #241e1e;}
header button span:nth-child(1) {text-indent: -99999px;}
header button span:nth-child(2) {margin: 8px auto;}
header button.on span:nth-child(1) {transform: rotate(45deg);}
header button.on span:nth-child(2) {display: none;}
header button.on span:nth-child(3) {transform: rotate(-45deg); margin-top:-1px;}
header nav {display: none; position: fixed; width: 100%; height: 100%; background-color: #241e1e; top: 0; left: 0; z-index:4;}
header nav.on {display: block; /*animation: slideDown*/}
header nav > ul {width: 100%; margin-top: 150px; text-align: center;}
header nav > ul > li > a {display: block; width: 100%; font-size: 3.4rem; color: #fff; margin-bottom: 50px;}
header nav > ul > li:hover > a, header nav > ul > li:focus > a {color: #eaa73e;}
header nav > ul ul {display: none;}
header nav > ul ul li > a {display: block; width: 100%; font-size: 2.5rem; color: #fff; margin-bottom: 30px;}
header nav > ul ul li:hover > a, header nav > ul ul li:focus > a {color: #eaa73e;}
header nav > ul ul li:last-child a {margin-bottom: 50px;}
header nav span a {display: none;}


/* main */
.main .intro {display: none;}
.main .pc_pager {display: none;}
.mainSlider {padding-top: 60px;}
.mainSlider #main01 .mainImg {position: relative; width: 100%; height: 410px; background: url("../img/main01.jpg") no-repeat center; background-size: cover;}
.mainSlider #main02 .mainImg {position: relative; width: 100%; height: 410px; background: url("../img/main02.jpg") no-repeat center; background-size: cover;}
.mainSlider #main01 .mainTxt {animation: slideUp 1s forwards; opacity:0;}
.mainSlider .mainTxt {position: absolute; width: 100%; height: 200px; text-align: center; top: 200px;}
.mainSlider .mainTxt h3 {font-family: "SpoqaHanSans-Bold", sans-serif; font-size: 3rem; line-height: 3.6rem;}
.mainSlider .mainTxt p {font-size: 1.4rem; line-height: 1.8rem; margin: 20px 0 20px;}
.mainSlider .mainTxt button {width: 178px; height: 46px; font-size: 1.5rem; color: #fff; border: 1px solid #fff; transition: .5s;}
.mainSlider .mainTxt button:hover, .mainSlider .mainTxt button:focus {color: #241e1e; background: #fff;}
.mainSlider #main02 .mainTxt {height: 213px; top: 170px; opacity: 0;}


/* #best */
#best {padding-top: 30px; padding-bottom: 45px;}
#best h3 {margin-bottom: 50px; font-size: 4rem; color: #eaa73e; text-align: center;}
#best h3 span {margin: 0 5.63%;}
#best .slider li a {position: relative; display: block; width: 75%; height: 200px; margin: 0 auto;}
#best .slider li:nth-child(1) > a {background: url("../img/best01.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(2) > a {background: url("../img/best02.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(3) > a {background: url("../img/best03.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(4) > a {background: url("../img/best04.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(5) > a {background: url("../img/best05.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(6) > a {background: url("../img/best06.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(7) > a {background: url("../img/best07.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(8) > a {background: url("../img/best08.jpg") no-repeat center; background-size: cover;}
#best .slider li:nth-child(9) > a {background: url("../img/best09.jpg") no-repeat center; background-size: cover;}
#best .slider .caption {position: absolute; width: 100%; height: 40px; background-color: rgba(0,0,0,.5); left: 0; bottom:0;}
#best .slider .caption span {display: block; float: left;}
#best .slider .caption .rank {font-family: "Acme-Regular", sans-serif; font-size: 3rem; color: #eaa73e; margin-left: 8.13%; margin-right: 9.38%; line-height: 40px;}
#best .slider .caption .rank + span {width: 163px; font-family: "SpoqaHanSans-Bold", sans-serif; font-size: 1.4rem; color: #fff; line-height: 1.8rem; margin-top: 16px;}
#best .slider li:nth-child(2) .caption, #best .slider li:nth-child(3) .caption, #best .slider li:nth-child(5) .caption, #best .slider li:nth-child(6) .caption,#best .slider li:nth-child(8) .caption, #best .slider li:nth-child(9) .caption {height: 60px;}
#best .slider li:nth-child(2) .caption .rank, #best .slider li:nth-child(3) .caption .rank, #best .slider li:nth-child(5) .caption .rank, #best .slider li:nth-child(6) .caption .rank,#best .slider li:nth-child(8) .caption .rank, #best .slider li:nth-child(9) .caption .rank {line-height: 60px;}

/* #new */
#new {position: relative; padding-top: 45px; padding-bottom: 310px;}
#new h3 {margin-bottom: 50px; font-size: 4rem; color: #c83444;text-align: center;}
#new h3 span {margin: 0 8.44%;}
#new .newImg {width: 65.63%; height: 280px; margin: 0 auto; background: url("../img/new.jpg") no-repeat center; background-size: cover; opacity: 0;}
#new .newTxt {position: absolute; width: 90.63%; height: 315px; padding: 23px 0 27px 0; background-color: #c83444; top: 350px; left: 4.69%; opacity: 0;}
#new .newTxt > span {display: block; width: 2px; height: 48px; background: #fff; margin-left: 4.14%; float: left;}
#new .newTxt div {margin-left: 3.79%; float: left;}
#new .newTxt div p:nth-child(1) {font-family: "SpoqaHanSans-Bold", sans-serif; font-size: 2.5rem; line-height: 3rem; width: 202px;}
#new .newTxt div p:nth-child(2) {font-size: 1.5rem; margin: 14px 0 25px;}
#new .newTxt div span {display: block; width: 125px; height: 1px; margin-left: 4.48%; background: #fff;}
#new .newTxt div p:nth-of-type(3) {font-size: 1.4rem; line-height: 1.8rem; margin: 26px 0 27px;}
#new .newTxt div button {width: 163px; height: 43px; border: 1px solid #fff; font-size: 1.4rem; color: #fff;}
#new .newTxt div button:hover, #new .newTxt div button:focus {background: #fff; color: #241e1e;}

/* #love */
#love {padding-top: 45px; padding-bottom: 100px;}
#love h3 {font-size: 4rem; color: #c9ad87; margin-bottom: 40px; text-align: center;}
#love h3 span {margin: 0 3.91%;}
#love .loveBox {width: 100%; opacity: 0;}
#love .loveBox .Tag {width: 100%; height: 80px; margin-bottom: 30px; background: #c9ad87;}
#love .loveBox .Tag ul {width: 190px; height: 80px; margin: 0 auto;}
#love .loveBox .Tag li {float: left; margin: 13px 25.8% 13px 0;}
#love .loveBox .Tag li:nth-child(even) {margin-right: 0;}
#love .loveBox .Tag li a {display: inline-block; color: #fff; font-size: 1.5rem;}
#love .loveBox .instaImg {width: 78.13%; height: 250px; margin: 0 auto;}
#love .loveBox div:nth-child(2) a {display: block; width: 100%; height: 250px; background: url("../img/love01.jpg") no-repeat center; background-size: cover;}
#love .loveBox div:nth-child(3) a {display: block; width: 100%; height: 250px; margin-top: 10px; background: url("../img/love02.jpg") no-repeat center; background-size: cover;}
#love .loveBox div:nth-child(4) a {display: block; width: 100%; height: 250px; margin-top: 10px; background: url("../img/love03.jpg") no-repeat center; background-size: cover;}
#love .loveBox .instaImg .plus {display: none;}
#love .loveBox button {position: relative; display: block; width: 78.13%; height: 100px; background: #c9ad87; margin: 20px auto 0; font-family: "SpoqaHanSans-Bold", sans-serif; font-size: 3.5rem; color: #fff; line-height: 0; transition: .5s;}
#love .loveBox button:hover {background: #a18a6c;}
#love .loveBox button span:nth-child(1) {position: absolute; top: 50px; left: 14%;} 
#love .loveBox button span:nth-child(2), #love .loveBox button span:nth-child(3) {position: absolute; width: 1px; height: 40px; background: #fff; top: 30px; right: 18%;}
#love .loveBox button span:nth-child(2) {transform: rotate(90deg);}

/* footer */
footer {width: 100%; height: 120px; background: #fff; border-bottom: 6px solid #241e1e; text-align: center; padding-top: 20px;}
footer .footerLogo {display: none;}
footer .snsIcon {display: block; width: 100%;}
footer .snsIcon a {padding: 0 13px;}
footer .snsIcon a img {width: 30px;}
footer ul {width: 269px; height: 31px; margin: 7px auto 0;}
footer ul li {float: left;}
footer ul li a {padding: 0 11px; font-size: 1.2rem; color: #241e1e; line-height: 31px;}
footer ul li:nth-child(4) a, footer ul li:nth-child(5) a {display: none;}
footer small {display: block; font-size: 1rem; color: #241e1e;}


/* gte 768px */
@media screen and (min-width: 768px){
    
    /* bx slider */
    .bx-viewport {height: 960px !important;}
    
    /* header */
    header {width: 100%; height: 80px;}
    header h1 {width: 147px; height: 25px; margin-top: 27px;}    
    header h1.on a {background: url("../img/godiva_black_logo.png") no-repeat center;}
    header h1 a {width: 147px; height: 25px;}
    header button {width: 80px; height: 80px; padding: 30px 25px;}
    header button span:nth-child(2) {margin: 9px auto;}
    header nav {position: fixed; top: 0; left: 0;}
    header nav.on {display: block;}
    header nav > ul {margin: 143px 0 186px 13.8%; text-align: left;}
    header nav > ul > li > a {font-size: 4rem; margin-bottom: 37px;}
    header nav > ul ul {position: absolute; top: 143px; left: 58.59%;}
    header nav > ul ul li > a {font-size: 2rem; margin-bottom: 26px;}
    header nav span {position: absolute; top: 213px; right: 24px;}
    header nav span a {display: block; width: 100%; padding: 15px 0;}
    header nav span a img {width: 25px;}
    
    /* .main */
    .mainSlider {padding-top: 80px;}
    .mainSlider #main01 .mainImg, .mainSlider #main02 .mainImg{height: 880px;}
    .mainSlider .mainTxt {height: 225px; top: 476px;}
    .mainSlider .mainTxt h3 {font-size: 4rem; line-height: 4.8rem;}
    .mainSlider .mainTxt p {font-size: 2.5rem; line-height: 3.3rem; margin: 25px 0 50px;}
    .mainSlider .mainTxt button {width: 194px; height: 50px; font-size: 2.5rem;}
    .mainSlider #main02 .mainTxt {height: 264px; top: 437px;}
  

    /* #best */
    #best {position: relative; padding-top: 80px; padding-bottom: 1289px;}
    #best h3 {font-size: 6rem; margin-bottom: 90px;}
    #best h3 span {margin: 0 3.9%;}
    #best .slider {opacity: 0;}
    #best .slider li a {position: absolute; display: inline-block; width: 46.88%; height: 300px;}
    #best .slider li:nth-child(odd) a {left: 3.12%;}
    #best .slider li:nth-child(even) a {right: 3.12%;}
    #best .slider li:nth-child(2) a {top: 269px;}
    #best .slider li:nth-child(3) a {top: 512px;} 
    #best .slider li:nth-child(4) a {top: 569px;}
    #best .slider li:nth-child(5) a {top: 812px;} 
    #best .slider li:nth-child(6) a {top: 869px;}
    #best .slider li:nth-child(7) a {top: 1112px;} 
    #best .slider li:nth-child(8) a {top: 1169px;}
    #best .slider li:nth-child(9) a {display: none;}
    #best .slider .caption {opacity: 0; height: 100%; border-bottom: 5px solid #eaa73e; text-align: center; transition: .2s;}
    #best .slider li:hover .caption, #best .slider li:focus .caption {opacity: 1;}
    #best .slider .caption .rank {width: 100%; font-size: 6rem; margin: 87px 0 0;}
    #best .slider .caption .rank + span {width: 100%; font-size: 2.5rem; line-height: 3.3rem; margin-top: 29px; padding: 0 2.6%;}
    #best .slider li:nth-child(2) .caption, #best .slider li:nth-child(3) .caption, #best .slider li:nth-child(5) .caption, #best .slider li:nth-child(6) .caption,#best .slider li:nth-child(8) .caption, #best .slider li:nth-child(9) .caption {height: 100%;}
    
    /* #new */
    #new {padding-top: 50px; padding-bottom: 480px;}
    #new h3 {font-size: 6rem; margin-bottom: 92px;}
    #new h3 span {margin: 0 5.86%;}
    #new .newImg {position: absolute; width: 39.06%; height: 400px; margin: 0 0 0 3.13%; z-index: 1;}
    #new .newTxt {width: 60.68%; height: 400px; top: 232px; left: 36.19%;}
    #new .newTxt > span {width: 3px; height: 48px; margin-left: 14%;}
    #new .newTxt div {margin-left: 3%;}
    #new .newTxt div p:nth-child(1) {font-size: 3rem; line-height: 3.6rem; width: 350px;}
    #new .newTxt div p:nth-child(2) {font-size: 2.2rem; margin: 20px 0 39px;}
    #new .newTxt div span {width: 240px; margin-left: 4.29%;}
    #new .newTxt div p:nth-of-type(3) {font-size: 2rem; line-height: 2.6rem; margin: 39px 0 38px;}
    #new .newTxt div button {width: 218px; height: 58px; font-size: 2.2rem;}
    
    
    /* #love */
    #love {padding-top: 50px; padding-bottom: 110px;}
    #love h3 {font-size: 6rem; margin-bottom: 89px;}
    #love h3 span {margin: 0 3.13%;}
    #love .loveBox {text-align: center;}
    #love .loveBox .Tag {height: 80px; margin-bottom: 60px;}
    #love .loveBox .Tag ul {width: 677px; height: 80px; margin: 0 auto;}
    #love .loveBox .Tag ul li {margin: 0 5.07%;}
    #love .loveBox .Tag li:first-child {margin-left: 0;}
    #love .loveBox .Tag li:nth-child(2) {margin-right: 5.07%;}
    #love .loveBox .Tag ul li a {font-size: 2.5rem; line-height: 80px;}
    #love .loveBox .instaImg {display: inline-block; width: 32.55%; height: 250px;}
    #love .loveBox div:nth-child(3) a, #love .loveBox div:nth-child(4) a {margin-top: 0;}
    #love .loveBox .instaImg .plus {opacity:0; display: block; height: 100%; padding: 124px 0; background: rgba(0,0,0,.5); transition: .2s;}
    #love .loveBox .instaImg div:hover,  #love .loveBox .instaImg div:focus {opacity:1;}
    #love .loveBox .instaImg .plus span {display: block; width: 80px; height: 2px; background: #fff; margin: 0 auto;}
    #love .loveBox .instaImg .plus span:nth-child(2) {transform: rotate(90deg);}
    #love .loveBox button {display: none;}
    
    /* footer */
    footer {position: relative; height: 100px; padding-top: 15px; text-align: left;}
    footer .snsIcon {position: absolute; width: 195px; top: 20px; right: 3.13%}
    footer .snsIcon a {padding: 0 14px;}
    footer .snsIcon a:last-child {padding-right: 0;}
    footer .snsIcon a img {width: 40px;}
    footer ul {width: 443px; margin: 0 0 5px 3.13%;}
    footer ul li a {font-size: 1.5rem;}
    footer ul li a:first-child {padding-left: 0;}
    footer ul li:nth-child(4) a, footer ul li:nth-child(5) a {display: inline;}
    footer small {margin-left: 3.13%;}
}

/* gte 1100px */
@media screen and (min-width: 1100px){
    
    
    /* header */
    header {width: 87px; height: 100%;}
    header h1 {width: 65px; height: 21px; margin: 28px auto 0;}
    header h1 a {width: 65px; height: 21px; background: url("../img/Godiva_headerLogo1.png") no-repeat center; background-size: cover;}
    header button {width: 87px; height: 87px; top: 50%; padding: 0; margin-top: -27px;}
    header button span {position: absolute; width: 54px; transform: rotate(90deg); top: 43px;}
    header button span:nth-child(1) {left: 9px;}
    header button span:nth-child(2) {left: 17px; margin: 0;}
    header button span:nth-child(3) {left: 25px;}
    header button.on span:nth-child(1) {left: 17px;}
    header button.on span:nth-child(3) {left: 16px; margin-top: 0;}
    header nav {display: block; position: fixed; height: 100%; transform: translateX(-100%);}
    header nav > ul {margin: 158px 0 0 17.7%; opacity: 0;}
    header nav > ul.on, header nav span.on {animation: fadeIn .5s forwards; animation-delay: .3s;}
    header nav > ul > li > a {font-size: 5rem; margin-bottom: 42px;}
    header nav > ul ul {top: 158px; left: 62.86%;}
    header nav > ul ul li > a {font-size: 2.8rem; margin-bottom: 30px;}
    header nav span {top: 225px; right: 24px; opacity: 0;}
    header nav span a {padding: 20px 0;}
    header nav span a img {width: 25px;}
    
    /* .main */
    .main {position: relative;}
    .main .intro {position: fixed; display: block; width: 100%; height: 949px; background: #241e1e; z-index:6; animation: introTop 2s forwards; animation-delay: .5s;}
    .main .intro span {position: absolute; display: block; width: 15.62%; height: 11.71%; background: url("../img/GodivaLogo.png") no-repeat center; background-size: contain; text-indent: -99999px; top: 45%; left: 40%;}
    .main .pc_pager {position: fixed; display: block; width: 30px; top: 50%; right:0; margin-top: -39px; z-index: 3; transition:all .8s ease-in-out;}
    .main .pc_pager li a {position: relative; display: inline-block; width: 30px; padding: 3px 0; vertical-align: middle;}
    .main .pc_pager li a span {position: relative; display: inline-block; width: 14px; height: 1px; vertical-align: middle; text-align: left; font-size: 0; background: rgba(255,255,255,.7); transition:all .5s ease-in-out;}
    .main .pc_pager li a span:before {opacity: 0; content: ""; position: absolute; left: -6px; width: 7px; height: 7px; border-radius: 50%; margin-top: -2px; vertical-align: middle; background: #fff; transition:all .2s ease-in-out;}
    .main .pc_pager li.on span {width: 30px; height: 2px; background: #fff;}
    .main .pc_pager li.on a span:before {opacity:1;}
    .mainSlider {margin-left: 87px; padding-top: 0;}
    #main01 {height: 640px;}
    #main02 {height: 640px;}
    .mainSlider #main01 .mainImg, .mainSlider #main02 .mainImg {height: 100%;}
    .mainSlider #main01 .mainTxt {animation-delay: 1.2s;}
    .mainSlider .mainTxt {top: 36.77%; padding-left: 6.14%; text-align: left;}
    .mainSlider .mainTxt h3 {font-size: 3rem; line-height: 3.6rem;}
    .mainSlider .mainTxt p {font-size: 2rem; line-height: 2.6rem; margin: 20px 0 40px;}
    .mainSlider #main02 .mainTxt {top: 35.13%;}
    .mainSlider .mainTxt button {font-size: 2rem;}
    
   
    
    /* #best */
    #best {margin-left: 87px; padding-top: 80px; padding-bottom: 225px; height: 640px;}
    #best h3 {position: relative; font-size: 6rem; height: 170px; margin: 0 auto; transition: .5s;}
    #best h3 span {position: absolute; margin: 0; transition:.5s;}
    #best span:nth-child(1) {top: -74px; left: 34.07%;}
    #best span:nth-child(2) {top: 67px; left: 44.07%;}
    #best span:nth-child(3) {top: 0; left: 53.91%;}
    #best span:nth-child(4) {top: 36px; left: 64.07%;}
    #best:hover h3 span:nth-child(1), #best:hover h3 span:nth-child(2), #best:hover h3 span:nth-child(3),#best:hover h3 span:nth-child(4), #best:focus h3 span:nth-child(1), #best:focus h3 span:nth-child(2), #best:focus h3 span:nth-child(3),#best:focus h3 span:nth-child(4) {top: 0;}
    #best .slider {width: 78.95%; max-width: 1516px; height: 873px; margin: 0 auto;}
    #best .slider li {position: relative; width: 32.47%; max-width: 480px; height: 267px; margin-right: 1.29%; margin-bottom: 3.89%; float: left;}
    #best .slider li:nth-child(3), #best .slider li:nth-child(6), #best .slider li:nth-child(9) {margin-right: 0;}
    #best .slider li a {position: static; width: 100%; height: 100%; margin-right: 0;}
    #best .slider li:nth-child(9) a {display: inline-block;}
    #best .slider .caption {height: 100%;}
    #best .slider .caption .rank {margin-top: 80px;}
    #best .slider .caption .rank + span {margin-top: 9px;}
    
    
    /* #new */
    #new {margin-left: 87px; padding-top: 70px; padding-bottom: 0px; height: 640px;}
    #new h3 {position: relative; font-size: 6rem; height: 140px; margin: 0 auto;}
    #new h3 span {position: absolute; margin: 0; transition:.5s;}
    #new h3 span:nth-child(1) {top: -69px; left: 37.70%;}
    #new h3 span:nth-child(2) {top: 70px; left: 49.27%;}
    #new h3 span:nth-child(3) {top: 0; left: 60.22%;}
    #new:hover h3 span:nth-child(1), #new:hover h3 span:nth-child(2), #new:hover h3 span:nth-child(3), #new:focus:focus h3 span:nth-child(1), #new:focus:focus h3 span:nth-child(2), #new:focus:focus h3 span:nth-child(3) {top: 0;}
    #new .newImg {width: 23.46%; height: 374px; margin-left: 10.61%;}
    #new .newTxt {width: 53.63%; height: 320px; top: 283px; left: 32.12%; padding-top: 30px;}
    #new .newTxt > span {margin-left: 11.97%;}
    #new .newTxt div p:nth-child(1) {font-size: 2.5rem; line-height: 3rem; width: 400px;}
    #new .newTxt div p:nth-child(2) {font-size: 2rem; margin: 12px 0 26px;}
    #new .newTxt div span {width: 165px;}
    #new .newTxt div p:nth-of-type(3) {font-size: 1.8rem; line-height: 2.4rem; margin: 25px 0 30px;}
    #new .newTxt div button {width: 175px; height: 45px; font-size: 1.8rem;}
    
    
    /* #love */
    #love {margin-left: 87px; padding-top: 67px; height: 640px; padding-bottom: 0;}
    #love h3 {position: relative; font-size: 6rem; height: 110px; margin: 0 auto;}
    #love h3 span {position: absolute; margin: 0; transition:.5s;}
    #love h3 span:nth-child(1) {top: -39px; left: 29.6%;}
    #love h3 span:nth-child(2) {top: 30px; left: 39.66%;}
    #love h3 span:nth-child(3) {top: -38px; left: 48.82%;}
    #love h3 span:nth-child(4) {top: 0; left: 59.1%;}
    #love h3 span:nth-child(5) {top: -87px; left: 69.16%;}
    #love:hover h3 span:nth-child(1), #love:hover h3 span:nth-child(2), #love:hover h3 span:nth-child(3), #love:hover h3 span:nth-child(4), #love:hover h3 span:nth-child(5), #love:focus h3 span:nth-child(1), #love:focus h3 span:nth-child(2), #lov:focus h3 span:nth-child(3),#love:focus h3 span:nth-child(4), #love:focus h3 span:nth-child(5) {top: 0;}
    #love .loveBox {width: 84.69%; height: 386px; background: #c9ad87; margin: 0 auto;}
    #love .loveBox .Tag {height: 65px; margin-bottom: 0;}
    #love .loveBox .Tag ul {width: 514px; height: 100%;}
    #love .loveBox .Tag ul li a {font-size: 2rem; line-height: 65px;}
    #love .loveBox .instaImg {width: 29.68%; height: 300px;}
    #love .loveBox div:nth-child(2) a, #love .loveBox div:nth-child(3) a,  #love .loveBox div:nth-child(4) a {width: 100%; height: 100%;}
    #love .loveBox .instaImg .plus {height: 100%; padding-top: 150px;}
    
    /* footer */
    footer {height: 100px; z-index: 3; padding-left: 87px;}
    footer .footerLogo {position: absolute; display: inline-block; width: 85px; height: 72px; background: url("../img/Godiva_footerLogo.png") no-repeat; background-size: cover; bottom: 0; left: 12.39%;}
    footer .snsIcon {width: 165px; top: 40px; right: 7.57%;}
    footer .snsIcon a {padding: 0 14px;}
    footer .snsIcon a img {width: 30px;}
    footer ul {position: absolute; top: 30px; left: 22.7%;}
    footer ul li a {font-size: 1.2rem;}
    footer small {position: absolute; top: 65px; left: 22.7%;}

}

/* gte 1300px */
@media screen and (min-width: 1300px){
    
    
    /* header */
    header {width: 130px; height: 100%;}
    header h1 {width: 98px; height: 31px; margin: 40px auto 0;}
    header h1 a {width: 98px; height: 31px;}
    header button {width: 130px; height: 130px; top: 50%; padding: 0; margin-top: -40px;}
    header button span {width: 80px; top: 65px;}
    header button span:nth-child(1) {left: 16px;}
    header button span:nth-child(2) {left: 25px;}
    header button span:nth-child(3) {left: 34px;}
    header button.on span:nth-child(1) {left: 26px;}
    header button.on span:nth-child(3) {left: 24px;}
    header nav > ul {margin: 288px 0 0 17.7%;}
    header nav > ul > li > a {font-size: 6rem; margin-bottom: 42px;}
    header nav > ul ul {top: 288px;}
    header nav > ul ul li > a {font-size: 3.3rem; margin-bottom: 36px;}
    header nav span {top: 377px; right: 24px;}
    header nav span a {padding: 25px 0;}
    header nav span a img {width: 32px;}
    
    /* .main */
    .main {position: relative;}
    .main .intro span {top: 38.25%; left: 43.13%;}
    .main .pc_pager {width: 50px;}
    .main .pc_pager li a {width: 50px;}
    .main .pc_pager li a span {width: 14px; height: 2px;}
    .main .pc_pager li a span:before {left: -9px; width: 9px; height: 9px; margin-top: -3px;}
    .main .pc_pager li.on span {width: 50px; height: 3px;}
    .mainSlider {margin-left: 130px;}
    #main01 {height: 949px;}
    #main02 {height: 949px;}
    .mainSlider .mainTxt h3 {font-size: 4rem; line-height: 4.8rem;}
    .mainSlider .mainTxt p {font-size: 2.5rem; line-height: 3.3rem; margin-top: 26px;}
    .mainSlider #main02 .mainTxt {height: 288px;}
   
    
    /* #best */
    #best {margin-left: 130px; padding-top: 120px; padding-bottom: 225px;}
    #best h3 {font-size: 7rem; height: 196px;}
    #best .slider {height: 1275px;}
    #best .slider li {height: 400px;}
    #best .slider .caption .rank {margin-top: 128px;}
    #best .slider .caption .rank + span {margin-top: 49px;}
    
    
    /* #new */
    #new {height: 949px; margin-left: 130px; padding-top: 100px; padding-bottom: 0; margin-bottom: 59px;}
    #new h3 {font-size: 7rem; height: 161px;}
    #new .newImg {height: 560px;}
    #new .newTxt {height: 480px; top: 370px; padding-top: 61px;}
    #new .newTxt div p:nth-child(1) {font-size: 3.5rem; line-height: 4.2rem; width: 407px;}
    #new .newTxt div p:nth-child(2) {font-size: 2.5rem; margin: 17px 0 39px;}
    #new .newTxt div span {width: 250px;}
    #new .newTxt div p:nth-of-type(3) {font-size: 2rem; line-height: 2.6rem; margin: 38px 0 58px;}
    
    
    /* #love */
    #love {height: 949px; margin-left: 130px; padding-top: 128px; padding-bottom: 0;}
    #love h3 {font-size: 7rem; height: 131px;}
    #love .loveBox {height: 580px;}
    #love .loveBox .Tag {height: 97px; margin-bottom: 0;}
    #love .loveBox .Tag ul {width: 698px; height: 97px;}
    #love .loveBox .Tag ul li a {font-size: 2.5rem; line-height: 97px;}
    #love .loveBox .instaImg {height: 450px;}
    #love .loveBox .instaImg .plus {padding-top: 224px;}
    
    /* footer */
    footer {height: 150px; z-index: 3; padding-left: 130px;}
    footer .footerLogo {width: 120px; height: 104px;}
    footer .snsIcon {width: 265px; top: 69px; right: 7.6%;}
    footer .snsIcon a {padding: 0 20px;}
    footer .snsIcon a img {width: 48px;}
    footer ul {top: 67px;}
    footer ul li a {font-size: 1.5rem;}
    footer small {top: 105px;}

    
    
    
    
}