@charset "utf-8";

#wrap{width:100%; min-width:480px;
    overflow:hidden;}

/*헤더영역*/
#header{width:100%; height:60px; position:relative;
           border-bottom:1px solid #ccc;}
/*로고*/
.logo{width:100px; height:60px;
        margin:0 auto;}
.logo a{display:block; height:60px;
          text-indent:-9999px; 
          background-image:url(../img/logo_red.svg); 
          background-repeat:no-repeat;
          background-position:center;
          background-size:auto 50%;}

/*삼선버튼*/
.btnMenu{display:block; width:30px; 
             height:20px; padding:20px 15px;
             text-indent:-9999px;
             /*background:#cce;*/
             position:absolute; top:0; left:0;}/*60x60*/

.btnMenu span{display:block; width:30px; 
                    height:2px; background:#444;
                    margin:7px 0;}

.btnMenu:before,
.btnMenu:after{content:""; display:block;
                    width:30px; height:2px;
                    background:#444;}

/*메인슬라이더 영역*/
#mainSlider{position:relative; /*margin:0 auto;*/}
#mainSlider li{}
#mainSlider li a{display:block; width:100%; height:500px;
                      background-repeat:no-repeat;
                      background-position:center 0;
                      background-size:cover;}

#mainSlider .s1 a{background-image:url(../img/mainslider01_m.png);}
#mainSlider .s2 a{background-image:url(../img/mainslider02_m.jpg);}
#mainSlider .s3 a{background-image:url(../img/mainslider03_m.jpg);}

#mainSlider .sTxt{position:absolute; 
                       top:50px; left:20px;}
#mainSlider .sTxt .des{font-size:3.2vw; 
                             line-height:1em;
                             margin-bottom:4%;}
/*폰트 크기 16px (16/500) x100 = 3.2vw
  아래여백 10px (10/500) x100 = 2%*/
#mainSlider .sTxt .tit{font-size:7.2vw; font-weight:200;
                            line-height:1.3em; 
                           margin-bottom:30px;}
/*폰트 크기 40px (40/500) x100 = 8vw*/
/*폰트 크기 36px (36/500) x100 = 7.2vw*/

/*제품 구매하기*/
#mainSlider .sTxt .more{display:block;
                               position:relative;
                               width:149px; height:55px;
                               line-height:55px;
                               background:#fff;
                               border-radius:45px;
                               padding-left:32px;
                               font-size:14px;
                              transition:all 0.3s;}
/*폰트 크기 14px (14/500) x100 = 2.8vw*/

/*화살표 공통값*/
#mainSlider .sTxt .more i,
#mainSlider .sTxt .more span{display:inline-block; 
                                      text-indent:-9999px;
                                      position:absolute;
                                      transition:all 0.3s; margin-top:-5px;}
/*화살표 개별값*/
/*화살표 ㅡ*/
#mainSlider .sTxt .more i{width:11px; height:1px;
                                 top:33px; right:44px;
                                 background:#222;}

/*화살표 >*/
#mainSlider .sTxt .more span{width:4px; height:4px;
                                      top:31px; right:44px;
                                      transform:rotate(45deg);
                                      border-top:1px solid #222; 
                                      border-right:1px solid #222;}
/*마우스 하버시*/
#mainSlider .sTxt .more:hover{color:#fff; background:#ed1c24;}
#mainSlider .sTxt .more:hover i{background:#fff;}
#mainSlider .sTxt .more:hover span{border-top:1px solid #fff; 
                                              border-right:1px solid #fff;}

/*페이저*/
#mainSlider .bx-pager{position:absolute; bottom:30px; left:50%; 
                              transform:translateX(-50%);}
#mainSlider .bx-pager div{float:left; margin:0 5px;}
#mainSlider .bx-pager div a{display:block; width:15px; height:15px;
                                     border-radius:50%; background:#ccc;
                                     text-indent:-9999px;}
#mainSlider .bx-pager div .active{display:block; width:15px; height:15px;
                                            border-radius:50%; background:#ed1c24;}


/*컨테이너 본문영역*/
#container{margin:10% 0;}
/*위아래 여백 50 / 좌우베젤 20
(50/500) x100 = 10%
(20/500) x100 = 4%*/
.inner{/*background:#ff9;*/}

/*컨테이너1_맥심소개*/
.cont1{margin:100px 0;}

.cont1 .beans{width:67px; height:50px;
   margin:0 auto;
   text-indent:-9999px;
   background-image:url(../img/ico_cont1_coffee.png);
   background-repeat:no-repeat;
   background-position:center;
   background-size:auto 50px;}

