@charset "utf-8";

:root {
	--main-color1:#d01b22; --main-color2:#777; 
	--sub-color1:#fff; --sub-color2:#000; --sub-color3:#f7f7f7; --sub-color4:#f5f5f5; --sub-color5:#ddd; 
}

/*
	max css var.3 / date : 2021-01-25 / modify : 2021-10-07 / name : shin jung ju
*/

*{margin:0;padding:0}.skip,legend{position:absolute}a,abbr,address,article,aside,audio,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,header,hgroup,hr,html,i,iframe,img,ins,kbd,li,main,mark,nav,ol,output,p,pre,q,ruby,s,samp,section,small,span,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video,button,input,textarea,select{font: inherit;padding:0;margin:0;border:0;vertical-align:baseline;box-sizing:border-box}body{font-family:'Roboto','Noto Sans KR','Malgun Gothic', dotum, sans-serif;letter-spacing:-0.05em;line-height:1;word-break:keep-all}a{text-decoration:none;color:inherit}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,hr{display:none}legend{height:0;font-size:0;line-height:0;overflow:hidden;text-indent:-20000px}address,cite,em{font-style:normal}button,label{cursor:pointer}button{border:0;font: inherit;background:0 0;display:inline-block;letter-spacing:-.04em}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:none;color:inherit}.skip{visibility:hidden;top:0;left:0}

/* browser_msg */
#max_browser_msg{width:100%;height:auto;background:#222;padding:15px;box-sizing:border-box;text-align:center;position:relative}#max_browser_msg p,#max_browser_msg mark{color:#fff;line-height:140%;font-size:12px;letter-spacing:0}#max_browser_msg mark{background:#f0bd41;color:#000;padding:0 5px}#max_browser_msg .bt_browser_upgrade{display:inline-block;font-size:12px;background:#fff;padding:5px 30px;margin:15px 0 0 0}#max_browser_msg .bt_close_browser{position:absolute;top:0;right:0;background:#fff;font-size:11px;padding:10px 10px}

