@charset "utf-8";



html, body, p, div, img, ul, li {padding:0; margin:0; border:0;}

body {font-size:14px; font-family:sans-serif; line-height:1.8; letter-spacing:-0.5px;}

body.sugang {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/20bg_sugang2.jpg') center top no-repeat; background-size:cover;}

body.change {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/20bg_change2.jpg') center top no-repeat; background-size:cover;}

body.basket {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_basket.jpg') center top no-repeat; background-size:cover;}



#content {width:1000px; margin:0 auto; padding:30px 0 0 0;}

.logo {height:60px; font-size:0; background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/logo.png') center top no-repeat;}

.btn_area {overflow:hidden; margin:0 auto 0 auto; text-align:center;}

.btn_area a {display:inline-block;}



/* top */

.top {text-align:center;}

.top .title {height:50px; margin-bottom:30px; font-size:0;}

.top .title2 {height:50px; margin-bottom:30px; font-size:0;}

.sugang .top .title {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/20title_sugang2.png') center no-repeat;}

.change .top .title {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/20title_change2.png') center no-repeat;}

.sugang .top .title2 {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/title_sugang2.png') center no-repeat;}

.change .top .title2 {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/title_change2.png') center no-repeat;}

.basket .top .title {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/title_basket.png') center no-repeat;}

.top p {margin-bottom:15px; font-size:12px;}

.top p span {display:block; letter-spacing:0.5px;}

.top .btn_area a {min-width:100px; height:37px; line-height:34px; padding:0px 3% 0px 3%; color:#ffffff; font-weight:bold; text-decoration:none; -webkit-border-radius:19px;-moz-border-radius:19px;border-radius:19px;}

.top .btn_area .btn1 {background:#206098;}

.top .btn_area .btn2 {background:#485d9b; margin:0 0 0 1%;}

.top .btn_area .btn3 {background:#a77894; margin:0 0 0 1%;}

.top .btn_area .btn1:hover {color:#f0d1ae;}

.top .btn_area .btn2:hover {color:#f4e5a2;}

.top .msg {margin-bottom:20px; color:#d04150; font-size:28px; line-height:1; font-weight:600;}



/* middle */

.middle {width:700px; margin:30px auto 30px;}

.middle .btn_area {margin-bottom:20px;}

.middle .btn_area a {float:left; display:inline-block; width:49%; padding:0px 0 0px 0;}

.middle .btn_area a div {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_btn_off.png') 0 0 no-repeat; background-size:100% 100%;}

.middle .btn_area a div:hover {background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_btn_on.png') 0 0 no-repeat; background-size:100% 100%;}

.middle .btn_area a span {display:block; line-height:95px; background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_btn_image.png') center 0 no-repeat; background-size:auto 100%;}

.middle .btn_area a span img {margin:0 4px 0 4px; vertical-align:middle;}

.middle .btn_area .btn1 {background:#002d56;}

.middle .btn_area .btn2 {background:#876c4d; margin:0 0 0 2%;}

.middle .btn_area .btn1:hover {background:#002d56;}

.middle .btn_area .btn2:hover {background:#876c4d;}

.basket .middle .btn_area {margin-bottom:30px;}

.basket .middle .btn_area .btn2 {width:64%; margin:0 0 0 18%;}

.basket .middle .btn_area .btn2 span {line-height:85px;}

.change .middle .btn_area.w50 a {width:48%;}

.change .middle .btn_area .btn2 {margin:0 0 0 4%;}

.change .middle .btn_area .btn2 span {line-height:60px; padding:18px 0 17px 0;}

.change .middle .btn_area.w50 a.w100 {width:100%; margin:0 0 0 0%;}



.text_box {overflow:hidden; margin:0 0 20px 0; padding:20px 0px 20px 0px; border:solid 1px #bbbbbb; background:#ffffff;}

.text_box div {float:left; display:inline-block; border-left:dotted 1px #999999; font-size:16px; color:#333333; vertical-align:top; text-align:center; font-weight:600; }

.text_box div strong {display:block; font-size:20px; letter-spacing:-1px;}

.text_box div .line {padding:0 10px 0 10px; color:#666666;}

.text_box2 {overflow:hidden; margin:0 0 20px 0; padding:20px 0px 20px 0px; border:solid 1px #bbbbbb; background:#ffffff; width:70%; margin:0 auto;}

.text_box2 div {float:left; display:inline-block; border-left:dotted 1px #999999; font-size:16px; color:#333333; vertical-align:top; text-align:center; font-weight:600; }

.text_box2 div strong {display:block; font-size:20px; letter-spacing:-1px;}

.text_box2 div .line {padding:0 10px 0 10px; color:#666666;}

.text_box .box1 {width:31%; border-left:none; color:#00427e; font-size:14px;}

.text_box .box2 {width:43%; padding:3px 0 0 0;}

.text_box .box3 {width:25%; line-height:65px;}

.text_box .box4 {width:70%; padding:10px 0 10px 0;}

.text_box .box4 span {font-size:18px;}

.text_box.w50 {float:left; display:inline-block; width:48.5%; margin-right:2%; padding:7px 0px 7px 0px;}

.text_box.w50 div {line-height:1;}

.text_box.w50 div span {line-height:24px;}

.text_box.w50 .box1 {width:30%; padding:10px 0 0 0; margin:14px 0 14px;}

.text_box.w50 .box2 {width:65%; margin:14px 0 14px 0;}

.text_box.w50 .box3 {width:30%; margin:5px 0 2px 0; border-left:none;}

.text_box.w50 .box4 {width:60%; margin:5px 0 2px 0;}

.btn_area.w50 {width:49%;}

.btn_area.w50 .w100 {width:100%;}

.text_r{color:#F00;}

.notice {clear:both; margin:0 0 25px; padding:30px 0 35px 5%; border:solid 1px #bbbbbb; background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_notice.png');}

.notice p {margin:0 0 15px 0;}

.notice strong {color:#193d5f; font-size:16px;}

.notice dl {display:inline-block; width:44.5%; margin:0 5% 0 0; color:#666666; font-size:12px; word-break:keep-all; vertical-align:top;}

.notice dt {font-weight:600;}

.notice dd {margin:0 0 0 4px; padding:0 0 0 8px; font-size:11px; background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/blt_line.gif') 0 12px no-repeat;}

.notice .down {background:none; padding-top:10px; line-height:1;}

.notice div {padding:0 5% 0 0; color:#666666; font-size:13px;}

.notice div strong {font-size:13px;}

.notice div p {margin:10px 0 0 0;}

.notice .msg {margin:20px 5% -15px 10px; font-size:11px; letter-spacing:-1.2px; text-indent:-10px;}

.notice .msg span {color:#ff0000;}



.link {overflow:hidden;}

.link li {float:left; display:inline-block; width:19%; margin:5px 0 0 1.25%;}

.link .first {margin:5px 0 0 0px;}

.link li a {display:block; padding:13px 0 15px 0; color:#002d56; font-size:12px; font-weight:600; line-height:16px; text-align:center; text-decoration:none; border:solid 1px #bbbbbb; background:url('http://builder.hufs.ac.kr/user/hufs/sugang_intro/images/bg_notice.png');}

.link li a:hover {color:#7a6043; border:solid 1px #999999; background:#ffffff;}

.link li .rows {padding:5px 0px 7px 0px;}



/* bottom */

.bottom {padding:0 0 40px 0; font-size:12px; text-align:center;}

.sugang .bottom {color:#fff;}

.change .bottom {color:#666666;}

.basket .bottom {color:#aaaaaa;}



@media screen and (max-width:1023px) {

	#content {width:100%;}

	.top {width:92%; margin:0 auto; word-break:keep-all;}

}

@media screen and (max-width:890px) {

	.sugang .top .title, .change .top .title {background-size:100%;}
	
	.sugang .top .title2, .change .top .title2 {background-size:100%;}

}

@media screen and (max-width:767px) {

	#content {width:94%; padding:30px 3% 0 3%;}	

	.sugang .top .title, .change .top .title, .basket .top .title {background:none;}

	.top .title {height:auto; margin-bottom:20px; color:#081c42; font-size:2em; line-height:1.3; font-weight:600;}	

	.top .title span {color:#8d7050;}
	
	.sugang .top .title2, .change .top .title2, .basket .top .title {background:none;}

	.top .title2 {height:auto; margin-bottom:20px; color:#081c42; font-size:2em; line-height:1.3; font-weight:600;}	

	.top .title2 span {color:#8d7050;}

	.top p {margin-bottom:20px;}

	.top .btn_area a {line-height:37px; font-weight:normal;}

	.top .msg {font-size:20px;}

	.middle {width:inherit;}

	.text_box {padding:10px 0px 10px 0px;}
	
    .text_box2 {padding:10px 0px 10px 0px; width:100%;}

	.text_box .box1 {width:100%; padding:0px 0 10px 0;}

	.text_box .box2 {width:100%; padding:10px 0 10px 0; border-left:none; border-top:dotted 1px #999999;}

	.text_box .box3 {width:100%; padding:10px 0 0px 0; border-left:none; border-top:dotted 1px #999999; line-height:45px;}

	.text_box .box4 {width:100%; padding:10px 0 0px 0; border-left:none; border-top:dotted 1px #999999; line-height:45px;}

	.text_box .box4 span {font-size:20px;}

	.middle .btn_area a {width:100%;}

	.middle .btn_area .btn2 {margin:50px 0 0 0%;}

	.basket .middle .btn_area .btn2 {width:100%; margin:0 0 0 0%;}

	.text_box.w50 {width:100%; margin-right:0%;}

	.text_box.w50 .box1 {margin:0 0 0 0; padding:20px 0 0px 0; border-top:none;}

	.text_box.w50 .box2 {width:69%; margin:0 0 0 0; border-top:none; border-left:dotted 1px #999999;}	

	.text_box.w50 .box3 {margin:0 0 0 0; border-top:none; padding:0px 0 0px 0;}

	.text_box.w50 .box4 {width:69%; margin:0 0 0 0; border-top:none; border-left:dotted 1px #999999;}

	.btn_area.w50 {width:100%;}

	.change .middle .btn_area.w50 a {width:49%;}

	.change .middle .btn_area .btn2 {margin:0 0 0 2%;}

	.change .middle .btn_area .btn2 span {line-height:95px; padding:0px 0 0px 0;}

	.link {border-top:solid 1px #bbbbbb; border-left:solid 1px #bbbbbb;}

	.link li {width:33.3333333%; margin:0px 0 0 0;}

	.link .first {margin:0px 0 0 0;}

	.link li a, .link li a:hover {border-left:none; border-top:none;}

	.link li a br {display:none;}

	.link li .rows {padding:13px 0 15px 0;}

	.bottom {padding:40px 4% 40px;}

	.bottom .logo {height:55px;}

	.bottom strong {display:block; margin-top:5px; }

}

@media screen and (max-width:640px) {

	.middle .btn_area a span, .change .middle .btn_area .btn2 span, .basket .middle .btn_area .btn2 span {line-height:65px;}

	.middle .btn_area a span img {height:21px;}

	.middle .btn_area a span img.img_basket {height:28px;}

	.notice {padding:25px 5% 25px 5%;}

	.notice strong {padding:0 0 0px 0px;}

	.notice dl {float:inherit; display:block; width:100%; margin:10px 0 0 0;}

	.notice .msg {margin:20px 5% 0px 10px; letter-spacing:0px;}

	.link li {width:50%;}

}

@media screen and (max-width:568px) {

	.top .btn_area.type2 {width:100%;}

	.top .btn_area.type2 a {min-width:inherit; width:43%;}

	.top .btn_area.type2 .btn3 {width:94%; margin:10px 0 0 0;}

}

@media screen and (max-width:521px) {

	.top .btn_area {width:100%;}

	.top .btn_area a {width:42.5%;}

	.top .btn_area.type2 a {width:42.5%;}

	.top .btn_area.type2 .btn3 {width:94%; margin:10px 0 0 0;}

}

@media screen and (max-width:480px) {

	.top .msg {font-size:18px;}

	.text_box .box4 span {font-size:16px;}

	.change .middle .btn_area.w50 a {width:100%;}

	.change .middle .btn_area .btn2 {margin:10px 0 0 0;}

}

@media screen and (max-width:360px) {

	.bottom {background-size:80% auto;}

}