/* header -----------------------------------------------------------------------------------------*/

header{display: flex; justify-content: center; align-items: flex-start; border-top:5px solid #322192; height:95px; position: relative}
header h1{padding-top: 5px}
header h1 img{width: 305px}

/* gnb_web */
.gnb {display: flex; width: 774px; min-width: 550px;  padding: 0 30px; justify-content:center}
.gnb>li{height: 90px}
.gnb>li>a {display: inline-block; line-height: 95px; color: #333; font-size: 30px; font-weight: 700; padding: 0 25px; white-space: nowrap}
.gnb>li>a:hover{color: #5743cb; transition: all .2s}
.gnb>li>a.web_on{color: #5743cb}
/*.gnb>li:first-child{display:none}*/

/* gnb_moe */
.mob_gnb{display: none}

/* lnb */
.lnb{width: 100%; height: 70px; position: absolute; top:90px; left: 0; background: #5743cb}
.lnb>ul{display: flex; justify-content: center}
.lnb>ul>li{padding:10px 5px}
.lnb>ul>li>a{display: inline-block; color: #fff; height: 50px; line-height: 55px; font-size: 20px; padding: 0 30px; border-radius: 35px}
.lnb>ul>li>a:hover{background:#322192; transition: all .4s}
.lnb>ul>li>a.web_on{background:#322192}


/*버튼메뉴*/
.header_link{display: flex; flex-direction: column}
.header_link li{display: flex; flex-flow: row nowrap; justify-content: space-between; height:45px}
.header_link li:first-child a{display: block; height: 45px; line-height: 49px; width: 160px}
.header_link li:first-child a:first-child{border-left:1px solid #d6d6d6; padding-left: 48px; background: url('/resources/toctocmath/userImages/common/icon_mail-81cdd71aaa04489a07be31ece99de812.png') 28px 50% no-repeat}
.header_link li:first-child a:last-child{border-right:1px solid #d6d6d6; padding-left: 45px; background: url('/resources/toctocmath/userImages/common/icon_remote-eabf41f5d72aa22b5c6d9270a08dcffa.png') 24px 50% no-repeat; position: relative}
.header_link li:first-child a.header_email{width: 100%; display: flex; justify-content: center; border-left:1px solid #d6d6d6; background: url('/resources/toctocmath/userImages/common/icon_mail-81cdd71aaa04489a07be31ece99de812.png') 126px 50% no-repeat}
.header_link li:first-child a:last-child:not(.header_email):before{content: ''; display: inline-block; position: absolute; background:#9b9b9b; top:17px; left:0; width: 1px; height: 10px}

.header_link li.member_logout a{color: #fff; width: 160px; height: 45px; line-height: 49px}
.header_link li.member_logout a:first-child{padding-left: 68px}
.header_link li.member_logout a.login{background: #322192 url('/resources/toctocmath/userImages/common/icon_login-6efb922fc35dc9377a2337672fdcc66f.png') 51px 50% no-repeat}
.header_link li.member_logout a:last-child{padding-left: 65px; background: #6d6d6d url('/resources/toctocmath/userImages/common/icon_member-846a0fbb16c3e42ad5bc40a8c715d48e.png') 46px 50% no-repeat}


.header_link li.member_login{border-left:1px solid #d6d6d6; border-top:1px solid #d6d6d6; position: relative}
.header_link li.member_login label{width: 45px; height: 24px; line-height: 26px; background: #5743cb; font-size: 11px; color: #fff; position: absolute; left: 0; top: 8px; text-align: center; border-radius: 3px}
.header_link li.member_login select{width: 110px; margin-left: 50px; line-height: 47px; height: 44px; border: none; font-size: 13px; border-radius: 0!important}
.header_link li.member_login a{color: #fff; display: block; height: 44px; line-height: 49px; width: 80px}
.header_link li.member_login a.logout{padding-left: 25px; background: #322192 url('/resources/toctocmath/userImages/common/icon_logout-a16af6814e17a4c644c4242e6bafe3d4.png') 10px 50% no-repeat}
.header_link li.member_login a:last-child{padding-left: 24px; background: #6d6d6d url('/resources/toctocmath/userImages/common/icon_member-846a0fbb16c3e42ad5bc40a8c715d48e.png') 9px 50% no-repeat}


/*모바일메뉴 버튼*/
.icon_menu{display:none}



/* 1200 */
@media (max-width: 1200px) {

	/* header*/
	header{justify-content: space-between; border-bottom: 1px solid #d8d8d8}
	header h1 img{width: 285px; margin-left: 10px}	
	
	/* gnb_web */
	.gnb{display: none}
	
	/* gnb_moe */
	.mob_gnb{display: flex; position: fixed; width: auto; min-width: auto; z-index: 100; right: -100%; top: 95px; bottom: 0; background: #f0eef9; width: 100%; padding: 0; flex-flow: column nowrap; justify-content:flex-start; transition: .2s; overflow: auto;}
	.mob_gnb>li{border-bottom: 1px solid #ddd9eb; height: auto}
	.mob_gnb>li>a {display: block; line-height: 67px; color: #333!important; font-size: 25px; font-weight: 700; padding: 3px 40px 0 40px}	
	.mob_gnb.on{right: 0}	
	.mob_gnb>li>a.on{color: #5743cb!important}
	.mob_gnb>li>a.on:hover{color: #5743cb}
	.mob_gnb>li>a::after{content: url(/resources/toctocmath/userImages/common/icon_mob_gnb_arrow-56a7ce757575f968220d64fb7826c40f.png); display: block; float: right; transition: .2s}
	.mob_gnb>li>a.on::after{content: url(/resources/toctocmath/userImages/common/icon_mob_gnb_arrow_on-89c174b4d5b445299019b9aaea763a2e.png)}	
	
	.mob_gnb>li:first-child{display:block; background: #cdc8e7}
	.mob_gnb>li:first-child .login01{font-size: 16px; text-align: center; padding: 30px}
	.mob_gnb>li:first-child .login01 a{display: inline-block; color: #fff; font-size: 20px; padding:0 40px; height: 50px; line-height: 55px; background: #322192}
	
	.mob_gnb>li:first-child .login02{padding: 0 15px 30px 15px; text-align: center}
	.mob_gnb>li:first-child .login02>p{display: flex; flex-flow: row nowrap; justify-content: flex-end; padding-top: 15px}
	.mob_gnb>li:first-child .login02 p img{width: 25px}
	.mob_gnb>li:first-child .login02 ul{display: flex; flex-flow: row nowrap; justify-content: center; margin-bottom: 10px}
	.mob_gnb>li:first-child .login02 ul li{text-align: left; padding-right: 10px}
	.mob_gnb>li:first-child .login02 .profile {margin: 0}
	.mob_gnb>li:first-child .login02 .profile_img{border: 1px solid #a7a1d4}
	.mob_gnb>li:first-child .login02 ul li p{font-size: 20px; color: #333; margin-top: 10px}
	.mob_gnb>li:first-child .login02 ul li p span{color: #270f86; margin-right: 7px}
	.mob_gnb>li:first-child .login02 ul li>span{font-size: 15px; display: block}
	.mob_gnb>li:first-child .login02 label{margin: 7px 0 0 0}
	.mob_gnb>li:first-child .login02 select{border: 1px solid #a7a1d4; width: 115px; margin-top: 5px}
	.mob_gnb>li:first-child .login02>a{display: inline-block; color: #fff; font-size: 17px; padding:0 20px; height: 30px; line-height: 35px; background: #322192; margin-right: 5px}
	.mob_gnb>li:first-child .login02>a.my_info{background: #322192}
	.mob_gnb>li:first-child .login02>a.logout{background: #333}	


	
	/* lnb */
	.lnb{display: none; position:relative; top: 0; background: #fff; height: auto; padding: 10px 0; border-top: 1px solid #ddd9eb}
	.lnb>ul{flex-flow: column nowrap; justify-content: flex-start; margin-left: 20px}
	.lnb>ul>li{padding: 5px}
	.lnb>ul>li>a{color: #333; height: 30px; line-height: 35px; font-size: 18px; padding: 0 30px; display: block}
	.lnb>ul>li>a:hover{background:none; color: #5743cb; transition: all .4s}
	.lnb>ul>li>a.web_on{background:none}

	
	/*버튼메뉴*/
	.header_link{display: none}
	
	
	/*모바일메뉴 버튼*/
	.icon_menu{display: block; margin: 25px 25px 0 0; position:relative; padding: 10px 5px; width: 45px; height: 40px; cursor: pointer}
	.icon_menu span{position:absolute; z-index:2; transition: .4s; display: block; width: 100%; height: 4px; background: #5843cc}
	.icon_menu span:nth-child(1){top:0}
	.icon_menu span:nth-child(2){top: 50%;margin-top: -1px}
	.icon_menu span:nth-child(3){bottom: 0}
	.icon_menu.on span:nth-child(1){top:50%;transform:rotate(45deg)}
	.icon_menu.on span:nth-child(2){opacity: 0;transition: 0s;}
	.icon_menu.on span:nth-child(3){top:50%;transform:rotate(-45deg)}
	

}

	
/* 500 */
@media (max-width: 500px) {

	/* header*/
	header{height:80px}
	header h1 img{width: 220px; margin-top: 4px}
	
	/* gnb_moe */
	.mob_gnb{top: 80px}
	
	/*모바일메뉴 버튼*/
	.icon_menu{margin: 23px 20px 0 0; width: 35px; height: 30px}
	.icon_menu span{height: 3px}
}