@charset "utf-8";
/****************************************/
/* Name: 울산대학교 총동문회
/* PART: LAYOUT STYLE 
/* Version: 1.0 / day: 2021-07-07
/* Author:  
/****************************************/

/*
=========================================================================
pc 레이아웃 css
=========================================================================
*/

#header,
#header .head_box .logo a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}

#wrapper{position:relative;min-width:320px;width:100%;height:100%;right:0;z-index:300}

/* ---- 상단영역 ---- */
#header{position:absolute;top:0;left:0;padding-left:20px;min-width:320px;width:100%;overflow:hidden;background:#fff;z-index:150;box-shadow:0 5px 20px #676767}
#header::before{position:absolute;top:115px;left:0;width:100%;height:100%;content:'';border-top:1px solid #eaeaea;}
#header::after{position:absolute;top:195px;left:0;width:100%;height:250px;content:'';background:#053663 url('/resources/images/home/img//menu_bg.png') no-repeat 60px center}
#header .head_box{position:relative;margin:0 auto;max-width:1300px;min-height:195px;z-index:200}
#header .head_box .logo{padding:40px 0;height:115px;text-align:center}
#header .head_box .logo a{display:inline-block}
#header .head_box .topLink{position:absolute;top:45px;right:0}
#header .head_box .topLink ul::after{display:block;clear:both;content:''}
#header .head_box .topLink ul li{float:left;margin-left:5px}
#header .head_box .topLink ul li a{display:block;padding:0 20px 0 40px;font-size:15px;color:#737373;line-height:36px;background-color:#fff;background-repeat:no-repeat;background-position:15px center;border:1px solid #dbdbdb}
#header .head_box .topLink ul li.ic1 a{background-image:url('/resources/images/home/img//glob_ic1.png') }
#header .head_box .topLink ul li.ic2 a{background-image:url('/resources/images/home/img//glob_ic2.png') }

#header .head_box .btnMenu{display:none}

#gnb{position:relative;}
#gnb ul.gnb{position:relative;overflow:hidden;z-index:20}
#gnb > ul:after{display:block;clear:both;content:''}
#gnb > ul > li{position:relative;float:left;width:20%;text-align:center}
#gnb > ul > li > a{position:relative;display:block;padding:0;font-size:18px;color:#182024;line-height:80px;font-weight:500;text-decoration:none}
#gnb > ul > li.hv > a,
#gnb > ul > li.on > a,
#gnb > ul > li > a:hover{color:#0057a6}
#gnb > ul.on > li.hv > a::after,
#gnb > ul.on > li.on > a::after,
#gnb > ul.on > li > a:hover::after{height:4px}
#gnb > ul > li.hv > ul{z-index:1}
#gnb > ul > li > ul{position:absolute;top:81px;left:0;padding:25px 0 0 0;width:100%;min-height:400px;border-right:1px solid rgba(255,255,255,0.1)}
#gnb > ul > li:first-child > ul{border-left:1px solid rgba(255,255,255,0.1)}
#gnb > ul > li > ul li{margin-bottom:8px;}
#gnb > ul > li > ul li a{position:relative;display:inline-block;padding:6px 0;font-size:17px;color:#fff;font-weight:300;line-height:1.1}
#gnb > ul > li > ul li a:hover,
#gnb > ul > li > ul li.on a{color:#63adef;font-weight:400}


/* ---- 중간영역 ---- */
#container{position:relative;padding-top:195px;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}

#subContainer{padding-top:195px;overflow:hidden}
#subContainer #content{position:relative;margin:100px auto ;padding:0 20px 50px;max-width:1340px;min-height:600px}
#subContainer #content::after{position:absolute;top:0;right:-200px;width:21px;height:436px;content:'';background:url('/resources/images/home/img//sub_con_r_txt.png') no-repeat}

