@charset "utf-8"; /* CSS Document */ body{ font-size:16px} .box1{ width:1200px; margin:0 auto; max-width:100%} .PC{ display:block !important} .PHONE{ display:none !important} .show{ display:none} #header{ position:relative; z-index:1000; background:#fff} #header:before{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#ddd} #header .home_wrap{ background:#f7f7f7; border-bottom:1px solid #eee; position:relative; z-index:auto} #header .home_wrap.zi, #header .home_wrap:hover{ z-index:1001} #header .home_wrap .va_wrap{ height:2.25em} #header .home_wrap .banner_wrap{ float:left} #header .home_wrap .banner_wrap .banner{ position:relative; padding-left:2em} #header .home_wrap .banner_wrap .banner .img{ position:absolute; left:0; top:0; width:2em; height:100%; background:url(../images/inc/medal.png) no-repeat; background-size:auto 100%} #header .home_wrap .banner_wrap .banner .tt{ font-size:.813em; color:#555} #header .home_wrap .banner_wrap .banner .tt .point{ color:#0072c6; font-weight:500} #header .home_wrap .etc_wrap{ float:right} #header .home_wrap .etc_wrap .mem_list{ float:left; margin-right:1em} #header .home_wrap .etc_wrap .mem_list > li > a{ color:#555; padding:0 1em} #header .home_wrap .etc_wrap .mem_list > li > a .va{ font-size:.813em;} #header .home_wrap .etc_wrap .mem_list > li > a:hover{ color:#111} #header .home_wrap .etc_wrap .mem_list > li > a:hover .va{ text-decoration:underline} #header .home_wrap .etc_wrap .mem_list > li.c1 > a{ background: #0099CC;color:#FFFFFF;} #header .home_wrap .etc_wrap .sns_list{ float:left; position:relative} #header .home_wrap .etc_wrap .sns_list > li{ position:relative} #header .home_wrap .etc_wrap .sns_list > li > a{ color:#555; padding:0 1em; border-left:1px solid #eee; background:#fff} #header .home_wrap .etc_wrap .sns_list > li > a .va{ font-size:.813em;} #header .home_wrap .etc_wrap .sns_list > li > a .va .icon{ font-size:1.75em} #header .home_wrap .etc_wrap .sns_list > li > a .va .arrow{ font-size:1.125em; padding-left:.5em} #header .home_wrap .etc_wrap .sns_list > li.yt > a{ background:#00aeff; color:#fff; border-left-color:transparent} #header .home_wrap .etc_wrap .sns_list > li.yt.st1 > a{ background:#d34c46; color:#fff} #header .home_wrap .etc_wrap .sns_list > li.yt.st1 > a .va .arrow{ padding-left:1em} #header .home_wrap .etc_wrap .sns_list > li.yt.st1:hover > a{ } .teacher_sns_list{ position:absolute; left:0; width:100%; padding:.5em 0; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.2); visibility:hidden; opacity:0; background:#333} .teacher_sns_list > li > a{ display:block; height:auto; padding:.5em 3em .5em 1em; position:relative; color:#fff} .teacher_sns_list > li > a .tt{ font-size:.813em} .teacher_sns_list > li > a .tt:before{ content:" - "} .teacher_sns_list > li > a .arrow{ position:absolute; right:1em; top:.5em; font-size:1em} .teacher_sns_list > li > a .arrow:before{ font-size:.875em} .teacher_sns_list > li > a:hover{ color:#FFCC00} li:hover .teacher_sns_list{ visibility:visible; opacity:1} #header .home_wrap .etc_wrap .my_list{ float:left} #header .my_list > li > a{ padding:0 1em; color:#fff; min-width:6em} #header .my_list > li > a .va{ font-size:.813em} #header .my_list > li > a .tt{ padding:0 .25em} #header .my_list > li.c1 > a{ background:#f5b300;color:#111;} #header .my_list > li.c2 > a{ background: #339966} #header .top_wrap{ position:relative; z-index:1000} #header .top_wrap .flex{ position:relative; display:flex} #header .top_wrap .va_wrap{ height:4.625em} #header .top_wrap .logo{ float:left; flex:none} #header .top_wrap .search{ float:left; flex:none; flex:1 1 auto; margin-left:3em} #header .top_wrap .search .va_wrap{ height:3em} #header .top_wrap .search .searchBtn{ display:none} #header .top_wrap .search .in{ position:relative; border:2px solid #111; width:100%; padding:0 5em 0 1em; box-sizing:border-box} #header .top_wrap .search .in .inp{ border:none; background:none; height:3em; font-size:1em; width:100%} #header .top_wrap .search .in .btn{ position:absolute; right:0; top:0; width:4em; height:100%; border:none; background:none} #header .top_wrap .search .in .btn .xi{ font-size:1.625em} #header .top_wrap .cate_wrap{ border-top:1px solid #dddddd} #header .top_wrap .cate_wrap .flex{ display:flex; flex-wrap:wrap; flex:auto;} #header .top_wrap .cate_wrap .va_wrap{ height:3.5em} #header .top_wrap .cate_wrap{ width:100%} #header .top_wrap .cate_wrap .all_wrap{ float:left; flex:none} #header .top_wrap .cate_wrap .all_wrap .allBtn{ font-weight:700; color:#003399; padding-right:1em; position:relative; padding-left:1.5em} #header .top_wrap .cate_wrap .all_wrap .allBtn:after{content:"\e903"; font-family:xeicon!important; position:absolute; left:0; top:50%; margin-top:-.625em; font-size:1.5em} #header .top_wrap .cate_wrap .all_wrap .allBtn .va{ font-size:1.438em; letter-spacing:-2px} #header .top_wrap .cate_wrap .all_wrap .all{ position:fixed; width:100%; height:100%; background:#333; left:0; top:0; z-index:1; transform:scale(0,0); visibility:hidden} .openTop{ display:block; margin:.5em auto; text-align:center} .openTop .closeBtn{ position: fixed; right:3em; top:1em} .openTop .closeBtn .xi{ font-size:3em; color:#fff} .openTop .closeBtn .xi:before{ content:"\e9af"} #header .top_wrap .cate_wrap .all_wrap .all .gnb{ border-top:1px solid rgba(255,255,255,.2); opacity:0} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li{ position:relative; display:block; border-bottom:1px solid rgba(255,255,255,.2); padding:1em 0 1em 12em; min-height:2em} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp1{ color:#fff; position:absolute; left:0; width:11em; top:0; height:100%} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp1 .va{ font-weight:700; font-size:1.313em; letter-spacing:-2px} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li:hover{ background:#6c6f7d} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li{ width:33.33%} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a{ text-align:left; padding:.5em .25em; color:#fff; height:auto; position:relative} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va{ font-size:.875em} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va .tit{ opacity:.6; display:block; margin-bottom:.25em} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va .lecture_icon{ margin-left:-.5em} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a .va:before{ content:"- "; position:absolute; left:0; top:.5em} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li:nth-child(3n+1){ clear:both} #header .top_wrap .cate_wrap .all_wrap .all .gnb > li .dp2 > li > a:hover .va .tit{ opacity:1; text-decoration:underline} #header .top_wrap .cate_wrap .all_wrap.on .all{ visibility:visible; transform:scale(1,1); transition:.3s;} #header .top_wrap .cate_wrap .all_wrap.on .all .gnb{ opacity:1; transition-delay:.3s} #header .top_wrap .cate_wrap > .box1{ position:relative} #header .top_wrap .cate_wrap .gnb_wrap{ float:left; flex:auto} #header .top_wrap .cate_wrap .gnb_wrap .gnb{ display:flex} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li{ flex:1 1 auto} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp1{ font-weight:700; color:#333} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li:hover > .dp1, #header .top_wrap .cate_wrap .gnb_wrap .gnb > li.on > .dp1{ color: #0099CC} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp1 .va{ font-size:1.438em; font-weight:700} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2{ position:absolute; left:0; width:1150px; padding:2em 25px; background:#f5f5f5; visibility:hidden; min-height:10em; border:1px solid rgba(0,0,0,.1)} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li{ width:25%} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a{ text-align:left; height:auto; padding:.5em .25em; position:relative; padding-right:3em} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a:after{content:"\e940"; font-family:xeicon!important; position:absolute; right:0; top:.5em; width:3em; text-align:center; color:#000099; display:none} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a .va{ font-size:.875em; font-weight:500} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a .va .tit{ margin-bottom:.125em} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a .va .tit:before{ content:"- "} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li:nth-child(4n+1){ clear:both} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a:hover{ color:#000099} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a:hover .tit{ text-decoration:underline} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 > li > a:hover:after{ display:block} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li:hover > .dp2{ visibility:visible} #header .top_wrap .cate_wrap .gnb_wrap .gnb > li > .dp2 .tit{ display:block} #header .top_wrap .my_wrap{ display:none} .lecture_icon{ display:inline-block; *display:inline; zoom:1; padding-left:.313em; margin-top:.125em} .lecture_icon .icon{ float:left; line-height:1.25em; border-radius:1.25em; width:4.5em; text-align:center; color:#fff; margin-right:.125em; border:1px solid rgba(255,255,255,.1)} .lecture_icon .icon:nth-child(n+4){ display:none} #header .gnb_wrap .lecture_icon{ max-width:14.5em} #header .gnb_wrap .lecture_icon .icon{ margin-bottom:.125em} .lecture_icon .icon .tt{ font-size:.813em} .lecture_icon .icon.c1{ background: #ff223c} .lecture_icon .icon.c2{ background: #81af50} .lecture_icon .icon.c3{ background: #ff7e00} .lecture_icon .icon.c4{ background: #1a9c7f} .lecture_icon .icon.c5{ background: #14a8d3} .lecture_icon .icon.c6{ background: #3c61ff} .lecture_icon .icon.c7{ background: #88b500} .lecture_icon .icon.c8{ background: #e04772} .lecture_icon .icon.c9{ background: #fa4e1f} .headerT{ padding-top:7.87em !important} #footer{ } #footer .customer_wrap{ padding:3em 0 4em 0; background:url(../images/inc/cs_bg.jpg) no-repeat; background-size:cover} #footer .customer_wrap .wrap1{ float:left; width:70%} #footer .customer_wrap .wrap2{ float:right; width:25%} #footer .customer_wrap .wrap_tit .t1{ font-weight:500; color:#111; font-size:1.875em} #footer .customer_wrap .wrap_tit .t2{ font-size:.938em; color:#333; margin-top:1em} #footer .customer_wrap .link{ margin:.5em 0 0 -1em; padding-right:2em} #footer .customer_wrap .link > li{ width:20%} #footer .customer_wrap .link > li > a{ position:relative; margin:1em 0 0 1em} #footer .customer_wrap .link > li > a .resize .bg{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:100%; opacity:.7} #footer .customer_wrap .link > li > a .resize .va_wrap{ z-index:1; color:#fff} #footer .customer_wrap .link > li > a .resize .va_wrap .xi{ font-size:3em; transition:.3s} #footer .customer_wrap .link > li > a .tt{ display:block; text-align:center; margin-top:.75em; font-size:.938em; color:#666; font-weight:500} #footer .customer_wrap .link > li > a:hover .resize .va_wrap .xi{ transform:rotateY(180deg)} #footer .customer_wrap .link > li > a:hover .tt{ color:#111} #footer .customer_wrap .link > li.c1 > a .resize .bg{ background:#0b84ac} #footer .customer_wrap .link > li.c2 > a .resize .bg{ background:#e9aa00} #footer .customer_wrap .link > li.c3 > a .resize .bg{ background:#3d3dd7} #footer .customer_wrap .link > li.c4 > a .resize .bg{ background:#e63f0c} #footer .customer_wrap .link > li.c5 > a .resize .bg{ background:#05897e} .csStyle .cs_info{ margin-bottom:.75em; padding-bottom:.75em; border-bottom:1px dashed rgba(0,0,0,.3); padding-left:3em; min-height:2.5em; position:relative} .csStyle .cs_info .cs_tit{ font-weight:500; color:#111; font-size:.938em} .csStyle .cs_info .cs_tit.s1{ font-size:.875em} .csStyle .cs_info .cs_icon{ position:absolute; left:0; top:0; font-size:1em; width:2.5em; height:2.5em; line-height:2.5em; border-radius:100%; text-align:center; background:#4088d0; color:#fff} .csStyle .cs_info .cs_icon.c1{ background:#555} .csStyle .cs_info .cs_icon.c2{ background: #CC3333} .csStyle .cs_info .cs_icon:before{ font-size:1.25em} .csStyle .cs_info .cs_no{ font-family:tahoma,sans-serif; font-weight:bold; font-size:1.438em; margin-right:.25em; line-height:1.1; display:inline-block} .csStyle .cs_info .cs_no.s1{ font-size:1.313em; display:inline-block} .csStyle .cs_info .cs_tt{ font-size:.813em; color:#666} .csStyle .cs_memo{ background: #244195; padding:.313em 0; margin:-.75em 0 1.5em 0; border-radius:0 0 3em 3em; text-align:center; color:#fff} .csStyle .cs_memo .tt{ font-size:.875em} .dp1_customer .csStyle .cs_info{ border-bottom-color:rgba(255,255,255,.3)} .dp1_customer .csStyle .cs_info .cs_tit{ color:#fff; font-size:.813em} .dp1_customer .csStyle .cs_info:last-child{ border-bottom:none; margin-bottom:0} .dp1_customer .csStyle .cs_info .cs_tt{ color:#fff} .dp1_customer .csStyle .cs_info .cs_no{ font-size:1.25em} .dp1_customer .csStyle .cs_info .cs_no.s1{ font-size:1.25em} .dp1_customer .csStyle .cs_memo{ position:absolute; top:-1.5em; right:1em; padding:.5em 1em; border-radius:3em; box-sizing:border-box; margin:0} .dp1_customer .csStyle .cs_memo .tt{ word-break:break-all} #footer .customer_wrap .partner_wrap_all{ position:relative; margin-top:3em; padding-left:4em} #footer .customer_wrap .partner_wrap_all .all_btn{ position:absolute; left:0; top:0; width:3.5em; height:100%; border:1px solid #ddd; background:#fff; box-sizing:border-box; text-align:center; color:#777} #footer .customer_wrap .partner_wrap_all .all_btn .xi{ display:block} #footer .customer_wrap .partner_wrap_all .all_btn .tt{ font-size:.813em} #footer .customer_wrap .partner_wrap_all .all_btn:hover{ border-color:#aaa; color:#333} #footer .customer_wrap .partner_wrap{ position:relative; padding:0 2.5em} #footer .customer_wrap .partnerSlide .swiper-wrapper{ padding:1px 0 0 1px} #footer .customer_wrap .partnerSlide .el img{ max-width:90%} .site_st{ background-color:#fff; border:1px solid #ddd; margin:-1px 0 0 -1px; position:relative} .site_st:hover{ border-color:#333; z-index:1} .site_list > li{ width:25%} .site_list > li img{ max-width:90%} #footer .menu_wrap{ background:#2c2f39; border-bottom:1px solid rgba(255,255,255,.1)} #footer .menu_wrap .va_wrap{ height:3.125em} #footer .menu_wrap .menu{ float:left} #footer .menu_wrap .menu > li > a{ padding:0 1em; color:#fff} #footer .menu_wrap .menu > li > a .va{ font-size:.813em} #footer .menu_wrap .menu > li > a:hover .va{ text-decoration:underline} #footer .menu_wrap .etc{ float:right} #footer .menu_wrap .gotop{ float:left; display:block; width:3.75em; background:rgba(0,0,0,.3); color:#fff; transition:.3s} #footer .menu_wrap .gotop .xi{ display:block; line-height:1} #footer .menu_wrap .gotop .tt{ font-size:.688em} #footer .menu_wrap .gotop:hover{ background:#000;} #footer .info_wrap{ padding:2em 0 3em 0; background:#2c2f39; color:#fff} #footer .info_wrap .logo{ float:left; width:15%} #footer .info_wrap .logo img{ width:60%} #footer .info_wrap .info{ float:left; width:53%} #footer .info_wrap .etc{ float:right; width:25%} #footer .info_wrap .info > li{ font-size:.813em; line-height:1.5; opacity:.7; letter-spacing:0; margin-right:1.5em} #footer .info_wrap .info > li.br{ clear:both} #footer .info_wrap .info > li.copyright{ float:none; clear:both; padding-top:1em; font-size:.75em; opacity:.3} #footer .info_wrap .etc > dl{ border-left:1px solid rgba(255,255,255,.1); padding:.5em 0 .5em 2em; font-size:.75em} #footer .info_wrap .etc > dl > dt{ opacity:.6; margin-bottom:.75em} #footer .info_wrap .etc > dl > dd{ opacity:.4} #quick{ position:fixed; left:-8em; width:8em; top:0; z-index:1001; height:100%; background:#244195} #quick .wrap_in{ position:absolute; left:0; top:0; width:100%; height:100%} .load #quick{ transition:.3s} #quick:after{ content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#0d2058} #quick .quickBtn{ position:absolute; width:2em; line-height:4em; right:-2em; top:50%; margin-top:-2em; background:#0d2058; border:1px solid rgba(255,255,255,.1); border-left:none; text-align:center; color:#fff; transition:.3s} #quick .quickBtn .xi:before{content:"\e93e"} #quick .toplink{ display:block; height:2.25em; background:#eb1c1c; color:#fff; text-align:center} #quick .toplink .tt{ font-size:.75em; padding:0 .25em} #quick .toplink:hover{ background:#cd0606} #quick .toplink.c1{ background:#0099CC; font-size:1.125em} #quick .toplink.c1:hover{ background:#00749a} #quick .mem_wrap .tit{ background:#0d2058; height:4.5em; color:#ffc000} #quick .mem_wrap .tit .xi{ font-size:1.75em; display:block} #quick .mem_wrap .tit .tt{ font-size:.75em; font-weight:500} #quick .mem_wrap .tit2{ background:#0099CC; height:3em; color:#fff} #quick .mem_wrap .tit2 .va{ color:#fff} #quick .mem_wrap .form .inp{ display:block; width:100%; border:none; border-bottom:1px solid #ddd; padding:.75em 1em; box-sizing:border-box; font-size:.75em} #quick .mem_wrap .form .inp.btn{ text-align:center; background:#ffc000; color:#1c294f; font-size:.875em; font-weight:500; border-bottom:none} #quick .mem_wrap .link{ padding:1em .75em; background:#fff} #quick .mem_wrap .link > li > a{ display:block; font-size:.75em; color:#888; margin-top:.5em} #quick .mem_wrap .link > li:first-child > a{ margin-top:0} #quick .mem_wrap .link > li > a:hover{ color:#111} #quick .mem_wrap .info{ background:#fff; padding:1em .5em} #quick .mem_wrap .info > li > a{ display:block; border:1px solid #ddd; padding:.125em .5em; border-radius:3px; background:#fff; margin-top:.25em} #quick .mem_wrap .info > li:first-child > a{ margin-top:0} #quick .mem_wrap .info > li.c1 > a{ color: #339999} #quick .mem_wrap .info > li.c2 > a{ color: #CC3333} #quick .mem_wrap .info > li > a .t1{ font-size:.75em; font-weight:500; padding:0 .25em 0 .125em} #quick .mem_wrap .info > li > a .t2{ font-family:tahoma,sans-serif; font-weight:bold; color:#333; font-size:.875em} #quick .mem_wrap .info > li > a .xi{ font-size:1.125em; margin-top:.125em} #quick .mem_wrap .info > li > a:hover{ border-color:#ccc; background:#f5f5f5} #quick .menu > li{ position:relative} #quick .menu > li:hover{ z-index:1} #quick .menu > li > a{ display:block; border-bottom:1px solid rgba(255,255,255,.1); height:3.5em; padding:0 .5em; text-align:left; color:#fff; position:relative; padding-right:1.25em} #quick .menu > li > a:after{ content:"\e93f"; font-family:xeicon!important; width:1em; text-align:center; position:absolute; right:.25em; top:50%; margin-top:-.625em} #quick .menu > li > a .xi{ font-size:1em; width:1.25em} #quick .menu > li > a .tt{ font-size:.75em} #quick .menu > li > a:hover{ background:#16307d} #quick .menu > li.more > a:after{ transform:rotate(90deg)} #quick .menu > li.more:hover > a{ background:#b01711} #quick .menu > li .teacher_sns_list{ background:#111; box-shadow:0 3px 5px 3px rgba(0,0,0,.9)} #quick .menu > li .teacher_sns_list > li > a{ padding-left:.5em; padding-right:.75em} #quick .menu > li .teacher_sns_list > li > a .tt{ font-size:.75em} #quick .menu > li .teacher_sns_list > li > a .arrow{ right:.5em} #quick .info{ padding:1em .5em 1.5em .5em; background:rgba(0,0,0,.5); color:#fff} #quick .info .tit .t1{ font-size:.75em; font-family: Arial, Helvetica, sans-serif; font-weight:bold; letter-spacing:0} #quick .info .tit .t2{ font-size:.875em} #quick .info .con{ margin-top:.75em; padding-top:.75em; border-top:1px dotted #fff} #quick .info .con .t1{ display:inline-block; padding:.125em 1em; border-radius:3em; background:#0099FF; color:#fff; font-size:.688em} #quick .info .con .t2{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; line-height:1; font-size:1.125em; margin:.5em 0} #quick .info .con .t3{ font-size:.75em} .on#quick{ left:0} .on#quick .quickBtn{ margin-right:0} .on#quick .quickBtn .xi:before{content:"\e93b"} #quick.st1{ background:#4d566f} #quick.st1:after{ background:#262f4a} #quick.st1 .quickBtn{ background:#3d455e} #quick.st1 .bookmark{ background:#eb6a1c} #quick.st1 .bookmark:hover{ background:#dc5300} #quick.st1 .mem_wrap .tit{ background:#323644} #quick.st1 .menu > li > a:hover{ background:#3d455e} .lectureTop{ background:#09203f; background-image: linear-gradient(125deg, #222 0%, #555 25%, #333 50%, #555 75%, #222 100%); position:relative; z-index:999; text-align:center} .lectureTop:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff; opacity:.1} .lectureTop .lecture_tit{ text-align:center; border-bottom:1px solid rgba(0,0,0,.2); position:relative} .lectureTop .lecture_tit .tit{ height:3.625em; padding:0 10em; transition:.2s} .lectureTop .lecture_tit .va{ color:#fff; font-size:1.75em; font-family:tm,sans-serif; letter-spacing:1px; line-height:1; padding-top:.25em} .lectureTop .lecture_tit .link{ position:absolute; top:50%; margin-top:-1.25em; opacity:0; transition:.3s} .lectureTop .lecture_tit .link.left{ left:0} .lectureTop .lecture_tit .link.right{ right:0} .lectureTop .lecture_tit .link .link_st{ width:2.25em; line-height:2.25em; height:2.25em; border-radius:100%; margin-left:.5em} .lectureTop .lecture_tit .link .link_st .xi:before{ color:#fff; font-size:.938em} .lectureTop .lecture_tit .link .link_st.home{ background: #339999} .lectureTop .lecture_tit .link .link_st.login{ background: #6666FF} .lectureTop .lecture_tit .link .link_st.mypage{ background: #0099FF} .lectureTop .lecture_tit .link > li:first-child .link_st{ margin-left:0} .lectureTop .lecture_gnb{ border-top:1px solid rgba(255,255,255,.1)} .lectureTop .lecture_gnb .va_wrap{ height:3em} .lectureTop .gnb{ border-left:1px solid rgba(0,0,0,.2); border-right:1px solid rgba(255,255,255,.1)} .lectureTop .gnb > li{ position:relative; width:10%} .lectureTop .gnb > li > .dp1{ position:relative; color:#fff; border-left:1px solid rgba(255,255,255,.1); border-right:1px solid rgba(0,0,0,.2)} .lectureTop .gnb > li > .dp1 .va{ font-size:1.063em; font-weight:700} .lectureTop .gnb > li > .dp1 .ani{ position:absolute; left:50%; width:4em; margin-left:-2em; top:-.75em; line-height:1.5em; border-radius:3em; text-align:center} .lectureTop .gnb > li > .dp1 .ani.st1{ background:#ff0000;} .lectureTop .gnb > li > .dp1 .ani.st2{ background:#ffae00;} .lectureTop .gnb > li > .dp1 .ani .tt{ font-size:.75em} .lectureTop .gnb > li:hover > .dp1, .lectureTop .gnb > li.on > .dp1{ background:rgba(0,0,0,.3)} .lectureTop .gnb > li.m_apply{ background:#06F} .lectureTop .gnb > li .dp2{ position:absolute; left:-2px; width:12em; min-width:100%; background:#fff; padding:1em 0; border:2px solid #333; border-top:none; visibility:hidden; font-size:1em} .lectureTop .gnb > li:last-child .dp2{ left:auto; right:-2px} .lectureTop .gnb > li:hover .dp2{ visibility:visible} .lectureTop .gnb > li.m_teacher:hover .dp2, .lectureTop .gnb > li.m_sample:hover .dp2, .lectureTop .gnb > li.m_list:hover .dp2, .lectureTop .gnb > li.m_qna:hover .dp2, .lectureTop .gnb > li.m_exam:hover .dp2{ visibility:hidden} .lectureTop .gnb > li .dp2 > li{ position:relative; display:block} .lectureTop .gnb > li .dp2 > li > a{ height:auto; padding:.5em 1em; text-align:left; color:#777} .lectureTop .gnb > li .dp2 > li > a .va{ font-size:.875em} .lectureTop .gnb > li .dp2 > li > a:hover{ color:#111} .lectureTop.st1{ background:linear-gradient(125deg, #2e79e1 0%, #7d00ac 100%)} .lectureTop.fix{ position:fixed; width:100%; left:0; top:0} .lectureTop.fix .lecture_tit .link{ opacity:1} .lectureTop.fix .lecture_gnb .dp1.va_wrap{ height:2.5em; padding-top:.5em} .lectureTop.fix .gnb > li > .dp1 .ani{ top:-.5em} .blink{animation-name: blinkAni; animation-duration: 1.5s; animation-iteration-count: infinite} @keyframes blinkAni{ 25% {opacity:0} 75% {opacity:1} } #contents .sub_wrap{ padding-top:1em} #contents .sub_gnb_wrap{ float:left; width:17%; margin-bottom:5em} #contents .sub_gnb_wrap .gnb{ font-size:1em;} #contents .sub_gnb_wrap .gnb > li{ display:none} #contents .sub_gnb_wrap .gnb > li.on{ display:block} #contents .sub_gnb_wrap .gnb > li .dp1{ height:7em; background:#0056b7; color:#fff} #contents .sub_gnb_wrap .gnb > li .dp1 .va{ font-size:1.5em; font-weight:700} #contents .sub_gnb_wrap .gnb > li ul{ font-size:1em} #contents .sub_gnb_wrap .gnb > li ul > li{ display:block} #contents .sub_gnb_wrap .gnb > li ul > li > a{ text-align:left} #contents .sub_gnb_wrap .gnb > li ul > li > a .va{ display:block; position:relative; padding-right:1em; overflow:hidden} #contents .sub_gnb_wrap .gnb > li ul > li > a .va:after{ content:"\e940"; font-family:xeicon!important; position:absolute; right:-2em; top:50%; margin-top:-.625em; text-align:center; color:#fff} #contents .sub_gnb_wrap .gnb > li ul.dp3 > li > a .va:after{ content:"\ea3e"; color:#111} #contents .sub_gnb_wrap .gnb > li ul > li.on > a .va:after{ right:0} #contents .sub_gnb_wrap .gnb > li .dp2{ position:relative} #contents .sub_gnb_wrap .gnb > li .dp2 > li > a{ color:#333; border:1px solid #ddd; margin-bottom:-1px; padding:1em} #contents .sub_gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1em} #contents .sub_gnb_wrap .gnb > li .dp2 > li.on > a{ background:#3e4452; border-color:transparent; color:#fff} #contents .sub_gnb_wrap .gnb > li .dp3{ border:1px solid #ddd; border-top:none; border-bottom:none; padding:1em 0} #contents .sub_gnb_wrap .gnb > li .dp3 > li > a{ padding:.5em 1em; color:#666;} #contents .sub_gnb_wrap .gnb > li .dp3 > li > a .va{ font-size:.875em; padding-left:1em; position:relative} #contents .sub_gnb_wrap .gnb > li .dp3 > li > a .va:before{ content:""; position:absolute; left:0; top:.625em; width:.5em; height:2px; background:#aaa} #contents .sub_gnb_wrap .gnb > li .dp2 > li:last-child .dp3{ border-bottom:1px solid #ddd} #contents .sub_gnb_wrap .gnb > li .dp3 > li.on > a, #contents .sub_gnb_wrap .gnb > li .dp3 > li:hover > a{ color:#111} #contents .sub_gnb_wrap .gnb > li .dp3 > li.on > a .va:before{ background:#111} #contents .sub_gnb_wrap .gnb > li .dp2 > li.on .dp3{ background:#f9f9f9} #contents .sub_gnb_wrap .gnb > li .ani{ display:none} #contents .sub_gnb_wrap .gnb ~ .lecture_list{ margin-top:2em; border-top:1px solid #3e4452; font-size:1em} #contents .sub_gnb_wrap .gnb ~ .lecture_list > li{ display:block} #contents .sub_gnb_wrap .gnb ~ .lecture_list > li > a{ background:#f2f5ff; border:none; border-bottom:1px solid #ccc; margin-bottom:0; text-align:left; height:3em; padding:0 1em} #contents .sub_gnb_wrap .gnb ~ .lecture_list > li > a .va{ font-size:.938em; color:#3e4452} #contents .sub_gnb_wrap .gnb ~ .lecture_list > li > a:hover{ background:#001732} #contents .sub_gnb_wrap .gnb ~ .lecture_list > li > a:hover .va{ color:#fff} #contents .sub_con_wrap{ float:right; width:80%} #contents .sub_con_wrap .sub_tit{ height:5em; border-bottom:1px solid #aaa} #contents .sub_con_wrap .sub_tit .tit_wrap{ float:left; margin-top:1.5em} #contents .sub_con_wrap .sub_tit .tit_wrap .tit{ color:#111; font-size:1.875em} #contents .sub_con_wrap .sub_tit .nav_wrap{ float:right; margin-top:2.375em} #contents .sub_con_wrap .sub_tit .nav_wrap > i{ font-size:.75em; color:#666} #contents .sub_con_wrap .sub_tit .nav_wrap .home{ font-size:1em} #contents .sub_con_wrap .sub_tit .nav_wrap .tt{ padding:0 .5em; font-weight:300} #contents .sub_con_wrap .sub_tit .nav_wrap .tt:last-child{ font-weight:400; color:#111} #contents .sub_con_wrap .sub_tit .nav_wrap .arrow:before{ content:"\e940"} .pop .doc{ padding:1em} #contents .doc{ padding:2em 0 7em 0; min-height:40vh} #contents .doc.index_wrap{ padding:0 0 3em 0 } /**/ .visualSlide_wrap{ position:relative} .visualSlide .el{ height:31.25em; background-position:center top; background-repeat:no-repeat} .visualSlide_wrap .swiper-pagination{ bottom:.5em; font-size:2em} .visualSlide_wrap .el.basic{ position:relative; background-image:url(../images/sub/lecture_bn.jpg); background-repeat:no-repeat; background-size:cover} .visualSlide_wrap .el.basic:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:.9} .visualSlide_wrap .el.basic .wrap_in{ position:absolute; left:0; top:0; width:100%; height:100%} .visualSlide_wrap .el.basic .wrap_in .va{ width:100%} .visualSlide_wrap .el.basic .wrap_in .wrap_tit{ display:block; font-family:tm,sans-serif; font-size:5em; letter-spacing:2px; margin-bottom:.25em} .visualSlide_wrap .el.basic .wrap_in .wrap_con1{ } .visualSlide_wrap .el.basic .wrap_in .wrap_con1 > li .in{ width:25em; background:#d47860; color:#fff; margin:0 1em; padding:1em; border-radius:3em} .visualSlide_wrap .el.basic .wrap_in .wrap_con1 > li:nth-child(2) .in{ background:#8ba657} .visualSlide_wrap .el.basic .wrap_in .wrap_con1 > li .in .t1{ font-size:1.5em; font-weight:700} .visualSlide_wrap .el.basic .wrap_in .wrap_con2 > li{ width:25%; margin:3em 0 1em 0} .visualSlide_wrap .el.basic .wrap_in .wrap_con2 > li .in{ background:rgba(0,0,0,.3); margin:0 .5em; height:6em; position:relative; padding:2em 1em 1em 1em; border-radius:5px} .visualSlide_wrap .el.basic .wrap_in .wrap_con2 > li .in .no{ position:absolute; width:2em; height:2em; line-height:2em; left:50%; top:-1em; margin-left:-1em; border-radius:100%; background:rgba(0,0,0,.6); color:#fff; font-family:tahoma, Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; font-size:1.125em} .visualSlide_wrap .el.basic .wrap_in .wrap_con2 > li .in .tt{ font-size:.938em; color:#fff; font-weight:300} .visualSlide_wrap .el.basic.c1:before{ background-color:#15654b} .visualSlide_wrap .el.basic.c1 .wrap_in .wrap_tit{ color:#78ffa6} .visualSlide_wrap .el.basic.c2:before{ background-color:#156562} .visualSlide_wrap .el.basic.c2 .wrap_in .wrap_tit{ color:#78ffd4} .visualSlide_wrap .el.basic.c3:before{ background-color:#4d2525} .visualSlide_wrap .el.basic.c3 .wrap_in .wrap_tit{ color:#f2c27c} .visualSlide_wrap .el.basic.c4:before{ background-color:#30315c} .visualSlide_wrap .el.basic.c4 .wrap_in .wrap_tit{ color:#b8baff} .visualSlide_wrap .el.basic.c5:before{ background-color:#854731} .visualSlide_wrap .el.basic.c5 .wrap_in .wrap_tit{ color:#ffe597} .visualSlide_wrap .el.basic.c6:before{ background-color:#257495} .visualSlide_wrap .el.basic.c6 .wrap_in .wrap_tit{ color:#a3e4ff} .visualSlide_wrap .el.basic.c7:before{ background-color:#733051} .visualSlide_wrap .el.basic.c7 .wrap_in .wrap_tit{ color:#ffd0e8} .visualSlide_wrap .el.basic.c8:before{ background-color:#425001} .visualSlide_wrap .el.basic.c8 .wrap_in .wrap_tit{ color:#e9ff89} .visualSlide_wrap .el.basic.c9:before{ background-color:#582e6c} .visualSlide_wrap .el.basic.c9 .wrap_in .wrap_tit{ color:#ebc5ff} .visualSlide_wrap .el.basic.c0:before{ background-color:#4c4a42} .visualSlide_wrap .el.basic.c0 .wrap_in .wrap_tit{ color:#ffedbe} .visualSlide_wrap .swiperPause{ left:50%; top:50%; margin:-3em 0 0 -3em; width:6em; height:6em; line-height:6em; border-radius:100%; opacity:0; transition:.3s; background:rgba(0,0,0,.5); visibility:hidden} .visualSlide_wrap .swiperPause .xi{ font-size:2em} .visualSlide_wrap .swiperPause.btnPlay{ display:none; opacity:1; visibility:visible} .visualSlide_wrap.pause .swiperPause.btnPlay{ display:block} .visualSlide_wrap.pause .swiperPause.btnPause{ display:none} .visualSlide_wrap:hover .swiperPause{ opacity:1; visibility:visible} .visualSlide_wrap:hover .swiperPause:hover{ background:#222} .swiper-pagination.white > span{ background:#fff} .swiper-button.out{ left:50%; right:auto} .swiper-button.white{ color:#fff} .swiper-button.out:before{ font-size:1.875em;} .swiper-button-next.out{ margin-left:37.5em} .swiper-button-prev.out{ margin-left:-42.5em} .main_top_wrap{ background:#ececec; border-bottom:1px solid #ccc; padding:2em 0} .main_top_wrap .wrap_list{ margin:-1em 0 0 -1em} .main_top_wrap .wrap_list > li .wrap_in{ margin:1em 0 0 1em} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap{ height:3em; color:#fff; text-align:left; padding:0 1.5em; border-bottom:1px solid rgba(255,255,255,.1);} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap .va{ width:100%} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap .tt{ float:left} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap .more{ float:right} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap .more .xi{ font-size:1em; color:#fff; transition:.3s} .main_top_wrap .wrap_list > li .wrap_in .tit_wrap .more:hover .xi{ transform:rotate(90deg)} .main_top_wrap .wrap_list > li .wrap_in .con_wrap{ padding:1em 1.5em; height:7em} .main_top_wrap .wrap_list > li.board_wrap{ width:38%} .main_top_wrap .wrap_list > li.schedule_wrap{ width:15%} .main_top_wrap .wrap_list > li.pass_wrap{ width:27%} .main_top_wrap .wrap_list > li.link_wrap{ width:20%} .main_top_wrap .wrap_list > li.board_wrap .wrap_in{ background:#002654} .main_top_wrap .wrap_list > li.schedule_wrap .wrap_in{ background:#811313} .main_top_wrap .wrap_list > li.pass_wrap .wrap_in{ background:#5e7600} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li{ width:33.33%} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li > a{ background:#1a3c65; border-left:1px solid rgba(255,255,255,.1); text-align:center} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li > a .va{ opacity:.7; font-size:.938em} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li:first-child > a{border-left-color:transparent} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li.on > a{ background:none; border-bottom-color:transparent} .main_top_wrap .wrap_list > li.board_wrap .tab_idx > li.on > a .va{ opacity:1} .main_top_wrap .wrap_list > li .list > li > a{ display:block; line-height:1.75em; color:#fff; position:relative; padding-right:5.5em} .main_top_wrap .wrap_list > li .list > li > a .tt{ opacity:.7; font-size:.813em; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden} .main_top_wrap .wrap_list > li .list > li > a .tt:before{ content:"- "} .main_top_wrap .wrap_list > li .list > li > a .date{ position:absolute; right:0; top:0; width:5em; font-size:.75em; opacity:.5} .main_top_wrap .wrap_list > li .list > li > a:hover .tt, .main_top_wrap .wrap_list > li .list > li > a:hover .date{ opacity:1} .main_top_wrap .wrap_list > li .list.st1 > li > a{ padding-right:0} .main_top_wrap .wrap_list > li.schedule_wrap .tit{ color:#fff; text-align:center; line-height:1.1em; height:3.3em} .main_top_wrap .wrap_list > li.schedule_wrap .tit > i{ display:inline-block; font-size:.938em} .main_top_wrap .wrap_list > li.schedule_wrap .dday{ text-align:center; font-family:Arial, Helvetica, sans-serif; color:#ffba00; font-weight:bold; font-size:1.75em} .main_top_wrap .wrap_list > li.schedule_wrap .swiper-container{ padding-bottom:1.25em} .main_top_wrap .wrap_list > li.pass_wrap .big{ float:left; width:53%} .main_top_wrap .wrap_list > li.pass_wrap .big .img{ background:url(../images/main/pass_best.jpg) no-repeat; background-size:cover} .main_top_wrap .wrap_list > li.pass_wrap .big .con{ margin-top:.5em; position:relative; padding-left:2.5em; line-height:1.2em} .main_top_wrap .wrap_list > li.pass_wrap .big .con .icon{ position:absolute; left:0; top:0; width:3em; background:#ff9d00; color:#fff; font-size:.688em; font-weight:500; text-align:center} .main_top_wrap .wrap_list > li.pass_wrap .big .con .tt{ color:#fff; font-size:.813em; font-weight:500; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden} .main_top_wrap .wrap_list > li.pass_wrap .list{ float:right; width:40%} .main_top_wrap .wrap_list > li.link_wrap .link{ margin:-.5em 0 0 0} .main_top_wrap .wrap_list > li.link_wrap .link > li{ width:100%} .main_top_wrap .wrap_list > li.link_wrap .link > li > a{ display:block; margin:.5em 0 0 0; text-align:left; color:#fff; height:3.688em; line-height:1em; padding:0 1em; overflow:hidden} .main_top_wrap .wrap_list > li.link_wrap .link > li > a .va{ width:100%} .main_top_wrap .wrap_list > li.link_wrap .link > li > a .icon{ float:left;} .main_top_wrap .wrap_list > li.link_wrap .link > li > a .icon:before{ font-size:1.25em} .main_top_wrap .wrap_list > li.link_wrap .link > li > a .tt{ float:left; font-size:.875em; padding-left:.5em} .main_top_wrap .wrap_list > li.link_wrap .link > li > a .arrow{ float:right; transition:.3s} .main_top_wrap .wrap_list > li.link_wrap .link > li > a:hover .arrow{ margin-right:-.5em} .main_top_wrap .wrap_list > li.link_wrap .link > li.c1 > a{ background:#472e36} .main_top_wrap .wrap_list > li.link_wrap .link > li.c2 > a{ background:#3b2e4c} .main_top_wrap .wrap_list > li.link_wrap .link > li.c3 > a{ background:#2e374c} .main_movie{ height:31.25em; background:url(../images/main/movie_bg.jpg) no-repeat center top; position:relative} .main_movie .play{ position:absolute; left:0; top:0; width:100%; height:100%} .sampleSlide_wrap{ background:#d5d5e0; padding:2.5em 0; position:relative} .sampleSlide_wrap .wrap_tit{ text-align:center; font-size:1.75em; color:#111; font-weight:500} .sampleSlide_wrap .wrap_tt{ text-align:center; font-size:1.125em; color: #333399; margin:.5em 0 1em 0; font-weight:700} .free_wrap{ background:#0068de; background: linear-gradient(-225deg, #005f74 0%, #3b9fb5 50%, #005f74 100%); text-align:center; padding:2em 0} .free_wrap .wrap_tit{ font-weight:500; font-size:1.75em; color:#fff;} .free_wrap .wrap_tit .xi{ display:block} .free_wrap .wrap_tt{ text-align:center; font-size:1.125em; color: #fff; margin:1em 0; font-weight:700} .free_wrap .wrap_tt .point{ color: #FFFF00; vertical-align:top} .teacherSlide_wrap{ background: linear-gradient(-225deg, #14282b 0%, #3a5e62 50%, #14282b 100%); padding:2em 0 0 0; min-height:27em} .teacherSlide_wrap .wrap_tit{ text-align:center; color:#fff; font-size:1.75em; font-weight:500; margin-bottom:1em} .teacherSlide_wrap .el{ width:14%; padding:5px; padding-right:12%; margin-left:-10%} .teacherSlide_wrap .el .teacher_st{ padding-right:0; margin-top:1em; box-shadow:0 0 6px 2px rgba(0,0,0,.7)} .teacherSlide_wrap .el .teacher_st:before{ border:none} .teacherSlide_wrap .el .teacher_st .con{ display:none} .teacherSlide_wrap .el.swiper-slide-active{ width:35%} .teacherSlide_wrap .el.swiper-slide-active .teacher_st{ padding-right:50%; margin-top:0} .teacherSlide_wrap .el.swiper-slide-active .teacher_st .con{ display:block} .teacherSlide-pagination, .teacherSlide-next, .teacherSlide-prev{ position:static !important; display:inline-block; *display:inline; zoom:1; width:auto !important; vertical-align:middle !important; margin:0 !important} .main_cate{} .main_cate .gnb > li{ display:block} .main_cate .gnb > li .dp1{ overflow:hidden; text-align:center; margin:2em 0 1.25em 0} .main_cate .gnb > li .dp1 .va{ position:relative; display:inline-block; *display:inline; zoom:1; padding:0 2em} .main_cate .gnb > li .dp1 .va:before, .main_cate .gnb > li .dp1 .va:after{ content:""; position:absolute; width:600px; height:1px; top:50%; right:100%; background:#ddd} .main_cate .gnb > li .dp1 .va:after{ left:100%} .main_cate .gnb > li .dp1 .va .tit{ font-weight:700; font-size:1.625em; color:#111} .main_cate .gnb > li .dp2{ margin:-.5em 0 0 -2.5em; padding:0 2em} .main_cate .gnb > li .dp2 > li{ width:25%} .main_cate .gnb > li .dp2 > li > a{ position:relative; margin:1.25em 0 0 2.5em; height:3em; border-radius:3em; padding:0 2.5em 0 3em; text-align:left; background:#6c6f7d; color:#fff; box-sizing:border-box; border:3px solid #6c6f7d; transition:.3s} .main_cate .gnb > li .dp2 > li > a .mark{ position:absolute; left:-6px; top:-3px; width:3em; line-height:3em; height:3em; border:1px solid rgba(255,255,255,.1); border-radius:100%; font-size:1em; text-align:center; background:#6c6f7d; color:#fff; box-sizing:border-box} .main_cate .gnb > li.m_1 .dp2 > li > a .mark:before{ content:"\e9da"} .main_cate .gnb > li.m_2 .dp2 > li > a .mark:before{ content:"\e9cf"} .main_cate .gnb > li.m_3 .dp2 > li > a .mark:before{ content:"\e986"} .main_cate .gnb > li.m_4 .dp2 > li > a .mark:before{ content:"\ea35"} .main_cate .gnb > li.m_5 .dp2 > li > a .mark:before{ content:"\eb4a"} .main_cate .gnb > li.m_6 .dp2 > li > a .mark:before{ content:"\eb64"} .main_cate .gnb > li.m_7 .dp2 > li > a .mark:before{ content:"\e9b4"} .main_cate .gnb > li .dp2 > li > a .mark:before{ font-size:1.313em} .main_cate .gnb > li .dp2 > li > a .lecture_icon{ position:absolute; left:1.5em; top:-1.25em; font-size:.938em} .main_cate .gnb > li .dp2 > li > a .tit{ font-size:1em; font-weight:500; line-height: 1.1em; max-height:2.2em; overflow:hidden; display:inline-block} .main_cate .gnb > li .dp2 > li > a .arrow{ position:absolute; right:.5em; top:50%; margin-top:-.438em} .main_cate .gnb > li .dp2 > li > a .arrow:before{ content:"\e940"; font-size:.75em} .main_cate .gnb > li .dp2 > li > a:hover{ background:#fff; color:#6c6f7d; padding-left:3.5em} .main_cate .gnb > li .dp2 > li > a:hover .arrow:before{ content:"\e93e"} .bannerSlide_wrap{ position:relative; padding:3em 0 2em 0; margin-bottom:2em} .bannerSlide .el{ height:15em; background-position:center top; background-repeat:no-repeat; cursor:pointer} .bannerSlide_wrap .swiper-pagination{ font-size:1.5em} .bannerSlide_wrap .swiper-button{ left:50%; right:auto} .bannerSlide_wrap .swiper-button:before{ font-size:2em;} .bannerSlide_wrap .swiper-button-next{ margin-left:37.5em} .bannerSlide_wrap .swiper-button-prev{ margin-left:-42.5em} .submain_teacher{ float:left; width:35%; position:relative} .submain_video{ float:right; width:60%} .teacher_st{ padding-right:50%; position:relative} .teacher_st:before{ content:""; position:absolute; left:-1px; top:-1px; width:100%; height:100%; border:1px solid #ccc} .teacher_st .img{ padding-bottom:131.3131%; background:#f8f8f8} .teacher_st .con{ position:absolute; right:0; top:0; width:50%; height:100%; background:#ebebeb} .teacher_st .con .in{ padding:2em 1.25em 3.5em 1.25em} .teacher_st .con .in .t1{ font-weight:500; font-size:1.625em; color:#111} .teacher_st .con .in .t2{ color:#04454e; margin:1em 0; font-size:.875em; overflow:hidden; line-height:1.3em; height:1.3em; display:none} .teacher_st .con .in .subject{} .teacher_st .con .in .subject .tit{ color:#888; font-size:1em; margin:1em 0 .5em 0} .teacher_st .con .in .subject .tt{ color: #2d454a; font-size:1.125em; overflow:hidden; overflow:hidden; line-height:1.3em; height:5.2em; font-weight:500} .teacher_st .con .in .subject .tt > span{ display:inline-block; *display:inline; zoom:1} .teacher_st .con .in .subject .tt > span:after{ content:""; padding:0 .25em} .teacher_st .con .in .subject .tt > span:last-child:after{ display:none} .teacher_st .con .in .subject .tt > span a{ line-height:1.1em} .teacher_st .con .in .subject .tt > span a:hover{ text-decoration:underline} .teacher_st .con .in .btn{ position:absolute; left:0; bottom:0; width:100%} .teacher_st .con .in .btn > li{ width:100%} .teacher_st .con .in .btn > li > a{ color:#fff; height:3em; text-align:center} .teacher_st .con .in .btn > li > a .va{ font-size:.875em} .teacher_st .con .in .btn > li.c1 > a{ background:#2d454a} .teacher_st .con .in .btn > li.c1 > a:hover{ background:#162b2f} .teacher_st .con .in .btn > li.c2 > a{ background:#2d454a} .teacher_wrap .teacher_st{ float:left; width:22%} .teacher_wrap .table_st{ float:right; width:73%} .table_st .before{ color:#999 !important; text-decoration:line-through} .teacher_st.st1{ padding-right:0} .teacher_st.st1 .con{ position:relative; width:100%; height:auto} .submain_video .list{ margin:-1em 0 0 -1em} .submain_video .list > li{ width:33.33%} .submain_video .list > li .video_st{ margin:1em 0 0 1em} .video_st{ position:relative; background:#666} .video_st .img img{ width:100%; height:100%} .video_st .con{ position:absolute; left:0; bottom:0; width:100%; cursor:pointer} .video_st .con .in{ padding:.313em 3em .313em 1em; background:#000; background:rgba(0,0,0,.8); position:relative} .video_st .con .in .t1{ font-size:.813em; color:#fff} .video_st .con .in .t2{ font-size:.75em; color:#aaa} .video_st .con .in .btn{ position:absolute; right:0; width:3em; text-align:center; top:50%; margin-top:-1.188em; color:#fff} .video_st .con .in .btn .xi{ font-size:1.75em; transition:.3s; transform-origin:center center} .video_st:hover .con .in .t1{ text-decoration:underline} .video_st:hover .con .in .btn .xi{ color:#FFCC00; transform:rotate(360deg)} .video_st .nocon{ color:#fff; padding-bottom:1.25em} .video_st .xi.nocon:before{ content:"\ea18"} .xi.nocon{} .xi.nocon:before{ content:"\ea4e"; font-family:xeicon!important; opacity:.5; font-size:2em} /**/ .cs_wrap{ padding:2em 0 3em 0; background:url(../images/inc/cs_bg.jpg) no-repeat center top; background-size:cover} .cs_wrap .wrap1{ float:left; width:60%} .cs_wrap .wrap2{ float:left; width:30%; margin-left:10%; margin-top:2.5em} .cs_wrap .cs_tit{ font-size:1.5em; font-weight:700; color:#000} .cs_wrap .cs_tt{ font-size:.938em; color:#333; margin:.75em 0 2em 0} .cs_wrap .link{ margin:-2em 0 0 -2em} .cs_wrap .link > li{ width:20%} .cs_wrap .link > li > a{ margin:2em 0 0 2em; text-align:center} .cs_wrap .link > li > a .resize{ padding-bottom:100%; color:#fff} .cs_wrap .link > li > a .resize:before{ content:""; position:absolute; left:-2px; top:-2px; border:2px solid transparent; width:100%; height:100%; border-radius:100%; opacity:.7; transition:.3s} .cs_wrap .link > li > a .resize .xi{ transition:.3s} .cs_wrap .link > li > a .resize .xi:before{ font-size:2.25em} .cs_wrap .link > li > a .tt{ display:block; color:#666; font-size:.875em; margin-top:1em} .cs_wrap .link > li.m1 > a .resize:before{ background:#0b84ac} .cs_wrap .link > li.m2 > a .resize:before{ background:#e9aa00} .cs_wrap .link > li.m3 > a .resize:before{ background:#3d3dd7} .cs_wrap .link > li.m4 > a .resize:before{ background:#e63f0c} .cs_wrap .link > li.m5 > a .resize:before{ background:#05897e} .cs_wrap .link > li > a:hover .resize:before{ box-shadow:0 0 3px 2px rgba(0,0,0,.2); border-color:#fff} .cs_wrap .link > li > a:hover .resize .xi{ transform:rotateY(180deg)} .cs_wrap .link > li > a:hover .tt{ color:#000} .cs_wrap .cs_tit2{ font-size:1.125em; font-weight:700; color:#000; margin-bottom:1.25em} .cs_wrap .line{ border-top:1px solid rgba(0,0,0,.2); padding-top:1em; margin-top:1em} .cs_wrap .tt{ font-size:.813em; color:#111; margin-bottom:.5em} .cs_wrap .tt > i + i{ margin-left:1em} .cs_wrap .tt .c1{ color:#004e8a} .cs_wrap .tt .c2{ color:#666} .cs_wrap .no .tt{ font-family:tahoma,notokrM,sans-serif; font-weight:bold; font-size:1.5em; color:#333} .cs_wrap .no .xi{ background: #003366; width:2em; height:2em; line-height:2em; border-radius:100%; text-align:center; color:#fff; margin-right:.5em} .cs_wrap .no .tt.t1{ color:#003366; font-size:1.75em} .cs_wrap .tt2{ font-size:.75em; color:#666; margin:.75em 0} .cs_wrap .tt3{ font-family:tahoma,notokrM,sans-serif; color:#000; font-size:.938em; letter-spacing:0; margin-top:.25em} .cs_main_top{ height:31.25em; background:url(../images/sub/cs_bg.jpg) no-repeat center top; position:relative} .cs_main_top .twrap{ padding-top:7em; line-height:1.5; color:#000; text-align:right} .cs_main_top .twrap .t1{ font-size:2.75em; font-weight:500; letter-spacing:-2px; margin-right:2em; opacity:0;} .cs_main_top .twrap .t2{ font-size:1.875em; margin-right:2em; opacity:0;} .load .cs_main_top .twrap .t1{ margin-right:0; opacity:1; transition:1.5s} .load .cs_main_top .twrap .t2{ margin-right:0; opacity:1; transition:1.5s; transition-delay:1s} .cs_main_top .menu_wrap{ position:absolute; left:0; bottom:0; width:100%} .cs_main_top .menu_wrap .wrap_tit{ font-weight:700; color:#333; font-size:2.25em; letter-spacing:-3px; word-spacing:3px} .cs_main_top .menu_wrap .list > li{ width:23%; vertical-align:bottom} .cs_main_top .menu_wrap .list > li.cs{ width:31%} .cs_main_top .menu_wrap .list > li .in{ color:#fff; padding:2em 2em; position:relative; overflow:hidden; transition:.3s} .cs_main_top .menu_wrap .list > li .in .icon{ position:absolute; right:-.125em; bottom:-.25em; font-size:5em; filter:alpha(opacity=20);opacity:0.2;} .cs_main_top .menu_wrap .list > li .in .tit{ display:block; font-weight:300; font-size:1.625em; letter-spacing:-2px; margin-bottom:.5em} .cs_main_top .menu_wrap .list > li .in .tel{ line-height:1; margin-bottom:.5em} .cs_main_top .menu_wrap .list > li .in .tel .no{ font-size:1.75em; font-family:tahoma,sans-serif; font-weight:bold; padding:0 .25em} .cs_main_top .menu_wrap .list > li .in .tel .sub{ font-size:.875em} .cs_main_top .menu_wrap .list > li .in .tel .xi{ font-size:1.5em} .cs_main_top .menu_wrap .list > li .in .t1{ margin-top:1em} .cs_main_top .menu_wrap .list > li .in .t2{ font-size:.813em; opacity:.7; margin-top:1em} .cs_main_top .menu_wrap .list > li .in .more{ display:inline-block; *display:inline; zoom:1; border:1px solid #fff; padding:.25em 2em; margin-top:2.5em; border-radius:5em; font-size:.75em; opacity:.5} .cs_main_top .menu_wrap .list > li .in .more .xi{ padding-left:.5em} .cs_main_top .menu_wrap .list > li.de .in:hover{ padding-bottom:2.5em} .cs_main_top .menu_wrap .list > li.de .in:hover .more{ opacity:1} .cs_main_top .menu_wrap .list > li.cs .in{ background:#333; min-height:8em; padding:1.5em 1em .5em 1em; overflow:visible; border-radius:0 1em 0 0} .cs_main_top .menu_wrap .list > li.c1 .in{ background:#005ed2} .cs_main_top .menu_wrap .list > li.c2 .in{ background:#0093ff} .cs_main_top .menu_wrap .list > li.c3 .in{ background:#5266ff} .cs_main_faq{ position:relative; padding-left:17em; padding-right:27em; margin-top:2em; border:1px solid #ccc; overflow:hidden} .cs_main_faq .tit_wrap{ position:absolute; left:0; top:0; width:17em; height:100%; text-align:left; background:#f5f5f5; border-right:2px dashed #ddd} .cs_main_faq .tit_wrap .in{ padding:2em} .cs_main_faq .tit_wrap .t1{ font-size:2em; color:#aaa; font-family:arial, sans-serif; letter-spacing:-2px; line-height:1} .cs_main_faq .tit_wrap .t2{ font-size:1.875em; color:#222; font-weight:500} .cs_main_faq .tit_wrap .t3{ font-size:.813em; color:#777; margin-top:1em} .cs_main_faq .tit_wrap .more{ display:inline-block; *display:inline; zoom:1; padding:.5em 2em; font-size:.813em; background:#16639c; color:#fff; margin-top:2em} .cs_main_faq .tit_wrap .more .arrow{ font-size:1em; transition:.3s} .cs_main_faq .tit_wrap .more:hover .arrow{ padding-left:.5em} .cs_main_faq .cate_wrap{} .cs_main_faq .board_faq_cate{ margin:0} .cs_main_faq .board_faq_cate > li{ width:33.33%} .cs_main_faq .board_faq_cate > li > button .in{ border:none; font-size:1.063em; margin:-1px -1px 0 0; border-radius:0; transition:.2s} .cs_main_faq .board_faq_cate > li > button:hover{ } .cs_main_faq .board_faq_cate > li > button:hover .in{ background:#f5f5f5; color:#111} .cs_main_faq .board_faq_cate > li > button:hover .in .xi{ opacity:1} .cs_main_faq .list_wrap{ position:absolute; right:0; top:0; width:27em; height:100%; text-align:left; border-left:2px dashed #ddd} .cs_main_faq .list_wrap .wrap_in{ padding:1em 2em} .cs_main_faq .list_wrap .tit{ line-height:1; border-bottom:1px solid #16639c; padding-bottom:.5em} .cs_main_faq .list_wrap .tit .t1{ color:#16639c; font-weight:700; font-size:1.25em; letter-spacing:-2px; padding-right:.5em} .cs_main_faq .list_wrap .tit .t2{ color:#222; font-weight:500; font-size:1.125em} .cs_main_faq .list_wrap .list > li .in{ display:block; position:relative; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:.5em 0 .5em 3em; border-bottom:1px solid rgba(0,0,0,.1)} .cs_main_faq .list_wrap .list > li .in .no{ position:absolute; left:0; top:0; width:2.5em; height:100%; background:#16639c; color:#fff; text-align:center; line-height:2.25em; font-family:arial,sans-serif; font-size:.938em; font-weight:bold} .cs_main_faq .list_wrap .list > li .in .tt{ font-size:.813em; color:#333} .cs_main_faq .list_wrap .list > li .in:hover{ background:#f1f1f1; color:#111} .cs_main_con{ margin:-1em 0 0 -3em} .cs_main_con > li.w1{ width:32%} .cs_main_con > li.w2{ width:48%} .cs_main_con > li.w3{ width:20%} .cs_main_con > li .wrap_in{ margin:3em 0 0 3em} .cs_main_con > li .tit_wrap{ border-bottom:1px solid #ccc; position:relative; padding:0 3em .25em 0; height:2em; text-align:left} .cs_main_con > li .tit_wrap .tit{ font-weight:500; font-size:1.125em; color:#111} .cs_main_con > li .more_btn{ position:absolute; right:0; top:.125em; width:3em; text-align:center; color:#aaa} .cs_main_con > li .more_btn .xi{ line-height:1; font-size:1.5em; transition:.3s} .cs_main_con > li .more_btn:hover .xi{ color:#3366ff; transform:rotate(180deg)} .cs_main_con > li .con_wrap{ padding:1.5em 0} .cs_main_con > li .con_wrap .program_list{ margin:-1em 0 0 -1em; font-size:.938em} .cs_main_con > li .con_wrap .program_list > li > .in{ margin:1em 0 0 1em} .cs_main_con > li .con_wrap .bg_wrap{ height:7.25em; background:url(../images/sub/cs_remote_bg.jpg) no-repeat center center; background-size:cover; padding-left:52%; text-align:left} .cs_main_con > li .con_wrap .bg_wrap .tt{ display:block; font-size:.813em; line-height:1.4; color:#333} .cs_main_con > li .con_wrap .bg_wrap .btn{ display:inline-block; background:#aaa; font-size:.75em; margin-top:2em; color:#fff; border-radius:3em; padding:.25em 2em} .cs_main_con > li .con_wrap .bg_wrap .btn:hover{ background: #003399} .cs_main_con > li .link{ display:block; height:3.625em; padding:0 3em 0 1em; border:1px solid #ddd; text-align:left; margin-bottom:-1px; position:relative; overflow:hidden} .cs_main_con > li .link:after{ content:"\e93f"; position:absolute; right:-3em; top:50%; margin-top:-.625em; width:3em; text-align:center; font-family:xeicon!important; transition:.3s} .cs_main_con > li .link .icon{ width:2em; height:2em; line-height:2em; font-size:1em; text-align:center; border-radius:100%; color:#fff; margin-right:.5em} .cs_main_con > li .link .tt{ font-size:.875em; color:#111} .cs_main_con > li .link:hover{ background:#f1f1f1} .cs_main_con > li .link:hover:after{ right:0} .cs_main_con > li .link.c1 .icon{ background: #006666} .cs_main_con > li .link.c2 .icon{ background: #003366} .cs_main_con > li .link.c3 .icon{ background: #993333} .program_list{ margin:-3em 0 0 -3em} .program_list > li{ width:33.33%} .program_list > li > .in{ margin:3em 0 0 3em} .program_list > li > .in .img{ float:left; width:30%} .program_list > li > .in .img .resize{ background:#f9f9f9} .program_list > li > .in .con{ float:right; width:65%} .program_list > li > .in .con .t1, .program_list > li > .in .con .t2{ line-height:1.25em; height:2.5em; overflow:hidden} .program_list > li > .in .con .t1{ font-weight:500; color:#111; font-size:1.063em; padding-top:.25em} .program_list > li > .in .con .t2{ color:#999; font-size:.813em} .program_list > li > .in .more{ display:block; border:1px solid #ccc; text-align:center; padding:.25em; font-size:.875em; margin-top:1em; transition:.3s; color:#777} .program_list > li > .in .more .xi{ padding-left:.25em} .program_list > li > .in .more:hover{ background:#666; border-color:transparent; color:#fff} .invite_top{ padding:3em 1em; background:url(../images/sub/cs_invite_bg.jpg) no-repeat center center; background-size:cover; color:#fff; text-align:center} .invite_top .t1{ font-size:1.25em; font-weight:300} .invite_top .t2{ font-size:3.75em; font-weight:700; letter-spacing:-3px; word-spacing:3px} .invite_top .t2 .in{ display:inline-block; *display:inline; zoom:1; border-bottom:4px solid #ffc275; padding-bottom:.313em; margin:.125em 0 .5em 0} .invite_top .t3{ font-size:.938em; font-weight:300; line-height:1.5} .invite_top .list{ padding:0 3%; margin-top:1em} .invite_top .list > li{ width:33.33%} .invite_top .list > li .in{ background:#845e5e; color:#fff; margin:.5em; padding:.5em 1.5em; border-radius:5em; text-align:center; position:relative} .invite_top .list > li:nth-child(2n) .in{ background:#a54543} .invite_top .list > li .in .no{ display:block; color:#fff; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.25em} .invite_top .list > li .in .tt{ display:block; height:3em; padding-top:.75em; margin-top:.5em; font-size:.938em; border-top:1px dotted #fff} .copyright_top{ padding:3em 0 0 0; background:url(../images/sub/cs_copyright_bg.jpg) no-repeat center center; background-size:cover; color:#fff; text-align:center} .copyright_top .wrap_in{ padding:0 5em} .copyright_top .tt1{ font-size:4em; color:#ff8888; font-weight:700; letter-spacing:-3px; word-spacing:3px} .copyright_top .tt1 .c1{ color:#fff} .copyright_top .tt1 .c2{ color:#ff8888} .copyright_top .tt2{ font-size:1.125em; line-height:1.5;} .copyright_top .tt2:before{ content:""; display:block; margin:1.5em auto; width:2em; height:3px; background:#fff} .copyright_top .twrap{ background:#fff; background:rgba(0,0,0,.7); border:1px solid #333; padding:3em; margin:2em 0 0 0; text-align:left} .copyright_top .twrap .t1{ font-weight:500; font-size:1.25em; margin-bottom:1em} .copyright_top .twrap .t2{ font-size:.938em; line-height:1.5} .copyright_top .icon_wrap{ text-align:center; font-size:1em; margin-top:3em} .copyright_top .icon_wrap .in{ margin:0 2em; width:10em; height:10em; line-height:10em; border-radius:100%; background:#CC0000; color:#fff} .copyright_top .icon_wrap .xi{ font-size:3em} .copyright_top .twrap2{ margin:2em 0 0 0} .copyright_top .twrap2 .t1{ font-weight:700; font-size:2.313em} .copyright_top .twrap2 .t2{ font-size:300; font-size:1.313em; margin-top:.5em; line-height:1.5} .copyright_top .twrap3{ background:rgba(230,230,230,.9); margin-top:4em; padding:3em} .copyright_top .twrap3 .t1{ font-weight:700; color:#333; font-size:1.25em} .copyright_top .twrap3 .t2{ font-weight:700; color:#CC0000; font-size:1.25em; margin-top:1em} .dp1_company #quick{ display:none} .dp1_company #header{ position:absolute; width:100%; left:0; top:0} .companySlide_wrap{ position:relative} .companySlide_wrap .va{ width:100%; position:relative } .companySlide_wrap .companySlide_layer{ position:absolute; z-index:2; left:0; top:0; width:100%; height:100%} .companySlide_wrap .companySlide_layer .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50);opacity:0.5;} .companySlide_wrap .companySlide_layer > .va{ position:relative; margin-bottom:-7em} .companySlide_wrap .companySlide_layer .t1{ font-size:4em; letter-spacing:-3px; word-spacing:.125em; font-weight:700; color:#fff} .companySlide_wrap .companySlide_layer .t2{ font-size:1em; line-height:1.7; font-weight:300; color:#fff} .companySlide_wrap .companySlide_layer .sec{ margin:2em auto; display:block; width:4em; height:3px; background:#fff} .introNav{} .introNav .nav{ margin:1em 0 0 -3em} .introNav .nav > li{ width:20%} .introNav .nav > li > a{ margin:3em 0 0 3em; background:#fff; border:2px dashed #fff; border-radius:100%; color:#111; transition:.3s; box-shadow:1px 1px 3px 1px rgba(0,0,0,.5)} .introNav .nav > li > a .xi{ display:block; font-size:3em} .introNav .nav > li > a .tt{ font-weight:500; font-size:1.25em} .introNav .nav > li > a:hover{ background:none; color:#fff; box-shadow:none; background:rgba(0,0,0,.2)} .companyNav{ position:fixed; z-index:999; right:0; top:0; height:100%; opacity:0} .companyNav .nav > li > a{ display:block; text-align:right; margin:.25em 0; border-radius:5em 0 0 5em; padding-right:1em} .companyNav .nav > li > a .xi{ font-size:1em; width:2em; line-height:2em; height:2em; text-align:center; background:rgba(0,0,0,.3); border-radius:100%; color:#fff; text-align:center} .companyNav .nav > li > a .xi:before{ font-size:1.125em} .companyNav .nav > li > a .tt{ display:inline-block; *display:inline; zoom:1; text-align:left; width:0; white-space: nowrap; overflow:hidden; transition:.3s; margin-left:.5em; font-size:.813em; color:#fff;} .companyNav .nav > li.on > a, .companyNav .nav > li:hover > a{ background: #0033CC} .companyNav .nav > li.on > a .tt, .companyNav .nav > li:hover > a .tt{ width:6em} .mouseDown{ position: relative; left:0; bottom:1em; margin-bottom:1em; width:100%; text-align:center; margin-top:2em; animation-name: mouseDownAni; animation-duration: 4s; animation-iteration-count: infinite} .mouseDown > a{ display:inline-block; color:#fff} .mouseDown > a .xi.s1{ font-size:3em} .mouseDown > a .xi.s2{ font-size:2em; margin-left:-.5em} @keyframes mouseDownAni{ 40% {bottom:1em} 50% {bottom:0;} 60% {bottom:1em} } .scroll .mouseDown{ opacity:0} .scroll .companyNav{ opacity:1} .company_wrap{ padding:3em 0 6em 0; position:relative} .company_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%;} .company_wrap .box1{ position:relative} .company_wrap .company_tit{ text-align:center; color:#111; margin-bottom:3em} .company_wrap .company_tit .t1{ font-weight:700; font-size:2.25em; letter-spacing:-2px; padding-right:2px} .company_wrap .company_tit .t2{ font-size:.938em; letter-spacing:.5em; opacity:.4; margin:1em 0 0 .5em} .company_wrap .company_tit:after{ content:""; display:block; margin:2em auto 0 auto; width:2em; height:4px; background:#003f87} .company_wrap .company_tit.white{ color:#fff} .company_wrap .company_tit.white:after{ background:#fff} .company_wrap .company_con{ position:relative} .company_wrap .partenrship_form{ background:#fff; padding:1em 3em 3em 3em; border-radius:1em} .company_wrap .partenrship_form .box_st.st1{ background:none; border:none} .company_wrap .partenrship_form textarea.editor.input_st{ height:10em} .company_wrap.greetings{ background:#f5f5f5} .company_wrap.partnership{ background:url(../images/sub/company_partnership.jpg) no-repeat center top; background-size:cover} .company_wrap.partnership .bg{ background:#000; filter:alpha(opacity=60);opacity:0.6;} .company_wrap.site{ background:url(../images/sub/company_site.jpg) no-repeat center top; background-size:cover} .company_wrap.site .bg{ background:#fff; filter:alpha(opacity=60);opacity:0.6;} .greetings_img{ float:left; width:35%} .greetings_tt{ float:right; width:60%} .greetings_tt .t1{ font-size:1.875em; color:#111; margin-bottom:1em; line-height:1.r; letter-spacing:-2px} .greetings_tt .t2{ font-size:1.063em; color:#666; line-height:1.5; padding-left:.25em} .history_tit{ height:10em; background:url(../images/sub/company_history.jpg) no-repeat center top; background-size:cover; position:relative} .history_tit .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-image: linear-gradient(to left, #173ab2 0%, #008bb8 50%, #173ab2 100%); background:#000; opacity:.5} .history_tit .va{ position: relative} .history_tit .t1{ color:#fff; font-weight:500; line-height:1.7; font-size:1.125em} .history_wrap{ position:relative} .history_wrap:before{ content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ddd} .history_wrap .end{ position:relative; display:block; margin:0 auto; width:.75em; height:.75em; background:#173ab2; border-radius:100%} .history_wrap .history{ position:relative; padding:4em 0 0 0} .history_wrap .history > li:nth-child(2n-1){ padding-left:50%} .history_wrap .history > li:nth-child(2n){ padding-right:50%; text-align:right} .history_wrap .history > li .in{ padding:0 3em; margin-bottom:3em; position:relative} .history_wrap .history > li .in:before{ content:""; position:absolute; left:0; top:.688em; width:2em; height:1px; background:#ddd} .history_wrap .history > li .in:after{ content:""; position:absolute; left:-.25em; top:.5em; width:.5em; height:.5em; background:#008bb8; border-radius:100%} .history_wrap .history > li:nth-child(2n) .in:before{ left:auto; right:0} .history_wrap .history > li:nth-child(2n) .in:after{ left:auto; right:-.25em} .history_wrap .history > li .in .date{ font-size:2em; font-family: Arial, Helvetica, sans-serif; letter-spacing:-2px; line-height:1; margin-bottom:.25em} .history_wrap .history > li .in .tt{ font-size:.938em; color:#666} .contact_info{ font-size:1em !important; padding:1em 0; border-bottom:2px dashed #ddd; margin:-1em 0 0 0} .contact_info > li{ margin:1em 0 0 3em; position:relative; height:5em; padding-left:4em; text-align:left} .contact_info > li .xi{ position:absolute; left:0; top:1em; width:3em; height:3em; line-height:3em; text-align:center; border-radius:100%; background:#999; color:#fff; font-size:1em; margin-right:.5em} .contact_info > li.c1 .xi{ background: #0066CC;} .contact_info > li .xi:before{ font-size:1.25em} .contact_info > li .tit{ color:#111; font-size:.875em; margin-right:.5em} .contact_info > li .tt{ color:#777; font-size:.875em; display:inline-block} .contact_info > li a.tt{ text-decoration:underline; display:inline-block;} /**/ #contents .doc.login_wrap{background-image: linear-gradient(to top, #6f86d6 0%, #48c6ef 50%, #6f86d6 100%); padding:4em 0 0 0} .login_wrap .login_box{ background:#fff; box-shadow:1px 1px 10px -1px rgba(0,0,0,.7);} .login_w{ width:30em; max-width:100%; margin:0 auto} .login_wrap .wrap_in{ padding:3em} .login_wrap .login_box .wrap_tit{ color:#002654; text-align:center; margin-bottom:1em} .login_wrap .login_box .wrap_tit .t1{ display:block} .login_wrap .login_box .wrap_tit .t2{ display:block; font-size:2em; font-weight:500} .login_wrap .login_box .form_wrap > li{ margin-bottom:.5em} .login_wrap .login_box .form_wrap .inp_wrap{ display:block; position:relative; padding:1em 0 1em 8em} .login_wrap .login_box .form_wrap .inp{ position:relative; z-index:1; border:none; width:95%; font-weight:500; font-size:.938em} .login_wrap .login_box .form_wrap .inp_wrap .line{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ccc; box-sizing:border-box} .login_wrap .login_box .form_wrap .inp_wrap .tit{ position:absolute; left:1em; top:0; width:6em; height:100%; text-align:left; color:#777} .login_wrap .login_box .form_wrap .inp_wrap .tit .tt{ padding-left:.25em; font-size:.813em;} .login_wrap .login_box .form_wrap .inp_wrap .tit:after{ content:""; position:absolute; right:0; top:35%; height:30%; width:1px; background:#ddd} .login_wrap .login_box .form_wrap .inp:focus ~ .line, .login_wrap .login_box .form_wrap .inp:hover ~ .line{ border-color:#6f86d6} .login_wrap .login_box .form_wrap .inp:focus ~ .tit{ color:#333} .login_wrap .login_box .form_wrap .check_wrap > label{ display:block; font-size:.813em} .login_wrap .login_box .form_wrap .btn{ display:block; width:100%; height:3em; border:none; color:#fff; font-weight:500; font-size:1.125em; background:#6f86d6} .login_wrap .login_box .form_wrap .btn.c1{ background:#002654} .login_wrap .login_box .logo{ text-align:center; margin-top:3em} .login_wrap .login_box .logo img{ width:5em} .login_wrap .link_box{} .login_wrap .link_box .link{ font-size:.813em; color:#fff; margin-bottom:1em} .login_wrap .link_box .link > dt{ float:left} .login_wrap .link_box .link > dd{ float:right} .login_wrap .link_box .link > dd > a{ color:#fff; text-decoration:underline} .login_wrap .link_box .link > dd > a:hover{ color:#002654} .agree_box{ border:1px solid #ddd; background:#fff; border-radius:5px} .agree_box .con{ padding:2em; font-size:.875em; color:#666; line-height:1.5} .agree_box .con.scrollst{ height:15.5em; overflow-y:scroll;} .agree_box .con.h1{ height:7.5em} .agree_box .btn{ border-top:1px solid #ddd; background:#f5f5f5; padding:.5em 2em; text-align:right; font-size:.813em} .agree_box .btn label{ margin-left:2em} .agree_box table th, .agree_box table td{ font-size: .938em} .step_tit{ text-align:center; margin:.5em 0 1em 0} .step_tit .t1{ color:#aaa; font-size:.75em; font-weight:300; letter-spacing:.5em; margin-bottom:.5em} .step_tit .t2{ color:#111; font-size:2.125em; font-weight:500} .step_st{ text-align:center} .step_st > li{ width:8%; margin:0 10%} .step_st > li .in{ position:relative} .step_st > li .line{ } .step_st > li .icon_wrap{ position:relative} .step_st > li .icon_wrap .icon{ position:absolute; left:0; top:0; width:100%; height:100%} .step_st > li .icon_wrap .icon .xi{ font-size:2em; color:#fff} .step_st > li .icon_wrap .line{ position:absolute; top:50%; left:50%; width:350%; height:1px; background:#ddd} .step_st > li .t1{ font-weight:700; color:#aaa; margin:.5em 0 .125em 0} .step_st > li .t2{ font-size:.813em; color:#aaa} .step_st > li:last-child .icon_wrap .line{ display:none} .step_st > li.on .t1{ color:#002654} .step_st > li.on .t2{ color:#002654} .step_st2{ margin:-.5em 0 0 -.5em} .step_st2 > li .in{ padding:.5em 3em; color:#fff; margin:.5em 0 0 .5em; position:relative} .step_st2 > li .in:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#333; transform:skewX(-25deg);} .step_st2 > li .in .twrap{ position:relative} .step_st2 > li .in .twrap .xi{ font-size:1.75em; vertical-align:middle} .step_st2 > li .in .twrap .tt{ font-size:1.125em; font-weight:500; vertical-align:middle; padding:0 .313em} .step_st2 > li.c1 .in:before{ background:#0099CC} .step_st2 > li.c2 .in:before{ background: #0066FF} .step_st2 > li.c3 .in:before{ background: #003399} .join_btn{ text-align:center; margin:3em 0} .join_btn .btn{ width:15em; height:3.5em; background:#48c6ef; border:none; background: linear-gradient(275deg, #48c6ef 0%,#6f86d6 100%); font-size:1.313em; font-weight:500; color:#fff} .join_benefit{ margin:1em 0} .join_benefit .tit_wrap{ border:1px solid #ddd; border-bottom:none; background:#f5f5f5; padding:1em} .join_benefit .tit_wrap > *{ margin-bottom:0} .join_benefit .list > li{ width:25%} .join_benefit .list > li .in{ border:1px solid #ddd; margin:-1px -1px 0 0; padding:2em; text-align:center} .join_benefit .list > li .tit{ font-weight:500; font-size:1.313em} .join_benefit .list > li .xi{ display:block; font-size:4em} .join_benefit .list > li .tt{ margin-top:1em; padding-top:1em; border-top:1px dotted #aaa; color:#666; line-height:1.5em; height:4.5em; overflow:hidden} /**/ .mall_view_top .mall_view_img{ float:left; width:52%} .mall_view_top .mall_view_img .big{ border:1px solid #ddd; box-shadow:0 3px 5px rgba(0,0,0,.3); margin-bottom:.5em} .mall_view_top .mall_view_img .vod{ position:absolute; left:0; top:0; width:100%; height:100%} .mall_view_top .mall_view_info{ float:right; width:45%; position:relative} .mall_view_top .mall_view_info .prod_icon{ position:absolute; right:0; top:-2em} .mall_view_top .mall_view_info .prod_tit{ border:1px solid #333; border-left:none; border-right:none; padding:1em .5em} .mall_view_top .mall_view_info .prod_tit .t1{font-size:1.25em; color:#111} .mall_view_top .mall_view_info .prod_tit .t2{ color:#999; font-size:.75em; padding-top:10px} .mall_view_top .mall_view_info.st1{ float:none; width:100%; margin-bottom:2em} .mall_view_top .mall_view_info.st1 .prod_tit{ background: #364361; text-align:center; font-weight:500} .mall_view_top .mall_view_info.st1 .prod_tit .t1{ color:#fff} .mall_view_top .mall_view_total{ text-align:right; padding:1.25em 1.5em; border-top:1px solid #333; background:#f7f7f7} .mall_view_top .mall_view_total .no{ margin-left:.5em; font-weight:700; font-size:1.25em; vertical-align:baseline} .mall_view_top .mall_view_total .tt{ font-size:.938em; vertical-align:baseline} .mall_view_top .mall_view_btn{ margin:0 -5px -5px 0; margin-top:1em; padding-left:55%; overflow:hidden} .mall_view_top .mall_view_btn > li *{ transition:.3s} .mall_view_top .mall_view_btn > li.st1{ width:40%} .mall_view_top .mall_view_btn > li.st2{ width:30%} .mall_view_top .mall_view_btn > li.st3{ width:30%} .mall_view_top .mall_view_btn > li .btn{ display:block; line-height:3.5em; margin:0 5px 5px 0; text-align:center; border:1px solid transparent; position:relative} .mall_view_top .mall_view_btn > li .btn .icon{ font-size:1.5em; padding-right:5px} .mall_view_top .mall_view_btn > li.st1 .btn{ background: #CC0000; color:#fff} .mall_view_top .mall_view_btn > li.st2 .btn{ background:#333; color:#fff} .mall_view_top .mall_view_btn > li.st3 .btn{ background:#fff; border-color:#aaa; color:#777} .mall_view_top .mall_view_btn > li .btn .arrow{ width:0; overflow:hidden} .mall_view_top .mall_view_btn > li .btn .arrow:after{ content:"\e93f"; padding-left:3px} .mall_view_top .mall_view_btn > li:hover .btn .arrow{ width:20px} .mall_view_top.st1 .mall_view_img{ width:45%} .mall_view_top.st1 .mall_view_info{ width:52%} .mall_view_wrap{ min-height:18em; padding:2em; width:auto !important} .mall_view_wrap.st1{ padding:0} .vol_st{ display:inline-block; *display:inline; zoom:1;} .vol_st .btn, .vol_st .inp{ float:left; line-height:2.25em; height:2.25em; font-size:1em; border:1px solid #ddd; box-sizing:border-box; background:#fff} .vol_st .btn{ width:2.5em; color:#111} .vol_st .btn.minus .xi:before{content:"\e91b"} .vol_st .btn.plus .xi:before{content:"\e914"} .vol_st .btn:hover{ background:#f5f5f5} .vol_st .inp{ width:3em; border-left:none; border-right:none;text-align:center} .vol_st .inp[disabled="disabled"]{ border:none} .no_cart{ padding:5em 0; font-size:.938rem; color:#999; text-align:center; border-bottom:1px solid #ddd} .no_cart .xi{ font-size:4.5em; vertical-align:middle; color:#aaa; padding-right:.125em} td .no_cart{ border-bottom:none} .table_st .total_wrap{ text-align:right; padding:1.5em 2.5em!important; position:relative; font-size:1em;} .table_st .total_wrap:before, .table_st .total_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:#111} .table_st .total_wrap:after{ top:auto; bottom:-1px; background:#ddd} .table_st .total_wrap .icon{ padding:0 1em; color:#111; font-size:1.75em; margin-top:-.1em} .tt_point{ font-family:tahoma,sans-serif; font-weight:bold; color:#ea4841; font-size:1.125em} .tt_price, .tt_price *{ vertical-align: baseline} .tt_price .no{ font-family:tahoma,sans-serif; font-weight:bold; font-size:1.25em; color:#111; padding-right:.25em; letter-spacing:-1px} .tt_state1{ color:#777} .tt_state2{ color: #CC3333} .tt_state3{ color: #006699} .order_wrap{ position:relative; padding-right:23em} .order_wrap .fixIn{ width:20em; right:0; top:0} .order_wrap .fixIn .fixObj{ width:20em;} .order_fix .in{ border:2px solid #333; padding:2em 1.5em; background:#fff} .order_fix .in .orderfix_tit{ font-size:1.5em; font-weight:700; color:#111; padding-bottom:1em; margin-bottom:.5em; border-bottom:1px solid #333} .order_fix .in .orderfix_con > li{ position:relative; line-height:3em} .order_fix .in .orderfix_con > li .tit{ font-size:.813em; color:#999; position:absolute; left:0; top:0} .order_fix .in .orderfix_con > li .con{ text-align:right; font-size:.813em} .order_fix .in .orderfix_con > li .con *{ color:#333; vertical-align: middle} .order_fix .in .orderfix_con > li .con .xi{ padding:.25em .25em 0 0} .order_fix .in .orderfix_con > li.st1{ border-top:1px solid #333; margin-top:1em; font-size:1.125em} .order_fix .in .orderfix_con > li.st1 .tit{ color:#111} .order_fix .in .orderfix_con > li.st1 .con{} .order_fix .in .orderfix_con > li.st1 .con *{ color:#ab0000} .order_fix .in .orderfix_btn{ margin-top:.5em; width:100%; padding:1em 0; height:auto; font-size:1.125em} .order_fix .in .orderfix_agree{ font-size:.813em; color:#333; margin-top:1em; padding:1em .5em; border:1px solid #111} .order_fix .in .orderfix_agree .label_st .xi{ font-size:1.625em} .order_fix .in .orderfix_agree .label_st span{ max-width:85%; padding-left:.25em} .my_search_wrap{ padding:2em; border:1px solid #ddd; font-size:.875em; color:#666} .my_search_wrap .tit{ font-size:1.188em; margin-bottom:.5em; color:#111} .my_search_wrap .tit .xi{ font-size:1.5em; vertical-align: top; margin-top:-.2em} .my_search_wrap .input_st{ min-width:5em} .coupon_wrap{ background:#f7f7f7; box-shadow:0 3px 0 rgba(0,0,0,.2)} .coupon_wrap .wrap1{ float:left; width:35%} .coupon_wrap .wrap2{ float:left; width:65%} .coupon_wrap .wrap_in{ padding:0 3em; height:12em; position:relative; overflow:hidden} .coupon_wrap .wrap_in .circle{ position:absolute; top:50%; width:4em; height:4em; margin-top:-2em; background:#fff; border-radius:100%; box-shadow:0 1px 3px rgba(0,0,0,.5) inset} .coupon_wrap .wrap_in .va{ position:relative; width:100%} .coupon_wrap .wrap1 .wrap_in .circle{ left:-2em} .coupon_wrap .wrap2 .wrap_in .circle{ right:-2em} .coupon_wrap .wrap1 .wrap_in{ background:#6aadff; border-right:5px dashed #f7f7f7; padding-left:3em} .coupon_wrap .wrap2 .wrap_in{ padding-right:6em} .coupon_wrap .wrap1{ color:#fff} .coupon_wrap .wrap1 .tt .t1{ font-size:1.875em; vertical-align:baseline; display:inline-block} .coupon_wrap .wrap1 .tt .t2{ font-size:1.125em; vertical-align:baseline; display:inline-block} .coupon_wrap .wrap1 .no{ font-size:3em; font-weight:700} .coupon_wrap .wrap2 .wrap_in{ text-align:left} .coupon_wrap .wrap2 .tt{ color:#333; font-size:1.25em; margin:1em 0 .5em 0} .coupon_wrap .wrap2 .inp_wrap{ position:relative; padding-right:5em} .coupon_wrap .wrap2 .inp_wrap .inp{ border:1px solid #ddd; background:#fff; padding:.75em 1em; width:100%; box-sizing:border-box} .coupon_wrap .wrap2 .inp_wrap .btn{ position:absolute; right:0; top:0; width:5em; height:100%; background:#0abb82; color:#fff; border:none} /**/ .lecture_tab{ position:relative; border-top:2px solid #333} .lecture_tab:before, .lecture_tab:after{ content:""; position:absolute; right:0; bottom:0; z-index:1} .lecture_tab:before{ width:100%; height:1px; background:#aaa; bottom:-1px} .lecture_tab:after{ width:1px; height:100%; background:#fff} .lecture_tab .list > li{ width:20%} .lecture_tab .list > li > .in{ display:block !important; height:3.5em; color:#777; position:relative; font-size:.938em} .lecture_tab .list > li > .in:after{ content:""; position:absolute; left:-1px; bottom:-1px; width:100%; height:100%; border:1px solid #eee; border-left:none; border-top:none} .lecture_tab .list > li > .in .va{ position:relative; z-index:1} .lecture_view_top{ padding:1.5em 3em 1.5em 1.5em; box-shadow:1px 1px 3px -1px rgba(0,0,0,.2); border-radius:5px; border:1px solid #ddd; position:relative} .lecture_view_top .di_wrap > li{ vertical-align:middle} .lecture_view_top .wrap_prod{ width:70%} .lecture_view_top .wrap_prog{ width:14%; margin:0 1.5%} .lecture_view_top .wrap_btn{ width:13%} .lecture_view_top .prod_tt .tt{ font-size:1.188rem} .lecture_view_top .prod_tt a:hover{ text-decoration:underline} .lecture_view_top .state{ margin-top:.5em; width:6.25em; text-align:center} .lecture_view_top button.input_st{ font-size:.875em} .lecture_view_top .favorite{ position:absolute; right:.5em; top:.25em; font-size:1.5em} /**/ .page_sec0{ margin-top:0 !important} .page_sec1{ margin-top:1em !important} .page_sec2{ margin-top:2em !important} .page_sec3{ margin-top:3em !important} .page_sec4{ margin-top:4em !important} .page_tit{ padding-bottom:.5em } .page_tit .t1{ font-weight:500; font-size:1.313em} .page_tit .t1:before{ content:""; display:block; width:1.75em; height:.125em; background:#002654; margin-bottom:.5em} .page_tit .t2{ font-weight:500; font-size:1.125em; color:#333} .page_tit .t2 .xi{ width:2em; line-height:2em; height:2em; text-align:center; border-radius:100%; border:1px solid #ddd; font-size:1em; margin-right:.313em; margin-top:-.188em} .page_tit .t2 .xi:before{ font-size:1.063em} .page_tit .t3{ font-weight:500; font-size:1em; color:#444; padding-left:1.5em; position:relative} .page_tit .t3:before{ content:""; position:absolute; left:.75em; top:.75em; width:.313em; height:.313em; background:#333} .page_tit .t4{ font-weight:700; font-size:2em} .page_tit2{font-family:tm, sans-serif; font-size:1.625em; text-align:center; margin-bottom:.5em; margin-top:.25em; color:#111} .page_tit2 .c1{ color:#003399} .page_tit3{ overflow:hidden; text-align:center; margin:2em 0 1.25em 0} .page_tit3 .twrap{ position:relative; display:inline-block; *display:inline; zoom:1; padding:0 2em} .page_tit3 .twrap:before, .page_tit3 .twrap:after{ content:""; position:absolute; width:600px; height:1px; top:50%; right:100%; background:#ddd} .page_tit3 .twrap:after{ left:100%} .page_tit3 .tt{ font-weight:700; font-size:1.625em; color:#111} .box_st{ border:1px solid #ddd; border-radius:1em; padding:3em} .box_st.st1{ background:#f8fbff; border-radius:0; padding:2em 1em 1em 1em; border-color:#dde1e7} .box_st.st2{ padding:1.5em; border-radius:2px} .tbox{ text-align:center} .tbox .t1{ font-size:2.5em; color:#111; letter-spacing:-3px; word-spacing:3px} .tbox .t2{ font-size:.938em; color:#666; line-height:1.5; margin:1.5em 0} .tbox .t3{ font-size:1.313em; color:#777; font-weight:300; margin:1em 0} .tbox .t4{ font-size:2em; letter-spacing:-2px; word-spacing:2px} .tbox .order_no{ display:inline-block; *display:inline; zoom:1; background: #003399; padding:0 2em; color:#fff; border-radius:3em; line-height:2.5em} .tbox .order_no .tt{ font-size:.875em} .tbox .order_no .no{ font-family:tahoma,sans-serif; font-size:1.5em; letter-spacing:1px} .hexagon { position: relative; overflow: hidden; background:transparent; width: 100%; height:0; padding-bottom:100%; transform: rotate(-30deg) skewX(30deg) scaleY(.866)} .hexagon:before { position: absolute; right: 6.7%; bottom: 0; left: 6.7%; top: 0; transform: scaleY(1.155) skewX(-30deg) rotate(30deg); background: linear-gradient(275deg, #ddd 0%,#ccc 100%); content: '';} .on .hexagon:before{ background: linear-gradient(275deg, #48c6ef 0%,#6f86d6 100%);} .hover_st{ position:relative; padding-right:1.5em !important; padding-left:1.5em !important; overflow:hidden; transition:.3s} .hover_st .arrow{ position:absolute; width:3em; height:100%; right:-3em; top:50%; margin-top:-.438em; line-height:1; font-size:1em; transition:.3s} .hover_st .arrow:before{ content:"\e93e"} .hover_st:hover{ padding-right:3em !important; padding-left:0 !important} .hover_st:hover .arrow{ right:0} .tab_st{ display:inline-flex; border:1px solid #ddd; border-radius:3em; box-sizing:border-box} .tab_st > li{ float:left; width:12em } .tab_st > li > a{ display:block; padding:0 2em; height:3em; border-radius:3em; color:#666; position:relative} .tab_st > li > a .va{ font-size:1em; font-weight:400} .tab_st > li.on > a{ background:#6f86d6; background-image: linear-gradient(225deg, #6f86d6 0%, #48c6ef 100%); color:#fff; z-index:1; box-shadow:1px 1px 3px rgba(0,0,0,.3)} .tab_st::after{ content:""; display:block; clear:both} .tab_st1{ text-align:center; padding-left:1px; border-bottom:2px solid #003366} .tab_st1 > li{ width:20%} .tab_st1 > li > a{ display:block; border:1px solid #ddd; border-bottom:none; padding:1em 0; margin-left:-1px; position:relative; color:#777} .tab_st1 > li.on > a{ background: #003366; border-color:transparent; z-index:1; color:#fff} .progress{ position:relative; overflow:hidden; height:0} .progress .no_wrap{ position:absolute; left:0; top:50%; width:100%} .progress .no_wrap .no{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.25em; color:#111; letter-spacing:-2px} .progress .no_wrap .per{ font-size:.688em; color:#999; padding-left:.25em} .prod_tt .img{ width:30%; max-width:10em; vertical-align:middle} .prod_tt .tt{ width:95%; padding-left:5%; vertical-align:middle} .prod_tt .img + .tt{ width:65%} .prod_tt .tt .t1{ font-size:1em; font-weight:500; color:#111; margin-bottom:.5em} .prod_tt .tt .t2{ font-size:.813em; color:#777} .prod_tt .tt .t3{ font-size:1em; color:#002654; font-weight:500} .prod_tt .tt .t3 .date:before{ content:"\e9a4"} .prod_tt .tt .t4{ font-size:1.125em; color:#111; font-weight:500; margin-bottom:.5em} .prod_tt .tt .t5{ font-size:.875em; color:#777} .prod_tt .tt .dv{ display:inline-block; *display:inline; zoom:1; position:relative; padding-right:1em; margin-right:1em; line-height:2em} .prod_tt .tt .dv:after{ content:""; position:absolute; right:0; top:30%; height:40%; width:1px; background:#ccc} .prod_tt.st1 .img{ max-width: 12em} .prod_tt.st2 .img{ max-width: 8em} .prod_tt.st1 .tt .t2{ font-size:.938em} .price_tt .before{ color:#999; text-decoration:line-through} .price_tt .after{ display:inline-block; *display:inline; zoom:1; position:relative} .price_tt .after .t1{ font-size:1.25em; font-weight: bold; font-family:tahoma,sans-serif; color:#990000} .price_tt .after .t2{ color:#333; padding-left:.125em} .price_tt .sale{ position:absolute; right:-2.625em; width:2.5em; height:2.5em; bottom:.313em; line-height:1; background:#d20000; color:#fff; border-radius:100%; text-align:center} .price_tt .sale .no{ font-weight:700; vertical-align:baseline} .price_tt .sale .per{ font-size:.75em; vertical-align:baseline; padding-left:1px} .price_tt .sale .xi{ display:block; font-size:.75em; margin-bottom:-.313em} .price_tt .sale .xi:before{content:"\e905"} .price_tt.st1 .before{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; padding-bottom:.125em} .price_tt.st1 .after{ padding-left:3em; margin-left:1em} .price_tt.st1 .sale{ left:0; top:-.438em} .price_tt .p0{ font-size:.875em} .price_tt .p0:after{ content:"\e90b"; font-family:xeicon!important; padding:0 .5em; font-size:1.5em; color:#aaa; vertical-align:top} .price_tt .p0 .no{ text-decoration:line-through} .price_tt .no{ font-family:tahoma,sans-serif; font-weight:bold} .price_tt .won{ font-size:.875em} .price_tt .p1{ color: #CC0000} .vod_img{ position:relative; cursor:pointer} .vod_img:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1; filter:alpha(opacity=70);opacity:0.7; display:none} .vod_img:after{ font-family:xeicon!important; content:"\ea3f"; color:#fff; font-size:2.5em; position:absolute; left:50%; top:50%; z-index:2; margin:-.5em 0 0 -.5em; display:none} .vod_img:hover:before, .vod_img:hover:after{ display:block} .memo_wrap{ border:1px solid #ddd; border-radius:.5em; padding:1.5em} .memo_wrap *{ vertical-align: top} .memo_wrap .t1{ font-size:.875em; color:#555; line-height:1.5} .memo_wrap .t2{ font-size:.813em; color:#111; line-height:1.5} .memo_wrap .c1{ color:#FF3333} .memo_wrap .tel{ font-family:tahoma,sans-serif; font-weight:bold; color:#111; font-family:1.25em} .memo_wrap .tel .xi{ margin-right:.25em} .li_st > li{ list-style:disc outside; margin-left:1em; margin-top:.5em} .li_st:first-child > li:first-child{ margin-top:0} .line_st{ border-top:1px solid #ddd; margin-top:1.5em; padding-top:1.5em} .tt_st1{ font-weight:500; color:#111; font-size:1.063em} .tt_st2{ color:#111; font-size:.938em} .tt_st2 *{ vertical-align:top} .tt_st_en{ font-family:tahoma,sans-serif; color:#111; font-weight:bold; font-size:1.063em; letter-spacing:0} .mpWrap{ position: absolute; z-index:20000; box-shadow:1px 1px 5px 2px rgba(0,0,0,.3); left:0; top:0; width:500px; height:100vh; min-width:500px; max-width:100%; min-height:250px; max-height:100vh; padding-bottom:3em !important; box-sizing:border-box; transition:1s; transform:translateY(20em); opacity:0} .mpWrap.hide{ display:none} .load .mpWrap{ transform:translateY(0); opacity:1} .mpWrap.st1{ background: linear-gradient(0deg, #161b20 0%, #35404d 50%, #161b20 100%); box-sizing:border-box; padding:1em} .mpWrap.st1:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/main/pop1_bg.png) no-repeat left top; background-size:100% auto; opacity:.6} .mpWrap.st1 .line{ position: absolute; height:100%; width:100%; box-sizing:border-box; } .mpWrap.st1 .wrap_in{ position:relative; height:100%; border: .5em solid; border-image-source: linear-gradient(45deg, #59483d, #c2a68c, #59483d);border-image-slice: 1; box-sizing:border-box; } .mpWrap.st1 .wrapH{ position:relative; height:100%; background:#fff} .mpWrap.st1 .mpCon{padding:1.5em; letter-spacing:0} .mpWrap.st1 .mpTit{ margin:1.5em; margin-bottom:0; background:linear-gradient(45deg, #59483d 0%, #c2a68c 50%, #59483d 100%); text-align:center; padding:1em 0; border-radius:5px; color:#fff; font-weight:700} .mpWrap.st1 .deco{ position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-size:contain} .mpWrap.st1 .deco.d1{ width:10%; max-width:4em; left:0; top:0; background-image:url(../images/main/pop1_d1.png); background-position:left top} .mpWrap.st1 .deco.d2{ width:10%; max-width:4em; right:0; top:0; background-image:url(../images/main/pop1_d2.png); background-position:right top;z-index:-1;} .mpWrap.st1 .deco.d4{ right:0; top:0; background-image:url(../images/main/pop1_d4.png); background-size:100% auto; z-index:auto; opacity:.7} .mpWrap .wrap_close{ position:relative; line-height:3em; color:#fff} .mpWrap .wrap_close .label_st{ font-size:.875em; margin-left:2em} .mpWrap .wrap_close .label_st:first-child{ margin-left:0} .mpWrap .wrap_close .btn{ position:absolute; right:-1em; bottom:0; width:3em; height:100%; color:#fff; background:#000; border:none} .mpWrap .wrap_close .btn .xi:before{content:"\e921"} .swiperPause{ position:absolute; z-index:10; right:2em; bottom:1em; width:4em; height:4em; line-height:4em; background:#111; color:#fff; opacity:.7; text-align:center; border:1px solid rgba(255,255,255,.1); cursor:pointer} .swiperPause .xi{ font-size:1.75em} .swiperPause.play{ opacity:1} .swiperPause.play .xi:before{ content:"\ea3e"} .swiperPause:hover{ opacity:1} .noticeSlide .swiper-wrapper{ height:7em} .noticeSlide .swiper-wrapper .el{ line-height:1.75em; height:1.75em} .gnb_banner{ display:block; margin-top:2em; background:#002654; color:#fff !important; padding:1em; font-weight:500; position:relative} .gnb_banner:after{content:"\e93f"; font-family:xeicon!important; position:absolute; right:.5em; top:50%; line-height:1em; margin-top:-.5em}