@charset "utf-8";
#wrap{}

/*헤더영역*/
#header{width:100%; border-bottom:1px solid #ccc;
           transition:all 0.5s;}
#headerIn{width:1100px; height:167px; margin:0 auto;
              position:relative; z-index:300;}

.logo{padding-top:19px; padding-left:458px;}
.logo img{width:147px; height:58px;}

/*유틸*/
.utill{position:absolute; top:46px; right:6px;}
.utill ul{display:-webkit-flex; display:flex;}
.utill ul li{margin-left:35px; transition:all 0.3s;}
.utill ul li:last-child{margin-left:19px;}
.utill ul .global{display:block; text-indent:-9999px; 
                       width:23px; height:23px;
                       background-image:url(../img/ico_global.svg);
                       background-repeat:no-repeat;
                       transition:all 0.5s;}
.utill ul .global:hover{background-image:url(../img/ico_global_red.svg);}
.utill ul li a{}
.utill ul li:hover a{color:#ed1c24;}

/*메인메뉴*/
.gnb{position:absolute; 
      top:103px; left:50%; transform:translateX(-50%);}
.gnb ul{width:960px;}
.gnb ul li{width:120px; transition:all 0.3s;
            float:left; margin-right:90px;
            font-size:19px; text-align:center;
            /*margin-right:70px;*/
             height:48px; line-height:48px;}
.gnb ul li:last-child{margin-right:0;}
.gnb ul li a{display:block; position:relative;}
.gnb ul li a span{display:block; width:100%; height:5px; 
                  background:#ed1c24;
                  position:absolute; left:0; bottom:0;
                  transform:scaleX(0); transition:all 0.3s;}
.gnb ul li:hover a{font-weight:500;}
.gnb ul li:hover a span{transform:scaleX(1);}

/*서브메뉴*/
.gnb ul li .sub{display:none; z-index:100; 
                  position:relative; width:100%; height:167px;}
.gnb:hover ul li .sub{display:block;}

.gnb ul li .sub ul{position:absolute; top:35px; left:0;}
.gnb ul li .sub ul li{width:120px; 
                        float:none; /*background:#cce;*/
                        padding:5px 0;
                        margin-right:0;}
.gnb ul li .sub ul li a{display:block; font-size:16px; 
                           height:16px; line-height:20px;}

.gnb ul li:hover .sub ul li a{font-weight:normal;}
.gnb ul li .sub ul li:hover a{font-weight:500;}

.gnb ul li .sub ul li a i{display:block; width:50%; margin:0 auto;
                            border-bottom:2px solid #ed1c24;
                            transform:scaleX(0); transition:all 0.3s;}
.gnb ul li .sub ul li:hover a i{width:100%; transform:scaleX(1);
                                    font-weight:bold;}
/*서브배경*/
#header .subBg{width:100%; height:0; z-index:299;
                    background:#fff;
                     position:absolute; top:167px; left:0;}


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

#mainSlider .s1 a{background-image:url(../img/mainslider_01.jpg);}
#mainSlider .s2 a{display:none; background-image:url(../img/mainslider_02.jpg);}
#mainSlider .s3 a{display:none; background-image:url(../img/mainslider_03.jpg);}

#mainSlider .text{position:absolute; top:166px; left:410px;}
#mainSlider .text .tit{font-size:60px; font-weight:100; color:#222; 
                          line-height:60px;}
#mainSlider .text .tit:nth-child(1){margin-bottom:35px;}

#mainSlider .text .des{font-size:20px; font-weight:normal;
                             margin:86px 0 39px;}
/*제품 구매하기 ->*/
#mainSlider .text .more{width:212px; position:relative;}
#mainSlider .text .more a{display:block; height:69px; 
                                 border-radius:70px; background:#fff;
                                 font-size:15px; line-height:69px; 
                                 padding-left:40px; transition:all 0.3s;}
/*화살표 ㅡ*/
#mainSlider .text .more i{position:absolute; top:33px; right:44px;
                                 display:inline-block; width:14px; height:1px;
                                 background:#222; transition:all 0.3s; }
/*화살표 >*/
#mainSlider .text .more span{position:absolute; top:31px; right:44px;
                                    display:inline-block; width:4px; height:4px;
                                    transform:rotate(45deg); transition:all 0.3s; 
                                    border-top:1px solid #222; 
                                    border-right:1px solid #222;}

