@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

@font-face{
            font-family:'na';
            src:url('../r_font/NanumGothic.eot');
                src:local('na'),url('../r_font/NanumGothic.woff') format('woff'), url('../r_font/NanumGothic.ttf') format('truetype');}
        
@font-face{
            font-family:'naB';
            src:url('../r_font/NanumGothicBold.eot');
                src:local('naB'),url('../r_font/NanumGothicBold.woff') format('woff')}


body{
    font: 0.75em 'na', 'Helvetica', sans-serif;
}

a{
    text-decoration: none;
    color:#424242;
}

li{
    list-style: none;
}

img{
    border: 0;
}

.mid_wrap{
    max-width: 1240px;
    margin: 0 auto;
}



/*---------------------------네비--------------------------------*/
#navi{
    background-color: #000;
    height: 100px;
    position: fixed;
    width: 100%;
    z-index: 100;
}

#navi_wrap{
    position: relative;
}

#navi_wrap > h1{
    float: left;
    width: 22%;
}

#navi_wrap > h1 > a{
    color: #fff;
}

#navi_wrap > h1 > a img{
 width: 100%;   
}

#top_right{
    float: right;
    width: 78%;
    margin-top: 20px;
}

#navi_text{
    float: right;
    width: 45%;
}


#navi_text > li{
    float: left;
    margin-left: 0%;
    height: 40px;
    line-height: 50px;
    list-style: none;
    width: 32%;
    text-align: center;
}

#navi_text > li >span> a{
    color: #fff;
    font-family: "naB";
    display: block;
    padding: 0;
}

#navi_text > li:hover >span> a{
    color: #9a1b1e;
}
 


/*-----서브네비-----------*/
#navi_text >li>div.navi_sub{
            position: absolute;/*각자 li 기준으로 위치 잡음 */
            top: 100px;/*세로사이즈 준만큼.. 딱 맞게 띄우기 */
            left: 0;
            width: 100%;/*부모의 가로사이즈 만큼 */
            background: #919191;/*글자수만큼 가지고 싶으면 ul에 주*/
        }
        
        #navi_text >li> div.navi_sub ul{
            height: 30px;
        }
        
        #navi_text >li >div.navi_sub ul li{
          float: left;
            padding-left: 20px; 
        }
        
        #navi_text >li >div.navi_sub ul li a{
            color: #efefef;
            display: block;
            line-height: 30px;/*회색높이 범위안에서 가운데 정렬하도록*/
            padding: 0 10px;
        }
        
        #navi_text> li> div.navi_sub ul li a:hover{
            color: #a25859;
            font-family: "naB";
            
        }

         #navi_text>li:nth-child(1) >div.navi_sub ul{
            margin-left: 56%;
        }
        

         #navi_text> li:nth-child(2) >div.navi_sub ul{
            margin-left: 62%;
        }
        

         #navi_text> li:nth-child(3)> div.navi_sub ul{
            margin-left: 65%;
        }
        


/*-----모바일 네비-------*/
#sm_menu{
        position: absolute;
        background-color: #424242;
        width: 100%;
        top: 0px;
        padding-top: 70px;
        z-index: 200;
        right: 0;
        box-sizing: border-box;
        height: 600px; 
        display: none;
    }

/*#sm_menu > li:first-child span a{
        background-image: url(http://solmaeng.dothome.co.kr/portfolio/dunkin/img/main/splite_x2.png) 90% center no-repeat;
    }
    */
    #sm_menu > li span a{
        display: block;
        text-indent: 30px;
        height: 40px;
        line-height: 40px;
        font-family: "naB";
        font-size: 15px;
        margin: 0 10px;
        color: #efefef;
        border-bottom: 1px solid #7c7c7c;
        background: url(../r_img/r_sub/rhino_icon_plus.png) 90% center no-repeat;
    }
    
    #sm_menu > li > span a.selected{
          color:#e04347;
        cursor: default;
        border-bottom: none;
        background-image: url(../r_img/r_sub/rhino_icon_minus.png);
    }
    
    #sm_menu > li > .navi_sub> ul> li{
        background: #808080;
    }
    
    #sm_menu > li .navi_sub ul li a{
        display: block;
        text-indent: 30px;
        color: #fff;
        font-size: 12px;
        line-height: 30px;
    }
    
    #sm_menu > li .navi_sub ul li a:hover{
        color: #9a1b1e;
        text-decoration: underline;
    }

 #x_bar{
        position: absolute;
        /*justify-content: flex-start;*/
        display: none;
        z-index: 301;
         top: 10px;
        right: 7%;
      width:35px;
    height: 31px;
        background: url(http://solmaeng.dothome.co.kr/portfolio/dunkin/img/main/splite_x1.png) 10% 0 no-repeat;
        background-size:25px;
        cursor: pointer; 
    }
    
 
    #m_menu{
        right: 5%;
        top: 20px;
        position: absolute;
        display: none;
    
    }

