210713 UIUX WebDesign jQuery 연습_1_3(index.html -> main.css)

@charset "utf-8";

/* header */
#header { width:1200px; height:120px; margin:0 auto; position:relative; }
#header h1 { position:absolute; left:0; top:40px; }
#header .global { position:absolute; right:0; top:10px; }
#header .global li { float:left; padding-left:20px; }
#header .global li a { color:#8ba3c6; font-size:0.875rem; } /* font-size:14px; */


#header .gnb { position:absolute; right:0; top:60px; }
#header .gnb > li { float:left; }
#header .gnb > li > a { font-size:1.25rem; font-weight:600; display:block; padding:10px 50px 20px; } /* font-size:20px; */
#header .gnb > li:hover > a { color:#8ba3c6; }
#header .gnb > li:hover > .depth2 { display:block; }
#header .gnb .depth2 { background:#FFF; padding:15px; box-shadow:5px 5px 5px rgba(0,0,0,0.1); }
#header .gnb .depth2 li a { display:block; padding:5px 20px; }
#header .gnb .depth2 li a:hover { background:#8ba3c6; color:#FFF; }



#main_visual { background:url(../images/main_bg.jpg) no-repeat center top; height:500px; text-align:center; box-shadow:inset 0 5px 10px rgba(0,0,0,0.1); padding-top:90px; }


/* contents */
#main_banner { padding:100px 0; }
#main_banner h2 { text-align:center; padding-bottom:30px; }
#main_banner ul li { float:left; width:calc(100%/3); }
#main_banner ul li a { display:block; text-align:center; color:#FFF; font-size:1.25rem; padding:130px 0 40px; } /* font-size:20px; */
#main_banner ul li:nth-child(1) a { background:#a5b365 url('../images/ico_01.png') no-repeat center 30px; }
#main_banner ul li:nth-child(2) a { background:#d9c661 url('../images/ico_02.png') no-repeat center 30px; }
#main_banner ul li:nth-child(3) a { background:#cd867f url('../images/ico_03.png') no-repeat center 30px; }



#hansik_logo { background:#e6e6e6; text-align:center; padding:50px 0; }

#cooking { background:#8ba3c6; padding: 50px 0; }
#cooking h2 { display: none; }
#cooking .cooking_list li { float:left; position: relative; background: #fff; }
#cooking .cooking_list li:last-child { float: right; }
#cooking .cooking_list li a { display:block; text-align:center; }
#cooking .cooking_list li p { padding:15px 0 20px; }
#cooking .detail { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #FFF; padding-top: 170px; }
#cooking .detail span { display: inline-block; padding: 15px 60px; font-size:1.25rem; background: #000; color: #FFF; border: 1px solid #fff; } /* font-size:20px; */
#cooking .cooking_list li:hover .detail { display: block; }





/* footer */
#footer { height:200px; position:relative; }
#footer .footer_logo { position:absolute; left:0; top:60px; }
#footer address { position:absolute; left:210px; top:60px; color:#999; white-space: pre; }
#footer .copy { position:absolute; left:210px; top:90px; color:#ccc; }
#footer .sns { position:absolute; right:0; top:60px; }
#footer .sns li { float:left; padding-left:10px; }
#footer .sns li a { display:block; text-indent:-9999px; width:40px; height:40px; border-radius:50%; }
#footer .sns li:nth-child(1) a { background:#4267b2 url(../images/facebook.png) no-repeat center center; }
#footer .sns li:nth-child(2) a { background:#03cf5d url(../images/blog.png) no-repeat center center; }
#footer .sns li:nth-child(3) a { background:#fd0100 url(../images/youtube.png) no-repeat center center; }