.cont1 h3{font-weight:400;
             text-align:center;
             font-size:25px; line-height:1em;
             padding-top:32px;}


.cont1 .intro{transition:all 0.5s; position:relative;}
.cont1 .intro .cup{width:331px; height:294px; text-indent:-9999px;
                       margin:0 auto;}
.cont1 .intro .cup a{display:block; transition:all 0.5s; 
                           height:294px;
                           background-image:url(../img/cont1_cup.png);
                           background-repeat:no-repeat;
                           background-position:center;
                           background-size:149px auto;}
.cont1 .intro .cup:hover a{display:block; height:294px;
                                 background-image:url(../img/cont1_cup_on.png);}

/*li 공통값 (배경)*/
.cont1 .intro ul li{position:absolute; transition:all 0.5s;
                      background-repeat:no-repeat;}
/*li 개별값 (배경)*/
.cont1 .intro ul li:nth-child(1){top:112px; left:20px;
                                     width:160px; height:106px;
                                    background-image:url(../img/c1_bg1_m.png);}
.cont1 .intro ul li:nth-child(1):hover{background-image:url(../img/c1_bg1_m.png);}

.cont1 .intro ul li:nth-child(2){top:39px; right:5px;
                                      width:211px; height:60px;
                                      background-image:url(../img/c1_bg2_m.png);}
.cont1 .intro ul li:nth-child(2):hover{background-image:url(../img/c1_bg2_m.png);}

.cont1 .intro ul li:nth-child(3){top:200px; right:40px;
                                      width:203px; height:65px;
                                      background-image:url(../img/c1_bg3_m.png);}
.cont1 .intro ul li:nth-child(3):hover{background-image:url(../img/c1_bg3_m.png);}

/*a 공통값 (글자)*/
.cont1 .intro ul li a{display:block; width:100%; 
                         font-size:14px; color:#fff; 
                         line-height:1.1em; font-weight:400;
                         letter-spacing:-0.2px;
                         position:absolute;}
/*a 개별값 (글자)*/
.cont1 .intro ul li:nth-child(1) a{top:38px; right:17px; text-align:right;}
.cont1 .intro ul li:nth-child(2) a{top:5px; left:50px; }
.cont1 .intro ul li:nth-child(3) a{top:10px; left:82px;}


/*deco 공통값*/
.cont1 .deco p{text-indent:-9999px;
                   background-repeat:no-repeat;}
/*deco 개별값*/
.cont1 .deco:nth-child(1){}
.cont1 .deco:nth-child(2){}
.cont1 .deco:nth-child(3){}

/*----------------------------------------------------------------*/
/*컨테이너2_맥심제품*/
.cont2{margin-bottom:200px;}

/*컨테이너2 개별값*/
.cont2 .inner{margin:0 4%;}
/*cont2 베젤영역 20px
   (20/500) x100 = 4%*/

.cont2 .brand{position:relative;
                  margin-bottom:30px;}