#m_menu img{
    width: 60%;
}


 #mb_navi_bg{position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.7;
        z-index: 100;
       /* filter: alpha(opacity=60);*/}
    


/*---------login------------------*/
#log{
    width: 100%;
    float: right;
    /*overflow: hidden;*/
    
}

#log a{
    padding: 0 40px;
    padding-top: 15px;
    display: inline-block;
    float: right;
}

#log a span{
    color: #fff;
    font-family: "naB";
    font-size: 12px;
    cursor: pointer;
}

#search_i img{
vertical-align: middle;
    padding-top: 10px;
    float: right;
}


#search_i{
    position: relative;
    cursor: pointer;
}

.search_textb{
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 8px;
    right: 27%;
}

form.d_search{
    width: 40%;
    float: right;
    background: #4b4b4b;
    padding: 2px;
    position: relative;
}


form.d_search #place2{
    height: 30px;
    border: none;
    width: 90%;
    margin-left: 3%;
    padding-left: 10px;
    outline: none;/*커서 둘때 파란테두리선 생기는거 막기*/
}

form.d_search i{
    position: absolute;
    top: 1.5px;
    right: 2px;
    color: #666;
    cursor: pointer;
    background-color: #e5e5e5;
    padding: 3px;
}

#m_log{
    display: none;
}

/*---------------------서브네비-------------------------*/

#content{
    width: 100%;
}

#quick_right_menu{
            position: fixed;
            top: 130px;/*헤더100+여백30*/
            left: 2%;
           /* width: 334px;*/
            width: 15%;
            height: 36px;
            text-align: center;
        }
        
#quick_right_menu h2{
    background-color: #2f2f2f;
    width: 100%;
    color: #efefef;
    padding: 15px 0;
    font-family: "naB";
}  

#quick_right_menu h3{
    cursor: pointer;
    background-color: #808080;
    color: #efefef;
    
}
#quick_right_menu h3 a{
     color: #efefef;
    padding: 15px 15px;
     font-size: 1.2em;
    display: block;
     font-family: "naB";
}
        
#quick_right_menu h3:hover a{
   color: #9a1b1e;
}

#quick_right_menu ul.tab li a{
  background-color: #cecece;
  padding: 15px 0;
  display: block;
  color: #424242;
  cursor: default;
}


/*-----contents--------------------------------------------*/
/*------------------con1-------------------------------*/
div.con{
    padding-bottom: 50px;
    width: 100%;
    height: 600px;
}

div#con_1{
    background: url(../r_img/r_sub/rhino_sub_select_bg_02.png) center 0 no-repeat;
    background-size: cover;
    padding-top:100px;
}

div.con_wrap{
    width: 60%;
    margin: 0 20%;
}

ul.tab_tab{
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
}

ul.tab_tab li{
    width: 24%;
    float: left;
    border-radius: 2px;
    text-align: center;
     margin: 0 5px;
    border: 2px solid #424242;
}

ul.tab_tab li:first-child{
    border: 2px solid #efefef;
}

ul.tab_tab li a{
    color:#fff;
    display: block;
    padding: 10px; 
}

ul.tab_tab li:first-child a{
    cursor: default;
}

ul.tabdown{
    width: 100%; 
}
/*------con1 title-------------------*/
div.tabdown_title{
    overflow: hidden;
    margin-top: 20px;
    height: 70px;
}

div.tabdown_title img{
    float: left;
    width: 7%;
      transform: translate(0, 0px);
            padding:  0 10px;
             transition: all 0.5s ease-in;
}

div.tabdown_title:hover img{
      transform: translate(0, 5px);
            padding:  0 10px;
}


div.tabdown_title h4{
    color: #fff;
    font-size: 1.5em;
    float: left;
    padding-top: 20px;
    font-family: "naB";
}

/*------con1 p-------------------*/
div.tabdown p{
    color: #fff;
    text-align: center;
    font-size: 1.3em;
    font-family: "naB";
    margin-top: 40px;
}

div.tabdown ul{
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
}

div.tabdown ul li{
    float: left;
    width: 30%;
    margin: 0 10%;
}

div.tabdown ul li a img{
    width: 100%;
}

div.tabdown ul li a span{
    color:#fff;
    font-size: 1.1em;
    text-align: center;
    display: block;
    padding-top: 10px;
}

