@charset "utf-8";
@import url('/site/resource/pnu/sanhak-webzine/fonts/scdream.css');
@import url('/common/fonts/bootstrap-icons/bootstrap-icons.css');

/*****************************************************
	common
*****************************************************/

:root {
    --main-color: #265BD5;
	--point-color-01: #3CB98F;
	--point-color-02: #193B8A;
	--point-color-03: #17204B;
    --point-color-04: #6C46E7;

    --font-type-01: 'scdream';
    --font-icon: 'bootstrap-icons'
}

body,html{font-size:15px;overflow-x: hidden;width: 100%;}
a{color:#333;transition: .3s;}
a:focus,a:hover{color:var(--point-color-04);text-decoration:underline;text-underline-position: under;}
.btn:focus,.btn:focus-visible,a:focus,a:focus-visible,button:focus,button:focus-visible{outline:1px auto -webkit-focus-ring-color;outline-offset:-1px}
img{width:100%;max-width:100%;vertical-align:top;}
p{margin-bottom: 0;}
ul{margin-bottom: 0;}
button{cursor: pointer;transition: .3s;}
.line-gap{width:100%;margin:35px 0;border-top:1px dashed #ddd}
.container-lg{margin:0 auto;}

@media(min-width:992px){
    html::-webkit-scrollbar{width:7px}
    html::-webkit-scrollbar-track{background-color:#f7f7f7;}
    html::-webkit-scrollbar-thumb{background-color:var(--point-color-01);}
    html::-webkit-scrollbar-button{display:none}
    body,html{font-size:16px}
    .container-lg{max-width: 960px;}
}
@media(min-width:1200px){
    .container{padding-inline:0}
    .container-lg{max-width: 1140px;}
}
@media(min-width:1400px){
    .container-lg{max-width:1300px}
}
@media(min-width:1500px){
    .container-lg{max-width:1400px}
}
@media print {
    .sub-container .cont-sub .cont-mark{display: none;}
    .sub-container .cont-sub .cont-mark img{display: none;}
}

/* keyframes */
@keyframes popAni {
    0%{transform: translateY(-50%);}
    50%{transform: translateY(0%);}
    100%{transform: translateY(-50%);}
}
@keyframes popAni2 {
    0%{transform: translateY(0);}
    50%{transform: translateY(5px);}
    100%{transform: translateY(0);}
}
@keyframes shakeAni{
    0%{transform: rotate(0deg);}
    30%{transform: rotate(5deg);}
    75%{transform: rotate(-5deg);}
    100%{transform: rotate(0deg);}
}
@keyframes scaleAni {
    0%{width: 90%; height: 90%; opacity: 0;}
    100%{width: 130%; height: 130%; opacity: .1;}
}
@keyframes shine{
    100%{left:125%}
}

/************ header ************/
#header{position:fixed;width:100%;z-index:1001;top:0;transition:all .3s ease-out;background: var(--point-color-02) url(/site/resource/pnu/sanhak-webzine/images/header-bg.png) no-repeat right center; background-size: contain; border-radius: 0 0 20px 20px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);padding:10px 15px;}
/* header left */
#header .header-left{display: flex; color: #fff; align-items: center; gap: 0 7px;}
#header .site-logo{width: 120px;;margin-bottom: 0; font-size: inherit;height: auto;}
#header .site-logo a{display: block;}
#header .header-vol{font-size: 14px;}
#header .header-vol span{display: none;}

#header .header-issue{border-radius: 100px; height: 28px; background-color: #fff;}
#header .header-issue select{font-family: var(--font-type-01); font-weight: 700;font-size: 14px; cursor: pointer; border-radius: 100px; border: 0;padding: 0 7px; height: 100%; line-height: initial; background:-moz-linear-gradient(left, #265BD5 0%, #3CACB9 100%);background:-webkit-linear-gradient(left, #265BD5 0%,#3CACB9 100%);-webkit-background-clip: text; -webkit-text-fill-color: transparent;  -o-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
#header .header-issue select::-ms-expand{display:none}
#header .header-issue select option{font-size: inherit; font-family: 'noto';}
#header .dropdown button{background: #fff;border:0; border-radius: 100px;position: relative;height: 30px;padding: 4px 10px;overflow: hidden;}

/* header menu */
#header .header-menu{display: none;}

/* header right */
#header .header-right{display: flex;align-items: center;gap:0 20px;}
#header .subscribe{display: none;}
#header .subscribe a{color: #fff; padding-left: 25px; background: url(/site/resource/pnu/sanhak-webzine/images/subscribe-icon.svg) no-repeat left center;}
#header .subscribe a:hover,
#header .subscribe a:focus{text-decoration: none;}
#header .site-map-btn{background: none; border: none;width: 40px;height: 40px;background-color: rgba(255,255,255,0.1); border-radius: 50%;position: relative;}
#header .site-map-btn span{position: absolute; height: 2px; border-radius: 10px;background-color: #fff;width: 17px;display: block;left: 50%; transform: translateX(-50%); transition: .3s;}
#header .site-map-btn span:nth-child(1){top: 12px;}
#header .site-map-btn span:nth-child(2){width: 11px;top: 19px;transform: translateX(-35%);}
#header .site-map-btn span:nth-child(3){top: 26px;}

@media(min-width:768px){
    #header .header-issue select{padding:0 15px;}
}
@media(min-width:992px){
    #header{border-radius: 0 0 30px 30px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);padding:10px 20px;}

    #header .header-left{gap: 0 15px;}
    #header .site-logo{width: 180px;}
    #header .header-vol{font-size: inherit; position: relative;padding-left: 15px;}
    #header .header-vol::before{display: inline-block; content: ''; width: 1px; height: 20px; background-color: rgba(255,255,255,0.5); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    #header .header-vol span{display: inline-block;}
    #header .header-issue{background: #fff url(/site/resource/pnu/sanhak-webzine/images/down-icon.svg) no-repeat right 15px center;height: 35px;transition: .3s; border: 2px solid #fff;}
    #header .header-issue:hover,
    #header .header-issue:focus{border-color: var(--point-color-01);box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
    #header .header-issue select{font-size: 18px; padding: 0 40px 0 15px;width: 100%;}
    #header .header-issue select option{font-size: 16px;}

    #header .subscribe{display: block;}
    #header .subscribe:hover,
    #header .subscribe:focus{animation: shakeAni .3s linear infinite;}
    #header .site-map-btn{width: 45px; height: 45px;position: relative;}
    #header .site-map-btn::after{display: block; content: ''; width: 0; height: 100%;background-color: #fff; position: absolute;left: 0; top: 50%; transform: translateY(-50%); transition: .3s;border-radius: 50%;z-index: -1;visibility: hidden; opacity: 0;}
    #header .site-map-btn:hover::after,
    #header .site-map-btn:focus::after{width: 100%;visibility: visible; opacity: 1;}
    #header .site-map-btn span{width: 20px;}
    #header .site-map-btn span:nth-child(1){top: 15px;}
    #header .site-map-btn span:nth-child(2){width: 15px;top: 23px;}
    #header .site-map-btn span:nth-child(3){top: 31px;}
    #header .site-map-btn:hover span,
    #header .site-map-btn:focus span{background-color: var(--main-color);}
}
@media(min-width:1400px){
    #header{border-radius: 0 0 50px 50px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);}
    #header{padding:20px 0;}
    #header .site-logo{width: 220px;}
    #header .header-vol{font-size: 20px;}
    #header .header-issue{height: 47px; background-position: right 25px center;}
    #header .header-issue select{font-size: 21px;padding:0 55px 0 25px;}

    #header .header-menu{display: flex; gap: 0 35px;}
    #header .header-menu a{color: #fff;text-transform: uppercase;font-size: 22px;font-family: var(--font-type-01); font-weight: 500;position: relative;}
    #header .header-menu a::before{display: block; content: ''; width: 7px; height: 7px; background-color: transparent; border-radius: 50%;position: absolute; left: 50%; transform: translateX(-50%); top: -25px;transition: .3s;}
    #header .header-menu a:hover,
    #header .header-menu a:focus{text-decoration: none;}
    #header .header-menu a:hover::before,
    #header .header-menu a:focus::before{top:-15px; background-color: #fff;}

    #header .site-map-btn{width: 60px; height: 60px;}
    #header .site-map-btn span{width: 22px;}
    #header .site-map-btn span:nth-child(1){top: 20px;}
    #header .site-map-btn span:nth-child(2){width: 16px;top: 30px;}
    #header .site-map-btn span:nth-child(3){top: 40px;}
}

/************ sitemap modal ************/
.sitemap-modal{position: fixed;left: 0; top: 0;width: 100vw; height: 0;visibility: hidden; min-width: 100%; max-width: 100%; z-index: 1002;overflow: hidden; transition: .5s;}
.sitemap-modal.show{height: 100vh;visibility: visible;}
.sitemap-modal .modal-content{margin: 0;background-image:linear-gradient(to bottom, #193B8A, #072261);z-index: 1; height: 100%; width: 100%;border: 0; border-radius: 0;}

/* modal header */
.sitemap-modal .modal-header{background: none; border: 0;align-items: center;}
.sitemap-modal .modal-title{display: flex;align-items: center;gap: 0 10px;}
.sitemap-modal .modal-title img{width: 180px;}
.sitemap-modal .modal-title span{font-weight: 400;position: relative;display: inline-block;font-size: 15px;padding-left: 10px;}
.sitemap-modal .modal-title span::before{display: inline-block; content: ''; width: 1px; height: 15px; background-color: rgba(255,255,255,0.5); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.sitemap-modal .modal-header .sitemap-close{border-radius: 50%;background-color: var(--point-color-01);opacity: 1; position: relative; z-index: 1; padding: 0; margin: 0;width: 40px; height: 40px; color: #fff;}
.sitemap-modal .modal-header .sitemap-close i{font-size: 24px;}

/* modal body */
.sitemap-modal .modal-body{padding: 0;height: calc(100% - 70px); overflow-y: auto;}
.sitemap-modal .modal-body::-webkit-scrollbar{width: 0;}
.sitemap-modal .modal-body::-webkit-scrollbar-track{background-color:transparent;}
.sitemap-modal .modal-body::-webkit-scrollbar-thumb{background-color:transparent;}
.sitemap-modal .modal-body::-webkit-scrollbar-button{display:none}
.sitemap-modal .link-con .site-list li{display: inline-block; margin-right: 7px;}
.sitemap-modal .link-con .site-list a{color: #fff; border-radius: 100px; border: 1px solid rgba(255,255,255,0.3);padding:5px 15px; position: relative;display: inline-block;z-index: 1;overflow: hidden;font-size: 14px;}
.sitemap-modal .link-con .site-list a::before{display: block; content: '';width: 100%; height: 100%; background-color: #fff;position: absolute;left: -110%; top: 0;border-radius: 100px;z-index: -1;transition: .5s;}
.sitemap-modal .link-con .sns-list{margin-top: 10px;}
.sitemap-modal .link-con .sns-list li{display: inline-block; margin-right: 15px;}
.sitemap-modal .link-con .sns-list a{height: 17px; display: inline-block; opacity: .8; transition: .5s;}
.sitemap-modal .link-con .sns-list a img{height: 100%;}

/* menu */
.menubar-box{position:relative;transition:.3s;margin:15px 0 30px;padding-top:10px;border-top:1px solid #ccc}
.menubar{height:100%;overflow-y:auto;margin:0;position:relative}
.menubar>li{position:relative;overflow: hidden;}
.menubar>li>.menuitem{line-height:40px;font-size:20px;color:#333;font-family:var(--font-type-01);font-weight:600;color:#fff;text-transform:uppercase;display:block;opacity:.7}
.menubar>li>.menuitem:hover,
.menubar>li>.menuitem:focus{text-decoration: none;}
.menubar>li>.menuitem.expanded-true+.menubox{display:block;width:100%;height:auto;margin-bottom: 10px;}
.menubar>li>.menuitem.expanded-true+.menubox>.menubox-inner{opacity:1}

/* 2 depth menuitem */
.menubar .menubox-inner>.menu>li{position:relative;margin-bottom:10px}
.menubar .menubox-inner>.menu>li:last-child{margin-bottom:0}
.menubar .menubox-inner>.menu>li>.menuitem{padding:0 0 0 15px;position:relative;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2;color: #fff;}
.menubar .menubox-inner>.menu>li>.menuitem::before{content:'#';display:block;position:absolute;top:0;left:0;color:inherit}
.menubar>li>.menuitem.haspopup-true.expanded-true+.menubox>.menubox-inner>.menu{display:block}
.menubar .toggle-btn{position:absolute;top:0;right:0;width:60px;height:50px;cursor:pointer}
.menubar>li>.menuitem>.toggle-btn{width:40px;height:40px;text-align: right;}
.menubar>li>.menuitem.haspopup-true>.toggle-btn::before{content:'\F285';display:inline-block;color:#fff;font-family: var(--font-icon); transition: .3s;}
.menubar > li > .menuitem.haspopup-true.expanded-true > .toggle-btn::before,
.menubar .menubox-inner > .menu > li > .menuitem.haspopup-true.expanded-true > .toggle-btn::before {transform: rotate(90deg);}
.menubar .menubox-inner>.menu{display:none;padding:15px;border-bottom: 1px dotted rgba(255,255,255,0.3);border-top: 1px dotted rgba(255,255,255,0.3);}
.menubar .menubox-inner > .menu > li:nth-child(n+6){display: none;}

@media(min-width: 992px) {
    .sitemap-modal .modal-content::after{display: block;content: ''; width: 100%; height: 100%;background: url(/site/resource/pnu/sanhak-webzine/images/sitemap-bg.png) no-repeat right top; background-size: contain; position: absolute; right: 0; top: 0; z-index: -1;}
    .sitemap-modal .modal-title{gap: 0 20px;}
    .sitemap-modal .modal-title img{width: 230px;}
    .sitemap-modal .modal-title span{font-size: 20px;padding-left: 20px;}
    .sitemap-modal .modal-title span::before{height: 20px;}
    .sitemap-modal .modal-header .sitemap-close{width: 50px; height: 50px;position: relative;}
    .sitemap-modal .modal-header .sitemap-close:hover,
    .sitemap-modal .modal-header .sitemap-close:focus{color: var(--point-color-01);}
    .sitemap-modal .modal-header .sitemap-close::after{display: block; content: ''; width: 0; height: 100%; border-radius: 50%; background-color: #fff;position: absolute;left: 0; top: 50%; transform: translateY(-50%); transition: .3s;z-index: -1;visibility: hidden;opacity: 0;}
    .sitemap-modal .modal-header .sitemap-close:hover::after,
    .sitemap-modal .modal-header .sitemap-close:focus::after{width: 100%;visibility: visible;opacity: 1;}

    .sitemap-modal .link-con{align-items: center; gap: 10px 25px; display: flex; gap: 10px 40px;}
    .sitemap-modal .link-con .site-list a{padding:7px 20px;font-size: inherit;}
    .sitemap-modal .link-con .site-list a:hover,
    .sitemap-modal .link-con .site-list a:focus{text-decoration: none; color: var(--main-color); }
    .sitemap-modal .link-con .site-list a:hover::before,
    .sitemap-modal .link-con .site-list a:focus::before{left: 0;}
    .sitemap-modal .link-con .sns-list li{margin-right: 20px;}
    .sitemap-modal .link-con .sns-list a{height: 25px;}
    .sitemap-modal .link-con .sns-list a:hover,
    .sitemap-modal .link-con .sns-list a:focus{opacity: 1; transform: rotateY(180deg);}

    .menubar-box{border: 0;}
    .menubar{border-top:none;overflow-y:visible;height:auto}
    .menubar .menuitem{position:relative}
    .menubar .toggle-btn{display:none}

    .menubar>li{display:flex;align-items:flex-start;margin-bottom:5%;gap:0 20px}
    .menubar .menubox{visibility:hidden;opacity:0;transition:.5s;flex:1 1 10%;height:0}
    .menubar>li>.menuitem.expanded-true+.menubox{display:none}
    .menubar>li:hover .menubox,
    .menubar>li>.menuitem:focus+.menubox{visibility:visible;opacity:1;height:auto}
    .menubar .menubox-inner{position:relative}
    .menubar .menubox-inner>.menu{display:block;background-color: transparent;padding: 0;border: 0;}
    .menubar>li>.menuitem{border-bottom:none;padding-left:0;height:auto;line-height:1;position:relative;font-size:30px}
    .menubar>li>.menuitem>span{position: relative;}
    .menubar>li>.menuitem>span::after{display: block; content: ''; width: 0; height: 4px; background-color: #fff;position: absolute; left: 0; bottom: 7px;transition: .5s;}
    .menubar>li>.menuitem::after{display:block;content:'';width:0;height:40px;background:url(/site/resource/pnu/sanhak-webzine/images/menu-icon.svg) no-repeat center;background-size:contain;position:absolute;right:0;top:0;transition:.3s;opacity:0}
    .menubar>li>.menuitem+.menubox.focusin{visibility:visible;opacity:1;height: auto;}
    .menubar .menubox-inner>.menu>li>.menuitem{font-size:18px;border-bottom:0;height:auto;color: #fff;}
    .menubar>li:focus>.menuitem,
    .menubar>li:hover>.menuitem,
    .menubar>li.active>.menuitem,
    .menubar>li>.menuitem:focus,
    .menubar>li>.menuitem:hover,
    .menubar>li:has(.focusin)>.menuitem{opacity:1;padding-right:50px;text-decoration: none;}
    .menubar>li:focus>.menuitem:after,
    .menubar>li:hover>.menuitem:after,
    .menubar>li.active>.menuitem:after,
    .menubar>li>.menuitem:focus:after,
    .menubar>li>.menuitem:hover:after,
    .menubar>li:has(.focusin)>.menuitem::after{width:40px;opacity:1}
    .menubar>li:focus>.menuitem > span::after,
    .menubar>li:hover>.menuitem > span::after,
    .menubar>li.active>.menuitem > span::after,
    .menubar>li>.menuitem:focus > span::after,
    .menubar>li>.menuitem:hover > span::after{width: 100%;}
}
@media(min-width: 1200px) {
    .sitemap-modal .modal-header{padding:30px 40px;}
    .sitemap-modal .modal-header .sitemap-close{width: 60px; height: 60px;}
    .sitemap-modal .modal-header .sitemap-close i{font-size: 40px;}
    .sitemap-modal .link-con{gap: 10px 40px;}
    .sitemap-modal .link-con .site-list a{font-size: 18px; padding:9px 25px;}

    .menubar-box{margin-top:50px}
    .menubar>li{gap: 0 60px;}
    .menubar>li>.menuitem{font-size:50px}
    .menubar>li:focus>.menuitem,
    .menubar>li:hover>.menuitem,
    .menubar>li.active>.menuitem,
    .menubar>li>.menuitem:focus,
    .menubar>li>.menuitem:hover,
    .menubar>li:has(.focusin)>.menuitem{padding-right:90px}
    .menubar > li > .menuitem::after{height: 60px;}
    .menubar>li:focus>.menuitem:after,
    .menubar>li:hover>.menuitem:after,
    .menubar>li.active>.menuitem:after,
    .menubar>li>.menuitem:focus:after,
    .menubar>li>.menuitem:hover:after,
    .menubar>li:has(.focusin)>.menuitem::after{width:60px;}
    .menubar .menubox-inner>.menu>li{margin-bottom:15px}
    .menubar .menubox-inner>.menu>li>.menuitem{padding:0 0 0 17px;font-size:20px;}
}
@media(min-width: 1400px) {
    .sitemap-modal .modal-header{padding:50px 40px;}

    .menubar-box{margin-top:80px}
    .menubar>li>.menuitem{font-size:80px}
}

/************ footer ************/
#footer{background-color: #333; text-align: center; color: #fff;padding: 20px 0;}
#footer .f-logo img{width: 200px;}
#footer .f-utill{display: inline-block;background-color: rgba(255,255,255,0.07);margin: 10px 0 15px;padding:10px 20px;border-radius: 10px;}
#footer .f-utill li{display: inline-block;}
#footer .f-utill li::after{display: inline-block; content: ''; width: 1px; height: 15px; background-color: #7A7A7A; vertical-align: middle; margin: 0 20px;}
#footer .f-utill li:last-child:after{display: none;}
#footer .f-utill a{color: #fff;font-weight: 500;}
#footer .copyright{opacity: .5;}

@media(min-width: 992px){
    #footer{padding:50px 0;}
    #footer .f-logo img{width: 250px;}
    #footer .f-utill{padding:10px 25px;margin: 15px 0 20px;border-radius: 100px;}
}
@media(min-width: 1400px){
    #footer{padding:60px 0;}
    #footer .f-logo img{width: 280px;}
    #footer .f-utill{margin: 20px 0 30px;}
    #footer .f-utill li::after{height: 20px;transform: translateY(-1px);}
}

/************ ask btn ************/
.ask-btn{position: fixed;z-index: 1000; right: 20px; bottom: 20px; background: #113084; color: #fff; font-family: var(--font-type-01);font-weight: 500; box-shadow: 0 5px 10px rgba(0,0,0,0.3); border-radius: 50px; padding: 10px 15px 10px 40px;text-align: center;}
.ask-btn::after{display: block; content: ''; background: url(/site/resource/pnu/sanhak-webzine/images/ask-icon.png) no-repeat center;background-size: contain; position: absolute; top: -25px; left: 10px; width: 30px; height: 70px;}
.ask-btn:hover,
.ask-btn:focus{text-decoration: none; color: #fff;}
.ask-btn p{display: inline-block;}
.ask-btn span{color: #FFD83A;}

@media(min-width: 992px){
    .ask-btn{border-radius: 50%;width: 95px;height: 95px; right: 30px; bottom: 30px;padding:15px 0;}
    .ask-btn::after{dtop: -25px; left: 55%; transform: translateX(-50%); width: 60px; height: 70px;}
    .ask-btn:hover,
    .ask-btn:focus{animation: popAni2 1s infinite linear; text-decoration: none;}
    .ask-btn p{margin-top: 40px;display: block;}
}
@media(min-width: 1400px){
    .ask-btn{width: 120px; height: 120px; right: 40px; bottom: 40px;padding:22px 0;}
    .ask-btn::after{width: 76px; height: 95px;top: -35px; }
    .ask-btn p{margin-top: 48px;font-size: 18px;}
}


/*****************************************************
	main
*****************************************************/
/* common */
.main-container{padding-top: 60px;}

.main-tit{text-transform: uppercase;}
.main-tit .info{color: var(--point-color-03); font-weight: 500;font-size: 20px;}
.main-tit .info i{margin-right: 5px;}
.main-tit p{font-weight: 400; color: var(--main-color);font-family: var(--font-type-01);font-size: 28px;margin-top: 3px;}
.main-tit p span{font-weight: 700;}

.main-btn{font-family: var(--font-type-01); display: flex;align-items: center;}
.main-btn:hover,
.main-btn:focus{text-decoration: none; color: inherit;}
.main-btn span{display: none;}
.main-btn strong{position: relative;}
.main-btn img{width: 40px;margin-left: 10px;}

.main-container .no-board{ text-align: center;padding: 20px 15px;}
.main-container .no-board img{width: 30%;}
.main-container .no-board p{font-family: var(--font-type-01);font-weight: 500;margin-top: 10px;font-size: 18px;}

@media(min-width: 992px) {
    .main-container{padding-top: 65px;}
    .main-tit .info{font-size: inherit;}
    .main-tit .info i{margin-right: 15px;}
    .main-tit p{font-size: 48px;margin-top: 10px;}
    .main-btn span{display: inline-block;}
    .main-btn img{width: 50px;margin-left: 20px;}
    .main-btn:hover img,
    .main-btn:focus img{animation: popAni2 1s linear infinite;}
    .main-container .no-board{padding: 20px;}
    .main-container .no-board img{width: 150px;}
}
@media(min-width: 1400px) {
    .main-container{padding-top: 100px;}
    .main-tit .info{font-size: 36px;}
    .main-tit p{font-size: 72px;}
    .main-btn{font-size: 20px;}
    .main-btn img{width: 60px;}
    .main-container .no-board {padding: 30px;}
    .main-container .no-board img{width: 200px;}
    .main-container .no-board p{font-size: 22px;margin-top: 30px;}
}

/* section01 - issue */
.issue{background: url(/site/resource/pnu/sanhak-webzine/images/isseu-bg.png) no-repeat top right; background-size: contain; padding:30px 0}
.issue .main-tit{text-align: center;margin-bottom: 20px;}

.issue-list{display:flex;flex-wrap:wrap;justify-content:space-between;}
.issue .issue-list .issue-item{width:100%;position:relative;padding-top:15px;margin-bottom: 35px;}
.issue .issue-list .issue-item:last-child{margin-bottom: 0;}
.issue .issue-list .issue-item a:hover,
.issue .issue-list .issue-item a:focus{text-decoration:none;color:inherit}
.issue .issue-list .issue-item .issue-img{aspect-ratio:6/4;background: #fff url(/site/resource/pnu/sanhak-webzine/images/more-btn.svg) no-repeat center; transition: .3s;}
.issue .issue-list .issue-item a:hover .issue-img,
.issue .issue-list .issue-item a:focus .issue-img{background-color:#000 ;}
.issue .issue-list .issue-item .issue-img img{object-fit:cover;transition:.3s;height:100%; object-position: center top;}
.issue .issue-list .issue-item .issue-info{margin-top: 10px;}
.issue .issue-list .issue-item .issue-info .tit{font-family:var(--font-type-01);font-weight:600;font-size:18px}
.issue .issue-list .issue-item .issue-info .txt{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3;color:#777; word-break: break-all;}
.issue .issue-list .issue-item .issue-side{position:absolute;top:0;left:0;text-transform:uppercase;background-color: var(--point-color-01); color: #fff;padding:5px 10px;box-shadow: 0 5px 10px  rgba(0,0,0,0.2);}
.issue .issue-list .issue-item .issue-side span{font-weight:700}

@media(min-width: 992px){
    .issue{padding:70px 0;}
    .issue-box{padding-top: 150px;}
    .issue>div{position:relative}
    .issue .main-tit{position:absolute;top:0;right:0;text-align:right}
    .issue .issue-list{gap: 50px 0;}
    .issue .issue-list .issue-item{width:calc(50% - 30px);padding:0 0 0 35px;margin-bottom:100px}
    .issue .issue-list .issue-item:nth-child(2n-1){transform:translateY(-150px); margin-bottom: -150px;}
    .issue .issue-list .issue-item .issue-img{aspect-ratio:1;}
    .issue .issue-list .issue-item:hover .issue-img,
    .issue .issue-list .issue-item:focus .issue-img{box-shadow:0 10px 20px rgba(0,0,0,0.3);}
    .issue .issue-list .issue-item .issue-img img{object-position: center;}
    .issue .issue-list .issue-item:hover .issue-img img,
    .issue .issue-list .issue-item:focus .issue-img img{opacity:.2}
    .issue .issue-list .issue-item .issue-info{margin-top:15px}
    .issue .issue-list .issue-item .issue-info .tit{font-size:24px}
    .issue .issue-list .issue-item .issue-info .txt{-webkit-line-clamp:4;margin-top:10px}
    .issue .issue-list .issue-item .issue-side{writing-mode:vertical-lr; background-color: transparent; color: inherit;padding:0; box-shadow: none;}
    .issue .issue-list .issue-item .issue-side span{font-size:20px;color:var(--point-color-01);}

    .main-container .issue .no-board{padding-top: 150px;}
}
@media(min-width: 1400px) {
    .issue{padding: 100px 0;}
    .issue-box{padding-top: 400px;}
    .issue .main-tit{top:70px}
    .issue .issue-list{gap: 100px 0;}
    .issue .issue-list .issue-item{width:635px;margin-bottom:150px;}
    .issue .issue-list .issue-item:nth-child(2n-1){transform:translateY(-400px);margin-bottom: -400px;}
    .issue .issue-list .issue-item .issue-img{aspect-ratio:auto;height:550px}
    .issue .issue-list .issue-item .issue-info{margin-top:20px;font-size:20px}
    .issue .issue-list .issue-item .issue-info .tit{font-size:32px}
    .issue .issue-list .issue-item .issue-info .txt{margin-top:20px}
    .issue .issue-list .issue-item .issue-side{font-size:20px}
    .issue .issue-list .issue-item .issue-side span{font-size:24px}

    .main-container .issue .no-board{padding-top: 250px;}
}

/* section02 - photo */
.photo{padding: 30px 0;background-color: #F4F7FF;}

.photo .photo-list {margin-top: 20px;}
.photo .photo-list li{margin-bottom: 33px;}
.photo .photo-list li:last-child{margin-bottom: 0;}
.photo .photo-list .photo-img{background:#000 url(/site/resource/pnu/sanhak-webzine/images/more-btn.svg) no-repeat center;transition: .3s; aspect-ratio: 16/9;}
.photo .photo-list .photo-img img{object-fit:cover;transition:.3s;height:100%; transition: .3s;}
.photo .photo-list .photo-txt{text-align:center;margin-top:9px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2;font-weight:500;font-size: 16px;}

@media(min-width: 992px){
    .photo{padding:70px 0;background: url(/site/resource/pnu/sanhak-webzine/images/photo-bg.png) no-repeat center top; background-size: contain;}
    .photo .photo-list{display: flex;gap: 20px; margin-top: 30px;}
    .photo .photo-list li{flex: 1 1 10%;margin-bottom: 0; max-width: calc(100% / 3);}
    .photo .photo-list a:hover,
    .photo .photo-list a:focus{text-decoration: none; color: inherit;}
    .photo .photo-list .photo-img {aspect-ratio: 4 / 3;}
    .photo .photo-list .photo-item:hover .photo-img,
    .photo .photo-list .photo-item:focus .photo-img{box-shadow:0 10px 20px rgba(0,0,0,0.3);}
    .photo .photo-list .photo-item:hover .photo-img img,
    .photo .photo-list .photo-item:focus .photo-img img{opacity: 0.2;}
    .photo .photo-list .photo-txt{margin-top: 15px;padding:0 10px;font-size:18px;}
}
@media(min-width: 1400px) {
    .photo{padding:100px 0; background-size: cover;}
    .photo .photo-list{margin-top: 60px;}
    .photo .photo-list .photo-txt{font-size: 22px;margin-top: 20px;}
}

/* section03 - project */
.project {margin: 30px 0 0;}
.project .project-btn{background-image: linear-gradient(to right, #265BD5, #2218A4);display: block;position: relative;z-index: 1;color: #fff; padding:25px 30px 20px;}
.project .project-btn:hover{text-decoration: none;}
.project .project-btn::after{display: block; content: ''; width: 100%; height: 100%; position: absolute; top:0;left:0; background: url(/site/resource/pnu/sanhak-webzine/images/project-bg.svg) no-repeat right center; z-index: -1;background-size: contain;}
.project .project-tit .txt{font-size: 24px;margin-bottom: 10px;}
.project .project-tit .info{opacity: 0.7;font-weight: 400;font-size: 16px;}
.project .main-btn{margin-top: 30px;}

@media(min-width: 992px){
    .project .project-btn{padding:40px 50px;}
    .project .project-tit .txt{font-size: 36px;}
    .project .project-tit .info{font-size: 20px;}
    .project .main-btn{margin-top: 40px;}
    .project .project-btn:hover .main-btn img,
    .project .project-btn:focus .main-btn img{animation: popAni2 1s linear infinite;}
    .project .project-btn::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}
    .project .project-btn:hover::before{animation:shine 1.3s; text-decoration: none;}
    .project .project-btn:focus::before{display: none;text-decoration: underline;}
}
@media(min-width: 1400px){
    .project {margin:50px 0 0;}
    .project .project-btn{padding:70px 80px;}
    .project .project-tit .txt{font-size: 42px;}
    .project .project-tit .info{font-size: 24px;}
    .project .main-btn{margin-top: 80px;}
}

/* section04 - notice */
.notice{background: #FBFBFB url(/site/resource/pnu/sanhak-webzine/images/notice-bg.png) no-repeat left border-box;margin-top: 30px;padding:30px 0;}

.notice .notice-tit{display: flex;height: inherit;align-items: center;justify-content: space-between;gap: 0 10%;}

.notice .notice-list{margin-top: 10px;}
.notice .notice-list li{margin-bottom: 7px;}
.notice .notice-list li:last-child{margin-bottom: 0;}
.notice .notice-list a{display: flex;background-color: #fff;justify-content: space-between;align-items: center;border: 2px solid #fff;position: relative;padding:10px 15px;}
.notice .notice-list a:hover,
.notice .notice-list a:focus{text-decoration: none;color: inherit;}
.notice .notice-list .notice-txt{font-weight:500;width:calc(100% - 90px);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}
.notice .notice-list .notice-date{color: #777;font-size: 14px;}

.main-container .notice .no-board{background-color: #fff;}

@media(min-width: 992px){
    .notice{margin-top: 100px; padding:70px 0}
    .notice > div{display: flex;flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 0 70px;}

    .notice .notice-tit{flex-direction: column;justify-content: space-between;width: 200px;align-items: flex-start;}

    .notice .notice-list{width: calc(100% - 300px);margin-top: 0;}
    .notice .notice-list li{margin-bottom: 10px;}
    .notice .notice-list a{padding:15px 30px}
    .notice .notice-list a:hover,
    .notice .notice-list a:focus{border-color: #333;box-shadow: 0 5px 10px rgba(0,0,0,0.1);}
    .notice .notice-list a:after{display: block; content: ''; width: 20px; height: 20px; background:url(/site/resource/pnu/sanhak-webzine/images/notice-btn.svg) no-repeat center; background-size: contain; right: -12px;top: 50%; transform: translateY(-50%);position: absolute;opacity: 0; transition: .3s;}
    .notice .notice-list a:hover::after,
    .notice .notice-list a:focus::after{width: 35px; height: 35px; opacity: 1;right: -17px;}
    .notice .notice-list .notice-txt{font-size: 18px;width: calc(100% - 150px);-webkit-line-clamp:1}
    .notice .notice-list .notice-date{font-size: inherit;}

    .main-container .notice .no-board{width: calc(100% - 300px);}
}
@media(min-width: 1400px){
    .notice{margin-top: 150px; padding: 100px 0;}
    .notice > div{gap: 0 120px;}

    .notice .notice-tit{width: 300px;}

    .notice .notice-list{width: calc(100% - 420px);}
    .notice .notice-list li{margin-bottom: 15px;}
    .notice .notice-list a{padding:25px 40px}
    .notice .notice-list a:hover::after,
    .notice .notice-list a:focus::after{width: 45px;height: 45px; right: -23px;}
    .notice .notice-list .notice-txt{font-size: 22px; }
    .notice .notice-list .notice-date{font-size: 16px;}

    .main-container .notice .no-board{width: calc(100% - 420px); background-color: #fff;}
}

/*****************************************************
	sub
*****************************************************/
/* common */
.sub-container{background: #F6F6F6 url(/site/resource/pnu/sanhak-webzine/images/sub-bg.png) no-repeat top right; padding-top: 60px;}
.sub-container .container{background-color: #fff;padding:30px 20px 50px;}

/* snb */
.sub-container .snb{float:right;width:280px;}
.sub-container .snb .snb-list .snb-item {margin-bottom: 5px;}
.sub-container .snb .snb-list .snb-item>a{background-color:#f5f5f5;position:relative;display:block;padding:10px 15px;font-size:20px;overflow:hidden;font-family:var(--font-type-01);text-transform:uppercase;font-weight:600;z-index: 1;}
.sub-container .snb .snb-list .snb-item>a:hover,
.sub-container .snb .snb-list .snb-item>a:focus{text-decoration: none;color: #fff;}
.sub-container .snb .snb-list .snb-item.active>a{background-image: linear-gradient(115deg, rgba(2, 101, 189,1) 65%,rgba(2, 101, 188,1) 60%,rgba(3, 203, 152,1) 90%);color: #fff;}

.sub-container .snb .snb-list .snb-item>a::before{display: block; content: ''; width: 0; height: 110%; background-color: var(--point-color-01);position: absolute; left: 0; top: 50%; transform: translateY(-50%);z-index: -1; transition: .3s;}
.sub-container .snb .snb-list .snb-item>a:hover::before{width: 100%;}
.sub-container .snb .snb-list .snb-item.active>a::after{display:block;content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px;height:110%;background:url(/site/resource/pnu/sanhak-webzine/images/snb-icon.svg) no-repeat right center;background-size:contain;transition: .3s;}

.sub-container .snb .snb-list .snb-2depth{display: none;}
.sub-container .snb .snb-list .snb-item.active .snb-2depth{display: block}
.sub-container .snb .snb-list .snb-2depth li{padding:10px 20px;border-bottom: 1px dotted #d3d3d3;}
.sub-container .snb .snb-list .snb-2depth li:last-child{border-bottom: 0;}
.sub-container .snb .snb-list .snb-2depth a{padding-left: 15px;position: relative;display: block;font-weight: 500;color: #777;word-break: break-all;}
.sub-container .snb .snb-list .snb-2depth a::before{display: block; content: '#'; position: absolute; left: 0; top:0;}
.sub-container .snb .snb-list .snb-2depth .active a{color: inherit;}

@media(min-width:768px){
    .sub-container .container{padding:30px 30px 60px;}
}
@media(min-width:992px){
    .sub-container{padding-top: 65px;}
}
@media(min-width:1200px){
    .sub-container .cont-wrap{float: left;width: calc(100% - 320px);}
    .sub-container #content{min-height:800px}
    .sub-container .container{padding:50px;}
}
@media(min-width:1400px){
    .sub-container{padding-top: 100px;}

    .sub-container .snb{width:320px;}
    .sub-container .snb .snb-list .snb-item>a{font-size: 22px;padding:15px 20px;}
    .sub-container .snb .snb-list .snb-2depth li{padding: 15px 25px;}
    .sub-container .snb .snb-list .snb-2depth a{font-size: 18px;}
    .sub-container .cont-wrap{width: calc(100% - 350px);}
}
@media(min-width:1600px){
    .sub-container .container{max-width: 1600px; padding:100px;}
    .sub-container .cont-wrap{width: 1000px;}
}

/* content */
.sub-container #content{margin-bottom:0}
.sub-container .cont-wrap .cont-title h2{font-family: var(--font-type-01);}
.sub-container .cont-btns{top: 0;gap: 10px;}
.sub-container .cont-btns button{width: 40px; height: 40px; background-color: #F5F5F5; border-radius: 50%;position: relative;z-index: 1;}
.sub-container .cont-btns button::before{display: block; content: '';width: 0; height: 100%; background-color: var(--main-color);position: absolute; left: 0; top:50%; transform: translateY(-50%);border-radius: 50%;z-index: -1;opacity: 0; visibility: hidden;transition: .3s;}
.sub-container .cont-btns .d-print-none{display: none;}
.sub-container .cont-btns button img{height: 20px; transition: .3s;}
.sub-container .cont-btns .dropdown-menu .dropdown-item{padding:.25rem 1rem}
.sub-container .cont-btns .dropdown-menu .dropdown-item>img{width:18px;margin-right:.4rem!important}

.sub-container .cont-sub{text-align: center;position: relative;  margin-bottom: 20px;}
.sub-container .cont-sub .cont-mark img{width: 30px;}
.sub-container .cont-sub .sub-category{color: var(--main-color); text-transform: uppercase; font-family: var(--font-type-01);font-weight: 500;text-decoration: underline; margin: 10px 0;}
.sub-container .cont-sub h2{font-family: var(--font-type-01);font-size: 24px;}
.sub-container .cont-sub .sub-info{color: #777;font-weight: 500;margin-bottom: 10px;}

@media(min-width:992px){
    .sub-container .cont-btns button:hover::before,
    .sub-container .cont-btns button:focus::before{width: 100%; opacity: 1; visibility: visible;}
    .sub-container .cont-btns button:hover img,
    .sub-container .cont-btns button:focus img{filter: invert(100%) sepia(9%) saturate(2%) hue-rotate(131deg) brightness(112%) contrast(100%);}
}
@media(min-width:1200px){
    .sub-container .cont-btns button{width: 50px; height: 50px;}
    .sub-container .cont-btns button img{height: 25px;}
    .sub-container .cont-btns .d-print-none{display: inline-block;}

    .sub-container .cont-sub{padding-bottom: 100px;margin-bottom: 50px;}
    .sub-container .cont-sub::after{display: block; content: ''; width: 1px; height: 50px;background-color: #707070;position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
    .sub-container .cont-sub .cont-mark img{width: 50px;}
    .sub-container .cont-sub .sub-category{margin: 25px 0;font-size: 18px;}
    .sub-container .cont-sub h2{font-size: 36px;}
    .sub-container .cont-sub .sub-info{font-size: 22px;margin-bottom: 30px;}
}

/* board */
.table-board img[src='/common/images/icon-file.gif'],
.table-board img[src='/common/images/icon-update.svg'],
.table-board img[src='/common/images/icon-new.svg']{vertical-align: middle; width: 14px;}

/* gallery */
.board-gallery a{overflow:hidden}
.board-gallery a .thum{padding-bottom:90%}
.board-gallery a .txt-box{padding:20px 0;background-color:#fff}
.board-gallery a .txt-box .tit{font-family: var(--font-type-01);}
.board-gallery a .txt-box .category{text-transform: uppercase;}
.board-gallery a .txt-box .date{left: 0; bottom: 1rem;font-size: 1rem;}
.board-gallery > div .checkbox{bottom: 0.5rem;right: 1rem;}

.form-inline .input-group,
.form-inline .custom-select{width: auto;}
@media(min-width: 1400px){
    .board-gallery a .txt-box{min-height: 160px;}
    .board-gallery a .txt-box .tit{font-size: 21px; margin-top: 7px;}
    .board-gallery a .txt-box .category{font-size: 18px;}
}

/* pagination */
.pagination{flex-wrap:wrap}
.pagination .page-item .page-link{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:13px;border:0;line-height:inherit;padding:0;padding-top:4px;border-radius:50px!important;font-family:var(--font-type-01);color:#777;transition:all .3s ease-out;font-weight:500}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {background-color:#f5f5f5;color:var(--point-color-01); border: 1px solid var(--point-color-01);}
.pagination .page-item.active .page-link{background-color:var(--point-color-01);border-color:var(--point-color-01);color:#fff}
.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link,
.pagination .page-item.first .page-link,
.pagination .page-item.last .page-link {padding: 0 ; line-height: 30px; text-align: center;width: 30px;}
.pagination .page-item.prev .page-link::before,
.pagination .page-item.next .page-link::before,
.pagination .page-item.first .page-link::before,
.pagination .page-item.last .page-link::before {content:'';}
.pager .prev a, .pager .next a{font-size: 1rem;}

@media(min-width: 576px) {
    .pagination{gap:4px}
    .pagination .page-item .page-link{width:30px;height:30px;   font-size:14px}
}
@media(min-width: 992px) {
    .pagination{gap:5px}
    .pagination .page-item .page-link{width:40px;height:40px;font-size:16px}
    .pagination .page-item.prev .page-link,
    .pagination .page-item.next .page-link,
    .pagination .page-item.first .page-link,
    .pagination .page-item.last .page-link {line-height: 40px; width: 40px;}
}

/* board view */
.board-view{word-break: break-all;}
.board-view .board-view-files{margin-bottom: 20px;}
.board-view .board-view-title{margin-bottom: 20px;}
.board-view:has(.board-view-files) .board-view-title{margin-bottom: 0;}
#content:has(.cont-sub) .board-view .board-view-files{border-top:1px solid #ddd;}
.board-view img{width: auto;}
.board-view .board-view-files ul > li > a{font-size: 1rem;}

/* btn */
.btn-primary{background-color:var(--main-color) !important;border-color:var(--main-color) !important;}
.btn-primary:focus, .btn-primary.focus{color: #fff;}
.btn-secondary:focus, .btn-secondary.focus{color: #fff;}

/* text */
.text-primary{color: var(--main-color) !important;}
.text-info{color: var(--point-color-01) !important;}

/* login */
.login-wrap{border-top-color: var(--main-color) !important; border-radius: 0 !important; max-width: 100% !important; }
.login-wrap img{width: auto;}

@media (min-width: 992px){
    .login-wrap .row{justify-content: center;}
    .login-wrap .col-lg-7{-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
}

/* 관리자 로그인 페이지 */
.login-body{background: url(/site/resource/pnu/sanhak-webzine/images/login-bg.jpg) no-repeat right bottom; background-size: cover;}
.login-body .login{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}
.login-body .navbar-brand{display: flex; align-items: center; gap: 10px 1%;flex-wrap: wrap; justify-content: center;width: 100%;}
.login-body .navbar-brand img{width: auto;}
.login-body .section1{background-color: #fff; width: 100%;border: 1px solid #e6e6e6;border-top: 2px solid #265BD5;background-color: #fbfbfb;}
.login-body .section1-1{text-align: center;padding: 10px 0 20px;}
.login-body .section1-2{padding:0 30px}
.login-body .section1-2 .input-group-prepend .input-group-text{height: 100%;}
.login-body .section1-2 .form-control{height: 45px;}
.login-body .section1-2 .btn{background-color: #265BD5; color: #fff; width: 100%; margin-top: 10px;}

@media (min-width: 992px){
    .login-body .navbar-brand{margin-bottom: 30px;}
    .login-body .section1{padding: 70px 50px 20px;}
    .login-body .section1-1{text-align: right;padding:0 10% 0;}
    .login-body .section1-2{padding: 0;}
    .login-body .section1-2 .btn{padding:5px 30px; width: auto; height: 100%;margin-top: 0;}
}