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

@charset "utf-8";


/* top */
#top { height: 900px; background: url(../images/main_visual.jpg) no-repeat center 0; padding-top: 30px; }

#header { background: #FFF; height: 100px; position: relative; }
#header h1 { position: absolute; left: 40px; top: calc(50% - 23px); }

#header .gnb { position: absolute; right: 40px; top: 30px; }
#header .gnb > li { float: left; }
#header .gnb > li > a { display: block; padding: 10px 40px; font-size: 20px; }
#header .gnb > li:hover > a { color: #f46811; }
#header .gnb > li:hover > .depth2 { display: block; }
#header .gnb .depth2 { background:#000; padding: 20px 0; }
#header .gnb .depth2 li a { display: block; text-align: center; padding: 5px 0; color: #FFF; }
#header .gnb .depth2 li a:hover { color:#f46811; }


#top .visual_txt { color: #FFF; padding: 0 50px; margin-top: 350px; }
#top .vt_01 { font-size: 50px; font-weight:900; padding-bottom: 10px; text-shadow:2px 2px 5px rgba(0,0,0,0.3); text-transform: capitalize; font-family: 'Poppins'; }
#top .vt_02 { font-size: 20px; padding-bottom: 50px; text-shadow:2px 2px 5px rgba(0,0,0,0.3); }
#top .more a { color: #FFF; display: inline-block; padding: 10px 40px;	border: 1px solid #FFF; border-radius: 50px; }
#top .more a:hover { background: #FFF; color: #333; }




#biz { text-align:center; padding: 120px 0 150px; }
#biz h2 { font-size:50px; padding-bottom:10px; font-weight: 800; font-family: 'Poppins'; }
#biz .biz_part { margin:50px 0 0; }
#biz .biz_part li { float: left; width: calc(100%/4); height: 380px; }
#biz .biz_part li:nth-child(1) { background: url(../images/biz_01.jpg) no-repeat center top; }
#biz .biz_part li:nth-child(2) { background: url(../images/biz_02.jpg) no-repeat center top; }
#biz .biz_part li:nth-child(3) { background: url(../images/biz_03.jpg) no-repeat center top; }
#biz .biz_part li:nth-child(4) { background: url(../images/biz_04.jpg) no-repeat center top; }
#biz .biz_part li a { display: block; height: 380px; background: rgba(0,0,0,0.5); color: #FFF; font-size: 20px; text-align: center; padding-top: 160px; }
#biz .biz_part li a:hover { background:rgba(7,37,93,0.8); }



#about { background: url(../images/about_bg.jpg) no-repeat center top; padding: 100px 0; }
#about .about_tit { float: left; color: #FFF; }
#about .about_tit h2 { font-size: 50px; padding-bottom: 30px; font-weight: 800; line-height: 1; font-family: 'Poppins'; }
#about .about_link { float: right; }
#about .about_link li { float: left; width: 250px; height: 250px; margin-left: 20px; }
#about .about_link li:nth-child(1) { background: rgba(244,104,17,0.7) url(../images/icon_01.png) no-repeat center 60px; }
#about .about_link li:nth-child(2) { background: rgba(12,21,47,0.7) url(../images/icon_02.png) no-repeat center 60px; }
#about .about_link li:nth-child(3) { background: rgba(7,37,93,0.7) url(../images/icon_03.png) no-repeat center 60px; }
#about .about_link li a { color: #FFF; display: block; text-align: center; padding-top: 150px; font-size:20px; }
#about .about_link li span { font-size:12px; opacity:0.5; }




#footer { background: #000; color: rgba(255,255,255,0.5); padding: 50px 0 80px; }
#footer address { white-space: pre; }
#footer .copy { color: rgba(255,255,255,0.2); padding-top: 10px; }