.subVisual{position:relative;height:348px;text-align:center;background-position:center top;background-size:cover}
.subVisual.bg1{background-image:url('/resources/images/home/img//sub_skin1.jpg')}
.subVisual.bg2{background-image:url('/resources/images/home/img//sub_skin2.jpg')}
.subVisual.bg3{background-image:url('/resources/images/home/img//sub_skin3.jpg')}
.subVisual.bg4{background-image:url('/resources/images/home/img//sub_skin4.jpg')}
.subVisual.bg5{background-image:url('/resources/images/home/img//sub_skin5.jpg')}
.subVisual .tit{position:absolute;top:50%;left:50%;padding:40px;width:440px;color:#fff;border:1px solid rgba(255,255,255,0.3);transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%)}
.subVisual .tit::before{position:absolute;top:26px;left:-33px;width:53px;height:14px;content:'';background:#0057a6}
.subVisual span{display:block;margin-bottom:20px;line-height:1}
.subVisual h1{font-family: 'MaruBuri-Regular';font-size:50px;line-height:1}

#lnb{position:relative;border-bottom:1px solid #c0c0c0}
#lnb::after{display:block;clear:both;content:''}
#lnb ul{margin:0 auto;max-width:1300px}
#lnb ul li{position:relative;float:left;width:50%;text-align:center;}
#lnb ul li::after{position:absolute;top:50%;left:0;margin-top:-20px;width:0;height:40px;content:'';border-left:1px solid #cdcdcd}
#lnb ul li:first-child::after{display:none}
#lnb ul li a{position:relative;display:block;padding:0 5px;font-size:20px;color:#6b6b6b;line-height:80px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#lnb ul li a:hover,
#lnb ul li.on a{color:#fff;background:#0057a6;}
#lnb ul li a span{display:inline-block;padding-bottom:4px;line-height:1.2;vertical-align:middle;}
#lnb ul li:first-child:nth-last-child(2),
#lnb ul li:first-child:nth-last-child(2) ~ li{width:50%}
#lnb ul li:first-child:nth-last-child(3),
#lnb ul li:first-child:nth-last-child(3) ~ li{width:33.33%}
#lnb ul li:first-child:nth-last-child(4),
#lnb ul li:first-child:nth-last-child(4) ~ li{width:25%}
#lnb ul li:first-child:nth-last-child(5),
#lnb ul li:first-child:nth-last-child(5) ~ li{width:20%}
#lnb ul li:first-child:nth-last-child(6),
#lnb ul li:first-child:nth-last-child(6) ~ li{width:16.66%}
#lnb ul li:first-child:nth-last-child(7),
#lnb ul li:first-child:nth-last-child(7) ~ li{width:14.28%}
#lnb ul li:first-child:nth-last-child(8),
#lnb ul li:first-child:nth-last-child(8) ~ li{width:12.5%}

.pageGuid{position:absolute;top:20px;right:20px;}
.location{position:relative;display:inline-block;z-index:3}
.location li{position:relative;display:inline-block;padding:0 8px 0 18px;font-size:17px;color:#8f8f8f;}
.location li::after{position:absolute;top:50%;left:0;margin-top:-4px;width:8px;height:8px;content:'';border:1px solid #aeb6ba;border-width:0 1px 1px 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.location li:first-child::after{display:none}
.location li:last-child{color:#0057a6;font-weight:500}

.etcBtn{position:relative;display:inline-block;margin-left:10px;padding-left:15px;z-index:3}
.etcBtn::before{position:absolute;top:50%;left:0;margin-top:-9px;width:0;height:18px;content:'';border-left:1px solid #aeaeae}
.etcBtn button{margin-left:5px;width:30px;height:30px;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;background-position:center center;border-radius:50%}
.etcBtn .btnPrint{position:relative;background-image:url('/resources/images/home/img//ic_print.png');}
.etcBtn .btnSns{position:relative;display:inline-block;vertical-align:middle}
.etcBtn .btnSns button{background-image:url('/resources/images/home/img//ic_share.png');}
.etcBtn .btnSns button.on{background-image:url('/resources/images/home/img//ic_share_close.png');background-color:#333}
.etcBtn .btnSns ul{display:none;position:absolute;top:40px;right:0;}
.etcBtn .btnSns ul li{margin-bottom:5px}
.etcBtn .btnSns ul li a{display:block;width:30px;height:30px;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:100%;border-radius:50%}
.etcBtn .btnSns ul li.ic1 a{background-image:url('/resources/images/home/img//ic_sns1.png');background-color:#3b5a98}
.etcBtn .btnSns ul li.ic2 a{background-image:url('/resources/images/home/img//ic_sns2.png');background-color:#1fa1f2}
.etcBtn .btnSns ul li.ic3 a{background-image:url('/resources/images/home/img//ic_sns3.png');background-color:#34bd18}
.etcBtn .btnSns ul li.ic4 a{background-image:url('/resources/images/home/img//ic_sns_share.png');border:1px solid #afafaf}

#mbLnb{display:none}

/* ---- 하단영역 ---- */
#footer {position:relative;padding:40px 20px 100px;width:100%;background:#252525}
#footer .footWrap{position:relative;margin:0 auto;max-width:1300px;}
#footer .footWrap::after{display:block;clear:both;content:''}
#footer .footWrap .footMenu{margin-bottom:65px;text-align:left}
#footer .footWrap .footMenu li{position:relative;display:inline-block;padding:0 15px}
#footer .footWrap .footMenu li::before{position:absolute;top:50%;right:-6px;margin-top:-6px;width:0;height:12px;content:'';border-left:1px solid rgba(255,255,255,0.5);}
#footer .footWrap .footMenu li:first-child{padding-left:0}
#footer .footWrap .footMenu li:last-child::before{display:none}
#footer .footWrap .footMenu li:last-child{padding-right:0}
#footer .footWrap .footMenu li a{display:block;padding:5px 0;color:#fefefe;}
#footer .footWrap .footMenu li a.acc{font-weight: 600; color: #dbecf6;}
#footer .footWrap .fFamily{position:absolute;top:0;right:0;}
#footer .footWrap .fFamily > button{position:relative;width:270px;height:39px;font-size:15px;color:#fefefe;text-indent:20px;text-align:left;border:1px solid rgba(255,255,255,0.4);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
#footer .footWrap .fFamily > button::after{position: absolute; top: 50%; right: 20px;content: "";width:0;height:0;margin-top: -3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #fff;}
#footer .footWrap .fFamily > button.on::after{transform:rotate(180deg);-webkit-transform:rotate(180deg)}
#footer .footWrap .fFamily > button:hover,
#footer .footWrap .fFamily > button.on{background:rgba(0,0,0,0.5)}
#footer .footWrap .fFamily .fFamCon{display:none;position:absolute;left:0;top:38px;width:100%;background:#252525;border:1px solid rgba(255,255,255,0.4);z-index:100}
#footer .footWrap .fFamily .fFamCon ul li{border-bottom:1px solid rgba(255,255,255,0.1)}
#footer .footWrap .fFamily .fFamCon ul li:last-child{border-bottom:0}
#footer .footWrap .fFamily .fFamCon ul li a{display:block;padding:7px 20px;font-size:15px;color:#fefefe}
#footer .footWrap address{display:block;margin-bottom:10px;font-size:16px;color:#fefefe}
#footer .footWrap address span{display:inline-block;margin:0 10px}
#footer .footWrap .account_con{position:absolute;top:75px;right:0;font-size:15px;color:#fefefe}
#footer .footWrap .account_con p{margin-bottom:20px}
#footer .footWrap .account_con .btn{display:inline-block;margin-right:7px}
#footer .footWrap .account_con .btn a{display:block;width:85px;font-size:14px;line-height:30px;text-align:center;border:1px solid rgba(255,255,255,0.4)}
#footer .footWrap small{font-size:15px;color:#6a6868;font-weight:300}

#footer .botBtTop{position:fixed;bottom:200px;right:20px;padding-top:10px;width:84px;height:84px;font-size:15px;color:#fff;text-indent:-999px;overflow:hidden;background:#63adef;border-radius:50%;z-index:2}
#footer .botBtTop::before{position:absolute;top:50%;left:50%;margin:-5px 0 0 -15px;width:30px;height:30px;content:'';border:1px solid #fff;border-width:3px 3px 0 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}



#mGnb{display:none;}


/*
=========================================================================
반응형 레이아웃 css
=========================================================================
*/

 /* PC / TABLET Device */
@media all and (min-width:641px){
	
	#lnbCon.fix #lnb{position:fixed;top:0;left:0;margin:0;width:100%;height:70px;max-width:100%;z-index:300}

}



 /* PC Device */
@media all and (min-width:1201px){
	

	#mGnb{display:none;}
	
}

 /* PC Device */
@media all and (max-width:1550px){
	
	#subContainer #content::after{display:none}
	
}

 /* TABLET Device */
@media all and (max-width:1200px){
	
	#header .head_box{min-height:90px}
	#header .head_box .logo{padding:25px 0;height:auto;text-align:left}
	#header .head_box .topLink{display:none}
	#header .head_box .btnMenu{display:block;position:absolute;right:0;top:0;width:90px;height:90px;text-indent:-999px;overflow:hidden;background:url('/resources/images/home/img//ic_mb_menu.png') no-repeat center center;background-size:32px;z-index:110}

	
	#gnb{display:none}
	
	/* 모바일메뉴 */
	#mGnb{display:block !important;position:fixed;top:0;right:-500px;padding-top:90px;width:500px;height:100%;background:#fff;z-index:500;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;}
	#mGnb::after{position:absolute;top:0;left:0;width:100%;height:90px;content:'';background:#053663;}
	#mGnb .mGlobTop{position:absolute;top:0;left:0;padding:20px 25px;width:100%;z-index:5}
	#mGnb .mGlobTop ul li{position:relative;display:inline-block;padding:0 20px;}
	#mGnb .mGlobTop ul li::after{position:absolute;top:50%;left:0;margin-top:-8px;width:0;height:15px;content:'';border-left:1px solid rgba(255,255,255,0.3)}
	#mGnb .mGlobTop ul li:first-child::after{display:none}
	#mGnb .mGlobTop ul li a{display:block;padding-left:30px;font-size:15px;color:#fff;line-height:36px;background-repeat:no-repeat;background-position:left center;}
	#mGnb .mGlobTop ul li.ic1 a{background-image:url('/resources/images/home/img//mb_glob_ic1.png') }
	#mGnb .mGlobTop ul li.ic2 a{background-image:url('/resources/images/home/img//mb_glob_ic2.png') }

	#mGnb > ul{width:100%;height:100%;overflow:auto;background:#fff;}
	#mGnb > ul > li{position:relative;font-size:20px;border-bottom:1px solid #eaeaea}
	#mGnb > ul > li.has-sub::after{position:absolute;top:30px;right:40px;width:15px;height:15px;content:'';border:1px solid #444;border-width:2px 2px 0 0;transform:rotate(-45deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease}
	#mGnb > ul > li > button{position:absolute;top:0;left:0;width:100%;height:70px;text-indent:-999px;overflow:hidden;}
	#mGnb > ul > li.open::after{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
	#mGnb > ul > li > a{display:block;padding:0 45px;color:#363c3f;line-height:70px}
	#mGnb > ul > li.open > a{color:#0057a6;font-weight:500}
	#mGnb > ul > li > ul{display:none;padding:20px 50px;background:#053663}
	#mGnb > ul > li > ul > li{position:relative;}
	#mGnb > ul > li > ul > li > a{display:block;padding:5px 0;font-size:18px;color:#fff;}
	#mGnb > ul > li > ul > li > a:hover,
	#mGnb > ul > li > ul > li.open > a{color:#63adef}
	#mGnb .btnMenuClose{display:block;position:absolute;top:0;right:0;width:90px;height:90px;text-indent:-999px;overflow:hidden;background:url('/resources/images/home/img//ic_mb_menu_close.png') no-repeat center center;background-size:32px;z-index:100}
	#mGnb.on{right:0} 

	.fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:200}
	#wrapper.wra_box{position:fixed;top:0;width:100%;height:auto;z-index:200;}

	#container{padding-top:90px}
	#subContainer{padding-top:90px}
	#subContainer #content{margin-top:30px}

	.subVisual{height:250px;}
	
	#lnb ul li{}
	#lnb ul li a{margin-left:-1px;margin-bottom:-1px;border-left:1px solid #cdcdcd;border-bottom:1px solid #cdcdcd}
	#lnb ul li.on a{border-color:#0057a6}
	#lnb ul li::after{display:none}
	#lnb ul li:first-child:nth-last-child(5),
	#lnb ul li:first-child:nth-last-child(5) ~ li{width:33.33%}
	#lnb ul li:first-child:nth-last-child(6),
	#lnb ul li:first-child:nth-last-child(6) ~ li{width:33.33%}
	#lnb ul li:first-child:nth-last-child(7),
	#lnb ul li:first-child:nth-last-child(7) ~ li{width:25%}
	#lnb ul li:first-child:nth-last-child(8),
	#lnb ul li:first-child:nth-last-child(8) ~ li{width:25%}

	.etcBtn .btnPrint{display:none}
	
	#footer{text-align:center}
	#footer .footWrap{}
	#footer .footWrap .footMenu{margin-bottom:40px;text-align:center}
	#footer .footWrap .fFamily{position:relative;margin:0 auto 40px;max-width:270px;text-align:left}
	#footer .footWrap .fFamily > button{width:100%}
	#footer .footWrap .account_con{position:relative;top:0;margin-bottom:30px;}

	#footer .botBtTop{position:fixed;top:auto;right:30px;bottom:30px;}
	
	
}

 /* TABLET Device */
@media all and (max-width:800px){
	

}


 /* Mobile Device */
@media all and (max-width:640px){
	
	body,
	table{font-size:14px;line-height:1.5}
	textarea, select, input, button{font-size:14px;line-height:1.4}
	
	#header .head_box{min-height:70px}
	#header .head_box .logo{padding:20px 0}
	#header .head_box .logo img{width:150px}
	#header .head_box .logo span{font-size:16px}
	#header .head_box .topLink .rtLink .link2{display:none;padding: 0 5px;}
	#header .head_box .topLink .rtLink .link2 li a{width: 25px;line-height: 30px;}
	#header .head_box .topLink .rtLink .link1{margin-right:0}
	#header .head_box .topLink .rtLink .link1 li{margin:0 10px}
	#header .head_box .topLink .rtLink .link1 li a{font-size: 12px;line-height: 30px;}
	
	#header .head_box .btnMenu{width:70px;height:70px;background-size:30px}

	#mGnb{right:-90%;padding-top:70px;width:90%}
	#mGnb::after{height:70px;}
	#mGnb .mGlobTop{padding:15px 15px;}
	#mGnb .mGlobTop ul li{padding: 0 15px;}
	#mGnb .mGlobTop ul li a{padding-left:25px}
	#mGnb .btnMenuClose{width:70px;height:70px;background-size:30px}
	#mGnb > ul > li > a{padding:0 25px;font-size:16px;line-height:50px}
	#mGnb > ul > li > button{height:50px}
	#mGnb > ul > li.has-sub::after{top:22px;right:30px;width:12px;height:12px}
	#mGnb > ul > li.open::after{top:15px}
	#mGnb > ul > li > ul{padding: 10px 30px;}
	#mGnb > ul > li > ul > li > a{padding:5px 0;font-size: 14px;}
	
	#container{padding-top:70px}
	#subContainer{padding-top:70px}
	#subContainer #content{padding: 0 15px 30px;min-height:300px}

	.subVisual{height:200px;}
	.subVisual .tit{padding: 20px;width: 250px;}
	.subVisual .tit::before{top: 20px;left: -20px;width: 30px;height: 10px;}
	.subVisual span{margin-bottom:10px;font-size:11px}
	.subVisual h1{font-size:30px}
	
	#lnb{margin-bottom:30px}
	#lnb ul li a{font-size: 14px;line-height:45px;}
	#lnb ul li:first-child:nth-last-child(2),
	#lnb ul li:first-child:nth-last-child(2) ~ li{width:50%}
	#lnb ul li:first-child:nth-last-child(3),
	#lnb ul li:first-child:nth-last-child(3) ~ li{width:33.33%}
	#lnb ul li:first-child:nth-last-child(4),
	#lnb ul li:first-child:nth-last-child(4) ~ li{width:50%}
	#lnb ul li:first-child:nth-last-child(5),
	#lnb ul li:first-child:nth-last-child(5) ~ li{width:50%}
	#lnb ul li:first-child:nth-last-child(6),
	#lnb ul li:first-child:nth-last-child(6) ~ li{width:50%}
	#lnb ul li:first-child:nth-last-child(7),
	#lnb ul li:first-child:nth-last-child(7) ~ li{width:50%}
	#lnb ul li:first-child:nth-last-child(8),
	#lnb ul li:first-child:nth-last-child(8) ~ li{width:50%}

	.pageGuid{position:relative;top:0;right:0;margin-bottom:20px;}
	.location li{padding: 0 2px 0 14px;font-size: 13px;}
	.location li:first-child{padding-left:0}

	.etcBtn{padding-left:3px}
	.etcBtn button{background-size:80%}
	.etcBtn .btnSns ul li a{background-size:80%}
	
	
	#footer{padding: 20px 15px 50px;}
	#footer .footWrap .footMenu{margin-bottom:20px}
	#footer .footWrap .footMenu li{padding:0 6px 0 10px;font-size:12px}
	#footer .footWrap .fFamily > button{height: 35px; font-size: 13px;text-indent: 15px;}
	#footer .footWrap .fFamily .fFamCon{top:33px}
	#footer .footWrap .fFamily .fFamCon ul li a{padding: 7px 15px;font-size: 13px;}
	#footer .footWrap address{font-size:13px}
	#footer .footWrap address span{display:block}
	#footer .footWrap .account_con{margin-bottom:20px;font-size:12px}
	#footer .footWrap small{font-size:12px}

	#footer .botBtTop{right:10px;bottom:10px;width:40px;height:40px;z-index:50}
	#footer .botBtTop::before{top:22px;margin-left: -5px;width: 10px;height: 10px;}
	
}