/*마우스 하버시*/
#mainSlider .text .more:hover a{color:#fff; background:#ed1c24;}
#mainSlider .text .more:hover i{background:#fff;}
#mainSlider .text .more:hover span{border-top:1px solid #fff; 
                                              border-right:1px solid #fff;}

/*btn 공통값*/
#mainSlider .bx-controls-direction a{display:block; width:54px; height:54px; 
                        text-indent:-9999px;
                        border-left:1px solid #444; 
                        border-bottom:1px solid #444;
                        position:absolute; top:242px;}

/*btn 개별값*/
#mainSlider .bx-controls-direction .bx-prev{left:95px; transform:rotate(45deg); 
                       opacity:0.5; transition:all 0.4s;} 
#mainSlider .bx-controls-direction .bx-prev:hover{opacity:1;}
#mainSlider .bx-controls-direction .bx-next{right:95px; transform:rotate(-135deg); 
                        opacity:0.5; transition:all 0.4s;}
#mainSlider .bx-controls-direction .bx-next:hover{opacity:1;}


/*컨테이너 본문영역*/
#container{margin-bottom:200px;}
.inner{width:1100px; margin:0 auto;
                 position:relative;}

/*컨테이너1_맥심소개*/
.cont1{margin-bottom:220px;}
.cont1 .inner{/*background:#ffe;*/}
.cont1 .beans{/*position:absolute; top:0; left:50%; 
                  transform:translateX(-50%);*/
                  /*margin-left:516.5px;*/
                  margin:0 auto;
                  text-indent:-9999px; width:67px; height:50px;
                  background-image:url(../img/ico_cont1_coffee.png);
                  background-repeat:no-repeat;
                  background-position:center;}

.cont1 h3{font-weight:400; text-align:center;
             font-size:25px; 
             padding-top:93px; margin-bottom:138px;}

/*.cont1 .bg{width:1100px; height:357px;
             background-image:url(../img/cont1_bg.png);
             background-repeat:no-repeat;
             background-position:center;}*/

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

/*li 공통값 (배경)*/
.cont1 .intro ul li{position:absolute; transition:all 0.5s;
                      background-repeat:no-repeat;}
/*li 개별값 (배경)*/
.cont1 .intro ul li:nth-child(1){top:93px; left:0;
                                     width:401px; height:178px;
                                    background-image:url(../img/c1_bg1.png);}
.cont1 .intro ul li:nth-child(1):hover{background-image:url(../img/c1_bg1_on.png);}

.cont1 .intro ul li:nth-child(2){top:8px; right:7px;
                                      width:375px; height:156px;
                                      background-image:url(../img/c1_bg2.png);}
.cont1 .intro ul li:nth-child(2):hover{background-image:url(../img/c1_bg2_on.png);}

.cont1 .intro ul li:nth-child(3){top:235px; right:44px;
                                      width:345px; height:122px;
                                      background-image:url(../img/c1_bg3.png);}
.cont1 .intro ul li:nth-child(3):hover{background-image:url(../img/c1_bg3_on.png);}

/*a 공통값 (글자)*/
.cont1 .intro ul li a{display:block; font-size:25px; color:#fff; 
                         line-height:1.1em; font-weight:400;
                         position:absolute;}
/*a 개별값 (글자)*/
.cont1 .intro ul li:nth-child(1) a{top:50px; left:36px; text-align:right;}
.cont1 .intro ul li:nth-child(2) a{top:58px; left:79px;}
.cont1 .intro ul li:nth-child(3) a{top:19px; left:119px;}

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


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

/*컨테이너2 공통값*/
.cont2 ul li{position:relative;}
.cont2 .name{}
.cont2 .des{position:absolute; top:0; left:0;}
.cont2 .des span{display:block;}
.cont2 .des:nth-child(2){text-align:center;}

/*컨테이너2 개별값*/
.cont2 .inner{display:-webkit-flex; display:flex;}

