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

@charset "utf-8";
/* CSS Document */


#top { height: 900px; background: url(../images/mv_01.jpg) no-repeat center 0; padding-top: 30px; }
#top #header { height:66px; position: relative; }
#top #header h1 { position: absolute; left: 0; top: 0; }
#top #header .gnb { position: absolute; left: 320px; top: 0; }
#top #header .gnb > li { float: left; }
#top #header .gnb > li > a { display: block; padding: 10px 40px; font-size: 20px; font-weight: 600; color: #fff; }
#top #header .gnb > li:hover > a { color: #FF0; }
#top #header .gnb > li:hover > .dp2 { display: block; }
#top #header .gnb .dp2 { background:#000; padding: 15px 0; }
#top #header .gnb .dp2 li a { display: block; text-align: center; padding: 5px 0; color: #FFF; }
#top #header .gnb .dp2 li a:hover { color:#FF0; }

#top #header .util { position: absolute; right: 0; top: 15px; }
#top #header .util > li { float: left; padding-left: 20px; }
#top #header .util > li > a { display: block; color: rgba(255,255,255,0.6); font-size: 12px; text-transform: uppercase; }



#top #visual_txt { color: #FFF; letter-spacing: -2px; padding-top:300px; }
#top #visual_txt .vt_01 { padding-bottom: 50px; text-shadow:2px 2px 5px rgba(0,0,0,0.3); }
#top #visual_txt .vt_02 { font-size: 80px; font-weight: 600; padding-bottom: 10px; text-shadow:2px 2px 5px rgba(0,0,0,0.3); }
#top #visual_txt .vt_03 { font-size: 30px; text-shadow:2px 2px 5px rgba(0,0,0,0.3); }



#contents {}

#count { background: linear-gradient(to right,#4664bc,#9a50e7); }
#count ul { padding: 100px 0; }
#count ul li { float: left; width: calc(100%/4); text-align: center; color: #fff; padding: 70px 0 0; border-right: 1px solid rgba(255,255,255,0.1); }
#count ul li:nth-child(1) { background: url('../images/count_ico_01.png') no-repeat center top; }
#count ul li:nth-child(2) { background: url('../images/count_ico_02.png') no-repeat center top; }
#count ul li:nth-child(3) { background: url('../images/count_ico_03.png') no-repeat center top; }
#count ul li:nth-child(4) { background: url('../images/count_ico_04.png') no-repeat center top; border-right: 0; }
#count ul li .tit { font-size: 20px; color: rgba(255,255,255,0.5); }
#count ul li .number { font-size: 30px; font-weight: 600; font-family: 'Open Sans'; }


#biz { width: 1200px; margin: 0 auto; padding: 150px 0; }
#biz h2 { font-size: 50px; font-weight:600; padding-bottom: 10px; }
#biz p { color: #999; padding-bottom: 50px; }

#biz .biz_list { float:left; width:300px; }
#biz .biz_list li a { display:block; font-size: 20px; padding: 15px 0; border-bottom: 1px solid #ddd; }
#biz .biz_list li a:hover,#biz .biz_list li a.on { border-bottom: 1px solid #000; }
#biz .biz_detail { float:right; width:800px; height:600px; position:relative; }
#biz .biz_detail dl { position: absolute; left:0; bottom:0; width: 350px; height: 300px; background: #2d4478; padding: 50px;  color: #fff; z-index:3; }
#biz .biz_detail dl dt { font-size: 30px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 30px; }
#biz .biz_detail dl dd { opacity: 0.5; }
#biz .biz_detail img { position:absolute; right:0; top:15px; }


#notice { background: url('../images/notice_bg.jpg') no-repeat center top; padding: 150px 0; }
#notice h2 { text-align: center; font-size: 50px; padding-bottom: 50px; color: #fff; font-weight:600; }
#notice ul li { width: calc((100% - 60px)/3); background: #fff; float: left; margin-right: 30px; padding: 40px; border: 10px solid #fff; }
#notice ul li:last-child { margin-right: 0; }
#notice ul li:hover { border: 10px solid #bf0d7a; }

#notice dl dt { font-size: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ddd; margin-bottom: 20px; }
#notice dl dd.view { color: #999; height: 150px; }
#notice dl dd.date { color: #666; }



#footer { background:#333; padding: 50px 0; }
#footer .inner { height: 100px; position:relative; }
#footer .footer_logo { position:absolute; top:0; left:0; opacity: 0.5; }
#footer address { position:absolute; top:0; left:200px; color:#999; }
#footer address .call { display: inline-block; padding-left: 20px; color: #A6CD32; }
#footer .sns { position:absolute; right:0; top:0; }
#footer .sns li { float:left; padding-left:20px; }