/* form */
.max_it {display:block; height:auto; padding:10px 0; border-bottom:2px solid #000; font:inherit; letter-spacing:-0.04em; -webkit-appearance:none; -webkit-border-radius:0;}
.max_it:focus {border-bottom:2px solid #1dac6a;}
input[type="password"] {background:url("../image/common/ico_pass_hide.png") 96% center no-repeat;} 

/*¶óµð¿À¹öÆ° Ä¿½ºÅÒ*/
input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius: 100%; }
input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 6px; width: 9px; height: 9px; background: #006f76; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }


/* Ã¼Å©¹Ú½º */
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;color:#676e70; text-align:Center;   line-height: 22px; display: inline-table;vertical-align: middle;}
.chk_box input[type="checkbox"] + label:hover {color:#676e70}
.chk_box input[type="checkbox"] + label span {float:left;width:20px;height:20px;display:inline-block;margin-right:10px;text-align: center;background:#ddd url(../img/chk.png) no-repeat 50% 50%;}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #666;}
.write_div .chk_box input[type="checkbox"] + label, .write_div .chk_box input[type="checkbox"] + label {padding-left:30px; line-height:23px;}
.write_div .chk_box input[type="checkbox"] + label span, .write_div .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:20px;height:20px;display:block;margin:0;background:#ddd url(../img/chk.png) no-repeat 50% 50%;;}
.write_div .chk_box	input[type="checkbox"]:checked + label:before { background: #fff; border-color: #ccc; }
.write_div .chk_box	input[type="checkbox"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 0px; width: 20px; height: 20px; background: #666 url(../img/chk.png) no-repeat 50% 50%;  box-shadow:none; }

.chk_box	input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.chk_box	input[type="radio"] + label { display: inline-block;  margin-right:20px; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.chk_box	input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 24px; height: 24px; text-align: center; background: #ddd url(../img/chk.png) no-repeat 50% 50%;; border: 1px solid #ccc; border-radius: 100%; }
.chk_box	input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
.chk_box	input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
.chk_box	input[type="radio"]:checked + label:after { content: ''; position: absolute; top: -4px; left: 0px; width: 24px; height: 24px; background: #666 url(../img/chk.png) no-repeat 50% 50%;     border: 1px solid #666; border-radius: 100%; box-shadow:none; }
.max_tta {width:100%; height:auto; border-bottom:2px solid #d7d7d7; margin-top:16px; line-height:1.6;}
.max_tta:focus {border-bottom:2px solid #1dac6a;}

/* selectbox */
	.max_select {width:200px; height:42px; padding-left:10px; background:url("../image/common/ico_select.png") 93% 50% #fff no-repeat; background-size:8px; border:1px solid #d7d7d7; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing:border-box; letter-spacing:-1px; font-size:inherit;}
	.max_select::-ms-expand {display:none;}
	.max_select:focus {border-bottom:2px solid #1dac6a;}

/* icon */
	.max-ico {display:block; position:relative; /* overflow:hidden; */}
	.max-ico:before, .max-ico:after {content:''; display:block; position:absolute; box-sizing:border-box;}
	.ico-new {font-size: 15px; right: 8px;}

	.ico-sch {width:32px; height:32px;}
	.ico-sch:before {width:20px; height:20px; border:3px solid currentColor; border-radius:100%; top:4px; left:4px;}
	.ico-sch:after {width:3px; height:10px; background-color:currentColor; transform:rotate(-45deg); top:19px; left:22px;}

	.ico-file {width:32px; height:32px; background:url("../image/board/ico_file.svg") center no-repeat; background-size:20px; font-size:0;}

	.arr-btm-small {width:16px; height:16px;}
	.arr-btm-small:before {width:6px; height:6px; border:2px solid currentColor; border-right-width:0; border-top-width:0; transform:rotate(-45deg); bottom:6px; left:5px;}

	.ico-arrow {width:16px; height:16px;}
	.ico-arrow:before {width:8px; height:8px; border:1px solid currentColor; border-right-width:0; border-top-width:0; transform:rotate(-45deg); bottom:7px; left:4px;}

	.ico-more {width:32px; height:32px;}
	.ico-more:before {width:8px; height:8px; border:2px solid currentColor; border-left-width:0; border-top-width:0; transform:rotate(-45deg); top:12px; right:5px;}
	.ico-more:after {width:24px; height:2px; background-color:currentColor; top:15px; left:3px;}

	.ico-menu {width:32px; height:32px;}
	.ico-menu:before {width:30px; height:2px; background:currentColor; top:4px; left:4px; box-shadow:0 10px currentColor, 0 20px currentColor;}

	.ico-stop {width:24px; height:24px;}
	.ico-stop:before, .ico-stop:after {height:16px; width:4px; background:currentColor; top:4px; left:6px;}
	.ico-stop:after {left:14px;}

	.ico-play {width:24px; height:24px;}
	.ico-play:before  {height:22px; width:2px; background-color:currentColor; top:3px; left:12px;}
	.ico-play:after {width:16px; height:16px; border:2px solid currentColor; border-top-width:0; border-left-width:0; transform:rotate(-45deg); top:6px; left:8px;}
	.ico-play:after {left:5px;}

	.ico-plus {width:10px; height:10px;}
	.ico-plus:before, .ico-plus:after {width:10px; height:2px; background:currentColor; top:4px; left:0;}
	.ico-plus:after {width:2px; height:10px; top:0; left:4px;}

	.ico-close {width:32px; height:32px; font-size:0;}
	.ico-close:before, .i-close:after {width:26px; height:1px; background-color:currentColor; top:15px; left:3px; transform:rotate(-45deg);}
	.ico-close:after {transform:rotate(45deg);}

	.ico-blank {width:24px; height:24px;}
	.ico-blank:before, .i-blank:after {width:12px; height:12px; border:1px solid currentColor; background-color:#fff; top:4px; left:4px;}
	.ico-blank:after {top:8px; left:8px;}

	.ico-mouse {width:48px; height:48px;}
	.ico-mouse:before {width:26px; height:40px; border:2px solid currentColor; border-radius:50px; top:4px; left:11px;}
	.ico-mouse:after {width:4px; height:8px; background-color:currentColor; border-radius:50px; top:16px; left:22px;}
	
	.ico-arr-prev {width:24px; height:24px;}
	.ico-arr-prev:before {width:12px; height:12px; border:1px solid currentColor; border-bottom-width:0; border-right-width:0; transform:rotate(-45deg); top:6px; left:8px;}
	.ico-arr-next {width:24px; height:24px;}
	.ico-arr-next:before {width:12px; height:12px; border:1px solid currentColor; border-top-width:0; border-left-width:0; transform:rotate(-45deg); top:6px; left:8px;}

	.ico-minus {width:24px; height:24px;}
	.ico-minus:before, .ico-minus:after {width:20px; height:3px; background:#df062f; top:8px; left:0;}

	.i-down {width:16px; height:16px; border-bottom:2px solid currentColor;}
	.i-down:before {width:8px; height:8px; border:1px solid currentColor; border-width:0 2px 2px 0; bottom:3px; left:4px; transform:rotate(45deg);}
	.i-down:after {width:2px; height:10px; background-color:currentColor; top:0; left:7px;}

	.ico-close {width:48px; height:48px;}
	.ico-close:before, .ico-close:after {width:40px; height:2px; background:currentColor; top:23px; left:4px; transform:rotate(-45deg);}
	.ico-close:after {transform:rotate(45deg);}

	.ico-close.middle25 {width:25px; height:25px;}
	.ico-close.middle25:before, .ico-close.middle25:after {width:25px; height:2px; top:15px; left:8px;}

	.ico-close.small16 {width:16px; height:16px;}
	.ico-close.small16:before, .ico-close.small16:after {width:10px; height:2px; top:7px; left:3px;}

	.ico-arr-more {width:40px; height:30px;}
	.ico-arr-more:before {width:12px; height:12px; border:2px solid currentColor; border-left-width:0; border-top-width:0; border-bottom-width:0; transform:rotate(-45deg); top:7px; right:6px;}
	.ico-arr-more:after {width:35px; height:2px; background-color:currentColor; top:12px; left:0px;}
	.gg-arrow-top-right {box-sizing: border-box; position: relative; display: inline-block; width: 8px; height: 8px; border-top: 2px solid; transform: scale(var(--ggs,1)); border-right: 2px solid; margin:5px 10px;}
	.gg-arrow-top-right::after {content: ""; display: block; box-sizing: border-box; position: absolute; width: 14px; height: 2px; background: currentColor; transform: rotate(-45deg); top: 3px; right: -3px}

	.gg-menu-right-alt { box-sizing: border-box; position: relative; display: block; width: 24px; height: 14px; transform: scale(var(--ggs,1))}
	.gg-menu-right-alt::after,
	.gg-menu-right-alt::before {content: ""; position: absolute; box-sizing: border-box; display: block; height: 2px; border-radius: 4px; background: currentColor}
	.gg-menu-right-alt::before {width: 24px; box-shadow: 0 8px 0}
	.gg-menu-right-alt::after {width: 16px; right: 0; top: -7px} 

/* layout */
#max_wrap {position:relative; overflow: hidden;}
#max_header {position: absolute; width:100%; height:120px; display:flex;justify-content: space-between;align-items: center; top: 0; left: 0; padding: 0 5%; z-index:60;}
#max_header .logo {width:160px; height:41px; display:inline-block;}
#max_header .logo a {display:block; width:100%; height:100%; background: url(../image/common/logo.png)no-repeat 50% 50%; text-indent: -99999px; font-size:0;}
.sub_header .logo a {background: url(../image/common/logo2.png)no-repeat 50% 50% !important;}
#max_container {width:100%; height:auto;}
#max_footer {width:100%; height:auto; background:#1e1e1e; padding:1.3em 0; margin:0 auto; position:relative; box-sizing:border-box; color:#989898;}

/***** menu *****/
#gnb_menu {position:relative;}
#gnb_menu > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_menu .gnb_wrap {margin:0 auto;position:relative; margin-left: -10rem;}
#gnb_menu .gnb_wrap:hover, 
#gnb_menu .gnb_wrap:focus, 
#gnb_menu .gnb_wrap:active{z-index:3}
#gnb_menu .gnb_wrap > ul {display:flex;}
#gnb_menu .gnb_wrap > ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_menu #gnb_1dul {font-size:2.1rem; padding:0; zoom:1}
#gnb_menu #gnb_1dul .gnb_1dli {position:relative;line-height:120px; padding:0 6rem;}
#gnb_menu #gnb_1dul .gnb_1dli a {position:relative; color:#fff; padding: 0;}
.sub_header #gnb_menu #gnb_1dul .gnb_1da {color: #000 !important;}
.sub_header .gnb_2dul .gnb_2dul_box .gnb_2da {color: #fff !important;}

#gnb_menu #gnb_1dul .gnb_1dli:hover > a {position:relative; -webkit-transition:background-color 2s ease-out; -moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out}
#gnb_menu #gnb_1dul .gnb_1dli:hover > a:after {position:absolute; left:50%; transform:translateX(-50%); bottom:1.5rem; 
width:8px; height:8px; border-radius:10px; background: var(--main-color1); content:'';}

#gnb_menu #gnb_1dul .gnb_1dli .bg {display:none;}
#gnb_menu #gnb_1dul .gnb_1da {display:block;  padding:0 15px; color:#080808; text-decoration:none}
.gnb_2dul {/*display:none;*/ position:absolute; top:120px ;min-width:120px; left: 50%; transform: translateX(-50%); width:100%;}
.gnb_2dul .gnb_2dul_box {visibility: hidden; max-height: 0; border-top:0; padding:2rem 0;  border-radius:10px; background:var(--main-color1); overflow:hidden; box-shadow: 0px 22px 22px 0px rgb(0,0,0,.5);}
.gnb_2dul .gnb_2dul_box .gnb_2da {display:block; font-size:1.7rem; padding:0 10px; line-height:40px; color:#fff; text-align:center; text-decoration:none; opacity:.7;  transition: color 0.6s ease;}
.gnb_2dul .gnb_2dul_box .gnb_2da:hover {color:#fff; opacity:1; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out}
#gnb_menu #gnb_1dul .gnb_1dli:hover .gnb_2dul .gnb_2dul_box { visibility: visible; max-height: 400px;
  -webkit-transition: max-height 0.5s ease; transition: max-height 0.5s ease;}

@media all and (max-width:1440px){
	#max_header {height:100px; padding: 0 2%;}
	#max_header .logo a {background-size:80% !important;}

	/***** menu *****/
	#gnb_menu #gnb_1dul {font-size:1.9rem;}
	#gnb_menu #gnb_1dul .gnb_1dli {line-height:100px; padding: 0 4rem;}
}
@media all and (max-width:1024px){
	#max_header {height:75px;}
	#max_header .logo {width:120px;}

	/***** menu *****/
	#gnb_menu {display:none;}
}
@media all and (max-width:768px){
	#max_header {height:70px;}
}


/***** fullmenu *****/
#fullmenu {visibility:hidden;position:fixed; top:0; right:-100%;  width:100%; height:100vh; overflow:hidden; z-index:1000; transition: all .8s ease; opacity:0;}
#fullmenu.open:before {position: absolute; bottom: -30%; left: 0; content:"MOOCHANG"; color:#181818; z-index: -1; font-size: 600px; font-weight: 900;}
#fullmenu.open {visibility:visible; opacity:1; right:0;}
#fullmenu h2 {font-size:0; text-indent:-99999px;}
#fullmenu .gnb_al_ul {height:100vh; display:flex;}
#fullmenu .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#fullmenu .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#fullmenu .gnb_al_li {width:25%; padding:22rem 5rem; text-align:center; box-sizing:border-box;}
#fullmenu .gnb_al_li .gnb_al_a {font-size:3.5rem; display:block; position:relative; margin-bottom:4rem; font-weight:600; color:var(--sub-color1);}
#fullmenu .gnb_al_li li {line-height:2em}
#fullmenu .gnb_al_li li a {color:var(--sub-color1); opacity:.6; font-size: 2.3rem; line-height: 1.6; padding: 1rem 0; display: block;}
#fullmenu .gnb_al_li li:hover a {opacity:1; color:var(--main-color1);}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.8);width:100%; height:100%; position:fixed;left:0;top:0;z-index:999}

/***** full menu button *****/
#fullmenu button {position:absolute; right: 5%;
    top: 4%; background:none; border:0; width:50px; height:50px;}
#fullmenu button .line{position:absolute;display:inline-block; width:40px; height:2px; background-color:#fff; border-radius:5px; 
-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#fullmenu button .line.line1{top:50%; left:50%; transform: translateY(-50%) translateX(-50%) rotate(-45deg);  }
#fullmenu button .line.line3{top:50%; left:50%; transform: translateY(-50%) translateX(-50%) rotate(-135deg);}

/***** È¿°ú *****/ 
#fullmenu .gnb_al_ul {background:url(../image/common/full_bg.jpg)no-repeat 50% 50%; background-size:cover;}
#fullmenu .gnb_al_li{ position:relative; height:100%;}
#fullmenu .gnb_al_li:before{position:absolute;  left:0; top:0px; width:1px; height:0; content:""; background-color:#fff; z-index:1; opacity:.1;}
#fullmenu .gnb_al_li:first-child:before{display:none}
#fullmenu .gnb_al_li:after{content:""; position:absolute; right:0; top:0px; width:100%; height:100%; background: #E52F42; -webkit-transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;	transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s ;}
#fullmenu .gnb_al_li  > *{ display:block; opacity:0;filter:Alpha(opacity=50); -webkit-transform:translateX(-5%);	transform:translateX(-50%);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s, opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s; }

#fullmenu.open{ opacity:1.0;filter:Alpha(opacity=100); visibility:visible; z-index:99999; 
	background-color:#111;	-webkit-transition:all 0.3s  0s; transition:all 0.3s 0s;}
#fullmenu.open .gnb_al_li:before{height:100%;}
#fullmenu.open .gnb_al_li:after {width:0;}
#fullmenu.open .gnb_al_li {transform: scaleX(1); transform-origin: right top; transition-property: transform;}

#fullmenu.open .gnb_al_li > *{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform:translateX(0);transform:translateX(0);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04);}

/***** fullmenu_btn *****/
#max_header .util_box {width:34px;}
#max_header .gnb_menu_btn {background: 0; border:0;} 
#max_header .gnb_menu_btn div{position: relative;width: 34px;height: 24px;   margin: 0 auto; display: block; cursor: pointer;}

@keyframes allRotate {
0%{transform:rotate(0deg);}
40%{transform:rotate(0deg);}
100%{transform:rotate(90deg);}
}

@keyframes allBtn1 {
0%{transform:translate3d(0,0,0);}
40%{transform:translate3d(0,0,0);}
100%{transform:translate3d(17.5px,17.5px,0);}
}
@keyframes allBtn2 {
0%{transform:translate3d(0,0,0);}
40%{transform:translate3d(0,0,0);}
100%{transform:translate3d(-17.5px,17.5px,0);}
}
@keyframes allBtn3 {
0%{transform:translate3d(0,0,0);}
40%{transform:translate3d(0,0,0);}
100%{transform:translate3d(17.5px,-17.5px,0);}
}
@keyframes allBtn4 {
0%{transform:translate3d(0,0,0);}
40%{transform:translate3d(0,0,0);}
100%{transform:translate3d(-17.5px,-17.5px,0);}
}

@media all and (max-width:1440px){
	/***** fullmenu *****/
	#fullmenu .gnb_al_li {padding:25rem 3rem;}
	#fullmenu .gnb_al_li .gnb_al_a {font-size:2.8rem;}
	#fullmenu .gnb_al_li li a {font-size: 2rem}
}
@media all and (max-width:1024px){
	/***** menu *****/
	#gnb_menu {display:none;}
	#max_header .gnb_menu_btn div {width:24px; height:24px;}
	#max_header .gnb_menu_btn div span {width:6px; height:6px;}
	#fullmenu .gnb_al_li {width:100%;}

	/***** fullmenu *****/
	#fullmenu .gnb_al_ul {flex-direction:column; align-items: center; justify-content: center;}
	#fullmenu .gnb_al_li {padding:2rem 3rem; height:auto; margin-bottom:2rem;}
	#fullmenu .gnb_al_li .gnb_al_a {font-size:2rem; margin-bottom:2rem;}
	#fullmenu .gnb_al_li li a {font-size: 1.6rem}
	#fullmenu.open .gnb_al_li > ul {display:none;}

	/***** È¿°ú *****/ 
	#fullmenu .gnb_al_li:before{display:none; display:none;}
	#fullmenu .gnb_al_li:after{transition:none; display:none;}
	#fullmenu .gnb_al_li  > *{transition:none;}

	#fullmenu.open{transition:none;}
	#fullmenu.open .gnb_al_li:before{display:none;}
	#fullmenu.open .gnb_al_li > *{}
	#fullmenu.open .gnb_al_li:after {display:none;}
	#fullmenu.open .gnb_al_li {transition:none; padding:0;}
}
@media all and (max-width:768px){
	#fullmenu.open .gnb_al_li > ul {margin-bottom:1rem;}
	#fullmenu .gnb_al_li li a {padding:0.5rem 0; font-size: 1.4rem}
}


/* footer */
#max_footer .inner {position: relative; width:100%; max-width:1400px; height:auto; margin:1.5em auto 1.5em;}
#max_footer .ft_wp {display:inline-block; vertical-align: top; padding-top: 23px;}
#max_footer .add_wp {letter-spacing: -.5px;}
#max_footer address {padding:10px 0 10px; line-height:160%; font-weight:300;} 
#max_footer address .line {content:''; display:inline-block; width:1px; height:12px; margin:0 15px; background:#fff; opacity:.2;}
#max_footer cite {font-size:1.4rem; color:#fff; display: block; opacity:.2; letter-spacing:0; font-weight:300;} 

/* quick */
#bt_top {position:fixed; bottom:4%; right:2%; border:2px solid var(--main-color1); color:var(--main-color1); width:7rem; height:7rem; text-align: center; line-height:70px; z-index:10; border-radius:10rem; font-weight:700;}
#bt_top:hover {transition: all 200ms ease-in-out; background:var(--main-color1); color:var(--sub-color1);}
#bt_top:before {position: absolute; content:""; width:10px; height:22px; display: block; top:50%; left:50%; transform:translate(-50%, -50%);}
#bt_top:hover:before {transform:translate(-50%, -82%); -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}

@media screen and (max-width: 1440px) {
	#max_footer .inner {padding:0 5%;}
}
@media screen and (max-width: 1280px) {
	#max_footer .ft_wp {padding: 0;}
	#max_footer .ft_wp li:nth-child(2) {margin-left:20px;}
	#max_footer address {width:100%;}
	#max_footer .outside {display:none;}
	#max_footer address {padding:0;} 
	#max_footer address mark {display:inline-block; margin-top:0;}
}

@media screen and (max-width: 1200px) {
	/* header : full menu */
	.fullmenu .box {width:50%; height:100%; top:0; left:50%; margin-right:0; transform:translate(0%, 0%);}
	.fullmenu .box .m_tt {padding-left:0;}
	.fullmenu .box .full_lnb > li {float:none; width:100%; min-height:100%;}
	.fullmenu .box .full_lnb > li > .sub_menu {}
	.fullmenu .box .full_lnb > li:last-child > .sub_menu li {float:none; width:100%;}
	.fullmenu .box .bt_sitemap_close {width:48px; height:48px; padding:10px;}
	.fullmenu .box .bt_sitemap_close > i {top:0; position:absolute; left:0;}
	#max_footer .add_wp {font-size:1.3rem;}
	#max_footer address {line-height:140%;}
	#max_footer cite {font-size:1.2rem; margin-top:1rem;} 
}
@media screen and (max-width: 986px) {
	#max_footer .add_wp {display:block; padding-left: 0; padding-top: 1rem;}
}
@media screen and (max-width: 805px) {
	.fullmenu .box {width:80%; left:20%;}
	.fullmenu .box .m_tt {font-size:1.3em;}
}

@media screen and (max-width: 768px) {
	#max_footer {font-size:1.3rem;}
	#max_footer .footer_wp .f_menu_wp .f_menu li {padding-bottom:10px;}
	#max_footer .ft_wp {padding-top:0;}
	#max_footer .ft_wp img {max-width:80%;}
}

@media screen and (max-width: 568px) {
	/* header : full menu */
	.fullmenu .box .full_lnb > li > .sub_menu li a {font-size:0.9em;}
	#max_footer {font-size:13px !important;}
	#max_footer .ft_wp img {max-width:65%;}
	#bt_top {width:4.8rem; height:4.8rem; line-height:4.8rem;}
}

/* sub_visual */
#sub_visual .bg {width:100%; height:56rem; background-size: cover !important; background-repeat:no-repeat; background-position:50% 50%; position: relative; top: -38px; z-index: -1;}
#sub_visual .bg div{display: block; width: 100%;  height: 100%; animation: circle 3s ease;}
#sub_visual .bg span{display: block; width:100%; height:100%; background-size: cover !important; background-repeat:no-repeat; background-position:50% 50%;}
#sub_visual .bg.bg0 span {background-image:url("../image/common/bg_vis1.jpg");}
#sub_visual .bg.bg1 span {background-image:url("../image/common/bg_vis2.jpg");}
#sub_visual .bg.bg2 span {background-image:url("../image/common/bg_vis3.jpg");}
#sub_visual .bg.bg3 span {background-image:url("../image/common/bg_vis6.jpg");}
#sub_visual .bg.bg4 span {background-image:url("../image/common/bg_vis5.jpg");}
/* .visual_etc .bg span {background-image:url("../image/common/bg_vis6.jpg") !important;} */

@keyframes circle {
	0% {clip-path: circle(4vmax at 33vw 50%);}
	100% {clip-path: circle(100vmax at 33vw 50%);}
}

.sub_title_area {position: relative; margin-top:64px;}
.sub_title_area .inner {width:140rem; margin: 0 auto;}
.sub_title_area p {font-weight:500; margin-bottom:30px;}
.sub_title_area h2 {position: relative; font-weight:bold;}

.snb_warp {font-size:2rem; padding:20rem 0 0;}
.snb_warp .inner {width:140rem; margin: 0 auto;}
.snb_warp .depth_two ul {display:flex; position: relative;}
.snb_warp .depth_two ul li {margin-right: 4rem;}
.snb_warp .depth_two ul li a {position: relative; color:#777; font-weight:300;}
.snb_warp .depth_two ul li a:hover,
.snb_warp .depth_two ul li a.current {color:var(--main-color1); font-weight:600;}
.snb_warp .depth_two ul li a:hover:before,
.snb_warp .depth_two ul li a.current:before {position: absolute; top:-40%; left:50%; transform:translate(-50%, -50%); content:""; width:5px; height:5px; border-radius:50px; background:var(--main-color1); text-align:center;}

@media screen and (max-width: 1550px) {
	.snb_warp {width:100%;}
	.snb_warp .inner {width:100%; padding:0 5%;}
	.sub_title_area .inner {width:100%; padding:0 5%;}
}
@media screen and (max-width: 1440px) {
	.snb_warp .inner {padding:0 3%;}
	.sub_title_area .inner {padding:0 3%;}
}

@media screen and (max-width: 1024px) {
	.snb_warp {font-size:1.8rem; padding: 10rem 0 0;}
	.sub_title_area {margin-top: 3rem;}
	.sub_title_area p {margin-bottom:2rem;}
	#sub_visual .bg {height: 26rem;}
}

@media screen and (max-width: 768px) {
	.snb_warp {font-size:1.5rem;} 
	.snb_warp .depth_two {overflow-y: scroll;}
	.snb_warp .depth_two ul li {margin-right:2rem;}
	.snb_warp .depth_two ul li a:hover:before, .snb_warp .depth_two ul li a.current:before {display: none;}
	.sub_title_area p {margin-bottom:1rem;}
	#sub_visual .bg {height: 15rem; top: -18px;}
}

/*bg_zoomin*/
.bg_zoomin {
  -webkit-animation: zoom-a 15s linear infinite alternate; /* Safari 4+ */
  -moz-animation:    zoom-a 15s linear infinite alternate; /* Fx 5+ */
  -o-animation:      zoom-a 15s linear infinite alternate; /* Opera 12+ */
  -ms-animation:      zoom-a 15s linear infinite alternate; /* Opera 12+ */
  animation:         zoom-a 15s linear infinite alternate; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes zoom-a {
	0% { background-size: 120% auto; }
	100% { background-size: 140% auto; }
}
@-moz-keyframes zoom-a {
	0% { background-size: 120% auto; }
	100% { background-size: 140% auto; }
}
@-o-keyframes zoom-a {
	0% { background-size: 120% auto; }
	100% { background-size: 140% auto; }
}
@-ms-keyframes zoom-a {
	0% { background-size: 120% auto; }
	100% { background-size: 140% auto; }
}
@keyframes zoom-a {
	0% { background-size: 120% auto; }
	100% { background-size: 140% auto; }
}

/* margin */
.mgt10 {margin-top:10px;}   .mgt20 {margin-top:30px;}   .mgt30 {margin-top:30px;}   .mgt40 {margin-top:40px;}   .mgt50 {margin-top:50px;}
.mgt60 {margin-top:60px;}   .mgt70 {margin-top:70px;}   .mgt80 {margin-top:80px;}   .mgt90 {margin-top:90px;}   .mgt100 {margin-top:100px;}
.mgt110 {margin-top:110px;} .mgt120 {margin-top:120px;} .mgt130 {margin-top:130px;} .mgt140 {margin-top:140px;}  .mgt150 {margin-top:150px;}

.mgb10 {margin-bottom:10px;}   .mgb20 {margin-bottom:30px;}   .mgb30 {margin-bottom:30px;}   .mgb40 {margin-bottom:40px;}   .mgb50 {margin-bottom:50px;}
.mgb60 {margin-bottom:60px;}   .mgb70 {margin-bottom:70px;}   .mgb80 {margin-bottom:80px;}   .mgb90 {margin-bottom:90px;}   .mgb100 {margin-bottom:100px;}
.mgb110 {margin-bottom:110px;} .mgb120 {margin-bottom:120px;} .mgb130 {margin-bottom:130px;} .mgb140 {margin-bottom:140px;}  .mgb150 {margin-bottom:150px;}

/* font */
.f18 {font-size:1.8rem;}
.f20 {font-size:2rem;}
.f22 {font-size:2.2rem;}
.f24 {font-size:2.4rem;}
.f26 {font-size:2.6rem;}
.f30 {font-size:3rem;}
.f36 {font-size:3.6rem;}
.f40 {font-size:4rem;}
.f50 {font-size:5rem;}
.f56 {font-size:5.6rem;}
.f60 {font-size:6rem;}
.f75 {font-size:7.5rem;}
.f130 {font-size:13rem;}

@media screen and (max-width: 1470px) {
	.f30 {font-size:2.5rem;}
	.f60 {font-size:4.5rem;}
	.f75 {font-size:5rem;}
} 
@media screen and (max-width: 1024px) {
	.f18 {font-size:1.5rem;}
	.f20 {font-size:1.6rem;}
	.f22 {font-size:1.8rem;}
	.f24 {font-size:2rem;}
	.f26 {font-size:2rem;}
	.f30 {font-size:2rem;}
	.f36 {font-size:2.2rem;} 
	.f40 {font-size:2.6rem;}
	.f50 {font-size:2.8rem;}
	.f56 {font-size:3rem;}
	.f60 {font-size:3.3rem;}
	.f75 {font-size:3.5rem;} 
	.f130 {font-size:8rem;}
} 
@media screen and (max-width: 768px) {
	.f20 {font-size:1.5rem;}
	.f22 {font-size:1.6rem !important;}
	.f24 {font-size:1.6rem !important;}
	.f26 {font-size:1.5rem !important;}
	.f30 {font-size:1.6rem !important;}
	.f36 {font-size:2.8rem !important;} 
	.f40 {font-size:1.8rem !important;}
	.f60 {font-size:2.1rem !important;}
	.f75 {font-size:2.1rem !important;} 
	.f130 {font-size:5rem !important;}
} 

/* flex */
.flex_vs1 {display:flex; justify-content: space-between;}
.flex_vs2 {display:flex; flex-direction: column;}

@media screen and (max-width: 768px) {
	.flex_vs1 {flex-direction: column;}
} 