@charset "utf-8";


/*
    화면 1024px 이상    `
*/
@media screen and (min-width: 1024px) {
    #header {
        height: 150px;
    }

    #contentWrap1 #contentWrap_main1:first-child {
        height: 300px;
    }

    #contentWrap_main1{
        width: 100%;
    }
    #header .headerWrap .headertop, .top_gnb > ul, .main_title, #footer .footerWrap, #contentWrap, .contents {
        width: 1200px;
    }

    #contentWrap.clroomWrap {
        width: 980px;
    }

    #contentWrap.clroomWrap .contents {
        width: 777px;
    }

    .top_gnb > ul > li, .main_iconmenu ul, .content_mid li {
        float: initial;
        display: inline-block;
    }
    #contentWrap_main1 ul li{
        display: inline-block;
        float: inherit;
        width: 23%;
    }

    .top_gnb > ul > li {
        position: relative;
        width: 18%;
        padding-left: 0px;
    }
    .top_gnb > ul > li:last-child {
        width: 5%;
    }

    .top_gnb > ul > li a {
        text-align: left;
    }

    .main_iconmenu {
        width: 100%;
        height: auto;
    }

    .main_iconmenu > ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    #contentWrap_main1 ul li .main_iconmenu li {
        position: relative;
        width: 20%;
        height: auto;
    }
    .main_iconmenu li a{
        display: block;
    }
    .main_iconmenu li img{
        width: 100%;
    }
    #contentWrap1 {
        height: auto;
    }

    .list_line3 li {
        width: 24%;
    }

    .list_line3 dl, .list_line3 dd span {
        width: 100%;
    }

    .list_line3 li:last-child {
        margin-right: 0;
    }

    #allList a {
        display: block;
        width: 100%;
    }

    .program_list dt > img {
        width: 100%;
        height: 200px;
    }

    .mainBox.visual {
        width: 1200px;
        height: 300px;
        margin: 0 auto;
        float: initial;
    }

    .slider li img {
        width: 100%;
        height: 450px;
    }

    .root_daum_roughmap {
        margin: 0 auto ! important;
    }

    .trust li .stepIcon, .trust li .stepText {
        text-align: left;
    }

    .horizontalList .btnHorizon {
        float: right;
    }

    .tm {
        width: 200px;
        background-color: #f5f5f5;
        height: auto;
    }
    .tm2{
        position: fixed;
        background-color: #222222;
    }
    .ddm{
        width: 100%;
    }
    .gnb{
        border-bottom: 3px solid #222222;
    }

    .ddm ul li {
        float: initial;
        padding: 5px 18px;
    }

    .dropDown li:hover {
        background-color: #e8e8e8;
    }

    .ddm .dropDown li:hover a {
        font-weight: 600;
    }
    .horizontalList .listImage{
        width: 320px;
        height: 180px;
    }
    .detail .imageBox .images{
        width:400px;
        height: 228px;
    }
    .detailText{
        width: 750px;
    }

    .quick{
        background: none;
        top: 50%;
        transform: translateY(-50%);
    }
    .btnQuick{
        /*display: none;*/
    }
    .quick .title{
        width: 121px;
        height: 41px;
    }
    .quick ul{
        background:url('../../html/images/ryan/quick_border.png') no-repeat;
        background-color: #fff;
    }
    .quick:hover ul{
        background:url('../../html/images/ryan/quick_border_hover.png') no-repeat;
        background-color: #fff;
    }
    .quick:hover .title{
        background: url('../../html/images/ryan/quick_title_hover.png') center no-repeat;
    }

    .quick li{
        padding: 35px 0;
        /*border: 2px solid #179ADA;*/
        border-top: none;
        border-bottom: none;
        position: relative;
    }
    .quick li:nth-child(2){
        padding: 22px 0;
    }
    .quick li:nth-child(3){
        padding: 41px 0;
    }
    .quick li:nth-child(4){
        padding: 36px 0;
    }
    .quick li:after{
        content: "";
        position:absolute;
        display: block;
        bottom:0;
        left:50%;
        transform: translateX(-50%);
        width: 65%;
        height: 1px;
        background-color: #CCCCCC;
    }
    .quick li:nth-child(4):after{
        display: none;
    }
    .quick li:hover {
        border-color: #3E3484;
    }

    .quick li:nth-child(2) a span{
        bottom:2px;
    }
    .quick li a {
        position: relative;
        display: block;
        width: 48px;
        height: 71px;
        margin: 0 auto;
        /* border: 1px solid #d0d3d5; */
        background: url('../../html/images/ryan/icon_quick01.png') center no-repeat;
        border:none;
    }
    .quick li a:hover{
        background: url('../../html/images/ryan/icon_quick01_hover.png') center no-repeat;
    }
    .quick li a span {
        position: absolute;
        bottom: 13px;
        display: block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        display: none;
    }
    .quick li:nth-child(2) a {
        width: 94px;
        height: 96px;
        background: url('../../html/images/ryan/icon_quick02.png') center no-repeat;
    }
    .quick li:nth-child(3) a {
        width: 68px;
        height: 59px;
        background: url('../../html/images/ryan/icon_quick03.png') center no-repeat;
    }
    .quick li:nth-child(2) a:hover {
        width: 94px;
        height: 96px;
        background: url('../../html/images/ryan/icon_quick02_hover.png') center no-repeat;
    }
    .quick li:nth-child(3) a:hover {
        width: 68px;
        height: 59px;
        background: url('../../html/images/ryan/icon_quick03_hover.png') center no-repeat;
    }
    /*
    .quick li:nth-child(4){
        border-bottom: 2px solid #179ADA;
        border-bottom-left-radius: 15%;
        border-bottom-right-radius: 15%;
    }
    */
    .quick li:nth-child(4) a {
        width: 47px;
        height: 68px;
        background: url('../../html/images/ryan/icon_quick04.png') center no-repeat;
    }
    .quick li:nth-child(4) a:hover{
        width: 47px;
        height: 68px;
        background: url('../../html/images/ryan/icon_quick04_hover.png') center no-repeat;
    }
    .quick li:nth-child(5) a {
        background: url('../../html/images/ryan/icon_quick05.png') center no-repeat;
    }
    .quick li:nth-child(6) a {
        background: url('../../html/images/ryan/icon_quick06.png') center no-repeat;
    }
    .quick .btnQuick {
        position: absolute;
        top: 37%;
        left: -24px;
        width: 24px;
        height: 120px;
        background: url('../../html/images/ryan/btn_quick.png') center center no-repeat;
		border: 1px solid #179ada;
		border-right:none;
    }
    .quick.on .btnQuick {
        background: url('../../html/images/ryan/btn_quick_on.png') center center no-repeat #fff;
    }
    .quick .title{
        background: url('../../html/images/ryan/quick_title.png') center no-repeat;
        text-indent: -9999px;
    }

    #courseTab .on{
        border-bottom: 4px solid #222222;
    }
    #contentWrap_main1 > h2{
        line-height: 50px;
        font-size: 30px;
        border-bottom: 4px solid #222222;
        display: inline-block;
        font-weight: 600;
        margin-bottom: 40px;
    }

    /*
        btn 애니메이션
    */
    .main_iconmenu li span{
        display: block;
        position: absolute;
        bottom: 23px;
        color: #fff;
        padding: 1px 25px 1px 15px;
        border: 1px solid #fff;
        left: 50%;
        transform: translateX(-50%);
    }
    .main_iconmenu li span:after{
        content: "";
        position: absolute;
        top:8px;
        right: 11px;
        width: 4px; /* 사이즈 */
        height: 4px; /* 사이즈 */
        border-top: 2px solid #fff; /* 선 두께 */
        border-right: 2px solid #fff; /* 선 두께 */
        display: inline-block;
        transform: rotate(45deg); /* 각도 */

    }
    
    .main_iconmenu li span:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: transparent;
        -webkit-transform: scaleY(.3);
        transform: scaleY(.3);
        opacity: 0;
        transition: all .3s;
    }
    .main_iconmenu li:hover span{
        outline-width: 0;
        color:#3E3484;
        font-weight: 600;
    }
    .main_iconmenu li:hover span:before{
        opacity: 1;
        background-color: #fff;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
        transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity
    }
    .main_iconmenu li:hover span:after{
        border-color:#3E3484;
    }

    .content_mid{
        height: auto;
        padding: 0 0 50px 0;
    }
    #footer .link{
        border: solid #707070;
        background: #666666;
        color:#fff;
    }
    #footer .link a{
        color: #fff;
        font-weight: 500;
    }
    .footerWrap{
        font-weight: 500;
    }
    .content_mid ul{
        width: 288px;
        margin: 0 16px 0 0;
    }
    .content_mid li{
        background-color: #fff;
        padding: 20px 27px 36px 24px;
    }
    .content_mid li div:nth-child(1){
        margin-bottom: 50px;
    }
    .content_mid li p:nth-child(2){
        font-size: 35px;
        line-height: 40px;
        margin-bottom: 45px;
    }
    .content_mid li p:nth-child(3){
        text-align: left;
        color: #999999;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .content_mid li p:nth-child(4){
        font-size: 12px;
        text-align: left;
        color: #999999;
    }
    .btn_go_box{
        text-align: center;
    }
    .notice{
        width: 450px;
        height: 100%;
        padding: 0;
    }
    .notice .list{
        border-top: 2px solid #179ADA;
        text-align: left;
        height: 200px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .notice .list li{
        padding: 8px 0;
    }
    .notice .list li a{
        line-height: 22px;
    }
    .notice .list li img{
        vertical-align: top;
    }
    

    .new_sitemap{
        width: 1200px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .new_sitemap h2{
        line-height: 50px;
        font-size: 30px;
        border-bottom: 4px solid #222222;
        display: inline-block;
        font-weight: 600;
        margin-bottom: 20px;
        text-align: center;
    }
    .sitelist_box{
        display: flex;
        justify-content: space-between;
    }
    .sitelist_01{
        width: 15%;
    }
    .sitelist_01 span{
        color:#777;
        font-size: 18px;
        margin-bottom: 15px;
        display: inline-block;
    }
    .sitelist_01 ul{
        width: 100%;
    }
    .sitelist_01 ul li{
        display: block;
        padding: 0;
        font-size: 16px;
        margin-bottom: 8px;
        background-color: transparent;
    }
    .sitelist_01 ul li a{
        color:#999;
    }
    .family-site{
        width: 170px;
        padding: 0 9px;
        box-sizing: border-box;
        position: relative;
    }
    .combo-box{
        width: 146px;
        height: 26px;
        box-sizing: border-box;
        border-radius: 2px;
        border: 1px solid #ccc;
        padding: 0 10px;
        font-size: 12px;
        color: #666;
        font-weight: 700;
        line-height: 24px;
        cursor: pointer;
        position: relative;
        margin-left: auto;
    }
    .combo-box:after{
        content: "";
        width: 5px;
        height: 4px;
        border-top: 2px solid #868686;
        border-right: 2px solid #868686;
        position: absolute;
        top: 7px;
        right: 10px;
        transform: rotate(135deg);
    }
    .mainBox.visual.small_banner{
        width: 903px;
        height: 190px;
        float: initial;
        margin: 0 auto;
    }
    .mainBox.visual.small_banner .bx-viewport{
        height: 190px !important;
    }
    .mainBox.visual.small_banner .slider li img{
        height: 190px !important;
    }

    .popup_01{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width: 750px;
        height: 854px;

    }

    .mainLogin{
        position: sticky;
        height: 100%;
        background-size: cover;
    }
    
    .call-box > ul > li{
        border: 1px solid #dddddd;
    }
    .call-box div span{
        display: flex;
    }
    .call-box div span a{
        /*background-size: contain;*/
        background-repeat: no-repeat;
        background-position: center;
    }
    .call-box div span:first-child a{
        background-image: url(../../html/images/ryan/icon_bo_01.png);
        
    }
    .call-box div span:nth-child(2) a{
        background-image: url(../../html/images/ryan/icon_bo_02.png);
    }
    .call-box div  div a:first-child{
        background-image: url(../../html/images/ryan/icon_bo_03.png);
        /*background-size: contain;*/
        background-repeat: no-repeat;
    }
    .call-box div  div a:nth-child(2){
        background-image: url(../../html/images/ryan/icon_bo_04.png);
        /*background-size: contain;*/
        background-repeat: no-repeat;
    }


    .btn_cross {
        background: #fff;
        height: 20px;
        position: relative;
        width: 2px;
        display: inline-block;
      }
    .btn_cross:after {
        background: #fff;
        content: "";
        height: 2px;
        left: -10px;
        position: absolute;
        top: 10px;
        width: 22px;
      }


    /* banner style custom */
    .banner_twoitems {
        display: flex;
        align-items: center;
        justify-content: space-between;        
    }
    .banner_twoitems > button {
        width: 675px;
        height: 190px;
        overflow: hidden;
        position: relative;
        padding: 0;
    }
    .banner_twoitems > button > img {
        position: absolute;
        top: 0;
        left: -147px;
        right: 0;
        bottom: 0;
        width: 896px;
    }
    .small_banner_thumb  {
        width: 220px !important;
        height: 190px;        
    }
}