.cont2 .brand{margin-right:90px;}
.cont2 .brand .box{position:relative;
                        text-indent:-9999px; 
                        width:276px; height:293px; 
                        background:#ed1c24;}
.cont2 .brand img{width:223px; height:90px;
                        position:absolute; top:80px; left:26px;}

.cont2 .product{}
.cont2 ul{display:-webkit-flex; display:flex;
            width:734px; 
            justify-content:space-between;}

.cont2 ul li{width:220px; text-align:center;
              position:relative; transition:all 0.4s;}

.cont2 ul li .pd1,
.cont2 ul li .pd2,
.cont2 ul li .pd3{/*margin:49px 55px 40px 37px;*/
                     margin-bottom:40px;}

.cont2 ul li .pd1{}
.cont2 ul li .pd1 img{width:220px; height:220px;}

.cont2 ul li .pd2{}
.cont2 ul li .pd2 img{width:220px; height:220px;}

.cont2 ul li .pd3{}
.cont2 ul li .pd3 img{width:220px; height:220px;}

.cont2 ul li .name{}/*제품명*/
.cont2 ul li .des{width:220px; height:293px;
                    background:rgba(255,255,255,0);
                    position:absolute; top:0; left:0;
                    opacity:0; transition:all 0.5s;}/*설명글*/

.cont2 ul li .des strong{padding-top:50px;
                            display:block; font-size:20px; margin-bottom:24px;}
.cont2 ul li .des span{font-size:16px; font-weight:normal;}
.cont2 ul li .des .more{font-size:14px; margin-top:25px; margin-left:44px;
                             transition:all 0.4s;}
.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.4s;
                                width:110px; height:36px; line-height:36px;
                                border:1px solid #444; border-radius:45px;}

/*마우스 하버시*/
.cont2 ul li:hover .name{display:none;}
.cont2 ul li:hover .des{display:block;
                            width:220px; height:293px;
                            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.5s;}




/*---------------------------------------------------------------------*/
#d4 li .over{width:300px; height:300px;
            background:rgba(0,0,0,0); color:#fff;
            position:absolute; top:0; left:0;
            font-size:20px; line-height:20px; 
            opacity:0; transition:all 1s;}
#d4 li:hover .over{opacity:1; background:rgba(0,0,0,0.7);}
/*opacity의 용도는 0이니까 안보여 1이니까 보이게 만들어 줌.*/
/*---------------------------------------------------------------------*/



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

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

/*개별값*/
.leftView{position:relative;
           width:960px; height:244px; background:#f1ecd8;
            display:-webkit-flex; display:flex;
            /*padding-top:55px; padding-right:55px;*/}/*960x244*/

