@charset "utf-8";
@import url(../../common/font/GodoM/GodoM.css);

#m_conts {font-size:1.8rem;}

@media all and (max-width:1024px) {
	#m_conts {font-size:1.7rem;}
}
@media all and (max-width:789px) {
	#m_conts {font-size:1.6rem;}
}
@media all and (max-width:640px) {
	#m_conts {font-size:1.5rem;}
}
@media all and (max-width:480px) {
	#m_conts {font-size:1.4rem;}
}
@media all and (max-width:380px) {
	#m_conts {font-size:1.3rem;}
}

#m_conts .inner {position:relative;}
#m_conts .inner:after {content:""; display:block; clear:both;}



/*****************************************
	Visual
*****************************************/

.visualWrap {position:relative; max-width:170rem; margin:0 auto; padding-left:2rem; padding-right:2rem;}
.visualWrap:after {content:""; display:block; clear:both;}

.mainVisual {position:absolute; top:0; left:0; bottom:0; z-index:9; width:130rem;}
.mainVisual .slider {position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1;}
.mainVisual .slider .swiper-slide {cursor:default;}
.mainVisual .slider .swiper-slide a {cursor:pointer;}
.mainVisual .slider .swiper-container,
.mainVisual .slider .swiper-wrapper,
.mainVisual .slider .swiper-slide,
.mainVisual .slider .swiper-slide em {height:100%;}
.mainVisual .slider .swiper-slide em {display:block; position:relative; background:no-repeat 50% 50%; background-size:cover;}
.mainVisual .control {position:absolute; /* left:50%; margin-left:-70rem; */ left:3em; bottom:2.77em; z-index:1;}
.mainVisual .control > button {display:inline-block; position:relative; width:2.77em; height:2.77em; overflow:hidden; text-indent:-999px; background:rgba(0,0,0,.5);}
.mainVisual .control > button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1rem 0 0 -1rem; width:2rem; height:2rem; background:url(../img/main/split_main.png) no-repeat .3rem 0; background-size:30rem;}
.mainVisual .control > button.next:before {background-position:-14.8rem 0;}
.mainVisual .control > button.play {display:none;}
.mainVisual .control > button.play:before {background-position:-9.7rem 0;}
.mainVisual .control > button.stop:before {background-position:-4.7rem 0;}
.mainVisual .control .pager {display:inline-block; height:2rem; vertical-align:middle; width:auto; color:#fff; margin-left:2.2rem;}
.mainVisual .control .pager > * {display:inline-block; vertical-align:bottom;}
.mainVisual .control .pager em {font-size:1.66em; color:#efff3d;}
.mainVisual .control .pager i:before {content:"/";}
.mainVisual .control .pager i {margin:0 .5em;}

.mainVisual .txt {display:block; position:absolute; top:0; left:50%; margin-left:-70rem; bottom:0; width:140rem; max-width:100%; padding-bottom:6.4em;}
.mainVisual .txt .inner {display:table; width:100%; height:100%; max-width:26em; margin:0;}
.mainVisual .txt p {display:table-cell; vertical-align:middle; text-align:left; color:#fff; font-family:'GodoM'; font-size:2.77em; line-height:1.3;}


.mainLogin {position:relative; background:#fff; margin:6rem 0; width: 36rem; height:52rem; float:right;
	-webkit-box-shadow: 0px 2rem 3rem 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2rem 3rem 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2rem 3rem 0px rgba(0,0,0,0.2);
}
.mainLogin .btn-login {display:block; position:relative; width:100%; font-size:1.22em; color:#ffffff; height:3em; margin-top:1.36em; background:#008762; text-align:center;}
.mainLogin a.btn-login {line-height:3.18em;}

.mainLogin .login {display:block; padding: 1.2em;}
.mainLogin .login fieldset {position:relative; padding:0 0 1.66em; font-size:1em;}
.mainLogin .login fieldset:after {content:""; display:block; clear:both;}
.mainLogin .login .type {padding:0;}
.mainLogin .login .type input[type="radio"] {display:block; position:absolute; top:0; left:0; z-index:-99; opacity:0;}
.mainLogin .login .type input[type="radio"] + label {display:block; position:relative; width:50%; float:left; height:3.18em; color:#333; background:#e5e5e5; line-height:3.18em; text-align:center; font-size:1.22em;}
.mainLogin .login .type input[type="radio"]:focus + label {text-decoration:underline;}
.mainLogin .login .type input[type="radio"]:checked + label {color:#fff; background:#59bc0f;}
.mainLogin .login .user {padding-bottom:0;}
.mainLogin .login .user input[type="text"],
.mainLogin .login .user input[type="password"] {display:block; position:relative; width:100%; height:3em; border:1px solid #dddddd; margin-top:.55em; padding:0 2em 0 3.55em; color:#333; font-size:1.22em; background:no-repeat 1em 50%; background-size:1.5em auto;}
.mainLogin .login .user input[type="password"] {margin-bottom:.55em;}
.mainLogin .login .user input[type="text"]::placeholder,
.mainLogin .login .user input[type="password"]::placeholder {color:#666666;}
.mainLogin .login .user input.user-id {background-image:url(../img/main/ico_login_id.png);}
.mainLogin .login .user input.user-pw {background-image:url(../img/main/ico_login_pw.png);}
.mainLogin .login .user input[type="checkbox"] {appearance: none; -webkit-appearance: none; width:2.5rem; height:2.5rem; background:url(../img/main/split_main.png) no-repeat 0 -16.9rem; background-size:30rem;}
.mainLogin .login .user input[type="checkbox"]:checked {background-position:-3.3rem -16.9rem;}
.mainLogin .login .user input[type="checkbox"] + label {color:#333333;}
.mainLogin .login .user input[type="checkbox"]:focus + label {text-decoration:underline;}
.mainLogin .login ul {display:table; width:100%; table-layout:fixed; height:5em;}
.mainLogin .login ul li {display:table-cell; text-align:center; vertical-align:middle;}
.mainLogin .login ul li + li {background:url(../img/main/bak_login_line.png) no-repeat 0 50%;}
.mainLogin .login ul li a {color:#333; font-size: 1em;}

.mainLogin .login .name {display:block; position:relative; padding:0 .357em .357em; font-size:1.55em; line-height:1.4; font-weight:600; color:#000;text-align: center;}
.mainLogin .login .name:before {content:""; display:block; position:relative; width:9.5rem; height:4.9rem; background:url(../img/main/split_main.png) no-repeat 0 -3.3rem; background-size:30rem;margin: 0 auto;}

.mainLogin .member {display:block; padding:1.66em;}
.mainLogin .member .name {display:block; position:relative; font-size:1.55em; line-height:1.4; padding:.357em; font-weight:300; color:#000;}
.mainLogin .member .name:before {content:""; display:block; position:relative; width:9.5rem; height:4.9rem; background:url(../img/main/split_main.png) no-repeat 0 -3.3rem; background-size:30rem;}
.mainLogin .member .name em,
.mainLogin .member .name strong {font-weight:600;}
.mainLogin .member .name em {color:#008762;}

.mainLogin .member ul {display:table; width:100%; table-layout:fixed; height:9.5em;}
.mainLogin .member ul li {display:table-cell; position:relative; text-align:center; vertical-align:middle; padding-top:5.5rem;}
.mainLogin .member ul li + li {background:url(../img/main/bak_line_mypage.png) no-repeat 0 50%;}
.mainLogin .member ul li a {color:#333; font-size:.94em;}
.mainLogin .member .ico {display:block; position:absolute; top:3rem; left:50%; margin-left:-3.1rem; width:6.2rem; height:5.5rem; background:url(../img/main/split_login.png) no-repeat 0 0; background-size:auto 5.5rem;}
.mainLogin .member .ico.ty1 {background-position:.4rem 50%;}
.mainLogin .member .ico.ty2 {background-position:-14.2rem 50%;}
.mainLogin .member .ico.ty3 {background-position:-28.7rem 50%;}
.mainLogin .member .ico.ty4 {background-position:-43.2rem 50%;}

@media all and (min-width:1024px) {
	.mainVisual .slider{float:left; /* width: 130rem; */}
	.mainLogin {right: -10%;margin:0; height:57rem;width: 38rem;}
	.mainLogin .login ul {display:block;padding:3rem 0;}
	.mainLogin .login ul li{display:block; padding: 1.9rem 1.4rem; background:none!important; border-right: 1px dashed #ddd; float: left;}
	.mainLogin .login ul li:last-child{border-right:none;}
	.mainLogin .login ul li + li{/*border-top:1px dashed #ddd;*/ }
}

@media (max-width:1700px) and (min-width:1024px){
	.visualWrap .inner {margin-right:0;}
	.mainLogin {right: 0;}
	.mainVisual {width:calc(100% - 42rem);}
}
@media all and (max-width:1440px) {
	.mainVisual .control,
	.mainVisual .txt {left:2rem; margin-left:0;}
}
@media all and (max-width:1024px) {
	.mainVisual .txt p {font-size:2.5em;}
	.mainVisual {position:relative; width:100%; padding-top:44%; margin:0 -2rem;}

	.mainLogin {width:auto; float:none; height:auto; margin:0 -2rem 2em; font-size:1.5rem;}
	.mainLogin .member .name br {display:none !important;}
	.mainLogin .member .name {word-break:keep-all;}
}

@media all and (max-width:820px) {



}
@media all and (max-width:640px) {
	.mainLogin {font-size:1em;}
	.mainLogin .member .ico {transform:scale(.8); -webkit-transform:scale(.9);}
}
@media all and (max-width:400px) {
	.mainVisual .txt p {font-size:2em;}
}


/*****************************************
	Work
*****************************************/

.workWrap {position:relative; padding:2.77em 2rem; background:url(../img/main/bak_work.png) no-repeat 100% 0;}
.workWrap .tit {display:block; position:relative; width:8.125em; float:left; color:#333333; font-size:1.77em; letter-spacing:-0.05em; line-height:1.3; font-family:'GodoM'; font-weight:800; padding-bottom:2em;}
.workWrap .tit strong {display:inline-block; position:relative;}
.workWrap .tit strong:before {content:""; display:block; position:relative; width:13.1rem; height:5.9rem; background:url(../img/main/split_main.png) no-repeat 0 -9.8rem; background-size:30rem;}
.workWrap .tit strong:after {content:""; display:block; position:absolute; bottom:.2rem; left:-.7rem; right:-.7rem; height:.65em; background:#f6f2cc; z-index:-1;}

.workWrap .control {display:none;}

.mainWork {width:60em; float:right;}
.mainWork .control {position:absolute; bottom:10rem; left:0;}
.mainWork .control button {display:inline-block; position:relative; width:5.5rem; height:5.5rem; overflow:hidden; text-indent:-999px; border:1px solid #d5dbe1;}
.mainWork .control button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1.1rem 0 0 -.6rem; width:1.2rem; height:2.2rem; background:url(../img/main/split_main.png) no-repeat -20.1rem 0rem; background-size:30rem; opacity:.4;}
.mainWork .control button:hover:before {opacity:1;}
.mainWork .control button.next:before {background-position:-24.9rem 0;}

.mainWork .work-item {display:inline-block !important; position:relative; max-width:100%;  transition:.3s all; -webkit-transition:.3s all;}
.mainWork .work-item:hover {
	-webkit-box-shadow: 1.66em 1.11em 2.77em 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 1.66em 1.11em 2.77em 0px rgba(0,0,0,0.2);
	box-shadow: 1.66em 1.11em 2.77em 0px rgba(0,0,0,0.2);
}
.mainWork .work-item img {display:block; position:relative; z-index:0;}
.mainWork .work-item strong {display:block; position:absolute; text-align:left; left:0; bottom:0; z-index:1; padding:.77em 6.7rem .77em .55em; background:#fff; color:#444; word-break:keep-all;line-height: 26px;}
.mainWork .work-item strong:after {content:""; display:block; position:absolute; right:.55em; top:50%; margin-top:-.45rem; width:2.4rem; height:.9rem; background:url(../img/main/split_main.png) no-repeat -12rem -3.7rem; background-size:30rem;}

.mainWork .swiper-slide {padding:5rem 0 10rem; text-align:center;}
.mainWork .swiper-slide:nth-child(2n) {transform:translateY(5rem); -webkit-transform:translateY(5rem);}
.mainWork.fix-scroll .swiper-slide .work-item {transform:translateY(0) !important; -webkit-transform:translateY(0) !important;}

@media all and (max-width:1024px) {
	.workWrap .tit {width:auto; float:none; padding-bottom:0;}
	.workWrap .tit strong {vertical-align:bottom;}
	.workWrap .tit br {display:none;}

	.mainWork {width:auto; float:none;}
	.mainWork .swiper-container {overflow:visible;}
}

@media all and (max-width:768px) {
	.workWrap .control {display:block; position:relative; text-align:center; right:0; left:auto; bottom:auto; top:0; }
	.mainWork .swiper-slide {padding:3rem 0 8rem;}
}

@media all and (max-width:768px) {
	.mainWork .swiper-slide:nth-child(2n) {transform:translateY(0); -webkit-transform:translateY(0);}
	.mainWork .swiper-slide {padding:3rem 0;}
}


/*****************************************
	Board
*****************************************/

.boardWrap {position:relative; padding:5.1em 2rem 0;}
.boardWrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; height:60%; background:#3679dc; z-index:-1;}
.boardWrap .tit {display:block; position:relative; color:#fff;}
.boardWrap .tit strong {display:block; font-family:'GodoM'; font-size:3.05em;}
.boardWrap .tit span {display:block; font-size:1.44em; padding:1em 0 1.46em;}
.boardWrap .tit:after {content:""; display:block; position:absolute; right:-.83em; top:-2.22em; width:24.56em; height:13.5em; background:url(../img/main/img_board_acc.png) no-repeat 0 0; background-size:contain;}
.boardWrap .pannel {position:relative; background:#fff; z-index:0; padding:2.77em;}
.boardWrap .pannel:after {content:""; display:block; clear:both;}

.mainBoard {position:relative; width: 48.5%; padding: 0 1%; float:left;}
.mainBoard.etn {margin-left: 2%;padding-left: 2%;border-left: 2px solid #ebebeb;}
.mainBoard .title {display:block; position:relative; font-size:1.33em; height:2.5em; line-height:2.5em; padding-left:1em; background:#0e49a1; color:#fff;}
.mainBoard .title span {color: #18b5d1;font-weight: 600;}
.mainBoard .more {display:block; position:absolute; top:0; right:0; font-size:1.33em; width:2.5em; height:2.5em; background:#16b5d2; overflow:hidden; text-indent:-999px;}
.mainBoard .more:before {content:""; display:block; position:absolute; width:2rem; height:2rem; top:50%; left:50%; margin:-1rem 0 0 -1rem; background:url(../img/main/split_main.png) no-repeat -28rem 0; background-size:30rem;}

.mainBoard li {display:block; position:relative; padding-left:1em; line-height:1.2; overflow:hidden; margin-bottom:.8em;}
.mainBoard li:before {content:""; display:block; position:absolute; width:.9rem; height:.9rem; background:#bbbfc4; left:0; top:.6em; margin-top:-.45rem; border-radius:100%;}
.mainBoard li a {display:block; position:relative; font-size:1em; color:#555;}
.mainBoard li a .subj {display:inline-block; position:relative; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400 !important; line-height:1.3125; color:#333;}
.mainBoard li a.new .subj {padding-right:4.5rem !important;}
.mainBoard li a .subj .new {display:block; position:absolute; top:50%; margin-top:-.7rem; right:0; width:3.7rem; height:1.4rem; background:url('../img/main/split_main.png') no-repeat -17.7rem -3.7rem; background-size:30rem; overflow:hidden; text-indent:-999px;}
.mainBoard li a .con {display:none;}
.mainBoard li a .date {display:block; position:absolute; top:0; bottom:0; right:0;}
.mainBoard li a .date > * {display:inline-block; vertical-align:middle; position:relative; color:#999999;}
.mainBoard li a .date i {width:.3em; height:1.2em; overflow:hidden; text-indent:-999px;}
.mainBoard li a .date i:before {content:"."; display:block; position:absolute; top:0; left:0; width:100%; bottom:0; text-indent:0; text-align:center; font-weight:800;}
.mainBoard li a .date strong {font-weight:400 !important;}
.mainBoard li a .date strong ~ i {display:none;}
.mainBoard li:first-child {padding:0 0 1rem 0;}
.mainBoard li:first-child:before {display:none;}
.mainBoard li:first-child a {padding:5rem 0 5rem 8em; border-bottom:1px solid #dddddd;}
.mainBoard li:first-child a .name {display:none;}
.mainBoard li:first-child a .subj {color:#000; font-size:1.22em; margin:0 0 .5em; padding:0; font-weight:800 !important; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard li:first-child a .con {display:block; position:relative; font-size:.88em; color:#888888; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard li:first-child a .date {display:block; position:absolute; width:6.25em; height:6.25em; color:#333333; text-align:center; padding-top:3.7em; box-sizing:border-box; left:1.11em; top:50%; margin-top:-3.125em; border:1px solid #d5dbe1; font-size:.88em; border-radius:1.625em;}
.mainBoard li:first-child a .date > * {color:#333;}
.mainBoard li:first-child a .date > strong {display:block; position:absolute; top:.6em; left:0; right:0; font-size:3rem; color:#16b5d2; font-weight:800 !important;}
.mainBoard li:first-child a .date i ~ i {position:absolute; top:0; right:0; z-index:-999; opacity:0;}

.mainPopup {position:relative; width:470px; height:395px; overflow:hidden; float:right; border:1px solid #dddddd; box-sizing:content-box;}
.mainPopup .swiper-slide img {display:block; max-width:100%; position:relative;}
.mainPopup .control {display:block; position:absolute; left:0; bottom:0; z-index:5; background:rgba(0,0,0,.6); padding:0 .55em;}
.mainPopup .control button {display:inline-block; position:relative; width:2.77em; height:3.22em; overflow:hidden; text-indent:-999px;}
.mainPopup .control button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1.4rem 0 0 -.85rem; width:1.7rem; height:2.8rem; background:url('../img/main/split_main.png') no-repeat -14.9rem -7.3rem; background-size:30rem;}
.mainPopup .control button.next:before {background-position:-24rem -7.3rem;}
.mainPopup .control button.stop:before {background-position:-19.4rem -7.3rem;}
.mainPopup .control button.play {display:none;}
.mainPopup .control button.play:before {background-position:-27.6rem -7.3rem;}

.mainPopup .slider,
.mainPopup .swiper-container,
.mainPopup .swiper-wrapper,
.mainPopup .swiper-slide {height:100%;}
.mainPopup .slider .swiper-slide {background:url(../../common/img/board/sample_noimage.jpg) no-repeat 50% 50% #edf1fa;}
.mainPopup .slider .swiper-slide img[src*="noimage"] {opacity:0;}

@media all and (max-width:1440px) {
	.boardWrap .mainBoard {/*width:750px;*/}
}
@media all and (max-width:1024px) {
	.boardWrap {padding-top:4em;}
	.boardWrap .tit:after {transform:scale(.8); -webkit-transform:scale(.8); transform-origin:100% 0; -webkit-transform-origin:100% 0; right:-3.83em;}
	.boardWrap .tit strong {font-size:2.7em;}
	.boardWrap .tit span {font-size:1.2em;}

	.boardWrap .mainBoard {width:auto; float:none; margin-bottom:3em;}
	.boardWrap .mainBoard.etn {margin-left:0; padding-left:0; border-left:none;}
	.mainPopup {border-width:0; float:none; width:auto; height:auto;}
	.mainPopup .swiper-slide {border:1px solid #dddddd;}
}
@media all and (max-width:840px) {
	.boardWrap .pannel {padding:2em;}
}
@media all and (max-width:760px) {
	.boardWrap .tit:after {transform:scale(.5); -webkit-transform:scale(.5); top:0;}
}
@media all and (max-width:640px) {
	.boardWrap .pannel {margin:0 -2rem; padding:2rem;}
	.mainPopup,
	.mainPopup .swiper-container {overflow:visible;}

	.mainBoard li:first-child a {padding:3rem 0 3rem 7em;}
	.mainBoard li:first-child a .date {left:0;}
	.mainBoard li:first-child a .date > strong {top:.4em;}
}
@media all and (max-width:590px) {
	.boardWrap .tit:after {display:none;}
}
@media all and (max-width:480px) {
	.mainPopup,
	.mainPopup .swiper-container {overflow:hidden;}

}


/*****************************************
	Quicki
*****************************************/

.quickWrap {position:relative; padding:0 2rem 4em;}

.mainQuick {position:relative; margin:0 5rem; border:1rem solid #ebebeb;}
.mainQuick ul {display:table; width:100%; table-layout:fixed;}
.mainQuick ul > li {display:table-cell; vertical-align:middle; text-align:center; height:7.77em; width:25%;}
.mainQuick ul > li + li {background:url(../img/main/bak_line_quick.png) no-repeat 0 50%;}
.mainQuick a {color:#222; font-size:1.22em;}
.mainQuick .ico {display:inline-block; vertical-align:middle; width:6.8rem; height:5.2rem; background:url(../img/main/split_quick.png) no-repeat 0 0; background-size:auto 100%;}
.mainQuick .ico.ty2 {background-position:-12rem 0;}
.mainQuick .ico.ty3 {background-position:-24.1rem 0;}
.mainQuick .ico.ty4 {background-position:-36.2rem 0;}

@media all and (max-width:1024px) {
	.mainQuick .ico {display:block; margin:0 auto 1em;}
	.mainQuick a {font-size:1.1em;}
}
@media all and (max-width:840px) {
	.mainQuick {margin:0 2em;}
	.mainQuick a {font-size:1em;}
	.mainQuick .ico {transform:scale(.8); -webkit-transform:scale(.8);}
}
@media all and (max-width:640px) {
	.mainQuick {margin:0;}
	.mainQuick ul > li + li {background:none; border-left:1px solid #ebebeb;}
}
@media all and (max-width:480px) {
	.mainQuick ul,
	.mainQuick ul > li {display:block; overflow:hidden; height:auto;}
	.mainQuick ul > li {width:50%; float:left; box-sizing:border-box; padding:1.5em 0;}
	.mainQuick ul > li:nth-child(odd) {border-left-width:0;}
	.mainQuick ul > li:nth-child(2) ~ li {border-top:1px solid #ebebeb;}
}

.modal-qr {display:none; width:60%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); padding:4rem 4rem 2rem; text-align:center; background:#fff; border:1px solid #ddd; box-shadow:1.7rem 1.7rem 3rem rgba(20,52,119,0.15); z-index:10; overflow:hidden;}
.modal-qr img {width:100%; height:auto;}
.modal-qr .close {font-size:2.4rem; color:#666; display:inline-block; margin-top:1rem;}
@media all and (max-width:820px) {
	/* .mainLogin .member ul {padding-top:30rem;} */
	.mainLogin .member ul li + li:nth-child(2) {background:none;}
	.go-qr {display:none !important;}
	.modal-qr {display:block !important; width:25rem; padding:2rem; box-shadow:none; top:15rem; transform:translateX(-50%) translateY(0);}
	.modal-qr .close {display:none;}
}
/* 팝업 */

.popup_layer .popup_cont {position:relative;}
.popup_layer [class^="btn_option"]{position:absolute; display:block; width:32%; height:10%; font-size:0; text-indent:-9999px;}
.popup_layer .btn_option01 {top:74%; left:16%;}
.popup_layer .btn_option02 {top:74%; right:16%;}