﻿@charset 'utf-8';
body{font:1.1em/1.2em 'NanumSquare', sans-serif;}
/*layout*/
.wrapper{width:100%;height:100%;margin:0 auto;}
.wrapper img{display:block;}
section{margin:0 auto;}
section img{width:100%;}
.container{padding:50px 30px;}
.container.lm{padding:50px 30px 100px;}
.container.sm{padding:30px 15px 60px;}
/*layout - nav*/
#gnb{width:100%;height:100%;position: fixed;top:0;left:0;z-index:-1; background-color:rgba(0,0,0,0);transition: all 0.3s ease;}
#gnb .menu{width:77%;height:100%;background-color:#fff;position: relative;top:0;left:0;overflow: auto;transform: translateX(-100%);transition: all 0.3s ease;box-sizing: border-box;}
#gnb .menu .info{margin-top:33px;padding-left:29px;margin-bottom: 30px;}
#gnb .menu .info .user{display:block;margin:10px 0;}
#gnb .menu .info .logout{font-size: .8em;color:rgba(0, 0, 0, 0.56);}
#gnb .menu .info a.join,
#gnb .menu .info a.login{color:#000;font-weight: bold;display:inline-block;position: relative;}
#gnb .menu .info a.join{padding-right:15px;}
#gnb .menu .info a.join::after{content:'';position: absolute;top:3px;right:-2px; width:2px;height:80%;background: rgba(0, 0, 0, 0.22);}
#gnb .menu .info a.login{margin-left:15px}
#gnb.active{z-index:999;background-color:rgba(0,0,0,.8);}
#gnb.active .menu{transform: translateX(0px);}
#gnb .download{width:100%;height:50px;margin-top:50px;clear: both; display:block;position:sticky;bottom:0;left:0;background:#ff7d27;text-align:center;line-height:50px;color:#fff;font-size: .9em;font-weight: bold;}
#gnb .download i{display: inline-block;width:22px;height:22px;background:url('../images/icon_axiom.png') no-repeat; background-size: 22px;vertical-align: middle;margin-right:5px;}
#gnb .touch{width:23%;height:100%;background: transparent; position: absolute;top:0;right:0;margin:0;padding:0;box-sizing: border-box;}
@media only screen and (min-height: 1000px) { 
	#gnb .download{position: fixed;}
}

#lnb{width:100%;height:100%;position: fixed;top:50px;right:0;z-index:-1; background-color:rgba(0,0,0,0);transition: all 0.2s ease;}
#lnb .menu{width:55%;background-color:#fff;padding-bottom:25px; position: absolute;top:0;right:0;overflow: auto;opacity: 0;transition: all 0.4s ease;box-shadow: 0px 7px 19px 0 rgba(0, 0, 0, 0.25);}
#lnb.active{z-index:998;background-color:rgba(0,0,0,.8);}
#lnb.active .menu{opacity:1;}
@media only screen and (max-height: 360px) { 
	#lnb .menu{height:100%;padding-bottom: 100px;}
}