.leftView .text{text-align:right; position:absolute; top:55px; right:55px;}
.leftView p{color:#444;}
.leftView .tit{}
.leftView .sub{}
.leftView .more{margin-left:39px;}
.leftView .more a{color:#444; transition:all 0.4s;}

.leftView .leftPd{position:absolute; bottom:0; right:280px;
                    transition:all 0.4s;}
/*마우스 하버시 제품 이동*/
.leftView:hover .leftPd{right:350px;}

.rightView{position:relative;
             width:960px; height:244px; background:#807167;
             display:-webkit-flex; display:flex;
             padding-top:55px; padding-left:55px;}

.rightView .text{}
.rightView .tit{}
.rightView .sub{}
.rightView .more{}
.rightView .more a{color:#fff; border:1px solid #fff; transition:all 0.4s;}
.rightView .more:hover a{background:#fff; color:#444;}

.rightView .rightPd{position:absolute; bottom:0; left:280px;
                         transition:all 0.4s;}
/*마우스 하버시 제품 이동*/
.rightView:hover .rightPd{left:350px;}


/*컨테이너4 CF영상*/
.cont4{margin-bottom:200px;}
.cont4 .inner{display:-webkit-flex; display:flex;}

.cont4 .movie{margin-right:56px;}
.cont4 .movie iframe{width:655px; height:368px;}

.cont4 .text{}
.cont4 .text .tit{font-size:20px;}
.cont4 .text .sub{margin:25px 0;}
.cont4 .text .des{font-size:14px; margin-bottom:39px;}
.cont4 .text span{display:block; text-indent:-9999px; 
                      width:25px; height:2px; background:#111;
                      /*margin-bottom:48px;*/}

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


/*컨테이너5 이벤트*/
.cont5{}
.cont5 .inner{display:-webkit-flex; display:flex;}

/*공통값*/
.cont5 div p{font-size:26px; font-weight:bold; line-height:36px;
                color:#fff; margin-bottom:79px; 
                text-shadow:0 0 5px rgba(0,0,0,0.5);}
.cont5 .more a{font-size:15px; color:#fff;
                   display:block; height:39px;
                   border:2px solid #fff; border-radius:45px;
                   padding-left:20px; transition:all 0.3s;}

/*개별값*/
/*배너1*/
.event1{margin-right:27px; border-radius:45px 0 45px 0; overflow:hidden;}
.event1 .photo{position:relative;}
.event1 .photo img{border-radius:45px 0 45px 0; overflow:hidden;}

.event1 .text{position:absolute; top:42px; left:35px;} 
.event1 .text p{font-size:26px; font-weight:bold; line-height:36px;}
/*바로가기*/
.event1 .text .more {position:relative;}
.event1 .text .more a{width:72px; font-size:15px; color:#fff;
                           display:block; height:39px;
                           border:2px solid #fff; border-radius:45px;
                           padding-left:20px; transition:all 0.3s;
                           text-shadow:0 0 5px rgba(0,0,0,0.5);}/*92x39*/
.event1 .text .more:hover a{width:109px;}
/*버튼 ㅡ*/
.event1 .text .more span{display:inline-block; width:0; height:1px; 
                               background:#fff;/* margin-left:14px;*/
                                position:absolute; top:22px; left:86px;
                                transition:all 0.5s;}
.event1 .text .more:hover span{width:23px;}
/*버튼 /*/
.event1 .text .more i{display:inline-block; /*width:7px; height:7px;*/ 
                           border-top:1px solid #fff; transform:rotate(45deg);
                           position:absolute; top:18px; left:86px;
                           transition:all 0.3s;}
.event1 .text .more:hover i{width:7px; height:7px; left:100px;}


/*배너2*/
.event2{width:725px; height:283px; background:#0099dc;
          border-radius:45px 0 45px 0; overflow:hidden;
          display:-webkit-flex; display:flex;}
.event2 .photo{}
.event2 img{} 

.event2 .text{margin-left:35px; margin-top:42px;} 
.event2 .text p{text-shadow:none;}
/*사연 신청하기*/
.event2 .text .more{position:relative;}
.event2 .text .more a{width:106px; font-size:15px; color:#fff;
                           display:block; height:39px;
                           border:2px solid #fff; border-radius:45px;
                           padding-left:20px; transition:all 0.3s;}
.event2 .text .more:hover a{width:143px; border:2px solid #fff; }
/*버튼 ㅡ*/
.event2 .text .more span{display:inline-block; width:0; height:1px; 
                               background:#fff;/* margin-left:14px;*/
                                position:absolute; top:22px; left:119px;
                                transition:all 0.5s;}
.event2 .text .more:hover span{width:23px;}
/*버튼 /*/
.event2 .text .more i{display:inline-block; /*width:0; height:0; */
                           border-top:1px solid #fff; transform:rotate(45deg);
                           position:absolute; top:18px; left:119px;
                           transition:all 0.3s;}
.event2 .text .more:hover i{width:7px; height:7px; left:133px;}


/*푸터영역*/
#footer{background:#1a1b22; font-size:14px;
          color:#fff; height:260px;}
#footerIn{width:1100px; height:260px; margin:0 auto;
             position:relative;}

.flogo{text-indent:-9999px; width:134px; height:54px;
        background:url(../img/flogo.png) no-repeat center;
        padding-top:80px; margin-left:485px;
        /*position:absolute; top:22px; left:50%; 
        transform:translateX(-50%);*/}

.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{display:-webkit-flex; display:flex;
         position:absolute; top:97px; right:14px;}
/*공통값*/
.fmenu p{width:158px; height:37px; background:#777;
            text-align:center; line-height:37px; 
            transition:all 0.3s;}
.fmenu p:hover{background:#fff;}
.fmenu p a{color:#fff; transition:all 0.3s;}
.fmenu p:hover a{color:#444; font-weight:bold;}

/*개별값*/
.fmenu .fm3{margin-right:28px;}

.fmenu .family{width:151px;}
.fmenu .family span{display:inline-block; 
      width:7px; height:7px; 
      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:-6px;}    
.fmenu .family:hover span{border-left:2px solid #444;
                                  border-bottom:2px solid #444;
                                  transform:rotate(-225deg);
                                  margin-top:0; margin-bottom:-3px;}