.cont2 .brand .box{position:relative;
                        text-indent:-9999px; 
                        width:100%; height:280px; 
                        background:#ed1c24;}
/*red box 480px (480/500) x100 = */
.cont2 .brand img{width:157px; height:61px;
                        position:absolute; 
                        top:50%; left:50%;
                        transform:translate(-50%,-60%);}

.cont2 .product{width:100%; height:400px; overflow-x:scroll;
                    transition:all 0.5s;}

.cont2 ul{width:1110px; transition:all 0.5s;
            /*background:#cce;*/}/*li 1개당 가로:303px; 여백:100px*/
.cont2 ul:after{display:block; content:""; clear:both;}
.cont2 ul li{float:left; margin:0 50px;
              width:300px; /*background:#cec;*/
              text-align:center;
              position:relative; transition:all 0.4s;}
.cont2 ul li:last-child{margin:0;}
/*제품공통값*/
.cont2 ul li .pd1,
.cont2 ul li .pd2,
.cont2 ul li .pd3{margin-bottom:40px; transition:all 0.4s;}

.cont2 ul li .pd1 img,
.cont2 ul li .pd2 img,
.cont2 ul li .pd3 img{width:303px; height:auto; transition:all 0.4s;}

/*제품개별값*/
.cont2 ul li .pd1{}
.cont2 ul li .pd1 img{}

.cont2 ul li .pd2{}
.cont2 ul li .pd2 img{}

.cont2 ul li .pd3{}
.cont2 ul li .pd3 img{}

.cont2 ul li .name{font-size:20px; transition:all 0.3s;}/*제품명*/
.cont2 ul li .des{width:100%; height:323px; /*height:400px;*/
                    text-align:center; 
                    background:rgba(255,255,255,0);
                    position:absolute; top:0; left:0;
                    opacity:0; transition:all 0.3s;}/*설명글*/

.cont2 ul li .des strong{padding-top:100px; transition:all 0.3s;
                            display:block; font-size:20px; margin-bottom:40px;}
.cont2 ul li .des span{font-size:16px; font-weight:normal; transition:all 0.3s;}
/*자세히 보기*/
.cont2 ul li .des .more{font-size:14px; margin-top:25px; margin-left:90px;
                             transition:all 0.3s;}
.cont2 ul li .des .more:hover a{color:#ed1c24; border:1px solid #ed1c24;}
.cont2 ul li .des .more a{display:block; font-size:14px; transition:all 0.3s;
                                width:110px; height:36px; line-height:36px;
                                border:1px solid #444; border-radius:45px;}
/*마우스 하버시*/
.cont2 ul li:hover .name{opacity:0;}
.cont2 ul li:hover .des{display:block; 
                            width:100%; height:323px; /*height:400px;*/
                            background:rgba(255,255,255,1); color:#444;
                            position:absolute; top:0; left:0;
                            font-size:20px; line-height:20px; 
                            opacity:1; transition:all 0.3s;}


/*----------------------------------------------------------------*/

/*컨테이너3 카누&티오피*/
.cont3{/*width:100%*/; margin-bottom:170px;}

/*공통값*/
.cont3 p{color:#fff;}
.cont3 .tit{font-size:35px; font-weight:900;
             margin-bottom:30px;}
.cont3 .sub{font-size:16px; margin-bottom:34px;}
.cont3 .more{}
.cont3 .more a{display:block; width:118px; height:38px; 
                    text-align:center;
                    font-size:14px; line-height:38px;
                     border:1px solid #444;
                     border-radius:45px;}
.cont3 .more:hover a{background:#444; color:#fff;}

/*개별값*/
.view1{position:relative;
         height:244px; background:#f1ecd8;}/*500x244*/

.view1 .text{text-align:right;
               position:absolute; top:55px; right:55px;}
.view1 p{color:#444;}
.view1 .tit{}
.view1 .sub{}
/*1자세히보기*/
.view1 .more{margin-left:39px;}
.view1 .more a{color:#444; transition:all 0.4s;}

/*1제품*/
.view1 .v1{text-indent:-9999px;
             position:absolute; bottom:0; left:0%;
             transition:all 0.4s; width:143px; height:192px;
             background-image:url(../img/cont3_pd1.png);
             background-repeat:no-repeat;
             background-position:center;
             background-size:143px 192px;
             }
/*1마우스 하버시 제품 이동*/
.view1:hover .v1{left:-15%}

.view2{position:relative;
         height:244px; background:#807167;}


.view2 .text{ padding-top:55px; padding-left:55px;
                /*position:absolute; top:55px; left:55px;*/}
.view2 .tit{}
.view2 .sub{}

/*2자세히 보기*/
.view2 .more{}
.view2 .more a{color:#fff; border:1px solid #fff; transition:all 0.4s;}
.view2 .more:hover a{background:#fff; color:#444;}

/*2제품*/
.view2 .v2{text-indent:-9999px;
            position:absolute; bottom:0; right:0%;
             transition:all 0.4s; width:203px; height:180px;
             background-image:url(../img/cont3_pd2.png);
             background-repeat:no-repeat;
             background-position:center 0;
             background-size:203px 180px;}
/*.view2 .v2 img{width:164px; height:195px;}*/
/*2마우스 하버시 제품 이동*/
.view2:hover .v2{right:-15%;}

/*--------------------------------------------------------------*/
/*컨테이너4 TV/CF*/
.cont4{margin-bottom:30%;}
.cont4 .inner{margin:0 4%;}

.cont4 .movie{margin-bottom:50px;}
.cont4 .movie iframe{width:100%; height:260px;}

.cont4 .text{text-align:center; font-size:16px;
               line-height:1.2em; color:#444;}
.cont4 .text .tit{font-size:20px; font-weight:500;}
.cont4 .text .sub{margin:30px 0; font-weight:500;}
.cont4 .text .des{}
.cont4 .text span{display:block; text-indent:-9999px; 
                width:25px; height:1px; background:#444;
                margin:40px auto;}

/*다른 영상보기*/
.cont4 .text .more{}
.cont4 .text .more a{position:relative; transition:all 0.3s;
                    display:block; font-size:14px; color:#444;
                    width:100px; height:46px; border-radius:45px;
                    border:1px solid #444; line-height:46px;
                    /*margin-left:184px; */margin:0 auto;
                    /*margin-left:50%; transform:translate(-50%); */
                    text-align:left; padding-left:18px;}/*113x46*/
.cont4 .text .more:hover a{width:127px; 
                                   border:1px solid #ed1c24;
                                  color:#ed1c24;}
/*버튼 ㅡ*/
.cont4 .text .more a span{display:inline-block; width:0; height:0;
                          margin:0 0; transition:all 0.3s;
                          position:absolute; top:26px; left:109px;}
.cont4 .text .more:hover span{width:23px; height:1px;
                                      background:#ed1c24;}
/*버튼 /*/
.cont4 .text .more a i{display:inline-block;
                    border-top:1px solid #222; transition:all 0.3s;
                     transform:rotate(45deg);
                     position:absolute; top:22px; left:109px;}
.cont4 .text .more:hover i{left:123px; width:7px; height:7px;
                                 border-top:1px solid #ed1c24;}

/*--------------------------------------------------------------------------*/
/*컨테이너5 이벤트*/
.cont5{margin-bottom:100px;}
.cont5 .inner{margin:0 4%; position:relative;}

/*공통값*/
.cont5 .photo{}
.cont5 .photo img{width:100%; height:auto;}
.cont5 .text{text-align:center; width:100%;
                position:absolute; top:55px; left:50%;
                transform:translate(-50%);}

.cont5 .text .tit{font-size:6vw; line-height:1.3em;
                   font-weight:bold; color:#fff;
                   text-shadow:0 0 5px rgba(0,0,0,0.5);
                   margin-bottom:26%;}
/*폰트크기 30px (30/500)  x100 = 6vw*/
/*아래여백 130px (130/500) x100 =26%*/

/*공통-바로가기*/
.cont5 .text .more{/*position:absolute; bottom:51px; left:116px;*/}
.cont5 .text .more a{position:relative;
                         transition:all 0.3s;
                         text-align:left;
                         font-weight:bold;
                         font-size:18px; line-height:53px; 
                         color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.3);
                          width:95px; height:53px; border-radius:45px; 
                          margin:0 auto; padding-left:25px;
                          /*margin-left:170px;*/
                          /*margin-left:50%; transform:translate(-50%); */
                          display:block; border:2px solid #fff;}/*120x53*/
/*공통-버튼 ㅡ*/
.cont5 .text .more a span{display:inline-block; background:#fff;
                                 transition:all 0.3s; width:0; height:1px;
                                  position:absolute; top:29px;}
.cont5 .text .more:hover a span{width:32px;}
/*공통-버튼 /*/
.cont5 .text .more a i{display:inline-block;
                            transition:all 0.3s;
                           /*width:9px; height:9px; */
                           border-top:1px solid #fff;
                           transform:rotate(45deg);
                            position:absolute; top:25px; }
.cont5 .text .more:hover a i{width:9px; height:9px;}

/*개별값*/
/*배너1*/
.event1{position:relative;}
.event1 .photo{}
.event1 .photo img{}

.event1 .text{} 
.event1 .text p{}
/*바로가기*/
.event1 .text .more {}
.event1 .text .more a{width:92px;}
.event1 .text .more:hover a{width:147px;}/*172x53*/
/*버튼 ㅡ*/
.event1 .text .more a span{left:113px;}
.event1 .text .more:hover a span{width:32px;}
/*버튼 /*/
.event1 .text .more a i{left:113px;}
.event1 .text .more:hover a i{left:134px;}


/*배너2*/
.event2{position:relative;}
.event2 .photo{}
.event2 img{} 

.event2 .text{} 
.event2 .text p{}
/*사연 신청하기*/
.event2 .text .more{}
.event2 .text .more a{width:135px;}/*160x53*/
.event2 .text .more:hover a{width:192px;}/*217*/
/*버튼 ㅡ*/
.event2 .text .more span{left:158px;}
.event2 .text .more:hover span{}
/*버튼 /*/
.event2 .text .more i{left:158px;}
.event2 .text .more:hover i{left:180px;}
/*------------------------------------------------------------------*/
/*푸터영역*/
#footer{height:260px; background:#1a1b22;
           color:#fff; padding:4%; margin:auto; font-size:14px;}
#footerIn{position:relative;}


.flogo{text-indent:-9999px; width:128px; height:51px;
        margin:0 auto 30px;
        background-image:url(../img/logo_gray.svg);
        background-repeat:no-repeat;
        background-position:center 0;
        background-size:128px 51px;}

.finfo{}
.finfo a{color:#fff;}
.finfo p:nth-child(4),
.finfo p:nth-child(5){font-size:12px;}

.finfo .contant{color:#ec2127; margin-bottom:16px;}
.finfo .fm1{display:inline-block; transition:all 0.3s;}
.finfo .fm2{display:inline-block; margin-bottom:7px;
              transition:all 0.3s;}

.finfo .fm2:before{content:""; display:inline-block; 
                       width:1px; height:12px;
                       background:#fff; margin:0 5px;}

/*마우스 하버시*/
.finfo .fm1:hover{text-decoration:underline;}
.finfo .fm2:hover{text-decoration:underline;}

.finfo .tel{margin-bottom:7px;}
.finfo .copy{}

.fmenu{position:absolute; top:97px; right:0;}

/*공통값*/
.fmenu p{width:130px; height:30px; background:#777;
            text-align:center; line-height:30px; 
            transition:all 0.3s;}
.fmenu p:hover{background:#fff;}
.fmenu p a{color:#fff; font-size:12px; transition:all 0.3s;}
.fmenu p:hover a{color:#444; font-weight:bold;}

/*개별값*/
.fmenu .fm3{margin-bottom:20px;}

.fmenu .family{width:130px;}
.fmenu .family span{display:inline-block; width:5px; height:5px; 
                          border-left:2px solid #fff;
                          border-bottom:2px solid #fff;
                          transform:rotate(-45deg);
                          vertical-align:middle; transition:all 0.3s;
                          margin-left:7px; margin-top:-4px;}
.fmenu .family:hover span{border-left:2px solid #444;
                                  border-bottom:2px solid #444;
                                  transform:rotate(-225deg);
                                  margin-top:0; margin-bottom:-1px;}

/*모바일 사이드메뉴*/
#sideMenu{/*display:none;*/
            width:400px; height:100%; background:#fff;
           position:fixed; top:0; left:-400px; z-index:500;
           font-size:18px; font-weight:bold;}
#sideMenu h2{display:none;}
#sideMenu .logo{display:block; 
            width:100px; height:50px;
            text-indent:-9999px; 
            /*background-color:#fce;*/
            background-image:url(../img/logo_red.svg); 
            background-repeat:no-repeat;
            background-position:center;
            background-size:auto;}
#sideMenu .btnClose{position:absolute; top:0; right:0;
    display:block; width:50px; height:50px;
    text-indent:-9999px;
    /*background-color:#ff9;*/
    background-image:url(../img/m_sideMenu_btn.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 18px;}

/*utill*/
#sideMenu .utill{padding:35px 25px;
    /*background:#ececec;*/}
#sideMenu .utill p{margin:24px 0; font-size:18px;
    line-height:1.5em; font-weight:600;
    color:#292929;}
#sideMenu .utill li{width:150px; height:40px;
    line-height:40px; font-size:18px;
    font-weight:600; 
    border-radius:25px;
    /*border:1px solid #444;*/
    text-align:center; float:left; 
    background:#ececec;}
#sideMenu .utill .on{margin-right:25px;
    background:#ec2127;}
#sideMenu .utill .on a{color:#fff;}
#sideMenu .utill li a{display:block;}

/*mGnb*/
#sideMenu .mGnb{padding:50px 25px 100%; background:#ececec;}
#sideMenu .mGnb li{position:relative;
                        width:350px; font-size:18px;}
#sideMenu .mGnb li span{display:inline-block; 
      position:absolute; top:25px; right:20px;
      width:7px; height:7px; 
      border-left:2px solid #444;
      border-bottom:2px solid #444;
      transform:rotate(-45deg);
      vertical-align:middle; transition:all 0.3s;
      margin-left:7px; margin-top:-6px;}
#sideMenu .mGnb li a{display:block; padding:15px 20px; background:#fff;}

/*on*/
#sideMenu .mGnb li .m.on{background:#ec2127; color:#fff;}
#sideMenu .mGnb li .m.on span{transform:rotate(-225deg);
    margin-top:-3px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;}

/*sub*/
#sideMenu .mGnb li .sub{display:none;}
#sideMenu .mGnb li .sub li a{display:block; padding:15px 30px;
                       font-size:16px; background:#ffdadb;}

/*blackBg*/
.blackBg{width:100%; height:100%; 
            position:fixed; top:0; left:0; display:none;
            background:#000; opacity:0.5; z-index:400;}