.wrap{background:#fff;}

/* header */
header{position:fixed; top:0; left:0; width:100%; box-shadow:  0 1px 4px -3px rgba(255,255,255,0.5); z-index: 5; background-color: rgba(255,255,255,0); transition:all 0.3s;}
header > div{max-width:1660px; margin:0 auto; display:flex; justify-content: space-between; align-items: center; height:7rem; padding:0 30px; transition: height 0.3s;}
header .mainLogo{width:15rem; height: 100%;}
header .mainLogo a{display:block; height: 100%; background:url(../images/logo.png) no-repeat 100% center / contain;}

header.on{background-color: rgba(255,255,255,1); transition:all 0.3s; box-shadow: 0 1px 4px -3px rgba(0,0,0,0.5);}
header.on > div{height:6rem; transition: height 0.3s;}
header.on nav > ul > li > a{color:var(--blackColor) !important;}
header.on nav > ul > li > a:hover{color:var(--blackColor);}
header.on .mainLogo a{background:url(../images/logo_b.png) no-repeat 100% center / contain;}

header nav > ul{display:flex;}
header nav > ul > li > a{font-size:1.7rem; font-weight:600; position:relative; color:#fff !important;}
header nav > ul > li > a:hover{color:#fff;}
header nav > ul > li + li{margin-left:3rem;}

header nav > ul > li > a:after{content:''; background:var(--mainColor); display:inline-block; height:3px; width:100%; position:absolute; bottom:-5px; left:50%; transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%; transition:transform 0.3s;}
header nav > ul > li > a:hover::after{transform: translateX(-50%) scaleX(1);}

header nav > .moNavBtn{position:relative; display:none;}
header nav > .moNavBtn:after{content: "\e959"; display:inline-block; font-family: "xeicon"; color:#fff; font-size:30px;}
header.on nav > .moNavBtn:after{color:var(--blackColor) !important;}

header nav > .moNavClose{position:relative; display:none;}
header nav > .moNavClose:after{content: "\e921"; display:inline-block; font-family: "xeicon"; font-size:30px;}

.moNav{background:#fff; position:absolute; left:0px; width:100%; top:6rem; display:none; box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.5);}
.moNav > ul > li > a{font-size:1.7rem; font-weight:600; padding:10px 30px; text-align: center; display:inline-block; width:100%;}
.moNav > ul > li + li{border-top:1px solid #ccc;}

/* main */
main > section + section{margin-top:10rem;}
main > section > .conArea{padding:80px 30px 20px 30px; max-width:1660px; margin:0 auto; overflow: hidden;}
main > section > .conArea .tit{text-align: center; font-size:4rem; letter-spacing: 5px; font-weight: 700; margin-bottom:60px; position:relative; margin-top:30px;}
main > section > .conArea .tit::after{content:''; display:inline-block; height:4px; background:var(--mainColor); position:absolute; width:100px; left:50%; top:-10px; transform: translateX(-50%);}

/* footer */
footer{background:#000; text-align:center; color:#fff; padding:30px;}
footer > img{width:100px;}
footer > .copy{letter-spacing: 2.5px; color:rgba(255,255,255,0.7); font-size:12px;}
footer .iconList{margin:20px 0; display:flex; justify-content: center;}

footer .iconList > a{font-size:0px; display:inline-block; width:40px; height:40px; border:1px solid #fff; border-radius: 10px; display:flex; align-items: center; justify-content: center;}
footer .iconList > a > div:after{font-family: 'xeicon'; display:inline-block; color:#fff; font-size:2rem; }
footer .iconList > a > div.twitter:after{content: "\ec1f";}
footer .iconList > a > div.telegram:after{content: "\ec19";}
footer .iconList > a:hover{background:var(--mainColor); border:0px;}
footer .iconList > a + a{margin-left:15px;}

footer .iconList > a > div.medium{width:2rem; height:2rem; background:url(../images/medium-icon.png) no-repeat center / cover;}