div.tabdown ul li a span strong{
    font-family: "naB";
    color:#9a1b1e;
    font-size: 1.2em;
}

div.tabdown ul li a:hover span strong{
    text-decoration: underline;
}




/*------------------con2-------------------------------*/

div#con_2{
    background: url(../r_img/r_sub/rhino_sub_select_bg2_13.png) center 0 no-repeat;
    background-size: cover;
}

ul.tab_tab2{
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
}

ul.tab_tab2 li{
    width: 24%;
    float: left;
     border: 2px solid #b2b2b2;
    border-radius: 2px;
    text-align: center;
     margin: 0 5px;
}
ul.tab_tab2 li:first-child{
    border: 2px solid #424242;
}

ul.tab_tab2 li a{
    color:#424242;
    display: block;
    padding: 10px; 
}

ul.tab_tab2 li:first-child a{
    cursor: default;
}



ul.tabdown2{
    width: 100%; 
}
/*------con1 title-------------------*/
div.tabdown2_title{
    overflow: hidden;
    margin-top: 20px;
    height: 70px;
}

div.tabdown2_title img{
    float: left;
    width: 7%;
    transform: translate(0, 0px);
            padding:  0 10px;
             transition: all 0.5s ease-in;
}

div.tabdown2_title:hover img{
      transform: translate(0, 5px);
            padding:  0 10px;
}

div.tabdown2_title h4{
    color: #424242;
    font-size: 1.5em;
    float: left;
    padding-top: 20px;
    font-family: "naB";
}

/*------con1 p-------------------*/
div.tabdown2 p{
    color: #424242;
    text-align: center;
    font-size: 1.3em;
    font-family: "naB";
    margin-top: 40px;
}

div.tabdown2 ul{
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
}

div.tabdown2 ul li{
    float: left;
    width: 30%;
    margin: 0 10%;
}

div.tabdown2 ul li a img{
    width: 100%;
}

div.tabdown2 ul li a span{
    color:#424242;
    font-size: 1.1em;
    text-align: center;
    display: block;
    padding-top: 10px;
}

div.tabdown2 ul li a span strong{
    font-family: "naB";
    color:#9a1b1e;
    font-size: 1.2em;
}

div.tabdown2 ul li a:hover span strong{
    text-decoration: underline;
}




/*------------------con3-------------------------------*/
div#con_3{
    background: url(../r_img/r_sub/rhino_sub_select_bg3_23.png) center 0 no-repeat;
    background-size: cover;
}

ul.tab_tab3{
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
}

ul.tab_tab3 li{
    width: 24%;
    float: left;
    border: 2px solid #424242;
    border-radius: 2px;
    text-align: center;
     margin: 0 5px;
}

ul.tab_tab3 li a{
    color:#fff;
    display: block;
    padding: 10px; 
}

ul.tab_tab3 li:first-child a{
    cursor: default;
}

ul.tab_tab3 li:first-child{
    border: 2px solid #efefef;
}

/*---------------footer-------------------------------------------------*/
#footer{
     background-color: #424242;
    height: 100px;/*내용에따라 늘어나도록 원래 세로 안주는것*/
    overflow: hidden;
    padding: 10px 0 ;
    width: 100%;
}

#terhino{
    width: 100%;
    overflow: hidden;
    text-align: center;
}

#terhino ul{
   display: flex;
    margin: 0 20%;
}

#terhino ul li{
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

#terhino ul li a{
    color: #fff;
    display: block;
    padding: 10px 30px;
}

#rhinocopy{
    width: 100%;
    text-align: center;
    color: #bebebe;
    margin: 30px 0 50px;
}



/*-------------------gotop--------------------------*/
.go_top{
    position: fixed;
    bottom: 80px;/*footer회색영역보다 올리고 싶어서 ㅇㅇ*/
    right: 10%; 
    display: none;
}

.go_top a{
    color: #fff;
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
}

.go_top:hover a{
   background-color:  rgba(255,255,255,0.8);
    color: #000;
}

        
        








/*------------------------미디어 쿼리------------------------*/
@media screen and (max-width:865px){
 /*------------네비----------------*/   
    #navi_text{
        width: 80%;
    }
    
#navi_text > li{
    float: left;
    margin-left: 4%;
    height: 40px;
    line-height: 50px;
    list-style: none;
    width: 27%;
    text-align: center;
}
 
   #navi_text>li:nth-child(1)>div.navi_sub ul{
            margin-left: 30%;
        }
        

         #navi_text>li:nth-child(2)>div.navi_sub ul{
            margin-left: 48%;
        }
        

         #navi_text>li:nth-child(3)>div.navi_sub ul{
            margin-left: 58%;
        }
            
    
}/*max-width:865px*/


