@import url(rnw_popup.css);

#container.portal{padding-top: 45px;;}

.portal{background-image: url(../../images/portal/portal_bg_01.png), url(../../images/portal/portal_bg_02.png);background-repeat: no-repeat;background-position: top 200px left 0, right -15px top 50px;}


/* 포털사이트 타이틀 */
.portal .logo{display: inline-block;float: none;margin: 4rem 0 1rem;}
.portal .logo a{display: inline-block;width: 200px;height: 42px;background: url(../../portal/imgs/common/intro_logo.png) left 0 top 0 no-repeat;background-size: contain;}
.portal .title{display: block;text-align: center;}
.portal .title h2{font-size: 5rem;font-family: 'GmarketSansBold';color:#333}
.portal .fb_search{display: flex;margin: 30px auto 40px;justify-content: space-between;align-items: flex-start}
.fb_search .search_wrap{max-width: 560px;margin-left: calc(50% - 270px);}
.fb_search .btn_wrap a{position: relative;display: inline-block;vertical-align: bottom;font-size: 1.6rem;margin-right: 50px;font-family:'Noto Sans KR',sans-serif;color:#333;font-weight: 500}
.fb_search .btn_wrap a::after{position: absolute;top: 0;right: -25px;content: '';display: inline-block;width: 1px;height:70px;background-color: #ddd;}
.fb_search .btn_wrap a img{display: block;margin:0 auto 15px;}
.fb_search .btn_wrap a:last-of-type{margin-right: 0;}
.fb_search .btn_wrap a:last-of-type::after{display: none;}

/* 검색바 - 공통되면 삭제 */
.search_wrap{width: 100%;background-color: transparent;border-radius: 0;border: 0;padding:0;}
.search_wrap .search_bar{width: 100%;height: 6.0rem;position: relative;}
.search_wrap .search_bar .input_wrap{position: absolute;top:0;left:0;display: flex;align-items: center;width: calc(100% - 55px);height: 6.0rem;border-radius: 10px;border: 3px solid transparent;background: rgb(3,54,155);background-image: linear-gradient(#fff, #fff),linear-gradient(125deg, rgba(3,54,155,1) 0%, rgba(15,114,205,1) 100%);background-origin: border-box;background-clip: content-box, border-box;}
.search_wrap .search_bar form{width:100%;height:100%}
.search_wrap .search_bar input[type="text"]{width: 90%;height: 100%;margin-left: 20px;font-family:'GmarketSansMedium';font-size: 1.6rem;padding:5px 0 0 0;border:0;;}
.search_wrap .search_bar input[type="text"]::placeholder{color: #666;}
.search_wrap .search_bar .btn_search{display: block;position: absolute;top:-5px;right: 0;width: 7.0rem;height: 7.0rem;border-radius: 70px;cursor: pointer;background: rgb(3,54,155);background: url(../../images/user/rnw_main/btn_search.png), linear-gradient(9deg, rgba(3,54,155,1) 0%, rgba(15,114,205,1) 100%);background-repeat: no-repeat;background-position: center center;}
.search_wrap .keyword{display: flex;justify-content: flex-start;align-items: flex-start;margin-top: 10px;}
.search_wrap .keyword .tit{height: 25px;margin-right: 15px;padding-left:25px;background: url(../../images/user/rnw_main/icon_word.png) no-repeat left 0 center;background-size: inherit;}
.search_wrap .keyword .tit p{word-break:keep-all;padding: 4px;font-size: 1.8rem;font-family: 'GmarketSansBold',sans-serif;font-weight: 900;color:#333;line-height: 1.4;}
.search_wrap .keyword .tit i{font-style: normal!important;font-family: inherit;font-size: inherit;color:#00358e;font-size:inherit;line-height: 1.4;}
.search_wrap .keyword ul{display: flex;padding-top: 5px;flex-flow:row wrap}
.search_wrap .keyword ul li{margin-right: 10px;position: relative}
.search_wrap .keyword ul li:last-of-type{margin-right: 0px;}
.search_wrap .keyword ul li a{font-family: 'GmarketSansMedium';font-size: 1.6rem;font-weight: 200;color: #666;padding: 2px 4px;white-space: nowrap;line-height: 1.4;}
/* 추가 */
.search_wrap .keyword ul li::after{content: '';display: inline-block;width: 1px;height: 14px;background-color: #ddd;position: absolute;right:-6px;top:50%;margin-top:-9px}
.search_wrap .keyword ul li:last-of-type::after{display: none;}

/* 바로가기 메뉴 영역 */
.portal_quick_wrap{display: flex;justify-content: space-between;align-items: flex-start;width: 100%;padding:40px 0;border-radius: 20px;background-image: url(../../images/portal/bg_portal_box_logo.png);background-repeat: no-repeat;background-position: right 0 bottom 0;background: url(../../images/portal/bg_portal_box_logo.png), linear-gradient(100deg, rgba(18,67,133,1) 2%, rgba(7,105,176,1) 52%, rgba(4,110,196,1) 100%);background-repeat: no-repeat;background-position: right -50px bottom -60px, center center;}
.portal_quick_wrap .qbox{display: block;text-align: center;width: 33.333%;padding: 0 20px;position: relative;}
.portal_quick_wrap .qbox::after{content: '';display: inline-block;width: 1px;height: 280px;background-color: #fff;position: absolute;top: 0;left: 0;opacity: .3;}
.portal_quick_wrap .qbox > h3{text-align: center;font-size: 3rem;font-family: 'GmarketSansBold';font-weight: 900;color: #fff;}
.portal_quick_wrap .qbox > p{display: inline-block;text-align: center;font-size: 2.2rem;font-family: 'GmarketSansMedium';font-weight: 500;color: #fff;margin-top: 4px;background-color: rgba(0,0,0,0.4);padding: 8px 14px 5px;border-radius: 50px;}
.portal_quick_wrap .qbox .qbtn_wrap{display: flex;justify-content: space-between;flex-flow: row wrap;width: 100%;height: auto;min-height: 170px;margin-top: 35px;}

/*추가*/
.portal_quick_wrap .qbox > h3 a{font-size: 3rem;font-family: 'GsansB';font-weight: 900;color: #fff;}
/*추가끝*/

.portal_quick_wrap .qbox .qbtn_wrap li{width: 49%;}
.portal_quick_wrap .qbox .qbtn_wrap li a{width: 100%;height: 100%;;display: flex;justify-content: center;align-items: center;border-radius: 10px;background-color: #fff;}
.portal_quick_wrap .qbox .qbtn_wrap li a p{font-size: 2.2rem;color: #333;text-align: center;font-weight: 600;}
.portal_quick_wrap .qbox .qbtn_wrap li a p b{font-size: inherit;font-weight: inherit;font-family: inherit;color: inherit;}
.portal_quick_wrap .qbox .qbtn_wrap.line_2 li:nth-of-type(1), .portal_quick_wrap .qbox .qbtn_wrap.line_2 li:nth-of-type(2){margin-bottom: 10px;}
.portal_quick_wrap .qbox .qbtn_wrap.line_3 li{margin-bottom: 10px}
.portal_quick_wrap .qbox .qbtn_wrap.line_3 li:last-of-type{margin-bottom: 0;width: 100%;}
.portal_quick_wrap .qbox .qbtn_wrap li a:hover p{color: #00358e;}

/* 저작권교육체계 */
.edu_system_m{display: none;}
.edu_system_wrap{width: 100%;padding: 0 30px 0px;height: auto;border-radius: 10px;background-color: #e9f1fe;margin-top: 60px;}
.edu_system_wrap .edu_title_box{display: flex;justify-content: space-between;align-items: center;;}
.edu_system_wrap .edu_title_box .rbox{display: flex;justify-content: flex-start;align-items: center;}
.edu_system_wrap .edu_title_box .rbox img{margin-top: -10px;}
.edu_system_wrap .edu_title_box .rbox span{display: flex;align-items: center;}
.edu_system_wrap .edu_title_box .rbox h3{font-size: 3.2rem;font-family: 'GmarketSansBold';color: #083059;}
.edu_system_wrap .edu_title_box .rbox p{font-size: 1.8rem;color: #00428a;margin-left: 14px;}
.edu_system_wrap .edu_title_box .rbox p b{color: inherit;font-size: inherit;font-family: inherit;font-weight: 700;}
.edu_system_wrap .edu_title_box .toggle_btn{margin-left:20px;display: inline-block;;border: 0;border-radius: 300px;padding: 15px 55px 15px 30px;background-image: url(../../images/portal/icon_open.png);background-position: center right 25px;background-repeat: no-repeat;word-break: keep-all;background-color: #083059}
.edu_system_wrap .edu_title_box .toggle_btn.on{background-image: url(../../images/portal/icon_close.png)}
.edu_system_wrap .edu_title_box .toggle_btn span{display: block;color:#fff;font-size:1.8rem;}
.edu_system_wrap .edu_title_box .toggle_btn .closetxt{display: none;}
.edu_system_wrap .edu_title_box .toggle_btn.on span{display: none;color:#fff}
.edu_system_wrap .edu_title_box .toggle_btn.on .closetxt{display: block;}

.toggle_box{display: block;padding-bottom: 10px;}
.edu_system{display: flex;justify-content: space-between;align-items: flex-start;}
.edu_system > li{position: relative;width: calc(20% - 20px);padding: 25px 15px;background-color: #fff;border-radius: 10px;align-self: stretch;}
.edu_system > li::after{position: absolute;top: 50%;right: -32px;transform: translateY(-50%);content: '';display: block;width: 0;height: 0;border: 16px solid transparent;border-left-color: #fff;}
.edu_system > li:last-of-type::after{display: none;}
.edu_system > li ul{display: block;}
.edu_system > li ul li{display: block;margin-bottom: 10px;}
.edu_system > li ul li:last-of-type{margin-bottom: 0;}
.edu_system > li ul li a{display: flex;justify-content: center;align-items: center;height: 50px;background-color: #f5f6f8;border: 1px solid #ddd;border-radius: 4px}
.edu_system > li ul li a p{font-size: 1.6rem;font-weight: 500;color: #555;text-align: center;line-height: 1.3}
.edu_system > li ul li.on a{background-color:#0762be;border-color: #0762be;}
.edu_system > li ul li.on a p{color: #fff;}
.edu_system > li ul li a:hover{background-color:#0762be;border-color: #0762be;}
.edu_system > li ul li a:hover p{color: #fff;}

/*저작권 교육과정 드롭다운*/
.edu_stystem_list{display:none;}
.edu_system_list {padding: 10px 20px;}
.edu_system_list li{position: relative;font-size: 1.6rem;margin-bottom: 10px;color:#333}
.edu_system_list li::before{position: absolute;top: 6px;left: -15px;content: '';display: inline-block;width: 6px;height: 6px;border-radius: 6px;background-color: #333;}

.edu_system_info {display:none;}

.edu_system_con{margin-top: 40px;display: flex;justify-content: space-between;flex-flow: row wrap;}
.edu_system_con > li{width: 100%;margin-bottom: 20px;}
.edu_system_con > li:last-of-type .toggle_list_con{padding: 20px 30px 0px 40px;}
.edu_system_con > li .toggle_list_title{width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 10px 40px 10px 20px;background-color: #fff;border-radius: 40px;background-image: url(../../images/portal/icon_dropbox_arrow.png);background-repeat: no-repeat;background-position: top 50% right 20px;}
.edu_system_con > li .toggle_list_title.open{background-image: none;}
.edu_system_con > li .toggle_list_title.open ~ .toggle_list_con{display: block;}
.edu_system_con > li .toggle_list_title.on{background-image: url(../../images/portal/icon_dropbox_arrow2.png)}
.edu_system_con > li .toggle_list_title p{font-size: 2rem;font-weight: bold;margin-left: 10px;color:#333}
.edu_system_con > li .toggle_list_con{padding: 20px 40px 0px 60px;}
.edu_system_con > li .toggle_list_con li{position: relative;font-size: 1.6rem;margin-bottom: 10px;color:#333}
.edu_system_con > li .toggle_list_con li::before{position: absolute;top: 6px;left: -15px;content: '';display: inline-block;width: 6px;height: 6px;border-radius: 6px;background-color: #333;}
.edu_system_con > li:last-of-type .toggle_list_con li::before{position: absolute;top: 10px;left: -15px;content: '';display: inline-block;width: 6px;height: 6px;border-radius: 6px;background-color: #333;}

.edu_system_con > li .toggle_list_con li p{font-size: inherit;font-family: inherit;color: inherit;display: inline-block;line-height: 1.5;margin-top: -4px;color:#333}
.edu_system_con > li:last-of-type .toggle_list_con .contents{height:auto;max-height: 285px;overflow-y:auto;padding: 0 20px }
.edu_system_con > li .toggle_list_con .contents li{display: flex;justify-content: space-between;align-items: flex-start;flex-flow:row nowrap;border-bottom: 1px dashed #e5e5e5;padding-bottom: 10px;font-size: 1.8rem;font-weight: 600;color:#333}
.edu_system_con > li .toggle_list_con .contents li:last-of-type{border-bottom: 0;}
.edu_system_con > li .toggle_list_con .contents li .lbox{display: flex;justify-content: flex-end;align-items: center;min-width:270px}
.edu_system_con > li .toggle_list_con .contents li .lbox p{font-size: 1.6rem;color: #666;margin-top: 0px;padding-left: 20px;background: url(../../images/portal/icon_time.png) no-repeat left 0 center ;}
.edu_system_con > li .toggle_list_con .contents li .lbox a{display: inline-block;text-align: center;font-size: 1.8rem;color: #333;width: 100px;line-height: 34px;border: 1px solid #999;background-color: #fff;border-radius: 4px;margin-left: 15px;}

/* 추가 */
.edu_system_con > li .toggle_list_con li .rbox{font-size: 1.8rem;display: flex;flex-flow: row wrap;margin-right:20px;line-height: 1.4}
.edu_system_con > li .toggle_list_con li .rbox div{margin-left: 10px;margin-top: 5px}
.edu_system_con > li .toggle_list_con li .rbox div span{font-size: 1.4rem;color: #fff;background-color:#595857;padding: 1px 12px 3px;border-radius: 30px;margin-right: 3px;}
.edu_system_con > li .toggle_list_con li .rbox div span:last-of-type{margin-right: 0;}
/*추가끝*/

/* 열고 닫기 */
.toggle_box{display: none;}
.toggle_list_con{display: none;}


/* footer */
.intro_footer{background-color: #fff;height: auto;margin-top: 80px;padding-bottom: 60px;}
.intro_footer .sns{display: block;text-align: center;margin-bottom: 20px;}
.intro_footer .sns li{display: inline-block;margin-right: 10px;}
.intro_footer .sns li:last-of-type{margin-right: 0}
.intro_footer .sns li a{display: block;width: 40px;height: 40px;background-position: 50% 50%;background-repeat: no-repeat;}
.intro_footer .sns li:nth-of-type(1) a{background-image: url(../../images/portal/footer_icon_youtube.png);}
.intro_footer .sns li:nth-of-type(2) a{background-image: url(../../images/portal/footer_icon_insta.png);}
.intro_footer .sns li:nth-of-type(3) a{background-image: url(../../images/portal/footer_icon_blog.png);}
.intro_footer p{display: block;text-align: center;font-size: 1.4rem;color: #999;;cursor: default;}


/* 반응형 웹 */
@media screen and (max-width: 1501px) {

}

/* 반응형 태블릿 */
@media screen and (max-width: 1280px) {
    .portal_quick_wrap .qbox .qbtn_wrap li a p b{display: block;}


}

@media screen and (max-width: 1199px) {
	#container.portal{padding-top: 65px;}

    .portal .fb_search{flex-flow: column;align-items: center;}
    .fb_search .search_wrap{margin: 0;display: flex;flex-flow: column-reverse;}
    .search_wrap .keyword{margin-top: 0;margin-bottom: 10px;}
    .search_wrap .keyword .tit{margin-right: 10px;}
    .fb_search .btn_wrap{margin-top:20px}

    .portal_quick_wrap .qbox .qbtn_wrap li a p{font-size: 2rem;word-break: break-all;}

    .edu_system_wrap .edu_title_box .rbox span{flex-flow: column;align-items: flex-start;}
    .edu_system_wrap .edu_title_box .rbox p{margin-left: 0;margin-top: 5px;}
    .edu_system{flex-flow: row wrap;justify-content: flex-start;}
    .edu_system > li{width: calc(33.3% - 20px);margin-right: 30px;margin-bottom: 15px;}
    .edu_system > li:nth-of-type(3){margin-right: 0;}

    .edu_system_con > li{width: 100%;}
    .edu_system_con > li .toggle_list_con{padding: 20px 40px;}
    .edu_system_con > li:last-of-type .toggle_list_con{padding:20px}

}

/* 반응형 모바일 */
@media screen and (max-width: 767px) {
	#container.portal{padding-top:45px}
    .portal .logo{margin-bottom: 30px;}
    .portal_quick_wrap{padding: 10px 20px 40px;flex-flow: column;}
    .portal_quick_wrap .qbox{width: 100%;margin: 30px 0;}
    .portal_quick_wrap .qbox .qbtn_wrap{min-height: auto;}
    .portal_quick_wrap .qbox::after{width: 100%;height: 1px;display: block;top: auto;bottom: -30px;}
    .portal_quick_wrap .qbox:last-of-type::after{display: none;}
    .portal_quick_wrap .qbox:last-of-type{margin-bottom: 10px;}
    .portal_quick_wrap .qbox .qbtn_wrap li{min-height: 60px;}

	.edu_system_info {display:block;}

    .edu_system_con > li .toggle_list_con .contents li{flex-flow: column;align-items: flex-start;}
    .edu_system_con > li .toggle_list_con .contents li .lbox{margin-top: 10px;flex-flow: column-reverse;width: 100%;min-width:auto}
    .edu_system_con > li .toggle_list_con .contents li .lbox a{width: 100%;margin-left: 0;}
    .edu_system_con > li:last-of-type .toggle_list_con .contents{max-height: 700px;padding: 0}

    .edu_system_wrap .edu_title_box .rbox{padding:30px 0 30px;}
    .edu_system_wrap .edu_title_box .rbox img{display: none;}

    .edu_system_wrap .edu_title_box .toggle_btn{margin:0;position: absolute;bottom: -25px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;padding: 0;background-color: #00428a;background-image: url(../../images/portal/icon_dropbox_arrow_m.png);background-position: center center;}
    .edu_system_wrap .edu_title_box .toggle_btn.on{background-image: url(../../images/portal/icon_dropbox_arrow_m2.png)}
    .edu_system_wrap .edu_title_box .toggle_btn span{overflow:hidden !important;width:0 !important;height:0 !important;font-size:0 !important;text-indent:-9999em !important;position:absolute;left:-9999em !important;top:-9999em !important;}


    /* 셀렉트박스 */
    .edu_system_box.active .edu_system{display: block;}
    .edu_system{display: none;flex-flow: column;}
    .edu_system > li{width: 100%;margin-right: 0;margin-bottom: 20px;}
    .edu_system_box{position: relative;width: 100%;height: 50px;overflow: hidden;border-radius: 4px;background-color: #0762be;color: #fff;font-size: 1.6rem;cursor: pointer;}
    .edu_system_box.active{min-height: 270px;}
    .edu_system_m{position: absolute;top: 0;left: 0;right: 0;display: block;width: 100%;height: 50px;text-align: center;color: #fff;font-size: 1.6rem;font-family: inherit;background-image: url(../../images/portal/icon_dropbox_arrow_fff.png);background-repeat: no-repeat;background-position: right 20px top 50%;}
    .edu_system{position: absolute;top: 50px;left: 0;right: 0;height: 220px;overflow: hidden;overflow-y: auto;border: 1px solid #ddd;border-radius: 0;}
    .edu_system > li{padding: 0;width: 100%;}
    .edu_system > li::after{display: none;}
    .edu_system > li ul li, .edu_system > li{margin: 0;}
    .edu_system > li ul li.on a, .edu_system > li ul li a, .edu_system > li ul li a:hover{color: #333;background-color: #fff;border:none;border-radius: 0;border-bottom: 1px solid #ddd;}
    .edu_system > li ul li a p, .edu_system > li ul li.on a p, .edu_system > li ul li a:hover p{color: #333;}
	/*추가*/
	.edu_system_con > li .toggle_list_con .contents li::before{display: none;}
	.edu_system_con > li .toggle_list_con li .rbox{flex-flow: column-reverse;margin-right: 0}
	.edu_system_con > li .toggle_list_con li .rbox div{display: block;width: 100%;margin-left: 0;margin: 10px 0;}
	/*추가끝*/
    

}



/* 반응형 모바일2 */
@media screen and (max-width: 520px) {
    .portal{background-image: none;}
    .portal .logo{display: block;text-align: center;}
    .portal .title h2{font-size: 4rem;}
    .portal .fb_search{margin: 20px auto 30px;}
    .search_wrap .keyword{flex-flow: column;align-items: flex-start;}
    .search_wrap .keyword .tit{margin-right: 0;margin-bottom: 10px;}

    .portal_quick_wrap .qbox{padding: 0;}
    .portal_quick_wrap .qbox > h3{font-size: 2.6rem;}
    .portal_quick_wrap .qbox > p{font-size: 1.8rem;}
    .portal_quick_wrap .qbox .qbtn_wrap{margin-top: 20px;}
    .portal_quick_wrap .qbox .qbtn_wrap li{min-height: 50px;}
    .portal_quick_wrap .qbox .qbtn_wrap li a p{font-size: 1.6rem;}
    
    .edu_system_wrap .edu_title_box .rbox h3{font-size: 2.6rem;}
    .edu_system_wrap .edu_title_box .rbox p{font-size: 1.6rem;}
    .edu_system_con{margin-top: 20px;}
    .edu_system_wrap{margin-top: 40px;padding: 0 20px;}
    .edu_system_con > li .toggle_list_con{padding: 20px 20px 20px 30px;}

}