nav.menu-list{padding:0 25px;}
nav.menu-list a{color:#7f7f7f;font-size:.9em;}
nav.menu-list a.active{color:#ff7d27;}
nav.menu-list ul{margin-top:26px;}
nav.menu-list ul li{margin-top:5px;}
nav.menu-list ul li.title{font-size: .8em;font-weight: bold;}
nav.menu-list.gnb{padding:0 29px;}
nav.menu-list.gnb ul li.title{position: relative;}
nav.menu-list.gnb ul li.title::before{content:'';width:20px;height:3px;background:#ff7d27;position: absolute;top:8px;left:-29px;}

/*layout - header*/
/*#header{background:#fff;position: relative;border-bottom:1px solid #ddd;text-align: center;}*/
/*#header .logo{display:inline-block;height:30px;margin-top: 10px;margin-bottom:5px}*/
#header{background:#fff;position: relative;border-bottom:1px solid #ddd;}
#header .logo{display:inline-block;height:30px;margin-top: 10px;margin-bottom:5px;margin-left:55px;}
#header .logo img{height:100%;display:block;}
#header .btn-menu{width:50px;height:50px;display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);background:url('../images/icon_menu@x2.png') no-repeat center;background-size: 15px 13px;}
#header .btn-menu.active{transform: rotate(90deg);}
#header .btn-my{width:50px;height:50px;display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);background:url('../images/icon_user@x2.png') no-repeat center;background-size: 26px 26px;}
#header .btn-my.active{background:url('../images/icon_user_on@x2.png') no-repeat center;background-size: 26px 26px;}

/*layout - main*/
#main{width:100%;height:100%;min-height:1px;-webkit-box-sizing:border-box;box-sizing:border-box;}
#main .wrapper-title{height:87px;text-align: center;padding-top:30px;}
#main h2.title{color:#fff;position: relative;z-index: 1;font-size: 1.2em; display: inline-block;animation: animate-title .5s forwards;}
#main h2.title::after{content:'';position: absolute;left:0;bottom:0; width:100%;height:9px;background: #2d3950;opacity: .5;z-index: -1;transform-origin:center;animation: animate-title-line .4s forwards;}
@keyframes animate-title{0%{transform:scale(.9);} 100%{transform:scale(1);}}
@keyframes animate-title-line{0%{transform:scalex(0);} 100%{transform:scale(1.05);}}
#main .wrapper-title p.cont{color: rgba(255, 255, 255, 0.6);font-size: .7em;line-height:1.3em;padding-top:6px;}
/*layout - main > wrapper-title */
#main.intro .wrapper-title{background:#6d7876 url('../images/intro/bg_title.png') center top no-repeat;background-size:cover;}
#main.study .wrapper-title{background:#838894 url('../images/study/bg_title.png') center top no-repeat;background-size:cover;}
#main.order .wrapper-title{padding-top:15px;background:#77818b url('../images/order/bg_title.png') center top no-repeat;background-size:cover;}
#main.my .wrapper-title{padding-top:25px;background:#77818b url('../images/my/bg_title.png') center top no-repeat;background-size:cover;}
#main.comm .wrapper-title{padding-top:25px;background:#77818b url('../images/comm/bg_title.png') center top no-repeat;background-size:cover;}
#main.review .wrapper-title{padding-top:15px;background:#77818b url('../images/review/bg_title.png') center top no-repeat;background-size:cover;}

/*layout - footer*/
#footer {width:100%;position: relative; font-size:12px;line-height:19px;background:#e3e3e3;color:#848484;text-align:left;padding:25px 20px;}
#footer span{color:#454545;}
.dropdown {position: relative;display: inline-block;}
.dropdown-btn {width: 123px;height:34px;outline: none; letter-spacing:-0.4px;border:1px solid #c9c9c9; border-radius: 2px;background-color: #ffffff;font-size: 1em;color:#7b7b7b;font-weight: bold;cursor: pointer;text-align:left;padding-left:10px;}
.dropdown-btn img{display: block;position: absolute;top:15px;right:15px;transition: .3s;width:12px;}
.dropdown-content {height:auto; display: none; position: absolute;margin-bottom:50px; bottom:0; background-color: #f9f9f9;min-width: 123px;z-index: 1;border:1px solid #c9c9c9;padding:10px 0;}
/* .dropdown-content::after{content:'';width: 0;position: absolute;bottom: -16px;right:15px;border:8px solid #fff;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid transparent;} */
.dropdown-content::after{content:'';width:14px;height:14px;background: #f9f9f9;position: absolute;bottom: -8px;right:15px;transform:rotate(-135deg);border-bottom: transparent;border-left: 1px solid #c9c9c9;border-top:1px solid #c9c9c9;border-right: transparent;}
.dropdown-content a {color: black;padding: 6px 8px;display: block;text-align:left;}
.dropdown-content a:hover {background-color: #f1f1f1}
/* .dropdown.active .dropdown-content {display: block;}   */
.dropdown.active img{transform: rotate(180deg);}


/*layout - common*/
.video{width:100%;height:auto;position: relative;}
.video .play-control{position: absolute;top:0;left: 0;width:100%;height:100%;background:rgba(0,0,0,.5);text-align: center;} 
.video.active .play-control{display:none;}
.video .play-control a{width:50%;height:50%;display:block;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%); background:url('../images/btn_play.png') no-repeat center;background-size:50%;}
.video video{width:100%;padding:0;margin:0;display: block;}

/*page main*/
#main .wrapper-slider{width:100%;margin:0 auto;position: relative;}
#main .wrapper-slider .slider .slider-item > img{width:100%;}
#main .wrapper-slider .slider-paper{width:57px;height:23px;line-height:23px;overflow:hidden; background: rgba(0,0,0,.2);text-align:center;margin:0 auto; position: absolute;bottom:0;left:50%;margin-left:-29px;  z-index: 98;}
#main .wrapper-slider .slider-paper a{width:6px;height:6px;display:inline-block;background:url('../images/main/icon_visual_arrow.png') no-repeat;background-position:center;background-size:100%;}
#main .wrapper-slider .slider-paper a.active{background:url('../images/main/icon_visual_arrow_active.png') no-repeat;;background-size:100%;animation: animate-slider-paper .4s forwards;}
@keyframes animate-slider-paper{0%{transform:scale(0);} 100%{transform:scale(1);}}
#main section.download{text-align:center;background:url('../images/main/section_1_bg.png') no-repeat center;background-size:cover;background-color:#102c3c}
#main section.download h4{color:#fff;font-weight:normal;}

#main .summary{overflow: hidden;}
#main .summary li{width:100%;height:160px;float: left;color: #7c7c7c;font-size:15px;letter-spacing: -0.4px;margin-top:40px;}
#main .summary li:first-child{margin-left: 0;}
#main .summary li .header{height: 38px;line-height: 38px;margin-bottom: 27px;}
#main .summary li .header h4{line-height: 38px;float: left;color:#222;font-size: 22.5px;}
#main .summary li .header a.btn-link{width:94px;height:34px;line-height: 34px;display: block;border: 1px solid #ff7d27; border-radius: 2px;background: #fff;color:#ff7d27;float: right;text-align: center;}
#main .summary li .content{width: 100%;height:100%; text-align:left;overflow: hidden;}
#main .summary li .content .icon-app{display: block;float: left;width:56px;}
#main .summary li .content p{margin-left: 70px;margin-top:5px;font-size: .9em;}
#main .summary li .content h3{color:#222;margin-bottom: 15px;}
#main .summary li .content h3 i{font-size: .9em;color:#c6c6c6;vertical-align: middle;padding:0 10px;}
#main .summary li .content a.alink{color:#7c7c7c;line-height: 1.75em;display: block;}
#main .summary li .content span,
#main .summary li .content a{font-size: .9em;}



/*page - axiom > intro(axiom 소개)*/
#main .section-intro-1{height:100%;min-height:673px;background: url('../images/intro/bg_section_intro_1.png') repeat center; background-size: cover;}
/*page - axiom > 말하기 감각 개발 시스템*/
#main .section-intro-2 ul{margin:0 auto;}
#main .section-intro-2 ul li{border-bottom:1px solid #dbdbdb;padding:50px 0}
#main .section-intro-2 ul li article{padding:0 30px;}
#main .section-intro-2 ul li article p{margin-top:25px;}
/*page - 학습과정 > 수강대상*/
#main .section-study-1{height:100%;min-height:950px;background: url('../images/study/bg_section_study_1.png') repeat center; background-size: cover;}


/*page - 교재소개 > Sounds Master*/
#main.book .visual{height:100%;background-color: #d8dfec;}
#main.book .visual.ty1{background:url('../images/book/bg_visual_som.png') no-repeat center top; background-size:cover;}
#main.book .visual.ty2{background:url('../images/book/bg_visual_sm.png') no-repeat center top; background-size:cover;}
#main.book .visual.ty3{background:url('../images/book/bg_visual_cm.png') no-repeat center top; background-size:cover;}
#main.book .visual.ty4{background:url('../images/book/bg_visual_gm.png') no-repeat center top; background-size:cover;}
#main.book .book_area{width:100%;text-align:right;}
#main.book .book_area img{display: inline-block;margin-right:-20px;}
.bg-img1{height:100%;background:url('../images/book/02_som_06.png') no-repeat center top; background-size:cover;}

/*page - 강의신청 */
#main.order .order-list{margin:30px auto;}
#main.order .order-item{margin:55px 0;}
#main.order .order-item:first-child{border-top:none;padding-top:0;}
#main.order .order-item-img img{display: block;}
#main.order .order-item-content{height:auto;padding:2px;}
#main.order .order-item-content h4{color:#222;margin-top:18px;padding:10px 0;position: relative;font-size:1.0em;}
#main.order .order-item-content h4::before{content:'';position: absolute;top:0;left:0; width:6%;height:4px;background:#ff7d27; }
/*#main.order .order-item-content .title{font-size: .65em;letter-spacing:-.5px;}*/
/*#main.order .order-item-content .cont{color:#616161;font-size:.65em;padding:5px 0;}*/
#main.order .order-item-content .title{letter-spacing:-.5px;}
#main.order .order-item-content .cont{color:#616161;padding:5px 0;}
#main.order .order-item-btn{overflow: hidden;margin-top:20px;}
#main.order .order-item-btn .price{color:#fb4a4a;font-size: 1.1em;font-weight: bold;padding-left:0;float: left;;}
#main.order .order-item-btn .price del{font-size: .6em;color:#adadad;padding-left:2px;text-decoration: line-through;}
#main.order .order-item-btn a.collapsible{display: block;float:right;font-size:.7em;color:#2e97e9;font-weight:bold;margin-top:4px;}
#main.order .order-item-detail{width:100%;height:100%;background:#fff; margin-top:30px;display:none;text-align: center;}
.link{text-decoration:underline;}
#main.order .order-item-btn a.payment{display: block;float:right;font-size:.7em;color:#2e97e9;font-weight:bold;margin-top:4px;margin-right:10px;}

/*page - 커뮤니티 */
.title-line{height:40px;margin-bottom:20px;border-bottom: 2px solid #ececec;position: relative;clear: both;}
.title-line.un{border-bottom:none;margin-bottom:10px;}
.title-line h1{height:40px;line-height:40px; font-size:1em; display:inline-block;border-bottom:2px solid #ff7d27;position: absolute;bottom:-2px;left: 0;}
.title-line.un h1{height:30px;line-height:30px;border-bottom:none;}
ul.list{width:100%;}
ul.list li{padding:17px 18px;border-top:1px solid #ddd;}
ul.list li:first-child{border-top:none;}
ul.list li .title{color:#222;display: inline-block;padding-bottom:5px;}
ul.list li .info{color:#aaa;font-size: .7em;}
ul.list li .info .bar{display: inline-block;padding:0 5px;}
.paging{margin-top:35px; overflow: hidden;display:inline-block;border:1px solid #dddddd;border-radius: 3px;font-size:.8em;font-family: HelveticaNeue;text-align: center;}
.paging li{float: left;border-radius: 3px;}
.paging li a{width:36px;height:32px;line-height:32px; display:inline-block;border-right:1px solid #dddddd;background:#fff;color:#0088d0; }
.paging li a.active,
.paging li a:hover{background:#777;background:#f5f5f5;}
.paging li:last-child a{border-right:none;}

.search-form {position:relative;width:65%;height:35px;margin-top:15px;}
.search-form input[type=text] {width:100%; padding:8px 10px;background-color: #ffffff;padding-right:40px;box-sizing: border-box;border:1px solid #ccc;border-radius: 3px;outline:none;}
.search-form input[type=text]::placeholder{color:#aaa;}
.search-form input[type=text]:-ms-input-placeholder{color:#aaa;}
.search-form input[type=text] ::-ms-input-placeholder{color:#aaa;}
.search-form input[type=image] {position:absolute;top:10px;right:10px;outline:none;}

/*page - 공지사항 */
.content.noti .header{margin: 25px 0 0;padding-bottom: 10px;border-bottom: 1px solid #e1e1e1;}
.content.noti .header .subject{font-size:1.2em;font-weight:normal;margin-bottom: 10px;}
.content.noti .header span{font-size: .8em;color:#9f9f9f;display: inline-block;margin-right:10px;}
.content.noti .content{padding:25px 0;font-size:.9em;min-height: 300px;}
.content.noti .file{padding:15px 20px;background:#f4f4f4;font-size:.9em;color: rgba(34, 34, 34, 0.66);border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);}
.content.noti .file a{text-decoration: underline;display: inline-block;padding-left: 20px;color:#222;}


/*page - 환불규정 */
#main.comm .content.rule{margin:40px auto;font-size:.8em;}
#main.comm .content.rule h4{font-weight: normal;margin-bottom: 25px;color:#222;}
#main.comm .content.rule p{color:#747474;line-height: 1.5em;}


/*page - 이벤트 */
#main.comm .event-list li{width:100%;background:#fff;border:1px solid #e1e1e1;margin-bottom: 15px;}
#main.comm .event-list li .img{width:100%;display:inline-block;vertical-align: top;}
#main.comm .event-list li .img img{width:100%;display:block;margin:0;padding:0;}
#main.comm .event-list li .info{width:100%;padding:15px;display: inline-block;font-size: .7em;}
#main.comm .event-list li .info h4{padding-bottom: 7px;}
#main.comm .event-list li .info p{color:#aaa;margin-bottom: 13px;} 
#main.comm .event-list li .info span.date{color:#ff7d27;}
#main.comm .event-list li .info a.button{margin-bottom:-2px;}
#main.comm .event-list li.close{background:#ebebeb;}
#main.comm .event-list li.close .img{opacity: .3;}
#main.comm .event-list li.close .info h4{color:#aaa;}

#main .event .header{padding:0  10px 10px;}
#main .event .header .subject{font-size:1em;font-weight:normal;margin-bottom: 10px;}
#main .event.review .header .subject{font-weight: bold;}
#main .event .header .date{font-size: .8em;color:#4692e0;display: inline-block;margin-top:-25px;}
#main .event.review .header .date{color:#5b7c8e;}
#main .event .content{padding:20px 0;font-size:.8em;min-height: 300px;border-bottom: 1px solid #e1e1e1; color:#3a3a3a;}
#main .event .file{padding:15px 20px;background:#f4f4f4;font-size:.9em;}
#main .event .file a{text-decoration: underline;display: inline-block;padding-left: 20px;}


/*page - faq */
#main.comm .content.faq > .search{width:100%;margin-bottom: 20px;padding:24px 28px; background:#ececec  url('../images/comm/bg_search.png') no-repeat;background-position: 100% 105%; background-size:128px;overflow: hidden; }
#main.comm .content.faq > .search h5{margin-bottom: 10px;}
#main.comm .content.faq > .search div.form-area{background:#0f2345;width:100%;height:33px;margin-bottom:11px;position: relative;padding-right:55px;}
#main.comm .content.faq > .search div.form-area input{width:100%;height:24px;margin:4px;padding-left:10px;box-sizing: border-box;}
#main.comm .content.faq > .search div.form-area button{width:50px;height:30px;font-size:.8em;text-align:center; display:block;color:#fff;background:#0f2345;outline:none;border:none;position: absolute;top:0;right:0;}
#main.comm .content.faq > .search p{color:rgba(15, 35, 69, 0.5);font-size:.65em;}
#main.comm .content.faq > .quick{overflow: hidden;margin-bottom: 17px;background:#fff;border-top:1px solid #d5d5d5;border-left:1px solid #d5d5d5;}
#main.comm .content.faq > .quick a{height:36px;width:33.333%;line-height:36px; display:block;float: left;text-align:center; font-size:.75em;color:#939393;box-sizing:border-box;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;}
#main.comm .content.faq > .quick a.active,
#main.comm .content.faq > .quick a:hover{border:3px solid #ff7d27;box-sizing: border-box;font-weight:bold;color:#ff7d27;}
#main.comm .content.faq > .faq-list{overflow: hidden;border:1px solid #ddd;}
#main.comm .content.faq > .faq-list img{width:initial;}
#main.comm .content.faq > .faq-list .faq-item header{position:relative;border-bottom:1px solid #e4e4e4;cursor: pointer;}
#main.comm .content.faq > .faq-list .faq-item header i.qu{font-weight:bold;color:#01a210;display:inline-block;margin-right:4px;}
#main.comm .content.faq > .faq-list .faq-item header h4{font-weight:normal;font-size:.9em;padding:15px;padding-right: 30px;}
#main.comm .content.faq > .faq-list .faq-item header .icon-arrow{display: block;position: absolute;top:25px;right:15px;transition: .5s;}
#main.comm .content.faq > .faq-list .faq-item header.active .icon-arrow{transform:rotate(180deg);}

#main.comm .content.faq > .faq-list .faq-item article{display:none;}
#main.comm .content.faq > .faq-list .faq-item article.active{display:block;}
#main.comm .content.faq > .faq-list .faq-item article > div{position:relative;min-height:80px;height:100%; font-size: .8em;line-height: 1.5em; background:#f8f8f8;padding:15px 20px 15px 35px;color:#747474;border-bottom:1px solid #e4e4e4;}
#main.comm .content.faq > .faq-list .faq-item article > div i.an{font-weight:bold;color:#3f7ad2;position: absolute;top:15px;left:15px;}

/*page - 내강의실 - 수강정보 */
#main.my .content dl{border-top:1px solid #ddd;font-size: .8em;padding:20px 15px;overflow: hidden;}
#main.my .content dl:first-child{border-top:none;}
#main.my .content dl dt{width:90px;color:#a9a9a9;font-weight: bold;display:block;float: left;padding:2px;}
#main.my .content dl dd{color:#494949;display:block;padding:2px;}
#main.my .content dl dd::after{clear: both;}

/*page - 내강의실 - 정보수정 */
#main.my .content .message{margin:25% auto;text-align: center;}
#main.my .content .message h4{margin-bottom: 28px;line-height: 1.5em;}

ul.list.bbs li{padding:0;}
ul.list.bbs li > header{position:relative;cursor: pointer;padding:15px 25px 15px 18px;}
ul.list.bbs li > header i.qu{font-weight:bold;color:#01a210;display:inline-block;margin-right:4px;}
ul.list.bbs li > header h4{font-weight:normal;font-size:.9em;padding:15px;padding-right: 30px;}
ul.list.bbs li > header .icon-arrow{width:initial; display: block;position: absolute;top:35px;right:15px;transition: .2s;}
ul.list.bbs li.active > header .icon-arrow{transform:rotate(180deg);}
ul.list.bbs li > article{border-top:1px solid #ddd;padding:15px 18px;position:relative;min-height:80px;height:100%; font-size: .8em;line-height: 1.5em; background:#f8f8f8;display:none;}
ul.list.bbs li.active > article{display: block;}
ul.list.bbs li > article > .question{margin-bottom:20px}

/*page - 내강의실 - 교재주문 */
#main.my .content .order{padding:24px 18px;color:#545454;margin-bottom: 10px;}
#main.my .content .order img{width:40px;}
#main.my .content .price{color:#000;display:block;}

/*page - 우수회원 인터뷰 */
#main.review .review-list{text-align: left;}
#main.review .review-list li{width:100%;background:#fff;margin-bottom: 30px;}
#main.review .review-list li .img{width:100%;display:inline-block;vertical-align: top;}
#main.review .review-list li .img img{width:100%;display:block;}
#main.review .review-list li .info{width:100%;padding:30px 0;display: inline-block;font-size: .8em;}
#main.review .review-list li .info h3{padding-bottom: 15px;font-size: 1.2em;}
#main.review .review-list li .info p{color:#aaa;margin-bottom:20px;;line-height: 1.5em;} 
#main.review .review-list li .info span.date{color:#5b7c8e;}

/*page - 성공수강후기 */
#main.review .best .best-list{width:100%;background:#e7eeef;display:inline-block;vertical-align: top;position: relative;text-align:center;}
#main.review .best .best-list .slider{width:100%;}
#main.review .best .best-list .bx-wrapper,
#main.review .best .best-list .bx-viewport{height:100% !important;margin:10px auto;clear: both;}
#main.review .best .best-list .slider .slider-item{width:100%;margin:20px auto;}
#main.review .best .best-list .slider .slider-item h4{margin-bottom: 20px;position: relative;display: inline-block;text-align: center;}
#main.review .best .best-list .slider .slider-item h4::after{content:'';position: absolute;left:0;bottom:0; width:100%;height:9px;background: #f6c355;opacity: .8;z-index: -1;}

#main.review .best .best-list .slider .slider-item a{width: 80%;font-size:.75em; display: block;background: #fff;padding:8px 12px;margin: 0 auto;text-align: left;border-bottom: 1px solid #d9e2e3;color:#000;}
#main.review .best .best-list .slider .slider-item b{color:#ff7d27;display: inline-block;padding-right: 8px;}
#main.review .best .best-list .slider-control{width:100%;padding:0 5px;position: absolute;top:50%;margin-top:-20px;}
#main.review .best .best-list .slider-control > a{display: block;width:20px;height:39px;background:url('../images/review/btn_arrow_right.png') no-repeat;}
#main.review .best .best-list .slider-control > a.prev{background:url('../images/review/btn_arrow_left.png') no-repeat;}
#main.review .best .best-img{width:50%;}

#main.review .review-list2 li{padding:18px 10px 36px; border-top:2px solid #a4a4a4;text-align: left;}
#main.review .review-list2 li:last-child{border-bottom:2px solid #a4a4a4;}
#main.review .review-list2 li > header{padding-bottom: 18px;border-bottom:1px solid rgba(0,0,0,.1);}
#main.review .review-list2 li > header h4{font-weight: normal;font-size: 1em;margin-bottom: 15px;}
#main.review .review-list2 li > header p{font-size: .7em;color:#6e6e6e;}
#main.review .review-list2 li > article{padding:18px 0;color:#aaa;font-size: .8em;line-height: 1.5em;height:85px;overflow: hidden;}
#main.review .review-list2 li > article.active{overflow: auto;height:100%;}
#main.review .review-list2 li > .btn-area{margin-top:20px;}
#main.review .review-list2 li > .btn-area a.more{font-size:.8em;color:#287bec}
#main.review .review-list2 li > .btn-area a.btn-like{font-size:.8em; display:inline-block;padding:4px 12px;border:1px solid #ef5757;border-radius: 3px;color:#ef5757;background:#fff;transition: all ease-in 0.3s;-webkit-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}
#main.review .review-list2 li > .btn-area a.btn-like.active,
#main.review .review-list2 li > .btn-area a.btn-like:hover{background: #ef5757;color:#fff;}
#main.review .review-list2 li > .btn-area a.btn-like > i.icon-like{width:14px;height:13px;display:inline-block;margin-bottom:-2px;margin-left:5px; background:url('../images/review/icon_like_selected.png') no-repeat;}
#main.review .review-list2 li > .btn-area a.btn-like.active > i.icon-like,
#main.review .review-list2 li > .btn-area a.btn-like:hover > i.icon-like{background: url('../images/review/icon_like.png') no-repeat;}

/* login */
#main.login .container{width:100%;max-width:360px; text-align:left;margin:0 auto;}
#main.login .header{padding:20px 0;position: relative;}
#main.login .header h1{font-size:1.8em;}
#main.login .header i.line{width:28px;height:4px;background:#ff7d27;display: block;position: absolute;top:0;left:0;}
#main.login h4{margin-bottom: 10px;font-size:1em;position: relative;font-weight: normal;}
#main.login input,
#main.login .button{margin-bottom: 30px;border-radius: 1px;}
#main.login .required-msg{font-size: .75em;color:#1285d6;position: absolute;bottom:0;right:0;}
#main.login input.input::placeholder{font-size:.8em;}
#main.login input.input:-ms-input-placeholder{font-size:.8em;}
#main.login input.input::-ms-input-placeholder{font-size:.8em;}
#main.login .container button.button{font-size: .8em;}

/* 회원가입 */
#main.login .input-hp{margin-bottom:10px;}
#main.login .input-hp > input{width:63%;margin:0;vertical-align: top;}
#main.login .input-hp > button{width:35.3%;height: 44px; padding:0;margin:0; text-align: center;}
#main.login.join u{font-size:.9em;}

/* 아이디/비번찾기 */
#main.login.find .header{height:60px;border-bottom:1px solid #d9d9d9;box-sizing: border-box;text-align:center;}
#main.login.find .header > h2{height:40px;width:40%;cursor: pointer; font-size:1.1em;color:rgba(34, 34, 34, 0.44); display:inline-block;margin:0 10px;}
#main.login.find .header > h2.active{border-bottom: 4px solid #ff7d27;color:#222;}
#main.login.find .header > h2 > a{color:#222;}
#main.login.find .container input.input,
#main.login.find .container button.button{margin-left:0;}
@media only screen and (max-width: 320px) { 

    #main.login.find .header > h2{font-size:1em;;margin:0;}
    #main.login .container input.input,
    #main.login .container button.button{font-size: .8em;}    
    #main.login .container button.button{height:40px;}
}
 

/*common - property*/
ul.form-list{width:100%;height:100%;border:1px solid #ddd;border-top:none;}
ul.form-list li{padding:15px;font-size:.8em;border-top:1px solid #ddd;}
ul.form-list li .subject{padding-right:30px;}
ul.form-list li input,
ul.form-list li textarea,
ul.form-list li .select{margin-top:5px}
ul.form-list li textarea{font-size:12px;}

table.table-list{width:100%;height:100%; font-size:.8em; background-color: transparent;clear: both;border-collapse: collapse;}
table.table-list > tbody{background:#fff;}
table.table-list th,
table.table-list td{padding:15px 0;text-align: left;vertical-align:middle;}
table.table-list th{font-weight: bold;color:#222;}
table.table-list td{border-bottom:1px solid #ececec;}
table.table-list thead th{padding-top:0;}
table.table-list tfoot th{border-top:2px solid #ff7d27;color:#ff7d27;padding-bottom: 0;}
table.table-list.cont td{padding-left:15px;padding-right: 18px;}

label.checkbox-icon{display:inline-block;cursor:pointer;margin:8px 0;}
label.checkbox-icon input{display:none;visibility:hidden;}
label.checkbox-icon i{ width: 19px; height: 18px;padding-right:25px; display: inline-block; background: url('../images/icon_check.png') no-repeat;vertical-align:middle;}
label.checkbox-icon input:checked ~ i{background: url('../images/icon_check_on.png') no-repeat;}

label.radio-icon{display:inline-block;cursor:pointer;margin:8px 0;}
label.radio-icon input{display:none;visibility:hidden;}
label.radio-icon i{ width: 29px; height: 29px;padding-right:40px; display: inline-block; background: url('../images/icon_radio.png') no-repeat;  background-size: 29px; vertical-align:middle;}
label.radio-icon input:checked ~ i{background: url('../images/icon_radio_on.png') no-repeat; background-size: 29px;}

label.checkbox-icon.ty2 i{width:21px;height:21px;display: inline-block; background: url('../images/icon_checkbox.png') no-repeat;background-size:21px 21px; vertical-align:top;}
label.checkbox-icon.ty2 input:checked ~ i{background: url('../images/icon_checkbox_on.png') no-repeat;background-size:21px 21px;}
label.checkbox-icon.ty2.m20 i{margin-left:20px;}
label.checkbox-icon.ty2.m5{margin-top:-5px;}
.ie8 label.checkbox-icon input{display:inline;visibility:visible;}
.ie8 label.checkbox-icon i{display:none;visibility:hidden;}
.ie8 label.radio-icon input{display:inline;visibility:visible;}
.ie8 label.radio-icon i{display:none;visibility:hidden;}
.ie8 label.checkbox-icon.ty2 input{display:inline;visibility:visible;}
.ie8 label.checkbox-icon.ty2 i{display:none;visibility:hidden;}

.box{border: 1px solid #ddd;box-sizing: border-box;}
.box.ty1{padding:17px 18px;}
.box.ty2{padding:27px 18px;}
.btn{display:inline-block !important;padding:6px 22px !important;border-radius:3px !important;font-weight:bold !important;text-align:center;box-shadow: 0px 5px 7px 0 rgba(0, 0, 0, 0.07);font-size:14px;}
.btn.accent{height:30px; background:#ff7d27 !important;border:1px solid #e56511 !important;color:#fff !important;}
.btn.large{width:80%;height:50px;font-size:1em;line-height:50px;padding:0 2px !important;letter-spacing: 1px;margin:20px auto;}
i.point{display:inline-block; font-style: normal;font-weight:bold;color:#ff7d27;vertical-align: top;margin-top:.2em;padding-right: .2em;}
i.point.tran{color:transparent;}
.mute{color:#aaa;font-weight: bold;font-size: .8em;display: inline-block;padding-top:10px;}
.payment{margin-top:20px;margin-bottom: 50px;text-align:left;}
.payment .pay-msg{color:#ccc;font-size:.8em;vertical-align:middle;font-weight:normal;padding-left:45px;padding-right:15px;display:none;}
.payment .pay-msg strong{color:#ff7d27;}

img.icon-btn{display: inline-block;margin-right:10px;width:10px;}
i.line-title{width:16px;height:3px;background:#ff7d27;display: block;margin-bottom:5px;}

.bg-gray-dark{background: #f4f4f4;}
.bg-gray{background: #f5f5f5;}
.bg-gray2{background: #f6f6f6;}
.bg-gray-light{background: #f8f8f8;}
.bg-orange{background: #ff7d27}
.bg-yellow{background: #fac73f}
.bg-blue-dark{background: #4b6483}
.bg-yellow{background:#fac73f;}
.text-orange{color: #ff7d27 !important}
.text-white{color:#fff;}
.text-black{color:#222222 !important;}
.text-dark{color:#aaaaaa !important;}
.text-gray{color:#8a8a8a !important;}
.text-blue{color:#199bcb !important;}
.text-blue-dark{color:#297fcf !important;}
.text-dark-dark{color:#737373;}

.m-t-15{margin-top:15px !important;}
.m-t-30{margin-top:30px !important;}
.m-t-60{margin-top:60px !important;}
.m-b-20{margin-bottom:20px !important;}
.m-b-30{margin-bottom:30px !important;}
.m-b-40{margin-bottom:40px !important;}
.m-t-b-60{margin-top:60px !important;margin-bottom:60px !important;}
.p-t-60{padding-top: 60px !important;}
.p-t-b-60{padding-top: 60px !important;padding-bottom: 60px !important;}
.p-l-r-15{padding-left:15px !important; padding-right:15px !important;}
.p-t-b-30{padding-top:30px !important;padding-bottom:30px !important;}

a.button.cancel{background-color:#959595;color:#fff;font-weight:normal;}
a.button{font-weight:normal;}
video {
	object-fit: cover; /*to cover all the box*/
}


aside.contact a.btn-contact{width:80px;height:160px;position:fixed;bottom:40px;right:40px; cursor:pointer;background:url('/images/coun_1.png') no-repeat center; display:inline-block;text-indent:-9999px;font-size:0;overflow:auto;z-index:9999;opacity:1;transition:.25s ease-out;transform:scale(1);}

aside.contact .contack-form{width:600px;font-size:1em; background:#fff;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);position:fixed;bottom:40px;right:40px;opacity:0;transition:.25s ease-out;transform:scale(0);transform-origin:100% 100%; z-index:9999;}
aside.contact .contack-form .btn-close{position:absolute;top:10px;right:10px;}
aside.contact .contack-form form{padding:0;margin:0;}
aside.contact .contack-form form h1{color:#DA8432;margin-top:55px;margin-bottom:20px;position:relative;width:100%;text-align:center;}
aside.contact .contack-form form h1:after{content:'';width:140px;height:3px;background:#000;position:absolute;bottom:-40px;left:50%;margin-left:-70px;}
aside.contact .contack-form .wrap-form{padding:50px 50px 20px 50px;}
aside.contact .contack-form .wrap-form table{width:100%;table-layout:fixed;border-collapse:collapse;}
aside.contact .contack-form .wrap-form table td{height:60px;text-align:left;padding:10px;vertical-align:middle;}
aside.contact .contack-form .wrap-form table td.title{width:30%;height:100%;}
aside.contact .contack-form .wrap-form table td.title.top{vertical-align:top;padding-top:20px;}
aside.contact .contack-form .wrap-form table td.info{padding:0 0 0 10px;vertical-align:top;}
aside.contact .contack-form .wrap-form table td.info span{font-size:.7em;letter-spacing:-0.5px;}
aside.contact .contack-form .wrap-form table td.info br {content: "";margin: -.7em;display: block;}
aside.contact .contack-form .wrap-form table td.info div{margin-top:20px;font-size:.7em;}
aside.contact .contack-form .wrap-form table td input[type=text],
aside.contact .contack-form .wrap-form table td input[type=tel],
aside.contact .contack-form .wrap-form table td select,
aside.contact .contack-form .wrap-form table td textarea{width:95%;height:100%;padding-left:5%;}
aside.contact .contack-form .wrap-form table td input[type=checkbox]{display:inline-block;transform:scale(1.2);vertical-align:middle;}
aside.contact .contack-form button[type=submit]{width:100%;height:80px;line-height:80px; display:block;background:#DA8432;color:#fff;font-size:1.8em;border:none;outline:none;cursor:pointer;font-weight:bold;}
aside.contact.active a.btn-contact{transition:.25s ease-out; opacity:0;transform:scale(0);}
aside.contact.active .contack-form{opacity:1;transition:.25s ease-out;transform:scale(1);transform-origin:100% 100%;}
@media only screen and (max-width: 1200px) {
	aside.contact.mobile a.btn-contact{width:40px;height:54px;bottom:0;right:0;background:url('/images/coun_2.png') no-repeat center;background-size:cover;}
	aside.contact.mobile .contack-form{width:90%;font-size:.7em;bottom:0;right:0;}
	aside.contact.mobile .contack-form form h1{color:#DA8432;margin-top:24px;margin-bottom:8px;position:relative;width:100%;text-align:center;font-size:1.4em;}
	aside.contact.mobile .contack-form form h1:after{content:'';width:60px;height:2px;background:#000;position:absolute;bottom:-16px;left:50%;margin-left:-30px;}
	aside.contact.mobile .contack-form .wrap-form{padding:20px 10px 8px 10px;}
	aside.contact.mobile .contack-form .wrap-form table td{height:40px;padding:5px;}
	aside.contact.mobile .contack-form .wrap-form table td.info div{margin-top:10px;font-size:.7em;}
	aside.contact.mobile .contack-form .wrap-form table td.title.top{vertical-align:top;padding-top:10px;}
	aside.contact.mobile .contack-form button[type=submit]{width:100%;height:40px;line-height:40px;font-size:1.2em;}
}

#tuto {position:relative;}
#tuto > sup{ font-size:12px;font-weight:normal; display:inline-block;height:20px;position: absolute;top:-5px;white-space: nowrap;color: #ff7d27;border-radius: 4px;margin-left:4px;transform: rotate(-4deg);-webkit-transform:rotate(-4deg);}

.none{display:none !important;}
.toggle-button-group {display: flex;margin-bottom:10px;}
.toggle-button {border: none;background-color: #ddd;color: #555;padding: 10px 15px;cursor: pointer;flex: 1;	text-align: center;font-size:1rem}
.toggle-button.active {background-color: #ff7d27;color: #fff;}