@media screen and (max-width:767px){
    /*------헤더---------------*/
    #navi{
       /* height: 70px;*/
        height: 70px;
    }
    
    #quick_right_menu, #navi_text >li{
        display: none;
    }
    
    #sm_menu{
    display: none;
    }
    
    #m_menu{
        display: block;
    }
    
     #navi_wrap > h1{
    float: inherit;
    width: 100%;
    display: inline-block;
    text-align: center;
}
    
    #navi_wrap > h1> a img{
        width: 45%;
        margin-top: 15px;
    }
   
    #top_right{
    float: inherit;
    width: 100%;
    margin-top: 0;
    position: absolute;
    top: 15px;
    left: -89%;
}
    
#log a{
    display: none;
}
    
    #m_log{
        display: none;
        width: 100%;
        float: right;
        position: absolute;
        top: 30px;
        left: 10%;
        z-index: 302;
    }
    
    #m_log a span{
        color: #b4b4b4;
        font-size: 1.2em;
        font-family: "naB";
    }
    
    
    

#search_i img{
vertical-align: middle;
    padding-top: 10px;
    float: right;
    width: 7%;
}


#search_i{
    position: relative;
    cursor: pointer;
}

.search_textb{
    width: 70%;
    top: 40px;
    right: -65%;
}

form.d_search{
    width:100%;
}
/*---------------------content-----------------------*/
 div.con{
    padding-bottom: 0px;
    width: 100%;
    height: auto;
}
div.con_wrap{
    width: 90%;
    margin: 0 5%;
}
    
    
div.tabdown_title{
     height: 50px;
    }  
    
  div.tabdown_title img{
    float: left;
    width: 10%;
      transform:none;
       padding:  0 10px;
}

div.tabdown_title h4{
    float: left;
    padding-top:8px;
}


 
  /*------con1 p-------------------*/  
    div#con_1{
    padding-top:70px;
}
    
div.tabdown p{
    font-size: 1.4em;
    margin-top: 0px;
}

div.tabdown ul{
    overflow: hidden;
    width: 100%;
    margin-top: 0;
}

div.tabdown ul li{
    float: inherit;
    width: 100%;
    margin: 5% 0% 10%;
    overflow: hidden;
}

div.tabdown ul li a img{
    width: 50%;
    float: left;
    padding-right: 15px;
}
    
div.tabdown ul li a span{
    text-align:justify;
    padding-top: 10px;
}
  

/*-----------------con2----------------------------*/   
    div.tabdown2_title{
     height: 50px;
    }  
    
  div.tabdown2_title img{
    float: left;
    width: 10%;
      transform:none;
       padding:  0 10px;
}

div.tabdown2_title h4{
    float: left;
    padding-top:8px;
}


 
  /*------con1 p-------------------*/  
div.tabdown2 p{
    font-size: 1.4em;
    margin-top: 0px;
}

div.tabdown2 ul{
    overflow: hidden;
    width: 100%;
    margin-top: 0;
}

div.tabdown2 ul li{
    float: inherit;
    width: 100%;
    margin: 5% 0% 10%;
    overflow: hidden;
}

div.tabdown2 ul li a img{
    width: 50%;
    float: left;
    padding-right: 15px;
}
    
div.tabdown2 ul li a span{
    text-align:justify;
    padding-top: 10px;
}
  

    
    
    
    
    
    
    
 /*-------------footer-------------------*/ 
#terhino ul{
   display: flex;
    margin: 0 0%;
}

#terhino ul li{
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

#terhino ul li a{
    color: #fff;
    display: block;
    padding: 10px 10px;
}

#rhinocopy{
    width: 100%;
    text-align: center;
    color: #bebebe;
    margin: 10px 0 50px;
}

   
    
    
    
    
    
}/*max-width:767px*/

@media screen and (max-width:503px){
    
ul.tab_tab li{
    width: 40%;
} 
    
ul.tab_tab2 li{
    width: 40%;
}
    
ul.tab_tab3 li{
    width: 40%;
}
    
   div.tabdown ul li a img{
    padding-right: 15px;
    padding-top: 25px;
}
    
div.tabdown ul li a span{
    overflow: hidden;
} 
    
div.tabdown2 ul li a img{
    padding-right: 15px;
    padding-top: 25px;
}
    
div.tabdown2 ul li a span{
    overflow: hidden;
} 

    
    
}/*max-width:408px*/